Evolution MM

Formations à l'informatique
Découvrez la différence ENI

Lien accueil

ENI Service est partenaire du DevFest Nantes 2019.

Rendez-vous les 21 et 22 octobre prochains pour un festival très rock !

Rechercher
Rechercher une formation
 

ITLO - Développement d’applications Web Front End (HTML, CSS, Responsive Web Design, Bootstrap, JavaScript et jQuery)

Formation en e-learning tutoré éligible au CPF

Le développement Web Front End correspond aux éléments d'une application Web (HTML, CSS et JavaScript) qu'un utilisateur peut voir et avec lesquels il peut interagir directement.

Cette formation prépare à la Certification IT ENI " Développement de sites Web avec le langage de balises HTML et les feuilles de styles CSS - HTML5 et CSS3 ".

Modalité et moyens pédagogiques, techniques et d'encadrement :

  • Formation accessible à distance pendant 3 mois, de n'importe où et n'importe quand, via un ordinateur type PC disposant d'une connexion à Internet à haut débit (ADSL ou plus).
  • En fonction du profil de l'apprenant et de ses objectifs (notamment s'il souhaite valider sa formation par le passage d'un examen de certification), la durée de la formation peut varier de 35 à 70 heures.
  • Le portail de formation, donne accès :
    • Aux vidéos de la formation, organisées en modules et en séquences découpées le plus finement possible, en suivant le programme pédagogique détaillé ;
    • Au téléchargement de ressources pédagogiques au format PDF, telles que : les supports de cours, les énoncés et corrigés des travaux pratiques ;
    • A des quiz de validation des connaissances acquises sous forme de QCM ;
    • A une plateforme de travaux pratiques en ligne, contenant l'environnement technique nécessaire à la réalisation de l'ensemble des travaux pratiques ;
    • A un ou plusieurs livres numériques des Editions ENI faisant office d'ouvrage(s) de référence sur le thème de la formation.
  • Pendant toute la durée de la formation, l'apprenant dispose d'une assistance technique et pédagogique illimitée, par e-mail, avec un délai de prise en compte et de traitement qui n'excède pas 24h. En complément, l'apprenant peut planifier jusqu'à deux rendez-vous pédagogiques avec un formateur expert afin d'échanger sur des éléments de la formations, ou bien pour avoir des informations spécifiques concernant la préparation et le contenu de l'examen de certification.

Modalités d'évaluation des acquis :

  • L'apprenant évalue ses acquis tout au long de la formation au travers des différents travaux pratiques qu'il doit réaliser, et en répondant aux questions à choix multiples des différents quiz.
  • En complément, pour les apprenants qui le souhaitent, certaines formations peuvent être validées officiellement par un examen de certification. Pour les formations concernées, l'examen est mentionné dans la zone " Commentaire " du programme de formation. La formation et les ressources pédagogiques mises à disposition préparent au passage de l'examen, mais ne dispensent pas le candidat d'un travail de préparation important et minutieux afin de garantir la réussite à l'examen.

Moyens de suivi d'exécution et appréciation des résultats :

  • Attestation de suivi de formation faisant office de feuille de présence ;
  • Afin de valider l'assiduité de l'apprenant lors de sa formation, nous pouvons extraire les dates et temps de connexion au portail de formation (contenu théorique de la formation) ainsi qu'à la plateforme de travaux pratiques (contenu pratique de la formation) ;
  • Evaluation qualitative de fin de formation, qui est ensuite analysée par notre équipe pédagogique ;
  • Attestation de fin de formation, remise à l'apprenant par e-mail.

Qualification du formateur :

  • Les vidéos de formation sont animées par un formateur, expert de l'informatique et de la pédagogie, dont les compétences techniques et pédagogiques ont été validées par l'obtention de certifications auprès des Editeurs. Il est en veille technologique permanente et possède plusieurs années d'expérience sur les produits, technologies et méthodes enseignés.

Public :

  • Développeurs qui souhaitent acquérir les bonnes bases et les bonnes pratiques pour développer une application Web Front End.

Objectifs :

  • Comprendre l'architecture Web (client, serveur, protocole HTTP) ;
  • Savoir structurer une page Web ;
  • Connaître les principales balises HTML et savoir les utiliser pour construire une page Web ;
  • Comprendre le mécanisme de fonctionnement d'un formulaire et savoir en construire un ;
  • Utiliser les balises audio et vidéo pour intégrer des éléments multimédia ;
  • Comprendre et mettre les feuilles de style CSS ;
  • Exploiter les CSS pour créer des pages Web Responsives ;
  • Appliquer les Media Queries ;
  • Comprendre les framework CSS et mettre en œuvre Bootstrap ;
  • Comprendre les bases de la programmation côté client en utilisant le langage JavaScript ;
  • Appliquer les concepts de la programmation orientée objet avec le langage JavaScript ;
  • Mettre en œuvre le framework jQuery ;
  • Appliquer les meilleurs pratiques pour bien écrire des pages Web.

Pré-requis :

  • Avoir suivi la formation " T-ITLO-004 - Algorithmique : Raisonner avant de concevoir ", ou posséder les connaissances et compétences équivalentes.

Contenu pédagogique

Le Web et le client léger

  • C'est quoi le Web ?
  • Comprendre les expressions du Web
  • Le W3C
  • Historique et usage d'Internet en France
  • Différence entre page Web statique et dynamique
  • Rôle du client et du serveur
  • Définition des principaux éléments d'un site Web
  • Quelques chiffres Internet
  • Premier site Web
  • Dates clés du Web
  • Protocole HTTP
  • Clients légers : navigateurs et moteurs de rendu
  • Quelques chiffres sur les navigateurs
  • Avantages et inconvénients du client léger
  • Choix des navigateurs
  • Démonstrations :
    • Installation des outils pour les navigateurs
    • Installation d'un outil de développement
  • Quiz - QCM de validation des acquis

Les balises HTML

  • Maquetter une page
  • L'historique d'HTML
  • Les balises, attributs et règles d'HTML
  • Les premières balises
  • Les éléments HTML4 obsolètes
  • Doctype : simplification HTML5
  • La balise html
  • La balise head
  • La balise title
  • La balise meta
  • L'encodage des caractères
  • La balise body
  • Placer du texte sur une page HTML
  • Les commentaires
  • Les liens
  • La validation du code HTML
  • La mise en page à l'aide d'éléments conteneurs
  • Les images
  • Les couleurs
  • Les nouveautés HTML5
  • La balise header
  • La balise nav
  • La balise section
  • La balise aside
  • La balise article
  • La balise footer
  • Les avantages des nouvelles balises
  • Les nouvelles balises sémantiques
  • Les nouveaux attributs
  • Tester la compatibilité des balises suivant le navigateur
  • Bien coder
  • Démonstrations :
    • Maquetter une page
    • Les principales balises HTML
  • Travaux pratiques :
    • Zoning
    • Biographie
  • Quiz - QCM de validation des acquis

Les formulaires HTML

  • Introduction
  • Zones de saisie basiques
  • Méthode GET ou POST
  • Améliorer la saisie
  • Principales balises du formulaire
  • Valider un formulaire
  • Attributs de la liste déroulante
  • Attributs globaux HTML
  • Evénements de la fenêtre
  • Evénements du formulaire
  • Evénements du clavier
  • Evénement de la souris
  • Evénements liés au presse-papiers
  • Evénements des médias
  • Evénements divers
  • Démonstration : Formulaire HTML
  • Travaux pratiques : Créer un formulaire HTML
  • Quiz - QCM de validation des acquis

Les balises multimédia

  • La balise audio
  • Le format mp3
  • Le format Ogg Vorbis
  • Le format Wav
  • Le format AAC
  • La compatibilité des formats audio
  • La balise video
  • Le format H.264 MPEG-4
  • Le format OGG
  • Le format H.265 MPEG-4
  • Le format WebM
  • La compatibilité des formats vidéo
  • Démonstrations :
    • La balise audio
    • La balise video
  • Quiz - QCM de validation des acquis

Les feuilles de style CSS

  • Définition
  • Les règles de base
  • Les sélecteurs
  • Les modes de sélection
  • Cascade et héritage des propriétés
  • Le positionnement des éléments
  • La typographie et le texte
  • Les Web fonts
  • Les listes
  • Les arrière-plans
  • Les liens hypertextes et les pseudo-éléments
  • Les propriétés des boîtes
  • Les tableaux
  • Les bordures
  • La mise en page
  • La version CSS3
  • Les bords arrondis (CSS3)
  • Les ombres (CSS3)
  • La gestion du texte (CSS3)
  • Les arrière-plans multiples (CSS3)
  • Les dégradés de couleurs (CSS3)
  • Les transformations (CSS3)
  • Les transitions (CSS3)
  • Les animations (CSS3)
  • Les transformations 3D (CSS3)
  • Démonstrations :
    • Intégrer des Web fonts avec Font Squirrel
    • Intégrer des Web fonts avec Google Font Web
  • Travaux pratiques :
    • Biographie avec les balises CSS
    • Mettre en forme un formulaire HTML
  • Quiz - QCM de validation des acquis

Le Responsive Web Design (Media Queries)

  • Problématique et principes du Web adaptatif
  • Mise en page adaptative
  • Principes du Responsive Web Design
  • Media Queries
  • Démonstrations :
    • Affichage et résolution d'écran
    • Les outils du navigateur pour les développeurs
  • Quiz - QCM de validation des acquis

Un framework CSS : Bootstrap

  • Utilité et définition d'un framework
  • Présentation de Bootstrap
  • Fonctionnement de Bootstrap
  • Points forts de Bootstrap
  • Le fichier normalize.css
  • Evolutions de Bootstrap
  • Le conteneur
  • Dossiers d'installation de Bootstrap
  • Installation de Bootstrap
  • Minification des fichiers
  • Utilisation de Bootstrap
  • Eléments Bootstrap
  • Compatibilité avec les navigateurs
  • Scripts JavaScript à ajouter
  • Le code Bootstrap en résumé
  • Présentation du système de grille
  • Optimisation du système de grille
  • Penser Mobile First
  • Thèmes et documentations Bootstrap
  • Présentation des éléments
  • Eléments de la catégorie CSS
  • Eléments de la catégorie Composant
  • Eléments de la catégorie JavaScript
  • Amélioration des interfaces
  • Les fenêtres modales
  • Personnalisation de Bootstrap
  • Jumbotron
  • Démonstrations :
    • Installation de Bootstrap
    • Système de grille
    • Offset Bootstrap
    • Personnaliser Bootstrap avec les CSS
  • Travaux pratiques : Application My Music
  • Quiz - QCM de validation des acquis

Le langage JavaScript

  • Historique
  • Les bases du langage JavaScript
  • Les tableaux
  • La commande console
  • Les opérateurs
  • Les différents tests d'égalité
  • Les fonctions
  • Les événements
  • La programmation orientée objet
  • La création d'une classe
  • La mise en œuvre de l'héritage
  • Démonstrations :
    • La console JavaScript
    • Modification du DOM
  • Travaux pratiques :
    • Le jeu du pendu
    • Fonctionnalités JavaScript sur l'application My Music
  • Quiz - QCM de validation des acquis

Le framework jQuery

  • Présentation de jQuery
  • Ecosystème jQuery
  • Fonction jQuery
  • Installation de jQuery
  • La méthode ready
  • Les différents modes de sélection
  • Modifier le DOM
  • Evénements
  • Démonstration : Utilisation de jQuery
  • Travaux pratiques : Fonctionnalités jQuery sur l'application My Music
  • Quiz - QCM de validation des acquis

Conseils pour bien coder

  • Respecter le Doctype HTML 5
  • Fermer les balises
  • Indiquer l'URL canonique
  • Définir le cache
  • Définir les emplacements pour le JavaScript
  • Respecter la sémantique
  • Respecter la hiérarchie des titres
  • Influencer le référencement
  • Bien choisir le texte d'un lien
  • Utiliser l'attribut nofollow
  • Mettre un attribut alt à chaque balise d'image
  • Préciser la taille des images
  • Utiliser la balise time
  • Limiter le nombre de balises div
  • Préférer les feuilles de style CSS aux attributs style
  • Utiliser l'attribut id
  • Limiter et combiner les fichiers du même type
  • Limiter le nombre de connexions à d'autres domaines
  • Assurer la compatibilité avec Internet Explorer
  • Tester le rendu final