Présentation
Après avoir découvert les langages HTML et CSS permettant de réaliser notamment des sites web, cette formation vous propose de perfectionner vos connaissances dans ces deux langages.
Depuis dix ans, la proportion de visiteurs de sites web entre leur smartphone et un ordinateur a complètement changé. Selon StatCounter, 6% des visiteurs de sites web utilisaient leur mobile en 2011, alors qu’ils sont 60% en 2022. Depuis 2017, votre site web est probablement plus vu sur mobile que sur un écran d’ordinateur. La création d’un design s’adaptant à toutes les résolutions d’écran, appelé aussi design adaptatif (responsive design) est une nécessité tant pour éviter un écueil en termes d’images que pour augmenter son audience.
Parallèlement, les technologies du web permettent aujourd’hui des merveilles en animation, autorisant les plus créatifs/créatives à réaliser des logos animés, des animations ou des effets de transition pour rendre le web plus agréable à visiter chaque jour.
Au cours de cette formation, vous perfectionnerez vos compétences en programmation web front-end avec de nouvelles notions en HTML et en CSS. Ces nouveaux outils vous permettront de réaliser un design adaptatif à tout écran, et d’intégrer dans votre site des animations et des transitions fluides et compatibles avec tous les navigateurs.
Objectifs de la formation
- Savoir utiliser les transitions et les animations
- Comprendre les contraintes d’expérience utilisateur selon le terminal
- Savoir penser la structure HTML d’un site adaptatif
- Savoir créer des feuilles de style d’un style adaptatif
Public
- Toute personne souhaitant améliorer ses compétences en développement web front-end.
Prérequis
- Une connaissance de HTML et CSS est nécessaire
Programme
1- Les transitions
Qu’est-ce qu’une transition ?
Cible de la transition
Propriétés compatibles
Configuration et fonctions de progression
2- Animations
Différences avec les transitions
Déclarer des séquences (keyframes)
La propriété animation
Contrôle du déroulé de l’animation
Répétitions des animations
État de sortie d’une animation
3- Penser son design adaptatif (responsive design)
Les contraintes d’expérience utilisateur selon les terminaux
Bonnes pratiques de l’affichage mobile
L’approche mobile-first : comment et pourquoi ?
4- Design adaptatif : HTML
Prévoir sa structure vis-à-vis d’une approche responsive
L’attribut viewport de la balise meta
Le comportement des équipements face aux éléments de formulaire
Les attributs srcset et sizes
5- Design adaptatif : CSS
Les media queries
Cibler son terminal : min/max width, min/max height, orientation, aspect-ratio
La mise en page pour l’impression
Notions liées aux breakpoints (points de rupture)
Les fonctions min/max/clamp
Gestion des couleurs liées au thème du terminal
Date de dernière modification : 19/10/2022
Organisation
Modalités d'évaluation :
Questionnaires à choix multiples (QCM) en fin de formation. L'intervenant formulera également une appréciation sur vos acquis pour l'entièreté de la formation.
Moyens pédagogiques :
Formation alternant la théorie et la pratique, avec un intervenant présentant la formation en direct. Possibilité de réaliser cette formation en face-à-face dans nos locaux, dans vos locaux d'entreprise ou à distance via visioconférence.
Une fois terminée, vous disposerez d'une attestation de suivi de la formation, ainsi que des contenus de cours relatifs au contenu présenté.
Informations pratiques :
En cas de dispense dans nos locaux, le matériel informatique est fourni et l'ensemble des commodités sont accessibles. Nos locaux sont également accessibles aux personnes à mobilité réduite : découvrir notre centre.
Retrouvez toutes les informations pratiques pour préparer votre formation sur notre page dédiée : informations pratiques.
Ces formations pourraient vous intéresser
- En savoir plus
HTML5 et CSS3 : animations et responsive design
Après avoir découvert les langages HTML et CSS permettant de réaliser notamment des sites web, cette formation vous propose de perfectionner vos connaissances dans ces deux langages.
Depuis dix ans, la proportion de visiteurs … - En savoir plus
Développement web : APIs navigateur
Le terme « Web 2.0 » a débuté en 2004 pour signifier un changement de paradigme incluant notamment l’interopérabilité des contenus internet : ceux-ci doivent être lus par différents navigateurs, équipements, …
- En savoir plus
Web front : HTML, CSS et JavaScript niveau 2
Vous avez débuté le développement web en utilisant les langages de programmation HTML, CSS et JavaScript. Vous avez réalisé avec succès plusieurs pages ou même des sites entiers, avec des composants comme des listes, des …