• 2 – HTML5 et CSS3 (exclusif FAFIEC) – 28133

Accueil / 2 – HTML5 et CSS3 (exclusif FAFIEC) – 28133

2 – HTML5 et CSS3 (exclusif FAFIEC) – 28133

Durée : 3 jours
Tarif Inter : €
Tarif sur mesure : Nous consulter
Référence : 10ACA

  • Partagez sur
  • Téléchargez en
  • Inscrivez vous
Programme Public & Pré-requis Organisation

Objectifs

  • Concevoir et développer des applications Web en HTML5 et CSS3
  • Mettre en place et valider la structure HTML 5 des pages Web
  • Habiller des pages Web en CSS 3 afin de les rendre plus attractives
  • Rendre responsive design les pages Web d’un site
  • Créer des images et des animations vectorielles

Programme

  1. Introduction :

    • Les DTD et la syntaxe XML (structuration, commentaires)
    • La structure d’un document HTML : images, feuilles de style CSS, JavaScript
    • La sémantique HTML : titres, paragraphes, liens, tableaux, formulaires…La sémantique HTML : titres, paragraphes, liens, tableaux, formulaires…
    • Le modèle de document (DOM). Le protocole HTTP
    • Optimisation du chemin critique de rendu (Critical Render Path)
    • Topographie des concepts et apports du HTML5
    • Outils de développement HTML5
    • Test de compatibilité, méthode de détection HTML5
    • Atelier : Découvertes des possibilités du HTML5 et des outils de développement

  2. Nouvelle structuration :

    • Les éléments traditionnels structurant un document HTML (doctype, html, head, body, meta…)
    • 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
    • Atelier : Mise en place et validation de la structure d’un document HTML5

  3. 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…

  4. La mise en forme des boîtes et des fonds :

    • Les ombres avec box-shadow
    • Les coins arrondis avec border-radius…
    • La gestion des fonds multiples
    • Les gradients de fond (-webkit-gradient)
    • Les fonds ajustés aux conteneurs
    • Les transformations : translations, rotations, homothéties
    • Les animations : les animations, les transitions
    • 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
    • Atelier : Création de templates HTML5. Positionnement d’éléments en absolu. Réalisation d’un lecteur multimédia

  5. Les sélecteurs CSS3 :

    • Rappel sur la syntaxe : les sélecteurs, les règles
    • Sélecteurs de répétition nth-child(even), de cible target, de frère antérieur ~, d’enfant unique only-child
    • Media Queries pour chargement conditionnel des CSS selon résolution ou orientation du terminal
    • Atelier : Intégration de CSS 3 aux applications Web. Sélection d’éléments d’une page HTML5

  6. Les couleurs et la mise en forme du texte :

    • Rappel sur les déclarations RGB et RGBA
    • Les modèles HSL et HSLA
    • La propriété opacity
    • Support des polices distantes @font-face
    • Mise en forme du texte
    • Création d’un système d’icônes
    • Gestion des débordements par text-overflow
    • Gestion des enchaînements par wrap-option, white-space-treatment…
    • Effets de couleur et d’ombre sur texte text-fill-color, text-shadow…
    • Les modes multicolonnes avec column-count, column-width…
    • Atelier : Application de couleurs. Mise en forme de textes. Gestion multicolonne

  7. Flexbox:

    • La fin des floats
    • Répartitions des sous-blocs dans le bloc parent
    • Ordre d’affichage des blocs
    • Occupation de l’espace mis à disposition par les parents
    • Centrer un bloc en hauteur en 2 lignes de code
    • Changement de la disposition et de la taille de ces blocs en fonction de la taille de l’écran de l’internaute
    • Atelier : Mise en page modulaire et adaptée en responsive design

  8. Choisir un Framework CSS :

    • L’offre communautaire. (Bootstrap, Material Design, Foundation)
    • Critère communs et concepts partagés
    • Les Framework spécialisés composants
    • Les Framework spécialisés mobiles
    • Atelier : Initiation à différents framework CSS

  9. SVG, image vectorielle et responsive :

    • La syntaxe SVG
    • Support et intégration des images SVG dans le document
    • SVG et polices de caractères
    • Optimisation de SVG
    • Animation des graphiques SVG
    • Bibliothèque pour la création de graphiques SVG (SVG.js, Velocity, Raphael…)
    • Atelier : Travailler avec des fichiers image. Création d’une animation vectorielle

  10. Grid Layout :

    • Le principe de Grilles « Grid »
    • Réaliser une mise en page par bloc
    • Positionnement de chacun des blocs sur la page
    • Changement de la disposition et de la taille des blocs parents en fonction de la taille de l’écran de l’internaute
    • Atelier : Mise en page modulaire et adaptée en responsive design
Formations à distance
En inter et en intra entreprise

Contactez-nous :
training@softeam.fr
+33 (0)6 07 78 24 18
Prochaines dates

Paris

Nantes

Dijon

Aix-en-Provence

Nice

Demande de renseignement