drupal 7 - fondamentaux et ateliers

Frédéric Simonet

Formateur Entreprise 2.0

Email : [email protected]

Tél. : 06 62 63 94 49

Fondamentaux et ateliers

Drupal 7

Année 2013/2014

ADBS-INTD

mailto:[email protected]

http://intd.cnam.fr/

Programme du 1er jour

Présentation de Drupal (matin)

Atelier sur intégration du contenu

Atelier sur intégration des menus

Programme du 2ème jour

Atelier sur intégration des thèmes

Atelier sur intégration de l’outil Panels

Atelier sur intégration de l’outil Views

Frédéric Simonet



Tél. : 06 62 63 94 49

Positionnement de Drupal en tant que CMS

Préambule


Positionnement des CMS

CMS et usages du Web 2.0

CMS et gestion de contenu*

CMS et organisation du contenu**

* CMS vs Wikis/Blogs. ** Drupal vs Joomla/Wordpress

Données

publiques

Données

privées

Production

Agrégation

Google Drive

Box

Basecamp

Hojoki Netvibes

WordPress

Joomla

Drupal

CMS et Web 2.0 en terme d’usages : publication de contenu.

Droits en

écriture

Modèle

d’organisation

Cycle de

production Finalité

CMS Semi

ouverts Classification Longs Portails institutionnels

Wiki Ouverts Classification et

indexation Très courts

Portails encyclopédiques [mis

en œuvre dans un contexte

collaboratif]

Blog Fermés Indexation Courts Actualités

CMS et gestion de contenu : CMS vs Blogs et Wikis.

http://www.usemod.com/cgi-bin/mb.pl?CestQuoiUnWiki

Indexation Classification Classification à

facettes

Drupal OUI OUI

Joomla NON NON

Wordpress OUI NON

Drupal et ses concurrents en terme d’organisation du contenu.

Classification : concepts clés

Racine [classe de base]

Classes hiérarchisées

Éléments [individus]

—

Remarque. — Les notions de racine, classe

et élément se définissent comme des objets

(terme générique).

Racine/classe/élément

Racine : objet décrivant l’ensemble des

éléments à classer.

Classes : objets dont la fonction est de

regrouper des objets (classes ou éléments)

de plus bas niveau.

Éléments : objets constituant la collection à

organiser (article d’un site Web).

Notion de classe

« La classe est un regroupement d’objets

opéré en fonction d’au moins un attribut

commun, qui sert de critère distinctif. »

—

Source : Jacques MANIEZ, p. 231, « Trois composantes fondamentales des

langages documentaires », Actualité des langages documentaires -

Fondements théoriques de la recherche d'information, éd. ADBS, 2002.

Notion de plan de classement

Le plan de classement désigne l’ensemble

des classes qui vont servir de support au

rangement des éléments.

—

Source : Jacques MANIEZ, p. 230, « Trois composantes fondamentales des

langages documentaires », Actualité des langages documentaires -

Fondements théoriques de la recherche d'information, éd. ADBS, 2002.

Types de classement

Classification hiérarchique : formation

d’un plan de classement faisant intervenir

des classes hiérarchisées.

Classement catégoriel : affectation d’un

élément à une classe.

Classement relatif : attribution d’une place

ou d’un rang à un élément.

Classification et Web

Dans le contexte du Web, un objet (racine,

classe ou élément) correspond à une page

Web.

Plus spécifiquement, la notion de racine

correspond à la page d’accueil, les classes

deviennent des rubriques, les éléments des

pages élémentaires (articles).

Indexation

Attribution d’une marque distinctive [indice,

descripteur, étiquette, mot clé, tag]

renseignant sur le contenu d’un document

[qui peut être une page Web].

—

Source : Jacques MANIEZ, p. 144, « Les problèmes de l’indexation », Actualité

des langages documentaires - Fondements théoriques de la recherche

d'information, éd. ADBS, 2002.

Class. à facettes : concepts clés

Facette

Termes [classes] hiérarchisés

Éléments [individus]

Facette/terme/élément

Facette : objet dont la fonction est de

regrouper des termes en privilégiant un

point de vue.

Terme : objet jouant le rôle d’une classe.

Élément : objet de la collection pouvant être

assigné à des termes qui appartiennent à

des facettes distinctes.

Notions de facette/terme

Les facettes, qui regroupent des termes,

expriment un point de vue. À l’intérieur de

chaque facette, les termes sont distribués

hiérarchiquement.

—

Source : Jacques CHAUMIER, p. 65, « Les langages documentaires », Les

techniques documentaires, éd. PUF, 1979.

Logiques sous-jacentes

Classification : logique hiérarchique ;

relation d’inclusion entre classes

hiérarchisées, relation d’appartenance entre

un élément et sa classe de référence.

Indexation : logique combinatoire.

Classification à facettes : logiques

combinatoire et hiérarchique.

Frédéric Simonet



Tél. : 06 62 63 94 49

Unité 1.1 Arch. logicielle de Drupal

Client-serveur, 3-tiers, CRUD


Modèles d’architecture de base

A. Modèle d’architecture client-serveur

B. Modèles plus spécifiques (patterns)

Modèle 3-tiers

Modèle MVC (Modèle-Vue-Contrôleur)

Modèle CRUD

Modèle d’architecture client-serveur

L’utilisateur accède à des ressources externalisées

Modèle 3-tiers

Couche présentation

Couche application-métier

Couche données

Couche présentation*

Couche logicielle responsable de la

structuration et du formatage du contenu, et,

du dialogue avec l’utilisateur.

—

Langages : (X)HTML, CSS et Javascript.

* Les scripts sont exécutés par le poste client.

Couche application*

Couche logicielle responsable de la logique

métier et des services techniques

(intégration des couches présentation et

données notamment).

—

Langage applicatif des trois CMS : PHP

* Les scripts sont exécutés par le serveur.

Couche données*

Couche logicielle responsable du dialogue

avec la base de données (écriture-lecture)

et de la persistance des données.

—

Langage de requête des trois CMS : SQL

* Les requêtes sont exécutées par le serveur [moteur] de base de données.

Modèle CRUD

Opérateur générique create

Opérateur générique read

Opérateur générique update

Opérateur générique delete

Modèle CRUD (I)

Opérations d’écriture

Opérateur d’insertion : create

Opérateur de mise à jour : update

Opérateur de suppression : delete

Remarque. — Les droits en écriture sont

définis à partir de ces trois opérateurs

élémentaires.

Modèle CRUD (II)

Opérations de lecture (read)

Opérateur de projection

Opérateur de sélection

Opérateur de jointure

Remarque. — Les droits en lecture sont

définis à partir de ces trois opérateurs

élémentaires.

Plateforme logicielle

Ce terme désigne les composants logiciels

sans lesquels le CMS Drupal ne peut pas

fonctionner :

– un serveur HTTP ;

– « le » module applicatif Zend-PHP* ;

– un serveur de base de données ;

– et un système d’exploitation.

* Serveur de pages Web. ** Extension du serveur HTTP.

Plateforme LAMP

Système d’exploitation Linux

Serveur HTTP Apache

Serveur de base de données MySQL

Module applicatif Zend/PHP

Ce qu’il faut retenir

Drupal est un outil multi-utilisateurs orienté

communication-marketing dont la principale

fonction est de simplifier la publication de

contenu sur le Web.

Back-office Drupal

Front-office Drupal

Frédéric Simonet



Tél. : 06 62 63 94 49

Unité 1.2 Arch. fonctionnelle de Drupal

Mise en page (layout),contenu et menus


Fonctions de base Drupal

Personnalisation des profils « utilisateur »

Personnalisation de la mise en page

Gestion du contenu*

Gestion des menus**

Intégration des extensions

* Organisation puis classement du contenu. ** Maillage des pages du site.

Frédéric Simonet



Tél. : 06 62 63 94 49

Mise en page (layout)

Architecture des pages


Définition des thèmes

Les thèmes sont des composants logiciels

dont la principale fonction est de générer

des gabarits. (Ils déterminent aussi le

comportement des menus.)

Architecture des gabarits

Bloc principal : main content

Blocs périphériques - niveau 1 : regions

Blocs périphériques - niveau 2 : blocks

Remarque. — Une région peut contenir

plusieurs blocs ; un bloc ne peut être

assigné qu’à une seule région.

Remarques sur les thèmes

Les thèmes fournissent un jeu de positions

sur lesquelles — depuis le back-office —

l’utilisateur ne peut pas agir*.

Le rôle de l’utilisateur se limite à la définition

[création] de blocs ; un bloc est

nécessairement lié à une des régions

disponibles.

* Les régions ne contenant aucun bloc ne sont pas affichées.

BLOC 1

BLOC 2

BLOC 3

Coût de solutions alternatives

Acheter un thème: 50 euros

Utiliser le logiciel Artisteer : 129,95 euros

[Faire] coder le thème : 3 000 euros

Processus standard

1. Utiliser Artisteer pour tester

2. Configurer le thème acheté

3. Personnaliser le code à la marge

—

Commentaire. — Cette approche réduit les

coûts tout en garantissant un thème à la fois

opérationnel et personnalisé.

Quelques acteurs du design

Themebrain (Drupal)

YOOtheme (Joomla et Wordpress)

RocketTheme (Joomla et Wordpress)

JoomlArt (Joomla)

Portail Best of Joomla

http://themebrain.com/

http://www.yootheme.com/

http://www.rockettheme.com/

http://www.joomlart.com/

http://www.bestofjoomla.com/

http://www.bestofjoomla.com/

Frédéric Simonet



Tél. : 06 62 63 94 49

Vocabulaire, terme et nœud

Gestion du contenu


Organisation du contenu

Drupal fait intervenir la notion de

vocabulaire, équivalente à la notion de

facette dans le domaine de la classification

à facettes.

Chaque vocabulaire désigne un plan de

classement constitué de classes que Drupal

appelle des termes.

Modèle d’organisation de Drupal : classification à facettes.

Classement des pages

Une terme de niveau inférieur ne peut pas

être inclus dans plusieurs termes de niveau

supérieur.

Un nœud peut appartenir à plusieurs

termes… d’un même vocabulaire ou de

plusieurs vocabulaires.

Modèle d’organisation n°1

Vocabulaires = { Espèces }

Termes = { Animal, TB, TC, Félidés, TE }

Espèces TB TC

Animal

TE Félidés

Terme

Vocabulaire


Règne

V2

Famille

Vocabulaires = { Règne, V2, Famille } ; termes = { Animal, TB, TC, Félidés, TE }

TB TC

Animal

TE Félidés


TB

T

C

An

ima

l

TE

F

éli

dés

Rè

gn

e

V2

Fam

ille

Ex

tinc

tion

S

ure

xp

loita

tion

Esp

èce

s m

en

acé

es

S

ectio

n

Ca

tég

orie

TIGRE

Liens utiles

Systématique | Wikipedia

Taxinomie | Wikipedia

Rangs Taxinomiques | Wikipedia

Taxon | Wikipedia

http://fr.wikipedia.org/wiki/Syst%C3%A9matique

http://fr.wikipedia.org/wiki/Syst%C3%A9matique

http://fr.wikipedia.org/wiki/Taxinomie

http://fr.wikipedia.org/wiki/Taxinomie

http://fr.wikipedia.org/wiki/Rang_taxinomique

http://fr.wikipedia.org/wiki/Rang_taxinomique

http://fr.wikipedia.org/wiki/Taxon

http://fr.wikipedia.org/wiki/Taxon

Frédéric Simonet



Tél. : 06 62 63 94 49

Identifiant, liens et bloc

Gestion des menus


Processus de création

1. Définition de l’identifiant du menu

2. Définition des liens du menu

3. Génération du bloc associé

—

Remarques : – Drupal permet de définir

plusieurs menus ; – les liens sont affichés

dans le bloc périphérique.

Trois types de lien

1. Lien pointant vers terme

2. Lien pointant vers nœud

3. Lien pointant vers une application

Lien sur nœud

http://www.[domaine]/node/[id_nœud]

Lien sur terme

http://www.[domaine]/taxonomy/term/[id_terme]

Lien sur module Contact

http://www.[domaine]/contact

Frédéric Simonet



Tél. : 06 62 63 94 49

Rôles et droits associés

Gestion des droits


Rôles prédéfinis

Anonymous User

Authenticated User

Administrator

Droits associés

Cas du module Contact

Anonymous User : Lecture/Écriture

Authenticated User : Lecture/Écriture

Administrator : Lecture/Écriture

Frédéric Simonet



Tél. : 06 62 63 94 49

Annexe Sites Web Drupal


Quelques références

http://www.whitehouse.gov/

http://www.nasa.gov/

http://www.mediapart.fr/

http://www.whitehouse.gov/

http://www.nasa.gov/

http://www.mediapart.fr/

Frédéric Simonet



Tél. : 06 62 63 94 49

Annexe Drupal vs Joomla vs Wordpress


Drupal - Joomla - WordPress

« Drupal, Joomla et WordPress […] arrivent

[…] en tête des réponses à nos différentes

questions […] : popularité, utilisation, CMS

préférés, CMS recommandés, etc. »

—

Source : Vincent MAUCORPS (Smile), CMS open source : pénétration, usages et

appréciations*(pdf).

* Livre blanc publié en 2013.

https://app.box.com/s/awgajz3e9asaydtz85el

https://app.box.com/s/awgajz3e9asaydtz85el

Demande des utilisateurs

Source : Google Trends.

Parts de marché sept. 2013

“How to read the diagram: 66.2% of the websites use none of the content management systems that we

monitor. WordPress is used by 19.6% of all the

websites, that is a content management system market share of 57.9%.”

Source : Web3Techs.

Parts de marché sept. 2012

Source : Web3Techs.

“How to read the diagram: 69.1% of the websites use none of the content management systems that we

monitor. WordPress is used by 16.8% of all the

websites, that is a content management system market share of 54.4%.”

http://w3techs.com/technologies/overview/content_management/all

Tendances 2012-2013

Les CMS gagnent 2,9% en passant de

30,9% à 33,8%. Drupal affiche la plus forte

progression :

– Drupal : +10% ;

– Joomla : +7,9% ;

– Wordpress : +6,4%.

Statistiques des trois portails

Source : Alexa.

Comparaison des trois CMS

Critère Définition

Critère 01 : INS Hébergement et facilité d’installation

Critère 02 : CAB Coût d’acquisition pour site de - de 15 pages ou un blog

Critère 03 : CAH Coût d’acquisition pour des sites complexes

Critère 04 : IHM Flexibilité c.-à-d. modularité du design

Critère 05 : DES Ergonomie c.-à-d. utilisabilité du back-office

Critère 06 : CON Organisation du contenu

Source : Idealware.

Comparaison des trois CMS

Critère Définition

Critère 07 : WOR Workflow (gestion des droits)

Critère 08 : WEB2 Fonctions 2.0 : gestion des commentaires, RSS, etc.

Critère 09 : EXT Extensibilité et interopérabilité avec applications tiers

Critère 10 : SCA Scalabilité et sécurité

Critère 11 : MAI Maintenabilité (facilité de modification et stabilité du noyau)

Critère 12 : SUP Support (importance de la communauté)

Source : Idealware.

Drupal vs Joomla

Joomla vs Wordpress

Frédéric Simonet



Tél. : 06 62 63 94 49

Annexe Rédaction du contenu - critères et métriques


Critères de référence

Adéquation-pertinence (Relevance)

Originalité (Insight)

Clarté (Simplicity)

Profondeur (Depth)

Mise en perspective (Breadth)

Source : Tito PHILIPS, « The 5 Elements of Authoritative Content »,

problogger.net.

http://www.problogger.net/archives/2011/03/14/the-5-elements-of-authoritative-content/

Métriques de référence

Entre 55 et 65 caractères par ligne

Pas plus de 10 segments par page

Au moins 300 mots par page

Pas plus de 120 mots par paragraphe

Frédéric Simonet



Tél. : 06 62 63 94 49

Annexe Principes du SEO


Google

“Make a site with a clear hierarchy and text

links. Every page should be reachable from

at least one static text link.”

—

Source : « Webmaster Guidelines », google.com.

https://support.google.com/webmasters/answer/35769?hl=en

SEOMOZ

“Variables that search engines can take into

account directly : keyword placement, links

and site structure.”

—

Source : « How usability experience and content affect search engine

rankings », seomoz.org - moz.com.

http://www.seomoz.org/beginners-guide-to-seo/how-usability-experience-and-content-affect-search-engine-rankings











SEO Gold

“The directory structure tends to mimic the

link or navigation structure of the site [et

inversement].”

—

Source : « SEO Tutorial - Web Site Optimization », seo-gold.com.

http://www.seo-gold.com/seo-tutorial/web-site-optimization




More than 4 Links

“If it takes at least 4 links to go from your

home page to the deepest pages of your

website some might be missed by the

search engine spiders.”

—

Source : « SEO Tutorial - Web Site Optimization », seo-gold.com.





Structurer les pages

Deux niveaux de classement…

CN1 : catégories N1 - pages de niveau 1

CN2 : catégories N2 - pages de niveau 2

PN3 : pages élémentaires de niveau 3

Directory Structure – SEO

Niveau de classement

La notion de niveau de classement ne peut

s’appliquer qu’aux pages qui désignent des

classes [catégories], dont la fonction est de

segmenter le contenu.

Ni la page d’accueil, ni les pages

élémentaires ne peuvent être considérées

comme des niveaux de classement.

Hors niveaux de classement

Page d’accueil : elle constitue la racine du

site, elle sert à décrire l’ensemble des pages

qui constituent le site.

Pages élémentaires : ce sont les pages de

plus bas niveau qui, par définition, sont

indivisibles.

Niveaux hiérarchiques

Un site Web faisant appel à n niveaux de

classement fait intervenir n+2 niveaux

hiérarchiques comprenant :

– page d’accueil ;

– n niveaux intermédiaires ;

– niveau élémentaire.

Hiérarchiser les liens du menu

… correspondent à trois clics

Liens N1 pointent vers catégories N1

Liens N2 pointent vers catégories N2

Liens N3 pointent vers pages N3

Navigation Structure – SEO

Hiérarchiser les mots clés

Mots clés N1 associés aux catégories N1

Mots clés N2 associés aux catégories N2

Mots clés N3 associés aux pages N3

Keywords off Page – SEO

Structurer le texte des pages

Titre : title et h1 : 10 mots clés max.

Descriptif : 20 mots clés max.

Sous-titres (titraille) : h2, h3…, h6

Entrées : strong

Texte courant : em

Keywords on Page – SEO

Méthodologie

Lister les thèmes i.e. mots clés du site

Normaliser la sémantique des mots clés

Hiérarchiser les mots clés

Dissocier les plans de classement

Frédéric Simonet



Tél. : 06 62 63 94 49

Siloing du contenu et des menus

SEO : technique avancée


Siloing : structure des pages

Siloing : structure des liens

Siloing (I)

“The home page links out to just the top-

level landing pages of the site.”

—

Source : « How to Theme a Web Site for Clear Subject Relevance »,

bruceclay.com.

http://www.bruceclay.com/newsletter/volume73/theme.html

Virtual Siloing (II)

“Pages within a particular silo can be freely

linked between, but links should not cross

over to pages in different silos.”

—

Source : « How to Theme a Web Site for Clear Subject Relevance »,

bruceclay.com.

http://www.bruceclay.com/newsletter/volume73/theme.html

Étude de cas Heifer

http://www.heifer.org/

Étude de cas Adamence

http://www.adamence.com/

drupal 7 - fondamentaux et ateliers

Education