Le HTML5 et les feuilles de styles CSS3 sont les nouveaux standards du consortium WWW lancés en 2010. Déjà, le HTML5 devrait permettre une nouvelle révolution des pages web. L’adoption de ce nouveau standards prendra du temps mais déja de nombreux navigateur tel Mozilla, Opéra, Chrome, internet explorer 9.0 ont adapté une grande partie des nouveaux standards : glisser/déposer, gestion de la cache, intégration multimédia. Par ailleurs, le HTML5 adopté par Apple a pour ambition de remplacer partiellement la technologie flash dans les périphériques mobiles : ipad et iphone.

Nous utilisons intensivement jquery avec les nouveaux standard

Travaux pratiques : 80% du temps du cours est consacré à des exercices
et à la création de pages web simples et complexes.

Objectif : savoir créer des interfaces riche open source avec HTML5 et CSS3

Les outils : Firefox, firebug, webdevelopper,Chrome
Nous valorisons les outils open source et les standards du web.

Durée : 3 jours face à face

JOUR 1

PRÉSENTATION DU HTML5 ET PRISE EN MAIN
Philosophie et roadmap du HTML5
Vue d’ensemble des apis
Structure de page HTML55 : doctype, header, footer
Construction d’une page simple. accessibilité et ergonomie en HTML5
interface riche VS responsive design VS HTML5+CSS3
Support et prise en charge des navigateurs existants : tests

CRÉATION DE DOCUMENTS HTML5
Modèle de contenu
Le rôle des balises DIV
Utilisation des attributs ID et Class
Déclarations DOCTYPE
Encodage des caractères

STRUCTURE DES DOCUMENTS HTML5
Structure de base d »une page
Structuration de la page
Structuration des contenu interne
Les en-têtes et pied de pages
Validation des détails de documents
S’assurer d’une structure sur plusieurs navigateurs

JOUR 2

GEOLOCALISATION ET HTML5
Comment geolocaliser
Lien avec google Map
La géolocalisation et la CNIL

CRÉATION DE FORMULAIRES HTML5
Nouveaux éléments de saisie
Ergonomie des formulaires
Fixer l’autofocus
Utilisation de données « placeholder »
Rendre obligatoire la saisie
Saisie de la date avec un sélecteur de date (date picker)

API DESSIN ET CANVAS
Le grand tour des API
Le concept de Canvas
Ajout de canvas à une page
Dessin dynamique 2D

JOUR 3

LES PAGES MULTIMÉDIA WEB 2.0
Comment intégrer du contenu web 1.0 et web 2.0
Intégration audio et video dans les pages HTML5
Les nouveaux standards Ogg Thera et Ogg vorbis et SVG

CSS3 : LES FEUILLES DE STYLES
Les éléments des styles CSS3 : roadmap
Le nouveau mariage : CSS3 et HTML5 et Framework ajax tel jquery

CSS3 : MISE EN PAGE ET POSITIONNEMENT
Mise-en-page par patron
Mise en page multi-colonnes
Mise-en page par boites horizontales ou verticales
Positionnement par grille

CSS3 : NOUVEAUX EFFETS EMPRUNTE A PHOTOSHOP
Ombre portée sur texte et boite
Transparence et opacité
Bordure et coin arrondi
Polices téléchargeables avec @Font-Face
Effet de Rotation
Arrirere-plan multiple

CSS3 : LES MEDIAS QUERY
L’héritage du CSS2 : print, screen, braille
Ajustement du site selon les périphériques
Color et densité de pixels
Les polices pour vos pages web
Responsive design et les media-queries