créer un thème responsive web design

CRÉER UN THÈME
RESPONSIVE WEB DESIGN
GILLES-PHILIPPE LEBLANC
ANALYSTE EN INFORMATIQUE
SOMMAIRE
Introduction
Comment créer votre propre thème
Présentation du thème Clean UdeM
Maintenance
Futurs développements
Conclusion
PRÉSENTATEUR
GILLES-PHILIPPE LEBLANC
Analyste informatique
gilles-philippe.leblanc@umontréal.ca
Gilles-Philippe Leblanc est analyste informatique pour
l'université de Montréal et possède une forte expertise
en intégration web et multimédia. Il travaille depuis
2011 sur le projet StudiUM, une implémentation de
Moodle 2.x.
MOODLE À L’UNIVERSITÉ DE MONTRÉAL
NOTRE INSTANCE DE MOODLE : STUDIUM
Statistiques - Automne 2015
2 733
COURS OUVERTS
40 944
ÉTUDIANTS
2 341
ENSEIGNANTS
QU’EST CE QU’UN THÈME ADAPTATIF
Selon Wikipedia :
« Un site web adaptatif (anglais RWD pour responsive web design,
conception de sites web adaptatifs selon l'OQLF) est un site web dont la
conception vise, grâce à différents principes et techniques, à offrir une
expérience de consultation confortable même pour des supports
différents »
Source : https://fr.wikipedia.org/wiki/Site_web_adaptatif
Un thème adaptatif est donc un thème appliquant ces principes.
POURQUOI CRÉER UN THÈME
○
Besoin d’une identité visuelle personnalisée et unique
●
○
Plus complexe que ce qui est offert par un thème générique configurable
Besoin de fonctionnalités spécifiques
●
Qui ne sont pas déjà couvertes en totalité par un thème existant
CRÉER UN THÈME RESPONSIVE WEB DESIGN
Introduction
Comment créer votre propre thème
Présentation du thème Clean UdeM
Maintenance
Futurs développements
Conclusion
EXPLORER LES THÈMES DISPONIBLES
○
○
Thèmes Core
●
Clean
●
More
Quelques thèmes intéressants provenant de la communauté
●
Easy
●
Essential
●
Aardvark
●
Bootstrap
●
Elegance
●
Academi
Source : https://moodle.org/plugins/browse.php?list=category&id=3
CHOISIR LE BON THÈME DE BASE
Type de thèmes / Caractéristiques
Core (livré de base avec Moodle)
Provenant de la communauté
Interface
Plus générale
Plus spécifique
Maintenance
Plus facile
Généralement moins facile
Fonctionnalités
Minimales
Plusieurs
STRUCTURE D’UN THÈME
Répertoires / fichiers
Utiliser pour
/lang/en/theme_cleandemo.php
Fichier contenant les chaînes de langues en anglais
/lang/fr/theme_cleandemo.php
Fichier contenant les chaînes de langues en français
/layout/frontpage.php
Gabarit pour la page d'accueil
/layout/column1.php column2.php column3.php
Pour les différentes configurations de colonnes
/less/
Les feuilles de styles LESS avant compilation
/style/
Où seront placées les feuilles de styles compilées
/renderers/
Pour remplacer la structure et logique d'éléments visuels du système
STRUCTURE D’UN THÈME (SUITE)
Répertoires / fichiers
Utiliser pour
config.php
Configurations du thème
lib.php
Pour définir des fonctions php utiles au thème
settings.php
Où sont définis les paramètres administrateurs du thème
renderers.php
Pour regrouper l'appel de tous les renderers
version.php
Commun à tous les plugins pour définir le numéro de version
CRÉATION D’UN THÈME EN TEMPS RÉEL
○
Basé sur le thème Clean
○
Spécificité : utilisation de feuilles de styles LESS
Sources :
https://docs.moodle.org/dev/Cloning_a_theme https://www.youtube.
com/watch?v=ctEYt_z2bNE&feature=youtu.be https://docs.moodle.
org/dev/LESS
BONNES PRATIQUES
○
Quelques points importants :
●
Couleurs accessibles (WebAim)
●
Utiliser le code checker
●
Dépendances entre les thèmes
●
Polices de caractères lisibles
●
Adaptivité du thème (ordinateurs, mobiles et tablettes)
Sources : https://docs.moodle.org/dev/Theme_checklist
CRÉER UN THÈME RESPONSIVE WEB DESIGN
Introduction
Comment créer votre propre thème
Présentation du thème Clean UdeM
Maintenance
Futurs développements
Conclusion
HISTORIQUE DU THÈME CLEAN UDEM
○
Créé pour la version 2.6.3 de Moodle le 14 juillet 2014
○
Créé à partir du thème Clean
○
Maintenant compatible avec la version 2.8.6 de Moodle
CARACTÉRISTIQUES DU THÈME
○
Page d’accueil de type vitrine avec diaporama configurable
○
Menus personnalisés
●
Menu mes cours
●
Menu d’aide configurable
●
éléments seulement affichés une fois authentifié
●
Menu personnel
■
○
Bouton pour cacher les colonnes latérales
●
○
Core avec Moodle depuis la version 2.9
Amélioration en cours dans la communauté
Largeur maximale fixe des colonnes latérales
CARACTÉRISTIQUES DU THÈME (SUITE)
○
Icônes FontAwesome
○
Police de caractères Google Font personnalisée
○
Renderers et layouts personnalisés
○
Utilisation de LESS pour les CSS
●
Compilation incluant le thème parent
○
Pied de page collé en bas de l'écran (Chrome, Firefox et Edge)
○
Animation des blocs lorsque cachés et affichés :)
○
Logos, icônes, favicon et tuiles personnalisées pour StudiUM
●
Apple iOS et OSX
●
Google Android
●
Microsoft Windows 7, 8, 8.1 et 10
Exemples sur : https://studium.umontreal.ca
CRÉER UN THÈME RESPONSIVE WEB DESIGN
Introduction
Comment créer votre propre thème
Présentation du thème Clean UdeM
Maintenance
Futurs développements
Conclusion
ARCHIVER LE THÈME AVEC GIT
○
Permet de conserver un historique
○
Avec GitHub, permet de bénificier du travail collaboratif
Source : https://github.com/
ÉTAPES À CHAQUE NOUVELLE VERSION
○
Consulter la liste des nouveautés concernant les thèmes
●
https://git.moodle.org/gw?p=moodle.git;a=blob;f=theme/upgrade.txt;hb=master
○
Consulter les changements du thème de base et les réappliquer
○
Tour de piste de l’interface
○
●
Permet de découvrir des anomalies graphiques
●
Au besoin, les noter afin de les corriger (Possible dans GitHub)
Recompiler le fichier LESS (si nécessaire)
CRÉER UN THÈME RESPONSIVE WEB DESIGN
Introduction
Comment créer votre propre thème
Présentation du thème Clean UdeM
Maintenance
Futurs développements
Conclusion
FUTUR DÉVELOPPEMENT POUR LES THÈMES
○
Element library - utilisation de Mustache
○
Permettre de modifier l’apparence du courriel provenant d’un message de forum
○
Ajout d’un champ de formulaire avec auto-complétion
Sources :
https://docs.moodle.org/dev/Element_Library
https://tracker.moodle.org/browse/MDL-49682
https://tracker.moodle.org/browse/MDL-51247
https://mustache.github.io/
http://getbootstrap.com/
https://moodle.org/mod/forum/discuss.php?d=311119
CRÉER UN THÈME RESPONSIVE WEB DESIGN
Introduction
Comment créer votre propre thème
Présentation du thème Clean UdeM
Maintenance
Futurs développements
Conclusion
CONCLUSION
○
Valider le besoin
○
Choisir son thème de base
○
Tester votre plugin
○
Rester informé
Le thème Clean UdeM est disponible sur GitHub pour référence :
https://github.com/StudiUM/moodle-theme_cleanudem
QUESTIONS ?
MERCI !