Votre contact FuturSkill IT

solutions-fskit@manpowergroup.fr

Conception d'IHM ou d'appli Responsive Design (Maquettage / Performance)

5-067

Formation créée le 13/11/2024. Dernière mise à jour le 06/03/2025.
Version du programme : 1

Type de formation

Formation présentielle

Durée de formation

12 heures (2 jours)

Accessibilité

Oui
Cette formation est gratuite.
S'inscrire
Cette formation est gratuite.
S'inscrire
Cette formation est gratuite.
S'inscrire
Besoin d’adapter cette formation à vos besoins ? N’hésitez pas à nous contacter afin d’obtenir un devis sur mesure ! Nous contacter

Conception d'IHM ou d'appli Responsive Design (Maquettage / Performance)

5-067


Les concepteurs de sites Web doivent dorénavant revoir leur approche pour que leurs interfaces s'adaptent à la diversité des terminaux. Cette formation apporte des réponses pratiques aux problématiques de conception ergonomique et de gestion des contraintes liées au Responsive Design. Cette formation a pour but d'amener les apprenants à un niveau SAME "Maîtrise" et d'enrichir les compétences : * Maîtriser les méthodes de conception des solutions informatiques du système d'information * Identifier les indicateurs pertinents qui permettront de retenir une solution informatique prenant en compte les facteurs du développement durable

Version PDF

Objectifs de la formation

  • Concevoir et développer des interfaces Web pour tous types de terminaux
  • Adopter une approche de conception ergonomique Mobile First
  • Découvrir les composants graphiques, les frameworks et les librairies Responsives
  • Optimiser les performances

Profil des bénéficiaires

Pour qui
  • Développeurs, Designers, Chefs de projets, Webmasters
Prérequis
  • Connaissances de base en HTML et CSS.

Contenu de la formation

Les terminaux
  • Types de terminaux (mobile, tablette, tv, liseuse...) et leur résolution. Périphériques, OS, navigateurs.
  • Le marché mobile et parts de marché.
  • Standards HTML, HTML5, CSS3 (API, sélecteurs...).
Introduction au Responsive Design
  • Qu'est-ce que le Responsive Design ?
  • Concept de Marcotte, Mobile First.
  • Séparation contenu/contenant.
  • Approche portrait/paysage, tactile, impact sur l'ergonomie.
  • Créer un plan de tests.
  • Différence entre design Web et design Mobile.
MediaQueries
  • Adaptation des CSS aux caractéristiques du terminal.
  • Règles conditionnelles (orientation, device-width...).
  • JavaScript et les anciens navigateurs.
  • Réglage complémentaire de rendu visuel (Viewport).
  • Médias queries orientées appareils.
Principe de grille, layout
  • Conception classique versus conception selon une grille.
  • Le positionnement par grille.
  • Unités de mesure (% em px, vh, dvh), ecrans haute définition mode Retina.
  • Eviter les débordements. Points de rupture.
  • Organiser l’information sur la page.
  • Répartition du contenu dans les blocs.
Composants graphiques
  • Images flexibles : images de fond, adaptation HTML5, adaptation de la qualité graphique selon le terminal.
  • Contenu responsive : rupture texte, multicolonnes. Césure et découpe.
  • Polices fluides : format des polices, taille.
  • Marges et espaces flexibles.
  • Menus, Carrousel, Tableaux : comment les afficher sur un petit écran ?
  • Organisation des éléments en fonction d'une grille.
  • Créer des images et des vidéos adaptées.
Framework et librairies responsive
  • Détecter les ressources avec "Modernizr".
  • La syntaxe de templates.
  • Le framework Bootstrap.
  • La bibliothèque de composants Material-UI.
  • Autres Frameworks CSS 960 grid, Foundation, Semantic UI, Skeleton, UIKit...
Optimisation et performance
  • Mesurer la performance de chargement, optimisation de bande passante. Répartition Client/Serveur.
  • Optimisation des ressources graphiques.
  • Gestion du cache.

Suivi de l'exécution et évaluation des résultats

  • Feuille de présence
  • Quiz
  • Mises en situation
  • Formulaires d'évaluation de la formation
  • Certificat de réalisation de l’action de formation

Ressources techniques et pédagogiques

  • Travaux Pratiques :
  • - Détection du type de terminal en PHP JavaScript.
  • - Construction de CSS selon les modes portrait/paysage, résolution du terminal.
  • - Construire une ergonomie basée sur une grille flexible.
  • - Mise en oeuvre de solutions.
  • - Utilisation de frameworks.
  • - Audit de pages Web, corrections conceptuelles et techniques.
  • Certains exercices peuvent nécessiter des PCs

Capacité d'accueil

Entre 3 et 15 apprenants

Délai d'accès

5 semaines

Accessibilité

Toute personne reconnue en situation de handicap et souhaitant accéder à notre parcours est invitée à nous contacter pour étudier ensemble la faisabilité de son projet de développement des compétences