CONCEPTEUR REALISATEUR MULTIMEDIA GOBELINS CAHIER DES CHARGES WORKSHOP HTML/JAVASCRIPT CRM13 2 ème ANNEE OCTOBRE 2014
Objectifs : Approfondir votre pratique de l intégration HTML/CSS Apprendre à intégrer du Javascript (jquery) dans des pages HTML pour rendre le design plus vivant et interactif. Comprendre les mécanismes de jquery, se les approprier et les mettre au service de la créativité. (Nous préférerons une technique simple mais maîtrisée plutôt que l utilisation d une solution clé en main sans en comprendre le principe) Mettre en œuvre des méthodes de responsive design Aller plus loin, pendant le travail en autonomie grâce aux pistes apportées durant le cours Sujet : Intégrer, en HTML5, une charte graphique PSD de votre création, préparée en 2 formats (desktop, et mobile). Enrichir l expérience utilisateur sur votre site grâce à Javascript /JQuery (animation, rollover, ) La structure est indiquée par la suite, la thématique est libre.
FONCTIONNEMENT Le but est de créer un site internet statique comportant 3 pages : une page d accueil une page de contenu un formulaire La navigation entre les pages doit être fonctionnelle. Votre projet peut avoir pour objectif de promouvoir un lieu, un projet, un voyage, une activité, Il pourra servir pour vous ou pour une association dont vous vous occupez par exemple. Soyez créatifs, et si le site peut vous être utile par la suite, cela ne fera que rendre le travail plus intéressant. Vous pourrez utiliser ce projet dans votre portfolio donc c est l occasion de préparer une maquette libre. Vous devez arriver au premier cours avec les maquettes PSD de votre projet. Chaque page doit être maquettée en deux formats : - desktop : supérieure à 1024x768px - mobile : 320x480px Nous aborderons des notions de responsive design que vous devrez appliquer afin de rendre votre site compatible avec les mobiles. Lors de cet exercice nous nous limiterons aux téléphones (320 x 480px). Nous vous invitons vivement à réfléchir en avance aux animations que vous souhaitez intégrer à votre site. Vous disposez de 8 séances de 3,5h en classe pour intégrer votre site. - 2 séances avec Isabelle (HTML et CSS) - 4 séances avec Maxime (jquery) - 2 séances en autonomie
LIVRAISON Date de rendu : fin de semaine de workshop soit le 05/10/2014 A fournir : - Un dossier zip contenant : o les PSD de vos maquettes initiales, nettoyés < 8Mo o les fichiers de votre site complet (HTML + CSS + JS + JPG, ) - Lien vers votre site en ligne Conditions de rendu : - Claroline uniquement CONTRAINTES / CRITERES DE NOTATION Le site doit contenir au minimum : - 3 pages web - Des animations et interactions utilisateur (JQuery) - Une version mobile à Les maquettes de ces pages doivent être finalisées lors de votre arrivée au premier cours, les animations doivent être anticipées. L arborescence du site devra suivre le modèle vu ensemble en cours. Le site web doit avoir un rendu équivalent : - sur IE, Firefox, Chrome et Safari - entre la maquette PSD/JPG et la version HTML (si on fait une capture d écran et qu on la colle sur le PSD, il ne doit pas y avoir de décalage majeur) Les fichiers CSS / HTML / Javascript doivent être indentés et commentés. è Nous prendrons en compte dans la notation les critères suivants : qualité générale, rigueur, esthétique, qualité graphique, originalité, créativité, ergonomie, intuitivité, niveau de complexité, challenge personnel. BAREME DE NOTATION Maquette prête pour le TP, participation, effort de progression.../3 Rendu du site sur les différents navigateurs et par rapport à la maquette.../3 Animation et interactivité.../6 Qualité du code, rigueur.../3 Qualité de la version mobile, responsive design.../5
DEROULEMENT Mardi 30/09 JOURNEE avec Isabelle BIAMONTI - Tour des notions abordées en 1 e année (HTML CSS) - Lancement du projet - Intégration de la home de votre site - Intégration des pages internes de votre site - Notions sur le responsive design - Préparation de la version mobile sur la CSS Mercredi 01/10 JOURNEE avec Maxime DRESSENETTO - Mise en place des éléments nécessaires à l'utilisation de jquery - Découverte et pratique des principes de base de jquery - Découverte et utilisation des fonctions nécessaires pour le responsive design Jeudi 02/10 MATIN en autonomie Jeudi 02/10 APRES-MIDI avec Maxime DRESSENETTO - Suivi et accompagnement individuel Vendredi 03/10 MATIN en autonomie Vendredi 03/10 APRES-MIDI avec Maxime DRESSENETTO - Suivi et accompagnement individuel - Support et finalisation Vendredi 03/10 SOIR Livraison (tolérée jusqu au 05/10)