Differences

This shows you the differences between two versions of the page.

--- 2015_2016:s1:webdoc:td6 [2015/12/06 16:57] – urli
+++ 2015_2016:s1:webdoc:td6 [2015/12/07 15:15] (current) – [La balise vidéo] urli
@@ Line 1: / Line 1: @@
-====== TD6 Web - Projet ======
+====== TD6 Web - Menu dynamique ======
 ====== Compléments ======
   * 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 ...
@@ Line 7: / Line 8: @@
 ===== 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 CCS, définissez les propriétés suivantes pour les zones :
+  - 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)
@@ Line 19: / Line 22: @@
 </box>
 <note tip>De manière à réviser, il est conseiller de partir sur une toute nouvelle page html.</note>
-<note tip>Seulement les sections pourront avoir un attribut de type id (sauf indication contraire dans le TP). L'attribut class ne sera pas plus autorisé.</note>
-===== Positionnement en CSS =====
+===== Transitions et transformations css =====
-Avant de poursuivre notre exercice, vous aurez probablement besoin d'en savoir plus sur le positionnement en css.
-Plusieurs d'entre vous n'ont pas pris le temps dans le TD précédent de comprendre les positionnements pour construire une page web. Nous vous invitons à prendre le temps, si vous ne l'avez pas déjà fait, de lire les tutoriaux suivants.
-Regardez le tutoriel sur
-   - http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
-   - http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
-   - http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
-   - http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html
-<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-Maintenant que le positionnement n'a plus de secret pour vous, ajoutez 3 paragraphes de texte (par exemple ceux-ci http://www.faux-texte.com/lorem-ipsum-3.htm dans votre zone aside. Celle-ci doit s'afficher à droite de la page. Chacun des paragraphes sera contenu dans une balise <p></p> (balise de paragraphe).
-</box>
-<note warning>Pour en faire un peu plus,
-   * Vous pouvez utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/  pour construire par exemple la barre de menu.
-   * http://www.alsacreations.com/astuce/lire/56-styler-la-balise-lthr-gt.html
-   * [[http://www.w3schools.com/css/css_float.asp| Affichage relatif des éléments (bien regarder tous les exemples...]]
-   * [[http://www.w3schools.com/cssref/pr_class_clear.asp|Placer en dessous (clear)]]
-</note>
-===== Transitions 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 deuxième zone section. Chaque image aura une largeur de 150px et une hauteur de 108px.
+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.
@@ Line 60: / Line 37: @@
 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).
-<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-Maintenant, vous devez créer dans votre 3e zone ''section'', une zone ''div'' contenant 4 zones ''section''. Chacune de ces nouvelles zones section contiendra une zone ''header'', ''article'' et ''footer''. L'image ci-dessus vous donne une idée du résultat. Ces nouvelles sections auront une largeur de 160px.
-  * le header contiendra un mot de titre
-  * l'article un texte explicatif
-  * le footer ce que vous souhaitez
-  * Le header et l'article seront séparés d'une barre (''border-bottom'') composée de points qui n'occupera pas toute la largeur.
-  * Lorsque vous survolez une section avec la souris, les angles s'arrondissent de 40px et 10px, et l'échelle s'agrandit de 1.1;
-</box>
 ===== La balise vidéo =====
 HTML5 a introduit plusieurs nouvelles balises dont 2 balises multimédia (la balise video et la balise audio).
@@ Line 77: / Line 52: @@
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-  * Dans la 4e zone section de la page (et non celles créées précédemment), ajoutez 2 images et une balise vidéo.
+  * 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)
-  * Les vidéos sont disponible dans SupportCours/M115
+  * 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 :
@@ Line 154: / Line 131: @@
 {{ :2013_2014:s1:docweb:demo5.png?nolink |}}
-</box>
-===== Je sais répondre à =====
-<box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à :   >
-  * Pouvez-vous citer des éléments de type block ? <html><!-- (h1, p, ul, ol, dl, table, blockquote, etc.) --></html>
-  * Pouvez-vous citer des éléments de type inline ? <html><!-- (a, img, strong, abbr, etc.)--></html>
-  * Comment "incliner" un élément?  <html><!-- dans le cass skewX(15deg)) --></html>
-  * Comment "retourner" un élément?  <html><!-- dans le cass rotate(15deg)) --></html>
-  * Comment sélectionner les cases paires d'un tableau? <html><!--  td:nth-child(odd){--></html>
-  * Quelles sont les expressions équivalentes parmi : scale(1.1), scale(1.1,1.1), scale-x(1.1), scale-y(1.1), scale(1,1) <html><!-- scale(1.1), scale(1.1,1.1)--></html>
 </box>
-Une version demo de la page que vous avez construite est visible à l'adresse : http://users.polytech.unice.fr/~rey/cours/supports/web/index.html