frank lang - développeur front-end / expert accessiweb en évaluation kiwi party alsacréations -...
TRANSCRIPT
![Page 1: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/1.jpg)
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).
![Page 2: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/2.jpg)
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 ?
![Page 3: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/3.jpg)
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.
![Page 4: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/4.jpg)
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 ».
![Page 5: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/5.jpg)
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 ?
![Page 6: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/6.jpg)
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
![Page 7: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/7.jpg)
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)
![Page 8: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/8.jpg)
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…
![Page 9: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/9.jpg)
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 !
![Page 10: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/10.jpg)
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
![Page 11: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/11.jpg)
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…
![Page 12: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/12.jpg)
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…
![Page 13: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/13.jpg)
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…
![Page 14: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/14.jpg)
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).
![Page 15: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/15.jpg)
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 !!!)
![Page 16: Frank LANG - Développeur front-end / Expert Accessiweb en évaluation Kiwi Party Alsacréations - 16/04/2010 Réaliser une découpe HTML pertinente. Un point](https://reader035.vdocuments.mx/reader035/viewer/2022062622/551d9dc6497959293b8e2bba/html5/thumbnails/16.jpg)
Frank LANG - Développeur front-end / Expert Accessiweb en évaluationKiwi Party Alsacréations - 16/04/2010
Questions…