Programme de Formation Dreamweaver Avancé : HTML5/CSS3, Javascript et Responsive Design

Introduction

Présentation de Dreamweaver CC

Présentation des produits Adobe

Découvrir le cloud Computing avec Dreamweaver CC

Créer son Adobe ID

Panorama des outils de création de pages web

Rappels des normes XHTML, CSS, HTML5

Les problèmatiques actuelles : le multi-format, les terminaux mobiles

Découvrir HTML5

Présentation de HTML 5

Support par les navigateurs

Les balises HTML5

Atelier pratique : Une première page en HTML 5 Créer des sites web avec HTML5

Structure et sémantique

Nouveaux éléments de formulaire HTML5

Intégration d'animations et sons

Atelier pratique : Création d'un premier site avec formulaire en HTML5 Utiliser CSS 3 Rappel CSS

Ordre de priorité : cascade et héritage

Dimensionnement, marges

Problèmatique de positionnement

Propriétés CSS 3 pour la mise en forme : bordures, ombres, transparence,...

Atelier pratique : démonstration de styles et d'effets sur les différentes propriétés étudiées, mise en page complexe d'une page Découvrir JavaScript

Concepts de base du Javascript

Gestion des événements

Présentation du DOM (Document Object Model)

Accès, modification, ajout d'éléments et d'attributs

Gestion dynamique des CSS

Atelier pratique: réaliser une galerie de photos Comprendre le Responsive Web Design

Présentation du Responsive Web Design : objectifs, alternatives...

Les grilles fluides

Les media queries

Compression d'images, sprites, Data URI

Introduction aux librairies JavaScript pour compatibilité HTML5 Atelier pratique : création d'un site multiplateforme (smartphone, tablette..)

Programme de Formation Dreamweaver Avancé : XML, Ajax et jQuery

Découvrir XML

Presentation du format XML

Structure d'un document XML

Intérêts d'XML

Atelier pratique : flux RSS d'un site web Découvrir jQuery UI/ JQueryMobile

Présentation de jQuery UI

Fonctions essentielles

Installer JQuery UI et utiliser un composant de base

Utiliser les onglets de JQuery

Panneau JQuery Mobile

Atelier : Réalisation d'un menu dynamique avec JQuery UI,

utilisations des effets JQuery

création et mise en forme d'une page à destination de mobile Comprendre Ajax et XMLHttpRequest

Communication synchrone et asynchrone

Instancier un objet XMLHttpRequest

Envoi de requêtes

Gestion des réponses, codes de retour des serveurs HTTP

Gestion des erreurs

Utiliser AJAX avec jQuery

Communication asynchrone/synchrone

Mise en oeuvre d'AJAX

Fonctions jQuery disponibles

Chargement de pages et injection de code

Intégration complète d'AJAX et de l'UI

Compatibilité avec les autres frameworks

Atelier pratique : création d'une interface web riche avec jQuery Optimisation de pages pour le référencement : SEO

Rappels rapides sur le référencement

Règles élémentaires de SEO : Titre de documents, Meta, titre de contenus

Règles avancés de SEO : Liens, images, nom de fichiers, etc. Introduction à l'accessibilité Référentiels d'accessibilité

Quelques règles de bases : styles CSS, tableaux, navigations

Autres règles d'accessibilité

Optimisation de pages

Programme de Formation Dreamweaver Avancé : HTML5/CSS3, Javascript et Responsive Design + XML, Ajax et jQuery

Introduction

Présentation de Dreamweaver CC

Présentation des produits Adobe

Découvrir le cloud Computing avec Dreamweaver CC

Créer son Adobe ID

Panorama des outils de création de pages web

Rappels des normes XHTML, CSS, HTML5

Les problèmatiques actuelles : le multi-format, les terminaux mobiles

Découvrir HTML5

Présentation de HTML 5

Support par les navigateurs

Les balises HTML5

Atelier pratique : Une première page en HTML 5 Créer des sites web avec HTML5

Structure et sémantique

Nouveaux éléments de formulaire HTML5

Intégration d'animations et sons

Atelier pratique : Création d'un premier site avec formulaire en HTML5 Utiliser CSS 3 Rappel CSS

Ordre de priorité : cascade et héritage

Dimensionnement, marges

Problèmatique de positionnement

Propriétés CSS 3 pour la mise en forme : bordures, ombres, transparence,...

Atelier pratique : démonstration de styles et d'effets sur les différentes propriétés étudiées, mise en page complexe d'une page Découvrir JavaScript

Concepts de base du Javascript

Gestion des événements

Présentation du DOM (Document Object Model)

Accès, modification, ajout d'éléments et d'attributs

Gestion dynamique des CSS

Atelier pratique: réaliser une galerie de photos Découvrir XML

Presentation du format XML

Structure d'un document XML

Intérêts d'XML

Atelier pratique : flux RSS d'un site web Comprendre le Responsive Web Design

Présentation du Responsive Web Design : objectifs, alternatives...

Les grilles fluides

Les media queries

Compression d'images, sprites, Data URI

Introduction aux librairies JavaScript pour compatibilité HTML5 Atelier pratique : création d'un site multiplateforme (smartphone, tablette..) Découvrir jQuery UI/ JQueryMobile

Présentation de jQuery UI

Fonctions essentielles

Installer JQuery UI et utiliser un composant de base

Utiliser les onglets de JQuery

Panneau JQuery Mobile

Atelier : Réalisation d'un menu dynamique avec JQuery UI,

utilisations des effets JQuery

création et mise en forme d'une page à destination de mobile Comprendre Ajax et XMLHttpRequest

Communication synchrone et asynchrone

Instancier un objet XMLHttpRequest

Envoi de requêtes

Gestion des réponses, codes de retour des serveurs HTTP

Gestion des erreurs

Utiliser AJAX avec jQuery

Communication asynchrone/synchrone

Mise en oeuvre d'AJAX

Fonctions jQuery disponibles

Chargement de pages et injection de code

Intégration complète d'AJAX et de l'UI

Compatibilité avec les autres frameworks

Atelier pratique : création d'une interface web riche avec jQuery Optimisation de pages pour le référencement : SEO

Rappels rapides sur le référencement

Règles élémentaires de SEO : Titre de documents, Meta, titre de contenus

Règles avancés de SEO : Liens, images, nom de fichiers, etc. Introduction à l'accessibilité Référentiels d'accessibilité

Quelques règles de bases : styles CSS, tableaux, navigations

Autres règles d'accessibilité

Optimisation de pages

Programme de Formation Dreamweaver : Approfondissement

Introduction

Les enjeux de la création d'un site web

Rappels des méthodes de création de site Web

Découvrir les grilles fluides

Présentation du responsive design

Mode grille fluide

Palette d´insertion

Créer une structure de page

Décliner sur les autres supports

Créer un modèle de page

Créer une arborescence et une navigation

Atelier : Création d'un site Responsive DesignDécouvrir jQuery UI/ JQueryMobile

Présentation de jQuery UI

Fonctions essentielles

Installer JQuery UI et utiliser un composant de base

Utiliser les onglets de JQuery

Panneau JQuery Mobile

Atelier : Réalisation d'un menu dynamique avec JQuery UI,

utilisations des effets JQuery

création et mise en forme d'une page à destination de mobileDécouvrir CSS Designer et Transition

Présentation de CSS Designer et Transition

Découvrir l´adaptation de la structure

Ajouter et modifier des règles

optimiser les styles

Atelier : Atelier: Réaliser des dégradés, des transitions sur des éléments HTMLExtension Manager

Installer Extension Manager

gérer les applications adobe sur votre machine

Conduite de projet Web avec Dreamweaver

Spécification d’un site : le cahier des charges

Conception du site : l’ergonomie, la navigation, la charte graphique, les bases de données, etc.

Développement du site : le rôle de Dreamweaver

Mise en ligne du site : l’importance de la recette

Suivi du site : animer et maintenir son site Web

ConclusionPassage de la certification (si prévue dans le financement)

Programme de Formation Dreamweaver : Initiation + Approfondissement

Introduction

Edition de sites internet

Panorama des outils de création de pages web

Présentation des produits Adobe

Découvrir le cloud Computing avec Dreamweaver CC

Créer son Adobe ID

Premiers pas avec Dreamweaver

Découverte de l'interface : les fenêtres, les palettes de composants, les panneaux

Organisation de l'espace de travail

Paramétrage des préférences : affichage, navigateurs, éditeur, ...

Création de pages web : édition, modification, sauvegarde

Mise en forme de texte (polices, titres, paragraphes, texte préformaté)

Insertion d'images et manipulation de propriétés (redimensionnement, optimisation, recadrage)

Création de liens hypertextes (lien vers une page web, lien vers un fichier, lien de messagerie)

Création, modification de tableaux

Définition d'un site Dreamweaver, gestion des fichiers, affichage de la carte du site

Atelier : Création d'un premier siteRappel code XHTML

Principes de fonctionnement

Bases du XHTML : balises et attributs, catégories de balises.

Présentation des principales balises (texte, images, listes à puces, liens, tableaux...)

Manipulation de tableaux

Atelier : Création d'une page web pour le test des balisesBalises HTML5

Structure et sémantique en HTML5

Utilisation de la balise

Utilisation de la balise

Atelier : Création d'une page HTML5 pour le test des balisesStyles CSS

Principes de base

Différents types de règles CSS

Mise en forme CSS avec Dreamweaver

Redéfinition d'un style d'une balise XHTML

Définition des styles de sélecteurs : liens survolés, liens actifs...

Création de styles personnalisés

Application de styles personnalisés

Attacher une feuille de style

Atelier : Donner du style aux pages précédemment créées.Création de sites web avec la méthode des tableaux

Création de l'ergonomie d'un site web

Gestion des problèmes de positionnement

Génération du gabarit principal

Édition des pages issues du gabarit

Atelier : Création d'un site avec le méthode des tableauxLes Formulaires

Fonctionnement d’un formulaire

Création de formulaires : Insertion de champs, mise en forme...

insertion de nouveaux champs html5

Validation du formulaire

Récupération des données, envoi d’un mail avec PHP

Mise en forme CSS des formulaires

Mise en ligne de sites web avec Dreamweaver

Principes du transfert FTP

Paramétrage du client FTP de Dreamweaver

Transfert de fichiers sur le serveur distant

Présentation d'autres outils FTP

Synchroniser ses fichiers

Atelier : Mettre en ligne notre site web sur un serveur distantUtilisation des modèles

Principes de fonctionnement des modèles de Dreamweaver

Architecture du modèle et organisation des différentes régions

Créer un modèle

Utiliser un modèle

Atelier : Création de pages issues de modèleFonctions avancées de mise en forme

Insertion de signets

Liens vers les signets

Présentation du Flash

Création d’un menu Flash

Insertion de texte animé, de médias (son, vidéo)

Présentation du DHTML

Principes de fonctionnement du DHTML

Génération de contenu dynamique avec Dreamweaver :

Les comportements (apparition d’objets, ouverture de fenêtres, images survolées...)

Les scénarios (déplacement de calques, titre défilant...)

Atelier : Création de menus dynamiques

Validation de formulaires, Effets-Spéciaux, Pop-UpInitiation au référencement

Présentation des enjeux du référencement

Concepts et insertion des balises d’en-tête

Critères de classement des outils de recherche

Règles à respecter et Spam-dexing

Découvrir les grilles fluides

Présentation du responsive design

Mode grille fluide

Palette d´insertion

Créer une structure de page

Décliner sur les autres supports

Créer un modèle de page

Créer une arborescence et une navigation

Atelier : Création d'un site Responsive DesignDécouvrir jQuery UI/ JQueryMobile

Présentation de jQuery UI

Fonctions essentielles

Installer JQuery UI et utiliser un composant de base

Utiliser les onglets de JQuery

Panneau JQuery Mobile

Atelier : Réalisation d'un menu dynamique avec JQuery UI,

utilisations des effets JQuery

création et mise en forme d'une page à destination de mobileDécouvrir CSS Designer et Transition

Présentation de CSS Designer et Transition

Découvrir l´adaptation de la structure

Ajouter et modifier des règles

optimiser les styles

Atelier : Atelier: Réaliser des dégradés, des transitions sur des éléments HTMLExtension Manager

Installer Extension Manager

gérer les applications adobe sur votre machine

Conduite de projet Web avec Dreamweaver

Spécification d’un site : le cahier des charges

Conception du site : l’ergonomie, la navigation, la charte graphique, les bases de données, etc.

Développement du site : le rôle de Dreamweaver

Mise en ligne du site : l’importance de la recette

Suivi du site : animer et maintenir son site Web

ConclusionPassage de la certification (si prévue dans le financement)

Programme de Formation Dreamweaver Avancé : préparation à la certification (Adobe)

Préparer le projet

Cerner la finalité du projet Définir les besoins, l'audience attendue et les objectifs poursuivis

Adapter le contenu en fonction du public et du projet visés

Utiliser les technologies de développement adaptées aux besoins

Information sur les droits d'auteur dans le domaine du numérique Point sur la législation actuelle : le code de la propriété intellectuelle (CPI)

Autorisations d'exploitation et de diffusion de contenu numérique

Navigation et accessibilité des contenus Web Établir une navigation claire et intuitive

Répondre aux normes d'accessibilité pour les personnes en situation de handicap

Gestion de projet Web Analyse, définition, coût et mise en place

Organiser les compétences internes/externes : définition et gestion de l'équipe

Comprendre et orienter les choix technologiques en fonction des besoins

Appréhender le pilotage et la planification d'un le projet du début jusqu'à la livraison Maîtriser les fondamentaux de conception web Rappels Les sites statiques

Les sites dynamiques

Les CMS, Blog, Forum et Wiki

Structure, balises et attributs d'une page HTML

Les différents langages utilisés : HTML, CSS, JavaScript, PHP, etc.

La conception technique Mettre en place les bonnes pratiques de la création de site Web

Mettre en forme avec CSS 3/HTML 5

Garantir la portabilité et la compatibilité avec les standards du Web

L'interface Soigner l'ergonomie

Créer une mise en page claire et fonctionnelle

Créer une arborescence efficace

Découvrir Dreamweaver

Rappel des fondamentaux La notion de site Web dans Dreamweaver

L'interface

Les menus

Les outils

Les panneaux

L'inspecteur de propriétés

Les médias : images, vidéo, audio

Paramétrer et configurer l'espace de travail Personnaliser et gérer l'espace de travail

Utiliser les différents modes d'affichage

Développer le site

Spécifier la structure Configurer le projet dans Dreamweaver

Ajouter des pages

Définir l'interface

Définir les rubriques

Créer les menus

Gérer le contenu du site Ajouter du texte

Créer des liens hypertexte

Ajouter et gérer des images

Atelier : créer les pages d'un site Web

Effectuer la mise en forme Utiliser les balises de mise en forme du texte : titres, paragraphes, listes, etc.

Utiliser les styles CSS pour la mise en forme du texte et du contenu

Gérer les placements des différentes parties de la page à l'aide des « div »

Ajouter des médias Ajouter d'autres médias : son, vidéos, animations, contenus interactifs

Ajouter de l'interactivité à l'interface : menus, barre de navigation, boutons

Atelier : créer des pages contenant des éléments interactifs

Intégrer d'autres types de contenus Ajouter des données tabulées

Importer des documents tiers

Créer des tableaux Définir les propriétés : taille, nombre de lignes et de colonnes, bordures, marges, etc.

Gérer la mise en forme

Gérer le contenu

Construire et traiter des formulaires Créer un formulaire

Lier dynamiquement le formulaire à une base de données

Atelier : créer un exemple de formulaire et gérer des données externes

Créer son template Définir les parties fixes et récurrentes

Spécifier les zones modifiables

Atelier : créer des modèles de pages Web

Finaliser le site

Optimiser le référencement Les enjeux du référencement

Définir le « head » : titre des pages, mots clés

Pertinence et visibilité des mots clés

Atelier : créer des mots clés pour la visibilité et le référencement du site

Tester son site avant publication Effectuer des tests de validation technique

Valider la navigation

Valider l'ergonomie

Publier son site Publication d'un site sur un serveur web

Gérer l'actualisation du contenu et le développement de son site

Administrer son site : liens et partenariats avec d'autres sites, référencement, statistiques