A l'heure actuelle seuls Orbital et moi-même sommes capables d'uploader directement du contenu sur le site.
Or le fait de passer d'un word ou d'un article wiki à la page web peut prendre du temps surtout dans le cas de pages complexes (liens, tableaux, images...).
J'avais prévu il y a quelque temps de créer un module permettant de créer (simplement) du contenu en ligne. Il en existe déjà un mais qui nécessite un certain niveau de connaissance de programmation. J'aurais donc voulu créer un utilitaire à la portée de n'importe quel rédacteur ne maîtrisant pas les subtilités de la programmation web. Cela dit, il est certain qu'un tel utilitaire me prendrait un paquet de temps et m'obligerait à revoir une partie de la structure du site. Même si je ne mets pas le projet au placard pour le moment, je pense qu'il serait plus simple de faire un tuto sur la création d'une page à l'heure actuelle. On ne verra ici que la création brute d'une page, ceux qui voudront l'uploader directement devront en faire la demande directement car cela nécessite de connaître un certain nombre de mot de passe que je ne veux pas divulguer à tout le monde, plus la possibilité de tout casser en cas d'erreur.
Le logicielJe travaille avec Notepad++ (téléchargeable ici :
http://download.tuxfamily.org/notepadpl ... taller.exe) et je le conseille fortement à tous les rédacteurs en herbe. Il est pratique, léger et propose de la coloration syntaxique pour les pages en PHP et ça tombe plutôt bien car c'est avec ce langage que l'on va coder nos pages.
Quelques petites réglages à faire avant de commencer :
_Dans l'onglet encodage, choisissez l'option "Encodage en UTF-8 (sans BOM). En effet le site est en UTF-8 donc si vous ne souhaitez pas voir apparaître des points d'interrogations à la place de vos caractères spéciaux, vous savez ce qu'il vous reste à faire...
_Une autre option qui vous sera utile également, l'auto-complétion. Pour cela rendez vous dans le menu "Paramétrage" > "Préférences..." > "Sauvegarde/Autocomplétion" et activez la complétion automatique de mots à partir du 3ème caractère. Cela vous permettra de rédiger plus vite.
N'hésitez pas à parcourir le reste des fonctions.
Créer une pagePour créer une page, rien de plus simple : "Fichier" > "Nouveau", une page blanche est alors créée. Il ne vous reste plus qu'à la modifier et appuyer sur Ctrl-S pour la sauvegarder, choisissez alors le nom de votre page (exemple : Test.php) et son extension, ici PHP.
Principes générauxAvant de vous lancer dans l'aventure, il est nécessaire que vous ayez un minimum de base sur la programmation web. Et la première chose à dire est que ça n'est pas aussi compliqué que ça en à l'air. Commençons par la base, chaque page web est au départ une composition de mots décrivant la manière dont votre page devra être visualisée et ce qui se trouve à l'intérieur. On parle ici tout simplement de code, même une image est créée à partir de code. Et c'est d'ailleurs pour ça que je vous ai demandé d'installer un simple outils de saisie de texte, car le web n'est rien de plus que des pages de texte !
Il y a ce qu'on appelle les pages statiques, qui comme leur nom l'indique ne change pas en fonction de l'affichage et les pages dynamiques. Les pages statiques existent car il n'est pas toujours nécessaire de changer le texte affiché en fonction de tel ou tel critère. Pour ces pages, on utilise un langage qui s'appelle le XHTML (qui est une extension du HTML) qui n'est rien d'autre qu'un système de balise dérivé du XML. En gros on a du texte encapsulé dans des balises du style <text>monText</text> avec la particularité que les balises qu'on ouvre doivent être fermées. Il existe quelques exceptions comme la balise <img> qui s'écrit comme cela <img src='cheminImage' alt='altImage' />. Le XHTML sert avant tout à structurer les pages (et non à en définir le style). Chaque article du site pourrait n'être qu'une page html puisque ce sont simplement des textes imagés structurés.
Le PHP qui a été cité plusieurs fois en haut de cet article est utilisé quant à lui afin de générer des pages dynamiques, c'est à dire des pages dont le contenu va être modifié dynamiquement en fonction de ce que le visiteur souhaite voir. Il influe directement sur les données affichées et permet de faire énormément de choses (générer des images, créer des mini-applications...). Tout le contenu dynamique du site (quizs, FuryGame, forum, livre d'or...) est codé en PHP.
Tout ce qui est relatif au style de l'application est géré par des fichiers CSS. Il y en a un par design du site (donc trois si vous avez bien suivi). Ils permettent de gérer le style général du site, celui du texte, etc... La plupart des éléments de style dont vous pouvez avoir besoin sont déjà crées.
Toutes les pages du site sont codées en PHP et inclue la grande majorité du temps une grande partie de code XHTML. Mêmes les articles sont écrits dans des pages PHP. Vous avez certainement noter que toutes les pages du site terminent par .html, ça n'en fait pas des pages XHTML pour autant, en fait il y a une moulinette qui passe pour transformer une page du style index.php?Rubrique=FF10 en FF10.html qui permet aux moteurs de recherche de pouvoir indexer toutes les pages peut importe le nombre d'arguments. A noter que simplement créer votre page n'est pas suffisant, il faut ensuite la lier au reste du site.
XHTMLOn va voir dans cette partie la grande majorité des balises utilisées pour créer une page :
_Titre (balises <h1></h1> ... à <h6></h6>) : Tous les titres ou sous-titre sont censés être contenus dans des balises titres, cela permet notamment aux moteurs de recherche de mettre en avant les titres. Plus le chiffre est bas et plus le titre est important. Dans la pratique, on utilise surtout <h1> et <h2>.
_Paragraphe (balises <p></p>) : Tout le texte doit être contenu dans des paragraphes.
_Lien (<a href='URL' title='titre'>texteAAfficher</a>) : Les balises liens servent à créer des liens XHTML vers d'autres pages.
_Image (<img src='cheminImage' alt='texteDescriptif' /> : Permet d'afficher une image (hébergée sur le site ou en distant).
_Division (<div></div>) : Ce sont des blocs dans lequel vous pouvez mettre ce que vous voulez.
_Passage de ligne : <br />
_Combobox (<select><option value=''></option></select>) : Listes déroulantes dans lesquelles vous pouvez mettre autant d'options que souhaitées. Vous avez aussi la possibilité de grouper les options.
_Tableau
<table></table> : Permet de structurer les données dans un tableau.
<tr></tr> : Ligne d'un tableau
<td></td> : Cellule d'un tableau
Il y a d'autres balises mais les plus importantes sont au dessus.
Pour plus d'infos :
http://xhtml.le-developpeur-web.com/select-xhtml.phpPHPLe PHP est plus compliqué car c'est de la programmation au sens classique du terme avec des variables, des fonctions et un certain nombre de mot clé. C'est donc plus compliqué à apprendre que le simple formatage sous forme de balises du XHTML. Ici on transforme les choses, on ne fait pas que les organises. Une page PHP doit commencer par "<?php" et finir par "?>". On va s'intéresser ici aux points les plus utilisées par les pages du site, à savoir :
_L'utilisation de variable. En PHP chaque variable doit commencer par un $, du genre $test. On peut y mettre du texte, des chiffres ou même des structures plus compliquées comme les tableaux. L'intérêt d'une variable est le fait qu'on puisse la modifier, la transformer, l'afficher, l'associer à d'autres variables, etc...
_Afficher du texte. L'affichage du texte se fait via la commande echo. pour afficher du texte contenu dans une variable on peut donc utiliser la ligne suivante : echo $monTexte;. Les instructions se terminent obligatoirement par un ";".
_La manipulation des variables de type GET. Vous avez certainement déjà vu des "index.php?nomVariable=valeur"... Ces valeurs dans l'URL sont en fait un bon moyen de transmettre des informations entre les pages, c'est une manière visible, il en existe une autre qui se fait de manière totalement invisible. Sur FFFury, ceci est caché par le système de réecriture des URLs qui transforment les URLs du type FF10-Personnages-Tidus.html en ?Rubrique=FF10&sousRubrique=Personnages&Personnage=Tidus.
Pour en récupérer la valeur, rien de plus simple : $_GET['nomVariable'], on peut ensuite en faire ce que l'on veut.
_Les structures de condition, if/else. Cela permet de faire certains traitements en fonction de certaines condition, exemple if ($_GET['Personnage'] == 'Tidus') echo "Tidus";
Tester vos pagesPour voir ce que va donner votre page en ligne, vous êtes obligé d'utiliser un serveur du type Wamp ou EasyPHP. Etant donné que le PHP est compilé par un serveur, vous ne pourrez pas voir le contenu de vos pages avec un simple navigateur, ce qui ne pose aucun problème pour une page XHTML. Ceux qui voudront donc tester leur page devront forcément passer par moi pour avoir accès au reste du site.
Code sourceVous avez la possibilité de regarder le code source de toutes les pages du site grâce à votre navigateur, ils ont tous une option pour afficher le code source après un clic droit sur une page. Vous ne verrez cependant que le code XHTML généré par les codes PHP, le code PHP étant exécuté par le serveur sur lequel est hébergé le site, vous ne verrez jamais le vrai code des pages du site de cette manière.
Exemples utilesCréer un paragraphe indenté :
<p class='Indent'>Mon texte</p>
On retrouve ici la balise p qui créer les paragraphes et la class Indent qui est une classe CSS réalisant l'indentation (et la justification du texte).
Ajouter une image
<img src='cheminImage' alt='texteAlternatif' />
Créer un tableau
<table>
<tr class='toprow2'><th>Header</th></tr>
<tr><td>Colonne</td></tr>
</table>
Ici on retrouve 4 balises, table pour le tableau, tr pour une ligne, th pour une cellule titre, td pour une cellule normale.
La classe toprow2 est encore une classe CSS qui permet de colorer une ligne spécialement.
On peut également fusionner deux colonnes, de cette manière <td colspan='2'></td> ou fusionner deux lignes avec rowspan du type <td rowspan='2'></td>
Afficher un lien
<a href='lien.html' title='Texte descriptif'>Texte à afficher</a>
Une page exempleAutreDans cet article, on retrouve les bases de la création d'une page pour le site. N'hésitez pas à poser des questions, à demander des accès et à vous lancer dans la création de page pour le site. J'ai initialement écrit ce long article pour Stoz, mais j'espère que d'autres se lanceront dans l'aventure.
!![[hehe]](http://forum.fffury.com/images/smilies/hehe.gif "hehe")
