Ci-dessous, les différences entre deux révisions de la page.
— |
formation-spip [2008/09/28 00:00] (Version actuelle) |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Formation à spip en 2h ====== | ||
+ | {{spip.png? | ||
+ | Spip est un logiciel libre de type " | ||
+ | |||
+ | Programme du cours | ||
+ | |||
+ | * 20 minutes : installation de spip sur un hébergement gratuit type | ||
+ | free.fr (fireftp, spip_loader, | ||
+ | |||
+ | * 20 minutes : spip, comment ça marche ? (les squelettes, la base de | ||
+ | données, le cache) | ||
+ | * 40 minutes : personnalisation des squelettes : "des boucles et des | ||
+ | balises..." | ||
+ | * 40 minutes : les bases de xhtml 1.0 et css 2 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Installation de spip chez free.fr ===== | ||
+ | |||
+ | * Aller sur le site www.free.fr, | ||
+ | * Complétez les informations. Vous recevrez vos identifiants de connexion dans les 10 jours chez vous. | ||
+ | |||
+ | 5 à 10 jours plus tard ... | ||
+ | |||
+ | * Rendez-vous sur votre gestionnaire sur free.fr et activez votre base de données Mysql.{{gestion-free.png? | ||
+ | * Lancez votre navigateur préféré (firefox) et installez l' | ||
+ | * Configurez le serveur : ftpperso.free.fr, | ||
+ | * Téléchargez le fichier [[http:// | ||
+ | * Déposez le à la racine de votre dossier www sur le serveur de free. | ||
+ | {{fireftp.png? | ||
+ | * rendez vous à l' | ||
+ | * Si vous rencontrez des difficultés avec votre base de données, vous pouvez la gérer à l' | ||
+ | |||
+ | |||
+ | |||
+ | ===== Découvrir l' | ||
+ | |||
+ | * Rendez-vous à l' | ||
+ | * Créez une rubrique à la racine du site et un premier article dans cette rubrique. | ||
+ | {{spip-interface-privee.png? | ||
+ | * Allez visiter votre site Ça y est, vous êtes en ligne ! | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Spip, comment ça marche ? ===== | ||
+ | |||
+ | Spip sépare le contenu de votre site (les textes, les photos, les documents) et la mise en page. Le même contenu peut ainsi être présenté de manières totalement différentes en changeant les " | ||
+ | |||
+ | Un squelette est un fichier décrivant une page de votre site. C'est un fichier de //codes// (brr! ça fait froid dans le dos !) mélangeant du html, du css et le langage propre à spip. | ||
+ | {{squelette-exemple.png? | ||
+ | |||
+ | Les textes sont enregistrés dans la base de données et sont " | ||
+ | |||
+ | Pour accélérer l' | ||
+ | |||
+ | Il est ainsi parfois nécessaire de demander au moteur un " | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Personnalisation des squelettes ===== | ||
+ | |||
+ | Pour personnaliser un squelette, il est nécessaire de connaître la syntaxe des commandes spip et d' | ||
+ | |||
+ | * la balise < | ||
+ | |||
+ | exemple 1: | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | #TEXTE | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | le code précédent recherche dans la table des articles l' | ||
+ | |||
+ | La balise <h1> est une balise propre au html qui indique que c'est un titre de niveau 1. | ||
+ | |||
+ | On peut imbriquer les boucles entre elles et utiliser des éléments du contexte d'une boucle comme critère d'un autre boucle. | ||
+ | |||
+ | exemple 2 : | ||
+ | <code html> | ||
+ | < | ||
+ | [(#REM) On affiche le titre de la rubrique] | ||
+ | < | ||
+ | [(#REM)On sélectionne les articles de la rubrique | ||
+ | | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | On voit apparaitre ici la syntaxe complète des balises spip :\\ | ||
+ | [texte_optionnel-avant(# | ||
+ | Les textes optionnels ne s' | ||
+ | |||
+ | La balise #REM permet de commenter son code de façon à le rendre plus compréhensible pour soi-même et pour les autres. | ||
+ | |||
+ | |||
+ | |||
+ | ===== Un peu de xhtml et css ===== | ||
+ | |||
+ | |||
+ | |||
+ | ==== xhtml ==== | ||
+ | |||
+ | Une page html se compose au minimum : | ||
+ | * d'un [[http:// | ||
+ | * d'une balise " | ||
+ | * d'une balise " | ||
+ | * d'une balise " | ||
+ | |||
+ | exemple : | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | <html xmlns=" | ||
+ | |||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | content=" | ||
+ | < | ||
+ | Largeur fixe (750px, header/menu haut/menu gauche flottant/ | ||
+ | droite flottant/ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <div id=" | ||
+ | |||
+ | <div id=" | ||
+ | Header (modèle utilisant les positionnement flottants)< | ||
+ | href=" | ||
+ | (voir tous les mod& | ||
+ | </ | ||
+ | <div id=" | ||
+ | <ul id=" | ||
+ | <li> | ||
+ | |||
+ | <a href="#"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | |||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </ | ||
+ | <div id=" | ||
+ | <p> | ||
+ | |||
+ | menu gauche | ||
+ | </p> | ||
+ | <p> | ||
+ | largeur fixe : 150px avec utilisation de la propriété float:left; | ||
+ | </p> | ||
+ | <ul id=" | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | |||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | </li> | ||
+ | <li> | ||
+ | |||
+ | <a href="#"> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </ | ||
+ | <div id=" | ||
+ | <p> | ||
+ | menu droit | ||
+ | </p> | ||
+ | <p> | ||
+ | |||
+ | largeur fixe : 150px avec utilisation de la propriété float: | ||
+ | </p> | ||
+ | <ul id=" | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | </li> | ||
+ | <li> | ||
+ | |||
+ | <a href="#"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#"> | ||
+ | |||
+ | </li> | ||
+ | </ul> | ||
+ | </ | ||
+ | <div id=" | ||
+ | < | ||
+ | <p>Si le contenu central est plus long que les menus latéraux, il " | ||
+ | </ | ||
+ | |||
+ | <div id=" | ||
+ | pied de page (se place en dessous des éléments flottants grâce à clear: | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | En xhtml, toutes les balises doivent être fermés et sont écrites en minuscules. | ||
+ | |||
+ | |||
+ | |||
+ | ==== css ==== | ||
+ | |||
+ | Css signifie " | ||
+ | |||
+ | Les css permettent de mettre en forme un document html. | ||
+ | |||
+ | exemple : | ||
+ | |||
+ | <code css> | ||
+ | body { | ||
+ | font-family: | ||
+ | font-size: 0.8em; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | p { | ||
+ | margin: 0 0 10px 0; | ||
+ | } | ||
+ | #header { | ||
+ | height: 50px; | ||
+ | background-color: | ||
+ | } | ||
+ | #haut { | ||
+ | height: 30px; | ||
+ | background-color:# | ||
+ | } | ||
+ | #conteneur { | ||
+ | width: | ||
+ | margin:0 auto; | ||
+ | background-color:# | ||
+ | } | ||
+ | #centre { | ||
+ | background-color:# | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | } | ||
+ | #gauche { | ||
+ | float:left; | ||
+ | width: 150px; | ||
+ | } | ||
+ | #droite { | ||
+ | float: | ||
+ | width: 150px; | ||
+ | } | ||
+ | #pied { | ||
+ | clear:both; | ||
+ | height: 30px; | ||
+ | background-color: | ||
+ | } | ||
+ | #menuhaut { | ||
+ | list-style-type: | ||
+ | margin: 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | #menuhaut li { | ||
+ | display: inline; | ||
+ | } | ||
+ | #menuhaut a { | ||
+ | margin: 0 2px; | ||
+ | color: #000000; | ||
+ | text-decoration: | ||
+ | } | ||
+ | #menuhaut a:hover { | ||
+ | text-decoration: | ||
+ | } | ||
+ | #menugauche { | ||
+ | list-style-type: | ||
+ | margin: 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | #menugauche li { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | #menugauche a { | ||
+ | margin: 0 2px; | ||
+ | color: #000000; | ||
+ | text-decoration: | ||
+ | } | ||
+ | #menugauche a:hover { | ||
+ | text-decoration: | ||
+ | } | ||
+ | #menudroit { | ||
+ | list-style-type: | ||
+ | margin: 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | #menudroit li { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | #menudroit a { | ||
+ | margin: 0 2px; | ||
+ | color: #000000; | ||
+ | text-decoration: | ||
+ | } | ||
+ | #menudroit a:hover { | ||
+ | text-decoration: | ||
+ | }</ | ||
+ | |||
+ | Le site [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Liens ===== | ||
+ | |||
+ | * Site officiel avec une documentation en ligne très bien faite : www.spip.net | ||
+ | * Site de ressources (infos, plugins, ...) - www.spip-contrib.net | ||
+ | * Des squelettes pas chers sur [[http:// | ||
+ | * [[http:// |