La création d’un site Internet en langage HTML5 et feuilles de style CSS3.

Ce module va permettre d’une part, de réaliser une conception de pages « Web » en langages HTML5 et CSS3 de façon totalement autonome, avec ou sans éditeur WYSIWYG et avec ou sans tableaux de mise en page, et d’autre part d’étudier les différentes étapes de création d’un projet Internet.

Cette formation de quatre jours s'adresse aux développeurs ou aux personnes débutantes et intermédiaires déjà familiarisées avec le langage HTML et les feuilles de style CSS et désirant étudier ou maîtriser les nouvelles normes des langages HTML5 et CSS3.

PRÉSENTATION :

Cette formation étudie les nouveaux éléments du langage HTML5 et des feuilles de styles CSS3 afin d’acquérir les compétences nécessaires pour maîtriser le développement de sites Internet en HTML5 et CSS3 dans le respect des standards de conception W3C (organisme de normalisation des standards de l’Internet), et de compatibilité entre les navigateurs.

OBJECTIF :

L’objectif de cette formation est d’exploiter pertinemment les principales nouveautés de l’HTML5 et du potentiel de la norme CSS3, dans le respect des standards de conception, de compatibilité entre les navigateurs et des bonnes pratiques.

PRINCIPE :

Le projet met en œuvre des solutions « Web » face à un problème posé, et tentera de parcourir les différentes activités de la conduite de projet (du plan d’organisation à la capitalisation) et les différentes étapes du cycle de vie du logiciel à concevoir.

PRÉ-REQUIS :

Cette formation de quatre jours s’adresse à des développeurs ou des personnes débutantes et intermédiaires ayant des connaissances dans les langage HTML et CSS désirant maîtriser les nouvelles normes des langages HTML5 et CSS3.

DURÉE :

4 jours (16 heures).

PROGRAMME :

Programme de la première journée : Les nouveaux éléments de l’HTML5

I. L’introduction

• La page « Web », le W3C et le WHATWG.
• La présentation de quelques outils : éditeurs de texte, wysiwyg et clients ftp.
• La syntaxe HTML et le principe de balise, d’éléments et d’attributs.
• L’historique de l’ HTML et les organismes de normalisation.
• Les principales différences entre l’HTML5 et ses prédecesseurs.
• Les fondements de l'évolution et la nouvelle vision de L’HTML5.
• Les syntaxes HTML et XHTML et les outils (Doctype, NameSpace, Encoding,…).
• La question des navigateurs et leur compatibilité.

II. Le balisage, les nouveaux éléments et les attributs HTML5

• La déclaration de type de document (DTD).
• La structure d’un document, d'une page et la disparition des notions « en ligne » et « bloc ».
• L’ossature et a nouvelle organisation des documents.
• Les jeux de caractères et la définition de la langue dans un document HTML5.
• La validation du code HTML5.
• Les sections (header, footer, nav, aside, article, section).
• Les balises (time, mark, figure, figcaption).
• Les indispensables balises (menu, command, details, summary).
• Les nouveaux attributs globaux.
• Les nouveaux éléments sémantiques.
• Les éléments obsolètes (center, font, frame, acronym, etc).
• L’optimisation des balises pour les moteurs de recherche (SEO).
• Les différents types de liens hypertextes et la mise en forme.
• Les couleurs et les images d’arrière-plan.
• Les balises de type "en-ligne" et les balises de type "bloc".
• Le positionnement dans le flux, hors du flux et en décalage (par défaut, absolu, fixé, flottant et relatif).
• Le regroupement des éléments (span et div).
• La mise en page avec la propriété display (vertical-align., border-spacing, Le rendu inline-block etc.).

Programme de la deuxième journée : Les mises en forme des textes, des boîtes, des menus, des tableaux, des formulaires

III. Les textes et les polices, les éléments interactifs et le regroupement de contenu

• Les éléments redéfinis dans l’HTML5.
• Les nouveaux éléments de l’ HTML5.
• L’affichage des caractères accentués correctement (première et seconde méthode).
• L’utilisation des polices exotiques.
• Les polices libres de droits.
• La compatibilité multi-navigateurs des polices de caractères.
• Les éléments interactifs (les éléments éditables et les versions résumées et étendues d’un texte).
• Les nouvelles techniques de regroupement de contenu.
• Le concept de boîte.
• Les différents styles de listes HTML et le choix d’un style d’une liste.
• Des images à la place des puces ou centrées à la place des puces.
• Le légendage, le texte non proportionne, les citations, la rupture thématique.

IV. Les coins arrondis et les ombres

• Les boîtes à coins arrondis (ancienne et nouvelle méthode CSS3).
• L’ombre portée autour d’une image (nouvelle et ancienne technique).
• L’ombrage CSS3 sur un élément ou du texte.
• L’ombrage de texte dans Internet Explorer.
• Les effets sur du texte dans Internet Explorer.
• La mise en page CSS3 avec arrondis et ombrages.

V. Les propriétés et la mise en forme des menus

• Le menu vertical élémentaire ou graphique.
• Le menu horizontal élémentaire avec « display » : « inline-block ».
• Le menu horizontal avec « border-radius ».
• Le menu déroulant avec des effets.

VI. Les propriétés et la mise en forme des tableaux

• Les bordures séparées, fusionnées ou autour des cellules.
• La mise en forme des cellules (alignement, arrière-plan,etc.).
• La mise en forme des adjacents et des enfants.
• La mise en forme des tableaux complexes (légende, lignes paires et impaires, info-bulles, accessibilité, etc.).
• La mise en forme CSS3 sophistiquée.

VII. Les formulaires évolués (Web Forms)

• Les nouveaux types pour « input » (url, email, number, range, week, date, datetime, etc.).
• Les nouveaux attributs (placeholder, autofocus, min, max, step, required,etc.).
• Les styles CSS applicables pour la validation des données du formulaire.
• Les nouveaux éléments dédiés aux formulaires( output, progress, datalist, etc.).
• Les éléments décoratifs (le label, l’alignement, les angles, les boutons, etc.).

VIII. Les évènements et la gestion évènementielle

• Les bases de la gestion événementielle.
• Les événements liés à la fenêtre.
• Les événements liés au clavier.
• Les événements liés à la souris.
• Les événements liés aux formulaires.
• Les événements liés aux médias.
• Le stockage local de données.

IX. Les microdata

• Le balisage sémantique du contenu.
• L’optimisation pour les moteurs d'indexation.
• Les attributs itemid, itemref, itemscope, itemtype,et itemprop.
• Le vocabulaire et « Rich Snippets ».
• Les techniques d'intégration.
• Les outils de génération et les applications.

Programme de la troisième journée : Vue d’ensemble des APIs pour l’HTML5

X. Les nouveaux APIs de l’HTML5 (javascript)

• Les APIs pour l’HTML 5.
• La gestion des fichiers.
• L’intégration des éléments audio et Vidéo.
• La géolocalisation et l’API Google Map.
• Les applications Offline (Appcache.).
• Le Web Storage (LocalStorage).
• Le Drag & Drop.
• L’extension de HTMLDocument.
• L’extension de HTML Element.
• L’historique de pages.
• La balise Canvas.
• La méthode Get Elements by Class.
• Les APIs variées (Web Workers, Vibrate, Battery API, Page Visibility, Navigation Timing et Network Information, Server-sent Events, etc.).

XI. L’audio et la vidéo en HTML5

• Les balises (audio, video), et les conteneurs.
• Les support et les formats (codecs WebM, MP4, H.264, Ogg Theora, MP3, AAC, Vorbis).
• La gestion de sources multiples.
• L’API de contrôle en JavaScript et les événements.
• La gestion du plein écran.
• Le streaming.
• L’ajout de sous-titres à une vidéo HTML5.

XII. Le « Web Storage »

• Le stockage local et le stockage de session.
• Les principes généraux de manipulation.
• L’utilisation de JSON.

XIII. La géolocalisation

• Le Principe général de l'API.
• Le positionnement (latitude, longitude).
• Le suivi d une position et la configuration de la géolocalisation.
• L’utilisation d’une carte Google Maps.

XIV. Les applications hors-ligne (Appcache)

• La détection online/offline.
• La rédaction du manifeste appcache.
• Les techniques de gestion du cache et le comportement du navigateur.
• L’API de contrôle en JavaScript.

XV. Les éléments graphiques et multimédia (La balise Canvas)

• Le dessin et les méthodes de tracé 2D.
• Le tracé de formes et les chemins.
• Les couleurs, les remplissages et les dégradés.
• Le texte, les images et les motifs.
• Les animations,les jeux et les effets spéciaux.
• Les graphiques vectoriels et l'alternative SVG.

Programme de la quatrième : L’usage et les nouveautés des feuilles styles CSS3

XVI. Introduction CSS3

• Les nouveautés (propriétés, sélecteurs, préfixes, médias, transitions, transformations, Internet Explorer).
• L’usage des feuilles de CSS3 en production aujourd'hui ?
• Les préfixes : liste et utilité.
• La syntaxe particulière à CSS3.
• Les styles CSS dans les balises.
• Les feuilles de styles interne et externe.
• Les éléments, les sélecteurs CSS 2.1 et CSS3, les propriétés et les valeurs CSS.
• idou class ?
• Les pseudo-classes et les pseudo-éléments1.
• Les unités CSS.

XVII. Les valeurs, les fonctions et les unités

• La transparence avec RGBa et HSLa.
• Les variables calc(), min() et max().
• Les nouvelles unités (rem, vw, vh, vm, deg, rad, s.).
• La compatibilité des navigateurs.

XVIII. Les propriétés décoratives CSS3

• Les nouvelles fonctionnalités de texte et de contenu (text-shadow, text-overflow, word-wrap, overflow-x, overflow-y, etc.).
• Les descripteurs de police définis à l'intérieur de la règle @ font-face.
• Les propriétés des bordures et des boîtes (border-radius, box-shadow, border-image, etc.).
• Les propriétés des arrière-plans multiples (background-size, background-origin, etc.).
• Les transitions de couleurs en dégradés (Linear Gradients et Radial Gradients).
• Le design multicolonnage et les multiples propriétés des colonnes (column-count, column-gap, column-rule).

XIX. La mise en page, le positionnement et le rendu avancé en CSS3

• La gestion des boîtes (box-sizing).
• La mise en page multi-colonnes.
• La mise en page par boite horizontales ou verticales ou modèle de boîte flexible (flexbox model).
• Le « template layout ».
• Le positionnement par grille ( grid layout ).
• Les autres nouveautés CSS3 (Regions, Shapes et Exclusions).

XX. La sélection d'éléments en CSS3

• Les sélecteurs CSS2 implémentés.
• Le sélecteur d'adjacence général (le sélecteur d'adjacence indirecte).
• Le sélecteur d'attribut.
• Les pseudo-classes générales (:lang, :empty, :target, :nth-child, :nth-of-type, :only-child, :not, etc.).
• Les pseudo-classes de formulaire (:valid, :invalid, :checked, :required, :optional, etc.).

XXI. Les méthodes de transformations 2D et 3D

• La translation avec les méthodes « translate » et « translate3d ».
• La rotation avec les méthodes « rotate » et « rotate3d ».
• Le zoom avec les méthodes « scale » et « scale3d ».
• Les déformations avec les méthodes d’inclinaison « skew » et les matrices de transformation « matrix ».
• Les fonctions et les propriétés des méthodes de transformations 2D et 3D.

XXII. Les transitions et les animations

• Les propriétés des transitions : « property, duration, delay et timing-function ».
• La modification progressive d’une propriété.
• Les animations avec la règle des « keyframes ».
• L’animation d’une transformation et le déclenchement d’une animation en Javascript.
• Les propriétés supportées.

XXIII. L’HTML5 avancé

• Les Barres de progression.
• Le langage de balisage mathématique (MathML version 2.0).
• L’accessibilité du Web 2.0 avec « WAI-ARIA » (Web Accessibility Initiative - Accessible Rich Internet Applications).
• L’approche sémantique avec les « Microformats ».
• Le design dynamique ou « Responsive Web Design » avec les « Media Queries » (gestion, syntaxe, valeur).
• Pour aller plus loin (les ressources Web).

• Module 1 : Conception & solutions « Web » : Le plan de conception et la sécurité d’une application « Web ».
• Module 2 : L’initiation et la création d’un site Internet en HTML et CSS.
• Module 4 : L’apprentissage et la création d’un site Internet en PHP5 sans base de données.
• Module 5 : L’apprentissage et la création d’une application Internet en PHP5 et MySQL.
• Module 6 : La sécurité et les risques liés aux applications « Web ».
• Module 7 : L’utilisation d’un outil de développement intégré pour le « Web ».
• Module 8 : L’accessibilité numérique.