Une interface moderne et multidevices avec DrupalFocus sur Omega
Romain	  Jarraud	  Formateur	  /	  consultant	  Drupal	  	  	  Anne-­‐Sophie	  Picot	  Chef	  de	  projets	  	  	  
Publier du contenu aujourd’hui> Plateformes de consultation de plus en plus variées.> Disparité des appareils donc des écr...
Publier du contenu pour le Web> Canal de diffusion unique : Internet.> Transmission et affichages multiples.> S’adapter à ...
Responsive Design> Avant (il n’y a pas si longtemps) plusieurs thèmes pour unmême site : thème « classique » et thème « mo...
Responsive Design et Drupal> Drupal est un Content Management System… et doit lerester.> Le système est en charge du workf...
Responsive Design et Drupal> Le choix du thème est primordial.Ø  Plusieurs solutions de base avec Drupal :       Ø  Zen ...
Démonstration – frontoffice> Présentation du site et de ses régions.> Principe du système de grille.> Mise en évidence du ...
Démonstration – backoffice> Configuration des zones et des régions.> Modification de la largeur des colonnes de droite et ...
Mobile first> Mobile (défaut) pour smartphone.> Narrow > 740px pour tablette (portrait) et smartphone(paysage).> Normal > ...
Modules complémentaires> Omega Tools : export des réglages du backoffice afin de lesréutiliser sur un autre site.> Delta :...
Démonstration - Delta> Création d’une nouvelle présentation.> Association d’une présentation et du contexte d’utilisation.
Et ensuite…> La présentation s’adapte (finalement) bien.> Les medias sont toujours statiques (dimensions fixes). Il estnéc...
Omega et Commerce Kickstart
Commerce Kickstart ?Commerce Kickstart version 2   •    Nouveauté d’Août 2012   •    Une boutique de démonstration   •    ...
De	                                     	   Commerce	  Kickstart	  1	  	                                     à	   	  	    ...
Omega ou Kickstart ?Les thèmes de Commerce Kickstart version 2   1.  Omega   2.  Omega Kickstart (sous thème de Omega)   3...
Omega KickstartOmega kickstart c’est un sous thème d’Omega                c’est notre base de travailComment créer le thèm...
Le RTL                           Pour écouter les grosses têtes ?                                                         ...
Retour	  d’expérience Créa6on	  d’un	  sous	  thème	  Omega	           Répondant	  aux	  besoins	  de	  la	  distribu6on	 ...
Processus idéalCréer un starter thème d’Omega qui sera la base de thème desprochains sous-thèmes    Omega > Omega Kickstar...
Maintenir sa boutiqueMettre à jour Commerce Kickstart   Commerce Kickstart suit les mises à jour de Drupal et de      Drup...
Et	  après	  Nous	  réfléchissons	  actuellement	  à	  la	  mise	  en	  place	  d’un	  sous	  thème	  à	  par6r	  de	  la	 ...
Ressources> Omega drupal.org/project/omega> Commerce Kickstart drupal.org/project/commerce_kickstart> Omega Tools drupal.o...
Merci !
Questions ?
Prochain SlideShare
Chargement dans…5
×

Drupagora 2012 - Une interface moderne et multi devices avec Drupal (focus sur Omega)

1 143 vues

Publié le

Conférence animée par Romain (Trained People) & Anne-Sophie (Commerce Guys) à Drupagora 2012

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 143
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Drupagora 2012 - Une interface moderne et multi devices avec Drupal (focus sur Omega)

  1. 1. Une interface moderne et multidevices avec DrupalFocus sur Omega
  2. 2. Romain  Jarraud  Formateur  /  consultant  Drupal      Anne-­‐Sophie  Picot  Chef  de  projets      
  3. 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. 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 lafenêtre d’affichage pour présenter le contenu.
  5. 5. Responsive Design> Avant (il n’y a pas si longtemps) plusieurs thèmes pour unmême site : thème « classique » et thème « mobile ».> Aujourd’hui il faudrait au moins 4 thèmes pour prendre encompte toutes les situations !> Le thème doit détecter comment est affiché le site ets’adapter automatiquement : Responsive Design.
  6. 6. Responsive Design et Drupal> Drupal est un Content Management System… et doit lerester.> 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. 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. 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. 9. Démonstration – backoffice> Configuration des zones et des régions.> Modification de la largeur des colonnes de droite et degauche.> Utilisation de grilles différentes selon les zones.> Déplacement d’une région d’une zone à une autre.
  10. 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. 11. Modules complémentaires> Omega Tools : export des réglages du backoffice afin de lesréutiliser sur un autre site.> Delta : permet d’avoir une présentation différente en fonctiondu contexte (url, type de contenu, taxonomie…).
  12. 12. Démonstration - Delta> Création d’une nouvelle présentation.> Association d’une présentation et du contexte d’utilisation.
  13. 13. Et ensuite…> La présentation s’adapte (finalement) bien.> Les medias sont toujours statiques (dimensions fixes). Il estnécessaire de les adapter également (resp_img, fitvids…).> Drupal 8 : initiatives HTML5, Layout et Mobile.
  14. 14. Omega et Commerce Kickstart
  15. 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. 16. De     Commerce  Kickstart  1     à       Commerce  Kickstart  2   Contenus  Configura6ons   Blocs   Images   Thèmes   Menus  
  17. 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. 18. Omega KickstartOmega kickstart c’est un sous thème d’Omega c’est notre base de travailComment créer le thème de ma boutique avec OmegaKickstart ? - Copier le thème Commerce Kickstart Theme pour enfaire le votre et disposer des fonctionnalités d’Omega et de notretravail sur Omega Kickstart - Créer un nouveau sous thème en se basant surCommerce Kickstart Theme
  19. 19. Le RTL Pour écouter les grosses têtes ? Right to LeftBesoin de séparer les fichier rtl par format de résolution. Global.css > global-rtl.css => sur un thème classiquePrendre en compte non pas 1 mais 3 fichiers rtl chaque résolution d’écran/support à son équivalent rtl
  20. 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. 21. Processus idéalCréer un starter thème d’Omega qui sera la base de thème desprochains sous-thèmes Omega > Omega Kickstart > Commerce Kickstart ThemeCréer un sous-thème à votre starter thème Qui sera notre thème par défaut de votre site de démoCréer un autre sous thème pour un autre cas d’usage dedémonstration à partir d’une base communeMutualiser un base de thème pour créer plus facilement desexemple de démonstration
  22. 22. Maintenir sa boutiqueMettre à jour Commerce Kickstart Commerce Kickstart suit les mises à jour de Drupal et de Drupal CommerceMettre à 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 stablesActuellement : Commerce Kickstart 7.x-­‐2.0-­‐rc3
  23. 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. 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. 25. Merci !
  26. 26. Questions ?

×