Formation HTML5 et CSS3 pour les designers et intégrateurs

Cette formation HTML5 et CSS3 est destinée aux designers et intégrateurs qui souhaitent mettre à jour leurs connaissances pour créer des sites Internet à la pointe des technologies du web, adaptés aux différents supports : mobiles, tablettes, etc. (responsive design). Au cours de ces 2 jours de formation intensive, nous aborderons ensemble les nouveautés apportées conjointement par le HTML5 et le CSS3.

Objectifs pédagogiques :

• Utiliser dès maintenant les nouveautés du web, en restant rétro-compatible
• Tirer parti des nouveautés, et ainsi alléger les besoins en JavaScript
• Faire de la vidéo, du son et des animations, sans Flash
• Faire du graphisme avancé et certaines images, sans Photoshop
• Améliorer le référencement dans les moteurs de recherche
• Adapter l’affichage des versions mobile / tablette (responsive design)
• Maîtriser la mise en page avec des conseils efficaces pour le rendu et la maintenance
• Utiliser les bons outils pour travailler dans une approche professionnelle
• Créer des mises en page avec les CSS Grid

Public :

Cette formation HTML5 s’adresse aux designers et intégrateurs.

Prérequis :

Bonne connaissance de HTML et CSS.

Présentation des technologies (HTML5)

HTML5, standards et (rétro-)compatibilitéNavigateurs et outils de travail (Modernizr, etc.)HTML5 vs Flash ?
Sémantique, référencement et accessibilité en HTML5
DOCTYPE, encodage, règles de syntaxe
Les nouvelles balises sémantiques
Micro-formats et micro-données
Quels impacts du HTML5 sur le référencement ?

HTML5 Forms (Web Forms)

Vue d’ensemble des formulaires nouvelle génération
Les nouveaux éléments (progress, meter, datalist, keygen, output)
Nouveaux types de champs (tel, url, email, search, number, etc.)
Nouveaux attributs (autofocus, placeholder, form, required, etc.)
Validation par le navigateur (required, pattern, formnovalidate)
Suggestions automatiques
Exemple récapitulatif

Vidéo et audio

Codecs et formats (H264/MP4, OGG/theora, WebM/VP8)
Compatibilité et navigateurs
Les outils de conversion (rapide)
Savoir utiliser les services existants (dailymotion, youtube, viemo)
Les balises (video,audio)
Proposer plusieurs sources dans plusieurs formats
Pré-requis (type MIME et .htaccess)
Les attributs (controls, preload, autoplay, poster)
Test de téléchargement d’une vidéo selon plusieurs formats depuis plusieurs navigateurs

Les nouveaux sélecteurs CSS3

Les pseudo-classes et pseudo-éléments
Les sélecteurs d’attributs (^, $, *)
Exemple d’application de style « intelligente » combinant les nouveautés

Mise en page et box model

Les positionnements (absolu, fixe, naturel)
Mise en page avec float
Mise en page avec Flex (box-sizing, border box, etc.)
Système de grid
Disposition en colonnes
Régions et exclusions
Limites et apports des frameworks (bootstrap, etc.)

Graphisme avancé

Polices de caractères personnalisées
Couleurs avancées et dégradés
Ombres et opacité
Bordures et arrière-plans avancés

Animations et transformations

Transformations de base (rotation, translation, etc.)
Transformations 3D (perspective)
Transitions : changement progressif d’un style
Animations autonomes

CSS Grid

Limites des tableaux apports des CSS Grid
Positionnement explicite et implicite des objets sur une grille CSS
Alignement des boîtes avec les grilles CSS
Utiliser les lignes ou les zones de la grille ?
Complémentarité Flexbox et Grid
Compatibilité avec les anciens navigateurs

Responsive design (adaptation mobiles / tablettes)

Problèmes techniques posés par l’hétérogénéité (PC, téléphone, tablette)
Solutions apportées par le Responsive Design
Pré-requis pour faire du responsive Design
Media-queries : s’adapter à la résolution d’écran et à l’orientation
Viewport
Déterminer la valeur d’une propriété CSS (calc)
Positionnement colonnes, tailles fluides et media queries

Compatibilité des navigateurs avec HTML5/CSS3

Etat des lieux
La détection des capacités des navigateurs
Recommandations

Les outils et les méthodes du développeur WEB

Quels outils pour développer et debugguer ?
Les outils pour améliorer ma productivité et ma rapidité de codage
Les outils d’une bonne veille technique
Les méthodes de codage moderne pour un code maintenable
Les tendances à venir

Utilisation des nouvelles balises HTML5 et des nouveautés graphiques du CSS3, intégration d’une vidéo sans Flash, exemple de responsive design, animation sans Flash, chevauchement d’éléments avec les CSS Grid.