Infographiste Web

créATION
Objectif
&
réAlIsATION de PrOJeTs
Apprentissage des outils de création, de mise en page, d’animation et d’intégration de
supports de communication multimédia (HTML5 / CSS / DREAMWEAVER /
JQUERY / FIREWORKS / FLASH / EDGE ANIMATE...).
Niveau requis
Bac + 2 / expérience professionnelle dans les métiers de la communication ou de la
création, maîtrise des logiciels de création graphique Photoshop et Illustrator.
iNitiatiON au LaNGaGe HtML5 avec éditeur de texte
. La page de base
. Les balises principales
. Organisation des noms de fichiers, répertoires
. Insertion de contenu
iNitiatiON au LaNGaGe css 1 et 2
. Principe des CSS
. Mise en page d’une page html avec un CSS
. Différentes propriétés des CSS
DreaMWeaver
. Présentation de l’espace de travail
Gestion de site
. Définition d’un site
. Arborescence
insertion de contenu
. Boîtes
. Listes, listes imbriquées
. Liens externes, internes, ancrés
. Images, images survolées, cartes graphiques
. Objet flash
. Balises audio - vidéo
vérification dans les navigateurs
Mise en forme avec les feuilles de style
. CSS pour les positionnements (flottants, absolus, relatifs)
. CSS pour la mise en forme du texte (typo, couleurs...)
. CSS pour les arriere-plans, marges...
utilisation de la bibliothèque
. champs de texte, boutons radio, listes/menus, zones de texte, cases à cocher
. mise en forme avec les css
. envoi des formulaires en php
. validation des formulaires avec les spry
Les tableaux de données
. Création et modification des tableaux de données
Mise en ligne du site
. Paramétrage des préférences pour les sites FTP
NeWsLetter
. Intégration + test d’envoi
iNitiatiON fireWOrKs
. Découverte du logiciel
. Création d’une maquette
. Découpes et optimisation des images
. Intégration en html/css
ecg-formation.com
création d’un formulaire
créATION
jquerY
&
réAlIsATION de PrOJeTs
. Introduction au framework jquery
. Téléchargement de la bibliothèque jquery
. Découverte de la syntaxe, les sélecteurs
. Exercices d’application
. Comment utiliser les plugs-ins jquery sur le web.
WebDesiGN
. Faire découvrir l’univers du webdesign
avec ses spécificités à des graphistes édition
. Montrer la valeur ajoutée du web dans un projet
de communication globale
Print et web, complémentarité et spécificité
. Repérer les différences et similitudes entre le print et le web
. Comment les 2 supports peuvent-ils coexiter?
etats des lieux du webdesign
. Les sites référents de la communication interactive
. Actualité graphique et technologique du design interactif
. Typologie des supports (e-commerce, corporate, évènementiel, réseaux sociaux...)
. Analyse comparative de supports presse et web
exercices pratiques
. Relooking d’un site
. Refonte de l’arborescence du site
. Création du zoning et du wireframe de la page d’accueil
. Comment réaliser un graphisme au service du contenu
. Création d’un moodboard
. Réalisation graphique de la page d’accueil
. Préparation des fichiers pour l’intégrateur
Le MOtiON DesiGN et L'aNiMatiON POur Le Web
fLasH
. Création de la scène
. Dessin et illustration : utilisation des outils de bases
. Création d’un symbole
. Création d’un clip
. Création d’un simple bouton
. Adaptation d’un bouton de menu déroulant
. Les couleurs utilisées pour le Web
. étude de la fenêtre propriété
. éditer un nom d'occurrence et de variable
. Création de la bibliothèque
. Texte, statique, de saisie, dynamique
. Interpolation de mouvement
animation
. Insertion de couches supplémentaires
. Modifications d’images-clés
. Animation de la position d’une forme
. Utilisation de l’outil texte
. Utilisation de la commande “aligner”
. Conversion de formes en symboles
. Modification des symboles
. Utilisation de la zone de travail
ecg-formation.com
création de symboles et de boutons
créATION
&
réAlIsATION de PrOJeTs
création d’effets spéciaux
. Animation de l’échelle d’une forme
. Création de trajectoires de déplacement
. Copie d’une scène
. Substitution d’un symbole à un autre
. Séparation du texte et des symboles
. Utilisation des interpolations et des repères de formes
. Création d’effets de transparence
utilisation des comportements de symboles
. Ajout d’un effet de couche alpha à un bitmap
. Utilisation des outils de dessin
. Utilisation de l’échelle temporelle
Production finale
. Insertion de scènes
. Règlage des transitions entre scènes
. Optimisation de l’animation
. Ajout d’une action Play
. Ajout d’une action Get URL
. Ajout d’une action Load Movie
. Test d’une scène
initiation à actionscript
. En mode normal
. En mode expert
aDObe eDGe aNiMate
créer des animations compatibles avec les périphériques
nomades (Tablettes et Smartphones)
téléchargement et installation de edge animate
. Le cloud d'Adobe
. L'extension manager
. Installer Edge Animate
Découverte de l'interface
L'animation
. Gestion des images clés
. Les transitions
. Le verrouillage
. Les accélérations
. Inverser une animation
. Importer une séquence d'images PNG
. Copier-coller des transitions
. Le nesting ou l'imbrication de mouvement
. TP : animer une page web statique
L'interactivité
. Les déclencheurs
. Le panneau Action
. Créer un bouton et le programmer
. Boucler une animation
. Arrêter une animation
. Travailler avec des clips
. Créer un lien vers une page web
. TP : Créer un diaporama interactif
ecg-formation.com
. Similitudes et différences avec l'API Flash
. Le modèle HTML (DOM et Balises)
. La Timeline
. La Scène
. Les propriétés
. La prévisualisation
créATION
La publication
&
réAlIsATION de PrOJeTs
. Les paramètres de publication
. Créer un preloader
. Intégration d'animation dans une page web
. Structure et fichiers d'un projet « Edge animate»
. TP : animer un logo et l'intégrer dans une page web déjà existante
utilisation des ressources
. Tutoriels sur le site d'Adobe
. Références bibliographiques et multimédias
ecg-formation.com
PrOjet fiNaL
. Réalisation et mise en ligne d’un site