Google Web Designer

Intégrateurs web, graphistes, développeurs

Notions web (HTML, CSS, JS)

Créer des annonces publicitaires - Créer des contenus animés - Modifier du code HTML5/CSS3.

Comprendre le besoin

Standards du web: HTML5/CSS3/JS
Composantes du Responsive Design: grilles, médias queries
Animations: JS vs Flash
Le référencement, HTML5/CSS3 vs Flash
Réseaux publicitaires et création d'animations
Google Web Designer: présentation, intérêt
Google Web Designer vs Adobe Edge Animate

Atelier: Installation et panorama de l'espace de travail, des panneaux et des outils

Créer des annonces graphiques rich media

Solutions publicitaires: DoubleClick Studio, AdMob, Ad Exchange...
Bannières, annonces extensibles et interstitielles
Définition des propriétés d'une annonce (environnement, taille, etc.)
Insertion de contenu texte
Gestion de la mise en forme et des Google Fonts
Ajout de contenu multimédia (images, vidéos)
Intégration et gestion de formes
Modification des couleurs et des propriétés
Gestion de l'alignement (entre deux objets ou par rapport au conteneur)
Prévisualisation d'une annonce
Publication d'une annonce suivant les plateformes

Atelier: Création et publication d'une bannière simple

Créer des annonces complexes

Découpage de son annonce en plusieurs divisions
Intégration de contenu dans une division
Encapsulation des objets
Ajout de composants (galerie d'images, vidéo Youtube, carte Google Maps...)
Gestion de la 3D: vue, déplacement et rotation d'un objet
Création et réutilisation d'un groupe d'objets
Création et enregistrement d'un modèle

Atelier: Création et publication d'une bannière structurée

Gérer les évènements

Ajout d'un évènement à un contenu existant
Utilisation des actions prédéfinies
Création d'une action personnalisée
Insertion d'une zone cliquable

Atelier: Affichage d'une légende suivant l'image d'un slider

Créer des animations

Modes de création: rapide ou avancé
Gestion des animations globales via les scènes
Animation d'un déplacement ou d'une rotation
Animation d'une couleur d'arrière-plan
Paramétrage d'une animation: durée, accélération ou décélération
Gestion des animations par objet via une timeline et des calques
Application d'une répétition pour une animation
Verrouiller ou masquer des calques
Insertion d'une image clé
Répétition sur l'ensemble des animations

Atelier: Animation des objets d'une annonce

Visualiser et modifier le code

Gestion du style CSS d'un objet
Affichage du code source d'une annonce
Recherche du code correspondant à un objet
Application de modifications

Intégrer des éléments dans un projet web

Création d'un document HTML5/CSS3
Intégration de contenus, d'objets animés

Méthodologie basée sur l'Active Learning : 75% de pratique minimum. Chaque point théorique est systématiquement suivi d'exemples et exercices.

Contrôle continu

Attestation de fin de stage mentionnant le résultat des acquis

Support de cours + sources des exercices