M2I : 02. HTML5, CSS3, Responsive – Création de pages web

Jour 1 matin

§ Les terminaux

 Types de terminaux (mobile, tablette, tv, liseuse...) et leur résolution. Périphériques, OS, navigateurs.

Le marché mobile et parts de marché.

Standards HTML, HTML5, CSS3 (API, sélecteurs...)

§ Structure d'une page

Tags principaux

Simplification avec HTML 5

Les éléments et leur placement

Exemple de travaux pratiques (à titre indicatif)

Création d'une page Web simple

§ Balises structurantes

Blocs div et span

Listes

Tableaux

iFrames

Exemples de travaux pratiques (à titre indicatif)

Création d'un menu à partir d'une liste à puces

Création d'un tableau de contacts

Affichage d'un fichier PDF dans une page Web

Jour 1 après-midi

§ Web Forms 2

Champs de saisie

Listes déroulantes

Boutons radio

Champs date

Placeholder

Slider

Validation automatique

Exemple de travaux pratiques (à titre indicatif)

Création et validation d'un formulaire de saisie d'informations d'un contact

§ HTML 5

Balises sémantiques

Audio et vidéo

Exemples de travaux pratiques (à titre indicatif)

Affichage d'un élément audio et vidéo

Structuration d'une page Web avec les éléments

 -  Header

 -  Nav

 -  Section

 -  Article

 -  Footer

Jour 2 matin

§ Styles CSS

Syntaxe des sélécteurs CSS

Pseudo sélecteurs

Principales propriétés CSS

Règles CSS

Frameworks CSS

Exemples de travaux pratiques (à titre indicatif)

Analyse du site Zen Garden

Mise en forme avec CSS

Mise en forme d'un tableau et d'un formulaire avec Bootstrap

§ Structure des éléments

Le modèle de boîte

Eléments block et inline

La propriété display

Padding, marges et bordures

Exemples de travaux pratiques (à titre indicatif)

Mise en forme d'une page Web avec les propriétés CSS : padding et margin

§ Positionnement

Positionnement dans le flux

Positionnement absolu et relatif

Positionnement fixé

Positionnement flottant

Exemple de travaux pratiques (à titre indicatif)

Utilisation des propriétés CSS position

 -   Left

 -  Top

 -  Float

 -  Clear

Jour 2 après-midi

§ CSS 3

Nouveaux sélecteurs

Fonts, couleurs et bordures

Positionnement en colonnes

Présentation des Media Queries

Exemples de travaux pratiques (à titre indicatif)

Utilisation des propriétés CSS

 -  Les ombrages

 -  Les dégradés de couleurs

 -  Les angles arrondis

 -  Les Flexbox

 -  Mise en forme selon le type de média

Jour 3 matin

§ Présentation des media queries

Adaptation des CSS aux caractéristiques du terminal.

Règles conditionnelles (orientation, device-width...).

JavaScript et les anciens navigateurs.

Réglage complémentaire de rendu visuel (Viewport).

Exemples de travaux pratiques (à titre indicatif)

Utilisation des Media Queries pour s’adapter à différents hardwares

§ Principes de grilles fluides, fixes

Conception classique versus conception selon une grille.

Importance des blocs, approche contenu/contenant.

Unités de mesure (% em px), mode Retina.

Eviter les débordements. Points de rupture.

Principe des box, layout avec CSS3.

Exemples de travaux pratiques (à titre indicatif)

Test de différents types de grille

Jour 3 après-midi

§ Frameworks et librairies responsives

Détecter les ressources avec "Modernizr".

Librairies de substitution (less, css3pie...).

Frameworks CSS 960 grid, HTML5 BoilerPlate, Bootstrap, Foundation, Skeleton, 320.

Exemples de travaux pratiques (à titre indicatif)

Installation de Bootstrap et test de différentes grilles selon des tailles d’écrans différentes