Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript
Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript
Informatique > Développement web et mobilité
Objectifs
- Disposer des compétences nécessaires au développement d'un site internet full HTML5 / CSS3.
- Savoir produire des pages compatibles avec les différents navigateurs internet.
- Être capable de créer des interactions dynamiques avec l'utilisateur sans développement serveur.
- Comprendre comment tirer parti des dernières nouveautés HTLM5 comme le lecteur vidéo compatible mobiles.
Le programme de la formation
Présentation
HTML : le langage du Web
Contexte historique
Environnement et structure
Concept et usage 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
Titres et 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, à puces, imbriquées
Les listes de définition
Les tableaux
Cellules de tableau et fusion des cellules
Gestion de la taille du tableau
En-tête et légende
Les bordures
Les groupes de colonnes et de lignes
Les hypertextes
La balise de liens
Les différents types de liens : vers une autre page, dans une page, vers un site Web, de téléchargement...
Les Target
L'attribut titre
La couleur des liens
Liens et feuilles de style
Insertions d'images
L'insertion d'une image
L'espace autour d'une image
L'alignement d'une image
Couleur et 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
Menu déroulant
Boutons : radio, checkbox, d'envoi, d'annulation, de commande
Les formulaires : cachés, de transfert de fichier, de mot de passe
L'organisation des éléments d'un formulaire
Les méta-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
JavaScript : le coeur 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
Objets personnalisés et objets globaux
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, navigator, form...
Manipuler des fenêtres
Gérer des timers
Introduction à HTML5
Contexte : fonctionnement d'un site internet
Histoire et normalisation du HTML
La nouvelle vision HTML5
Roadmap HTML5
Comment utiliser le HTML5 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
Audio et vidéo
Les éléments audio et vidéo
Les conteneurs, les codecs
Compromis pour un site à forte audience
Vue d'ensemble des APIs
Les APIs HTML5
Audio et vidéo
Site web hors ligne
Drag et Drop
Dessiner en HTML
Canvas vs SVG
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éolocalisation
Vue d'ensemble
La vie privée de l'utilisateur
Stockage
Stockage local
Stockage en session
Bases de données SQL Web
CSS : standardiser des propriétés
Se passer d'images, éviter les astuces
Coins arrondis, ombres portées, transparence, animations
Autres nouveautés
CSS : 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
CSS pour mobiles et tablettes
Public et Pré-requis de la formation
Développeurs .Net ou Java souhaitant savoir exploiter les possibilités offertes par HTML5 et CSS, Chargés de développement d'applications informatiques.
Connaissance internet standard, notions d'algorithmie.
Méthode pédagogique de la formation
Une progression pédagogique qui permet de comprendre les traitements qui peuvent être délocalisés du serveur vers le poste client.
Création d'une application "fil rouge" : création du contenu, de la mise en forme, tests multi-navigateurs, ajout de fonctionnalités dynamiques et HTLM5, mise en production.
La pédagogie favorise les échanges entre participants ; l'animateur apporte des réponses personnalisées à chacun.
Les contenus digitaux mis à disposition des participants après la formation renforcent l'efficacité pédagogique du programme et garantissent un bénéfice durable de l'action de formation.