Formation Développement d’Interfaces Graphiques avec HTML5, CSS3, JavaScript

Introduction

• Le processus de normalisation : le W3C et le WHATWG

• Vocabulaire autour des projets Web (front end, back end, backoffice, web services, etc.)

• Les métiers (développeur front, back, full, web master, data manager, référencement, etc.)

• Le modèle client/serveur dans le contexte du Web

• Les technologies côté front (HTML, CSS, JavaScript)

• Complémentarité avec les technologies du back office (Java, PHP, ASP.Net, etc.)

• La place des bases SQL dans les architectures Web (architecture n-tiers)

• Ce qui a changé pour le développeur avec l’arrivée du HTML5 et du CSS3 ?

• Protocoles et formats d’échange entre toutes ces briques (HTTP, XML, JSON, WebServices, Ajax, etc.)

• Développer une application Web selon le modèle MVC : définition et explication

Partie 1 : HTML5

Les fondamentaux

• La syntaxe HTML

• Le nouveau Doctype

• Encodage des caractères

• Le support navigateur

• Créer un template de base réutilisable pour tous les projets

HTML5 : Structurer un document

• Évolution de l’imbrication des balises : disparition des notions de inline et block

• Les nouvelles balises : header, footer, structure, aside, nav, hgroup, etc

• Les balises obsolètes : center, font, frame, acronym, etc

• Structurer une page avec les nouvelles balises

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

• Les nouveaux champs de formulaire et leur structure

• Les nouvelles pseudo-class CSS (valid, invalid, checked…)

• Créer un formulaire de contact type

• Accessibilité des éléments dynamique (ARIA)

Le multimédia

• La balise video

• La balise audio

• Le ShadowDom

• Les balises object, embed et svg

• Conteneur (MP4, OGG, WEBM) et codec (.h264, Vorbis, Theora, VP8…)

• Inclure une video dans une page et créer une interface de contrôle personnalisée

Graphique et dessin

• La balise canvas

• SVG et ses filtres

• WebGL

• Créer un graphique

Partie 2 : CSS3

CSS3 : Introduction & selector

• Présentation des feuilles de style

• Pourquoi parle-t-on de cascade ?

• Définition et attributs d'un style

• La problématique du positionnement des éléments

• Normalisation et compatibilité des navigateurs

• Gestion des caractères (web fonts, ombrage, etc.)

• Gestion des couleurs et des effets

• Les apports des nouveautés CSS3 (survol, animation, transition, etc.)

• Zoom sur les transformations et les animations (rotation, redimensionnement, déformation)

CSS3 : Mise en forme

• Fonction calc() et propriété box-sizing

• Mise en forme tabulaire et multi-colonnes

• Le modèle de boite flexible

• Les modèles de mise en page CSS

• La mise en page en grille CSS

• Mise en forme d’un modèle de site vitrine

CSS3 : Responsive web design

• Les bonnes pratiques du Responsive Web Design

• Adaptabilité des pages et web application

• Frameworks et librairies : iUi, Less, FitVids, Modernizr, Angular2…

• Adaptabilité du contenu et du contenant

• Le viewport

• Créer une page adaptive

Bootstrap pour développer plus simplement

• Qu’est-ce qu’une feuille de style LESS ?

• Qu’entend-on par « Mobile First » ?

• Philosophie « responsive » de Bootstrap

• L’intégration de Bootstrap (HTML, CSS, Javascript, frameworks divers)

• Installer et utiliser Bootstrap dans son projet

• La dimension grille (ligne/colonne) de Bootstrap

• Mise en œuvre et tests sur différents équipements (mobile, PC, portable)

Partie 3 : JavaScript

Le langage JavaScript

• Introduction au langage JavaScript

• Présentation d'exemples

• Les versions de JavaScript

• JavaScript embarqué dans les pages HTML

• Les fondamentaux (variables, types, structures, opérateurs, instructions)

• Manipulation de tableaux

• Fonction (définition, appel, passage d’arguments)

• Programmation objet en JavaScript (méthodes, propriétés)

• Dialogues avec l'utilisateur en JavaScript

• Les pièges classiques en JavaScript

EcmaScript : présentation des nouveautés

• JavaScript et EcmaScript (vocabulaire : ECMA, EcmaScript, ES?, ES201?)

• Le changement net depuis ES6

• Compatibilité avec les navigateurs et les frameworks

• Arrow function, promise, etc

• Module import

Gérer les évènements et les données en JavaScript

• Les évènements gérés par JavaScript (survol, clic, clavier, etc.)

• Propagation des évènements

• L’objet Event

• Les pop-ups

• Le fonctionnement de l'objet document

• Interactivité, contrôle et transformation des pages HTML

• Manipulation de la page (DOM)

• Manipulation des URL et des redirections

• Sélection d'éléments

• Modification du contenu HTML

• Modification du graphisme CSS

Développer au quotidien avec JavaScript

• Gestion des chaînes de caractères à travers l'objet String

• Les principales fonctions mathématiques dans l'objet Math

• Manipulation des dates via l'objet Date

• Manipulation des tableaux via l'objet Array

• Les expressions régulières dans le JavaScript

• Règles de transtypage et comparaisons

• Paramètres obligatoires / facultatifs / indéfinis des fonctions

• Quelques outils pour tester, debugger et mesurer les performances de vos programmes JavaScript

Gestion des formulaires avec JavaScript

• Rappel des composants d’un formulaire (checkbox, textbox, list, button, etc.)

• Manipulation de l'objet form

• Contrôle des données saisies dans un formulaire

• Le formulaire dynamique

• Liens entre évènements et formulaire (chargement, modification, validation, etc.)

• Validation du formulaire précédent « manuellement » en Javascript

AJAX : dialoguer avec le serveur

• Pourquoi AJAX (Asynchronous JavaScript And Xml) ?

• Mise en œuvre avec l’objet XMLHttpRequest

• Méthodes de requête http (GET, POST, etc.)

• Récupération de contenus HTML, XML ou JSON

Présentation de JavaScript avec HTML5

• Géolocalisation

• Glisser / Déposer

• Multi upload

• Historique (pushstate)

• Local Storage

• Web GL

• Web RTC

• Fullscreen

• API branchées mobile

• Détecteur de proximité

• Vibration API

• Utilisation du gyroscope du smartphone

• Accès à la webcam, au micro

• Shadow DOM

• Évolutions attendues

Vue générale des frameworks JavaScript

• Limites du JavaScript natif

• Comprendre le rôle des principaux frameworks et les technologies associées : Angular, Vue, React, Node

• Exemples de bases avec Angular

• React, philosophie et principes de fonctionnement

• Les tendances du marché et des projets