Prog. Web - TP4 Année universitaire COURS : PLUS BESOIN DE FLASH!

Transcription

1 Prog. Web - TP4 Année universitaire COURS : PLUS BESOIN DE FLASH! Aucune balise HTML4 ne permettait jusqu'ici de gérer la vidéo ou le son. Il fallait à la place utiliser un 'plugin' comme flash player ou quicktime C'est pour cela que deux nouvelles balises standard ont été créées en HTML5 : VIDEO et AUDIO! Elles étaient très attendues car synonymes de libération des "players" propriétaires tels flash player, realplayer ou quicktime. Grâce à la balise CANVAS (ou la balise SVG) il est désormais possible de dessiner en 2D avec HTML : dessins statiques ou dessins dynamiques. Donc dans ce domaine également flash devient inutile. Déja de nombreux jeux en ligne fonctionnent avec Canvas. 1.1 INTÉGRATION D'UNE VIDÉO Pour que le navigateur puisse lire une vidéo il faut qu'il dispose d'un codec. Trois codec ont été implémentés sur les principaux navigateurs : h.264 : codec propriétaire ; n'est gratuit que sous certaines conditions vp8 ou webm : codec libre OGG theora : codec libre mais moins puissant que webm On peut alors classer les navigateurs en trois groupes : Le navigateur chrome lit tous les formats Firefox, défenseur du web libre, ne lit que les formats libres Safari et IE9 ne lisent que le format h.264 (.mp4) Cette situation, espérons le provisoire, aboutit à devoir proposer deux formats dans le conteneur VIDEO pour que votre vidéo puisse être lue par n'importe quel navigateur récent! 1.2 INTÉGRATION D'UN SON Comme pour la vidéo il y a plusieurs formats : MP3 : vous ne pouvez pas ne pas en avoir entendu parler! C'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous les appareils savent lire des MP3), ce qui fait qu'il est toujours très utilisé aujourd'hui. AAC : utilisé majoritairement par Apple sur itunes, c'est un format de bonne qualité. Les ipod, iphone et autres ipad savent les lire sans problème. OGG : le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre, c'est-à-dire qu'il n'est protégé par aucun brevet. On a donc aussi classer les navigateurs en trois groupes : chrome lit tous les formats sons safari et IE9 ne lisent que le format mp3 firefox ne lit que le format OGG Cette situation, espérons le provisoire, aboutit à devoir proposer deux formats dans le conteneur AUDIO pour que votre fichier audio puisse être lue par n'importe quel navigateur récent! 2 LES BALISES AUDIO ET VIDEO Vous devez récupérez sur H: un dossier comprenant quatre fichiers : deux fichiers vidéo : sintel.mp4 et sintel.ogg deux fichiers sons : soleilautomne.mp3 et soleilautomne.ogv Il y a aussi un pdf dans ce dossier! LE CODE DE LA PAGE <style> *{font-size : 11pt ; color : navy ; } 2.1 LA PAGE AUDIO_TEST.HTM 1 sur 8

2 img,audio{display : block ; margin : auto ; } </style></head> <img src ='arbre.jpg' width ='400'> <audio controls > <source src =.mp3"></source> <source src =.ogg"></source> <p>votre navigateur ne peut lire le fichier son</p> </audio> COMMENTAIRE DU CODE Afin que le fichier son puisse être lu avec tous les navigateurs récents on a inséré deux fichiers grâce au conteneur source (enfant de audio) Pour les utilisateur d'ie8 ou un version antérieure c'est seulement le contenu de la balise P qui apparaît : " votre navigateur ne peut lire " APERÇU AVEC CHROME APERÇU AVEC FIREFOX Les boutons de contrôle sont légèrement différents LES ATTRIBUTS DE LA BALISE AUDIO controls (barre de contrôle) autoplay : lecture automatique loop : lecture en boucle TEST Essayez : <audio autoplay loop > Il n'est pas sur que l'internaute apprécie de ne pouvoir couper le son 2.2 LA PAGE VIDEO_TEST.HTM LE CODE DE LA PAGE <style> *{font-size : 11pt ; color : navy ; } video{display : block ; width : 800px ; height :600px ; margin : auto ; } </style> </head> <video controls poster = 'arbre.jpg'> <source src = "sintel.mp4" /> 2 sur 8

3 <source src = "sintel.ogv" /> </video> APERÇU AVEC CHROME COMMENTAIRE DU CODE L'attribut poster permet d'attribuer une image de présentation de la vidéo. Si vous n'utilisez pas cet attribut c'est la première image de la vidéo qui tiendra lieu de poster mais comme en général d'une image noire il est préférable d'utiliser l'attribut poster. Les autres attributs de la balise video sont les mêmes que la balise audio : autoplay loop Afin que le fichier vidéo puisse être lu avec tous les navigateurs récents on a inséré deux fichiers grâce au conteneur source (enfant de video) 2.3 CONVERTIR LES FICHIERS AUDIO ET VIDÉO Le logiciel gratuit miro video converter permet de convertir les vidéos dans un format compatible avec la balise video. Prenons un exemple. Vous avez réalisé une vidéo avec votre appareil photo numérique de marque PANASONIC. Ce fichier a pour extension mts. Grâce au logiciel miro video converter vous pouvez le convertir en fichier ogv ou mp4 3 sur 8

4 On a sélectionné le fichier mts et on va le convertir en fichier mp4 3 LA BALISE CANVAS Canvas est une balise HTML mais les méthodes de dessin sont l'affaire de JAVASCRIPT. Canvas, comme img, est une balise de type inline qui peut avoir les attributs suivants : width height id Par défaut les dimensions sont de 300 par 150 pixels. Avec canvas on peut réalises des dessins statiques ou animés en 2D. Donc canvas remplace Flash 3.1 LA PAGE NOMMÉE 'CANVAS_RECTANGLES_VIDES.HTM' Huit carrés de 100 par 100. Chaque carré décalé de 20 à droite et 20 en bas par rapport au précédent LE CODE LA PAGE <style> canvas { display : block ; border: 1px solid black; margin-left : auto ; margin-right : auto ; margin-top : 50px ; } </style></head> <canvas width = '300' height = '300'> <p>votre navigateur est obsolète</p> </canvas> <script> var canvas = document.queryselector('canvas'); var contexte = canvas.getcontext('2d'); contexte.strokerect(20,20,100,100); contexte.strokerect(40,40,100,100); contexte.strokerect(60,60,100,100); contexte.strokerect(80,80,100,100); contexte.strokerect(100,100,100,100); contexte.strokerect(120,120,100,100); contexte.strokerect(140,140,100,100); contexte.strokerect(160,160,100,100); contexte.strokerect(180,180,100,100); </script> </body> APERÇU COMMENTAIRES Du CSS : L'objet de type canvas a été transformée en objet de type block afin de pouvoir le centrer horizontalement Du HTML : La boîte canvas a une taille de 300 par 300 Si vous testez cette page avec un "vieux" navigateur le message : "votre navigateur est obsolète" va apparaître Du JAVASCRIPT : La variable objet canvas référence la balise CANVAS. 4 sur 8

5 La variable contexte va chercher l'api de dessin 2D et l'appliquer à la variable canvas La fonction strokerect() permet de dessiner les contours d'un rectangle Syntaxe de cette fonction : strockerect(x,y, largeur, hauteur) avec x et y sont les coordonnées de l'arête supérieure gauche du rectangle Par défaut le contour est en noir avec une largeur de 1px Le script est automatiquement appelé puisqu'il il est inséré dans body 3.2 LA PAGE NOMMÉE 'CANVAS_RECTANGLES_PLEINS.HTM' Huit carré de 100 par 100 avec du rouge comme couleur de fond mais un rouge avec un alpha de 0.5. Chaque carré est décalé de 20 à droite et de 20 en bas par rapport au précédent LE CODE Seule le code JS est changé par rapport à la page précédente Extrait du script : var canvas = ; var contexte = canvas.getcontext('2d'); contexte.fillstyle = "rgba()" ; var x = 20 ; var y = 20 ; for (i=1; i<=8; i++) { contexte.fillrect(x,y,100,100); x = ; y = ; } </script> COMMENTAIRE Une boucle est exécuté huit fois. Lors de chaque passage dans la boucle : un carré est dessiné les nouvelles valeurs de x et de y sont calculées pour le carré suivant APERÇU COMMENTAIRE La méthode fillstyle permet de définir une couleur de remplissage. On peut utiliser une couleur transparente avec la notation rbga. Nous avons une boucle qui est répétée 8 fois et qui dessine à chaque passage un carré plein et incrémente les variables x et y de 20 La méthode fillrect crée des rectangles pleins Syntaxe de cette fonction : fillrect(x,y, largeur, hauteur) avec x et y sont les coordonnées de l'arête supérieure gauche du rectangle 3.3 LA PAGE "CANVAS_RECTANGLES_VIDES_ET_PLEINS.HTM APERÇU Il y a deux canvas dans la même page. Pour les distinguer il faut attribuer à chacun un id différent! Deux canvas de 300 par 300 CSS : la balise canvas doit être de type inline-block avec marges externes de 50px JS : le canvas de gauche : 8 carrés de 100 par 100 avec un contour en vert d'épaisseur 5px. Dans le canvas de droite : 8 carrés de 100 par 100 remplis de vert (alpha : 0.5) 5 sur 8

6 3.3.2 EXTRAIT DU CODE <canvas width = '300' height = '300' id = 'dessin1'><p>votre navigateur est obsolète</p></canvas> <script> var canvas = ('#dessin1'); var contexte = canvas.getcontext('2d'); contexte.strokestyle = 'green'; contexte.linewidth = '5' ; var x = 20 ; var y = 20 ; for ( ) { (x,y,100,100); x = ; y = ; } </script> <canvas width = '300' height = '300' id = 'dessin2'></canvas> <script> var canvas = ('#dessin2'); COMMENTAIRE La méthode strokestyle() pour définir une couleur de contour La méthode linewidth() pour définir l'épaisseur du contour 4 DESSINER AVEC SVG Alors que la balise CANVAS fait appel au JAVASCRIPT pour la production du dessin la balise SVG (Scalable Vector Graphics) fait appel à XML. XML est un langage de balisage comme HTML. Donc on ne dispose ni des variables ni des structures de contrôles. On utilise comme HTML des balises munies d'attributs 4.1 LA PAGE NOMMÉE 'SVG_RECTANGLES_VIDES.HTM' APERÇU Voir la page 'canvas_rectangles_vides.htm'. Cependant les carrés seront bordurés en olive avec une épaisseur de 4px LE CODE DE LA PAGE <style> svg{display : block ; margin-left : auto ; margin-right : auto ; margin-top : 50px ; border : 1px solid black } </style></head> <svg height="300" width="400" > <defs> <rect x = '0' y = '0' width = '100' height = '100' id = 'carre' stroke-width = '2' stroke = 'olive' fill ='none' /> </defs> 6 sur 8

7 </svg> <!-- appel du modèle identifié carre 9 fois--> <use xlink:href="#carre" x="20" y="20" /> <use xlink:href="#carre" x="40" y="40" /> <use xlink:href="#carre" x="60" y="60" /> <use xlink:href="#carre" x="80" y="80" /> <use xlink:href="#carre" x="100" y="100" /> <use xlink:href="#carre" x="120" y="120" /> <use xlink:href="#carre" x="140" y="140" /> <use xlink:href="#carre" x="160" y="160" /> <use xlink:href="#carre" x="180" y="180" /> COMMENTAIRE On définit un carré de 100 par 100 avec un contour olive et un fond vide. Le modèle est identifié carre Pour définir un carré on a utilisé la balise rect avec les attributs : x y width height stroke-width stroke fill On appelle ce modèle 9 fois le modèle identifié carre mais à chaque fois il y a décalage de l'arête supérieure gauche du carré 4.2 LA PAGE NOMMÉE 'SVG_RECTANGLES_PLEINS.HTM' APERÇU Voir la page 'canvas_rectangles_pleins.htm' LE CODE DE LA BALISE SVG <svg height="300" width="400" > <defs> <rect id = 'carre' fill ='rgba(255,0,0,0.5)' /> </defs> <use xlink:href="#carre" x="20" y="20" /> <use xlink:href="#carre" x="40" y="40" /> APERÇU 4.3 LA PAGE NOMMÉE 'SVG_CERCLES.HTM' SVG de 200 par 200 ; cercle centré dans le carré avec un rayon de 50px ; fond vert avec un alpha de 0.5 ; contour noir avec une épaisseur de 4px LE CODE DE LA BALISE SVG <svg height="200" width="200"> <circle cx="50%" cy="50%" r="25%" fill= stroke-width = stroke = /> </svg> RERMARQUE Les coordonnées du centre du cercle sont exprimées en % de la hauteur et en % de la largeur de la boîte SVG. Le rayon est aussi exprimé en %. C'est très pratique d'exprimer les coordonnées et la taille d'un cercle en % car si, par exemple, vous doublez la taille du carré vous n'avez rien à modifier dans le code de la balise circle 7 sur 8

8 Test : Faites passer la taille de la zone de dessin passe à 400 par 400! 4.4 LES AUTRES BALISES QUE L'ON PEUT INCLURE DANS LE CONTENEUR SVG Il y a la balise ellipse et la balise path (pour les formes complexes) Il est possible de réaliser des formes avec des fonds dégradés. Il est possible de faire des animations. 5 INSÉRER UN FICHIER PDF DANS UNE PAGE WEB Il faut utiliser la balise object APERÇU 5.1 EXEMPLE : LA PAGE 'OBJECT_TEST.HTM LE CODE DE LA PAGE (EXTRAIT) body {width : 1000px ; margin : auto; } object{display : block ; margin : 20px ; } a {display : ; text-decoration : ; } h2,a {text-align :center ; font-size : 20pt ; line-heigt : 50px ; border : 1px solid black } </style></head> <h2>insertion d'un pdf dans une page web </h2> <object data="fichiers_audio_video/entreprise_generalites_net.pdf" type="application/pdf" width="960" height="500"> <p>votre navigateur est obsolète</p> </object> <a href = "fichiers_audio_video/entreprise_generalites_net.pdf" > lien vers le fichier pdf</a> COMMENTAIRE Il ne faut pas confondre l'insertion d'un fichier pdf dans une page avec un lien un fichier pdf. Dans le second cas le fichier apparaît dans une autre fenêtre! L'insertion de pdf est un moyen facile de mettre à jour un site sans exiger de grandes connaissances en HTML et CSS. Par exemple chaque année l'hôtelier se contente de modifier le contenu du fichier nommée 'tarifs.pdf ' et il insère la nouvelle version dans la page de son site. 8 sur 8