Créer des sites et applications web avec HTML5 et CSS3

DESCRIPTION :

  • Le HTML5 et le CSS3 sont les dernières versions des principaux langages Web validés par le World Wide Web Consortium (W3C), l’organisme qui a pour mission de développer des protocoles et des standards sur les langages Web et leurs évolutions.

OBJECTIFS :

  • Savoir développer un site Internet en HTML5
  • Comprendre comment créer un site « propre » en dissociant le contenu de la mise en forme
  • Assimiler les techniques permettant de développer des sites fonctionnant avec tous les navigateurs
  • Être capable de proposer des applications autorisant des interactions dynamiques avec les utilisateurs
  • Savoir profiter des dernières nouveautés HTML5 pour enrichir le contenu d’un site d’éléments vidéo ou audio

MÉTHODES PÉDAGOGIQUES :

  • Méthode active et démonstrative basée sur l’alternance de la théorie et de travaux pratiques sur ordinateur.
  • Chaque stagiaire dispose d’un ordinateur et l’alternance de la théorie et de travaux pratiques permet une validation concrète des acquis des stagiaires tout au long de la formation sous la conduite du formateur.
  • Validation des acquis par des grilles d’analyses, des exposés, des apports méthodologiques, des exercices et des tests d’évaluations.

DURÉE :

5 Jours – 35h.

PUBLIC :

  • Toute personne amenée à faire du développement de sites ou applications internet

PRÉ-REQUIS :

  • Connaissance internet standard, notions d’algorithmie.

PROGRAMME DE FORMATION :

1ERE PARTIE :

Présentation

  • HTML : le langage du Web
  • Contexte historique

Environnement et structure

  • Le concept des balises
  • Le bon usage des balises
  • Particularités et pièges du HTML
  • Le document HTML minimum

Mise en forme du document

  • Le texte simple
  • Les objets d’un document
  • L’en-tête d’un document HTML

Mise en forme du texte

  • Les titres
  • Les paragraphes de texte
  • Le contrôle de passage à la ligne
  • Le formatage du texte
  • L’alignement
  • La taille, la couleur et la police
  • Les caractères spéciaux
  • Les commentaires
  • Les autres balises de texte

Les listes

  • Numérotées
  • A puces
  • Imbriquées
  • Les listes de définition

Les tableaux

  • Les cellules de tableau
  • La fusion des cellules
  • Gestion de la taille du tableau
  • En-tête et légende
  • Les bordures
  • Les groupes de colonnes
  • Les groupes de lignes

Les hypertextes

  • La balise de liens
  • Liens vers une autre page
  • Liens à l’intérieur d’une page
  • Liens vers un autre site Web
  • Liens vers une adresse électronique
  • Liens pour télécharger un fichier
  • Les Target
  • L’attribut titre
  • La couleur des liens
  • Liens et feuilles de style

Insertions d’images

  • Les images du Web
  • L’insertion d’une image
  • L’espace autour d’une image
  • L’alignement d’une image
  • L’insertion d’une couleur d’arrière-plan
  • L’insertion d’image d’arrière-plan
  • L’insertion d’un lien sur une image
  • Les images réactives

Les formulaires

  • La déclaration de formulaire
  • Zone de texte à une ligne, à plusieurs lignes
  • Menu déroulant
  • Bouton radio
  • Bouton checkbox
  • Bouton d’envoi
  • Bouton d’annulation
  • Bouton de commande
  • Les formulaires cachés
  • Les formulaires de transfert de fichier
  • Les formulaires de mot de passe
  • L’organisation des éléments d’un formulaire

Les meta-informations

  • Doctype ou DTD

Les feuilles de style

  • Les propriétés : couleur, police, marge,…
  • Les classes
  • Dynamiser un site avec CSS
  • Gérer les positionnements

Introduction à JavaScript

  • JavaScript pour quoi faire ?
  • L’environnement du client Web
  • Le navigateur
  • Les outils
  • Insérer un script dans un document HTML/XHTML

JavaScript : le cœur du langage

  • La syntaxe
  • Les variables
  • Les fonctions globales
  • Les opérateurs
  • Les structures de contrôle
  • Les fonctions : définition, arguments, fonctions littérales, fonctions sous forme de données
  • Les objets personnalisés : constructeur, méthodes et propriétés, prototype, objets littéraux, objets sous forme de tableaux associatifs
  • Les objets globaux : Array, Date, Math, RegExp, String… Manipuler les tableaux, les dates, les chaînes de caractères

Les objets du navigateur

  • La hiérarchie des objets
  • Les principaux objets : window, document, location, screen, navigatior, form… Leurs propriétés et méthodes
  • Manipuler des fenêtres
  • Gérer des timers
  • Écrire et lire des cookies

2EME PARTIE :

Introduction

  • Contexte : fonctionnement d’un site internet
  • Histoire du HTML
  • Les organismes de normalisation : WHATWG et W3C
  • La nouvelle vision HTML5
  • Roadmap HTML5

Comment utiliser le HTML 5 aujourd’hui

  • Savoir quand choisir le HTML5
  • Utiliser le HTML5 avec des navigateurs qui ne le supportent pas

Le balisage HTML5

  • Structure d’une page
  • Doctype
  • Les nouveaux éléments et les éléments obsolètes
  • HTML5 et CSS3

Les formulaires

  • La balise form
  • Créer et utiliser des formulaires HTML5
  • Adapter ses formulaires à l’environnement mobile (téléphone, tablette)
  • Les contrôles disponibles (slider, etc.)
  • Mettre en place des validations

Audio et Vidéo

  • Les éléments audio et vidéo
  • Contrôler l’interface, les paramètres par défaut
  • Les conteneurs, le problème des codecs
  • Mettre en place une politique HTML5 + Flash pour le multimédia

Vue d’ensemble des APIs

  • Les APIs HTML5
  • Site web hors ligne : manifest
  • Drag et Drop
  • Extension de HTMLDocument
  • Extension de HTMLElement

Dessiner en HTML

  • Canvas vs SVG
  • Dessiner une ligne, un carré, un cercle
  • Le remplissage
  • Contexte et accessibilité

La communication en HTML5

  • Les évènements
  • Envoi de messages entre documents
  • Envoi de messages par canaux
  • Le push et les WebSockets pour plus de performances

La géo-localisation

  • Vue d’ensemble
  • Avec ou sans l’utilisation de GPS
  • Savoir manipuler l’API
  • La vie privée de l’utilisateur

Stockage

  • Gears, le pionnier
  • Stockage local
  • Stockage en session
  • Bases de données SQL Web
  • IndexedDB sera-t-il utilisé ?

CSS3 : standardiser des propriétés

  • Vue d’ensemble : se passer d’images, éviter les astuces
  • Coins arrondis, ombres portées, transparence, animations
  • Mise en page et positionnement
  • Autres nouveautés

CSS3 : mise en page et positionnement

  • Vue d’ensemble : clarifier le code, éviter la multiplication de div> imbriquées
  • Niveau de présentation
  • Mise en page par patron
  • Mise en page multi-colonnes
  • Mise en page par boites horizontales ou verticales
  • Positionnement par grille
  • Autres nouveautés
0 réponses

Laisser un commentaire

Rejoindre la discussion?
N’hésitez pas à contribuer !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *