Nos domaines de formation :

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

Cycle Certifiant
Nouveau
Durée : 16 jours
Réf : KFE
Prix  2018 : 6930 € H.T.
Remises non applicables
Pauses et déjeuners offerts
  • Programme
  • Composition
  • Participants / Prérequis
  • Intra / sur-mesure
Programme

Responsable de l'ergonomie visuelle et de l'ergonomie fonctionnelle d'un site Web, le développeur d'applications Front-End doit posséder à la fois des compétences en Web Design et en développement. Ce cycle vous apportera toutes les compétences en HTML 5, CSS 3 et JavaScript nécessaires au développement de sites responsives. Vous gagnerez en efficacité lors de vos développements par la mise en œuvre d'AngularJS, la référence des infrastructures JavaScript côté client. Vous découvrirez également les outils qui vous permettront d'industrialiser vos développements.

Objectifs pédagogiques

  • Concevoir et développer des applications Web modernes et dynamiques en HTML 5 et CSS 3
  • Rendre Responsive Design les pages Web d'un site
  • Intégrer les aspects avancés du langage JavaScript dans le développement d'applications riches
  • Gérer des échanges asynchrones Ajax
  • Développer des applications Web performantes avec AngularJS
  • Optimiser les temps de développement par la maîtrise des utilitaires modernes

Méthodes pédagogiques

Le socle des apprentissages en conception de pages Web est fondamental pour l'acquisition des connaissances de ce cycle. Le stage correspondant, réf HCS, doit être le premier stage du cycle, suivi du stage JPG. Les cours RPO, FAN et JVS peuvent-être ensuite suivis dans un ordre quelconque.
PROGRAMME DE FORMATION

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.


Journée de certification

Cette journée est destinée à valider les connaissances acquises au cours du cycle certifiant " Développeur d'applications Front-End ". Les compétences validées portent sur les technologies HTML 5, CSS 3 et JavaScript nécessaires au développement de sites Responsive, la mise en œuvre d'AngularJS et les outils du Front.

Certification

Dans le cadre de cette journée, les participants auront à répondre à un QCM, à réaliser des travaux pratiques et passer un entretien individuel avec l'examinateur.
PROGRAMME DE FORMATION

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.
Composition
Participants / Prérequis

» Participants

Développeurs et Chefs de projet Web.

» Prérequis

Connaître les principes de l'Internet et des bases en développement. La pratique d'un langage de programmation sera un plus.
Intra / sur-mesure
Programme standard     Programme sur-mesure
Oui / Non

Vos coordonnées

Dates de sessions

Pour vous inscrire, cliquez sur la session qui vous intéresse.
[-]
PARIS

Horaires

Les cours ont lieu de 9h à 12h30 et de 14h à 17h30.
Les participants sont accueillis à partir de 8h45.
Pour les stages pratiques de 4 ou 5 jours, les sessions se terminent à 15h30 le dernier jour.
Formations conseillées
Filières métiers
Thème associé