Contenu multimédia

mars 2013Grégory Petit

http://lrcm.com.umontreal.ca/greg/ART6017/

Type de contenu multimédiaNous allons regarder comment insérer :

Des imagesDes vidéos venant du WebDes vidéos stockées sur votre ordiDes fichiers audioDes fichiers Flash

Taille des médiasPlus la taille d’un media est grande, plus

votre page Web mettra du temps à charger. Il faut donc :

Minimiser autant que possible la taille des medias.

Privilégier la qualité par rapport à la dimension.

Pour les images, les afficher progressivement si possible.

Images

Deux grandes famillesImage bitmap ou par point

Représentation graphique définie par l’ensemble des points qui l’a compose.

C’est le codage le plus utilisé.Possède une résolution (pixels par pouce).

Image vectorielleReprésentation géométriqueC’est en fait une suite de formules mathématiques.

décrivant les formes élémentaires constituant l'image (rectangles, lignes, courbes, ellipses, etc.)

Très peu utilisées en Web.

Bitmap Vs. Vectoriel

Zoom

Image BitmapAvantages

Supporté facilement par les fureteurs.Adapté aux périphériques d’affichage.Codage point par point universel.

DésavantagesSupporte mal les opérations de

redimensionnement, réduction ou agrandissement. Ces opérations se traduisent par une perte d'information.

Dépendant du périphérique d’affichage et de sa résolution.

Image vectorielleAvantages

Adaptée aux représentations schématiques et stylisés constituées de formes.

Plus compacte. Sa taille varie en fonction de la complexité de l'image, mais pas en fonction de la résolution demandée.

DésavantagesNe peut pas coder une image analogique telle

qu'une image photographique.Difficile à manipuler dans une page Web.

SVG et HTMLImpossible d’insérer une image SVG dans

Dreamweaver.

Si vous voulez vraiment insérer une image vectorielle dans votre page Web, utilisez le code suivant :<object data="image/rond.svg" type="image/svg+xml"></object>

Assez difficile de changer la taille de l’image via HTML. Il faut choisir la bonne taille, dès la conception de l’image.

Utilisation des images avec Dreamweaver

RappelPlacer les images dans un dossier à part dans votre site.

Le chemin vers l’image doit être relatif (du type src="image/truc.jpg")

Vous savez déjà insérer une image dans une page HTML.

Pour centrer une image, il faut mettre l’image dans un élément de texte comme <p> par exemple et appliquer l’attribut CSS text-align:center à cet élément.

Pas d’espace ni de caractère spécial dans le nom des images.

Modifier des images

Qualité de l’image

Rogner l’image

Luminosité et contraste

Images de fond d’un élément Web

L’attribut CSS background-image : background-image:

url(images/centralpark2.jpg);

Pour que l’image de fond bouge ou non en même temps que la page défile:

background-attachment : fixed ou scroll

Si vous voulez que la taille de l’image de fond s’adapte à la taille de l’élément Web, ajouter ceci directement dans la règle CSS :

background-size:100% 100%;

Image de fond répétéeVous pouvez répéter une image de fond pour

créer une texture à votre élément avec l’attribut CSS background-repeat.

C’est pratique pour une entête, ou d’autres types de contenu de votre page Web.

L’avantage est qu’on peut utiliser une image plus petite, donc plus rapide à chargée.

Image de fond répétée

Fausse image de fondOn peut mettre une image derrière un autre

élément Web en utilisant l’attribut CSS z-index.

Ces deux éléments doivent avoir le même parent.

Fausse image de fond

Une dernière chose!

N’oubliez pas d’utiliser l’attribut "alt" pour les images!

Vidéos

Vidéos déjà sur le WebPour insérer un vidéo postée sur plateforme

de partage de vidéos il faut utiliser un module d’intégration.

Un module d’intégration est une bloc de code HTML que vous devrez copier dans votre page Web.

Intégration d’une vidéo YouTube

Intégration d’une vidéo YouTube

Vidéos locales (merci HTML5)Avant HTML5, on devait utiliser un plugin

flash pour insérer des vidéos dans une page Web.

Avec HTML5, cela devient beaucoup plus simple.

mp4 car c’est la norme de Safari, IE et Chrome

ogv car c’est la norme de Firefox

Audio

Musiques déjà sur le WebPour insérer un son ou une musique déjà

postés sur plateforme de partage, il faut utiliser un module d’intégration.

C’est donc exactement la même que pour les vidéos donc.

Intégration d’une musique SoundCloud

Fichiers audio locaux

Avant HTML5, on devait utiliser un plugin flash pour insérer des vidéos dans une page Web (comme pour les vidéos).

Avec HTML, cela devient beaucoup plus simple.

mp3 car c’est la norme de Safari, IE et Chromeogg car c’est la norme de Firefox

Flash

Insertion de fichiers Flash

Propriétés des objets Flash

Dimensions

MargesComportementau chargement

PratiqueRefaire la même chose que la dernière pratique

mais insérer des vidéos et/ou musiques à la place.

Des questions???

Merci de votre attention!

gregory.petit@umontreal.cahttp://lrcm.com.umontreal.ca/greg/ART6017/