Formation Applications Web

Passer au HTML5
HTML5, CSS3, API JavaScript

Le HTML5 est désormais pris en compte par la majorité des navigateurs.

Cette formation permet aux personnes pratiquant le HTML d'évoluer vers le HTML5 et CSS3.

Objectifs

Accéder aux fonctionnalités HTML5, CSS3
Découvrir les nouvelles fonctionnalités JavaScript prises en compte par les navigateurs HTML5
Comprendre les contraintes et la diversité des environnements : navigateurs, Desktop (machines de bureau, ordinateurs portables...), tablette, mobile...

Durée : 3 jours
Public : Webmasters, webdesigners, créateur de pages Web, personnes souhaitant créer un site Internet, personnes en charge d'un projet Web, personnes souhaitant créer un modèle de page pour un gestionnaire de contenu...
Pré-requis : Pratiquer le HTML et CSS, avoir pratiqué un langage de programmation

Afficher le détail

Programme

A. Introduction

  • Les organisations W3C et What WG
  • L'évolution du HTML
  • Les environnements : la diversité des équipements, les différents navigateurs...
  • Les nouveautés HTML5 et CSS3
  • La prie en charge par les navigateurs

B. HTML5

Introduction
  • Le Web sémantique
  • La syntaxe
  • Les nouveaux éléments, les nouveaux attributs
  • la déclaration DOCTYPE, l'en-tête, le corps du document, les commentaires
  • La prise en charge par les principaux navigateurs
  • Les bibliothèques d'aide : Modernise, Modernizr, html5shim...
    prise en charge pour d'ancianes navigateurs
  • Valider un document
Structure d'un document - Outline
  • La structure d'un document
  • Les nouveaux éléments header, footer, section, article...
  • Les titres
  • Valider la structure du document
Dessins avec Canvas et SVG
  • Définition de canvas
  • Définir le contexte de rendu
  • Dessiner avec Canvas, quelques exemples
  • Définition de SVG Scalable Vector Graphics
  • Dessiner avec SVG
  • Les solutions alternatives
Les éléments de formulaire
  • Les nouveaux éléments et attributs
  • Prise en charge par les navigateurs
  • Solutions alternatives
Les microformats, microdata
  • Principe
  • Exemple d'analyse par Google
Le multimédia
  • Les éléments audio, video, source
  • Les différents formats d'encodage
  • Les sources alternatives

C. API JavaScript

Introduction
  • Les évolutions JavaScript
  • Les équipements, les navigateurs
Présentation des nouvelles fonctionnalités
  • Drag and Drop
  • Geo localisation
  • Server Sent Events
  • Web Messaging, channel messaging
  • Web Storage : sessionStorage, localStorage, base de données
  • Application Cache
  • Web Worker

D. CSS3

Introduction
  • Les principales évolutions
  • Les nouvelles propriétés
  • Les bibliothèques alternatives pour les anciennes version Internet Explorer
Les principaux sélecteurs
Propriétés de texte et de police
Propriétés de couleur et transparence
Propriétés de fond et de bordure
  • fond avec images : fond multiple, redimensionnement ...
  • fond avec dégradés
  • bordure avec une image
  • Les différents types de boîtes CSS
  • Définir les bordures, les espacements internes et externes …
Transformations et animations
  • Transformations
  • Transitions
  • Animations
Mediaqueries
Propriétés Multicolonnes
Modèle de boîte flexible : Flexbox
Utilitaires et frameworks

D. Stratégies pour construire un site

Introduction
  • Les contraintes actuelles
  • Les différents environnements, équipements, mode de navigation
  • Des contraintes particulières sur les mobiles,
    le viewport, orientation, touch...
Les stratégies
  • Comment prendre en compte les différents équipements
    Ordinateur de bureau, tablette, mobile...
  • Identifier les types d'équipements, différentes méthodes
  • Différents choix : amélioration, progressive, dégradation gracieuse...
Utilitaires et frameworks
  • Les frameworks pour mobiles : jQuery Mobile ...
  • Grille pour construire une page : 960.gs

C. Ateliers

Les ateliers illustrent par des exemples concrets les sujets abordés.

La formation peut se dérouler avec l'éditeur dont vous disposez, cela peut être DreamWeaver, Eclipse , Aptana, BlueGriffon...

Financement

Financement possible au titre de la formation continue.
Consultez votre OPCA (Organisme Paritaire Collecteur Agréé) ou contactez-nous.

Retour vers le haut de page