HTML5, CSS3, Orienter Votre Conception Vers Des Sites Web Modernes et Dynamiques


Cette formation vous apprendra à créer des pages et des applications Web en utilisant HTML5 et CSS3. Vous découvrirez les avancées proposées par le HTML5 notamment en termes d'interfaces Web riches/RIA, de multimédia et de moyens de communication permettant la mise en oeuvre d'applications client/serveur attractives.

Pré-requis :


Connaissances de base en HTML et CSS.

Objectifs :


Concevoir et développer des applications Web en HTML 5 et CSS 3 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 Intégrer des animations et du contenu multimédia

Certification


Rappels

  • Rappels sur les versions HTML (HTML 4, XHTML 1.x, XHTML 2).
  • Les DTD : strict, transitional, frameset.
  • Les différents composants d'un document HTML : titres, paragraphes, liens, tableaux, formulaires...
  • Les commentaires.
  • La structure composite d'un document HTML : images, feuilles de style CSS, JavaScript, Flash...
  • Le modèle de document (DOM).
  • Le protocole HTTP.
  • Interaction client/serveur HTTP.
  • Interprétation du HTML par le navigateur.
  • Position des navigateurs face aux technologies HTML.

Introduction au HTML 5

  • Les objectifs de HTML 5.
  • Le WhatWG versus W3C.
  • Les principaux concepts et apports.
  • Les différents composants : balises, formulaires, audio, vidéo, API, etc.
  • Outils de développement HTML 5.
  • Test de compatibilité, méthode de détection HTML 5.

Nouvelle structuration

  • Les éléments traditionnels structurant un document HTML 5 (doctype, html, head, body, meta ...).
  • L'élément <nav> et la mise en place d'informations de navigation internes au site.
  • L'élément <section> et la mise en place de blocs de contenus.
  • L'élément <article> et la mise en place de contenus indépendants du document.
  • L'élément <aside> et la mise en place de blocs d'informations complétant un contenu principal.
  • Les éléments <header> et <footer> et la mise en place de sections d'introduction et de conclusion d'un bloc.
  • Les autres balises de structure.
  • Les nouvelles catégories de contenus : Metadata content, Flow content, Sectioning content, Heading content.
  • Les nouvelles catégories de contenus : Phrasing content, Embedded content, Interactive content.
  • La validation des pages avec le valideur officiel du W3C.
  • Intérêt de ses nouvelles balises de structure.Imbrication et type de contenu.

Les nouvelles balises HTML

  • Les balises et attributs obsolètes.
  • Les images SVG pour le dessin vectoriel.
  • Les canevas pour le dessin "bitmap".
  • Différence Canvas vs SVG.
  • Les nouvelles balises : <mark>, <meter>, <time>, <figure>, <picture>...
  • Les extensions de balises HTML existantes.
  • Les nouveaux attributs : a, fieldset, iframe, area, button...
  • Les microformats. Présentation et avantages sur le référencement. Attributs itemprop='nationality'...
  • Les formulaires. Les nouveaux types de la balise <input> (email, date, week...).
  • Les nouveaux champs de formulaires : range, autofocus, placeholder, menu...
  • Le contrôle et la validation de formulaires.
  • Les formats multimédias. Codecs et API Multimédia.
  • Gestion vidéo et audio avec les nouvelles balises <audio> et <video> HTML5.

Les sélecteurs CSS 3

  • Rappel sur la syntaxe : les sélecteurs, les règles.
  • Sélecteurs de répétition nth-child(even).
  • Sélecteurs de cible target.
  • Sélecteurs frère antérieur ~.
  • Sélecteurs d'enfant unique only-child.
  • Media Queries pour le chargement conditionnel des CSS selon la résolution ou l'orientation du terminal.
  • Création de layout avec flexbox (organisation des éléments en fonction d'une grille).

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.
  • 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...

La mise en forme des boîtes et des fonds

  • Les ombres avec box-shadow.
  • Les coins arrondis avec border-radius...
  • Les fonds multiples.
  • Les gradients de fond (-webkit-gradient).
  • Les fonds ajustés aux conteneurs.

Les transformations

  • Les transformations : translations, rotations, homothéties (-webkit-transform).
  • Les animations : les animations, les transitions (?webkit-transition).

 

Formation CMS

- Joomla!, Créer et Administrer Un Site Web
- Joomla!, Perfectionnement
- WordPress, Initiation, Installer et Gérer Un Site d'Entreprise
- WordPress, Perfectionnement
- Prestashop, Créer un site e-commerce

Formations "HTML, CSS, XML

- HTML, Initiation Pratique
- CSS, Donner Du Style à Vos Pages Web
- Programmation en HTML5 avec JavaScript et CSS3
- Technologies XML, conception, mise en œuvre
- XML, Modéliser Vos Documents et Données

Formations "JavaScript

- JavaScript au Cœur des architectures Web, état de l’art
- JavaScript, HTML dynamique
- JavaScript, perfectionnement
- HTML5, Maîtriser Les API JavaScript
- Ecmascript 6, Mettre En Oeuvre Le Nouveau JavaScript

Formation: Java/JEE/.NET/PHP

- Java EE 7, Conception et Développement d'Applications Web
- Framework JSF 2, Développer Des Applications Web
- Développer Une Application Web 2.0/GWT
- ASP.NET niveau 2, développement Web
- ASP.NET niveau 1, développement Web
- ASP.NET MVC 5, développement d'applications Web
- Introduction à la programmation avec Java
- Initiation à la Programmation Objet/Java
- L'essentiel de Java et de l'objet
- Java, Programmation Avancée

Création site internet : Mg Formation