SlideShare une entreprise Scribd logo
Une interface moderne et multi
devices avec Drupal
Focus 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 écrans.

> Utilisation de plus en plus massive d’internet en mobilité.

> Adaptation nécessaire pour publier du contenu.
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.
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.
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.
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.
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.
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.
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.
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…).
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 est
nécessaire de les adapter également (resp_img, fitvids…).

> Drupal 8 : initiatives HTML5, Layout et Mobile.
Omega et Commerce Kickstart
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
De	
  
                                   	
   Commerce	
  Kickstart	
  1	
  	
  
                                   à	
   	
  	
  

                                      Commerce	
  Kickstart	
  2	
  




          Contenus	
  
Configura6ons	
  
                 Blocs	
  
       Images	
  
                      Thèmes	
  
          Menus	
  
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	
  ?	
  
   	
  
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
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
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.	
  
 	
  
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
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-­‐2.0-­‐rc3
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)	
  
	
  
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
Merci !
Questions ?

Contenu connexe

En vedette

Herramientas telemáticas
Herramientas telemáticas Herramientas telemáticas
Herramientas telemáticas
Angela_8
 
Draft teasing identite numerique
Draft teasing identite numeriqueDraft teasing identite numerique
Draft teasing identite numerique
L'Assurance en mouvement
 
Organizacion Administrativa de las Oficinas Centrales
Organizacion Administrativa de las Oficinas CentralesOrganizacion Administrativa de las Oficinas Centrales
Organizacion Administrativa de las Oficinas Centrales
Andrea Alfaro
 
Entrevista 1
Entrevista 1Entrevista 1
Entrevista 1
Angie Palacios Sierra
 
Presentación mayra
Presentación mayraPresentación mayra
Presentación mayra
mayrilinkatbun
 
Tablas lógica l
Tablas lógica lTablas lógica l
Tablas lógica l
dleona2013
 
Comité de Evaluación
Comité de EvaluaciónComité de Evaluación
Comité de Evaluación
Andrea Alfaro
 
Organización del aprendizaje- Diana Guamani
Organización del aprendizaje- Diana GuamaniOrganización del aprendizaje- Diana Guamani
Organización del aprendizaje- Diana Guamani
78877
 
Funciones
FuncionesFunciones
Funciones
Gabyy Carp
 
La fragua de la identidad
La fragua de la identidadLa fragua de la identidad
La fragua de la identidad
Fernando Sánchez Costa
 
Hisotria imperial
Hisotria imperialHisotria imperial
12 bonnes approches pour votre Strategie et transformation mobile
12 bonnes approches pour votre Strategie et transformation mobile12 bonnes approches pour votre Strategie et transformation mobile
12 bonnes approches pour votre Strategie et transformation mobile
Henri Kaufman
 
Lección 10
Lección 10Lección 10
Lección 10
Williams Coronel
 
La física hecha
La física hechaLa física hecha
La física hecha
rafaelsanchezramirez
 
Catálogo Flormar Campaña 13-14 2014
Catálogo Flormar Campaña 13-14 2014Catálogo Flormar Campaña 13-14 2014
Catálogo Flormar Campaña 13-14 2014
Luis Barrera
 
Portafoleo
PortafoleoPortafoleo
Portafoleo
Jean Carlos Moreno
 
Brigithe. j
Brigithe. jBrigithe. j
Brigithe. j
Brigithe-20
 
Animation Numérique de Territoire, une nouvelle dynamique grâce à l'action de...
Animation Numérique de Territoire, une nouvelle dynamique grâce à l'action de...Animation Numérique de Territoire, une nouvelle dynamique grâce à l'action de...
Animation Numérique de Territoire, une nouvelle dynamique grâce à l'action de...
Corinne Gangloff
 
Français
FrançaisFrançais
Français
francesachina
 

En vedette (20)

Herramientas telemáticas
Herramientas telemáticas Herramientas telemáticas
Herramientas telemáticas
 
Draft teasing identite numerique
Draft teasing identite numeriqueDraft teasing identite numerique
Draft teasing identite numerique
 
Organizacion Administrativa de las Oficinas Centrales
Organizacion Administrativa de las Oficinas CentralesOrganizacion Administrativa de las Oficinas Centrales
Organizacion Administrativa de las Oficinas Centrales
 
Entrevista 1
Entrevista 1Entrevista 1
Entrevista 1
 
Presentación mayra
Presentación mayraPresentación mayra
Presentación mayra
 
Tablas lógica l
Tablas lógica lTablas lógica l
Tablas lógica l
 
Comité de Evaluación
Comité de EvaluaciónComité de Evaluación
Comité de Evaluación
 
Demis duque
Demis duqueDemis duque
Demis duque
 
Organización del aprendizaje- Diana Guamani
Organización del aprendizaje- Diana GuamaniOrganización del aprendizaje- Diana Guamani
Organización del aprendizaje- Diana Guamani
 
Funciones
FuncionesFunciones
Funciones
 
La fragua de la identidad
La fragua de la identidadLa fragua de la identidad
La fragua de la identidad
 
Hisotria imperial
Hisotria imperialHisotria imperial
Hisotria imperial
 
12 bonnes approches pour votre Strategie et transformation mobile
12 bonnes approches pour votre Strategie et transformation mobile12 bonnes approches pour votre Strategie et transformation mobile
12 bonnes approches pour votre Strategie et transformation mobile
 
Lección 10
Lección 10Lección 10
Lección 10
 
La física hecha
La física hechaLa física hecha
La física hecha
 
Catálogo Flormar Campaña 13-14 2014
Catálogo Flormar Campaña 13-14 2014Catálogo Flormar Campaña 13-14 2014
Catálogo Flormar Campaña 13-14 2014
 
Portafoleo
PortafoleoPortafoleo
Portafoleo
 
Brigithe. j
Brigithe. jBrigithe. j
Brigithe. j
 
Animation Numérique de Territoire, une nouvelle dynamique grâce à l'action de...
Animation Numérique de Territoire, une nouvelle dynamique grâce à l'action de...Animation Numérique de Territoire, une nouvelle dynamique grâce à l'action de...
Animation Numérique de Territoire, une nouvelle dynamique grâce à l'action de...
 
Français
FrançaisFrançais
Français
 

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

Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
Adyax
 
StyleCop avec visual studio 2010
StyleCop avec visual studio 2010StyleCop avec visual studio 2010
StyleCop avec visual studio 2010
Novencia Groupe
 
Presentation mkframework software craftsmanship a l'afup
Presentation mkframework software craftsmanship a l'afupPresentation mkframework software craftsmanship a l'afup
Presentation mkframework software craftsmanship a l'afup
Michael Bertocchi
 
Faut-il passer à Prestashop version 1.7 ?
Faut-il passer à Prestashop version 1.7 ?Faut-il passer à Prestashop version 1.7 ?
Faut-il passer à Prestashop version 1.7 ?
Jean-François Viguier
 
Meetup WordPress Lyon #3 : Bien organiser son code dans WordPress.
Meetup WordPress Lyon #3 : Bien organiser son code dans WordPress.Meetup WordPress Lyon #3 : Bien organiser son code dans WordPress.
Meetup WordPress Lyon #3 : Bien organiser son code dans WordPress.
wplyon
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
ekino
 
Competitic solution adaptée pour site internet - numerique en entreprise
Competitic   solution adaptée pour site internet - numerique en entrepriseCompetitic   solution adaptée pour site internet - numerique en entreprise
Competitic solution adaptée pour site internet - numerique en entreprise
COMPETITIC
 
Exemple demarrage wp_v01
Exemple demarrage wp_v01Exemple demarrage wp_v01
Exemple demarrage wp_v01
Louis de Cacqueray
 
eZ Publish Platform 5.2 - Webinaire d'introduction
eZ Publish Platform 5.2 - Webinaire d'introductioneZ Publish Platform 5.2 - Webinaire d'introduction
eZ Publish Platform 5.2 - Webinaire d'introduction
Roland Benedetti
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
Html 5
Html 5Html 5
Html 5
Thomas Bodin
 
Comment travailler avec les logiciels Open Source
Comment travailler avec les logiciels Open SourceComment travailler avec les logiciels Open Source
Comment travailler avec les logiciels Open Source
Christian Charreyre
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
Microsoft
 
Performance barcampfinal
Performance barcampfinalPerformance barcampfinal
Performance barcampfinal
Oxalide
 
Utiliser des dessins vectoriels à la place d'images
Utiliser des dessins vectoriels à la place d'imagesUtiliser des dessins vectoriels à la place d'images
Utiliser des dessins vectoriels à la place d'images
pprem
 
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015
Romain Jarraud
 
Soutenance de stage messerlin
Soutenance de stage messerlinSoutenance de stage messerlin
Soutenance de stage messerlin
Gaut' Xp
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
Thomas Bodin
 
Drupagora linagora-20111110
Drupagora linagora-20111110Drupagora linagora-20111110
Drupagora linagora-20111110
Michel-Marie Maudet
 
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Office de Tourisme Luberon Durance
 

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

Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
StyleCop avec visual studio 2010
StyleCop avec visual studio 2010StyleCop avec visual studio 2010
StyleCop avec visual studio 2010
 
Presentation mkframework software craftsmanship a l'afup
Presentation mkframework software craftsmanship a l'afupPresentation mkframework software craftsmanship a l'afup
Presentation mkframework software craftsmanship a l'afup
 
Faut-il passer à Prestashop version 1.7 ?
Faut-il passer à Prestashop version 1.7 ?Faut-il passer à Prestashop version 1.7 ?
Faut-il passer à Prestashop version 1.7 ?
 
Meetup WordPress Lyon #3 : Bien organiser son code dans WordPress.
Meetup WordPress Lyon #3 : Bien organiser son code dans WordPress.Meetup WordPress Lyon #3 : Bien organiser son code dans WordPress.
Meetup WordPress Lyon #3 : Bien organiser son code dans WordPress.
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
 
Competitic solution adaptée pour site internet - numerique en entreprise
Competitic   solution adaptée pour site internet - numerique en entrepriseCompetitic   solution adaptée pour site internet - numerique en entreprise
Competitic solution adaptée pour site internet - numerique en entreprise
 
Exemple demarrage wp_v01
Exemple demarrage wp_v01Exemple demarrage wp_v01
Exemple demarrage wp_v01
 
eZ Publish Platform 5.2 - Webinaire d'introduction
eZ Publish Platform 5.2 - Webinaire d'introductioneZ Publish Platform 5.2 - Webinaire d'introduction
eZ Publish Platform 5.2 - Webinaire d'introduction
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Html 5
Html 5Html 5
Html 5
 
Comment travailler avec les logiciels Open Source
Comment travailler avec les logiciels Open SourceComment travailler avec les logiciels Open Source
Comment travailler avec les logiciels Open Source
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
 
Performance barcampfinal
Performance barcampfinalPerformance barcampfinal
Performance barcampfinal
 
Utiliser des dessins vectoriels à la place d'images
Utiliser des dessins vectoriels à la place d'imagesUtiliser des dessins vectoriels à la place d'images
Utiliser des dessins vectoriels à la place d'images
 
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015
 
Soutenance de stage messerlin
Soutenance de stage messerlinSoutenance de stage messerlin
Soutenance de stage messerlin
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Drupagora linagora-20111110
Drupagora linagora-20111110Drupagora linagora-20111110
Drupagora linagora-20111110
 
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
Atelier numérique n°1 de l'Office de tourisme Luberon Durance. Où en êtes vou...
 

Dernier

Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Jacques KIZA DIMANDJA
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Maalik Jallo
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
djelloulbra
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
InnovaSter-Trade Ltd.
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
saadbellaari
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
Adrien Blind
 

Dernier (7)

Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
 

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

  • 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   Thèmes   Menus  
  • 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-­‐2.0-­‐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