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

  • Published on
    04-Apr-2015

  • View
    102

  • Download
    0

Transcript

Page 1 S'initier au HTML et aux feuilles de style CSS Cours 4 Page 2 Retour sur la semaine dernire Pour faire un formulaire il vous faut les ingrdients suivants: 1. La balise correctement configure 2. Un ou plusieurs lments (,, etc). 3. Un piton denvoi Page 3 Aujourdhui Intgrer contenu son, vido, animations Les images interactives Valider sa page web et lindexation Page 4 Intgrer du multimdia Il nexiste pas de balises pour intgrer du contenu multimdia en HTML 4. Il faut passer par des plug-ins flash, activex et java. Cest corrig avec le HTML 5. Page 5 Intgrer du multimdia Il existe diverses faons dintgrer du contenu multimdia. En utilisant 1.les balises HTML4 et. 2.les balises HTML5 ou. IE ne le supporte pas avant ie 9. 3.Laisser Youtube hberger le vido et grer a Page 6 Intgrer du multimdia La balise n'a pas t reprise dans les spcifications officielles du HTML 4.0 (W3C) : elle est remplace par la balise. Balise propritaire Netscape l'origine. a veut dire que certains vieux navigateurs utilisent la balise embed, et dautres, object. Page 7 Intgrer du multimdia Codecs supports selon les navigateurs Page 8 Intgrer du multimdia Un conteneur nest pas un codec. Un fichier.AVI (pour le conteneur Audio Video Interleave) peut contenir des fichiers encods selon diffrents codecs Vido: DivX, Xvid, DV, Mpeg2/4, etc., Audio : AC3, mp3, PCM, etc. Page 9 Compatibilit de HTML 5 Source: html5test.com Page 10 Intgrer du multimdia La balise HTML 5 Attributs autoplay commence a jouer aussitt quil est tlcharg. controls fait apparaitre des boutons de controles (pause, recule, avance etc) loop preload - pre download le vido pourquil soit prt quand lutilisateur veut le visionner. poster Dfinit limage que vous voulez afficher lorsque le vido est arrt. src, width, height Page 11 Intgrer du multimdia Possible de prendre en charge deux codecs distincts, selon ce que supporte le navigateur. Exemple: Le vido fonctionnera dans Firefox 3.5, Safari 4, Opera 10 et Chrome 1 mais pas dans ie. Page 12 Intgrer du multimdia La balise HTML 5 Attributs src chemin vers le fichier type indique le type mime du vido (video/ogg, video/mp4, audio/ogg, audio/mpeg, etc) Codecs le codec du vido (theora, vorbis, vp8, vorbis, avc1.42E01E, mp4a.40.2) Page 13 Intgrer du multimdia HTML4 La balise object Page 14 Intgrer du multimdia Lattribut classid reprsente un identifiant unique pour un logiciel. Cest comme son numro de scurit sociale. Le ClassID de lexemple fait rfrence Quicktime. Lattribut codebase rfre lendroit ou se trouve le logiciel sil nest pas disponible. Le seul attribut obligatoire est data Page 15 Intgrer du multimdia Diffrents 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 Page 16 Intgrer du multimdia La balise object peut recevoir des paramtres. Ils sont envoys par des balises entre les balises et. Exemple Page 17 Intgrer du multimdia paramtres de la balise controller - true ou false. Fait apparaitre les boutons de contrle. autoplay - true ou false. Exemple Pour voir dautres paramtres et des exemples, w3schools.com/html/html_object.asp w3schools.com/html/html_object.asp Page 18 Intgrer du multimdia Balise embed Pour assurer une compatibilit maximale, on peu utiliser la balise avec la balise Page 19 Intgrer du multimdia Page 20 Intgrer du multimdia Pour le son, cest la mme chose en HTML 4 Page 21 Intgrer du multimdia En HTML5 Chez nous, avec Chrome 18, a joue les deux formats et dans Firefox 11 a joue seulement le ogg. Page 22 Intgrer du multimdia Pour tout savoir sur les conteneurs et les codecs vidos, voir diveintohtml5.info/video.html diveintohtml5.info/video.html Pour connaitre le codec utilis par un vido, a va vous prendre un utilitaire comme gspot http://www.headbands.com/gspot/ http://www.headbands.com/gspot/ Page 23 Intgrer du multimdia Il ny a pas de combinaison de conteneurs et de codes qui fonctionnent dans tous les navigateurs HTML5. Cette situation nest pas prte changer. Pour faire fonctionner votre vido sur toutes les plateformes, vous devrez encoder votre vido en de multiples codecs. Page 24 Laboratoire Faire une page avec trois vidos - Un qui fonctionne avec la balise embed - Un qui est hberg sur Youtube - Un qui est cod en HTML 5 Page 25 Rfrencement Cest l'ensemble des techniques permettant d'amliorer la visibilit d'un site web : Indexation: consiste faire connatre le site auprs des outils de recherche grce aux formulaires que ceux-ci proposent. Positionnement: consiste positionner le site ou certaines pages du site en premire page de rsultat pour certains mots-cls. Classement: dont le but est similaire au positionnement mais pour des expressions plus labores; une partie du travail tant d'identifier ces requtes. Page 26 Rfrencement Il existe quelques techniques de conception de site permettant de donner plus d'efficacit au rfrencement des pages d'un site : un contenu original et attractif, un titre bien choisi, une URL adapte, un corps de texte lisible par les moteurs, des balises META dcrivant prcisment le contenu de la page, des liens bien penss, des attributs ALT pour dcrire le contenu des images. Page 27 Rfrencement Indexation google: google.com/addurl Google Webmasters tools Pour plus dinfos: commentcamarche.net/faq/217- referencer-son-site-les-moteurs-de- recherche commentcamarche.net/faq/217- referencer-son-site-les-moteurs-de- recherche Page 28 Valider sa page web Le W3C validator permet de vrifier votre code HTML, didentifier les erreurs et de faire des suggestions. Cependant, les navigateurs afficheront vos pages web peu importe si elles sont plein derreurs. Quelle est lutilit de la validation? Page 29 Valider sa page web Outil de debug: Permet de sassurer que vos pages saffichent de la mme faon sur plusieurs plateformes ou support diffrents. Bon pour le futur: La validation est la meilleure garantie que les prochaines plateforme web seront compatible. Page 30 Valider sa page web Facilite la maintenance: Particulirement important si un autre dveloppeur doit poursuivre votre travail. Enseigne de bonnes habitudes. Cest un signe de professionnalisme. Page 31 Le W3C validator validator.w3.org Page 32 Images interactives Avec Dreamweaver Insert > Image object > rollover image Utilise du javascript qui est plac automatiquement. Voir le tag inspector pour modifier les paramtres Page 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); } Page 34 Laboratoire Reproduire lexemple

Recommended

View more >