Programme de Formation AJAX Initiation

Introduction

Communication client-serveur

Etat de l'art du Javascript, XML, CSS, AJAX

Modèle Web traditionnel et modèle AJAX

Combinaison technologique Ajax/REST/Web 2.0

Quand et comment appliquer les interfaces Web enrichies

JavaScript

Tour d'horizon : syntaxe, variables, boucles, tableaux...

Utilisation de la librairie DOM-Javascript

Gestion dynamique de CSS

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

Création d'Objets et notation JSON

Programmation orientée prototype (pseudo-classes)

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

Framework représentatif (prototype.js)

Panorama des frameworks JavaScript/AJAX

Présentation de la librairie prototype.js

L'objet avec prototype (classes et héritage)

Utilisation des fonctions Ajax

Exemple d'interaction entre AJAX et un Serveur

Programme de Formation Dreamweaver : Initiation

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-dexingPassage de la certification (si prévue dans le financement)

Programme de Formation Webmaster Expert : Ergonomie, Accessibilité, Sécurité et Sémantique web

Comprendre l'ergonomie des sites web

Définitions générales : ergonomie, ligne de flotaison, format, supports mobiles, etc

Loi de Gestalt et Fitts

Principes de base, règles et standards

Utilisabilité, personas

L'UX

Comprendre les systèmes de navigation

Gestion des sites volumineux

Rendre votre site accessible

Comprendre l'accessibilité

Règles pour l'accessibilité des contenus Web WCAG 1 et 2

RGAA : référentiel d'Accessibilité pour les Administrations

Accessiweb : présentation du référentiel

Section 508, UWEM

Normes ATAG et UAAG

Outils d'audit : WAT, WDT, extensions de navigateurs

Validation : niveaux, outils Sécuriser votre site web Rappel des notions de base : Couches OSI, TCP, HTTP, Codes de retour, persistance et pipelining

Méthodes HTTP : GET, POST, OPTIONS, PUT, DELETE, HEAD, TRACE

Notion de cookies, les attributs, les options associées

Le chiffrage et le hashage ; algorithmes modernes

Authentifications HTTP (basic, digest)

Systèmes de SSO (Single Sign On)

Sécurité hors attaque : les sinistres et accidents

Attaques sociales, exemples et effets

Attaques par injections SQL, mails, LDAP, XPath, code arbitraire - exemple de filtrages en entrée

URL malicieuses : faire exécuter une URL (injections HTML, HTTP response splitting...)

URL malicieuses : conséquences - Cross Site Scripting, Cross Site request Forgery

Obfuscation et information leakage (code accessible, erreurs visibles...) Atelier pratique : tests et tentatives ludiques Comprendre la sémantique web

Valorisation du contenu d'une page web pour améliorer le référencement

Hypertexte sémantique et sémantique embarquée dans les pages HTML

Nouvelles balises sémantiques HTML5

Formats de balisage : Microdata, Microformats, RDFa

Rich Snippets : présentation, outils de test

Compatibilité des Rich Snippets avec les types de contenu : Avis, Personnes, Produits, Événements,...

Intégrer des Microdata et utilisation de schémas

Microdata : spécifications HTML 5

Nouveaux attributs : itemscope, itemtype, itemprop, itemref, itemid

Microdata API support

Schema.org : présentation, documentation

Hiérachie des types

Mise en place, bonnes pratiques

Programme de Formation Microdata, Schema.org et Rich Snippets

Comprendre la sémantique web

Valorisation du contenu d'une page web pour améliorer le référencement

Hypertexte sémantique et sémantique embarquée dans les pages HTML

Nouvelles balises sémantiques HTML5

Formats de balisage : Microdata, Microformats, RDFa

Rich Snippets : présentation, outils de test

Compatibilité des Rich Snippets avec les types de contenu : Avis, Personnes, Produits, Événements,...

Baliser des données à l'aide de Microformats

Entités

Microformats simples : rel-license, rel-nofollow, rel-tag, rel-bookmark, XFN

Microformats composés : hCard, hCalendar, hAtom, hReview, hResume

Outils de génération de microformats : hCard Creator, hReview Creator,...

Intégrer des Microdata et utilisation de schémas

Microdata : spécifications HTML 5

Nouveaux attributs : itemscope, itemtype, itemprop, itemref, itemid

Microdata API support

Schema.org : présentation, documentation

Hiérachie des types

Mise en place, bonnes pratiques

Programme de Formation Google Web Designer

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 (gallerie 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

Programme de Formation Google Apps Scripts

Introduction

Les solutions Google : Google Apps, Google Apps Engine, Marketplace

Choix d'une solution et enjeux

Rappels de JavaScript

Environnement Google individuel

Environnements des scripts

Créer, développer et exécuter dans l'éditeur spécifique

Lancer des scripts dans Google Spreadsheets

Exécuter dans les applications Web de Google Site et en tant que Gadget

Utiliser les déclencheurs automatiques, tâches planifiées

Atelier : un même script dans de nombreuses situations Spécificité des scripts Google

Rappels de JavaScript

Connaître les limites en environnement de développement et exécution

Accèder à Google : Spreadsheet et Charts, fichiers de données et graphiques

Accèder à Google : Calendar

Faire de l'envoi d'emails

Utiliser d'autres API Google

Atelier : scripts complets, avec interaction et enregistrements