This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
2015_2016:s1:webdoc:td6 [2015/10/06 14:53] urli created |
2015_2016:s1:webdoc:td6 [2015/12/07 16:15] (current) urli [La balise vidéo] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== TD6 Web ====== | + | ====== TD6 Web - Menu dynamique ====== |
- | * Optimisation de page | + | ====== Compléments ====== |
- | * Référencement | + | |
+ | * Dans ce nouveau TP, nous allons poursuivre notre exploration des normes HTML5 et CSS. Pour cela nous allons construire petit à petit une page web de démonstration nous permettant d'illustrer le positionnement, les transitions css, les selecteurs ccs3 ... | ||
+ | |||
+ | |||
+ | ===== Structure ===== | ||
+ | |||
+ | |||
+ | <note important>Ne perdez pas de temps à positionner correctement les zones maintenant : vous y reviendrez plus tard ! Contentez vous de créer globalement la structure </note> | ||
+ | |||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
+ | - Commencez par créer une page html5 contenant une zone ''header'', une zone ''nav'', une zone ''aside'', 5 zones ''section'' et une zone ''footer''. | ||
+ | - A l'aide d'un fichier CSS, définissez les propriétés suivantes pour les zones : | ||
+ | * header : prend toute la largeur de la page, contiendra un texte de 40px de haut et en petites capitales | ||
+ | * nav sera une zone horizontale sous le header de 600px de large (on y reviendra à la fin) | ||
+ | * aside : est une colonne alignée à droite de 200px de large (voir plus bas pour le contenu) | ||
+ | * section : un ensemble de zones centrées de 800px de large | ||
+ | * footer : un zone en fin de page qui contiendra 2 liens-images alignés à droite | ||
+ | - Toutes les zones doivent avoir une bordure rouge de 1px et un bord arrondi (''border-radius'' de 10px) | ||
+ | </box> | ||
+ | <note tip>De manière à réviser, il est conseiller de partir sur une toute nouvelle page html.</note> | ||
+ | |||
+ | ===== Transitions et transformations css ===== | ||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
+ | Continuons notre page de démonstration en ajoutant 5 images dans la premiere zone section. Chaque image aura une largeur de 150px et une hauteur de 108px. | ||
+ | |||
+ | * la première image devra subir une inclinaison de 15deg en y (''skewY'') lors du survol du pointeur souris. On utilisera le selecteur ''first-of-type'' pour sélectionner cette image. | ||
+ | * la deuxième image devra subir une inclinaison de 20deg en x (''skewX'') lors du survol du pointeur souris. On utilisera le selecteur ''nth-last-of-type'' pour sélectionner cette image. | ||
+ | * la troisième image devra subir une mise à l'échelle de 1.2 (''scale'') lors du survol du pointeur souris. On utilisera le selecteur ''nth-child'' pour sélectionner cette image. | ||
+ | * la quatrième image devra subir une rotation de 25deg (en changeant l'origine en 0,0) (''rotate'') lors du survol du pointeur souris. On utilisera le selecteur'' nth-of-type'' pour sélectionner cette image. | ||
+ | * la cinquième image devra subir une mise à l'échelle de 1.5 et une translation (120px, 50px) lors du survol du pointeur souris. On utilisera le selecteur ''last-of-type'' pour sélectionner cette image. | ||
+ | |||
+ | * Puisqu'ici nous travaillons sur les transitions, vos transformations devront se faire en en douceur (1 à 2 secondes). | ||
+ | </box> | ||
+ | Le résultat devrait ressembler à quelque chose comme cela : | ||
+ | {{ :2013_2014:s1:docweb:demo2.png?nolink |}} | ||
+ | |||
+ | Voir pour les transformations CSS : | ||
+ | http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html | ||
+ | |||
+ | Et pour "jouer" avec skewX, skewY : | ||
+ | http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_skewx | ||
+ | |||
+ | Si vous avez besoin d'aide pour les transitions, n'hésitez pas à vous reporter au tutoriel suivant : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html (consultez aussi les pages 2 à 4 de ce tutoriel). | ||
+ | |||
+ | ===== La balise vidéo ===== | ||
+ | HTML5 a introduit plusieurs nouvelles balises dont 2 balises multimédia (la balise video et la balise audio). | ||
+ | |||
+ | Vous trouverez plus de détail sur cette balise video chez alsacreations : http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html | ||
+ | |||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
+ | * Dans section suivante de la page (et non celles créées précédemment), ajoutez 2 images et une balise vidéo. | ||
+ | * Quand vous survolez une des deux images, une transformation (au choix mais différente en fonction de chaque image) sera appliqué à la vidéo ... testez cela lors de la lecture de la vidéo (choix des sélecteurs : http://www.w3schools.com/cssref/css_selectors.asp) | ||
+ | * Utilisez les URLs suivantes pour la vidéo : | ||
+ | * https://upload.wikimedia.org/wikipedia/commons/d/d0/Caminandes-_Llama_Drama_-_Short_Movie.ogv | ||
+ | * https://upload.wikimedia.org/wikipedia/commons/7/7c/Caminandes_-_Gran_Dillama_-_Blender_Foundation's_new_Open_Movie.webm | ||
+ | |||
+ | On devrait avoir un résultat dans le style de ceux ci dessous : | ||
+ | {{ :2013_2014:s1:docweb:demo3.png?nolink |}} | ||
+ | </box> | ||
+ | ===== Positionnement : les infobulles ===== | ||
+ | Voyons maintenant comment faire une infobulles du type de celle de l'image ci-dessous : | ||
+ | {{ :2013_2014:s1:docweb:demo4.png?nolink |}} | ||
+ | |||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
+ | * Ajoutez le code suivant das votre dernière zone section : | ||
+ | <code> | ||
+ | <p> | ||
+ | <a href="#">Survole moi! | ||
+ | <span>Je suis une infobulle...</span> | ||
+ | </a> | ||
+ | </p> | ||
+ | </code> | ||
+ | * Nous allons maintenant modifier notre css pour transformer **le span en infobulle.** | ||
+ | * centrez le texte contenu dans la balise ''p'' | ||
+ | * donnez une couleur à votre lien | ||
+ | * modifiez votre ''span'' en | ||
+ | * le positionnant de manière absolue ((//un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre.//)) | ||
+ | * en lui ajoutant une marge supérieure de -50px et une marge inférieure de -25px, afin de décaller son affichage, | ||
+ | * en modifiant la couleur de son texte, | ||
+ | * en rendant son arrière plan noir (et [[http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html|un petit peu transparent, notation RGBa ]]). | ||
+ | * On pourra également ajouter | ||
+ | * des bords arrondis, | ||
+ | * une boîte un peu plus grande ((padding)) | ||
+ | * une ombre de boite (([[http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html|box-shadow]])) | ||
+ | * ainsi qu'une légère transformation scale(0) rotate(-12deg) pour un effet d'apparition plus sympa. | ||
+ | * Il faut également, maintenant que vous avez bien défini le span | ||
+ | * rendre l'élément ''span'' complètement invisible en le rendant transparent (opacity:0) | ||
+ | * activer les transitions disons toutes pour une durée de 0.25s et | ||
+ | * Enfin, il nous faut le faire apparaître quand on survole l'élement ''a''. | ||
+ | * rendre visible(opacity:1) notre élement ''span'' quand on survole l'élement ''a''. | ||
+ | * Si vous avez utilisé une transformation, pensez également à remettre votre span en état lors de ce survole (scale(1) rotate(0)). Une petite amélioration consiste à faire ces mêmes modifications lors du gain du focus de l'élément ''a''. | ||
+ | </box> | ||
+ | ===== Un menu pour vérifier mes compétences ===== | ||
+ | Il ne nous reste plus qu'à finir notre zone nav, que nous avons laissé de coté jusqu'à maintenant. | ||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
+ | * Ajoutez le code suivant dans votre zone nav | ||
+ | <code> | ||
+ | <a href="#tableau"> | ||
+ | <div class="icone">T</div> | ||
+ | ableau | ||
+ | </a> | ||
+ | <a href="#images"> | ||
+ | <div class="icone">I</div> | ||
+ | mages | ||
+ | </a> | ||
+ | <a href="#colonnes"> | ||
+ | <div class="icone">C</div> | ||
+ | olonnes | ||
+ | </a> | ||
+ | <a href="#videos"> | ||
+ | <div class="icone">V</div> | ||
+ | ideos | ||
+ | </a> | ||
+ | <a href="#infobulle"> | ||
+ | <div class="icone">I</div> | ||
+ | nfobulle | ||
+ | </a> | ||
+ | </code> | ||
+ | |||
+ | * Sans modifier le code HTML de la zone nav | ||
+ | * Faites en sorte que les liens fonctionnent (qu'ils vous déplacent dans la page) | ||
+ | * Modifiez l'apparence du menu pour qu'il ressemble à l'image ci-dessous | ||
+ | * Ouvrez le menu lors du survol de la lettre de manière à rendre le lien accessible (pour masquer, vous pouvez utiliser ''overflow:hidden;'') | ||
+ | * Ajoutez une rotation (un tour complet) de la lettre lors du survol | ||
+ | * Pour dans les infobulles, ne pas aller à la ligne, ''white-space:nowrap;'' | ||
+ | * Pour gérer les débordements par des ..., ''text-overflow:ellipsis;'' | ||
+ | } | ||
+ | |||
+ | {{ :2013_2014:s1:docweb:demo5.png?nolink |}} | ||
+ | </box> | ||