Transcript
Page 1: S'initier au HTML et aux feuilles de style CSS Cours 4

S'initier au HTML et aux feuilles de style CSS

Cours 4

Page 2: 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 <form></form> correctement configurée

2. Un ou plusieurs éléments (<input>, <select>, <textarea> etc).

3. Un piton d’envoi

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

Aujourd’hui

• Intégrer contenu son, vidéo, animations

• Les images interactives

• Valider sa page web et l’indexation

Page 4: S'initier au HTML et aux feuilles de style CSS Cours 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.

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

Intégrer du multimédia

Il existe diverses façons d’intégrer du contenu multimédia. En utilisant…

1. les balises HTML4 <object> et <embed>.

2. les balises HTML5 <video> ou <audio>. IE ne le supporte pas avant ie 9.

3. Laisser Youtube héberger le vidéo et gérer ça

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

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.

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

Intégrer du multimédia

Codecs supportés selon les navigateurs

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

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.

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

Compatibilité de HTML 5

Source: html5test.com

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

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

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

Intégrer du multimédia

• Possible de prendre en charge deux codecs distincts, selon ce que supporte le navigateur.

• Exemple:<video controls preload>

<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.

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

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)

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

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>

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

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

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

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.4clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95

• Quicktimeclsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B

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

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>

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

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

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

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>

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

Intégrer du multimédia

<object data="http://URL to movie.mov">

<embed src="http://URL to movie.mov">

</embed>

</object>

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

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>

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

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.

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

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/

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

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.

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

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

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

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.

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

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.

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

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

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

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?

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

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.

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

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.

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

Le W3C validator

validator.w3.org

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

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

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

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>

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

Laboratoire

Reproduire l’exemple


Recommended