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