Les fondamentaux du développement d’interfaces graphiques avec HTML5, CSS3 et JavaScript

Objectifs & compétences

Disposer des compétences nécessaires au développement d'un site internet full HTML5 / CSS3
Savoir produire des pages compatibles avec les différents navigateurs internet
Être capable de créer des interactions dynamiques avec l'utilisateur sans développement serveur
Comprendre comment tirer parti des dernières nouveautés HTLM5 comme le lecteur vidéos compatible mobiles

Public visé

Développeurs .Net ou Java souhaitant savoir exploiter les possibilités offertes par HTML5 et CSS3
Chargés de développement d'applications informatiques

Pré-requis

Connaissance internet standard, notions d'algorithmie

Programme

PRÉSENTATION
HTML : le langage du Web
Contexte historique

ENVIRONNEMENT ET STRUCTURE
Le concept des balises
Le bon usage des balises
Particularités et pièges du HTML
Le document HTML minimum

MISE EN FORME DU DOCUMENT
Le texte simple
Les objets d'un document
L'en-tête d'un document HTML

MISE EN FORME DU TEXTE
Les titres
Les paragraphes de texte
Le contrôle de passage à la ligne
Le formatage du texte
L'alignement
La taille, la couleur et la police
Les caractères spéciaux
Les commentaires
Les autres balises de texte

LES LISTES
Numérotées
A puces
Imbriquées
Les listes de définition

LES TABLEAUX
Les cellules de tableau
La fusion des cellules
Gestion de la taille du tableau
En-tête et légende
Les bordures
Les groupes de colonnes
Les groupes de lignes

LES HYPERTEXTES
La balise de liens
Liens vers une autre page
Liens à l'intérieur d'une page
Liens vers un autre site Web
Liens vers une adresse électronique
Liens pour télécharger un fichier
Les Target
L'attribut titre
La couleur des liens
Liens et feuilles de style

INSERTIONS D'IMAGES
Les images du Web
L'insertion d'une image
L'espace autour d'une image
L'alignement d'une image
L'insertion d'une couleur d'arrière-plan
L'insertion d'image d'arrière-plan
L'insertion d'un lien sur une image
Les images réactives

LES FORMULAIRES
La déclaration de formulaire
Zone de texte à une ligne, à plusieurs lignes
Menu déroulant
Bouton radio
Bouton checkbox
Bouton d'envoi
Bouton d'annulation
Bouton de commande
Les formulaires cachés
Les formulaires de transfert de fichier
Les formulaires de mot de passe
L'organisation des éléments d'un formulaire

LES MÉTA-INFORMATIONS
Doctype ou DTD

LES FEUILLES DE STYLE
Les propriétés : couleur, police, marge,...
Les classes
Dynamiser un site avec CSS
Gérer les positionnements

INTRODUCTION À JAVASCRIPT
JavaScript pour quoi faire ?
L'environnement du client Web
Le navigateur
Les outils

JAVASCRIPT : LE COEUR DU LANGAGE
La syntaxe
Les variables
Les fonctions globales
Les opérateurs
Les structures de contrôle
Les fonctions : définition, arguments, fonctions littérales, fonctions sous forme de données
Les objets personnalisés : constructeur, méthodes et propriétés, prototype, objets littéraux, objets sous forme de tableaux associatifs
Les objets globaux : Array, Date, Math, RegExp, String...
Manipuler les tableaux, les dates, les chaînes de caractères

LES OBJETS DU NAVIGATEUR
La hiérarchie des objets
Les principaux objets : window, document, location, screen, navigatior, form... Leurs propriétés et méthodes
Manipuler des fenêtres
Gérer des timers

INTRODUCTION À HTML5
Contexte : fonctionnement d’un site internet
Histoire du HTML
Les organismes de normalisation : WHATWG et W3C
La nouvelle vision HTML5
Roadmap HTML5

COMMENT UTILISER LE HTML5 AUJOURD'HUI
Savoir quand choisir le HTML5
Utiliser le HTML5 avec des navigateurs qui ne le supportent pas

LE BALISAGE HTML5
Structure d'une page
Doctype
Les nouveaux éléments et les éléments obsolètes
HTML5 et CSS3

LES FORMULAIRES
La balise form
Créer et utiliser des formulaires HTML5

AUDIO ET VIDÉO
Les éléments audio et vidéo
Les conteneurs, les codecs
Compromis pour un site à forte audience

VUE D'ENSEMBLE DES APIS
Les APIs HTML5
Audio et vidéo
Site web hors ligne
Drag et Drop

DESSINER EN HTML
Canvas vs SVG
Contexte et accessibilité

LA COMMUNICATION EN HTML5
Les évènements
Envoi de messages entre documents
Envoi de messages par canaux
Le push et les WebSockets pour plus de performances

LA GÉOLOCALISATION
Vue d'ensemble
La vie privée de l'utilisateur

STOCKAGE
Stockage local
Stockage en session
Bases de données SQL Web

CSS3 : STANDARDISER DES PROPRIÉTÉS
Vue d'ensemble : se passer d'images, éviter les astuces
Coins arrondis, ombres portées, transparence, animations
Mise en page et positionnement
Autres nouveautés

CSS3 : MISE EN PAGE ET POSITIONNEMENT
Vue d'ensemble : clarifier le code, éviter la multiplication de div imbriquées
Niveau de présentation
Mise en page par patron
Mise en page multi-colonnes
Mise en page par boites horizontales ou verticales
Positionnement par grille
Autres nouveautés
CSS3 pour mobiles et tablettes : bonnes pratiques

Modalités

Méthodes