Le web repose tout entier sur les notions de base présentées dans les leçons 1 à 5, qui vont permettre d'en comprendre bien mieux le fonctionnement. Ces bases doivent être toutes bien comprises et mises en oeuvre, elles ne sont pas optionnelles.
Le mieux est de les expérimenter/modifier sur la page de présentation et toutes autres nécessaires, avant de vous attaquer réellement à votre site avec un début d'expérience et une démarche plus méthodique;[clic pour fermer l'intro]
Structure, enregistrement, noms de fichiers, localisation; Html structurant.
Méthode : on ne ferme plus les fenêtres; balises, textes, titres,
doctype, relief, notion de flux.
[ Développer]
Les liens, essence de l'hypertexte; sur une lettre, un mot, une phrase; liens sur des images.
Support du lien vs. cible du lien. Listes.
Prévoir login et mot de passe pour ENT, mise en route des pages perso, connexion.
[ Développer]
Image: elle n'est pas collée dans la page même si on l'y voit, notion de chemin, formats de fichiers images pour le web, pixels, taille physique vs. taille d'affichage.
Préparation : .gif, .jpg, .png, 1bit, seuil, trames, transparences.
[ Développer] + Eval1
Aspects visuels, feuille de style externe, fonctionnement. Arrière plan pour les éléments html. Police, taille, couleur, noms, hex, rgb, cartes de références. Couleur et écran, synthèse additive, colorisation des images, comprendre et formuler en hex. ou rgb.
[ Développer]
Mise en page, stabilité, sophistications, classes, conteneurs <div>, positionnement, modèles, rollover couleur sur les liens. Référence sur w3schools.com
[ Développer]
Prévoir pour la séance suivante 10 images de même format dans un dossier "diaporama", + 10 miniatures de ces images ramenée à 60 px, nommée "001v.jpg" (v comme vignette) etc, pour faire un petit "album photo" avec des frames, et plus tard un diaporama automatique.
usemap, frames et autres fonctions avancées...
Réflexion sur l'organisation des contenus du site. Notions générales de lecture d'écrans, de mise en page, d'ergonomie du site: menus, déplacements, retours, etc).
Il est temps de mettre en oeuvre votre projet.
A partir de la leçon 6 les contenus deviennent optionnels. Mettre en oeuvre de la totalité des solutions étudiées n'est pas obligatoire, il faut choisir les plus adaptées à votre projet.[clic pour fermer l'intro]
Tableaux: obsolescence et domaine d'utilisation. Exemple [ Développer]
Frames: site plus complexe mais "User experience" plus simple. Rendus obsolètes par le web dynamique et Ajax, les frames restent une structure intéressante sur un serveur "statique" comme l'ENT ou sur les volumes mis à disposition par vos FAI; attribut target pour les liens.
Image-map: image multi-liens comme menu graphique (intégrable dans un jeu de frames).
[ Développer ] +Eval2
Son et video facile avec html5; visionneuses et préfabriqués. widgets externes (google maps etc...).
Html: un diaporama automatique avec la balise de redirection, des blocs fantôôômes avec une classe, mouse events. CSS3 pour les transitions et animations...
Un menu déroulant de liens, liste"pliante" dans une première page : <cs object>
<openWindow>créer une nouvelle fenêtre pour des contenus secondaires (commentaires, messages, images) "au-dessus" d'un contenu prioritaire qu'on ne veut pas diviser. Fantaisies avec <alert>
"Bibliothèques" de scripts préfabriqués ( Jquery s'impose, Scriptaculous s'efface)
Voir dans le code source les ressources utilisées dans des pages rencontrées.
[ Développer]
Head: partie invisible de la page, améliore la visibilité du site. balises <meta> pour robots.
Contact: éviter le SPAM mais permettre au visiteur le contact.
Perspective de notation, barême.
[ Développer] + Eval 3
Trois pré-évaluations, aux séances ~ 3 - 6 - 9. Evaluations techniques et rapides sur les fondamentaux html, css, http, qui complétent et préparent l'évaluation globale de votre travail.