Open Web Platform avec HTML5, CSS3, Responsive Web Design

12 Août, 2015 Les commentaires sont désactivés pour cet article

Adaptez votre site à toutes les plates-formes
Afin qu’un site web bénéficie d’une bonne visibilité sur Internet, celui-ci doit disposer d’une portabilité satisfaisante sur les différents supports. Birnou Sebarte, votre formateur, vous propose de découvrir les démarches et les règles à suivre, afin d’assurer cette portabilité à vos sites web. Vous apprendrez ainsi à utiliser Canvas, Responsive Web Design, HTML5, API, ainsi qu’Animation. Ces connaissances vous permettront d’adapter vos contenus aux différents supports, fixes et mobiles. Grâce à ce programme d’apprentissage, vous aurez toutes les clés en main, afin de maîtriser la visibilité de votre site web.

Introduction

  • Objectifs et présentation de la formation
  • Les outils de codage
  • Les outils de contrôle
  • Shadow
  • Web mobile ou web app ?
  • Définitions

Avant de commencer, prototypons

  • Le mode Grille, les bases
  • Grille fixe ou grille liquide
  • Les frameworks
  • Exemple d’utilisation en grille
  • Aller plus loin avec les grilles
  • Les grilles responsives
  • Grille responsive mode Dreamweaver
  • Prototype en grille, le wireframing

HTML5

  • Bref historique
  • Le W3C et WHATWG
  • En-tête et corps
  • Structure et sémantique
  • Les microformats
  • Les microdata
  • ARIA et l’attribut Rôle
  • Les nouvelles balises
  • Article ou section ?
  • nav
  • aside
  • header, footer, h1
  • Structure de page modèle
  • Quelques balises pêle-mêle
  • Quelques attributs pêle-mêle
  • Web Forms 2.0 et les types de champs
  • Les API
  • sessionStorage et localStorage
  • Géolocalisation
  • Plus d’info sur le HTML5
  • La sécurité
  • Les navigateurs et leurs interprétations
  • Le passage HTML4 à HTML5
  • HTML shiv
  • Modernizr
  • Boilerplate, Initializr et les autres…
  • Les sites (doctor HTML5, etc.)

Doc type, structure et sémantique

  • Bref historique
  • Le W3C et WHATWG
  • En-tête et corps
  • Structure et sémantique
  • Les microformats
  • Les microdata
  • ARIA et l’attribut Rôle

HTML5, les balises

  • Les nouvelles balises
  • Article ou section ?
  • nav
  • aside
  • header, footer, h1
  • Structure de page modèle
  • Quelques balises pêle-mêle
  • Quelques attributs pêle-mêle
  • Web Forms 2.0 et les types de champs

API et librairies

  • Les API
  • sessionStorage et localStorage
  • Géolocalisation
  • Plus d’info sur le HTML5
  • La sécurité
  • Les navigateurs et leurs interprétations
  • Le passage HTML4 à HTML5
  • HTML shiv
  • Modernizr
  • Boilerplate, Initializr et les autres…
  • Les sites (doctor HTML5, etc.)

CSS3

  • État des lieux entre 2.1 et 3 et 4
  • Les préfixes
  • Les déclarations incontournables
  • Gestion des couleurs et des dégradés
  • Les sélecteurs
  • De plus en plus flexible
  • Les outils générateurs en ligne
  • Fireworks et CSS3 properties
  • CSS3 PIE
  • eCSStender
  • Sass
  • Compass
  • Less
  • Installer Compass sous Mac OS
  • Stylus
  • Comparatifs
  • D’autres librairies
  • Object Oriented CSS
  • Les variables CSS

Déclarations, règles, portabilité

  • État des lieux entre 2.1 et 3 et 4
  • Les préfixes
  • Les déclarations incontournables
  • Gestion des couleurs et des dégradés
  • Les sélecteurs
  • De plus en plus flexible
  • Les outils générateurs en ligne
  • Fireworks et CSS3 properties

Librairies et préprocesseurs

  • CSS3 PIE
  • eCSStender
  • Sass
  • Compass
  • Less
  • Installer Compass sous Mac OS
  • Stylus
  • Comparatifs
  • D’autres librairies
  • Object Oriented CSS
  • Les variables CSS

Responsive

  • Le Responsive Web Design
  • Plateforme, redimensionnement ou lisibilité
  • Les media queries
  • Les media queries pratique Dreamweaver
  • Respond.js
  • Questions sur le mobile first
  • La taille de police par défaut
  • Les unités de mesure proportionnelles
  • em ou % ?
  • em ou rem ?
  • L’interface
  • La proportionnalité
  • Les images responsives
  • Response.js
  • Les vidéos responsives

La typographie et le web

  • Historique et font remplacement
  • Les formats de police pour le web
  • Typeface
  • Typekit
  • Google web fonts
  • @font-face
  • Les sites et la distribution
  • Générateur de fontes
  • Les icônes fontes
  • L’optimisation des fontes
  • Les types de licences

Les médias et multimédias

  • Images encodées en base 64
  • Optimisation des images
  • Utilisation de sprites
  • Générateur de sprites
  • Sources et formats vidéo, l’encodage
  • L’élément vidéo et ses attributs
  • Réglages et attributs
  • Sources et formats audio
  • L’élément audio et ses attributs
  • Outils pour convertir de l’audio
  • Aller plus loin en audio et vidéo HTML5
  • Utiliser SWF en HTML5
  • Utiliser PDF en HTML5
  • La balise object

L’animation

  • Présentation et exemple
  • Définitions
  • Animations, transformation, transitions
  • Transition vs transformation
  • Accélérations
  • Jeu sur les délais
  • Couplage de formes primitives, CSS et JavaScript
  • Quelques frameworks
  • Animation avec jQuery
  • jQuery et easing
  • Quelques éléments déjà prêts à l’emploi
  • L’outil couteau suisse Edge

Dessiner avec son navigateur

  • Présentation et introduction à <canvas>
  • Tracé de points et lignes
  • Tracé de courbes et de cercles
  • Intégration d’images
  • Gestion du texte
  • Mise en place d’un graphique de données
  • Création des barres de données
  • Bases de l’animation avec l’API Canvas
  • Le cas de IE < 9.0
  • Aller plus loin avec Canvas
  • Présentation de SVG
  • Générateurs et outils SVG
  • SVG et interactivité
  • Souplesse avec Illustrator
  • Introduction à l’animation avec SVG
  • Aller plus loin avec SVG

À ne pas oublier !

  • Valider son travail
  • Tester son travail
  • Conclusion

Votre/vos formateur(s) : Birnou Sébarte

Date de parution : 12 sept. 2012
Durée : 10h40 (131 vidéos)
Formation individuelle : € 49,80
Abonnement: à partir de 19,95 €
Les prix affichés incluent la TVA.