Créez et intégrer des maquettes dynamiques
*Prix minimum hors frais annexes.
Après un parcours de formation sous statut d’élève ou d’étudiant, Après un parcours de formation continue, Par candidature individuelle, Par expérience, Entreprises
Conception web - développement web
Disposer d'une connexion Internet minimum de 8 Mb/s, Disposer d'un PC/MAC (CPU min 2.00Ghz, HDD/SSD min 256Go, RAM min 4 Go), Disposer d'un écran déporté, Disposer d’une webcam, Disposer d’un microphone, Avoir un niveau anglais minimum B1 (classement CECRL), Effectuer un questionnaire de positionnement
Travaux à rendre
Handicap moteur ou physique, Maladie chronique handicapante
Créez et intégrer des maquettes dynamiques
1. Introduction- 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...).1. Démarche de conception- Concept de reponsive Design Ethan Marcotte, Mobile First.- Séparation contenu/contenant.- Approche portrait/paysage, tactile, impact sur l'ergonomie.- Différence entre design Web et design Mobile.(Rappels sur l’UX-Design ?)- Le maquettage vertical et le maquettage horizontal.- Basse, moyenne et haute fidélité des maquettes.- Différence entre maquettes et prototypes.2. Créer une interface avec Figma : des bases aux comportements dynamiques- Créer des pages statiques. Widgets, masters, liens.- Importer des bibliothèques (icônes, polices...) et gérer le style des pages.- Widgets et masters.- Créer des interfaces Responsive pour tablettes et smartphones.- Créer des interactions.- Les comportements dynamiques (panels dynamiques, événements, variables).3. De la maquette à l’intégration- Exportation du CSS depuis Figma, dans le but de l’intégrer lors de prochains TP3-4. La mise en forme des boîtes et des fonds en HTML/CSS- Les ombres avec box-shadow.- Les coins arrondis avec border-radius...- Grid Layout- Le principe de Grilles "Grid".- Réaliser une mise en page par bloc.- Positionnement de chacun des blocs sur la page.- Changement de la disposition et de la taille des blocs parents en fonction de la taille de l'écran de l'internaute.- Les layout Flexbox- La fin des floats.- Conception classique versus conception selon une grille.- Importance des blocs, approche contenu/contenant.- Unités de mesure (% em px), mode Retina.- Eviter les débordements. Points de rupture.- Principe des box, layout avec CSS3- Répartitions des sous-blocs dans le bloc parent.- Ordre d'affichage des blocs.- Occupation de l'espace mis à disposition par les parents.- Centrer un bloc en hauteur en 2 lignes de code.- Changement de la disposition et de la taille de ces blocs en fonction de la taille de l'écran de l'internaute.- La gestion des fonds multiples.- Les gradients de fond (-webkit-gradient).- Les fonds ajustés aux conteneurs.- Les transformations : translations, rotations, homothéties.- Les animations : les animations, les transitions.- 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 adaptables, carrousel adaptatif.
Supervision pédagogique : Assistance technique - Aide en ligne - Suivi par visioconférence Assistance technique : Par chat (instantané) - Par email (sous 24h) - Pendant et entre les séquencesToutes les formations référencées sur notre catalogue GanaMarket sont mises en œuvre dans le respect du label Qualiopi