davidtouvet.com/blog

Bonne trouvaille que cette page “Redirection Web en HTTP et HTML“. On trouve toutes les informations nécessaires à la gestion des changements d’adresse d’un site Web lorsqu’on est contraint de déplacer des pages, des répertoires, des sites web complets ainsi que les changements d’extensions des fichiers.

Je vais présenter ici la gestion des changements d’adresse d’un site Web.
Sont concernés les changements de nom de domaine, d’hébergeur, déplacement de pages, de documents ou de répertoires, suppression de documents ou de répertoires, etc.

Bien sûr, il faut prévoir, lors de la conception d’un site, une arborescence suffisamment bien hiérarchisée pour ne pas avoir à déplacer des fichiers. Néanmoins, lorsque cela se produit, une bonne gestion des redirections diminue l’impact négatif, sur les utilisateurs, mais aussi sur les moteurs de recherche.

La philosophie principale est de conserver le plus longtemps possible les redirections, de telle sorte que même les plus anciennes adresses pointent toujours sur le fichier le plus pertinent.

Je vais présenter ici les différentes méthodes dans plusieurs situations.

Ecrire le HTML, didacticiel créé en 1994 date un peu mais reste une excellente ressource pour des personnes désirant débuter avec le langage HTML:

ECRIRE LE HTML A ETE CREE pour aider les enseignants à mettre au point des méthodes d’apprentissage permettant d’accéder à l’information sur Internet. Dans ce cours, vous allez créer une leçon appelée Web Volcan. Néanmoins, ce didacticiel est destiné à tous ceux qui veulent créer des pages web. (…) Quand vous serez arrivé à la fin de ce didacticiel, vous serez en mesure de créer une série de pages web inter-reliées sur n’importe quel sujet incluant du texte formaté, des images et des liens hypertextes vers d’autres pages sur Internet.

Je vous conseille de commencer par lire la page “A propos” de Ecrire le HTML puis de passer à l’index des leçons de Ecrire le HTML.

J’étais déjà tombé il y a quelques temps sur le projet S⁵. Cette fois-ci je m’y suis plongé sérieusement car je dois réaliser une présentation dans le cadre de mon travail au Centre NTE. Normalement, quand on veut effectuer une présentation, on ouvre une application “à la Powerpoint” (j’utilise personnellement “Presentation” de OpenOffice.org). Ces logiciels ont depuis longtemps apporté leurs preuves mais nécessitent une prise en main plus ou moins longue. S⁵ permet de réaliser une présentation très facilement pour peu que l’on connaisse un minimum de HTML.

Mais laissons Eric Meyer, le créateur de S⁵ présenter ce projet:

S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible. Anyone with even a smidgen of familiarity with HTML or XHTML can look at the markup and figure out how to adapt it to their particular needs. Anyone familiar with CSS can create their own slide show theme. It’s totally simple, and it’s totally standards-driven.

Serge K. Keller a trouvé le projet S⁵ tellement génial qu’il a choisi de le traduire en français. Voici ce qu’il en pense:

Il s’agit d’un système de présentation “à la PowerPoint” utilisant un seul fichier XHTML pour son contenu et quelques feuilles de style CSS pour la présentation. Le résultat? Une présentation professionnelle, avec une version imprimable à distribuer à vos auditeurs et une projection vidéo tout en un. Et aucun besoin de logiciels supplémentaires pour utiliser S5! Votre navigateur habituel effectuera tout le travail…

Donc si l’on résume, une présentation réalisée avec S⁵ consiste en un fichier XHTML et un ensemble de feuille de style CSS.

Lire le reste de cet article »

Dans cet article, Raphaël GOETTER dresse la liste des balises et propriétés HTML dépréciées et obsolètes.

Il faut tout d’abord s’interroger sur la raison de la dépréciation de ces propriétés (car il y’en a une !)

L’objectif annoncé des Standards est de faire une séparation stricte entre le contenu et la mise en forme du site web.
En clair : la page HTML ne doit contenir que les textes et autres contenus de façon brute. Séparément, la feuille de style CSS doit contenir toute la mise en forme visuelle de ce contenu (couleurs, tailles, positionnements,…)

Cette séparation Contenu/Forme est instaurée pour faciliter la lecture du code, la mise à jour du site, sa rapidité d’affichage, sa compatibilité et son accessibilité.

En pratique, toute page web sera composée d’une page HTML et d’une feuille de style associée.

De ce fait, toutes les balises et propriétés dépréciées dans le HTML sont autorisées (et conseillées) dans les feuilles de style. Ces dernières permettant en outre des fonctionnalités impossibles à réaliser en HTML pur (configuration des liens hypertextes par exemple) .

Dans son article “Principes Fondamentaux“, Raphael GOETTER se pose la question suivante:

“S’il n’y avait que cinq règles fondamentales à respecter pour produire du HTML correct, quelles seraient-elles ?”, “Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML et s’auto-proclamer “webmaster” ?”

Cette question l’a amené à définir cinq principes fondamentaux, et suffisants, sur lesquels repose la base de tout apprentissage HTML.

• Principe 1 : un code propre: en respectant les règles du langage HTML.
  

  Avoir un code propre est la base principale de tout projet HTML en conformité avec les normes actuelles et futures.

• Principe 2 : un code compréhensible.
  

  Cela implique évidemment une connaissance minimale des balises même (surtout) si on utilise un éditeur WYSIWYG qui génère du code automatique. “Faire des plats cuisinés, c’est bien. Mais c’est toujours mieux d’apprendre à faire la cuisine, même si on ne veux pas devenir un grand chef.”

• Principe 3 : un code simple.
• Principe 4 : un code pertinent.
  

  Avoir un code pertinent et une structure propre va grandement faciliter son Accessibilité et sa diffusion sur le web.

• Principe 5 : un code Accessible.
  

  A nous de rectifier le tir et de rendre nos pages Accessibles à tous en évitant les codes propriétaires (balise MARQUEE,…), les balises obsolètes (FONT, …) qui sont nombreuses.

L’auteur finit par un principe général: “ne jamais imposer une manière de surfer”, ce avec quoi je suis entièrement d’accord, vu mon intérêt pour l’ergonomie des interfaces web.

Voici quelques ressources permettant de concevoir de bons formulaires HTML:

• “Comprendre les formulaires HTML“: bonnes explications pour débutant.
• “Les formulaires HTML” du site “CommentCaMarche.net“: permet d’en savoir un peu plus sur les attributs des différentes balises.
• “Les formulaires“: ressource apportant un éclairage nouveau sur des balises peu utilisées: “fieldset”, “legend” et “optgroup”.
• “Les formulaires” de “l’Altruiste” vient compléter le tout.

(Mise à jour 20041120) Pour ceux qui aimeraient mixer un peu de Javascript avec les formulaires (notons qu’il faudra toujours veiller à valider les données du formulaire du côté serveur dans le cas où l’utilisateur aurait désactivé le Javascript):

• (Mise à jour 20040919) : tutorial montrant comment le javascript entre également en ligne de compte pour gérer des formulaires.
• Javascript enhanced form

Le langage HTML a une manière bien à lui de coder les couleurs. Voici un tableau permettant de s’y retrouver. On peut également consulter la page “les couleurs en HTML” de “CommentCaMarche.net” qui explique comment fonctionne le codage des couleurs.

Lorsqu’on propose un moteur de recherche sur son site, on peut être tenté d’écrire à l’intérieur du champ “recherche” un texte comme par exemple “rechercher sur le site”. Cela permet de supprimer le bouton “rechercher” ce qui peut être parfois pratique pour des questions de design.

Ce petit script permet lors d’un clic dans le formulaire de recherche pour entrer sa recherche de faire disparaître le texte “rechercher sur le site” et éviter ainsi à l’utilisateur de le faire lui-même avant d’entrer sa recherche.

<input type="text" name="recherche" onfocus="if (this.value=='rechercher...') this.value=''" size="10" maxlength="30" value="rechercher..." class="formrecherche">