Ritimo-Nursit // Module 1 // Octobre 2013 1 Créer son site web Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin
Ritimo-Nursit // Module 1 // Octobre 2013 1
Créer son site web
Avec la distribution e-change http://www.plateforme-echange.org/
Benoît MametCédric Morin
Ritimo-Nursit // Module 1 // Octobre 2013 2
Introduction
Ritimo-Nursit // Module 1 // Octobre 2013 3
Qu'est-ce qu'un site web ?
Ritimo-Nursit // Module 1 // Octobre 2013 4
Le réseau
InternetServer 87.98.177.221
- Navigateur Internet : IE, Mozilla Firefox- Traitement de texte - Traitement d'images - Client FTP
- DNS (résolution de nom) http://forumsocial.info - Serveur Web / php : noyau de SPIP - BDD , mysql / sqlite : contenus (articles, rubriques, documents multimédias)
Ritimo-Nursit // Module 1 // Octobre 2013 5
Un site Internet
● Ensemble de documents reliés par des liens hypertextes, accessibles entre eux via Internet
– fichiers HTML (présentation), XML (échange de données)...– ressources multimédia : image, son, video...
● URL (Universal Ressource Location) : permets de faire référence de manière unique à un document
– nom du protocole utilisé pour accèder au document– nom du serveur qui l'héberge– numéro du port réseau (optionnel)– chemin d'accès, sur la machine, à la ressource
● Ex : http://www.spip.net:80/fr/index.html
Ritimo-Nursit // Module 1 // Octobre 2013 6
Des liens hypertextes
Ritimo-Nursit // Module 1 // Octobre 2013 7
Consultation d'une page Web
PC+ Navigateur Internetserveur Web
http://www.spip.net
4. Interprétation et affichage du navigateur
http://www.spip.net
1. Action de l'utilisateur dans le navigateur (clic lien)
2. Requête HTTP du navigateur avec adresse
3. Réponse HTTP du serveur avec document HTML
1
2
3
4
port 80
port 80
http
Ritimo-Nursit // Module 1 // Octobre 2013 8
Un serveur Web
Ordinateur connecté en permanence à Internet et chargé de servir des documents Web
écoute et réception d'une requête (protocole / port)
interprétation et év calcul transfert du document au
client Web (protocole / port)
système de fichiers
racine
...
base de données
module serveur
module de calcul
PHP / Perl / Python
Apachehttp
Ritimo-Nursit // Module 1 // Octobre 2013 9
Un navigateur Internet
– 3 Modules– client HTTP dans une architecture client/serveur– moteur de rendu des Standards du Web : HTML et CSS – interface utilisateur : browser, butineur, brouteur, explorateur...
– Types et répartition– Internet Explorer : 12 % / Windows (IE7 : 26%, IE6 : 20,6%) – Mozilla Firefox : 28 % / GPL / multiplateforme – Safari : 4 % / Apple / proriétaire – Chrome : 53 % / google
– Langages interprétés– XHTML, CSS, JavaScript nativement– Flash en plugins
– Cookies– stocke sur la machine cliente des fichiers temporaires
Ritimo-Nursit // Module 1 // Octobre 2013 10
Une page HTML
● Fichier au format texte ● utilisant des balises qui spécifient la structure et l'intention de
présentation du contenu● interprété par le navigateur pour l'aspect final● intègre un système de liens et d'inclusion d'éléments ● peut intégrer des langages pris en charge par le navigateur : CSS
(présentation), javascript (calcul)...
<html><head></head><body>
Hello World !</body>
</html>
<html><head></head><body>
Hello World !</body>
</html>
=
Ritimo-Nursit // Module 1 // Octobre 2013 11
Une base de données
● Organise des données sous forme de tables et des champs (eq tableau de données)
● Par rapport à un fichier texte– intègre les fonctionnalités de sécurité (droits)– fournit des modules de programmation (ex PHP) facilitant l'accès aux
données (requêtes)
● Extrait de la BDD de SPIP
table : articlechamps
entrées
Ritimo-Nursit // Module 1 // Octobre 2013 12
Intégration des ressources multimedia
PC+ Navigateur Internetserveur Web
● La source des éléments multimédia (images, video, sons, animations...) affichés dans les pages Web n'est pas contenue dans la page HTML● Ils sont référencés sous forme de lien et téléchargés par le navigateur au moment de l'affichage de la page.● Les ressources multimédias peuvent se trouver :
● sur le même serveur web • sur la machine locale (rare)● sur un autre serveur web
page HTML
http://www.spip.net/IMG/siteon0.jpg
requête image
image
Ritimo-Nursit // Module 1 // Octobre 2013 13
Intégration des ressources multimedia
PC+ Navigateur Internet
serveur Web 1
page HTML
http://www.sp
ip.net/IMG/sit
eon0.mp3
serveur Web 2
Ritimo-Nursit // Module 1 // Octobre 2013 14
Consultation d'une page dynamique
PC+ Navigateur Internet
serveur Web
article.php?id_article=2
5. Interprétation et affichage du navigateur
article.php?id_article=2
1. Action de l'utilisateur
2. Requête HTTP du navigateur avec adresse
4. Réponse HTTP du serveur avec page HTML
1
2
3
5
base de données
4
3. Calcul de la page HTML en lien avec la base de données
MISE
EN FORME
CONTENU
Ritimo-Nursit // Module 1 // Octobre 2013 15
Mise à jour des pages Web
PC + Navigateur Internet
serveur Web
requête
HTTP
PC + Client FTPFTP
racine
...
fichiers envoyés vers le serveur
Ritimo-Nursit // Module 1 // Octobre 2013 16
Dans le cas d'un site dynamique
PC + Navigateur Internet
serveur Web
/ecrire/article_edit.php?id_article=2
base de données
– l'essentiel du contenu se trouve dans la BDD et peut être mis à jour via le serveur Web
– les utilisateurs autorisés y accèdent en HTTP (navigateur web) comme en consultation
– certains fichiers multimédias peuvent être envoyés en HTTP (limite de taille)
– les mises à jour du moteur de publication nécessitent des envois FTP
HTTP (POST)
fichier
texte
Ritimo-Nursit // Module 1 // Octobre 2013 17
Des sites statiques ...
● Création et modification manuelle des pages– Connaissance du HTML ou utilisation d'un logiciel de réalisations de
pages Web (utilitaire graphique, éditeur de texte...).– Envoi manuel des pages par FTP.
● Le webmestre est le point de passage obligé pour mettre les modifications en ligne.
● Il est difficile de mettre en place une navigation qui évolue automatiquement (liens vers les nouveaux contenus).
● Le contenu fait partie du contenant
Ritimo-Nursit // Module 1 // Octobre 2013 18
... aux sites dynamiques
● Le système de publication est installé sur le serveur– modifications du site en utilisant un simple navigateur Internet
● Les données sont organisées dans une base– données interdépendantes (article, rubrique, auteur)– données organisées en champs (titre, descriptif, texte)
● Le travail est collaboratif– droits distincts de gestion du contenu, workflow, groupware...
● Le site public se construit dynamiquement à partir des publications du site privé
– contenu séparé de la mise en forme– construction dynamique sur la base d'un canevas (blocs)
Ritimo-Nursit // Module 1 // Octobre 2013 19
La distribution e-change
http://www.plateforme-echange.org/38
http://vimeo.com/61540811
Ritimo-Nursit // Module 1 // Octobre 2013 20
Une distribution
● Un assemblage de plusieurs paquets (qui fournissent chacun un service) en un ensemble cohérent prêt à l’emploi
● Très fréquent dans le monde des logiciels libres● Exemple de Linux :
● distribution Ubuntu (orientée grand public)● distribution Debian (orientée serveurs)● distribution Red Hat (orientée pour les entreprises)
● Les distributions se distinguent en général par le choix des paquets et la cohérence qui guide ce choix
● Pas de rupture de compatibilité : on peut passer d’une distribution à une autre sans perdre son travail
Ritimo-Nursit // Module 1 // Octobre 2013 21
À destination des associations
● Outil de communication et d’information pour les associations– permettre de faire connaître leurs actions, ressources...– pas un outil de gestion de l’association– initiée par un effort conjoint de Ritimo et Nursit
● Faciliter la création d'un site web par les associations– Leur permettre d'être indépendante, de ne pas dépendre
d'un prestataire technique– Regroupe les fonctionnalités les plus courantes pour ce
type de site
Ritimo-Nursit // Module 1 // Octobre 2013 22
Pour leur permettre d'être visibles par tous
● Le site web doit être accessible à tout public– En situation de handicap
accessibilité technique des contenus– En consultation sur tout périphérique
design responsive– Bien référencé
balisage sémantique et structuré
● Bonnes pratiques techniques de plus en plus complexes à mettre en œuvre, fournies par la distribution
Ritimo-Nursit // Module 1 // Octobre 2013 23
Dans la boîte
● Construit sur la version 3.0 de SPIP● Qualité des squelettes (templates)
– Développés dans un souci d’accessibilité– Sémantiques (HTML5), micro-data (référencement)– Responsive (s’adaptent à la taille de l’écran du terminal de
consultation : directement prêts pour les mobiles et tablettes sans version mobile spécifique)
– Hautement configurables (grosse évolution du squelette SarkaSpip)
– Thémables (intègre 7 variantes visuelles)● Sélection de plugins testés, éprouvés et maintenus
Ritimo-Nursit // Module 1 // Octobre 2013 24
Fonctionnalités
● Extranet, espaces réservés aux membres● Agenda● Galeries photos● Commentaires avec modération facile
(depuis le mail de notification, depuis la page publique)
● Édition, correction des articles directement sur le site public
● Contact avec enregistrement dans le site et envoi par mail au webmestre
● Édition des menus de navigation du site● Lecteur audio, Lecteur vidéo accessible● Notation, partager sur
Facebook,Twitter..., recommander par email, sélectionner des articles
● Nuages de mots-clés
● Composition et envoi d’une newsletter, gestion des inscriptions à la newsletter (opt-in ou double opt-in)
● Articles en dehors des rubriques, ou dans
plusieurs rubriques● Afficher un fil twitter, tweeter
automatiquement les nouveaux articles
● Afficher la météo● Éditer les templates depuis le site,
choisir/apercevoir un thème depuis l’espace d’administration
● Insérer automatiquement des liens youtube, flickr, ....
● Voir les données Exif des photos● Avoir un site rapide !
Ritimo-Nursit // Module 1 // Octobre 2013 26
L'histoire minuscule et anecdotique de
SPIP
● Système de Publication pour l’Internet P…● Logiciel Libre, un des premiers CMS
Issu du monde militant● 1998 Synthèse des outils de
publication des sites des éditionsVuibert, du site du Monde diplomatique et du site Uzine (webzine en ligne).
● 2001 lancement officiel de SPIP 1.0 ● (2004 création du fork SPIP-Agora pour le gouvernement)
● 2008 SPIP 2.0● 2012 SPIP 3.0
Ritimo-Nursit // Module 1 // Octobre 2013 27
SPIP 3.0
● Navigation repensée dans l’espace d’administration● Médiathèque pour la gestion des documents● Documents, révisions, mots clés pour tous les
objets● Configuration et édition des urls article par article● Boucle (DATA) http://spip-love-opendata.nursit.com/
+ plein de fonctionnalités possibles dans les plugins
Ritimo-Nursit // Module 1 // Octobre 2013 28
Aujourd'hui
● 10 700 sites sous SPIP :http://www.spip.net/fr_article884.html
● 34 000 trouvés : http://stats.spip.org/ ● 8 nouvelles versions depuis 2001, environ 2 par an.● Un logiciel libre, distribué sous licence libre GPL, et gratuit.● Une communauté active : 4 sites de référence et d'aide, une
liste de diffusion, des forums et des faq, plus de 7000 contributeurs sur spip-contrib.
● Depuis 2006 : développé en sub-version (SVN) et intégrant des plugins (depuis SPIP 1.9).
Ritimo-Nursit // Module 1 // Octobre 2013 29
Sites consacrés à SPIP
● SPIP documentation officielle http://www.spip.net/fr
● Plugins SPIP ● L'ensemble des plugins disponible● http://plugins.spip.net
● SPIP – Contrib tutoriels, squelettes, documentation de
plugins http://contrib.spip.net
http://boussole.spip.net
Ritimo-Nursit // Module 1 // Octobre 2013 30
Une communauté active
● Utilisateurs : [email protected]● news://news.gmane.org/gmane.comp.web.spip.user
● Développeurs : [email protected]● news://news.gmane.org/gmane.comp.web.spip.devel
● Développeurs sous SVN (noyau, plugins, squelettes) :[email protected]
● news://news.gmane.org/gmane.comp.web.spip.zone
● Canal Irc : http://irc.spip.net
Ritimo-Nursit // Module 1 // Octobre 2013 31
SPIP : un outil de publicationapparenté aux CMS
Ritimo-Nursit // Module 1 // Octobre 2013 32
Structure des contenus
● Les contenus sont organisés – sous forme d'objets éditoriaux (rubriques, articles,
auteurs...) – constitués de champs (titre, descriptif, date, texte...)
● Rubrique : titre, descriptif, rubrique-mère● Article : titre, texte, rubrique-mère, auteur● Auteur : nom, biographie, droits
● Ces données interagissent entre elles.● Le contenu est structuré
– de manière arborescente (rubriques), – transversale (mots-clefs) – ou globale (indexation du moteur de recherche).
Ritimo-Nursit // Module 1 // Octobre 2013 33
Extrait de la Base de Données
– table : spip_articles
– table : spip_rubriques
– table : spip_auteurs
Ritimo-Nursit // Module 1 // Octobre 2013 34
Les contributeurs (et leurs rôles)
● Visiteur– Consulte le site public et peut participer
au forum ● Rédacteur
– Rédige et propose de nouveaux contenus● Administrateur restreint
– Gère la structure et modère le contenu du site dans ses rubriques
● Administrateur– Détermine la ligne éditoriale, gère les
auteurs et les options du site– Gère la structure du site (rubriques)– Modère le contenu (articles, brèves,
sites, etc.)
Ritimo-Nursit // Module 1 // Octobre 2013 35
Squelettes
● Les pages du site public sont construites à partir de gabarits (templates) appelés « Squelettes »
● Les squelettes sélectionnent les contenus et choisissent comment les afficher
● Utilisent 4 langages :– Les boucles SPIP pour la sélection des contenus– HTML pour l'affichage– CSS pour la mise en forme– Javascript pour définir les animations et comportements
Ritimo-Nursit // Module 1 // Octobre 2013 36
Le site est dynamique
● Les pages du site sont construites automatiquement à partir
– Des contenus éditoriaux générés par les utilisateurs– Des réglages configurés par l'administrateur– Des squelettes pour la mise en forme
Ritimo-Nursit // Module 1 // Octobre 2013 37
Créer un site SPIP
Ritimo-Nursit // Module 1 // Octobre 2013 38
Installer
Ritimo-Nursit // Module 1 // Octobre 2013 39
Hébergement Web incluant PHP et MySQL pour SPIP 3 + : PHP > 5.1.0 et Mysql > 5 http://www.spip-contrib.net/ListeDesHebergeurs
Une fois l'hébergement ouvert, se munir des codes Accès au syst de fichiers du serveur (FTP - port 21)
adresse du serveur : utilisateur : mot de passe :
Paramètres de connexion à la base de données adresse de la base (relative) : localhost nom de la base : utilisateur : mot de passe :
Installer SPIP chez un hébergeur
Ritimo-Nursit // Module 1 // Octobre 2013 40
Pour un développement local ou backup Installer un serveur Apache/PHP/Mysql
Linux : http://doc.ubuntu-fr.org/lamp– Windows : http://www.wampserver.com/
Se munir de ses codes Accès au syst de fichiers du serveur (local)
Linux : /var/www/– Windows : c:\wamp\www
Paramètres de connexion à la base de données adresse de la base (relative) : localhost nom de la base : xxx utilisateur : root mot de passe : xxx
Installer SPIP localement
Ritimo-Nursit // Module 1 // Octobre 2013 41
Installer SPIP en 4 étapes
● 1- Récupérer le système de fichiers de SPIP depuis le site http://www.spip.net/fr
● télécharger l'archive spip.zip● la décompresser localement
● 2- Transférer les fichiers à la racine de votre site (par FTP ou localement)
● 3- Donner les droits d’accès en écriture aux dossiers \IMG, \tmp, \local, \config (chmod 777)
● 4- Connectez-vous avec votre navigateur au dossier /ecrire de votre site
● http://www.monsite.com/ecrire● Installation par interface graphique
Ritimo-Nursit // Module 1 // Octobre 2013 42
Alternative : spip_loader.php
● Récupérer le fichier spip_loader.php depuis le site http://www.spip.net/fr● Le transférer à la racine de votre site (par FTP ou localement)● Donner les droits d’accès en écriture aux dossiers \IMG, \tmp, \local,
\config (chmod 777)
● A partir du navigateur, éxécuter le fichier spip_loader.php
● http://www.monsite.net/spip_loader.php● Installation par interface graphique
● Intérêts● temps de transfert plus court● facilite les mises à jour de version
Ritimo-Nursit // Module 1 // Octobre 2013 43
Installer SPIP avec Nursit
http://www.nursit.com/
Ritimo-Nursit // Module 1 // Octobre 2013 44
Installer SPIP avec Nursit
http://www.nursit.com/echange
Ritimo-Nursit // Module 1 // Octobre 2013 45
Se connecter à SPIP
Ritimo-Nursit // Module 1 // Octobre 2013 46
à partir du moment où il est connecté...
...l'utilisateur transporte avec lui son profil (droits et préférences).
● Dans l'espace privé la navigation est contextualisée : tous les utilisateurs ne voient pas la même chose car ils n'ont pas les mêmes droits et les mêmes préférences.
● Dans l'espace public les administrateurs ont accès à un menu d'informations et de raccourcis vers l'espace privé, si ils ont activé le cookie de correspondance.
Ritimo-Nursit // Module 1 // Octobre 2013 47
Le cookie de correspondance
● stocke des informations d'authentification personnelles pour éviter de se reconnecter systématiquement.
● donne accès à un menu de raccourcis contextuel aux administrateurs à partir du site public.
● En cas d'utilisation d'un ordinateurpublic, penser à se déconnecterou désactiver l'usage général du cookie
Ritimo-Nursit // Module 1 // Octobre 2013 48
Accéder à l'espace privé(depuis l'espace public)
● Accéder à l'espace privé-Depuis l'espace public cliquer sur
espace privéou
-Dans la barre d'adresse du navigateur ajouter /ecrire
ex : http://www.monsite.net/ecrire
● S'authentifier
● Utiliser les raccourcis contextuels d'accès à l'espace privé
Ritimo-Nursit // Module 1 // Octobre 2013 49
● Accéder à l'espace public
● Se déconnecter (fermer la session)
● Utiliser les raccourcis d'accès à l'espace public
● Du site public : – généralement clic sur la bannière :– adresse : /spip.php?page=sommaire
● Du site privé : – le logo Accueil :– adresse : /ecrire
Accéder à l'espace public(depuis l'espace privé)
Accéder à l'espace public(depuis l'espace privé)
Revenir à la page d'accueil
Ritimo-Nursit // Module 1 // Octobre 2013 50
Personnalisation du backoffice
● Mes informations résumé des informations personelles : articles, icône et page de données personnelles.
● Ma langue changer de langue l'interface
● Mes préférences jeu de couleur du site privé
Ritimo-Nursit // Module 1 // Octobre 2013 51
Modifier ses informations personnelles
● En cliquant sur on peut renseigner :● sa signature● son adresse mail ● sa biographie● le nom de votre site● l'URL de votre site● son login (admin)● son mot de passe
● Possibilité de mettre en ligne son logo d'auteur :
Ritimo-Nursit // Module 1 // Octobre 2013 52
La zone de résumé de la page d'accueil
+ Résumé du profil et des publications de l'auteur.
Cookie de correspondance : stockage des informations d'authentification personnelles.
+ Résumé du site :
Articles : tous les articlesAuteurs : liste des auteursForums : les forums publicsBrèves : toutes les brèves
Ritimo-Nursit // Module 1 // Octobre 2013 53
Utiliser l'aide de SPIP
Ritimo-Nursit // Module 1 // Octobre 2013 54
Espace privé
Ritimo-Nursit // Module 1 // Octobre 2013 55
La page d'accueil
Zone de travail
Zone de fonctions
Raccourcis
Ritimo-Nursit // Module 1 // Octobre 2013 56
La barre des fonctions (redacteur)
Accueil : permet d'avoir des informations sur vos articles : les derniers publiés, ceux proposés à la publication sur le site. C'est la page d'accueil.
Edition : permet de visualiser les différents objets éditoriaux disponibles sur le site.
Auteurs : voir l'ensemble des auteurs du site, Rubriques : visualiser la structure du site (pas de modif) Articles : écrire, proposer un nouvel article Mots-clés : visualiser les mots-clés
Ritimo-Nursit // Module 1 // Octobre 2013 57
La barre des fonctions principales (administrateur)
Accueil : permet d'avoir des informations sur vos articles : les derniers publiés, ceux proposés à la publication sur le site. C'est la page d'accueil.
Edition : permet d'éditer les différents objets éditoriaux disponibles sur le site.
Publication : tout ce qui a été publié ou est en attente de publication
Activité : suivre l'activité éditoriale du site. Squelettes : ce qui concerne la mise en page ou le paramétrage
d'éléments du site public Maintenance : pour l'administrateur du site, l'accès aux opérations
de maintenance Configuration : accès aux élements de configuration pour le
webmaster
Ritimo-Nursit // Module 1 // Octobre 2013 58
Les fonctions secondaires (administrateur)
Ritimo-Nursit // Module 1 // Octobre 2013 59
La barre de séparation
● Tout le site donne une hiérarchie de tout le site et en fonction secondaire, l'arborescence des rubriques du site.
● Créer une nouvelle rubrique première chose à faire en arrivant sur un site vierge : créer l'arborescence du site.
● Créer un nouvel article ● Créer un nouvel auteur ● Référencer un nouveau site ● Forum interne acces au forum privé du site s'il est activé● Agenda ouvre l'agenda de la semaine en cours et en fonction secondaire vous pouvez
ouvrir un jour, une semaine, un mois précis et vérifier vos messages et penses bêtes.● Messagerie personnelle ouvre une page qui reprend vos messages enregistrés dans le
calendrier et hors calendrier, vos penses bêtes et les annonces. En fonction secondaire, des raccourcis permettent de créer un nouveau pense-bête et un nouveau message.
● Recherche permet de balayer l'ensemble des contenus.
Ritimo-Nursit // Module 1 // Octobre 2013 60
Configurer SPIP
Ritimo-Nursit // Module 1 // Octobre 2013 61
Identité du site
Ritimo-Nursit // Module 1 // Octobre 2013 62
Contenu du site (1)
● Articles : définition du contenu des articles
Ritimo-Nursit // Module 1 // Octobre 2013 63
Contenu du site (2)
● Rubriques : d'autres champs que le titre ?● Logos : un logo pour chaque élément
éditorial ? ● Syndication : le/les flux RSS
Ritimo-Nursit // Module 1 // Octobre 2013 64
Contenu du site (3)
● Les mots clés : Utilisation des mots clés, des groupes de mots clés, dans les forums, …
● Référencement de sites et syndication : permet de générer un annuaire de sites Web et autoriser la syndication des sites.
● Les brèves : Les utilise-t- on ou pas ?
Ritimo-Nursit // Module 1 // Octobre 2013 65
Contenu du site (4)
Ritimo-Nursit // Module 1 // Octobre 2013 66
Interactivité (1)
● Inscription automatique de nouveaux rédacteurs : permet grâce à un formulaire d'accepter une inscription automatique de tous nouveaux rédacteurs.
● Visiteurs : le visiteur est enregistré sur le site et peut ajouter des commentaires
Ritimo-Nursit // Module 1 // Octobre 2013 67
Interactivité (2)
● Messagerie et agenda : permettre de s'organiser et communiquer entre les rédacteurs dans l'espace privé.
● Mails : le mail reste un moyen efficace de prévenir lors d'événements éditoriaux.
Ritimo-Nursit // Module 1 // Octobre 2013 68
Fonctions avancées (1)
● Génération de miniatures des images : permet de créer automatiquement une vignette miniature des images jointes aux articles. Elle permets l'ouverture en taille réelle de l'image quand l'internaute clique dessus. Vous pouvez choisir le nombre de pixels de la miniature.
Ritimo-Nursit // Module 1 // Octobre 2013 69
Fonctions avancées (2)
● Travail collaboratif sur les articles en indiquant des avertissements quand l'intervalle séparant le travail de plusieurs personnes sur un même article est faible.
● Prévisualisation permet de visualiser ce que sera l'article en ligne sans qu'il soit publié.
Ritimo-Nursit // Module 1 // Octobre 2013 70
Fonctions avancées (3)
● Statistiques des visites de votre site, de même que les origines des visites.
● Optimisations et Compression il est conseillé de cocher la compression du javascript et des css pour de meilleurs performances de votre site web
● Statistiques des visites de votre site, de même que les origines des visites.
● Optimisations et Compression il est conseillé de cocher la compression du javascript et des css pour de meilleurs performances de votre site web
Ritimo-Nursit // Module 1 // Octobre 2013 71
Gestion des plugins (1)
● Plugins verrouillés : ils sont installés avec SPIP par défaut, il n'est pas possible de les désactiver de votre site web
Ritimo-Nursit // Module 1 // Octobre 2013 72
Gestion des plugins (2)
Configuration
Sélection
Activation / désactivation
Détail
Activé
Ritimo-Nursit // Module 1 // Octobre 2013 73
Gestion des plugins (3)
● Dépôts : il reférence l'ensemble des plugins disponibles (sur spip-zone par exemple)
Ritimo-Nursit // Module 1 // Octobre 2013 74
Gestion des plugins (4)
● Plugins : rechercher des plugins trouvés dans le dépôt.
Ritimo-Nursit // Module 1 // Octobre 2013 75
Gestion des plugins (5)
● Plugins : installation et activation du plugin après la recherche
Ritimo-Nursit // Module 1 // Octobre 2013 76
Plugins Nursit
Ritimo-Nursit // Module 1 // Octobre 2013 77
Forum (1)
● Fonctionnement forum : permet d'ajouter un commentaire à un article et de décider s'il est publié immédiatement
● Forum : contenu du forum
Ritimo-Nursit // Module 1 // Octobre 2013 78
Forum (2)
● Espace privé : le forum en dessous des articles est le cas le plus classique d'utilisation dans le privé quand il y a plusieurs rédacteurs
● Notifications : permet d'améliorer la communication en informant par email d'un nouveau message
Ritimo-Nursit // Module 1 // Octobre 2013 79
Forum / Notifications / Spam
● Plugins : la conjonction des 3 plugins permet d'agir efficacement contre le spam de commentaire
Ritimo-Nursit // Module 1 // Octobre 2013 80
Révisions
● Révisions : elles permettent de tracer les modifications.
Ritimo-Nursit // Module 1 // Octobre 2013 81
URLs
Ritimo-Nursit // Module 1 // Octobre 2013 82
Organiser en rubriques
Ritimo-Nursit // Module 1 // Octobre 2013 83
Généralités
● Une structure hiérarchisée– Tout contenu publié sur le site sera placé dans une rubrique et une seule. – Dans SPIP, la structure étant de type hiérarchique, une rubrique peut contenir du
contenu et des sous-rubriques qui, elles mêmes, contiennent des sous-rubriques, etc.● On peut donc déplacer une rubrique dans une autre avec tout ce qu'elle contient.
● Le choix du logo, du descriptif et du texte explicatif sont essentiellement informatifs pour le backoffice. Ils sont parfois utilisés par le webmaster pour affichage sur le front-office.
● Fréquemment, seules apparaissent sur le site les rubriques contenant au moins un contenu publié (par exemple un article, ou une sous-rubrique non vide).
Ritimo-Nursit // Module 1 // Octobre 2013 84
Créer, modifier, déplacer, supprimer une rubrique
● Deux pages :● Une page de création ou d'édition de la rubrique
● Titre● Emplacement● Texte et descriptif● Protection de la rubrique par mot de passe● -> Valider
● Une page de publication : fiche récapitulative avec choix d'options
● Synthèse des contenus● Joindre un logo● Choix du mots-clefs● Choix de la langue● Suppression (si vide)
Ritimo-Nursit // Module 1 // Octobre 2013 85
Page de création et de modification
Ritimo-Nursit // Module 1 // Octobre 2013 86
Page de publication avec choix d'options
Ritimo-Nursit // Module 1 // Octobre 2013 87
Page de publication (langue de l'utilisateur)
Ritimo-Nursit // Module 1 // Octobre 2013 88
Compléments
● Pour supprimer une rubrique du site, elle doit avoir été préalablement vidée de tout son contenu (articles, rubriques, sites, brèves).
● L'accès restreint à une rubrique nécessite l'installation du plugin : acces_restreint
● Pour ordonner les rubriques du site, on peut utiliser la notation suivante :– 1. Titre1 -> Titre1– 2. Titre2 -> Titre2– Il faudra spécifier ce critère d'affichage dans le squelette de
présentation {par num titre}
Ritimo-Nursit // Module 1 // Octobre 2013 89
Écrire un article
Ritimo-Nursit // Module 1 // Octobre 2013 90
Généralités
● Chaque article est constitué au minimum d'un titre et d'un texte. Les champs supplémentaires sous-titre, chapo, post-scriptum peuvent rester vides (on active leur présence dans configuration / contenu du site).
● Il est placé dans une rubrique et peut être déplacé par la suite.● Les raccourcis typographiques permettent d'effectuer simplement les
opérations de mise en page : mise en italique, en gras, création d'un intertitre, affichage d'une liste à puces, insertion d'une image.
● Le statut de l'article correspond aux étapes (workflow) de publication :en cours de rédaction : visible par son auteur uniquementproposé à la publication : visible par tous les auteurs de l'espace privépublié en ligne : visible sur l'espace privé et publicà la poubelle : visible sur l'espace privérefusé : visible sur l'espace privé uniquement par les administrateurs
Ritimo-Nursit // Module 1 // Octobre 2013 91
Généralités (2)
● Chaque article peut avoir un, plusieurs ou aucun auteur.● Un article est daté à sa publication. Cette date peut être modifiée par
l'administrateur, elle peut être positionnée dans le futur pour faire de la publication programmée. Il porte de plus optionnellement, une date de rédaction antérieure indicative pour signifier qu'il s'agit d'une republication.
● Un logo propre à l’article peut être ajouté. Comme pour les rubriques, il peut ou non être utilisé par le Webmaster pour l'affichage public.
● Un article peut être automatiquement redirigé vers un lien interne ou externe : c'est un “article virtuel” qui permet par exemple d'intégrer dans SPIP des pages d'un site antérieur.
● Chaque article accepte un réglage propre concernant les options de forum et de pétition.
Ritimo-Nursit // Module 1 // Octobre 2013 92
Créer, modifier, déplacer, supprimer
● Deux pages :● Une page d'édition ou de modification de l'article
● Titre● Emplacement● Texte et descriptif● Mise en page● -> Valider
● Une page de publication : fiche récapitulative avec choix d'options
● Synthèse des contenus● Date● Auteurs● Mots-Clefs● Langue
Joindre des documentsLogoOptions de forumStatistiques en coursVoir en ligne
Ritimo-Nursit // Module 1 // Octobre 2013 93
Edition d'un article
Ritimo-Nursit // Module 1 // Octobre 2013 94
Publication d'un article
Ritimo-Nursit // Module 1 // Octobre 2013 95
Les raccourcis typographiques
● Lire : L'aide en ligne
● Voir le résultat
Ritimo-Nursit // Module 1 // Octobre 2013 96
Illustrer avec images et documents
Ritimo-Nursit // Module 1 // Octobre 2013 97
Les images et les documents attachés
● ... aux articles et optionnellement aux rubriques.● Permettent :
● de joindre un document à un texte (lien vers ce document)● de mettre en place une galerie d'images● d’afficher une image dans un texte● de proposer un espace de travail / de téléchargement
● Peuvent être accompagnés d’un titre, d’un descriptif et d’une taille d’affichage.
● Les types de documents que l'on peut attacher sont indiqués au niveau de la BDD. Ceci pour des raisons de sécurité (par exemple, l'attachement d'un script PHP est interdit).
● En cas de taille > 3 Mo, ils peuvent être envoyés par FTP dans le répertoire /tmp/upload
Ritimo-Nursit // Module 1 // Octobre 2013 98
Joindre des documents à un article (1)
● A partir de la page de publication de l'article, faire « Parcourir » puis « Télécharger ».
● Classement distinct et automatique des images des autres types de documents.
● Possibilité de personnaliser le descriptif du document– Titre / Sert aussi au classement. Ex : 1. Titre, 2.
Titre– Descriptif– Taille (pour les documents multimedia)– Suppression
Ritimo-Nursit // Module 1 // Octobre 2013 99
Joindre des documents à un article (2)
● Le portfolio permet d'utiliser une image dans plusieurs documents.
● Il est possible d'indiquer des informations compémentaires qui seront affichée sur le site publique si le squelette est prévu pour ça.
● La vignette est générée automatiquement par SPIP mais peut être remplacée
Ritimo-Nursit // Module 1 // Octobre 2013 100
Intégrer des documents dans l'article (1)
● Dans la page d'édition :● dans la colone de gauche listant les documents copier le code
correspondant soit à la vignette, soit au document entier et le coller dans le corps de l'article.
● Possibilité d'ajouter directement à partir de la page d'édition des images et des nouveaux documents
● images et documents diffèrent par leur statut dans la base et la manière dont le webmaster les inclus
● mieux vaut toujours utiliser des documents● Par défault, un document intégré à un article n'est
plus visible à la suite de celui-ci. ● On peut supprimer le code du corps de l'article
Ritimo-Nursit // Module 1 // Octobre 2013 101
Intégrer des documents dans l'article (2)
Ritimo-Nursit // Module 1 // Octobre 2013 102
Intégrer des documents dans l'article (3)
● Espace privé● Page publique ● Box dans la page publique
Ritimo-Nursit // Module 1 // Octobre 2013 103
Publier un article
Ritimo-Nursit // Module 1 // Octobre 2013 104
Quelques règles simples
● Chaque objet de contenu est publié dans une rubrique et une seule.
-> la rubrique est un contenant et ne stocke aucune donnée en tant que tel.
● Toutes les opérations d'administration et de publication sont révocables.
● Une opération de publication (rubrique, article, brève, site...) se déroule toujours en deux temps :
1. Un temps d'édition ou de préparation du contenu2. Un temps de publication ou de validation des options
Ritimo-Nursit // Module 1 // Octobre 2013 105
La chaîne de publication
Connexion au backoffice
Une page d'édition
Une page de publication
Validation du contenu par un administrateur
Choix d'un type de contenu à
publier
Recalculdes pages
du site publicpar le système
Ritimo-Nursit // Module 1 // Octobre 2013 106
1. Je me connecte à l'espace privé du site.2. Je choisis le type de contenu à publier.3. Je rédige un contenu (ex: article) et le place dans une
rubrique.4. Je détermine les options de publication.5. En fonction de mes droits (administrateur ou rédacteur), je
valide ce contenu ou le propose à la publication.6. L'outil recalcule les pages du site et intègre le nouveau
contenu dans les blocs du site public.
La chaîne de publication
Ritimo-Nursit // Module 1 // Octobre 2013 107
Personaliser le site
Ritimo-Nursit // Module 1 // Octobre 2013 108
Configurer le site public
Ritimo-Nursit // Module 1 // Octobre 2013 109
Configuration
Ritimo-Nursit // Module 1 // Octobre 2013 110
Accueil
● Le secteur spécialisé n’apparaîtra pas dans la navigation.Il sert à y mettre des contenus spéciaux comme les édito ou autre.Usage facultatif.
Ritimo-Nursit // Module 1 // Octobre 2013 111
Pages
Ritimo-Nursit // Module 1 // Octobre 2013 112
Sommaire (home page)
● La page sommaire peut contenir● un article « édito » que
l'on configure iciaffiché en colonne latérale
● Un article à la une, configuré via mot-cléaffiché en cœur de page
● La liste des secteursrubriques de 1er niveau
Ritimo-Nursit // Module 1 // Octobre 2013 113
Sommaire
● La liste des articles récentspar ordre chronologique inverse
● La liste des albums photo récentspar ordre chronologique inverse
Ritimo-Nursit // Module 1 // Octobre 2013 114
Rubrique
● On peut ● escamoter les pages de
rubrique et afficher un des articles à la place
● Définir ce qu'on affiche dans la page de rubrique (sous-rubriques, articles...)
Ritimo-Nursit // Module 1 // Octobre 2013 115
Article
● Détails d'affichage de la page d'un article (logo, partage social...)
Ritimo-Nursit // Module 1 // Octobre 2013 116
Auteur
● Chaque contributeur (= qui a un article publié) du site a une page● Qui regroupe
éventuellement les articles écrits
● Qui permet de le contacter
Ritimo-Nursit // Module 1 // Octobre 2013 117
Brève
● Les brèves sont affichées sous la forme : brève consultée + liste des autres brèves
Ritimo-Nursit // Module 1 // Octobre 2013 118
Site syndiqués
● Site syndiqué● fournit un flux RSS de
ses publications● récupéré et affiché dans
votre site● permet de donner de
lier automatiquement de l'information depuis un autre site
Ritimo-Nursit // Module 1 // Octobre 2013 119
Sites favoris
● Sites favoris = des sites que l'on référence pour les proposer aux visiteurs comme liens intéressants
Ritimo-Nursit // Module 1 // Octobre 2013 120
Forum
● Ici c'est bien le forum de discussion● Salons, plusieurs sujet● S'active sur une
rubrique
Ritimo-Nursit // Module 1 // Octobre 2013 121
Agenda
● Agende du site public● Configuration de la
présentation de l'agenda● Configuration de
l'affichage du mini-calendrier
Ritimo-Nursit // Module 1 // Octobre 2013 122
Galerie
● Galerie est la page de présentation de tous les albums photo
Ritimo-Nursit // Module 1 // Octobre 2013 123
Album
● Page de présentation d'un album
Ritimo-Nursit // Module 1 // Octobre 2013 124
Plan du site
Ritimo-Nursit // Module 1 // Octobre 2013 125
Recherche&mots-clés
● Affichage des résultats de recherche texte ou par mot clé
Ritimo-Nursit // Module 1 // Octobre 2013 126
Zones communes à toutes les pages
Ritimo-Nursit // Module 1 // Octobre 2013 127
Bandeau
● Bandeau haut de la page● Configuration de la
taille d'affichage du logo
Ritimo-Nursit // Module 1 // Octobre 2013 128
Menus
● Quel menu afficher ?● Chaque menu est
personalisable via le plugin Menus
Ritimo-Nursit // Module 1 // Octobre 2013 129
Commentaires
● Mode d'affichage des commentaires
● Choix d'affichage des gravatars
Ritimo-Nursit // Module 1 // Octobre 2013 130
Pages formulaires
● Formulaires de contact● Abonnement à la lettre
d'information
Ritimo-Nursit // Module 1 // Octobre 2013 131
Pages formulaires
● Inscription au site● Référencement de sites
● Permet aux visiteurs de proposer de nouveaux sites favoris
● Présentation des page de login
Ritimo-Nursit // Module 1 // Octobre 2013 132
Modèles
● Mode d'affichage des images et documents.● Laisser « non »
● Mode d'affichage de la pagination
Ritimo-Nursit // Module 1 // Octobre 2013 133
Navigation entre articles
● Configuration des éléments de navigation contextuels, permettant de rebondir d'un article à l'autre
Ritimo-Nursit // Module 1 // Octobre 2013 134
Contenu des colonnes
● Permet de sélectionner ce qu'on affiche ou non dans les colonnes latérales
Ritimo-Nursit // Module 1 // Octobre 2013 135
Pied de page
● Configuration du pied de page (en dehors du menu de pied de page)
Ritimo-Nursit // Module 1 // Octobre 2013 136
Référencement
Ritimo-Nursit // Module 1 // Octobre 2013 137
Balises META
● Balises méta insérées sur la home du site
● peu utiles en pratique
Ritimo-Nursit // Module 1 // Octobre 2013 138
Flux RSS
● Configuration du flux RSS envoyé par le site (qui est utilisé par les visiteurs ou d'autres sites internet)
Ritimo-Nursit // Module 1 // Octobre 2013 139
Outils
Ritimo-Nursit // Module 1 // Octobre 2013 140
Plugins
● Petit utilitaire pour (re)configurer certains plugins pour qu'ils fonctionnent bien avec le squelette
Ritimo-Nursit // Module 1 // Octobre 2013 141
Sauvegarde/Restaurationde la configuration
● Permet de réutiliser la même configuration d'un site à l'autre
Ritimo-Nursit // Module 1 // Octobre 2013 142
Migrer un ancien site
● Outil pour migrer depuis un ancien site SPIP● Vieux agenda réalisés à
partir d'articles dans une rubrique
Ritimo-Nursit // Module 1 // Octobre 2013 143
Migrer un ancien site
● Outil pour migrer depuis un ancien site SPIP● Albums photos réalisés
à partir d'articles dans une rubrique
Ritimo-Nursit // Module 1 // Octobre 2013 144
Publier un article à la une
Ritimo-Nursit // Module 1 // Octobre 2013 145
Article à la Une
● Article en home page, affiché en cœur de page et mis en avant
Ritimo-Nursit // Module 1 // Octobre 2013 146
Article à la Une
● Squelettes > Configurer Sarka-SPIP > Sommaire
● Memento● Créer un groupe de mot-clé
« squelette_habillage »● Créer un mot clé
« article_une »● L'associer à l'article qu'on
veut mettre à la Une.
Ritimo-Nursit // Module 1 // Octobre 2013 147
Publier un édito
Ritimo-Nursit // Module 1 // Octobre 2013 148
Article Édito
● Article en home page, affiché en colonne latérale
Ritimo-Nursit // Module 1 // Octobre 2013 149
Édito
● Squelettes > Configurer Sarka-SPIP > Sommaire
● Sélectionner l'article choisit pour mettre en édito
Ritimo-Nursit // Module 1 // Octobre 2013 150
Créer un album photo
Ritimo-Nursit // Module 1 // Octobre 2013 151
Album photo (1)
Ritimo-Nursit // Module 1 // Octobre 2013 152
Album photo (2)
Ritimo-Nursit // Module 1 // Octobre 2013 153
Album photo (3)
Ritimo-Nursit // Module 1 // Octobre 2013 154
Ajouter un flux RSS
Ritimo-Nursit // Module 1 // Octobre 2013 155
Les sites syndiqués (1)
● permettent de récupérer à intervalles réguliers le nom et l'adresse des derniers contenus publiés sur un autre site Web.
● La syndication nécessite sur le site distant la présence d'un flux rss (fichier au format xml).TROUVER des sites :
● Utiliser la détection par Firefox lors de la navigation● Utiliser le lien fourni par les sites sur leurs pages
– Dans les deux cas, copier l'adresse en cliquant droit sur le lien ou en cliquant gauche puis copier l'adresse de la barre d'adresse.
● Utiliser le fichier spip.php?page=backend situé à la racine d'un site SPIP ● Ex : http://www.ritimo.org/spip.php?page=backend
Ritimo-Nursit // Module 1 // Octobre 2013 156
Les sites syndiqués (2)
● Le référencement automatisé d'un site permet d'aller chercher automatiquement les informations du site, juste en renseignant son adresse
Ritimo-Nursit // Module 1 // Octobre 2013 157
Les sites syndiqués (3)
● La description a été renseignée automatiquement et le flux rss a été trouvé. On décide de syndiquer le site, c'est à dire aller récupérer les nouveautés du site ritimo
Ritimo-Nursit // Module 1 // Octobre 2013 158
Les sites syndiqués (4)
Ritimo-Nursit // Module 1 // Octobre 2013 159
Modifier le menu de navigation
Ritimo-Nursit // Module 1 // Octobre 2013 160
Menus
● Chaque menu est personalisable via le plugin Menus
Ritimo-Nursit // Module 1 // Octobre 2013 161
● Squelettes > Menus du site
● Puis « Créer un nouveau menu »
Ritimo-Nursit // Module 1 // Octobre 2013 162
● Titre● champ libre à titre
indicatif, pour vous y retrouver
● Identifiant● Définit quel menu vous
personalisez :– barrenav– menutop– menuside– menushortcuts– menufooter
Ritimo-Nursit // Module 1 // Octobre 2013 163
Ritimo-Nursit // Module 1 // Octobre 2013 164
Choisir un thème graphique
Ritimo-Nursit // Module 1 // Octobre 2013 165
Choisir un thème existant
● Menu Squelettes > Thèmes
Ritimo-Nursit // Module 1 // Octobre 2013 166
Choisir un thème existant
● Nombre de thèmes limité (pour le moment)● Ce sont surtout des variantes de base, point de
départ à la personnalisation
Ritimo-Nursit // Module 1 // Octobre 2013 167
Commentaires forums
Ritimo-Nursit // Module 1 // Octobre 2013 168
Les commentaires
● sont attachés à un article sur le site public. ils se trouvent en dessous du corps de l'article.
● sont accessibles en contribution et sont consultables par tous les visiteurs depuis l'espace public et sont modérés par les administrateurs depuis l'espace privé
● peuvent être activés ou modérés de façon +/- resctrictive, sur tout le site puis pour chaque article
● ne sont pas forcément signés● peuvent générer l'envoi de mail automatique
Ritimo-Nursit // Module 1 // Octobre 2013 169
options d'administration
Ritimo-Nursit // Module 1 // Octobre 2013 170
Commentaires sur le site public
Ritimo-Nursit // Module 1 // Octobre 2013 171
Crédits
Patrick Vincent (Erasme) http://contrib.spip.net/2556 – 2009
Benoit Mamet & Cédric Morin (Nursit) – 2013
Support sous Licence GNU – FDLhttp://fr.wikipedia.org/wiki/Licence_de_documentation_libre_GNUhttp://www.gnu.org/copyleft/fdl.html