Formation HTML5 et CSS3 pour les designers et intégrateurs


  • MISE À JOURS VERS HTML5, CSS3, CSS GRID
REFERENCE
 
 
IH5W
DUREE
 
 
2 jours
TARIFS
 
 
980 € HT
Niveau : Intermédiaire
Cours à distance: Possible
OBJECTIFS :
 

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.
Concrètement, à l'issue de cette formation HTML5, vous serez capable de :
- Utiliser dès maintenant les nouveautés du web, en restant rétro-compatible
- Tirer partie 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

 

PRÉ-REQUIS :
 

Bonne connaissance de HTML et CSS.

PUBLIC :
 

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

PROGRAMME :
 

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éesCouleurs avancées et dégradésOmbres 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

REMARQUES :
 

Vous pouvez suivre cette formation HTML5 et CSS3 à distance, vous participez en temps réel à la même session en même temps que les autres participants présents eux en salle de cours. Un kit spécial formation à distance vous sera envoyé avec notamment le matériel (casque micro). Vous n’avez besoin que d’un navigateur et d’une connexion internet pour suivre dans les meilleures conditions cette formation à distance HTML5 et CSS3 Contactez-nous pour plus d’informations sur cette formation HTML5 et CSS3 à distance de chez vous ou depuis votre bureau. Attention sur cette formation toutes les sessions ne sont pas réalisables en formule cours à distance

TRAVAUX PRATIQUES :
 

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.

Les avis figurant ci-dessous sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions. Avis des participants à la formation HTML5 et CSS3 pour les designers et intégrateurs : Note moyenne : 4,5/5
5/5
Avis certifié A suivi un cours chez PLB
Stan L.
4/5
Avis certifié A suivi un cours chez PLB
Quentin P.
S'INSCRIRE À CETTE
FORMATION HTML5
Cliquez sur une date pour vous inscrire
Information pratiques sur
LA FORMATION
Lieu de la formation Paris - LA DEFENSE
Nous contacter 01 43 34 90 94
CETTE FORMATION SUR-MESURE Ce cours est réalisable en intra-entreprise, dans vos locaux ou nos salles de cours CONTACTER NOTRE SERVICE INTRA
D'autres formations
SUR LE MÊME THÈME

5 j

 
La formation HTML / CSS / Responsive est destinée à toute personne souhaitant maitriser la conception de sites Internet et d’applications web modernes tirant parti de toutes...

5 j

 
La formation HTML5 est destinée aux développeurs et intégrateurs souhaitant mettre à jour leurs connaissances pour créer des sites Internet performants et...

2 j

 
ECMAscript provient de la standardisation du langage Javascript selon les normes ECMA. La version 6 (ES6 / ES2015) a amené de nombreux changement car elle était séparée...

3 j

 
Langage de l'Internet côté client, le JavaScript permet la manipulation interactive des éléments constituant une page WEB. Jadis considéré comme un...
Plus de formations sur le même thème

Des questions ?

ON VOUS RAPPELLE

 

0

Formations
Informatique
et Management
en ligne à ce jour

+ 0

Stagiaires dans nos
salles de cours sur
l'année

0%

De participants
satisfaits ou très
satisfaits de nos
formations

0

Formateurs experts
validés PLB