ENI SERVICE

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

Par ENI SERVICE

Objectifs

  • Identifier et décrire les éléments d'une architecture Web (client, serveur, protocole HTTP) ;
  • Structurer une page Web ;
  • Utiliser les principales balises HTML pour construire une page Web ;
  • Créer un formulaire HTML ;
  • Intégrer des éléments multimédia ;
  • Modifier l'apparence des pages avec des feuilles de styles CSS ;
  • Adapter la présentation des pages aux contraintes matérielles (Responsive Web Design) ;
  • Intégrer des composants du framework CSS Bootstrap ;
  • Écrire du code client en JavaScript pour implémenter des interactions utilisateur ;
  • Appliquer les concepts de la programmation orientée objet avec le langage JavaScript ;
  • Mettre en œuvre le framework jQuery.

Programme

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

Pédagogie

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

Pendant toute la durée de la formation, le stagiaire 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, le stagiaire peut planifier jusqu’à deux rendez-vous pédagogiques avec un formateur expert afin d’échanger sur des éléments de la formation.

La durée de la formation affichée sur cette page est une durée estimée qui peut varier en fonction du profil du stagiaire et de ses objectifs (notamment s’il souhaite valider sa formation par le passage d’un examen de certification).

Le portail de formation, donne accès à un ou des parcours de formation composés :

  • Des 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é sur cette page ;
  • Des fiches démonstrations permettant au stagiaire de retrouver le fil d’une démonstration à dérouler pour s’entraîner ;
  • Des énoncés et corrigés de travaux pratiques à réaliser tout au long de la formation ;
  • D’une plateforme de travaux pratiques en ligne, contenant l’environnement technique nécessaire à la réalisation de l’ensemble des travaux pratiques ;
  • Des quiz de validation des connaissances acquises ;
  • D’un ou plusieurs livres numériques faisant office d’ouvrage(s) de référence sur le thème de la formation.

L’évaluation des acquis se fait tout au long de la formation au travers des différents travaux pratiques réalisés par le stagiaire.

En complément, pour les stagiaires qui le souhaitent, certaines formations peuvent être validées officiellement par l’éditeur en passant un examen de certification. Pour les formations concernées, l’examen est mentionné dans la zone « Certification » du programme de formation.

Les candidats à la certification doivent produire un travail personnel important en vue de se présenter au passage de l’examen, le seul suivi de la formation ne constitue pas un élément suffisant pour garantir un bon résultat et/ou l’obtention de la certification.

  • Évaluation qualitative de fin de formation, qui est ensuite analysée par l’équipe pédagogique ENI.
  • Attestation de suivi de formation remise au stagiaire par courrier électronique.
  • A la demande, certificat de réalisation.

La formation a été conçue et enregistrée par Denis SANCHEZ. Denis est formateur chez ENI École Informatique depuis 2014, au sein du pôle études et développements. Il a travaillé pour diverses sociétés dans des ESNs, des éditeurs de logiciels, des startups, en tant que développeurs puis chef de projet. Il a œuvré dans le secteur bancaire pour le crédit agricole et la société générale, et a participé à la réalisation de l’ERP de Brittany Ferries, à la refonte du système d’information des écoles centrales. Denis a aussi travaillé dans le secteur public pour différents ministères et a développé de nombreux sites web et e-commerce. Ses langages de prédilections sont le Java et le PHP.

Curieux et passionné par l’informatique, le développement d’application et de sites webs, son objectif à travers ce cours est de transmettre les bonnes bases et bonnes pratiques pour développer un site sur le web ou un intranet.

Formations de la même catégories (5)

IB Formation
Ergonomie et UX design d'interfaces graphiques pour appareils tactilesPar IB Formation

Si le marché des ventes de PC s’essouffle, celui des tablettes et smartphones continue d’afficher de bonnes performances. C’est dire l’engouement du grand public pour ces appareils. Face à ce phénomène, les entreprises "commerciales" se doivent de réagir et de proposer, comme il y a quelques années sur Internet, des applications (Apps) ou des sites web adaptés à ces appareils. Mais la diversité des tailles d’écrans comme la nécessité de proposer une navigation "tactile" très intuitive impose une sérieuse réflexion quant au design et à l’ergonomie de ce type d’interfaces. A l’issue de cette formation, les participants disposeront des connaissances et compétences qui leur permettront de réaliser des applications web ou des sites web conviviaux pour tous les utilisateurs (web et mobiles).

Orsys
Analyse et ergonomie des IHM logiciellesPar Orsys

Cette formation vous présentera les principes de l'ergonomie des IHM et vous fera découvrir les bonnes pratiques pour concevoir et améliorer leur design.

Global Knowledge
Hyperledger : développer sur Hyperledger Fabric v1.1Par Global Knowledge

Découvrez les besoins en applications Blockchain, ainsi que Hyperledger Fabric, le framework open source pour le développement d'applications et de solutions Blockchain à architecture modulaire. Ce cours vous présentera l'outil Hyperledger Composer, qui vous aide à créer des applications Hyperledger Fabric grâce à des travaux pratiques complets.

Ce cours est enseigné par des experts de premier plan, qui vous guideront à travers les sujets de présentation et ceux plus approfondis, tels que les étapes pour intégrer / développer une application avec Hyperledger Fabric v1.1.