Les fondamentaux du développement des interfaces graphiques avec HTML5, CSS3 et JavaScript
Pré requis
- Avoir une connaissance internet standard et sur notions d’algorithme
Objectifs de la formation
- Posséder les compétences nécessaires au développement d’un site internet full HTML5/CSS3
- Savoir créer des pages compatibles avec les navigateurs internet
- Être en mesure de créer des interactions dynamiques avec l’utilisateur sans développement serveur
- Comprendre comment tirer parti des dernières nouveautés HTLM5 per exemple le lecteur vidéo compatible mobiles
Public :
Pour les développeurs .Net ou Java
Contenu du cours
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 et 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 et imbriquées
- Les listes de définition
Les tableaux
- Les cellules du tableau et la fusion de ces 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
- 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
- La couleur et image de l'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
- Les boutons de commande
-Les formulaires
- L'organisation des éléments d'un formulaire
Les méta-informations
- Doctype ou DTD
Les feuilles de style
- Les propriétés : couleur et police…etc
- Les classes
- Dynamiser un site avec CSS
- Gérer les emplacements
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 et les structures de contrôle
- Les fonctions
- Objets personnalisés et globaux
- Manipuler les tableaux, les dates et 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 les fenêtres
- Gérer des timers
Introduction à HTML5
- Fonctionnement d’un site internet
- Histoire et normalisation du HTML
- La nouvelle vision HTML5
-Roadmap HTML5
L'utilisation du HTML5
- Savoir quand choisir le HTML5
- Exploiter 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 exploiter des formulaires HTML5
Audio et vidéo
- Les éléments audio et vidéo
- Les conteneurs et les codecs
- Effectuer des 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 et éviter les astuces
- Coins arrondis et animations
- Autres nouveautés
CSS : mise en page et positionnement
- Clarifier le code et é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
- Emplacement par grille
- Autres nouveautés
