Navigation
trashformer
| Architecture 3D | |
| Images 3D | |
| Informatique | |
| Vrac |
L’affichage d’un site SPIP est défini avec des pages HTML, dénommées « squelettes », et des feuilles de styles CSS.
HTML (HyperText Markup Language) est une recommandation du W3C [1].
C’est un langage dit de « balisage » car les informations sont encadrées par des commandes interprétées par les navigateurs.
Exemple :
Quelques repères chronologiques :
| 1989 | Tim Berners-Lee propose au CERN la création d’un système d’information global et hypertexte (projet Mesh) |
| 1990 | Tim Berners-Lee écrit le langage HTML (en s’inspirant du principe de balises de SGML) |
| 1991 | Le CERN lance le World Wide Web ainsi qu’une liste de diffusion nommée www-talk |
| 1995 | L’IETF publie la recommandation HTML 2.0 (novembre) |
| 1997 | Le W3C publie les recommandations HTML 3.2 (janvier) et 4.0 (décembre) |
| 1999 | Le W3C publie la recommandation HTML 4.01 (décembre) |
| 1998 | Le W3C publie la recommandation XML 1.0 (février) |
| 2000 | Le W3C publie la recommandation XHTML 1.0 (janvier) |
Malgré son succès fulgurant, le langage HTML a rapidement montré ses limites :
chaque page contient un mélange inextricable de structure, d’information et de formatage, ce qui en rend très difficile l’analyse,
la liste des balises est figée puisqu’elles sont définies par une recommandation du W3C,
il est difficile d’analyser le contenu des pages HTML puisque les balises ne donnent pas d’informations sémantiques sur le document.
En 1998, le W3C a publié un métalangage à la fois flexible, puissant et simple dans son principe : XML. Une compatibilité avec HTML a même été prévue avec XHTML, qui est une reformulation en XML d’HTML.
Aujourd’hui, et pour longtemps encore, HTML - ou XHTML - est le langage standard de publication sur le Web, il remplit correctement son rôle, la présentation de l’information, mais il n’est tout simplement pas adapté au stockage des données.
Depuis la version 1.8, les pages HTML se trouvent dans le dossier /spip/dist/
| Nom de la page | Fonction |
| 404.html | erreur 404 |
| article.html | articles |
| auteur.html | auteurs |
| backend.html | syndication |
| backend-breves.html | syndication des brèves |
| breve.html | brèves |
| distrib.html | articles récents |
| forum.html | réponses aux messages dans les forums et les brèves |
| ical.html | calendrier |
| login.html | page |
| mot.html | mots-clés |
| nouveautes.html | e-mail envoyé avec le résumé des articles |
| plan.html | plan du site |
| recherche.html | résultat d’une recherche |
| resume.html | nouveautés |
| rubrique.html | rubriques |
| site.html | sites référencés |
| sommaire.html | page d’accueil du site |
| sommaire_texte.html | sommaire en mode texte |
Dès lors que SPIP est installé il est entièrement fonctionnel, il vous reste à définir la charte graphique du site. Vous devrez modifier les pages HTML en conjonction avec les fichiers CSS.
CSS (Cascading Style Sheet) est une recommandation du W3C.
En permettant de séparer la forme du contenu, les feuilles de style apportent une plus grande lisibilité du code HTML ainsi que de nouvelles possibilités de mise en forme, impossibles à réaliser sans un langage de style.
Trois méthodes permettent d’utiliser les styles CSS.
Styles intra-ligne
L’attribut type spécifie le langage de style utilisé.
L’attribut style spécifie le style applicable à un élément unique.
Ex :
Les éléments DIV et SPAN sont très utiles pour appliquer des styles localement.
Ex :
Note : les styles intra-lignes n’offrent que peu d’intérêt puisque le formatage reste mélangé au contenu et qu’il est nécessaire d’éditer toutes les pages pour modifier l’ensemble du site.
En-têtes de style
L’élément STYLE est inséré dans l’élément HEAD.
Les styles s’appliquent à l’ensemble du document.
Ex :
Note : le formatage est séparé de l’information mais il est nécessaire d’éditer toutes les pages pour modifier l’ensemble du site.
Feuilles de style externes
Les feuilles de style externes sont définies séparément du document HTML (dans un simple fichier texte portant l’extension .css).
Il est ainsi possible de :
partager les feuilles de styles entre plusieurs documents,
modifier le formatage d’un document sans toucher aux pages HTML.
La référence à une feuille de style externe se fait par insertion de l’élément LINK dans l’élément HEAD.
Ex :
Un exemple de feuille de style définissant :
la couleur du fond et les polices du document
la couleur des liens
la couleur des liens visités
deux classes de paragraphe
Concept de base
Une règle CSS consiste en deux parties principales, un sélecteur et une déclaration :
La déclaration est divisée en deux parties, une propriété et une valeur :
Il existe un grand nombre de propriétés (la liste complète est disponible sur le site du W3C).
Les sélecteurs peuvent être groupés (séparés par des virgules) :
Les déclarations peuvent être groupées (séparées par des points-virgules) :
Héritage :
Si aucune couleur n’a été assignée à l’élément <EM>, le texte placé dans cet élément héritera de la couleur de l’élément parent
L’attribut class permet de créer des classes d’éléments pour tous les éléments placés à l’intérieur de l’élément <body></body> :
La valeur (le nom) de l’attribut class est librement choisie.
Les règles d’héritage s’appliquent aux classes d’éléments.
On peut adresser tous les éléments d’une même classe en omettant le nom de l’élément dans le sélecteur :
Les sélecteurs contextuels permettent de formater des éléments insérés dans d’autres éléments :
Commentaires :
Très utiles pour rendre le code CSS compréhensible.
Pseudo-classes et pseudo-éléments
Pseudo-classes et pseudo-éléments peuvent être utilisés en tant que sélecteurs CSS mais n’existent pas dans le code HTML.
pseudo-classes d’ancres :
La pseudo-classe link définie la couleur d’un lien non activé.
La pseudo-classe visited définie la couleur d’un lien activé (visité).
La pseudo-classe active définie la couleur d’un lien en cours d’activation (au moment du clic).
pseudo-éléments typographiques (pas reconnus par tous les navigateurs) :
first-line : première ligne d’un élément de type bloc
first-letter : lettrine
Modèle de formatage CSS
Il est représenté par un ensemble de boîtes rectangulaires :
Le contenu (texte, tableau, liste, image, etc.) est entouré de trois zones concentriques :
le padding,
la bordure,
la marge.
Les styles peuvent agir à la fois sur le formatage du contenu et des boîtes.
Dans SPIP, 5 fichiers CSS permettent de définir l’apparence du site. Ces fichiers se trouvent dans le dossier /spip/
| Nom du fichier | Fonction |
| habillage.css | Mise en page des textes, habillage des menus et de la navigation, couleurs des menus, style de la clonne principale (contenu), disposition a l’ecran (colonnes, encarts, cartouches), habillage du plan du site, habillage des forums, habillage des petitions, formulaires |
| impression.css | Feuille de style spécifique a l’impression |
| spip_admin.css | Styles des boutons d’administration, style pour le mode debug |
| spip_style.css | Styles généraux (tableaux, etc.) |
| typographie.css | Styles generaux, styles pour le contenu, disposition a l’ecran |
Si vous disposez d’un serveur, il suffit de copier l’arborescence de SPIP de votre à la racine de votre serveur Web. Vérifiez simplement que le fichier « index.php3 » est présent et renvoie bien au sommaire du site SPIP.
Si vous installez SPIP chez un hébergeur gratuit, assurez-vous que les fonctions nécessaires au fonctionnement de SPIP sont disponibles : serveur Web Apache, accès à une base MySQL et langage PHP.
Pour installer SPIP chez votre hébergeur, consultez le guide Installer SPIP sur le site SPIP.
Sauvegarde / Restauration
Une sauvegarde régulière des données vous évitera de reconstruire votre site entièrement si le serveur connaît un problème ou l’hébergeur ne peut ou ne veut garantir la sécurité des données.
Pour sauvegarder, cliquez sur l’icône « Configuration » puis sur « Maintenance du site ». Cliquez sur le bouton « Sauvegarder la base ». Un fichier sera écrit dans le dossier : /spip/ecrire/data/dump.xml.gz
Note : pour des raisons de sécurité [2], vous devrez d’abord vous connecter par FTP à ce dossier, et créer un fichier (ou un dossier) avec un nom bien précis (SPIP vous l’indiquera le nom au moment de la sauvegarde).
Récupérez le fichier dump.xml.gz sur votre machine.
Enfin, toujours à l’aide de votre client FTP, recopiez le dossier /spip/IMG/ et tous ses sous-dossiers en local : c’est ici que se trouvent tous les documents associés à des articles.
La procédure de restauration est quasiment identique :
déposez par FTP le fichier dump.xml.gz dans le dossier /spip/ecrire/data/
connectez-vous à l’espace privé,
cliquez sur l’icône « Configuration » puis sur « Maintenance du site »
cliquez sur « Restaurez la base »
Attention : la procédure de restauration est irréversible, utilisez-la si vous avez tout essayé et que vous êtes certains que les données sont irrémédiablements perdues.
Statistiques
SPIP intègre un outil statistique sommaire mais utile sur la fréquentation du site :
Évolution des visites (avec un graphique)
Origine des visites
Répartition des visites par rubriques et articles
Liens entrants
Référencement
Pour que votre site soit visité par des internautes, il doit être référencé dans plusieurs moteurs de recherche.
Les liens suivants permettent de soumettre l’adresse de votre site aux deux principaux moteurs. En quelques semaines (le délai est variable), le contenu textuel de votre site devrait être ajouté à leurs index.
| Moteur | URL |
| Google.fr | www.google.fr/intl/fr/addurl.html |
| Yahoo.fr | fr.docs.yahoo.com/info/ajouter.html |
Des informations détaillées sur le fonctionnement des moteurs de recherche sont disponibles sur le site Abondance.
SPIP Système de publication pour Internet : créez votre site web communautaire par Collectif Micro Application. Micro Application, 2004. 467 pages.
SPIP : créez votre site web communautaire par Collectif Micro Application. Micro Application, 2004. 191 pages.
SPIP 1.8 : Créer son site avec des outils libres par Michel-Marie Maudet, Dominique Quatravaux, Anne-Laure Quatravaux. Eyrolles, 2005. 360 pages.
[1] Le W3C (World Wide Web Consortium) est un organisme chargé de développer les technologies du Web. Ses travaux sont publiés sous la forme de recommandations. On peut citer par exemple : des langages de balisage hypertexte (HTML, XML, XHTML), des langages de définition de styles (CSS, XSL).
[2] Si une personne peut créer un fichier avec un nom déterminé dans un dossier de l’espace de gestion, il y a de bonnes chances pour que ce soit l’administrateur du site et pas un hacker.
