Programme :
Analyser les besoins du client ou de l’entreprise pour choisir la solution technique la mieux
adaptée et développer les fonctionnalités prévues.
– Concevoir l’architecture d’un projet web
– Concevoir le code de back-end et les API d’accès à ces données
– Concevoir le code de front-end.
Concevoir, manipuler et interroger des bases de données.
Configurer et maintenir les infrastructures d’hébergement.
– Corriger les problèmes présents sur un site en ligne
– Réaliser des tests unitaires.
– Effectuer des opérations de maintenance.
– Etre capable de gérer et planifier un projet avec des méthodes de développement agiles.
1
Partie 1: Front End
Unité de formation : les Bases fondamentaux du développement Front End.
Contenu de la formation : HTML5 et CSS3
I. Présentation des technologies ( HTML5 )
HTML5, standards et (rétro-)compatibilité
Navigateurs et outils de travail
HTML5 vs Flash
Applications HTML5 vs applications natives
Sémantique, référencement et accessibilité en HTML5
DOCTYPE, encodage, règles de syntaxe
Les nouvelles balises sémantiques
Relations, micro-formats et micro-données
II. HTML5 Forms ( Web Forms )
Vue d’ensemble des formulaires nouvelle génération
Les nouveaux éléments : progress, meter, datalist, keygen, output
Nouveaux types de champs : tel, url, email, search, number, etc.
Nouveaux attributs : autofocus, placeholder, form, required, etc.
Validation par le navigateur : required, pattern, formnovalidate
Suggestions automatiques
Exemple récapitulatif
III. JavaScript nouvelle génération
Mode strict et chargement asynchrone
DOM Level 3 : agir sur la page
Gestion dynamique des évènements
Debug et détection du support du HTML5
JSON et initiation au modèle objet
IV. Vidéo et audio
Codecs et formats (H264/MP4, OGG/theora, WebM/VP8)
Compatibilité et navigateurs
Les outils de conversion (rapide)
Savoir utiliser les services existants : Dailymotion, Youtube, Viemo
Les balises video, audio
Proposer plusieurs sources dans plusieurs formats Pré-
requis (type MIME et .htaccess)
Les attributs : controls, preload, autoplay, poster
Test de téléchargement d’une vidéo selon plusieurs formats depuis plusieurs navigateurs
Traitements en JavaScript
2
V. Les nouveaux sélecteurs CSS3
Les pseudo-classes et pseudo-éléments
Les sélecteurs d’attributs (^, $, *)
Exemple d’application de style « intelligente » combinant les nouveautés
VI. Mise en page et box model
Les positionnements (absolu, fixe, naturel)
Mise en page avec float
Mise en page avec Flex : box-sizing, border box, etc.
Système de grid
Disposition en colonnes
Régions et exclusions
Limites et apports des frameworks (bootstrap, etc.)
VII. CSS Grid
Limites des tableaux et apports des CSS Grid
Positionnement explicite et implicite des objets sur une grille CSS
Alignement des boîtes avec les grilles CSS
Utiliser les lignes ou les zones de la grille ?
Complémentarité Flexbox et Grid
Compatibilité avec les anciens navigateurs
Bootstrap:
Design
Graphisme avancé
Polices de caractères personnalisées
Couleurs avancées et dégradés
Ombres et opacité
Bordures et arrière-plans avancés
Responsive design
Problèmes techniques posés par
l’hétérogénéité (PC, téléphone, tablette)
Solutions apportées par le Responsive
Pré-requis pour faire du Responsive
Design
Media-queries : s’adapter à la résolution
d’écran et à l’orientation
Viewport
Déterminer la valeur d’une propriété CSS
(calc)
Positionnement colonnes, tailles fluides et
media queries
Disposition adaptative des grilles CSS
(grid-template-areas)
VIII. Compatibilité des navigateurs avec HTML5/CSS3
Etat des lieux
La détection des capacités des navigateurs
Recommandations
VIIII. Les outils et les méthodes du développeur WEB
Quels outils pour développer et debugguer ?
Les outils pour améliorer la productivité et la rapidité de codage
Les outils d’une bonne veille technique
Les méthodes de codage moderne pour un code maintenable
Les tendances à venir
3
XMLHttpRequest 2
Fichiers joints et
progression Requêtes
cross-domain
IX. Historique et navigation
AJAX avec historique
Navigation par ancres
Communication entre
onglets
Géolocalisation
Obtenir et suivre la position de l’utilisateur
X. Images : canvas et SVG
Images vectorielles
Création dynamique d’images en JavaScript.
2ème Partie: Back end
Unité de formation : les Bases fondamentaux du développement Back End.
Les développeurs backend construisent et maintiennent cette technologie. Les utilisateurs ne sont
peut-être même pas conscients du travail du développeur backend, mais sans lui, le site web ou
l’application ne fonctionnera pas.
Objectifs général.
Objectifs pédagogiques :
Utiliser les technologies utilisées pour mettre en œuvre un serveur Web compatible Java EE.
Développer sur ce serveur pour fournir les différentes pages web de votre application.
Gérer l’hébergement des micro-services (architecture micro-services) qui permettront d’échanger
les données entre le serveur et la partie « IHM RIA » (Rich Client Application).
Séquence N°1.
I. Présentation de l’architecture Java EE :
a. Qu’est ce qu’un serveur Java EE ?
b. Les différentes implémentations de serveurs Java EE.
c. Les API proposées par la plate forme Java EE.
d. Les liens entre les différentes API Installation d’un
serveur Java EE.
II. Mise en oeuvre de pages Web dynamiques via l’API Servlet :
a. Rappels sur le protocole HTTP Introduction
au modèle de servlets Le cycle de vie des
servlets Gestion des paramètres HTTP
Gestion de la session HTTP
5
b. Paramètres d’initialisations et configuration de l’application
Outillage proposés par Eclipse
c. Cas ou les servlet sont utiles (génération de PDF, export de données Excel, …)
Séquence N°2.
I. Mise en œuvre de pages Web dynamiques via l’API JSP :
a. Comparatif JSP/Servlet Présentation de
l’API des servlet.
b. Présentation de l’API EL : Expression Language.
c. Mise en oeuvre d’un pattern MVC avec les servlets/JSP
Définition d’une librairie de tags JSP.
d. Présentation de l’API JSTL : Java Standard Tag Library.
II. Mise en œuvre de pages Web dynamiques via l’API JSF :
a. introduction au modèle JSF : Java Server Faces Le
MVC, façon JSF.
b. Gestion des événements JSF.
c. Utilisation de templates JSP (modèles de pages).
Séquence N°3.
I. Architecture Micro-Services Web SOAP :
a. Qu’est-ce qu’une architecture Micro-Services ? Qu’est-
ce qu’un service Web.
b. L’approche Services Web SOAP/XML L’approche
Services Web RESTful/JSON.
c. Comparatifs entre les modèles SOAP/XML et RESTful/JSON Les
API Java associées : JAX-WS et JAX-RS.
II. Mise en œuvre de Services Web SOAP :
a. Présentation de l’API JAX-WS.
b. Configuration de l’API JAX-WS dans l’application Web Mise en
oeuvre d’un Service Web SOAP.
c. Génération d’un WSDL : Web Service Description Language Génération
des proxies clients.
d. Mise en oeuvre d’un client SOAP.
e. Echange de données binaires avec MTOM Sécurisation d’un
Service Web SOAP.
III. Mise en œuvre de Services Web RESTful/JSON :
a. Présentation de l’API JAX-RS et ses liens avec HTTP.
b. Configuration de l’API JAX-RS dans l’application Web.
c. Le protocol JSON : JavaScript Object Notation.
d. Mise en oeuvre d’un Service Web RESTful/JSON.
e. Choix du protocol d’échange de données : TextPlain, XML, JSON.
f. Gestion des collections.
g. Sécurisation d’un Service Web RESTful/JSON.