Differences

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

--- 2017_2018:s1:webdoc:td4 [2017/11/23 08:46] – [Tableaux] pourcelot
+++ 2017_2018:s1:webdoc:td4 [2017/11/28 16:50] (current) – [Les formulaires 2.0] pourcelot
@@ Line 5: / Line 5: @@
 Comme toujours, l'objectif est de vous donner le temps d'expérimenter ces différentes méthodes.
-Au delà de ces aspects d'apprentissage technique, vous devez prendre du temps pour décider de votre projet.
+<note important>
-Ainsi, vous arriverez au prochain TD avec un plan de votre site, une ébauche de style, de layout et de contenu que vous souhaitez mettre en place afin que votre encadrant de TD puisse vous conseiller sur la difficulté relative de vos objectifs.
+À partir de ce TD, le travail demandé n'est plus à rendre (il vous sert simplement de support pour que vous puissiez expérimenter).
+Ceci vous dégage du temps pour commencer à réfléchir en dehors des heures de TD sur votre [[2017_2018:s1:webdoc:projet|un projet]], à savoir un site web démontrant toutes vos compétences en matière de web-développement.
+Ce projet sera à rendre d'ici fin décembre (les modalités exactes de rendu seront fixées par votre enseignant de TD).
+Les consignes, à respecter impérativement, sont listées sur [[2017_2018:s1:webdoc:projet|la page du projet]].
+Ainsi, **vous arriverez au prochain TD en ayant choisi votre thème et avec un plan sur papier de votre site** à présenter à votre enseignant (contenus, styles et mise en page prévus) pour qu'il puisse donner un premier avis.
+</note>
 ===== Insertion d'une vidéo / de son =====
@@ Line 44: / Line 52: @@
 </code>
-Testez l'insertion d'une vidéo extérieure avec ce lien : http://www.i3s.unice.fr/~logre/docs/my_vid.mp4
+Testez l'insertion d'une vidéo extérieure avec ce lien : http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4
 ===== Tableaux =====
 La déclaration d'un //tableau// se fait avec la balise conteneur ''<table>''.
@@ Line 71: / Line 79: @@
 <box round rgb(185,211,238) 95%|**A Faire** :  >
-  * Créer un tableau dont les colonnes correspondent à 3 jours de la semaine, les lignes aux cours (algo, web), et les cases contiennent le nombre d'heures de la journée consacrée au cours.
+  * Créer un tableau dont les colonnes correspondent à 3 jours de la semaine, les lignes aux cours (algo, web, ...), et les cases contiennent le nombre d'heures de la journée consacrées à chaque cours.
-  * Attention, évidemment, les cellules correspondant à //algo// et //web// sont des cellules d'entête (Table Header)
+  * Attention, évidemment, les cellules correspondant à //algo//,  //web//... sont des cellules d'entête (Table Header)
   * Si vous n'avez pas cours, laissez la case libre en utilisant ''&nbsp;'' (//**n**on **b**reaking **sp**ace//)
 </box>
@@ Line 112: / Line 120: @@
        *  vous pouvez spécifier paire, impaire ... très pratique pour sélectionner des lignes dans un tableau.
+Plus d'informations [[https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child|ici]].
 ===== Les formulaires 2.0 =====
@@ Line 130: / Line 140: @@
 	* Bouton "Effacer"
 * Utiliser toutes les balises HTML5 nécessaires à l'obtention de ce formulaire.
 * Mettre en forme ce formulaire avec du CSS dans l'objectif :
-	* D'obtenir quelque chose qui s'approche de ça : http://en.blog.files.wordpress.com/2010/11/grunion-form-builder.png
+	* D'obtenir quelque chose qui s'approche de ça :
-	* D'obtenir quelque chose qui ne ressemble surtout pas à ça : http://wiki.lws-hosting.com/lib/exe/fetch.php/formail1.jpg
+{{ :2017_2018:s1:webdoc:grunion-form-builder.png?300 |}}
-* Et c'est pas fini, veiller à :
+	* D'obtenir quelque chose qui ne ressemble surtout pas à ça (pas de tableau pour la mise en page notamment !) :
+{{ :2017_2018:s1:webdoc:formail1.jpg?300 |}}
+* Et c'est pas fini :
 	* Lorsqu'un champs est en train d'être modifié, appliquer "une mise en surbrillance" de ce dernier.
 	* Les champs contenant du texte (excepté Mot de passe) doivent être pré-rempli.
@@ Line 142: / Line 156: @@
 <note tip>Un peu d'aide ?
-* Pseudos-formats :  :required, :invalid, :focus
+    * Pseudos-formats :  :required, :invalid, :focus
-* Type de champs HTML5 : email, tel, number, url, range, color, date, search (http://www.alsacreations.com/tuto/lire/1372-formulaires-html5-nouveaux-types-champs-input.html)
+    * [[https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire|Validation d'un formulaire]] en HTML5.
+    * Type de champs HTML5 : email, tel, number, url, range, color, date, search (http://www.alsacreations.com/tuto/lire/1372-formulaires-html5-nouveaux-types-champs-input.html)
 </note>