02 43 52 36 45  contact@cegefos.fr

image

durée formation certifiante responsive web design

4 jours / 28 heures

Formation SResponsive Web Design.

Disponible en Inter et Intra entreprise.

formation certifiante CNCP CPF stratégie web-marketing

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

Module Responsive Web Design 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.

Responsive Web Design

Responsive Web Design (RWD) enseigne aux concepteurs et aux développeurs les compétences HTML, CSS et JavaScript nécessaires pour créer des applications Web et des sites qui s'adaptent à un large éventail d'appareils (ordinateurs, tablettes, téléphones, etc.…).

Les objectifs

A l’issu de la formation Responsive Web Design, les apprenants auront les capacités de :

  1. Créer des designs Web ergonomiques pour Mobile
  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 Responsive Web Design, s’adresse à tout public salarié, demandeur d’emploi ou en reconvetrsion professionnelle et souhaitant acquérir des compétences en développement Web, notamment :

  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
  3. avoir une double compétence et souhaitant exploiter une base de données MySQL pour rendre une application WEB plus dynamique
  4. Journaliste, réalisateur, communicant, responsable de projet, toute personne souhaitant gérer un projet web éditorial
  5. Informaticiens et concepteurs souhaitant maîtriser les techniques pour
  6. développer des sites WEB riches et interactif : HTML, CSS, JavaScript, ajax, jQuery, Responsive, AngularJS
  7. Toute personne souhaitant élargir ses compétences sur les missions liées à la fonction de développement WEB

Les prérequis

Pas de prérequis pour la formation Responsive Web Design.

Les utilitaires

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

  1. Ordinateurs de bureau / portables avec la version récente de Google Chrome ou Mozilla Firefox (avec Firebug)
  2. Apache, Microsoft IIS ou tout autre logiciel de serveur Web
  3. Émulateurs ou périphériques réels pour vos plates-formes mobiles de choix, comme iOS, Android et / ou Windows Phone
  4. Outil de développement Web / éditeur de votre choix
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

  1. 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