Formation Responsive Webdesign JQuery

• 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

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