S41 - Projet 2013/2014 - 2 - HTML/CSS
L’objectif de cette partie est de produire des documents Web à partir des données extraites et représentées dans un dictionnaire.
Découverte de HTML
- Ecrivez une page web d’accueil (
index.html
) pour votre projet qui le présente rapidement avec une introduction, donne un exemple de donnée et vous présente brièvement (nom, coordonnées, …). Placer la page d’accueil dans le répertoirepublic_html
de votre répertoire. Valider la page sur la validator html du W3C. - Ecrivez une page web contenant une tableau qui présente un groupe de mesures
Génération automatique de page web
- Ecrivez une fonction qui prend en paramètre un groupe de mesures et qui retourne une chaîne de caractères qui contient un tableau html qui représente la mesure.
- Ecrivez une fonction qui prend en paramètre un tableau de groupe de mesures et qui crée des fichiers html appelés
mesure_1.html
,mesure_2.html
, … - Modifier la fonction précédente pour que chaque page possède un lien vers la suivante et vers la précédente.
- Ecrivez une fonction qui prend en paramètre un tableau de valeurs pour une mesure donnée d’un capteur précis (cf. http://bruno.lsis.univ-tln.fr/enseignement/s45/extraction#exploitation_des_resultats) et qui produit un tableau de valeurs avec des calculs utiles (moyenne, écart type, …).
Mise en forme simple avec CSS
- Lisez la présentation de CSS jusqu’à la Sélection par IDentificateur.
- Ecriver une feuille de style simplement qui permet de mettre en forme simplement les documents précédents :
- couleur du texte, du fond
- Taille du texte : titres, entête de tableau
- Couleur des lignes des tableaux (alternances de couleurs des lignes paires et impaires)
Mise en forme avancée avec CSS
- Lisez la partie concernant les boites en CSS
- Lisez cette présentation http://www.w3schools.com/css/css3_intro.asp
- et éventuellement utiliser les exemples CSS présentés ici : slides.html5rocks.com
- Améliorez les feuilles de style et proposez toutes les présentations de données que vous jugerez utiles (Divers Tableaux, listes, …).
- Mettez en place des liens ou des menus entre et dans vos pages.
Un défi
- Découvrez le langage SVG pour décrire des images vectorielles (cf. http://www.w3schools.com/svg/).
- Générez automatiquement des graphiques (histogrammes, camemberts, …)
—- dataentry page —- type : TP enseignement_tags : S41 technologie_tags : HTML5,CSS,SVG