Bachelor Responsable de Communication Bachelor 1- Mars 2015 INITIATION AUX LOGICIELS DU WEB SYSB202 Semestre 2 Nombre heures 20 Nombre crédits 2 Langue d enseignement Français Département académique : Management des hommes et des process Coordinatrice du module : Stéphanie PATFOORT Campus de : LYON Téléphone : 04 72 85 73 40 Stephanie.patfoort@ecoles-supdecom.com Responsable du syllabus : François CHAMOUX Campus de : LYON Mail : francois.chamoux@idraclyon.net Téléphone : 06 30 83 49 57 Signature 1
Coordinatrice pédagogique groupe : Ségolène MANUEL Mail : segolene.manuel@idraclyon.com Téléphone : 04 72 85 18 12 OBJECTIFS & COMPETENCES Objectif(s) du cours Le module d initiation aux logiciels Web a pour objectif de donner aux étudiants, une base de connaissance élargie des moyens de création, de réalisation de sites Internet, de gestion de campagne de newsletter et une initiation à la création de Web Design au travers de l utilisation des outils tel que Dreamweaver, Photoshop, de logiciel comme Sendblaster et de CMS comme Artisteer. Ce programme a pour but de faire acquérir les bases des langages employés dans les différentes techniques de la communication digitale, mais également la logique de production Web dans un environnement technique, adapté aux méthodes de travail communément utilisées dans le monde professionnel. Compétences à acquérir Maîtriser les bases du langage HTML et CSS. Appréhender l environnement de création et de développement Web. Appréhender l utilisation des outils de développement Web : Suite Adobe Web Premium, des CMS tel que Artisteer (CMS qui intègre Jumlaa, WordPress, Blogger) pour Mac et PC Apprendre à utiliser des outils professionnels de gestion de newsletter dans le cadre d une campagne de communication. Résumé du cours Le module Initiation aux logiciels du Web est décomposera en 4 phases La première phase sera axée autour de l'utilisation de Dreamweaver et nous permet d'appréhender le code, sa structure et surtout sa logique. Le langage qui sera vu est le Html 4 qui est utilisé uniquement pour les newsletters. Cette partie comprend 4 séances en TD. La seconde phase portera sur l'utilisation d'outils de gestion des newsletters et de mass mailing au travers des outils classiques de mass mailing. Cette partie abordera autant l aspect technique de la mise en ligne de la campagne, mais également les aspects de suivis, de tracking et d analyse. La troisième phase abordera les aspects graphiques par une initiation de 3 séances, à Adobe Photoshop, dans laquelle nous apporterons aux étudiants les éléments de bases du Web Design de façon pratique. Les points abordés seront la responsive 2
design, les éléments de bases de la création d un design, les découpes et le maquettage. La quatrième phase de ce programme traitera de l emploi généralisé des CMS et des nouveaux outils de conception de site : Joomla, Artisteer, WordPress, etc. Sur un plan théorique, cette partie se concentrera sur les grands points que sont l architecture des sites en Html5 et Css 2 et 3, les éléments comportementaux grâce à l utilisation automatique des JavaScripts (éléments dynamiques, formulaire de contact, etc.). De plus elle abordera succinctement les grandes règles de mise en place d un site en ligne et les phases de test en amont. Tous les apports théoriques, seront diffusés lors des séances dirigées par les intervenants. FORMULE PEDAGOGIQUE & EVALUATION Prérequis Aucun prérequis n est exigé Il sera demandé aux étudiants de lire le livre de Francis Draillard «Premiers pas en CSS et HTML» Editions Eyrolles. Déroulement (cf maquette académique) Blended FFP APP Learning 14 heures 6 heures Soit 7 Soit 1 Volume séances de séance de horaire 2H présentation de 2H et 4 séances d 1H TE / TI Evaluation intégrée Supports pédagogiques Pour chaque séance, les étudiants travailleront avec un support numérique ou papier pour leur faciliter la progression. Il sera mis à disposition les différents tutoriaux créés pour comprendre et aborder le langage HTML, sous forme de livre blanc (E-Campus) 3
Évaluation Types Description % Contrôle continu L évaluation comporte 3 notes : 100% - Montage d une page en Html 4 de type newsletter - Travail déposé sur le serveur groupe - Dossier : Analyse du travail effectué à la suite de la réalisation du mini site. Les points de contrôle et de validation porteront sur les choix et parti pris, conception et ajout des add-on et des Api, les Méta-Tags. Dossier individuel de 4 à 6 pages - Une note dans le cadre du E-Learning Chaque note a un coefficient 1 Examen écrit Examen oral Dossier PLAN DETAILLE Partie I Introduction Durée : 6 heures dont 2 heures de E-Learning - Introduction théorique aux environnements Web à travers les concepts, l architecture, l ergonomie et les technologies. Présentation de l espace de travail et des différentes solutions de développement à travers des exercices de manipulation sous Dreamweaver Compétence 1 Connaissance de l environnement Web. Appréhension des principes d ergonomie (responsive design). Appréhension de l architecture Serveur / Web et des concepts techniques et technologiques. Compétence 2 Prise en main de Dreamweaver Manipulation des éléments constitutifs d une page à travers des (textes, images, tableaux). Manipuler les propriétés de pages dans l environnement et décortiquer les fondements du codage en Html4. Introduction au style et au comportement des balises NEBRA Mathieu, Réalisez votre site web avec HTML5 et CSS3 : Créer son site web n'a jamais été aussi facile!, Simple IT, 2012, ISBN: 978-2-9535278-8-9 4
Partie II Création d un web design simple Durée : 6 heures Dont 2 heures de E-Learning Section 1 - Création d un web design simple sous Adobe Photoshop CS6 Section 2 -Création d une page simple sous la conduite du professeur, avec l introduction progressive des éléments et des structures d encapsulation de tableaux Compétence 1 Comprendre les principes d ergonomie à travers la création d un design. Maitriser les bases de Photoshop, l organisation d une page spécifique Web. Compétence 2 Créer une page simple de type newsletter en Html4 et intégrer les styles. Acquérir la logique de montage de page simple. Se familiariser avec le code Apport des méthodes de calques, utilisation de l outil. Initialisation à l architecture des pages comportant les feuilles de styles joints de type Compétence 3 Acquérir la logique de montage de page simple. Se familiariser avec le code. Compétence 4 Maitrise de la logique. Comprendre l utilisation des automates et des fonctions de JavaScript. Maitrise de l envoi d un email au travers d une page Web. Maitrise de la structure d un formulaire. Compréhension de la phase de test. LABBE Pierre, 100 tutoriels pour maîtriser Photoshop, Eyrolles, 2014 Partie III création d un site Durée : 6 heures Dont 2 heures de E-Learning - Création d un mini site ou d un blog sous un environnement CMS type Artisteer Apport théorique et organisationnel de l architecture Html5/Css3 Compétence 1 Maitrise de l outil. Appréhender la structure du HTML 5, CSS et comportement JavaScript. 5
Apprendre à intégrer et adapter une Template. Utiliser et mettre en place les éléments pratiques et théoriques. Compétence 2 Maitrise de la mise en ligne. Analyse du comportement face aux différents navigateurs. Mise en place des scripts Google Analytique et des éléments techniques de référencement (travail sur les Méta-Tags) Mise en place des scripts analytiques LANCEMENT DU DOSSIER DE VALIDATION. GOETTER Raphaël et RIMELE Rodolphe, HTML 5 - Une référence pour le développeur web, Editeur: Eyrolles, 2013, ISBN: 978-2-212-13638-8 Partie IV Logiciels de newsletters et de mass-mailings Durée : 2 heures - Utilisation de logiciel on-line de mass mailing et de newsletters MailKitchen Apport organisationnel de la gestion organisationnelle d une campagne Compétence 1 Apprendre à utiliser cette famille de logiciels sous mac et pc. Compétence 2 Appréhender la gestion d une campagne de newsletter : intégration de la newsletter, paramétrage d envoi, préparation des bases de données et de l opt-in, maitrise des phases, de testing, gestion des envois et analyses de ROI Compétence 3 Appréhender la notion d analytics et le ROI à travers les KPIs d usage FLEUREAU, Guillaume, L'emailing efficace - Toutes les techniques pour atteindre vos destinataires, Editeur: Eyrolles, 2013, ISBN: 978-2-212-55585-1 6
BIBLIOGRAPHIE Lectures obligatoires F. DRAILLARD 2011 - Premiers pas en CSS et HTML, Edition Eyrolles 465 pages J.KEITH 2010 - HTML5 pour les web designers, Editeur Eyrolles 87 pages Lectures recommandées Ma revue web : site dédié au design et à la création Press Citron : Blog spécialisé ASP Magazine : site dédié au développement de nombreuses ressources Programmez : site et revue de développement Web JF. NOGIER, T.BOUILLOT, J.LECLERC 2013 - Ergonomie des interfaces : Guide pratique pour la conception des applications web, logicielles, mobiles et tactiles, Edition Dunod, 320 pages 7