====== Projet : Démontrez vos compétences ====== ===== Objectif ===== L'objectif de ce projet est de rendre un site web **complet**. Votre site devra contenir au minimum : * au minimum trois pages différentes * sur les sujets qui vous intéressent (dans la limite du raisonnable) * comprenant le contenu pertinent vu en TD ou non (images, formulaires, vidéos, inclusion de cartes, ...) * présentant une structure pertinente avec ce contenu * [[2016_2017:s1:webdoc:td5|un menu "dynamique"]] commun aux trois pages * différentes feuilles de styles, pour toutes les pages, illustrant des changement dans les couleurs mais également de structure et d'adaptabilité * votre CV au format HTML et un lien de téléchargement de votre CV en PDF (anglais ou français, selon votre choix) Tout site est amené à évoluer et souvent à être maintenu par plusieurs personne. Le code que vous rendez doit refléter votre volonté d'aider les prochains à comprendre vos choix techniques. Votre site sera évalué en fonction de: * l'application des principes de séparation des préoccupations entre les éléments de contenu et de mise en forme, * la qualité de la mise en forme (utilisation des sélecteurs, des éléments de mise en forme etc), * la complexité de la mise en forme (transition CSS, transformations, etc), * la conformité du site (n'oubliez pas les validateurs du W3C !), * l'adaptabilité de la mise en page au support, * la qualité des commentaires, * l'évolutivité du code, * l'originalité du contenu. C'est le moment de vous faire plaisir ! Faites un site qui vous plait ! Au besoin reprenez des éléments de votre exposé si vous manquez d'imagination. N'hésitez pas à piocher et adapter des bouts de code dans vos compte-rendus des TD précédents. Attention à la taille de votre site ! Votre archive zip doit faire moins de 20 mo ! Prenez garde à la taille des images / vidéos. ===== Feuille de style dynamique ===== Vous pouvez récupérer ce code contenant un exemple de changement dynamique de feuille de style : {{:2015_2016:s1:webdoc:code_projet.zip|}} Pour l'utiliser dans vos propres codes suivez les règles suivantes : * copiez collez tout le code (balises incluses) de '''' dans votre propre head * Créez une balise ''