Présentation du Kit graphique CNRS et développement d`un site

Transcription

Présentation du Kit graphique CNRS et développement d`un site
Site Web sous SPIP et Kit
graphique du CNRS
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
1
Plan
♦ Présentation du Kit graphique CNRS
♦ SPIP
9 Présentation générale et caractéristiques de SPIP
9 Interface Web : Administrateur du site sous SPIP
• Gestion éditoriale (Structuration de l’information, validation des
publications…)
• Administration du site
9 Interface Web : Rédacteur sous SPIP
9 Développement/installation : Webmaster
• Installation de SPIP
• Développement graphique du site (squelettes SPIP)
♦ SPIP et EDMS
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
2
Kit graphique CNRS (1/2)
♦ Téléchargeable sur l’Intranet du CNRS :
http://intranet.cnrs.fr/harmonisation
♦ Une couleur dominante définie par département
♦ Graphisme de même couleur mais allégé pour les labos
♦ Icônes mises à disposition (identiques à celles des sites
institutionnels)
♦ Barre de navigation haute = marqueur identitaire CNRS
♦ Barre de navigation gauche = doit être identique et reconduite sur
toutes les pages du site, et comprend un menu déroulant
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
3
Kit graphique CNRS (2/2)
♦ L’insertion d’un logo du laboratoire n’est pas conseillée
♦ Le Kit CNRS fournit :
9 Des modèles .html et .dwt (pour dreamweaver) à utiliser pour créer les
pages html du site
9 Des feuilles de styles
9 Des bibliothèques d’images
9 Un répertoire z-outils pour la gestion des menus déroulants et gestion
des impressions
♦ La documentation complète est disponible sur l’Intranet du CNRS
♦ Quelques exemples de sites labos
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
4
Présentation générale de SPIP (1/7)
♦ Système de publication dynamique d’informations
♦ Licence de logiciel libre (GPL-GNU), téléchargement sur l’URL :
http://www.spip.net
♦ Logiciel largement utilisé, et évolutif.
♦ Version actuelle 1.7.2 , multilingue
♦ Configuration requise : PHP3 et MySQL
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
5
Présentation générale de SPIP (2/7)
Documentation et aide sur le Web :
♦ Site www.spip.net
9 Documentation complète, FAQ, Téléchargement des sources
♦ Site http://www.spip-contrib.net/
9 Contribution et outils pour les utilisateurs de SPIP : scripts,
squelettes, outils…..
♦ La liste de discussion des utilisateurs de SPIP: [email protected]
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
6
Présentation générale de SPIP (3/7)
♦ Outil de publication dynamique sur le Web
9 Mises à jour dynamique de la structure et du contenu du site à partir
d’une interface Web d’administration/rédaction du site
♦ Séparation des rôles :
9 Webmaster : installation du site Web, composition graphique au travers
de squelettes SPIP
9 Administrateur du site : gestion éditoriale, organisation des informations,
validation des publications ….
9 Rédacteur : contribution rédactionnelle
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
7
Présentation générale de SPIP (4/7)
♦ Aucune connaissance HTML ou technique requise pour
l’administrateur et le rédacteur (interface Web simple)
♦ Organisation de l’information en rubriques et sous-rubriques
♦ Dépôt de l’information sous forme d’articles, brèves, sites
référencés, …
♦ Mise en forme graphique et rédaction totalement séparés
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
8
Présentation générale de SPIP (5/7)
♦ Interface Web, Administration :
9 Permet de contrôler les publications, d’organiser l’information en rubriques, de
gérer les droits des rédacteurs, de paramétrer des options du site
(multilinguisme, options des articles, suivi éditorial…) .
♦ Interface Web, Rédaction :
9 Permet la rédaction d’articles et brèves sans utiliser de langage spécifique
9 Permet de proposer le référencement de sites Web externes
9 Mise en page sur le Web appliquée automatiquement.
♦ Pour le visiteur du site :
9 Homogénéité de la présentation sur l’ensemble du site
9 Moteur de recherche Full-Texte sur l’ensemble des données du site
9 Site dynamique (actualisation automatiques des données)
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
9
Présentation générale de SPIP (6/7)
Les plus de SPIP
♦ Affichage dynamique des nouveautés
♦ Rapidité d’accès
♦ Homogénéité de la présentation
♦ Facilité de rédaction en ligne des articles et brèves
♦ Possibilité d’intégrer facilement du code PHP
♦ Recherche full texte
♦ Gestion multilingue et gestion des traductions entre articles
♦ Possibilité de joindre des documents, d’intégrer des images, dans
les articles SPIP
Adapté pour informations évènementielles ou ponctuelles, et documents
simples.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
10
Présentation générale de SPIP (7/7)
Les moins de SPIP
♦ Ne permet pas d’automatiser une date de début et de fin de
publication
♦ Ne gère pas le versionning des articles
♦ Lorsqu’un article est remis au statut ‘en cours de rédaction’ (pour
une modification), il disparaît de la publication sur le site
♦ L’interface de rédaction n’est pas WYSIWYG
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
11
Administrateur du site SPIP
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
12
Rôle de l’administrateur
♦ Créer et/ou gérer les comptes rédacteurs, et leur attribuer certains
droits si nécessaire
♦ Créer les rubriques structurant le site
♦ Valider des demandes de publications émises par les rédacteurs :
9 Statut ‘publié’
9 Statut ‘refusé’
9 Statut ‘à la poubelle’ (attention, delete par SPIP à fréquence
régulière)
♦ Paramètrer l’ensemble du site sous SPIP
(administration/configuration du site)
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
13
Interface Web Administrateur (1/4)
Configuration du site :
♦ Définir les éléments du contenu des articles : ainsi on peut décider
d’interdire l’utilisation des surtitre, soustitre, descriptif, chapeau
ou post-scriptum, ou la date de publication antérieure et les motsclés.
♦ Configurer (ou désactiver) les forums de discussion sur les
articles.
♦ Permettre ou non la publication des articles avant la date de
publication qu’on leur a fixé (post-datés)
♦ Activer ou non le système de brèves.
♦ Activer ou non les statistiques du site.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
14
Interface Web Administrateur (2/4)
♦ Activer ou non le moteur de recherche SPIP.
♦ Gérer ou non des mots-clés pour le site.
♦ Gérer ou non le référencement de sites externes.
♦ Autoriser ou non les documents joints.
♦ Activer ou non le suivi éditorial (alerte par mail des demande de
publications)
♦ Activation d’une lettre automatique des nouveautés envoyée par
mail
♦ Activer ou non l’inscription automatique des rédacteurs
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
15
Interface Web Administrateur (3/4)
♦ Administrateur restreint
9 Il est possible de donner ces droits d’administration à 1 ou
plusieurs personnes, sur tout ou partie du site.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
16
Interface Web Administrateur (4/4)
Maintenance du site
♦ Permet de vider le cache.
♦ Permet de restaurer/sauvegarder la base
♦ Permet de réparer la base
♦ Permet d’effacer la base
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
17
Rédacteur
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
18
Interface Web Rédacteur (1/5)
♦ Le rédacteur accède à l’interface de rédaction par son (identifiant
+ mot de passe)
♦ Il peut rédiger des articles et brèves, dans la rubrique de son choix,
et les ‘proposer à l’évaluation’ (pour que l’administrateur valide
l’information : lui seul peut passer l’élément à l’état ‘publié’)
♦ Il peut proposer des sites à référencer
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
19
Interface Web Rédacteur (2/5)
Raccourcis typographiques pour aider à la rédaction :
♦ Mettre du texte en gras ou en italique
♦ Créer des paragraphes
♦ Créer des listes à puces
♦ Créer un tableau simple
♦ Créer un inter-titre
♦ Créer un lien hypertexte dans la page
♦ Créer une note de bas de page
♦ Afficher du code informatique
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
20
Interface Web Rédacteur (3/5)
Rédaction d’un article :
♦ Titre obligatoire
♦ Sous-titre, post-scriptum,…. selon options définies par
l’administrateur
♦ Corps de texte rédigé avec l’aide des raccourcis typographiques
♦ Valider l’article puis le ‘proposer à l’évaluation’
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
21
Interface Web Rédacteur (4/5)
Article virtuel :
♦ Article avec titre, date, et auteur renseigné sous SPIP, mais
pointant vers une autre adresse via la redirection d’article.
♦ Permet de référencer cette entrée dans SPIP, bien que
l’information soit stockée ailleurs.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
22
Interface Web Rédacteur (5/5)
Brèves:
♦ Rédaction des brèves sur le même principe que les articles, mais
simplifié.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
23
Webmaster
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
24
Installation de SPIP et des kits (1/4)
♦ Télécharger les sources sur le site de SPIP
♦ Installation automatique par spip_loader.php3 (installé à la racine)
ou copie des fichiers SPIP par FTP
♦ Création de la base MySQL
♦ Création du compte administrateur du site
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
25
Installation de SPIP et des kits (2/4)
♦ Possibilité de mettre des rewrite Rules au niveau du serveur :
9 http://www.site.fr/article.php3?id_article=x
9 http://www.site.fr/articlex.html
(Modifier le fichier inc_url_dist.php3 en remplaçant
$type_urls=‘standard’ en $type_urls=‘html’)
♦ Votre site est créé, avec la charte graphique de SPIP par défaut.
♦ Il faut maintenant créer les rubriques, articles, etc… dans l’espace
privé ‘administrateur/rédacteur’. et définir vos squelettes
personnalisés.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
26
Installation de SPIP et des kits (3/4)
Personnaliser votre site :
♦ Créer un fichier mes_fonctions.php3 à la racine du site avec
$GLOBALS[‘dossier_squelettes’] = ‘design’;
♦ Créer un répertoire design à la racine du site
♦ Placer les pages html personnalisées dans ce répertoire
♦ Les pages html fonctionnent de paire avec un fichier php3
correspondant, placé à la racine du site :
9 Ex. article.php3 à la racine et article.html placé dans le répertoire
design
9 Le fichier php3 contient le délai de mise en cache de la page et le lien
vers le fichier correspondant (variable $fond)
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
27
Installation de SPIP et des kits (4/4)
Pour appliquer le kit graphique CNRS :
♦ Placer les fichiers et répertoires du kit CNRS à la racine du site
♦ Éventuellement, placer les fichiers et répertoires du Kit CC, en
ajoutant et/ou remplaçant ceux déjà existant. Il comprend en
particulier :
9 Menu java dynamique
9 Ex. de boucles SPIP pour rubrique, article, recherche, plan…..
9 Redirection de la page d’accueil du site en fonction de la langue (du
navigateur, ou choisie par le visiteur)
♦ Utiliser les templates (ou modèles) fournis pour personnaliser vos
pages html dans le répertoire design.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
28
Développement des Squelettes (1/2)
♦ Les principaux squelettes sont :
9
9
9
9
9
9
9
29/03/2005
Rubrique
Article
Breve
Sommaire (pour page d’accueil)
plan (pour plan du site)
Recherche (pour résultats du moteur de recherche)
Pages spécifiques
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
29
Développement des Squelettes (2/2)
♦ Pour appliquer un squelette différent sur une partie du site :
9 Créer un squelette rubrique-x.html dans le répertoire design
(ce squelette s’appliquera à la rubrique X, et aux sousrubriques dépendantes)
9 Créer un squelette rubrique=x.html (s’appliquera uniquement
à la rubrique X).
9 Ce même principe peut s’appliquer aux articles et brèves, pour
les afficher sous une forme spécifique à l’intérieur d’une
rubrique donnée.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
30
Les boucles SPIP (1/3)
♦ Synthaxe générale des boucles :
<Bn>
Code HTML optionnel avant (1 fois, si boucle >= 1 réponse)
<BOUCLEn(TYPE){critère1}{critère2}...{critèrex}>
Code HTML + balises SPIP (tant que boucle OK)
</BOUCLEn>
Code HTML optionnel après (1 fois, si boucle >= 1 réponse))
</Bn>
Code HTML alternatif (si boucle vide , 0 réponse)
<//Bn>
Les boucles peuvent être récursives. (Particulièrement utilisé pour lire
les rubriques et sous-rubriques en cascade, et créer un plan du site)
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
31
Les boucles SPIP (2/3)
♦ TYPE : il indique quel type d’élément on veut lire.
9 ARTICLES, RUBRIQUES, AUTEURS, BREVES, etc .. (mots
réservés par SPIP, à écrire en majuscule, et entre parenthèses)
♦ Critères : il peut y avoir 1 à N critères combinés. Ils indiquent les
critères de sélection de l’élément choisi (écrits entre accolades) .
9 Ex : <BOUCLE_articles(ARTICLES){id_rubrique}{par
date}{inverse}>
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
32
Les boucles SPIP (3/3)
♦ Exemples de critères :
9 {par critère_de_classement} (date, titre, hasard)
9 {age<30}>
9 {id_article=5}
9 {unique} interdit l’affichage des résultats déjà affichés dans
d’autres boucles utilisant ce critère
9 {a,b} où a et b sont des chiffres. Limite le nombre de résultats
affichés, et fixe la première occurrence affichée
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
33
Les balises SPIP (1/2)
♦ Les balises SPIP : permettent d’identifier et de placer dans le code
HTML les différents sous-éléments constituant un élément SPIP.
(Ex : un article est composé d’un titre, sous-titre, texte …, auxquels
sont associés des balises spécifiques)
♦ Les balises sont précédées d’un #, et écrites en majuscules
♦ Elles sont propres à chaque élément
♦ Il est possible de tester si une balise est renseignée ou non, et de
mettre du texte optionnel : [ texte optionnel avant (#BALISE) texte
optionnel après ]
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
34
Les balises SPIP (2/2)
Exemples de balises pour l’élément article :
♦
#ID_ARTICLE affiche l’identifiant unique de l’article.
♦ #SURTITRE retourne le surtitre.
♦ #TITRE retourne le titre de l’article.
♦ #SOUSTITRE retourne le soustitre.
♦ #DESCRIPTIF retourne le descriptif.
♦ #CHAPO retourne le texte d’introduction (chapeau).
♦ #TEXTE retourne le texte principal de l’article.
♦ #PS retourne le post-scriptum.
♦ Les dates : #DATE, #DATE_REDAC, #DATE_MODIF
♦ #ID_RUBRIQUE est l’identifiant de la rubrique dont dépend l’article.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
35
Balises particulières : formulaires
♦ #FORMULAIRE_RECHERCHE : formulaire du moteur de recherche
intégré à SPIP
♦ #FORMULAIRE_FORUM : gère l’interface permettant de poster des
messages dans les forums publics.
♦
#FORMULAIRE_ECRIRE_AUTEUR : permet d’envoyer un mail à
l’auteur (d’un article) , sans afficher leur adresse email.
♦ #FORMULAIRE_INSCRIPTION : gère l’inscription automatique des
nouveaux rédacteurs.
♦ #FORMULAIRE_LANG : gère le menu déroulant pour le choix de la
langue du site
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
36
Les filtres
♦ S’appliquent aux balises SPIP
♦ 1 à plusieurs filtres par balises
♦ Sont séparés par un |
♦ Ex. de filtres :
9 |majuscules
9 |justifier ou |aligner_droite
9 |affdate (affiche la date en lettres )
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
37
Squelettes et langues
♦ Des fichiers langues sont fournis par SPIP (variables prédéfinies).
♦ Possibilité de créer ses propres variables langue en créant, dans
/ecrire/lang , des fichiers ‘local_fr.php3‘, ‘local_en.php3‘.
♦ Permet d’utiliser un seul squelette quelle que soit la langue, avec
traduction automatique des champs. Ex :
9 <:recherche:>, dans le code HTML, affichera ‘rechercher sur le site’ si
la page est affichée en français, et ‘Search on Web site’ si affichée en
anglais.
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
38
Fichiers Backend
♦ Création automatique des fichiers au format XML/RSS pour que
d’autre sites syndiquent le contenu du site SPIP
♦ Possibilité de syndiquer des sites Web externes, référencés sous
SPIP
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
39
SPIP et PHP
♦ Possibilité d’intégrer du code PHP dans les pages HTML
♦ Attention : PHP est interprété APRES les boucles et balises SPIP.
Une variable PHP ne peut donc pas être intégrée dans les critères
d’une boucle SPIP
29/03/2005
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
40
SPIP et EDMS : complémentaires……
EDMS
SPIP
♦ Affichage dynamique des
♦
♦
♦
♦
♦
♦
nouveautés
Rapidité d’accès
Homogénéité de la présentation
Facilité de rédaction en ligne des
articles et flash infos
Accès privé (Rubrique Intranet) basé
sur le réseau Ingénieur et certificat
Point d’entrée unique pour l’accès
aux informations (Liens vers EDMS,
autres serveurs Web, ….)
Recherche full texte
Informations évènementielles ou
ponctuelles, documents simples,
nécessitant une publication
dynamique. Site SPIP = Point
d’entrée unique.
29/03/2005
♦ Base de connaissance et base
documentaire IN2P3
♦ Fonctionnalités GED (Gestion des
droits d’accès, traçabilité, statuts
des documents, processus de
validation du dépôt des docs)
♦ Base de données unique pour tous
les labos de l’IN2P3
♦ Partage de l’information
♦ Travail collaboratif possible (cycle de
rédaction, annotations,….)
♦ Recherche sur méta-données
uniquement
Documents nécessitant une gestion
fine des droits, un partage de
l’information,et une traçabilité.
Lien du site SPIP vers les documents
EDMS.
Site Web sous SPIP et Kit graphique CNRS (D. Cathala)
41