Accueil > Technologies WEB > HTML5 et CSS3 pour les designers et intégrateurs
Formation #TWC76

Formation HTML5 et CSS3 pour les designers et intégrateurs

Durée : 3 jours

Code : TWC76


Prochaines dates programmées :

Du 15 au 17 Mai 2024

Du 07 au 09 Août 2024

Du 13 au 15 Nov. 2024

Fin d'Inscription :
Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.
Si vous avez un besoin URGENT et que vous souhaitez une date de formation plus proche que les sessions programmées (minimum 15 à 20 jours ouvrés à date de votre demande)

Objectifs

  • Savoir créer des sites Internet à la pointe des technologies du web, adaptés aux différents supports
  • Faire de la vidéo, du son et des animations, sans Flash
  • Créer des mises en page avec les CSS Grid
Programme
1/ Retour sur le HTML et CSS : les fondamentaux
  • Les versions successives du HTML (HTML 4, XHTML 1.x, XHTML 2)
  • Navigateurs et nouvelles technologies HTML
  • Comment HTML est interprété par le navigateur
  • La notion de client/serveur HTTP
  • Les composants d’un document HTML : textes, liens, titres, paragraphes, tableaux, formulaires, etc.
  • Les commentaires
  • Comment est structuré un document HTML : le doctype
  • La balise <head>
  • Lien avec une feuille de style
  • Lien avec un fichier JavaScript
  • La balise <body>
  • Méthode et balises pour structurer une page
  • Le texte dans la page HTML
  • Les caractères spéciaux
2/ HTML 5 : introduction
  • Quand utiliser HTML 5
  • Les principaux concepts et apports
  • La "roadmap" de HTML 5
  • Les différents composants : balises, formulaires, audio, vidéo, API
  • Outils de développement HTML 5
  • Test de compatibilité, méthode de détection HTML 5
3/ HTML 5 : Intérêt de ses nouvelles balises de structure
  • Les éléments de structure <nav>, <section>, <article>, <aside>, <header> et <footer>
  • Les catégories de contenus : Metadata, Flow, Sectioning, Heading, Phrasing, Embedded et Interactive content
  • Intérêt des balises structurantes pour le référencement
  • Imbrication et type de contenu
4/ Les nouvelles balises HTML
  • Les balises et attributs obsolètes
  • Les balises : <mark>, <meter>, <time>, <figure>, <picture>...
  • Les extensions de balises HTML existantes
  • Les attributs : a, fieldset, iframe, area, button...
  • Les microformats. Présentation et avantages sur le référencement
  • Les nouveaux champs et attributs de formulaires : range, autofocus, placeholder, menu...
  • Les dessins : Canvas versus SVG
  • Les formats multimédias. Codecs et API Multimédia
  • Gestion vidéo et audio avec les nouvelles balises <audio> et <video> HTML5
5/ 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
6/ 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
7/ 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
8/ 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.)
9/ 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
10/ Animations et transformations
  • Transformations de base (rotation, translation, etc.)
  • Transformations 3D (perspective)
  • Transitions : changement progressif d'un style
  • Animations autonomes
11/ 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
12/ 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
13/ Compatibilité des navigateurs avec HTML5/CSS3
  • Etat des lieux
  • La détection des capacités des navigateurs
  • Recommandations
14/ 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
Approche Pédagogique

Approche Pédagogique

  • Pédagogie très opérationnelle fondée sur l'alternance entre théorie et pratique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
Public Cible

Personnes Visées

  • Sesigners
  • Intégrateurs
Dates

Dates

  • Du 15 au 17 Mai 2024
  • Du 07 au 09 Août 2024
  • Du 13 au 15 Nov. 2024
  • Fin d'Inscription :
    Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.