01.77.06.97.27 - 06.62.38.35.93

Formation Responsive Webdesign JQuery

Formation Responsive Design JQuery

Nos sessions 2017

Prochaines sessions : du 13 au 17 Février 2017 & 17 au 21 Avril 2017

  • du 13 au 17 Février 2017 – 17 au 21 Avril 2017 – du 22 au 26 Mai 2017 – du 10 au 14 Juillet 2017
  • du 18 au 22 Septembre 2017 – du 20 au 24 Novembre 2017


Formation WEB – Formation WebDesign avec JQuery, apprendre à réaliser des sites internet adaptables sur différentes plateformes et création d'effets

Publics Concernés

  • Professionnels souhaitant perfectionner leurs méthodes en terme de Webdesign.

Objectifs principaux de la formation

  • Cette formation apporte des réponses pratiques aux problématiques de conception ergonomique et de gestion des contraintes liées au Responsive Design
  • Utiliser le framework JQuery pour mettre en œuvre et améliorer l’ergonomie et l’interactivité de vos sites.

Formations Complémentaires / Transversales dispensées dans le centre

 

Durée conseillée du stage

5 jours 

Pré-requis de la formation

  • Bonnes connaissances en HTML et CSS


Tarifs de la formation

  • Session Inter-entreprise WebDesign avec Jquery (5 jours) : 2 250 € HT
  • Cours particulier : 700 € HT/jour
  • Intra-entreprise : Nous Contacter

Programme Responsive Webdesign et JQuery

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…)

Démarche de conception

  • Concept de Marcotte, Mobile First
  • Séparation contenu/contenant
  • Approche portrait/paysage, tactile, impact sur l’ergonomie
  • Créer un plan de tests
  • Différences 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)

Principe de grille flexible, fluide

  • Conception classique vs 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
  • Principes des box, layout avec CSS3.

Cas Pratique

  • Réalisation d’une grille css fluide adaptative

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 adaptables, carrousel adaptatif
  • Créer des images et des vidéos adaptées

Framework et librairies responsive

  • Détecter les ressources avec « Modernizr »
  • Librairies de substitution (less, css3pie…)
  • Frameworks CSS 960 grid, HTML5 BoilerPlate, Bootstrap, Foundation, Skeleton,…

Optimisation et performance

  • Mesurer la performance de chargement, optimisation de bande passante
  • Répartition Client/Serveur
  • Optimisation des ressources graphiques
  • Gestion du cache

Présentation de JQuery

  • Qu’est-ce que jQuery ? Pourquoi jQuery ?
  • Rapport au Javascript simple

Notions de base Javascript

  • Les variables
  • Les fonctions
  • Les boucles
  • La concaténation

Les sélecteurs

  • Présentation des sélecteurs jQuery
  • Rôle des sélecteurs. Les différents types de sélecteurs
  • Les pseudo-classes. Les combinateurs

Accès à l’arbre DOM

  • Rappel sur DOM (Document Object Model)
  • Accès direct aux éléments d’une page
  • Manipulation de DOM avec jQuery
  • Gestion des classes CSS (addClass(), removeClass() …
  • Insertion d’éléments dans l’arbre DOM

La gestion des événements

  • La notion d’événements en Javascript
  • Gestion des événements avec la méthode bind
  • Transmission de paramètres avec la méthode bind

Cas Pratique

  • Réalisation d’un site web de 3 à 5 pages en responsive web design avec html 5, css3 et jQuery