• slide-formation

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

 

 

 

 

 

Powered by Amazing-Templates.com 2014 - All Rights Reserved.