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.

• Lisez la présentation rapide de HTML5 jusqu’à div et span.
• 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épertoire public_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

• 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, …).

• 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)

• 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.

• 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