Avec JQuery, apprendre à réaliser des sites internet adaptables sur différentes plateformes et création d’effets
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 Boiler Plate, 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
Prochaines sessions :
- Sur demande
Durée conseillée du stage
- 5 jours
Pré-requis de la formation
- Bonnes connaissances en HTML et CSS
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.
Tarifs de la formation
- Nous contacter
Méthodes pédagogiques
- Evolution de la formation par exercices pédagogiques et cas pratiques ou d’entreprise
- Un support de cours papier ou DVD
- Une Attestation de formation
- Une évaluation de fin de formation par le/la stagiaire
- Une évaluation de fin de formation par le/la formateur(trice)
- Une Assistance Post-Formation (option 3 -6 -12 Mois)
Cette formation vous intéresse, contactez-nous !
Formations Complémentaires Transversales dispensées dans le centre
