Cours création de sites web avec les outils SPIP, HTML, et CSS

Sommaire: Création de sites web

Avertissement
1. Introduction
2. Environnement de conception
2.1. Utilisation d’un CMS
2.1.1. Programmation
2.1.2. Conception graphique
2.1.3. Rédaction
2.1.4. Et le webmasterdans tout ça ?
2.2. Organigramme de fonctionnement d’un CMS
2.3. SPIP
2.4. Environnement de travail WAMP
3. Installation de EasyPHP0
4. Installation de SPIP
4.1. Mise en place de la structure du site
4.2. Installation de l’arborescence du site
5. Utilisation de SPIP
5.1. Philosophie d’utilisation des CMS
5.1.1. Introduction
5.1.2. Frontend et backend
5.1.3. Thème et structure du site
5.2. Création de rubriques
5.3. Création d’articles
5.3.1. Ajout d’éléments à l‘article (image ou document)
5.3.2. Ecriture du premier article
5.3.3. Edition du site et ajout d’articles et de rubriques
5.4. Vérification du site en ligne
5.4.1. Rubrique de premier niveau
(secteur) : « Le permis moto »
5.4.2. Sous-rubrique « Le plateau »
5.4.3. Sous-rubrique « La poussette »
5.4.4. Article « Parcours 1 »
6. Utilisation avancée de SPIP : squelettes, HTML et CSS
6.1. Base commune à tous les squelettes
6.2. Placement des boites grâce à CSS
6.3. Présentation des boites grâce à CSS
6.4. Décorations et gestion des images
6.4.1. Image du bandeau de titre
6.4.2. Logos des secteurs
6.4.3. Les menus de navigation
6.4.4. Résumé
6.4.5. Et ensuite ?
7. Principe des boucles SPIP
7.1. Création des fichiers squelettes
7.1.1. Mots-clefs SPIP
7.1.2. Les boucles SPIP – syntaxe
7.1.3. Fonctionnement d’une boucle
7.2. Exemple : fichier rubrique.html
7.2.1. La boucle RUBRIQUES principale
7.2.2. Les boucles imbriquées
7.2.3. La boucle HIERARCHIE
7.3. La gestion des logos
7.4. Listing complet de rubrique.html
8. Questions
Annexe A – Liste d’éléments XHTML
Balises de structuration du texte
Balises de liste
Balises de tableau
Balises de formulaire
Balises génériques
Annexe B – Liste des propriétés CSS
Police, taille et décorations
Alignement
Propriétés de couleur et de fond
Couleur
Image de fond
Propriétés des boîtes
Dimensions
Marges extérieures
Marges intérieures
Bordures
Propriétés de positionnement et d’affichage
Affichage
Positionnement
Propriétés des listes
Propriétés des tableaux
Autres propriétés
Annexe C – Liste des critères communs aux boucles SPIP
Classer les résultats
Comparaisons, égalités
Affichage en fonction de la date
Affichage d’une partie des résultats
Affichage entre les résultats
Divers
Notes

♣ Extrait du cours

Avertissement

Ce document introductif à la conception de sites Web par CMS permet de s’initier à l’utilisation des outils PHP, MySQL, Apache, et SPIP. Il n’est en aucun cas exhaustif et ne prétend pas couvrir tous les aspects de SPIP, mais a pour but de vous guider, pas à pas, dans l’installation des outils et l’écriture de vos premiers squelettes. Nous vous invitons fortement à consulter aux documentations en ligne de SPIP qui couvrent tous les aspects de ce logiciel :
− L’utilisation de l’interface d’administration et de rédaction :
http://www.spip.net/fr_rubrique136.html
− La rédaction de squelettes :
http://www.spip.net/fr_rubrique135.html

1. Introduction

Ce tutoriel se veut être un guide pas à pas d’initiation à la réalisation de sites Web avec les technologies actuelles de conception orientées Internet. Tous les outils nécessaires pour cette formation sont des logiciels libres disponibles en téléchargement sur Internet.
Au fur et à mesure de la progression de ce document, des pré-requis sont nécessaires pour appréhender de manière complète la formation, sans que ces pré-requis ne soient pour autant indispensables : ils doivent vous permettre d’assimiler plus rapidement les concepts sous-jacents à la conception Web : structuration d’une page Web (HTML et CSS), programmation (JavaScript, boucles SPIP), notions de bases de données (MySQL), et interaction entre les différents outils de conception.

2. Environnement de conception

Le site Web que nous allons créer repose sur différentes technologies liées à Internet :
− CMS (Content Management System) SPIP
o scripts en PHP
o base de données MySQL
o squelettes HTML
− Feuilles de style CSS
− Programmes JavaScript
− Serveur Web
Il est nécessaire de ben comprendre comment ces différents outils interagissent afin de savoir où intervenir lors de l’élaboration du cahier des charges de notre site.
2.1. Utilisation d’un CMS
Un Content Mangement System, ou « Outil de gestion de contenu », est un outil permettant de concevoir un site Web en détachant les trois aspects de la conception :
− Conception graphique (présentation, rôle du « designer» ou du « graphiste »)
− Ecriture des « pages Web » (contenu, rôle du « rédacteur »)
− Programmation (rôle de « l’informaticien »)
Typiquement, ce type d’outil permet d’offrirdes possibilités évoluées de gestion d’un site internet sans nécessiter de la part du webmasterdes compétences très poussées dans les différents aspects énoncés ci-dessus.
2.1.1. Programmation
L’aspect programmation est réduit à sa plussimple expression, dans la mesure où toutes les fonctionnalités nécessaires sont déjàincluses dans le CMS. Néanmoins, il peut être nécessaire d’ajouter certaines fonctionnalités absentes.
Si ces fonctionnalités concernent l’interface du CMS, il sera nécessaire de modifier les scripts propres au CMS. Mais si ces fonctionnalités concernent l’aspect Web, du code sera ajouté au sein des squelettes du site (par exemple en PHP pour les scripts exécutés côté serveur, ou en JavaScript pour ceux exécutés côté client) : cela implique que le concepteur graphique et le programmeur travaillent ensemble sur l’écriture des squelettes du site.
2.1.2. Conception graphique
L’utilisation de « squelettes » permet de définir un ou plusieurs aspects graphiques au site Web de manière totalement indépendante du contenu. Cela nécessite de bien définir les différents blocs qui seront affichés sur la page Web (titre, sous-titre, auteur, texte, etc.).
La nature de ces blocs est intimement liée auCMS employé, et leur emploi nécessite de bien comprendre les mécanismes propres auCMS (boucles SPIP par exemple) et la présentation d’une page Web (HTML, utilisation des feuilles de style CSS).
2.1.3. Rédaction
L’aspect rédaction se trouve grandement simplifié ; dès lors que le CMS est installé et fonctionnel, le rédacteur n’a besoin d’aucune compétence en programmation (HTML, JavaScript, PHP ou autre). De plus, les CMS permettent de définir un certain nombre de rédacteurs différents, chacun disposant de droits spécifiques ou communs dans l’utilisation de l’interface du CMS. Quiconque sait se servir d’un outil de rédaction de texte évolué (Microsoft Word ou OpenOffice) saura se servir de l’interface offerte par le CMS. La seule contrainte étant que la rédaction des pages Web se fait « en ligne » : il est nécessaire d’être connecté sur le sitepour pouvoir ajouter du contenu.
2.1.4. Et le webmasterdans tout ça ?
Le rôle du webmaster est ici de faire le lien entre tous ces éléments de manière à proposer un site clair et bien structuré, en exploitant au maximum les possibilités offertes par le CMS, éventuellement en ajoutant les fonctionnalités absentes en les programmant (PHP ou JavaScript).