Développement d’Interfaces Graphiques avec HTML5, CSS3, JavaScript
Objectifs pédagogiques
- Créer des pages en HTML5 et utiliser les nouvelles balises
- Mettre en page et en forme avec CSS3
- Utiliser les nouvelles API JavaScript
- Gérer la mobilité et maitriser le responsive web design
Public cible
- Développeurs Web
- Chefs de projet Web
Prochaines Sessions
Inscrivez-vous dès maintenant
Besoin urgent ? Demandez une session personnalisée (délai min. 15-20 jours ouvrés)
Devis personnaliséProgramme Détaillé
- Le processus de normalisation : le W3C et le WHATWG
- Vocabulaire autour des projets Web (front end, back end, backoffice, web services, etc.)
- Les métiers (développeur front, back, full, web master, data manager, référencement, etc.)
- Le modèle client/serveur dans le contexte du Web
- Les technologies côté front (HTML, CSS, JavaScript)
- Complémentarité avec les technologies du back office (Java, PHP, ASP.Net, etc.)
- La place des bases SQL dans les architectures Web (architecture n-tiers)
- Ce qui a changé pour le développeur avec l’arrivée du HTML5 et du CSS3 ?
- Protocoles et formats d’échange entre toutes ces briques (HTTP, XML, JSON, WebServices, Ajax, etc.)
- Développer une application Web selon le modèle MVC : définition et explication
- La syntaxe HTML
- Le nouveau Doctype
- Encodage des caractères
- Le support navigateur
- Créer un template de base réutilisable pour tous les projets
- Évolution de l’imbrication des balises : disparition des notions de inline et block
- Les nouvelles balises : header, footer, structure, aside, nav, hgroup, etc
- Les balises obsolètes : center, font, frame, acronym, etc
- Structurer une page avec les nouvelles balises
- Numérotées, à puces, imbriquées
- Les listes de définition
- Cellules de tableau et fusion des cellules
- Gestion de la taille du tableau
- En-tête et légende
- Les bordures
- Les groupes de colonnes et de lignes
- La balise de liens
- Les différents types de liens : vers une autre page, dans une page, vers un site Web, de téléchargement...
- Les Target
- L'attribut titre
- La couleur des liens
- Liens et feuilles de style
- L'insertion d'une image
- L'espace autour d'une image
- L'alignement d'une image
- Couleur et image d'arrière-plan
- L'insertion d'un lien sur une image
- Les images réactives
- Les nouveaux champs de formulaire et leur structure
- Les nouvelles pseudo-class CSS (valid, invalid, checked…)
- Créer un formulaire de contact type
- Accessibilité des éléments dynamique (ARIA)
- La balise video
- La balise audio
- Le ShadowDom
- Les balises object, embed et svg
- Conteneur (MP4, OGG, WEBM) et codec (.h264, Vorbis, Theora, VP8…)
- Inclure une video dans une page et créer une interface de contrôle personnalisée
- La balise canvas
- SVG et ses filtres
- WebGL
- Créer un graphique
- Présentation des feuilles de style
- Pourquoi parle-t-on de cascade ?
- Définition et attributs d'un style
- La problématique du positionnement des éléments
- Normalisation et compatibilité des navigateurs
- Gestion des caractères (web fonts, ombrage, etc.)
- Gestion des couleurs et des effets
- Les apports des nouveautés CSS3 (survol, animation, transition, etc.)
- Zoom sur les transformations et les animations (rotation, redimensionnement, déformation)
- Fonction calc() et propriété box-sizing
- Mise en forme tabulaire et multi-colonnes
- Le modèle de boite flexible
- Les modèles de mise en page CSS
- La mise en page en grille CSS
- Mise en forme d’un modèle de site vitrine
- Les bonnes pratiques du Responsive Web Design
- Adaptabilité des pages et web application
- Frameworks et librairies : iUi, Less, FitVids, Modernizr, Angular2…
- Adaptabilité du contenu et du contenant
- Le viewport
- Créer une page adaptive
- Qu’est-ce qu’une feuille de style LESS ?
- Qu’entend-on par « Mobile First » ?
- Philosophie « responsive » de Bootstrap
- L’intégration de Bootstrap (HTML, CSS, Javascript, frameworks divers)
- Installer et utiliser Bootstrap dans son projet
- La dimension grille (ligne/colonne) de Bootstrap
- Mise en œuvre et tests sur différents équipements (mobile, PC, portable)
- Introduction au langage JavaScript
- Présentation d'exemples
- Les versions de JavaScript
- JavaScript embarqué dans les pages HTML
- Les fondamentaux (variables, types, structures, opérateurs, instructions)
- Manipulation de tableaux
- Fonction (définition, appel, passage d’arguments)
- Programmation objet en JavaScript (méthodes, propriétés)
- Dialogues avec l'utilisateur en JavaScript
- Les pièges classiques en JavaScript
- JavaScript et EcmaScript (vocabulaire : ECMA, EcmaScript, ES?, ES201?)
- Le changement net depuis ES6
- Compatibilité avec les navigateurs et les frameworks
- Arrow function, promise, etc
- Module import
- Les évènements gérés par JavaScript (survol, clic, clavier, etc.)
- Propagation des évènements
- L’objet Event
- Les pop-ups
- Le fonctionnement de l'objet document
- Interactivité, contrôle et transformation des pages HTML
- Manipulation de la page (DOM)
- Manipulation des URL et des redirections
- Sélection d'éléments
- Modification du contenu HTML
- Modification du graphisme CSS
- Gestion des chaînes de caractères à travers l'objet String
- Les principales fonctions mathématiques dans l'objet Math
- Manipulation des dates via l'objet Date
- Manipulation des tableaux via l'objet Array
- Les expressions régulières dans le JavaScript
- Règles de transtypage et comparaisons
- Paramètres obligatoires / facultatifs / indéfinis des fonctions
- Quelques outils pour tester, debugger et mesurer les performances de vos programmes JavaScript
- Rappel des composants d’un formulaire (checkbox, textbox, list, button, etc.)
- Manipulation de l'objet form
- Contrôle des données saisies dans un formulaire
- Le formulaire dynamique
- Liens entre évènements et formulaire (chargement, modification, validation, etc.)
- Validation du formulaire précédent « manuellement » en Javascript
- Pourquoi AJAX (Asynchronous JavaScript And Xml) ?
- Mise en œuvre avec l’objet XMLHttpRequest
- Méthodes de requête http (GET, POST, etc.)
- Récupération de contenus HTML, XML ou JSON
- Géolocalisation
- Glisser / Déposer
- Multi upload
- Historique (pushstate)
- Local Storage
- Web GL
- Web RTC
- Fullscreen
- API branchées mobile
- Détecteur de proximité
- Vibration API
- Utilisation du gyroscope du smartphone
- Accès à la webcam, au micro
- Shadow DOM
- Évolutions attendues
- Limites du JavaScript natif
- Comprendre le rôle des principaux frameworks et les technologies associées : Angular, Vue, React, Node
- Exemples de bases avec Angular
- React, philosophie et principes de fonctionnement
- Les tendances du marché et des projets
Approche pédagogique
Ressources & Actions
✨ Formations Recommandées
Perfectionnez vos compétences avec ces formations complémentaires
Vous trouverez ici les réponses aux questions les plus fréquentes que nous recevons de la part de nos clients. Notre objectif : vous éclairer et vous accompagner au mieux dans le développement des compétences de vos équipes.
Partie 1 : Nos Formations et Notre Approche Pédagogique
Les deux, mais notre véritable valeur ajoutée réside dans le sur-mesure. Nous partons du principe que chaque entreprise a un contexte, une culture et des défis uniques. Notre processus commence toujours par une phase d'écoute et de diagnostic pour co-construire avec vous le programme qui aura le plus d'impact.
Nos formateurs sont des experts seniors dotés d'une double compétence :
- Une expertise métier solide : Ils ont tous une expérience significative en entreprise au Maroc et comprennent les réalités du terrain.
- Une expertise pédagogique confirmée : Ils sont formés aux techniques d'animation pour adultes, favorisant l'interactivité et la pratique.
Nous nous adaptons à vos contraintes et objectifs avec plusieurs formats :
- Présentiel Intra-entreprise : Chez vous, pour une immersion totale.
- Présentiel Inter-entreprises : Pour favoriser le partage d'expériences.
- Distanciel : Des sessions live, interactives et dynamiques.
Partie 2 : Financement et Aspects Administratifs (Spécificités Marocaines)
Oui, absolument. En tant qu'organisme de formation agréé, nos actions sont éligibles au remboursement via les Contrats Spéciaux de Formation (CSF) gérés par l'OFPPT et les GIAC. C'est un levier essentiel pour optimiser votre budget formation.
Oui, c'est un service clé que nous proposons. Nous vous accompagnons de A à Z dans le montage de votre dossier d'ingénierie financière. Notre expertise du système marocain vous garantit la constitution d'un dossier conforme et le suivi jusqu'au remboursement, transformant cette contrainte administrative en une simple formalité pour vous.
Nos tarifs sont transparents et dépendent de la durée, du niveau de personnalisation, du nombre de participants et du format. Le meilleur moyen d'avoir une idée précise est de nous demander un devis personnalisé et gratuit, qui sera accompagné d'une proposition pédagogique détaillée.
Partie 3 : Processus, Logistique et Suivi
Notre processus est simple et centré sur vos besoins :
- Prise de Contact & Analyse : Échange pour comprendre vos enjeux.
- Proposition sur-mesure : Envoi d'une proposition pédagogique et financière.
- Validation & Planification : Ajustements et fixation du calendrier.
- Réalisation de la Formation.
- Évaluation & Suivi : Mesure de la satisfaction et bilan complet.
Oui. Notre réseau de formateurs nous permet d'intervenir sur l'ensemble du territoire marocain, que vos locaux soient à Casablanca, Rabat, Tanger, Marrakech, Agadir ou dans toute autre ville du Royaume.
Oui, la formation ne s'arrête pas à la fin de la session. Nous assurons un suivi rigoureux : remise des attestations, envoi d'un rapport de synthèse, et mise en place d'une évaluation à froid (quelques semaines après) pour mesurer le transfert des compétences. Des sessions de coaching de suivi sont également possibles.
Partie 4 : Impact et Retour sur Investissement (ROI)
Nous utilisons une approche à plusieurs niveaux (inspirée du modèle de Kirkpatrick) :
- Niveau 1 (Satisfaction) : Évaluation à chaud.
- Niveau 2 (Apprentissage) : Quizz et mises en situation.
- Niveau 3 (Comportement) : Évaluation à froid et entretiens avec les managers.
- Niveau 4 (Résultats) : Analyse de l'impact sur vos indicateurs de performance (KPIs).
Pour trois raisons principales :
- Notre Expertise Locale : Nous sommes des spécialistes du marché marocain et africain, de sa culture et de ses mécanismes administratifs (CSF).
- Notre Approche Sur-Mesure : Nous ne vendons pas de formations, nous construisons des solutions adaptées à votre besoin.
- Notre Engagement sur l'Impact : Nous sommes focalisés sur le retour sur investissement tangible de votre budget formation.
Des questions sur cette formation ?
Notre équipe pédagogique est à votre disposition pour répondre à toutes vos questions et vous accompagner dans votre projet de formation.
La dernière commande pour cette formation a été effectuée il y a 2 jours.
7 personnes regardent actuellement cette page.