Differences

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

--- 2015_2016:s1:webdoc:td6 [2015/12/06 16:45] – 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 16: / Line 19: @@
     * 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>
-<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>
+===== Transitions et transformations css =====
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-Ajoutez le code suivant dans votre zone footer
+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.
-<code>
-<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.fourquarters.biz/images/w3cvalidhtml5.jpg" alt="Valid XHTML 5" height="31" width="88" /></a> <br/>
-<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://url_de_votre_fichier.css&amp;profile=css3"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS Valide !" /></a>
-</code>
-Attention, le 1er lien-image (html5) ne fonctionne pas sur l'intranet (mais ne le modifiez pas), le 2eme lien-image (css) doit être modifier pour fonctionner depuis l'exterieur
-<note tip>Ces références doivent apparaître sur toutes vos pages au sein de l'IUT. Nous les utiliserons pour vérifier la validité de vos pages.</note>
-Vous pouvez aussi ajouter :  http://validator.w3.org/checklink
-</box>
-===== Positionnement en 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>
-===== Les transformations en css =====
-Ajoutez le code suivant dans votre première zone section, à laquelle vous donnez l'identifiant "tableau" (à la section pas au tableau)
-<code>
-<table><tbody>
-	<tr>
-		<td colspan="3"  id="a">300x50</td>
-		<td rowspan="4"  id="b">100x200</td>
-	</tr>
-	<tr>
-		<td colspan="2" rowspan="2" id="c">200x100</td>
-		<td  id="d">100x50</td>
-	</tr>
-	<tr>
-		<td  id="e">100x50</td>
-	</tr>
-	<tr>
-		<td rowspan="2" id="f">100x100</td>
-		<td colspan="2" rowspan="2" id="g">200x100</td>
-	</tr>
-	<tr>
-		<td id="h">100x50</td>
-	</tr>
-</tbody></table>
-</code>
-<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-Ajoutez les couleurs via css et appliquez les transformations suivantes :
-  * les cases/cellules impaires sont **inclinées** de 15deg (''skewX'') et ont des bords arrondis  (''border-radius'') de 10px
-  * les cases/cellules paires sont **tournées** de 5deg (''rotate'') et ont des bords arrondis de 20px
-  * Il faudra également mettre le tableau en forme comme dans l'image ci-dessous
-</box>
-<note tip>Attention, pour les "transform", vous devez les spécifier 5 fois. 1 fois normalement et une fois avec chacun des préfixes des navigateurs. SI vous ne faites pas cela, il y a de fortes chances que ça me fonctionne pas sur votre navigateur ou celui de votre encadrant lors de la correction de votre TP. Vous trouverez les différents préfixes sur la page "transformations-2d" (cf lien ci-dessous) dans la section "Tableau des compatibilités".</note>
-  * Si vous avez besoin d'aide pour les selecteurs css, reportez vous sur cette page : http://debray-jerome.developpez.com/articles/les-selecteurs-en-css3/. Pour le moment nous n'utiliserons que la pseudo-classe **:nth-child(expression)**
-  * Pour les transformations, vous aurez toute l'aide nécessaire sur la page http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html
-  * On veut parvenir à un résultat proche du tableau suivant (on verra le reste plus tard):
-{{ :2013_2014:s1:docweb:demo1.png?nolink |}}
-===== 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.
   * 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 112: / 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 129: / 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
+  * 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 206: / 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