Informations sur le document et l`indexation
publicité
HTML 4 et CSS 2 Cours 4 Faire acquérir à l'étudiant des connaissances de niveau intermédiaire en programmation HTML et de l'initier aux feuille de style CSS Aujourd’hui • Informations sur le document et l'indexation • Le type MIME • Le rôle du webmestre Informations sur le document et l'indexation L’indexation est une technique informatique qui permet de repérer des éléments significatifs dans un fichier informatique, une page web. Informations sur le document et l'indexation Il existe deux types de balises <META> : • Celles destinées aux moteurs de recherche, du type <META NAME="type de meta" CONTENT="contenu du meta">. • Celles destinées aux serveurs Web, de la forme <META HTTP-EQUIV="type de meta" CONTENT="contenu du meta">. Informations sur le document et l'indexation Exemples de balises destinées aux moteurs de recherche : • <META NAME="author" CONTENT="Francois"> • <META NAME="description" CONTENT="Chasse et pêche Boileau"> • <META NAME="keywords" CONTENT="java, html, applet, developpement"> • <META NAME="ROBOTS" CONTENT="NOINDEX"> Informations sur le document et l'indexation L'attribut NAME peut avoir trois valeurs : • author, l'auteur de la page. • description, la description de la page. • keywords, quelques mots clés pour définir la page. • robots, pour empêcher l’indexation. Informations sur le document et l'indexation Exemples de balises destinées au serveur : • Ces informations sont très spécifiques et directement liées au protocole HTTP. • Ne pas confondre HTTP et HTML. Le premier est le protocole de transfert de pages Web et des objets associés sur le Net, le second est le langage de description de ces pages. Informations sur le document et l'indexation Exemples : • <META HTTP-EQUIV="refresh" CONTENT="3; URL=http://www.monsite.com"> Indique au serveur Web qu'il doit envoyer une nouvelle page (http://www.monsite.com) au client, trois secondes après avoir chargé la page contenant cette balise. • Rafraîchissement pour webcam. La balise <META HTTP-EQUIV="refresh"> peut servir à rafraîchir une page automatiquement par exemple pour afficher l'image d'une webcam. Informations sur le document et l'indexation Les balises META avaient beaucoup plus d’importance dans les années 90. Ce n’est plus le cas. Les moteurs de recherche utilisent des méthodes plus sophistiquées pour un bon positionnement des pages web. Informations sur le document et l'indexation • Google a annoncé en 2009 ne plus supporter les META de keywords, ce qui n’est pas le cas de Yahoo • Le META « description » est beaucoup plus utilisé. Il est parfois utilisé dans le résultat de recherche des moteurs de recherche. Moins de 155 caractères est suggéré Informations sur le document et l'indexation Facteurs important pour le référencement • Le volume de sites web utilisant le vôtre comme référence • La quantité et la qualité du contenu • La précision technique du code HTML • Le nombre de page visionnées • L’emplacement géographique, la langue etc. DTD • Dans les normes du HTML et du XHTML, un DOCTYPE (contraction pour "Document Type Declaration") informe le validateur de la version de (X)HTML que vous utilisez, et doit apparaitre en première position dans chaque page web. • Les DOCTYPES sont des composants primordiaux pour les pages conformes aux normes : ni votre balisage ni vos CSS ne passeront une validation sans DOCTYPE. DTD Concrètement, Internet Explorer depuis sa version 6.0, IE5Mac, Opera, FireFox, Safari, etc. rangent simplement les DTD en deux catégories (au moins), qu'on peut résumer en distinguant : 1. les DTD incomplètes, incorrectes, périmées, etc. (ou l'absence de DTD) : la page est présumée "codée à l'ancienne", et le rendu se fera en mode "quirks", compatible avec les anciennes implémentations de chaque navigateur ; DTD 2. Les DTD complètes et récentes : la page est présumée codée en respectant la norme indiquée par la DTD, et le rendu se fera en mode "strict", conforme aux standards en vigueur. Exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> DTD Notez que ce DOCTYPE inclut une URL complète en fin de balise. Puisque la balise pointe vers un emplacement valide sur le web, le navigateur sait où le trouver et affichera votre page en conformité avec les normes. HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd"> DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF8" /> <title></title> <link rel="stylesheet" type="text/css" media="screen" href="ecran.css" /> </head> <body> <!-- Document --> </body> </html> MIME Multipurpose Internet Mail Extensions (MIME) est un standard internet qui étend le format de données des courriels pour supporter des textes en différents codage de caractères autres que l'ASCII, des contenus non textuels, des contenus multiples, et des informations d'en-tête en d'autres codages que l'ASCII. MIME La présence de cet en-tête indique le type de média internet du contenu du message, consistant en un type et un sous-type, par exemple : Content-Type: text/plain Exemple dans l'entête : <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Aussi valide <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> MIME Encodés incorrectement les caractères ne seront pas restitués correctement sur d'autres plates-formes que Windows (Linux par exemple), où, au mieux, un caractère générique sera affiché (fréquemment un carré vide). MIME Les encodages les plus couramment utilisés sont : • utf-8 : permet de définir la plupart des caractères existant dans le monde (y compris les idéogrammes japonais) ; • iso-8859-1 : adapté à l'alphabet latin ; • iso-8859-15 : pareil que précédemment mais avec quelques caractères supplémentaires (dont le caractère €, et les lettres accentuées). Le rôle du webmestre • D'une manière générale, le webmestre est entendu comme responsable d'un site web de sa conception à sa mise en œuvre, puis à sa gestion et sa maintenance. • On considère qu'il peut désigner le gérant d'une communauté, soit celui qui contribue à l'élaboration et la pérennité d'un site Internet. Le rôle du webmestre Il gère tout ou partie des domaines de la conception du site : • Sa mise en place technique • Parfois la mission éditoriale • Met à jour le contenu • Il prend en charge l'analyse de la fréquentation avec des outils de mesure d'audience • Le webmestre a une fonction importante de correction grammaticale et orthographique. Le rôle du webmestre • Selon la taille et l'organisation du site internet, l'ensemble des fonctions peuvent être exercées par un webmestre dans une petite entreprise, ou une équipe est mise en place comprenant une ou plusieurs personnes avec des fonctions plus spécialisées. Dans ce cas, les différents métiers peuvent être – Intégrateur, – webdesigner, – webmarketing – développeur (programmeur) Web, – responsable éditorial, – soutien technique, – administrateur réseau, – administrateur système, – chef de projet Internet/Intranet, – référenceur. Laboratoire L’ergonomie • Quelques principes clés pour faire un site web L’ergonomie Les principaux critères d’ergonomie • Sobriété - Simplicité • Lisibilité - Clarté (Prendre note qu’il est plus difficile de lire sur un écran que sur papier. - Structuration (Paragraphes, sous-titre etc) - Organisation hiérarchique (le plus important en premier) L’ergonomie • Utilisabilité - Navigation (toute information doit être accessible en moins de trois clics) - Repérage (L’utilisateur doit toujours savoir a quel endroit il est) - Liberté (Possibilité de revenir a l’accueil facilement) - Homogénéité de la structure (Même menu de navigation partout) L’ergonomie • Rapidité - Temps de chargement rapide (A l’aide d’images avec une taille optimisée) • Interactivité - Liens hypertextes (Plusieurs mais pas trop) - Découpage de l’info (Texte d’accroche suivi d’un lien) • Facilité les échanges (Commentaires etc) L’ergonomie • Adaptabilité - Polices: Le site web doit pouvoir être personnalisé par l’utilisateur. • Adaptativité: Le site web s’adapte automatiquement sans intervention de l’utilisateur L’ergonomie • Accessibilité -Universalité des accès: Prévoir les handicaps visuels. - Interopérabilité: Respecter les standards W3C permet a votre site de bien fonctionner sur de multiples supports. - Contraste adapté: Entre l’arrière plan et le texte L’ergonomie Des études ont démontré que les usagers parcourent la page web selon un chemin en zigzag. Source: commentcamarche.net L’ergonomie Pour encore plus de trucs sur la qualité de vos sites web http://www.w3schools.com/quality/
