Modules - Pratique professionnelle
Formation Web

Du graphisme traditionnel au Web Design (label AFDAS)

15 jours - 90 h
4050 € HT
OBJECTIFS

Les participants appliqueront dans cette formation l'ensemble des techniques abordées dans le cursus du graphisme traditionnel au Web design.

AU COURS DE CE STAGE VOUS APPRENDREZ À :

Mettre en pratique l'ensemble des compétences acquises au cours du cursus du graphisme traditionnel au web Design.

PARTICIPANTS :

Cette formation s'adresse à toute personne impliquée dans la communication graphique traditionnelle et désirant appliquer ses compétences à la mise en page de sites Web.

PRÉ-REQUIS :

La participation à cette formation nécessite : soit d’avoir suivi les modules du cursus du graphisme traditionnel au web Design, soit d’en justifier les connaissances.

SÉLECTION :

La sélection des candidats pourra être effectuée lors d’un entretien préalable et après validation des pré-requis par un QCM (questionnaire à choix multiples).

EVALUATION :

Validation des acquis, par le formateur ou par un responsable pédagogique lors de la simulation de production.

LE PROGRAMME :

 

Module 1 : Conception graphique pour le Web (label AFDAS) – 2 jours

- Le métier du Web Designer
Identification des technologies
L’environnement écran
Du print au web, similitudes, différences, contraintes

- Identité graphique
Les outils en ligne
Les outils de conception
Logotypes
Composition et analyse d’un site
Cinématique des pages
Grilles gabarits
Typographie
L’animation

- Les outils de production spécifiques au web
Photoshop pour le Web design
Illustration pour le Web
Indesign est le digital
Les OPEN SOURCE éditeurs web pratiques
Recherche d’images et bibliothèques
Médias du Web

- Recherches graphiques
Concevoir ses bibliothèques
Principe de présentation commerciale

Module 2 : De la maquette d’intention graphique à l’intégration web – 2 jours

- Préparation de la maquette graphique avec Adobe Photoshop (format, taille, repères/grilles, fond, couleur, typo, images, etc.)
- Utilisation des calques, tranches, grilles, repères
- Préparation du découpage de la maquette (header, footer, corps, menu, zones d’interaction)
- Préparation et optimisation des images (résolution, format de fichier, taille, couleurs, cadrage, sprite, etc.)
- Ranger, classer, nommer, exporter ses éléments

- Intégration XHTML et HTML5
Mise en place des éléments fonctionnels et graphiques
(Formulaires, éléments JavaScript, éléments animé, autres, etc.)
Comparaison de la maquette d’intention graphique avec le site finalement produit
Identification des contraintes
Debuggage et mise en ligne

Module 3 : Editeur Dreamweaver (label AFDAS) – 5 jours

- Découverte de l’interface
Préparer un site pour Dreamweaver
Créer un site dans Dreamweaver
L’environnement de travail
Utiliser les différents modes d’affichages

- Création de pages
Manipuler du texte
Introduction à la sémantique
Les propriétés de la page
Les différents types de liens : absolus, relatifs, mail, ancre

- Les images
Incorporer et modifier les images

- Les listes
Ordonnées, non ordonnées, de définitions

- Les formulaires
Réaliser et mettre en forme un formulaire

- Utiliser les feuilles de styles (CSS)
Feuilles internes, externes
Utiliser les sélecteurs ; les propriétés et leur valeur
Les propriétés graphiques d’arrière-plan
La balise DIV et les propriétés de boite
Réaliser des menus en CSS

- Les positionnements CSS
Flottant, absolu, relatif, fixe
Hiérarchie et sélecteurs avancés
Gestion des différentes tailles d’écran

- Les comportements JavaScript
Utiliser le Framework Spry pour réaliser un menu déroulant
Incorporer des widgets
Utiliser jQuery mobile pour réaliser des pages adaptées aux mobiles
Vérification de compatibilité avec les navigateurs
Mise en ligne par le protocole FTP

Module 4 : Le montage vidéo pour le Web – 1 jour

- Comprendre ce qu’est la vidéo
Les formats SD, HD, les standards vidéo et informatiques

- Prise en main
Présentation de l’interface et des différentes fenêtres de travail
Le montage cut (points IN et Out, insérer ou incruster)
Les outils de précision (trims, sélection, plume, fondus…)

- Le montage
Sélectionner les plans montés dans les rushes
Faire un montage cut
Préciser et affiner son montage
Prémixer le son
Ajouter les fondus

- La post-production
L’étalonnage vidéo (travail de la lumière, des couleurs et du contraste)
Les autres effets vidéo
Le titrage
L’habillage et son animation

- L’export vidéo
Préparer son montage pour l’export
Exporter avec le media Encoder
Intégration dans une page web

Module 5 : Les fondamentaux du Web – 2 jours

Passage en revue chronologique des 3 grandes couches technologiques qui constituent le web d’aujourd’hui.

- L’internet (1960-1990)
Protocoles, serveurs, adresses IP, noms de domaines…
téléchargement, courrier électronique, Chat…

- Le WorldWideWeb (1990-2000)
Hypertexte, W3C, adresses web, Navigateurs…
Pages web, commerce électronique, moteur de recherche et référencement…

- Le Web 2.0 (2000-2010)
Standards du web, langages open source, logique sémantique, partage de données…
Blogs, réseaux sociaux, applications web et mobile…

- Perspectives (2010+)
Etat de l’art des métiers du web et perspectives d’évolutions

Module 6 : WordPress – Création et gestion d’un site web libre – 3 jours

- Notions élémentaires
Présentation d’Internet et de ses contraintes
Les différents types de sites
Structure et organisation d’un site
Quels fichiers pour quels formats ?
Choisir un nom de domaine
Choisir un hébergeur
Notions du web et vocabulaire internet
Notions du code web sur le langage HTML et CSS

- Éléments de la préparation CMS
Télécharger ServeurPHP (WAMP ou MAMP)
Télécharger le CMS (système de gestion de contenu)
Récupérer un compte client et ses identifiants
Utilisation d’un FTP type FileZilla

- Préparation et installation
Installation sur un serveur local ou serveur distant
Création d’une base de données MySQL
Paramétrages et instructions
Première configuration WordPress

- Découverte du CMS WordPress
Qu’est-ce que WordPress ?
La communauté en ligne de WordPress
Fonctionnement de WordPress (le moteur / la base de données)
Comment préparer et organiser le contenu de son site : plan et catégorie
Fichier de travail : préparer le contenu et les images

- Interface et tableau de bord
Administration
Le back office
Les articles
Les médias
Les liens
Les pages
Les commentaires
L’apparence
Les widgets
Réglage général

- Création des contenus
Créer des pages, des articles
Définir une charte typographique et rédactionnelle
Créer des articles avec mots-clés et extraits

- Organisation des contenus
Articles, catégories et sous-catégories
Pages, hiérarchisation et descendance
Ajouter et paramétrer les widgets
Gérer les commentaires et avis
Protection des contenus par mot de passe

- Gestion des utilisateurs
Niveaux d’accès aux contenus
Ajout de nouveaux utilisateurs
Gestion des commentaires

- Gestion des médias
Ajouter une image, insérer des médias : images, vidéos, animations…
Les images à la une
Ajouter une galerie d’images et diaporama
Ajouter des fichiers PDF
Ajouter des médias d’autres sites
La bibliothèque de Média

- Personnalisation de l’interface
Choisir un thème
Modifier un thème grâce à l’éditeur de thème
Personnaliser un thème à l’aide du thème enfant
Modifier la présentation, menus et fond
Découvrir les thèmes payants
Zone éditeur de codes, HTML PHP CSS
Outils de personnalisation : ColorZilla, MeasureIt, Firebug

- Ajout des extensions au site
Plugins WordPress, lesquels choisir ?
Installer, paramétrer et activer un nouveau plug-in
Utiliser JetPack, multi-usages
Utiliser WooDojo et pourquoi
Les plugins populaires, comment les trouver !
Utiliser les Shortcodes
Ajouter un contenu pour afficher un portfolio
Les liens vers Facebook et Twitter

- Maintenance et sécurité
Mise à jour automatique et manuelle
Sauvegarde de votre site et sécurité
Précautions et bonnes pratiques

- Fonctionnalités supplémentaires
Bien référencer votre site WordPress, rappel des règles Google
Personnaliser les CSS avec Firebug

- Mise en ligne et mise à jour
Vérifier le fonctionnement du site
Envoi chez l’hébergeur
Faire évoluer son site

MODALITÉS DE MISE EN OEUVRE
Conditions : Chaque formation a lieu à partir de 3 inscrits.
Effectifs : 5 personnes
Horaires : 9h/12h et 13h30/16h30
Lieu : POLE IIID FORMATION 78, boulevard du Général Leclerc 59100 Roubaix
Responsable pédagogique : Jérémy Theng
Contact commercial : Salima Sid Lazara 03 28 35 04 44
PrintFriendly and PDF