Accueil > Technologies WEB > Cycle Développeur d’Applications Front-End
Formation #TWC152

Formation Cycle Développeur d’Applications Front-End

Durée : 12 jours

Code : TWC152


Prochaines dates programmées :

Du 03 au 18 Juin 2024

Du 16 Sept. au 01 Oct. 2024

Du 16 au 31 Déc. 2024

Fin d'Inscription :
Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.
Si vous avez un besoin URGENT et que vous souhaitez une date de formation plus proche que les sessions programmées (minimum 15 à 20 jours ouvrés à date de votre demande)

Objectifs

  • Concevoir et créer des applications Web modernes et dynamiques en HTML 5 et CSS 3
  • Mettre en pratique les concepts objets en JavaScript et les concepts fonctionnels
  • Manipuler les API JavaScript HTML5
  • Comprendre les principes de AngularJS
  • Etre capable de concevoir et de développer des interfaces Web pour tous types de terminaux
Programme

Partie 1 : Introduction

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

Partie 2 : HTML 5

1/ Structure d'une page
  • Les éléments traditionnels structurant un document HTML (doctype, html, head, body, meta...)
  • Les éléments de structure <nav>, <section>, <article>, <aside>, <header> et <footer>
  • Simplification avec HTML 5
  • Les éléments et leur placement
  • Vue d’ensemble des balises HTML
  • Les catégories de contenus : Metadata, Flow, Sectioning, Heading, Phrasing, Embedded et Interactive content
  • Intérêt des balises structurantes pour le référencement
  • Imbrication et type de contenu
2/ Balises structurantes
  • Blocs div et span
  • Listes
  • Tableaux
  • iFrames
3/ Les nouvelles balises HTML
  • Les balises et attributs obsolètes
  • Les balises : <mark>, <meter>, <time>, <figure>, <picture>...
  • Les extensions de balises HTML existantes
  • Les attributs : a, fieldset, iframe, area, button...
  • Les microformats. Présentation et avantages sur le référencement
  • Les nouveaux champs et attributs de formulaires : range, autofocus, placeholder, menu...
  • Les dessins : Canvas versus SVG
  • Les formats multimédias. Codecs et API Multimédia
  • Gestion vidéo et audio avec les nouvelles balises <audio> et <video> HTML5
4/ 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

Partie 3 : CSS 3

1/ 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
2/ 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.)
3/ 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
4/ Animations et transformations
  • Transformations de base (rotation, translation, etc.)
  • Transformations 3D (perspective)
  • Transitions : changement progressif d'un style
  • Animations autonomes
5/ CSS Grid
  • Limites des tableaux 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
6/ Responsive design (adaptation mobiles / tablettes)
  • Problèmes techniques posés par l’hétérogénéité (PC, téléphone, tablette)
  • Solutions apportées par le Responsive Design
  • 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

Partie 4 : Les aspects avancés du langage JavaScript

1/ Vue d’ensemble de JavaScript
  • La portée des données
  • Les différents types de fonction (anonymes, immédiates, internes)
  • Les fonctions anonymes
  • Les fonctions callback
  • Les fonctions immédiates
  • Les fonctions internes
  • Rappel sur les scopes
  • Les closures
  • Le débogage avec les meilleurs outils actuels
2/ JavaScript Avancé
  • 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
  • Orienté 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
3/ Le Framework AngularJS
  • Les grands principes d'AngularJS
  • Directives AngularsJS, compilateur HTML
  • Expressions. Data-Binding bidirectionnel. Filtres
  • Modèle, vues et contrôleurs
  • Propagation des événements. API. Dirty Checking
  • Module et injection de dépendance
  • Le routage
  • L'accès au serveur
  • Tester une application Angular : Karma, Jasmine. Protractor
4/ Le Responsive Web Design
  • Les écrans : Taille, Résolution
  • Démarche de conception : concept de Marcotte, Mobile First
  • Les tailles des devices mobiles
  • Les Media Queries
  • Principe de grille flexible, fluide
  • Contenu Responsive : rupture texte, multicolonnes. Césure et découpe
  • Framework et librairies responsive
5/ 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 ?
Approche Pédagogique

Approche Pédagogique

  • Pédagogie très opérationnelle fondée sur l'alternance entre théorie et pratique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
Public Cible

Personnes Visées

  • Développeurs
  • Chefs de projet Web
Dates

Dates

  • Du 03 au 18 Juin 2024
  • Du 16 Sept. au 01 Oct. 2024
  • Du 16 au 31 Déc. 2024
  • Fin d'Inscription :
    Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.