Mars 2013 Grégory Petit

Présentation au sujet: "Mars 2013 Grégory Petit"— Transcription de la présentation:

1 mars 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/ART6017/

2 Type de contenu multimédia Nous allons regarder comment insérer : Des images Des vidéos venant du Web Des vidéos stockées sur votre ordi Des fichiers audio Des fichiers Flash

3 Taille des médias Plus la taille dun 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.

4 Images

5 Deux grandes familles Image bitmap ou par point Représentation graphique définie par lensemble des points qui la compose. Cest le codage le plus utilisé. Possède une résolution (pixels par pouce). Image vectorielle Représentation géométrique Cest 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.

6 Bitmap Vs. Vectoriel Zoom

7 Image Bitmap Avantages Supporté facilement par les fureteurs. Adapté aux périphériques daffichage. Codage point par point universel. Désavantages Supporte 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 daffichage et de sa résolution.

8 Image vectorielle Avantages 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ésavantages Ne peut pas coder une image analogique telle qu'une image photographique. Difficile à manipuler dans une page Web.

9 SVG et HTML Impossible dinsérer une image SVG dans Dreamweaver. Si vous voulez vraiment insérer une image vectorielle dans votre page Web, utilisez le code suivant : Assez difficile de changer la taille de limage via HTML. Il faut choisir la bonne taille, dès la conception de limage.

10 Utilisation des images avec Dreamweaver

11 Rappel Placer les images dans un dossier à part dans votre site. Le chemin vers limage 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 limage dans un élément de texte comme par exemple et appliquer lattribut CSS text-align:center à cet élément. Pas despace ni de caractère spécial dans le nom des images.

12 Modifier des images Qualité de limage Rogner limage Luminosité et contraste

13 Images de fond dun élément Web Lattribut CSS background-image : background-image: url(images/centralpark2.jpg); Pour que limage 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 limage de fond sadapte à la taille de lélément Web, ajouter ceci directement dans la règle CSS : background-size:100% 100%;

14 Image de fond répétée Vous pouvez répéter une image de fond pour créer une texture à votre élément avec lattribut CSS background-repeat. Cest pratique pour une entête, ou dautres types de contenu de votre page Web. Lavantage est quon peut utiliser une image plus petite, donc plus rapide à chargée.

15 Image de fond répétée

16 Fausse image de fond On peut mettre une image derrière un autre élément Web en utilisant lattribut CSS z-index. Ces deux éléments doivent avoir le même parent.

17 Fausse image de fond

18 Une dernière chose! Noubliez pas dutiliser lattribut "alt" pour les images!

19 Vidéos

20 Vidéos déjà sur le Web Pour insérer un vidéo postée sur plateforme de partage de vidéos il faut utiliser un module dintégration. Un module dintégration est une bloc de code HTML que vous devrez copier dans votre page Web.

21 Intégration dune vidéo YouTube

22

23 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 cest la norme de Safari, IE et Chrome ogv car cest la norme de Firefox

24 Audio

25 Musiques déjà sur le Web Pour insérer un son ou une musique déjà postés sur plateforme de partage, il faut utiliser un module dintégration. Cest donc exactement la même que pour les vidéos donc.

26 Intégration dune musique SoundCloud

27 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 cest la norme de Safari, IE et Chrome ogg car cest la norme de Firefox

28 Flash

29 Insertion de fichiers Flash

30 Propriétés des objets Flash Dimensions MargesComportement au chargement

31 Pratique Refaire la même chose que la dernière pratique mais insérer des vidéos et/ou musiques à la place.

32 Des questions??? Merci de votre attention! gregory.petit@umontreal.ca http://lrcm.com.umontreal.ca/greg/ART6017/