Réaliser une découpe HTML pertinente

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

Réaliser une découpe HTML pertinente.

Un point de vue personnel sur le métier d’intégrateur HTML (développeur front-end pour les intimes).

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

Le métier d’intégrateur HTML

Savez-vous qui est l’ancêtre des intégrateurs HTML ?

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

Johannes Gutenberg (1400-1468)

Imprimeur typographe,

inventeur de l’imprimerie.

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

Le métier d’intégrateur HTML

« Ecrire pour le web ».

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

Une découpe « pertinente », c’est quoi ?

Pertinent : « Qui convient parfaitement; judicieux; approprié ».

Sur quoi puis-je m’appuyer pour que ma découpe convienne parfaitement au web ?

A qui ma découpe doit-elle être appropriée ?

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

Ecrire pour le support web

les standards fixés par le W3C

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

S’adresser aux utilisateurs

Les internautes Google (Google sera votre premier lecteur)

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

Pensez aux collègues

Le webdesigner, le développeur, le référenceur…

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

(Ecrire pour le support web) Le « medium » HTML

Attention aux détournements de balises !

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

(Ecrire pour le support web) Le « medium » HTML

Deux « types » de balises HTML

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

1. Balises qui structurent les pages

HTML 4.01, XHTML 1.0 et 1.1 : div, euh…

HTML/XHTML 5 : header, footer, nav, section, aside, figure…

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

2. Balises qui structurent le contenu des pages

HTML 4.01, XHTML 1.0 et 1.1 : Hx, p, ul/ol, dl > dt/dd, img, table…

HTML/XHTML 5 : audio, video, article, ins…

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

(S’adresser aux utilisateurs) Une découpe adaptée aux enjeux

Design « sexy », visibilité dans les principaux moteurs de recherche, taux de conversion…

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

(S’adresser aux utilisateurs) Une découpe adaptée aux enjeux

W3C, Qualité Web et bonnes pratiques (Opquast),

Accessibilité (Accessiweb, RGAA…) :logique d'articulation des contenus,ergonomie (conception orientée utilisateur).

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

Conclusion

La recette miracle n’existe pas ! K.I.S.S. (Eviter les bidouilles !!!)

Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010

Questions…