User Tools

Site Tools


2017_2018:s1:webdoc:td4

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Last revision Both sides next revision
2017_2018:s1:webdoc:td4 [2017/11/27 15:54]
pourcelot [[TD4] Multimédia et autres balises]
2017_2018:s1:webdoc:td4 [2017/11/28 17:48]
pourcelot [Les formulaires 2.0]
Line 5: Line 5:
 Comme toujours, l'​objectif est de vous donner le temps d'​expérimenter ces différentes méthodes. Comme toujours, l'​objectif est de vous donner le temps d'​expérimenter ces différentes méthodes.
  
-Par ailleursvous aurez [[2017_2018:​s1:​webdoc:​projet|un projet]] à réaliser d'ici fin décembre, ​à savoir un site web démontrant toutes vos compétences en matière ​de web-développement.+<note important>​ 
 +À partir de ce TDle travail demandé n'est plus à rendre (il vous sert simplement ​de support pour que vous puissiez expérimenter).
  
-Vous devez donc commencer à réfléchir ​à votre [[2017_2018:​s1:​webdoc:​projet|projet]].+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.
  
-Ainsi, vous arriverez au prochain TD en ayant choisi votre thème et avec un plan sur papier ​de votre site : styles, mise en page de contenu que vous souhaitez mettre en place. /**Vous pourrez demander conseil à votre encadrant ​de TD sur la difficulté relative de vos objectifs.**/+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 ===== ===== Insertion d'une vidéo / de son =====
  
Line 137: Line 142:
  
 * Mettre en forme ce formulaire avec du CSS dans l'​objectif : * 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.  * 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.  * Les champs contenant du texte (excepté Mot de passe) doivent être pré-rempli.
Line 149: Line 157:
 <note tip>Un peu d'aide ? <note tip>Un peu d'aide ?
     * Pseudos-formats :  :required, :invalid, :focus     * Pseudos-formats :  :required, :invalid, :focus
 +    * [[https://​developer.mozilla.org/​fr/​docs/​Web/​Guide/​HTML/​Formulaires/​Validation_donnees_formulaire|Validation d'un champ]] 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)     * 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>​ </​note>​
2017_2018/s1/webdoc/td4.txt · Last modified: 2017/11/28 17:50 by pourcelot