Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery

Transcription

1 Objectif(s): Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery Maîtriser HTML5/CSS3 Mettre en œuvre les techniques de conception de sites web adaptatifs Renforcer sa connaissance en JavaScript Découvrir XML Utiliser Ajax Apprendre les bases de jquery Durée : 5 jour(s) Pré-requis : Bonnes connaissances en (X)HTML et CSS Public : Tous Programme Introduction Pourquoi HTML5? Format des balises Les normes HTML, CSS, XHTML, XML, HTML5 Le W3C et les validateurs La logique d encodage, ISO , UTF-8,.. Rappel sur les bases Type des balises syntaxe des règles de style

2 Positionnement css(relatif, absolu, flaot, display) Atelier pratique : Créer un site XHTML/CSS Passage en HTML5 Syntaxe, nouveau doctype et outils structure et sémantique Nouvelles balises HTML5 Atelier pratique : Reconstruire notre site en HTML5/CSS3 Balises multimédias inserer une image(balises <figure>) insérer une vidéo(balises <video>) insérer un son (Balises <audio>) Compatibilité navigateur Atelier pratique : Utiliser JavaScript pour contrôler les objets audio et video Autres Balises HTML5 Select Table Menu Div et span Les formulaires Nouveaux types pour <input> Nouveaux attributs Nouveaux éléments <output>,

3 La validation de formulaire en HTML5 Atelier pratique : Réaliser un formulaire HTML5 Les microformats Les microformats et microdonnées microformats : Les classes(hreview-aggregate, item, fn,average,count,,,,) microformats : L attribut rel(search, help, nofollow,,,,) microformats : Le format hcalendar microformats : le format hcard microdonnées: Attributs itemid, itemref, itemscope, itemtype, itempropv Dessiner : Création dynamique d images en JavaScript La balise Canvasv SVGv Tracer de formes(rectangle, cercle,,,,) Couleurs, remplissages, dégradés Atelier pratique : Améliorer la lecture de notre vidéo par une barre de progression Web Storage et sites hors ligne Stockage local et stockage de session Principes généraux de manipulation Syntaxe JSON manifest

4 indexeddb : base de données locale Géolocalisation Vue d ensemble Se positionner (latitude, longitude) savoir manipuler l API API Google Map CSS3 Vue d ensemble Syntaxe, préfixes CSS3 Coins arrondis Ombres portés Text-Shadow Box-shadow Dégradé linéaire font-face Sélecteur d attribut Le positionnement en CSS3 box-sizing multi-colonnes Modèle de boîte flexible (flexbox model) CSS3 :Transformations, transitions et animations Rotation,

5 translation Animations Atelier pratique : Animer les différentes propriétés d un élément Découvrir JavaScript Introduction à JavaScript Concepts de base du Javascript Notion d événements Gestion dynamique des CSS Atelier pratique : Validation des champs de notre formulaire de contact Document Object Model Qu est-ce que le DOM? Concept de noeud Hiérarchisation des noeuds(arbre DOM) Les proprités de rélation Les proprités d état Les méthodes d accès aux noeuds Firefox DOM Inspector modification du contenu HTML Modification du style des elements HTML Atelier pratique : Créer une galerie photo

6 Faire du responsive design Principe Approches(Responsive degradation, Mobile first ) Design: Static, Liquid, Adaptative, Responsive Medias queries CSS 3 Atelier pratique : création d un site multiplateforme (smartphone, tablette..) Utiliser Bootstrap Présentation de Bootstrap Installation de Bootstrap Le système de grille pour positionnement Les layouts Le responsive Design Atelier pratique : créer une page avec Bootstrap Les composants Bootstrap Menus déroulants Barres de navigation Fil d arianne Pagination Classes diverses L approche AJAX Pourquoi utiliser Ajax? Comment cela fonctionne?

7 Construire une requête, pas à pas L objet XMLHttpRequest L objet XMLHttpRequest Les proprietes: readystate, status, responsetext, responsexml Les methodes: open, send. Gestion du retour (texte, XML ou JSON). Comment utiliser XMLHttpRequest Le problème de mémoire cache XML AJAX Présentation du format XML Structure d un document XML format des balises Atelier pratique : recuperer et traiter un flux xml avec la requête AJAX JSON AJAX Connaître le format JSON parser une chaine JSON Atelier pratique: mettre en place une autocompletion Découvrir jquery Intérêt de jquery Installation de jquery Fonctions essentielles et chaînage Sélecteurs CSS

8 Principes des Callback Faire des requêtes AJAX avec jquery Nous contacter: DOUSSOU