rapport d'exercice Stic 1

ex.1: création d'une homepage

Alessandro Conti

14 octobre 2007

liens vers les documents produits

• lien vers la page d'accueil d'été
• lien vers la page d'accueil d'hiver

Démarche et évaluation

Cette page d'accueil s'adressera "in fine" à mes élèves de 12-15 ans à qui j'aimerais offrir une série de ressources et d'aides (encore à construire. Pour l'instant, le contenu est centré sur le master MalTT.

Elle comprendra une présentation de l'auteur, un calendrier des leçons et des choses obervables dans la nature (d'où l'idée de la présentation en heure d'été et d'hiver en lien avec le caractère saisonnier de l'étude de la faune et de la flore pratiqué avec mes élèves), un fil RSS vers une actualité scientifique adapté aux élèves, un accès à des documents (illustration couleurs, extrait de film...) vus en classe mais non transmis,des petits exercices de soutien... Au niveau de contenu, ma présentation donne des informations institutionnelles, la page "aide" propose des liens et la page "actualité" fournira l'accès à mes travaux et exercices en cours

J'ai cherché parmi les "Homepages" des étudiants de TECFA des sources d'inspiration et une source pour des CSS intéressantes. J'ai alors commencé une opération de lecture et de "démontage" de la feuille pour comprendre son fonctionnement. Devant la difficulté de cette approche, je suis retourné dans le cours pour trouver un exemple de barre de navigation fixe en haut de la page.

J'ai adapté un exemple fourni à la CSS choisie, J'ai procédé très empiriquement à un toilettage et à la suppression des éléments non utile de la feuille CSS

J'ai ensuite appliqué mon idée de deux versions qui offre une bascule au lecteur: "heure d'hiver" et "heure d'été". J'ai travaillé mes images pour leur donne le format voulu avec Photoshop, que j'ai aussi utilisé pour le choix des couleurs.

J'ai volontairement placé le tout dans un dossier Homepage provisoire pour effectuer la validation et le tester avant le rendre facile d'accès.

J'ai passé pas mal de temps à comprendre une CSS qui me semblait pourtant simple et le fonctionnement de la cascade. Travaillant sur Mac, j'ai eu le problème classique de l'affichage des accents avec Internet Explorer (que je ne pouvais vérifier que sur mon lieu professionnel). Procédant par soustraction, le temps m'a manqué pour comprendre les subtilités et j'ai conscience que ma feuille CSS contient encore des choses inutiles, bien qu'elle remplisse son rôle.

Cela m'a bien sensibiliser aux emboîtements des balises et au principe de la cascade". Je sais maintenant (modestement) "lire" une page de code et y trouver des erreurs. J'ai découvert 5% des fonctionnalité dun éditeur et les outils de validation sur le net (au diagnostic bien plus précis que celui de l'éditeur) alors qu'au départ je n'y avais jamais touché. C'est bien plus que ne n'espérait en si peu de temps

Biblio: les deux documents "introduction à XHTML" et "CSS-intro" ainsi qu'un ouvrage : HTML-Xhtml-CSS - Le guide complet, daté de juin 2007 édité par Microapplication. Les fichiers CSS utilisés : http://www.intensivstation.ch/files/en_templates/temp02.html" et un exemple du cours : exercice boxing 3 pour les boutons de navigation. Les images sont personnelles, sauf le logo tecfa trouvé grâce au Forum Stic

réalisé le 14 octobre 2007 par Alessandro Conti