Dawan

Webmaster Intermédiaire : Responsive Web Design (RWD)

Par Dawan

Objectifs

Créer des sites Web responsive - Utiliser les media Queries

Programme

Introduction

  • Histoires du web
  • Comprendre le Responsive

Construire un site web adaptatif

  • Responsive Web Design (RWD) : définition, composantes
  • Contraintes ergonomiques et fonctionnelles
  • Viewport : notion, meta, valeurs
  • Unités relatives (%, em) vs. absolues (px)

Créer une grille d'affichage flexible

  • Tailles d'écran, résolution optimale
  • Modes portrait et paysage
  • Expression des tailles en pourcentage (%), em
  • Tailles minimales, maximales
  • Blocs, approche contenu/contenant
  • Principe des box, layout avec CSS3
  • Taille des fonts : fixer une base pour les tailles, conversions em
  • Eviter les débordements
  • Atelier : Multiples exemples de grilles flexibles

Utiliser des médias flexibles

  • Images flexibles : images de fond, adaptation HTML5
  • Marges et espaces flexibles
  • Vidéos adaptées
  • Support des propriétés CSS par les anciens navigateurs
  • Atelier : Eviter le débordements d'images/vidéos

Ecrire des CSS3 Media Queries

  • Adaptation de l'affichage en fonction de la résolution
  • Types de médias
  • Choix des règles conditionnelles : orientation, device-width
  • Medias queries internes, externes
  • Gestion des menus et sliders
  • Atelier : Création de site responsive pure css avec des media-queries

Frameworks RWD

  • Panorama des frameworks existants
  • Bootstrap
  • 960 grid
  • Optimisation des ressources graphiques
  • Atelier : Construction d'un site adaptatif avec Bootstrap

Passage de la certification (si prévue dans le financement)

Pédagogie

  • Un support et les exercices du cours pour chaque stagiaire
  • Un formateur expert ayant suivi une formation à la pédagogie
  • Boissons offertes pendant les pauses en inter-entreprises
  • Salles lumineuses et locaux facilement accessibles
  • Méthodologie basée sur l'Active Learning : 75% de pratique minimum
  • Matériel pour les formations présentielles informatiques : un PC par participant
  • Evaluation de fin de formation : Certification CPF ou mise en situation notée par le formateur
  • Nos formations sont accessibles aux personnes en situation de handicap
    si vous êtes en situation de handicap, nous sommes en mesure de vous accueillir, n'hésitez pas à nous contacter à referenthandicap@dawan.fr nous étudierons ensemble vos besoins.

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

Feel Europe
Créer un site web REST avec Python et FlaskPar Feel Europe

Maitriser le développement d’un site Web moderne avec le framework Flask.

CCM Benchmark
UX et E-commercePar CCM Benchmark

Cette formation fournit les pistes à suivre pour améliorer la qualité de son site e-commerce, mettre en valeur son offre, optimiser l'accès aux fiches produit et le processus de commande et de paiement en ligne.
Elle s'appuie sur des exemples issus des dernières refontes et sur les initiatives récentes les plus exemplaires.

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

Qu’il s’agisse d’écrans directement intégrés aux machines, d’écrans d’ordinateur, de tablettes tactiles ou de Smartphones, le but des interfaces reste de dialoguer avec un utilisateur et de répondre à ses besoins. Afin découvrir ces besoins et le rôle de l’ergonome, cette formation vous présentera des méthodes de design d’interface centré utilisateur, et vous fera découvrir les principes d’ergonomie essentiels pour concevoir et auditer une IHM.

Orsys
Responsive web design: les techniques modernes de mise en pagePar Orsys

Ces tutoriels de formation 100% à distance ont pour objectifs de vous apprendre des techniques modernes de mise en page afin de créer des sites web dont l'affichage s'adapte automatiquement aux écrans sur lesquels ils sont diffusés. Ils s’adressent à un public de créateurs de site web, designers, chefs de projets, webmasters ou toute personne disposant des connaissances de base en langages HTML et CSS qui souhaite s'initier au responsive web design . La pédagogie s'appuie sur un autoapprentissage séquencé par actions de l’utilisateur sur l’environnement à maîtriser.