Créer des sites et applications web avec HTML5 et CSS3

PROGRAMME DE FORMATION :

1ERE PARTIE :

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 meta-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
• Insérer un script dans un document HTML/XHTML

JavaScript : le cœur 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
• Écrire et lire des cookies

2EME PARTIE :

Introduction

• 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 HTML 5 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
• Adapter ses formulaires à l’environnement mobile (téléphone, tablette)
• Les contrôles disponibles (slider, etc.)
• Mettre en place des validations

Audio et Vidéo

• Les éléments audio et vidéo
• Contrôler l’interface, les paramètres par défaut
• Les conteneurs, le problème des codecs
• Mettre en place une politique HTML5 + Flash pour le multimédia

Vue d’ensemble des APIs

• Les APIs HTML5
• Site web hors ligne : manifest
• Drag et Drop
• Extension de HTMLDocument
• Extension de HTMLElement

Dessiner en HTML

• Canvas vs SVG
• Dessiner une ligne, un carré, un cercle
• Le remplissage
• 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éo-localisation

• Vue d’ensemble
• Avec ou sans l’utilisation de GPS
• Savoir manipuler l’API
• La vie privée de l’utilisateur

Stockage

• Gears, le pionnier
• Stockage local
• Stockage en session
• Bases de données SQL Web
• IndexedDB sera-t-il utilisé ?

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