User Tools
2017_2018:s1:webdoc:td4
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
|
2017_2018:s1:webdoc:td4 [2017/11/26 18:02] pourcelot [Insertion d'une vidéo / de son] |
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 ailleurs, vous aurez 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 TD, le 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 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 avec un plan sur papier de votre site, précisant les styles, mise en page 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. | + | 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 74: | Line 79: | ||
| <box round rgb(185,211,238) 95%|**A Faire** : > | <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 '' '' (//**n**on **b**reaking **sp**ace//) | * Si vous n'avez pas cours, laissez la case libre en utilisant '' '' (//**n**on **b**reaking **sp**ace//) | ||
| </box> | </box> | ||
| Line 115: | Line 120: | ||
| * vous pouvez spécifier paire, impaire ... très pratique pour sélectionner des lignes dans un tableau. | * 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 ===== | ===== Les formulaires 2.0 ===== | ||
| Line 133: | Line 140: | ||
| * Bouton "Effacer" | * Bouton "Effacer" | ||
| * Utiliser toutes les balises HTML5 nécessaires à l'obtention de ce formulaire. | * Utiliser toutes les balises HTML5 nécessaires à l'obtention de ce formulaire. | ||
| + | |||
| * 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 146: | 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
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
