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

Détails du cours

image_pdfimage_print
image_pdfimage_print

Introduction

Pourquoi HTML5 ?

Format des balises

Les normes HTML, CSS, XHTML, XML, HTML5

Le W3C et les validateurs

La logique d’encodage, ISO-8859-1, UTF-8,..

Rappel sur les bases

Type des balises

syntaxe des règles de style

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>,

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

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,

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

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?

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

Principes des Callback

Faire des requêtes AJAX avec jQuery

Le(s) formateur(s)
 
Expertise: Développeur
 
Expertise: Développeur

Avantages:

  • - Un support de cours pour chaque participant
  • - Formateurs agréés et reconnus par la Commission des partenaires du marché du travail
  • - Formation très généralement par petit groupe(1 à 5 participants)
  • - Soutien du formateur après la formation

Objectifs:

  • 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
Montréal

16/09/2019 au 20/09/2019
14/10/2019 au 18/10/2019

Gatineau

29/07/2019 au 02/08/2019
7/10/2019 au 11/10/2019

Québec

02/09/2019 au 06/09/2019
30/09/2019 au 04/10/2019
28/10/2019 au 01/11/2019

Ottawa

9/09/2019 au 13/09/2019
7/10/2019 au 11/10/2019
4/11/2019 au 08/11/2019

Préférentiel
2074 $
par participant.e

Durée : 5 jour(s), soit 35 heures.

Horaires : 9h-17h, 2 pauses café, dîner offert à 12h.

Lieux: Montréal, Gatineau, ville de Québec.



Prix régulier: 2499 $
formation
Interessé par cette formation ?

La formation est également disponible en fin de semaine et sur demande en session privée.

Cette offre est valabe à partir du 01/01/2019.

CLIENTS:


M. Bourassa – Technicienne en gestion de données - Bas-Saint-Laurent
Doussou formation nous a offert une excellente formation Oracle/SQL adaptée à notre environnement de travail et à nos besoins. Nous sommes très satisfaits des acquis obtenus après trois jours de formation et avons beaucoup apprécié l’adaptabilité de la formation.
Camil Laurence – Développeur PHP – Montréal, participant à une formation PHP Symfony et Zend Framework
Le formateur est un excellent pédagogue. Il possède parfaitement sa matière. Sa formation est adaptée aux participants et en liaison avec les besoins du marché. L’atmosphère en classe est détendue et conviviale. Un « must » pour rester à jour en nouvelles technologies de développement Web.

© Doussou Formation 2019