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

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

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

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.

Intégrer du multimédia Il existe diverses façons d’intégrer du contenu multimédia. En utilisant… 1.les balises HTML4 et. 2.les balises HTML5 ou. IE ne le supporte pas avant ie 9. 3.Laisser Youtube héberger le vidéo et gérer ça

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

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

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.

Compatibilité de HTML 5 Source: html5test.com

Intégrer du multimédia La balise HTML 5 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

Intégrer du multimédia Possible de prendre en charge deux codecs distincts, selon ce que supporte le navigateur. Exemple: Le vidéo fonctionnera dans Firefox 3.5, Safari 4, Opera 10 et Chrome 1 mais pas dans ie.

Intégrer du multimédia La balise HTML 5 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)

Intégrer du multimédia HTML4 La balise object

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

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

Intégrer du multimédia La balise object peut recevoir des paramètres. Ils sont envoyés par des balises entre les balises et. Exemple

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 Pour voir d’autres paramètres et des exemples, w3schools.com/html/html_object.asp w3schools.com/html/html_object.asp

Intégrer du multimédia Balise embed Pour assurer une compatibilité maximale, on peu utiliser la balise avec la balise

Intégrer du multimédia

Intégrer du multimédia Pour le son, c’est la même chose en HTML 4

Intégrer du multimédia En HTML5 Chez nous, avec Chrome 18, ça joue les deux formats et dans Firefox 11 ça joue seulement le ogg.

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

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.

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

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.

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.

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 commentcamarche.net/faq/217- referencer-son-site-les-moteurs-de- recherche

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?

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.

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.

Le W3C validator validator.w3.org

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

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); }

Laboratoire Reproduire l’exemple