Description

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 oeuvre 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.

À qui s'adresse cette formation ?

Pour qui ?

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.

Les objectifs de la formation

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

Programme de la 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 : , , ,

    .

  • 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
  • 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, 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.