1

Formation Avancée : HTML5/CSS3, JavaScript/DOM + Responsive Design

Introduction à la formation Avancée : HTML5/CSS3, JavaScript/DOM + Responsive Design

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
Div et span

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

Les formulaires

Nouveaux types pour <input>

Nouveaux attributs

Nouveaux éléments <output>,

Les validations de formulaire en HTML5v

Atelier pratique : Réaliser un formulaire HTML5

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

Géolocalisation

Vue d’ensemble

Se positionner (latitude, longitude)

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

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

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