Formation HTML5 et CSS3 pour les designers et intégrateurs

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

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

Bonne connaissance de HTML et CSS.

Présentation des technologies (HTML5)

• HTML5, standards et (rétro-)compatibilité
• NaviGusturs 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 naviGustur (required, pattern, formnovalidate) Suggestions automatiques Exemple récapitulatif

Vidéo et audio

• Codecs et formats (H264/MP4, OGG/theora, WebM/VP8) Compatibilité et naviGusturs 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 naviGusturs

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 naviGusturs

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 naviGusturs avec HTML5/CSS3

• Etat des lieux La détection des capacités des naviGusturs 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

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.

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.