Nous sommes le Mer 11 Déc 2019 04:12

Heures au format UTC + 1 heure




 Page 1 sur 1 [ 14 messages ] 
Auteur Message
 Sujet du message: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Dim 26 Jan 2014 22:31 
Webmaster
Webmaster
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 21 Oct 2010 15:25
Messages: 2772
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 logiciel
Je 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 page
Pour 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éraux
Avant 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.

XHTML

On 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.php

PHP

Le 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 pages

Pour 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 source

Vous 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 utiles

Cré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 exemple

<?php

   (!isset($_GET['Personnage'])) ? $Menu .= "Généralités sur les armes<br />" : $Menu .= "<a href='FF10-Armes.html' title='Généralités sur les armes'>Généralités sur les armes</a><br />";
   $Menu .= "<table border='0' cellpadding='0' cellspacing='15'><tr>";
   ($_GET['Personnage'] == "Tidus") ? $Menu .= "<td><img src='./FF10/Images/miniTidus.png' alt='Tidus'/><br />Tidus</td>" : $Menu .= "<td><a title='Liste des armes de Tidus' href='FF10-Armes-Tidus.html'><img src='./FF10/Images/miniTidusDisabled.png' alt='Tidus'/><br />Tidus</a></td>";
   ($_GET['Personnage'] == "Yuna") ? $Menu .= "<td><img src='./FF10/Images/miniYuna.png' alt='Yuna'/><br />Yuna</td>" : $Menu .= "<td><a title='Liste des armes de Yuna' href='FF10-Armes-Yuna.html'><img src='./FF10/Images/miniYunaDisabled.png' alt='Yuna'/><br />Yuna</a></td>";
   ($_GET['Personnage'] == "Lulu") ? $Menu .= "<td><img src='./FF10/Images/miniLulu.png' alt='Lulu'/><br />Lulu</td>" : $Menu .= "<td><a title='Liste des armes de Lulu' href='FF10-Armes-Lulu.html'><img src='./FF10/Images/miniLuluDisabled.png' alt='Lulu'/><br />Lulu</a></td>";
   ($_GET['Personnage'] == "Wakka") ? $Menu .= "<td><img src='./FF10/Images/miniWakka.png' alt='Wakka'/><br />Wakka</td>" : $Menu .= "<td><a title='Liste des armes de Wakka' href='FF10-Armes-Wakka.html'><img src='./FF10/Images/miniWakkaDisabled.png' alt='Wakka'/><br />Wakka</a></td>";
   $Menu .= "</tr><tr>";
   ($_GET['Personnage'] == "Rikku") ? $Menu .= "<td><img src='./FF10/Images/miniRikku.png' alt='Rikku'/><br />Rikku</td>" : $Menu .= "<td><a title='Liste des armes de Rikku' href='FF10-Armes-Rikku.html'><img src='./FF10/Images/miniRikkuDisabled.png' alt='Rikku'/><br />Rikku</a></td>";
   ($_GET['Personnage'] == "Auron") ? $Menu .= "<td><img src='./FF10/Images/miniAuron.png' alt='Auron'/><br />Auron</td>" : $Menu .= "<td><a title=\"Liste des armes d'Auron\" href='FF10-Armes-Auron.html'><img src='./FF10/Images/miniAuronDisabled.png' alt='Auron'/><br />Auron</a></td>";
   ($_GET['Personnage'] == "Kimahri") ? $Menu .= "<td><img src='./FF10/Images/miniKimahri.png' alt='Kimahri'/><br />Kimahri</td>" : $Menu .= "<td><a title='Liste des armes de Kimahri' href='FF10-Armes-Kimahri.html'><img src='./FF10/Images/miniKimahriDisabled.png' alt='Kimahri'/><br />Kimahri</a></td>";
   $Menu .= "</tr></table><br /><br /><div id='".$StyleTab."'>";
   
   if (!isset($_GET['Personnage'])) {
      echo "<br /><br /><br /><h1>Section Armes de Final Fantasy 10 (FF10)</h1><br /><br /><br />";
      echo $Menu;
      echo "---====================---<br />
      [~~ <span class='valeur'>Armes</span> ~~]<br />
      ---====================---<br /><br />
      <p class='indent'>Il existe deux sortes de pièces d'équipement dans Final Fantasy 10 : les armes et les protections. En effet, et c'est suffisament rare pour le signaler, vous ne trouverez pas d'accessoires à associer à vos personnages dans cet opus. Cette rubrique va vous expliquer tous les principes du système des armes qui varie légèrement par rapport à ce qui vous a toujours été proposé jusque là. En effet dans Final Fantasy 10, une arme peut porter un nom à un moment T et en changer quelques minutes plus tard. L'explication vient du fait que le nom des armes dépend des compétences qu'elles possèdent. A ce principe s'ajoute un système de priorité qui va part de 66 à 68 (les armes de bases) à 1 (les armes ultimes). Plus les compétences sont rares et précieuses et plus la priorité sera importante. Evidemment une arme ne peut pas baisser de priorité (cela aurait uniquement possible dans le cas où vous auriez pu supprimer des compétences d'une arme ce qui n'est pas possible). Vous ne pouvez pas non plus transformer une arme lambda en priorité 1. Votre but sera donc d'acquérir le plus rapidement possible les armes ultimes de tous les personnages, voir la rubrique <a href='FF10-ArmesUltimes.html' title='Rubrique Armes Ultimes'>Armes Ultimes</a>.</p><br /><br />";
   } else if ($_GET['Personnage'] == 'Tidus') {
      echo "<br /><br /><br /><h1>Section Armes ultimes de Final Fantasy 10 (FF10)</h1><br /><br /><br />";
      echo $Menu;
      echo "---====================---<br />
      [~~ <span class='valeur'>Liste des armes de Tidus</span> ~~]<br />
      ---====================---<br /><br />";
   }
   
   echo "</div>
   
   <br /><br />Angelfire. <br />26/01/2014.
   <div id='Infobulle' class='info'></div><div id='Page' class='page'></div>";

?>


Autre

Dans 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.



_________________
Image

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Lun 27 Jan 2014 19:36 
Equipe de modération
Equipe de modération
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 28 Oct 2010 17:06
Messages: 9503
Localisation: Ivalice
Oulah, je vais lire tout cela avec une grande attention ! Je ferais un essai le plus tôt possible ...
Merci pour tout !
Tu vas avoir rapidement de mes nouvelles normalement ^^



_________________
ImageImage

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Lun 27 Jan 2014 19:46 
Webmaster
Webmaster
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 21 Oct 2010 15:25
Messages: 2772
Si je vois que des gens participent à fond (et en particulier toi Stoz), je vous apprendrai à TOUT faire tout seul mais chaque chose en son temps.



_________________
Image

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Lun 27 Jan 2014 20:05 
Equipe de modération
Equipe de modération
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 28 Oct 2010 17:06
Messages: 9503
Localisation: Ivalice
Je vais essayer de comprendre et je pense que le mieux c'est de faire un essais sur une fiche de perso par exemple. D'ailleurs, s'il est possible de visualiser le code originel en php d'une telle page, je suis preneur ^^Je ne toucherais à rien, je veux juste voir la structure, j'espère pouvoir analyser plus facilement avec un exemple.

En attendant, je vais lire et mettre en application les premières infos ici présente !



_________________
ImageImage

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Lun 27 Jan 2014 20:46 
Webmaster
Webmaster
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 21 Oct 2010 15:25
Messages: 2772
Je t'ai donné les infos nécessaires par mail !
Ravi de voir que tu vas te donner à fond (enfin j'ai l'habitude maintenant ^^ ).



_________________
Image

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Ven 31 Jan 2014 10:23 
Equipe de modération
Equipe de modération
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 28 Oct 2010 17:06
Messages: 9503
Localisation: Ivalice
J'ai vu ton mp, j'ai installé tout ce qu'il faut et copier deux/trois fiches pour analyser !
En revanche, en ce moment, je n'ai pas beaucoup de temps donc faudra un peu de patience avant que je m'y mette sérieusement ^^



_________________
ImageImage

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Mar 4 Fév 2014 19:29 
Séphiroth
Séphiroth
Sage
Sage
Avatar de l’utilisateur

Inscription: Ven 8 Avr 2011 20:06
Messages: 5232
Localisation: quelque part entre 4 murs
trop bien ! je vais lire avec attention tiens , ca peut toujours etre interessant ^^



_________________
Image
Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Mar 4 Fév 2014 19:34 
Webmaster
Webmaster
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 21 Oct 2010 15:25
Messages: 2772
Si tu as des questions ou que tu veux avoir plus d'accès, fait le moi savoir.



_________________
Image

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Jeu 20 Mar 2014 19:20 
Equipe de modération
Equipe de modération
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 28 Oct 2010 17:06
Messages: 9503
Localisation: Ivalice
Comment je fais pour ajouter une image que je veux héberger chez nous ? Je l'upload via le système des news ? (j'imagine que non hum)
Comment je fais pour qu'une nouvelle page soit visible. Je m'explique, disons que j'ai fais une fiche de perso en php et que j'ai le perso.php qui va bien et tout est conforme dedans, comment faire pour que cette nouvelle page apparaisse dans la liste des persos du FF associé ?

Edit : J'ai réussis les gars !!!!!!!!!!!!!!!!!!!!
J'ai fait la fiche de Rikku dans FFX-2, à voir ici : http://www.fffury.com/FF102-Personnages.html

Edit 2 : Je viens de faire celle de Paine et de mettre à jour celle Yuna, toujours FFX-2 !!!!



_________________
ImageImage

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Jeu 20 Mar 2014 22:06 
Super modo
Super modo
Sage
Sage
Avatar de l’utilisateur

Inscription: Mar 26 Oct 2010 21:47
Messages: 866
Très bien stoz. :ok:
Tu t'es vite fait au php.



_________________
Image
Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Jeu 20 Mar 2014 22:12 
Equipe de modération
Equipe de modération
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 28 Oct 2010 17:06
Messages: 9503
Localisation: Ivalice
M'ouais les fiches ce n'est pas bien difficile lol
Pour les quêtes, c'est une autre paire de manche surtout avec les tableaux ...

mais merci !



_________________
ImageImage

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Dim 23 Mar 2014 21:05 
Webmaster
Webmaster
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 21 Oct 2010 15:25
Messages: 2772
Envoie moi toutes tes questions par MP Stoz, je vais tout t'expliquer de A à Z :ok:



_________________
Image

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Mer 9 Avr 2014 19:14 
Equipe de modération
Equipe de modération
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 28 Oct 2010 17:06
Messages: 9503
Localisation: Ivalice
Level up !
J'ai réussis à upploader mon premier article ^^
Sujet: FFXIII-2 / LR



_________________
ImageImage

Image
Hors ligne
 Profil  
 
 Sujet du message: Re: [Tutoriel] Créer une page pour FFFury !
MessagePosté: Mer 9 Avr 2014 21:44 
Webmaster
Webmaster
Sage
Sage
Avatar de l’utilisateur

Inscription: Jeu 21 Oct 2010 15:25
Messages: 2772
Super travail Stoz [hehe]



_________________
Image

Image
Hors ligne
 Profil  
 
Afficher les messages postés depuis:  Trier par  
 Page 1 sur 1 [ 14 messages ] 

Heures au format UTC + 1 heure


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité


Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers

Rechercher:
Aller à:  

cron