HTML, CSS3 & Javascript - Developpement d'interfaces graphiques
Développement 3090 € HT
Objectifs
Développeurs, chefs de projets Web souhaitant développer des sites Web ou applications avec HTML 5 et CSS3.
À l'issue de la formation, le stagiaire sera capable de :
- 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
Methodes et outils pédagogiques
- Alternance exposés théoriques et exercices pratiques (80% pratique)
- Support de cours adapté au logiciel étudié et au niveau suivi
- Assistance téléphonique gratuite et illimitée
Modalité d'évaluation
- Evaluation formative au travers de nombreux exercices tout au long de la formation permettant de valider les compétences acquises.
Attestation de stage. - Emargement quotidien d’une feuille de présence
- Possibilité de passage de la certification Tosa en fin de formation
Accessibilité aux personnes handicapées
Pour tout besoin d’adaptation, retrouver le contact de notre référent handicap et les modalités d’accueil sur la page : Infos pratiques/Situation de Handicap
Public concerné
Développeurs .Net ou Java souhaitant savoir exploiter les possibilités offertes par HTML5 et CSS Chargés de développement d'applications informatiques
Pré-requis
Connaissance internet standard, notions d'algorithmie
5 jours
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
Travaux pratiques
- Pour chaque point du programme abordé :
Présentation et démonstration par le formateur, mise en pratique sur les fonctionnalités abordées par le stagiaire avec l’appui du formateur et du groupe, feedbacks du formateur tout au long de l’activité.
