02 43 52 36 45  contact@cegefos.fr

image

durée formation certifiante ergonomie web

3 jours / 21 heures

Formation Ergonomie Web.

Disponible en Inter et Intra entreprise.

formation certifiante CNCP CPF ergonomie web

Formation certifiante recensée à l'inventaire CNCP et éligible CPF

Module Ergonomie Web faisant parti de la

certification Développement Web.

date prochaine session formation informatique et numérique

Prochaine dates et sessions

Pour connaitre les dates de la prochaine session dans la ville la plus proche,

CLIQUEZ ICI.

Ergonomie Web

L’ergonomie web est une étape incontournable.
Elle a pour objectif d’adapter la présentation à l’écran, de s’adapter aux standards de la navigation Web ou Mobile, afin de créer des sites Web agréables et efficaces à la navigation et donner l’envie aux internautes d’y rester et d’y revenir.

Les objectifs

A l’issue de la formation Ergonomie Web, les apprenants auront les capacités de :

  1. Créer des designs Web ergonomiques
  2. Travailler en tenant compte du Responsive Web Design
  3. Améliorer l'expérience utilisateur
  4. Comprendre et justifier les décisions techniques

Le public

La formation Ergonomie Web, s’adresse à tout public salarié, demandeur d’emploi ou en reconversion professionnelle et souhaitant acquérir des compétences en développement Web :

  1. Toute personne ayant des connaissances basiques en WEB et souhaitant maîtriser le développement d’application WEB avec du PHP orienté Objet et Symfony
  2. Graphiste, intégrateur WEB, designer, Webmaster ou référenceur WEB souhaitant avoir une double compétence et souhaitant exploiter une base de données MySQL pour rendre une application WEB plus dynamique
  3. Journaliste, réalisateur, communicant, responsable de projet, toute personne souhaitant gérer un projet web éditorial
  4. Informaticiens et concepteurs souhaitant maîtriser les techniques pour développer des sites WEB riches et interactif
  5. Toute personne souhaitant élargir ses compétences sur les missions liées à la fonction de développement WEB

Les prérequis

Les prérequis nécessaire à la formation Ergonomie Web sont :

  1. Maîtriser Internet et posséder une bonne connaissance des outils informatiques
Les utilitaires

Pour le bon déroulement de la formation Ergonomie Web, voici une liste non exhaustive des outils indispensables :

  1. Editeur de fichier comme Notepad++ ou tout autre éditeur (Sublime texte, Atom…).
Programme détaillé
Jour 1

Comprendre les fondamentaux du Responsive Web design (RWD).

Introduction au Responsive Web Design

  1. Qu’est-ce que le Responsive Web Design ?
  2. Les navigateurs mobiles
  3. Autres considérations sur le web mobile
  4. Techniques de conception adaptée
  5. Éléments de Responsive Design
  6. Exemple de conception adaptée
  7. Alternatives à Responsive Design

CSS 3 et Responsive Web Design

  1. Amélioration progressive
  2. Mise en œuvre de l’amélioration progressive
  3. Types de support
  4. Style CSS "Reset"
  5. Styles conditionnels pour Internet Explorer
  6. Qu'est-ce que la fenêtre d’affichage ?
  7. Adaptation du Viewport
  8. Spécification du Viewport
  9. Les médias Queries
  10. Caractéristiques des médias utilisés dans les médias Queries
  11. La combinaison des techniques de conception adaptée
  12. Test Responsive Design

Atelier et cas pratique.

Jour 2

Mettre en place le Responsive Web Design (RWD).

Mise en page Responsive Web

  1. Les types de mise en page
  2. Les Layouts Responsive
  3. Les patterns les plus courant
  4. Le pattern de layout « Mostly Fluid »
  5. Le pattern de layout « Column Drop »
  6. Le pattern « Layout Sifhter »
  7. D'autres techniques de layout
  8. La propriété CSS Float
  9. La combinaison de styles CSS
  10. Exemple de la mise en page fluide
  11. La technique de mise en page fluide
  12. Unités Taille de la police
  13. Pixel-Sized vs Em-Sized
  14. Les relations de l'unité Taille de la police
  15. Pixels à Em Formule de Conversion
  16. Autres considérations
  17. Regard sur l'avenir

Images réactives

  1. Images réactives
  2. Considérations sur les performances
  3. Images Shrinking
  4. Techniques traditionnelles de traitement des images
  5. Médias Queries ne pas toujours aider à améliorer les performances
  6. Avoir un pixel « fluide »
  7. Les fenêtres de l'appareil
  8. Pixels CSS
  9. La puissance de la simplicité
  10. Sencha.io Src Images Service Cloud
  11. Sencha.io Src Schéma
  12. Comment ça marche
  13. API Sencha.io Src
  14. Sencha.io Src Détails API
  15. Sencha.io Src API Détails suite
  16. Des exemples de l'API Sencha.io Src
  17. Savoir utiliser un service de manipulation d'image en cloud
  18. L'élément d'image
  19. L'attribut srcset
  20. Plus d'informations sur l'attribut srcset
  21. Des exemples de l'attribut srcset
  22. Qu'est-ce que le Picturefill?
  23. L'utilisation du Picturefill

Atelier et cas pratique.

Jour 3

Utiliser Bootstrap pour le Responsive Web Design (RWD).

Boostrap, vue d'ensemble

  1. Qu'est-ce que Bootstrap
  2. Mots-clés de bower.js
  3. L’Histoire de Bootstrap
  4. Le Développement Web Responsive
  5. Mise en page d’une Grille Responsive
  6. Composants GUI réutilisables
  7. JavaScript
  8. La Philosophie Mobile
  9. Pourquoi le RWD
  10. Une vue Responsive
  11. Obtenir Bootstrap
  12. Bootstrap Content Delivery Network
  13. Autres options de configuration
  14. Bootstrap fichiers Core
  15. Minimifié ou pas ?

Utilisation de Bootstrap

  1. Les fichiers CSS Bootstrap
  2. Les fichiers JavaScript Bootstrap
  3. Viewport Meta Tags
  4. Exemples
  5. Layouts
  6. La grille Bootstrap
  7. Explicatop, de la grille
  8. La navigation
  9. Navigation (bureau)
  10. Navigation (Mobile)
  11. Source de navigation
  12. Éléments de navigation et Styles

Bootstrap, sujets divers

  1. Composants bootstrap
  2. Composants Bootstrap pour les Pages Web
  3. L'intégration de composants Bootstrap avec jQuery
  4. Identification de la version requise de jQuery
  5. Télécharger le Bootstrap Minimifié
  6. Utilisation de Customizer
  7. Le Customizer page Fragment
  8. Compilation et chargement personnalisé Bootstrap
  9. Personnalisation des composants Bootstrap

Atelier et cas pratique.

Jour 4

Techniques avancées pour le Responsive Web Design.

Autres techniques

  1. Sprites
  2. Police d'icônes
  3. Code Emoji
  4. Graphiques vectoriels évolutifs (SVG)
  5. CSS3

Solutions côté serveur

  1. Images adaptatives
  2. Images réactives
  3. Solutions serveur tiers

Besoin de devis/ Renseignements

Veuillez remplir le formulaire de contact

Merci de remplir le formulaire de contact. Un de nos conseillers traitera votre demande rapidement.

Please type your full name.
Invalid email address.
Veuillez saisir votre numéro de téléphone.
Please tell us how big is your company.
Entrer le nom de votre société si vous êtes salarié.
Please tell us how big is your company.
Entrée non valide
Robot Actualisation Entrée non valide