Programme de Formation Ecoconception web : Approfondissement

Développement durable et accessibilité

Intégration des principes d’accessibilité pour améliorer l’expérience utilisateur et réduire la consommation énergétique

Adoption d’un design minimaliste et d’une navigation optimisée

Gestion efficace de l’interactivité et des animations pour limiter les ressources gourmandes

Stratégies de développement et d’hébergement

Optimisation de l’hébergement en privilégiant les serveurs mutualisés et les infrastructures à faible consommation

Utilisation des énergies renouvelables pour réduire l’impact environnemental

Intégration des Content Delivery Networks (CDN) pour améliorer la distribution des contenus

Approche DevOps et écoconception

Automatisation des tests pour réduire le gaspillage de ressources

Optimisation des cycles de build afin de limiter la consommation énergétique des environnements de développement

Surveillance et mesure des performances écologiques des applications web

Cas pratiques et étude de projets

Analyse de sites éco-conçus et identification des stratégies employées

Étude de cas sur la refonte d’un site web avec mise en œuvre des bonnes pratiques d’écoconception

Atelier final

Application des bonnes pratiques à un projet spécifique. Élaboration d’un plan d’action personnalisé pour intégrer l’écoconception dans les futurs développements web.

Programme de Formation XML, Ajax et jQuery

Découvrir JavaScriptConcepts de base du Javascript

Gestion des événements

Présentation du DOM (Document Object Model)

Accès, modification, ajout d'éléments et d'attributs

Gestion dynamique des CSS

Atelier pratique: réaliser une galerie de photos

Découvrir XML Presentation du format XML

Structure d'un document XML

Intérêts d'XML

Atelier pratique : flux RSS d'un site web Comprendre Ajax et XMLHttpRequest

Communication synchrone et asynchrone

Instancier un objet XMLHttpRequest

Envoi de requêtes

Gestion des réponses, codes de retour des serveurs HTTP

Gestion des erreurs

Découvrir jQuery

Fonctions essentielles et chaînage

Sélecteurs (CSS, XPath, Complexes)

Parcours, manipulation de l'arbre DOM et filtres

Principes des Callback

Créer des interfaces grâce à jQuery

Comportement des liens

Association d'évènements et déclenchement

Effets d’animations

Widgets : sliders, infobulles, drag’n’drop...

Atelier pratique : exemples multiples de widgets jQuery Utiliser AJAX avec jQuery

Communication asynchrone/synchrone

Mise en oeuvre d'AJAX

Fonctions jQuery disponibles

Chargement de pages et injection de code

Intégration complète d'AJAX et de l'UI

Compatibilité avec les autres frameworks

Atelier pratique : création d'une interface web riche avec jQuery Conclusion

Evolutions du Web

Autres frameworks à découvrir

Programme de Formation HTML5 / CSS3 pour les intégrateurs HTML

Introduction

Spécifications HTML : historique et évolutions

Vision HTML 5 et contextes d'utilisation

Support par les navigateurs

Conception de pages web avec HTML5

Structure d'une page

Différences avec le HTML 4 et XHTML 1 (nouveaux éléments, éléments obsolètes)

Eléments de styles CSS en HTML5

Atelier pratique : une première page en HTML5 Balises HTML5

Balises de mise en forme du contenu (titres, paragraphes, etc...)

Balises sémantiques et d'organisation

Création et utilisation de formulaires

Intégration d'animations et sons

Dessin 2D

Géo-localisation : concepts et fonctionnement

Atelier pratique : réalisation d'un site incluant des formulaires et du contenu Communication et stockage

Evènement (EventSource API)

Envoi de message entre documents/par canaux (PostMessage API, XHR)

Stockage local/en session

Bases de données SQL Web et bases indexées

Atelier pratique : utilisation d'apis de communication Rappel CSS

Notions de base (sélecteurs, propriétés de mise en forme)

Positionnement CSS

Ordre de priorité : cascade et héritage

Hacks et styles alternatifs

Préfixes vendeurs

Atelier pratique : multiples exemples d'utilisation des css, démonstration des priorités des sélecteurs CSS 3

Spécification W3C

Sélecteurs disponibles

Propriétés de mise en forme : bordures, ombres, transparence,...

Mise en page et positionnement : multi-colonnes, boîtes, grille, ...

Transformations et transitions

Atelier pratique : démonstration de styles et d'effets sur les différentes propriétés étudiées, mise en page complexe d'une page

Programme de Formation HTML5/CSS3, Responsive Design, Javascript, XML, Ajax et jQuery

Introduction

Rappels des normes XHTML, CSS, HTML5

Les problèmatiques actuelles : le multi-format, les terminaux mobiles

Découvrir HTML5

Présentation de HTML 5

Support par les navigateurs

Les balises HTML5

Atelier pratique : Une première page en HTML 5 Créer des sites web avec HTML5

Structure et sémantique

Nouveaux éléments de formulaire HTML5

Intégration d'animations et sons

Atelier pratique : Création d'un premier site avec formulaire en HTML5 Utiliser CSS 3

Rappel CSS

Ordre de priorité : cascade et héritage

Dimensionnement, marges

Problèmatique de positionnement

Propriétés CSS 3 pour la mise en forme : bordures, ombres, transparence,...

Atelier pratique : démonstration de styles et d'effets sur les différentes propriétés étudiées, mise en page complexe d'une page

Comprendre le Responsive Web Design

Présentation du Responsive Web Design : objectifs, alternatives...

Les grilles fluides

Les media queries

Compression d'images, sprites, Data URI

Introduction aux librairies JavaScript pour compatibilité HTML5

Atelier pratique : création d'un site multiplateforme (smartphone, tablette..) Utiliser Bootstrap

Présentation de Bootstrap

Installation de Bootstrap

Atelier pratique : créer une page avec Bootstrap Découvrir JavaScript

Concepts de base du Javascript

Gestion des événements

Présentation du DOM (Document Object Model)

Accès, modification, ajout d'éléments et d'attributs

Gestion dynamique des CSS

Atelier pratique: réaliser une galerie de photos Découvrir XML

Presentation du format XML

Structure d'un document XML

Intérêts d'XML

Atelier pratique : flux RSS d'un site web Comprendre Ajax et XMLHttpRequest

Communication synchrone et asynchrone

Instancier un objet XMLHttpRequest

Envoi de requêtes

Gestion des réponses, codes de retour des serveurs HTTP

Gestion des erreurs

Découvrir jQuery

Fonctions essentielles et chaînage

Sélecteurs (CSS, XPath, Complexes)

Parcours, manipulation de l'arbre DOM et filtres

Principes des Callback

Créer des interfaces grâce à jQuery

Comportement des liens

Association d'évènements et déclenchement

Effets d’animations

Widgets : sliders, infobulles, drag’n’drop...

Atelier pratique : exemples multiples de widgets jQuery Utiliser AJAX avec jQuery

Communication asynchrone/synchrone

Mise en oeuvre d'AJAX

Fonctions jQuery disponibles

Chargement de pages et injection de code

Intégration complète d'AJAX et de l'UI

Compatibilité avec les autres frameworks

Atelier pratique : création d'une interface web riche avec jQuery Conclusion

Evolutions du Web

Autres frameworks à découvrir

Programme de Formation Bootstrap et jQuery : Sites web adaptatifs et asynchrones Découvrir jQuery Présentation de jQuery : objectifs, alternatives...

Cas d'utilisation, exemples de sites

Principes spécifiques et astuces

Les versions de jQuery

jQuery slim Atelier : Ajouter jQuery dans un projet Intéragir avec le DOM Fonctions essentielles et chaînage

Sélecteurs CSS3 étendus

Parcours, manipulation de l'arbre DOM et filtres

Association d'évènements et déclenchement

Contrôle du contexte d'exécution des callbacks

Effets d’animations

Fonctions existantes Atelier : Manipulation de pages web avec jQuery Réaliser des requêtes AJAX avec jQuery

Communication asynchrone/synchrone

Mise en oeuvre d'AJAX

Fonctions jQuery disponibles

Interface des objets Deferred et Promise

Chargement de pages et injection de code

Intégration complète d'AJAX et de l'UI

Compatibilité avec les autres frameworks

Atelier : Requêtes AJAX et parsing XML avec jQuery Comprendre le fonctionnement de Bootstrap Découvrir les frameworks CSS adaptatifs

Les alternatives

Bootstrap : présentation, apports, exemples

Les dépendances associées à Bootstrap : jQuery et popper.js Atelier : Inclure Bootstrap dans un projet et templating de base Créer des pages responsive design avec Bootstrap

Bootstrap et le Responsive Web Design (RWD)

La Grille Bootstrap

Les conteneurs et les points de rupture

Les préfix de classe

Les colonnes à disposition automatique

Alignement horizontal et vertical

Réordonner, décaler et imbriquer les colonnes

Atelier : Utiliser la grille dans un projet Maîtriser les classes CSS de base de Bootstrap Typographie et liens

Tableaux : lignes, bordures, survol, RWD

Eléments de formulaires, contrôles supportés

Boutons : options, tailles, état

Eviter les débordements des images

Atelier : Utilisation de classes bootstrap dans des pages web Exploiter les classes utiles

Gérer le positionnement: flex, position, float et clearfix

Modifier les textes: alignement, troncature, graisse, italique, etc

Gérer les bordures, les ombres, les marges (padding, margin)

Les couleurs de fond et de texte

Atelier : Personnaliser l'apparence des balises avec les utilities Utiliser les composants CSS Bootstrap Les badges

Le fil d'arianne

Les boutons et groupe de boutons

Les cards: titre, image, lien, mise en forme

Les Formulaires: mise en page, validation, groupement

Les Listes

Les Médias Atelier : Intégrer des composants CSS dans une page Manipuler les composants Javascript avec jQuery

Découverte des composants JS

Utilité de jQuery pour les composants

Intéragir à l'aide des attributs data-*

Les variables d'options des composants

Les methodes et évènements disponiblent

Atelier : Transmettre des informations aux composants à l'aide des évènements - Afficher le des composants à l'aide de requête asynchrone Manipuler Bootstrap avec Sass

Présentation de la personnalisation du thème bootstrap

Structure des fichiers d'un projet

Importer la bibliothèque dans un fichier sass

Liste des variables existantes

Modifier les valeurs des variables bootstrap

Manipuler les maps (ajout, modification, suppression)

Créer ces propres composant en s'aidant des fonctions de Bootstrap

Atelier : Modifier bootstrap à l'aide de Sass

Programme de Formation Swish

Prise en main de Swish

Présentation du logiciel

Les outils dessin

Effet de déplacement

Effet d’effacement

La guideline

Effet de transformation

Couleur de fond de l’animation

Effet 3D Spin

Les outils texte

Effacement et déplacement de texte

Exercice : Animation d’histogramme

Les effets TypeWriter

Les effets Vortex : application à un texte de l’effet Vortex, spin back

Les autres effets

Exercice : message publicitaire

Fonctions avancées de Swish

Utilisation des dégradés et images

Création et utilisation des groupes, sprites et boutons

Lecture / Arrêt d'une animation

Déplacements

Paramétrages avancés des effets.

Personnalisation/enregistrement des effets

Exercice : création d’une navigation

Préchargement

Son

Fonctions import/export

Etude de cas : construction d’une animation pour votre site Web