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.

Présentation au sujet: "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."— Transcription de la présentation:

1 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

2 Aujourd’hui Informations sur le document et l'indexation Le type MIME Le rôle du webmestre

3 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.

4 Informations sur le document et l'indexation Il existe deux types de balises : Celles destinées aux moteurs de recherche, du type. Celles destinées aux serveurs Web, de la forme.

5 Informations sur le document et l'indexation Exemples de balises destinées aux moteurs de recherche :

6 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.

7 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.

8 Informations sur le document et l'indexation Exemples : 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 peut servir à rafraîchir une page automatiquement par exemple pour afficher l'image d'une webcam.

9 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.

10 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é

11 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.

12 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.

13 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 ;

14 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

15 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.

16 HTML

17 XHTML

18 DTD

19 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.

20 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 : Aussi valide

21 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).

22 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).

23 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.

24 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.

25 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.

26 Laboratoire

27 L’ergonomie Quelques principes clés pour faire un site web

28 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)

29 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)

30 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)

31 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

32 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

33 L’ergonomie Des études ont démontré que les usagers parcourent la page web selon un chemin en zigzag. Source: commentcamarche.net

34 L’ergonomie Pour encore plus de trucs sur la qualité de vos sites web http://www.w3schools.com/quality/