Une interface moderne et multi devices avec Drupal Focus sur Omega

Transcription

1 Une interface moderne et multi devices avec Drupal Focus sur Omega

2 Romain Jarraud Formateur / consultant Drupal Anne- Sophie Picot Chef de projets

3 Publier du contenu aujourd hui > Plateformes de consultation de plus en plus variées. > Disparité des appareils donc des écrans. > Utilisation de plus en plus massive d internet en mobilité. > Adaptation nécessaire pour publier du contenu.

4 Publier du contenu pour le Web > Canal de diffusion unique : Internet. > Transmission et affichages multiples. > S adapter à la taille, à la résolution et à l orientation de la fenêtre d affichage pour présenter le contenu.

5 Responsive Design > Avant (il n y a pas si longtemps) plusieurs thèmes pour un même site : thème «classique» et thème «mobile». > Aujourd hui il faudrait au moins 4 thèmes pour prendre en compte toutes les situations! > Le thème doit détecter comment est affiché le site et s adapter automatiquement : Responsive Design.

6 Responsive Design et Drupal > Drupal est un Content Management System et doit le rester. > Le système est en charge du workflow de création/ publication de contenus. > Le thème est responsable de la présentation des contenus.

7 Responsive Design et Drupal > Le choix du thème est primordial. Ø Plusieurs solutions de base avec Drupal : Ø Zen Ø AdaptiveTheme Ø Omega > Le thème Omega est l une des solutions les plus abouties : Responsive Design, Grid 960 et HTML5.

8 Démonstration frontoffice > Présentation du site et de ses régions. > Principe du système de grille. > Mise en évidence du Responsive Design : navigateur «classique» et smartphone.

9 Démonstration backoffice > Configuration des zones et des régions. > Modification de la largeur des colonnes de droite et de gauche. > Utilisation de grilles différentes selon les zones. > Déplacement d une région d une zone à une autre.

10 Mobile first > Mobile (défaut) pour smartphone. > Narrow > 740px pour tablette (portrait) et smartphone (paysage). > Normal > 980px pour écran de PC/Mac de bureau. > Wide > 1220px pour grand écran.

11 Modules complémentaires > Omega Tools : export des réglages du backoffice afin de les réutiliser sur un autre site. > Delta : permet d avoir une présentation différente en fonction du contexte (url, type de contenu, taxonomie ).

12 Démonstration - Delta > Création d une nouvelle présentation. > Association d une présentation et du contexte d utilisation.

13 Et ensuite > La présentation s adapte (finalement) bien. > Les medias sont toujours statiques (dimensions fixes). Il est nécessaire de les adapter également (resp_img, fitvids ). > Drupal 8 : initiatives HTML5, Layout et Mobile.

14 Omega et Commerce Kickstart

15 Commerce Kickstart? Commerce Kickstart version 2 Nouveauté d Août 2012 Une boutique de démonstration Une base pour constituer un POC Une base pour composer votre boutique (sur périmètre identique à proche) Commerce Kickstart Thème Un thème utilisable tout de suite Une base de thème pour votre boutique

16 De Commerce Kickstart 1 à Commerce Kickstart 2 Contenus Configura6ons Blocs Images Menus Thèmes

17 Omega ou Kickstart? Les thèmes de Commerce Kickstart version 2 1. Omega 2. Omega Kickstart (sous thème de Omega) 3. Commerce Kickstart Theme (sous thème d Omega Kickstart) Pourquoi trois thèmes? Lequel u8liser? Comment les maintenir? Comment créer le thème de ma bou7que?

18 Omega Kickstart Omega kickstart c est un sous thème d Omega c est notre base de travail Comment créer le thème de ma boutique avec Omega Kickstart? - Copier le thème Commerce Kickstart Theme pour en faire le votre et disposer des fonctionnalités d Omega et de notre travail sur Omega Kickstart - Créer un nouveau sous thème en se basant sur Commerce Kickstart Theme

19 Le RTL Pour écouter les grosses têtes? Right to Left Besoin de séparer les fichier rtl par format de résolution. Global.css > global-rtl.css => sur un thème classique Prendre en compte non pas 1 mais 3 fichiers rtl chaque résolution d écran/support à son équivalent rtl

20 Retour d expérience Créa6on d un sous thème Omega Répondant aux besoins de la distribu6on Prise de recul sur les objec6fs du produit Besoin de créer rapidement des versions différentes du thème pour des cas pra6ques Créa6on d un starter thème intermédiaire Portage des éléments principaux dans le thème Le thème u6lisé dans la démonstra6on de Kickstart dépend de deux thèmes de base, mais offre une meilleur adaptabilité à de nouveaux projets.

21 Processus idéal Créer un starter thème d Omega qui sera la base de thème des prochains sous-thèmes Omega > Omega Kickstart > Commerce Kickstart Theme Créer un sous-thème à votre starter thème Qui sera notre thème par défaut de votre site de démo Créer un autre sous thème pour un autre cas d usage de démonstration à partir d une base commune Mutualiser un base de thème pour créer plus facilement des exemple de démonstration

22 Maintenir sa boutique Mettre à jour Commerce Kickstart Commerce Kickstart suit les mises à jour de Drupal et de Drupal Commerce Mettre à jour son thème Omega Kickstart peut être amené à être mis à jour (le thème suit les mises à jour d Omega). La dernière version est toujours packagée avec la distribution. Commerce Kickstart ne se base que sur les versions stables Actuellement : Commerce Kickstart 7.x rc3

23 Et après Nous réfléchissons actuellement à la mise en place d un sous thème à par6r de la nouvelle version d Omega (Omega 4 actuellement en version dev)

24 Ressources > Omega drupal.org/project/omega > Commerce Kickstart drupal.org/project/commerce_kickstart > Omega Tools drupal.org/project/omega_tools > Delta drupal.org/project/delta > Context drupal.org/project/context > Commerce Kickstart avec démonstration commerceguys.com/product/commerce-kickstart

25 Merci!

26 Questions?