S'initier au HTML et aux feuilles de style CSS

1. S'initier au HTML et aux feuilles de style CSS Cours 4

2. Retour sur la semaine dernière Pour faire un formulaire il vous faut les ingrédients suivants: • La balise <form></form> correctement configurée • Un ou plusieurs éléments (<input>, <select>, <textarea> etc). • Un piton d’envoi

3. Aujourd’hui • Intégrer contenu son, vidéo, animations • Les images interactives • Valider sa page web et l’indexation

4. Intégrer du multimédia • Il n’existe pas de balises pour intégrer du contenu multimédia en HTML 4. Il faut passer par des plug-ins flash, activex et java. • C’est corrigé avec le HTML 5.

5. Intégrer du multimédia Il existe diverses façons d’intégrer du contenu multimédia. En utilisant… • les balises HTML4 <object> et <embed>. • les balises HTML5 <video> ou <audio>. IE ne le supporte pas avant ie 9. • Laisser Youtube héberger le vidéo et gérer ça

6. Intégrer du multimédia • La balise <EMBED> n'a pas été reprise dans les spécifications officielles  du HTML 4.0 (W3C) : elle est remplacée par la balise <OBJECT>. • Balise propriétaire Netscape à l'origine. • Ça veut dire que certains vieux navigateurs utilisent la balise embed, et d’autres, object.

7. Intégrer du multimédia Codecs supportés selon les navigateurs

8. Intégrer du multimédia • Un conteneur n’est pas un codec. • Un fichier .AVI (pour le conteneur Audio Video Interleave) peut contenir des fichiers encodés selon différents codecs • Vidéo: DivX, Xvid, DV, Mpeg2/4, etc., Audio : AC3, mp3, PCM, etc.

9. Compatibilité de HTML 5 Source: html5test.com

10. Intégrer du multimédia La balise HTML 5 <video></video> Attributs • autoplay – commence a jouer aussitôt qu’il est téléchargé. • controls – fait apparaitre des boutons de controles (pause, recule, avance etc) • loop • preload - pre download le vidéo pourqu’il soit prêt quand l’utilisateur veut le visionner. • poster – Définit l’image que vous voulez afficher lorsque le vidéo est arrêté. • src, width, height

11. Intégrer du multimédia • Possible de prendre en charge deux codecs distincts, seloncequesupporte le navigateur. • Exemple: <videocontrolspreload> <source src="test.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"><source src="test.ogg" type="video/ogg" codecs="theora, vorbis"> </video> • Le vidéo fonctionnera dans Firefox 3.5, Safari 4, Opera 10 et Chrome 1 mais pas dans ie.

12. Intégrer du multimédia La balise HTML 5 <source> Attributs • src – chemin vers le fichier • type – indique le type mime du vidéo (video/ogg, video/mp4, audio/ogg, audio/mpeg, etc) • Codecs – le codec du vidéo (theora, vorbis, vp8, vorbis, avc1.42E01E, mp4a.40.2)

13. Intégrer du multimédia HTML4La balise object <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="fichier.mov"> </object>

14. Intégrer du multimédia • L’attribut classid représente un identifiant unique pour un logiciel. C’est comme son numéro de sécurité sociale. • Le ClassID de l’exemple fait référence à Quicktime. • L’attribut codebase réfère à l’endroit ou se trouve le logiciel s’il n’est pas disponible. • Le seul attribut obligatoire est data

15. Intégrer du multimédia Différents exemples de class id • Windows Media Player 7clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 • Windows Media Player 6.4clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 • Quicktimeclsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B

16. Intégrer du multimédia • La balise object peut recevoir des paramètres. • Ils sont envoyés par des balises <param> entre les balises <object> et </object>. • Exemple<object data="horse.wav"> <param name="autoplay" value="true"></object>

17. Intégrer du multimédia paramètres de la balise • controller - true ou false. Fait apparaitre les boutons de contrôle. • autoplay - true ou false. Exemple <param name="controller" value="true" /> Pour voir d’autres paramètres et des exemples, w3schools.com/html/html_object.asp

18. Intégrer du multimédia Balise embed <embed src="http://URL to movie.mov" autoplay="true" pluginspage="http://www.apple.com/quicktime/download/"> </embed> Pour assurer une compatibilité maximale, on peu utiliser la balise <embed> avec la balise <object>

19. Intégrer du multimédia <object data="http://URL to movie.mov"> <embed src="http://URL to movie.mov"> </embed> </object>

20. Intégrer du multimédia Pour le son, c’est la même chose en HTML 4 <object data="eureka.wav"><param name="autostart" value="true"><param name="autoplay" value="true"><param name="controller" value="true"> <embed src="eureka.wav" controller="true" autoplay="true" autostart="True" /></embed> </object>

21. Intégrer du multimédia En HTML5 <audio controls="controls"><source src="song.mp3" type="audio/mpeg" />  <source src="song.ogg" type="audio/ogg" /> </audio> Chez nous, avec Chrome 18, ça joue les deux formats et dans Firefox 11 ça joue seulement le ogg.

22. Intégrer du multimédia Pour tout savoir sur les « conteneurs » et les codecs vidéos, voirdiveintohtml5.info/video.html Pour connaitre le codec utilisé par un vidéo, ça va vous prendre un utilitaire comme gspothttp://www.headbands.com/gspot/

23. Intégrer du multimédia • Il n’y a pas de combinaison de conteneurs et de codes qui fonctionnent dans tous les navigateurs HTML5. • Cette situation n’est pas prête à changer. • Pour faire fonctionner votre vidéo sur toutes les plateformes, vous devrez encoder votre vidéo en de multiples codecs.

24. Laboratoire Faire une page avec trois vidéos- Un qui fonctionne avec la balise « embed »- Un qui est hébergé sur Youtube- Un qui est codé en HTML 5

25. Référencement C’est l'ensemble des techniques permettant d'améliorer la visibilité d'un site web : • Indexation: consiste à faire connaître le site auprès des outils de recherche grâce aux formulaires que ceux-ci proposent. • Positionnement: consiste à positionner le site ou certaines pages du site en première page de résultat pour certains mots-clés. • Classement: dont le but est similaire au positionnement mais pour des expressions plus élaborées; une partie du travail étant d'identifier ces requêtes.

26. Référencement Il existe quelques techniques de conception de site permettant de donner plus d'efficacité au référencement des pages d'un site : • un contenu original et attractif, • un titre bien choisi, • une URL adaptée, • un corps de texte lisible par les moteurs, • des balises META décrivant précisément le contenu de la page, • des liens bien pensés, • des attributs ALT pour décrire le contenu des images.

27. Référencement • Indexation à google: google.com/addurl • Google Webmasters tools • Pour plus d’infos: commentcamarche.net/faq/217-referencer-son-site-les-moteurs-de-recherche

28. Valider sa page web • Le W3C validator permet de vérifier votre code HTML, d’identifier les erreurs et de faire des suggestions. • Cependant, les navigateurs afficheront vos pages web peu importe si elles sont plein d’erreurs. • Quelle est l’utilité de la validation?

29. Valider sa page web • Outil de debug: Permet de s’assurer que vos pages s’affichent de la même façon sur plusieurs plateformes ou support différents. • Bon pour le futur: La validation est la meilleure garantie que les prochaines plateforme web seront compatible.

30. Valider sa page web • Facilite la maintenance: Particulièrement important si un autre développeur doit poursuivre votre travail. • Enseigne de bonnes habitudes. • C’est un signe de professionnalisme.

31. Le W3C validator validator.w3.org

32. Images interactives Avec Dreamweaver • Insert > Image object > rollover image • Utilise du javascript qui est placé automatiquement. • Voir le “tag inspector” pour modifier les paramètres

33. Images interactives .ville_swap { background-image: url(images/ville_up.jpg); height:500px; width:200px; } .ville_swap:hover { background-image: url(images/ville_down.jpg); } <div class="ville_swap"></div>

34. Laboratoire Reproduire l’exemple