Formation Cycle certifiant Développeur d'applications Front-End

Les technologies du Web

• La structure composite d'un document HTML : images, CSS, JavaScript...
• Le modèle de document (DOM).
• Le protocole HTTP.
• Interaction client/serveur HTTP.
• Interprétation du HTML par le navigateur.

Les balises HTML 5

• Les éléments traditionnels structurant un document HTML (doctype, html, head, body, meta).
• Les éléments structurants HTML 5 (nav, section, article, aside, header, footer).
• Les catégories de contenus (Metadata content, Flow content, Sectioning content...).
• Les nouvelles balises : <mark>, <meter>, <time>, <figure>...
• Les microformats. Présentation et avantages sur le référencement.
• Les nouveaux champs de formulaires : range, autofocus, placeholder...
• Gestion vidéo et audio avec les nouvelles balises <audio> et <video>.
• Les images SVG pour le dessin vectoriel.
• Les canevas pour le dessin "bitmap".

Travaux pratiques
Mise en place et validation de la structure d'un document HTML 5. Création de templates HTML 5. Réalisation d'un lecteur multimédia.

Les sélecteurs CSS 3

• Rappel sur la syntaxe : les sélecteurs, les règles.
• Sélecteurs de répétition, de cible, d'enfant unique et de frère antérieur.
• Media Queries pour le chargement conditionnel des CSS selon la résolution ou l'orientation du terminal.
• Les couleurs. Les modèles hsl et hsla. La propriété opacity.
• La mise en forme du texte. Gestion des débordements. Gestion des enchaînements.
• Les modes multicolonnes avec column-count, column-width...
• La mise en forme des boîtes. Les ombres. Les coins arrondis.
• La mise en forme des fonds. Les gradients de fond. Les fonds ajustés aux conteneurs.
• Les transformations : translations, rotations, homothéties.
• Les animations : les animations, les transitions.

Travaux pratiques
Application de couleurs. Mise en forme de textes. Appliquer des ombres et des arrondis. Animations et effets de transition.

Les aspects avancés du langage JavaScript

• Les nouveautés principales d'ES6/2015
• Les superset JavaScript : TypeScript, Babel, Traceur.
• Fonctionnement et intégration du Framework jQuery.
• jQuery pour des échanges Ajax et la gestion des formulaires.
• JavaScript et la Programmation Orientée Objet.
• Méthodes. Héritage. Portée des données privées et publiques. Mapping et sérialisation.
• Structure et syntaxe d'une expression régulière.
• Maîtrise de l'environnement de débogage.
• Solution de stockage embarquée de données : SQLite, LocalStorage, Cookies.
• Appréhender la notion de JavaScript côté serveur avec Node.js
• Programmation JavaScript sous HTML5.

Travaux pratiques
Créer un Plug-in jQuery. Mise en pratique de la POO. Optimisation des performances avec les ChromeDevtools. Appel de services Web. Utiliser une base embarquée. Manipulation des API JavaScript HTML5.

Le Framework AngularJS

• Fonctionnalités et principes généraux.
• Directives AngularsJS, compilateur HTML.
• Expressions. Data-Binding bidirectionnel. Filtres.
• Création et utilisation des contrôleurs. Gestion du contexte, la variable $scope.
• Propagation des événements. API. Dirty Checking.
• Principe de l'injection de dépendance.
• Notion de module. Configuration.
• Définition des routes : Routing. API ($routeProvider). Le " deep linking ".
• Fonctionnalité de données, Echange Serveur.
• Utilitaires de test : Jasmine. Angular-scenario. Test : contrôleurs, services... Utilisation avec Karma.

Travaux pratiques
Préparation d'une maquette HTML pour développer avec AngularJS. Modularisation de l'application. Création d'une " Single Page Application ".

Le Responsive Web Design

• Types de terminaux (mobile, tablette...) et leur résolution. Périphériques, OS, navigateurs.
• Démarche de conception : concept de Marcotte, Mobile First.
• Adaptation des CSS aux caractéristiques du terminal. Les MediaQueries.
• Principe de grille flexible, fluide. Points de rupture. Principe des box, layout avec CSS3.
• Contenu Responsive : rupture texte, multicolonnes. Césure et découpe.
• Les Frameworks et librairies Responsives (BootStrap, Flexbox, Less...).

Travaux pratiques
Construction de CSS selon les modes portrait/paysage, résolution du terminal. Construire une ergonomie basée sur une grille flexible.

Industrialisation du Front-End

• Composants d'une application Web, le "SuperSet JavaScript".
• Choisir l'environnement de développement (SublimeText, Eclipse, Cloud 9...).
• "Versionner" avec GIT. Organiser les branches de développement.
• Node.js comme utilitaire de développement. Le Node Package Manager et Bower.
• Automatisation des tâches avec GRUNT.
• Intégration des tests automatisés. Utilitaires de test : Jasmine, Mocha...
• Créer un template de projet. Quels utilitaires : Yeoman, Lineman ?

Travaux pratiques
Personnaliser l'IDE SublimeText. Mise en place d'un processus de développement en branches. Créer un module pour configurer les dépendances du projet. Tests unitaires avec Jasmine. Automatisation avec Karma.

Présentation des épreuves

• Présentation du déroulé des épreuves (timing, documents autorisés, etc.).
• Questions de la salle.

Questionnaire à choix multiples

• Questions ouvertes et fermées sur les connaissances essentielles des technologies et outils du Web.

Travaux pratiques

• Développement d'une application Front-End dans le respect des techniques et des règles apprises.

Entretien individuel avec l'examinateur

• Lever les éventuelles ambiguïtés liées au QCM pour récupérer des points perdus faute de temps ou d'attention.
• Explication des choix faits concernant le TP.