Forums GAMERGEN

[GUIDE] Créer un portail, comment s'y prendre !

Règles du forum
Avant de poser votre question, commencez par faire une recherche sur le forum.
Nous mettons également à votre disposition un lexique et une FAQ.
Pour éviter toute censure ou fermeture de votre topic, veuillez lire les règles en vigueur.

[GUIDE] Créer un portail, comment s'y prendre !

Message non lupar Naoki » 24 Mai 2009, 18:56

Bonjour à tous. Me revoici, me revoilà, mais cette fois-ci pour vous montrer comment créer votre propre portail. Je ne m’engagerai pas dans des méthodes complexes, qui s’adresseraient à des gens déjà expérimentés dans le domaine. Le but étant que ce guide permette à n’importe qui de réaliser son portail en quelques temps, avec des connaissances mineures qu’il aura acquis ici. Voyons dès à présent comment on s’y prend, et bientôt, c’est votre portail que l’on pourra tester sur nos PSPs !

Bonne nouvelle également pour vous. Quand je rédige un tuto de ce genre, j’ai toujours pour habitude de n’oublier personne (ou peu de monde). Que vous possédez un Pc (équipé Windows, Linux), ou d’un Mac (équipé OS X), vous ne serez pas exclus.


I)- Un peu de théorie, pour savoir ce que nous abordons.

Je pars du principe qu’un pur débutant ait la curiosité de suivre ce guide, ainsi, je me dois de vous expliquer et définir assez vaguement ce qu’est un portail.

Définition de Portail -> on qualifie de portail, un contenu codé initialement dans des langages de programmation web, et qui propose aux visiteurs diverses manipulations et fonctions. De manière générale, un portail est une (ou plusieurs) page internet à laquelle vous pouvez accéder via une connexion internet pour faire des recherches, lire un texte, jouer à des jeux, écouter la radio, télécharger, etc…

Ces portails sont donc des portails web. Pour votre plus grand bonheur, et si vous ne voulez pas mettre votre portail en ligne, et éviter la nécessité d’une connexion internet pour le lancer, vous pouvez tout aussi bien en faire un simple. Seule contrainte de votre part: faire circuler votre portail à d’autres personnes pour qu’ils puissent le mettre sur la carte mémoire de leur PSP, et le lancer via le navigateur internet (même s’il n’a pas besoin de connexion).
Nous aborderons donc les deux méthodes, soyez rassurés, chacun trouvera son bonheur et ses envies, telles qu’elles soient.

-----------------------------------------------------------------------------------------------------

II)- Quelques outils ne seront pas de refus.

Si vous n’êtes pas perdus jusque là, vous avez compris qu’un portail est codé via un langage web. Pour information, on retrouve principalement ceux qui suivent:

  • Langage Html (ou Xhtml plus récemment), le plus populaire et le plus convoité pour créer des pages internet statiques (contenu qui s’abstient à du texte, des images, des liens, des tableaux, formulaires, etc…).
  • Langage Css, il est complémentaire au Html puisqu’il gère le style graphique de vos pages codées en Html. On l’utilise pour donner des effets au texte (gras, italique, couleur, position), mais aussi pour embellir votre page (le design le thème, le fond de la page).

:: Pour ma part, je me chargerai de vous apprendre les bases rudimentaires de ces langages dans ce guide. Libre à vous par la suite d’en découvrir d’avantage sur mon site web, ou un site tel que siteduzero ou developpez.

Sachez ensuite que l’on retrouve les langages Php et Mysql, pour la création de pages internet dynamiques (forum, inscription de membres, livre d’or, téléchargements et articles, etc…) via des bases de données sql pour gérer et conserver le tout. Mais, ces langages sont relativement compliqués, et vous prendraient la tête plus qu’autre chose, alors nous ne les verrons pas ici.

Pour pouvoir réaliser quelque chose de bien, encore faut-il avoir de quoi le faire. Non, je ne vous ferai pas chercher à droite et à gauche, puisque tout vous sera donné gentiment ici:

- Un éditeur de texte (nécessaire pour taper notre code).

  • Sur Windows, je vous propose le bloc-notes déjà inclus sur le système, mais aussi le célèbre Notepad++ qui permet de colorer votre code et mieux vous y retrouver:

Notepad++ 5.3.1
Image

Image

  • Sur Linux, je propose un éditeur simple du genre Kedit (sous KDE), Gedit (sous Gnome), mais il y a aussi l’éditeur Vim, que vous pouvez vous procurer facilement. Ouvrez votre terminal (shell) et tapez ceci:

Code: Select All Code
sudo apt-get install vim


Image

  • Sur Mac, inutile de chercher plus loin, Smultron est fait pour vous:

Smultron 3.5.1
[url]http://www.clubic.com/telecharger-fiche20251-smultron.html][/url]

Image

- Une PSP, et son navigateur internet fonctionnel, jusque là, ça devrait aller. Et bien voilà, on a tout ce qu’il faut alors passons à la suite.

-----------------------------------------------------------------------------------------------------

III)- Les bases du Html.

Tout le long de ce guide, divers codes vous seront montrés. N’hésitez donc pas à les taper sur des fichiers et à les tester sur le navigateur de votre pc (de préférence Firefox qui est bien à jour, en dépit d’Internet Explorer qui présente du retard), voire sur votre PSP puisque c’est l’objectif final de ce tuto après tout.

Il va être l’heure de mettre les mains dans le camboui et de commencer à comprendre ce super langage. Pour cela, créons notre première page, ouvrez un nouveau document texte avec un des éditeurs que je vous ai proposé tout à l’heure.
Nous allons à présent y ajouter du code que l’on met généralement tout le temps dans une page web, que voici:

Code: Select All Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

  <head>
    <title>Ma première page de Portail</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
   
 <body>

<!-- Le contenu de notre portail se situera ici -->
       
 </body>
</html>


Un peu d’explications s’imposent. Notre première ligne indique au navigateur utilisé que nous avons là une page (x)html en version 1.0 (le plus récent). La seconde ligne qui introduit les balises <html></html> permet de travailler avec du xhtml et de définir le langage de notre page.
Passons maintenant à la balise <head>. A l’intérieur c’est simple, vous avez tout ce qui se met à l’en-tête de votre page (une bannière par exemple). C’est ici également que vous pouvez définir le titre de votre page (entre les balises <title> et </title>. La balise <meta> quant à elle donne globalement l’encodage de votre page. Selon le pays, on retrouve un encodage différent. Vous avez sûrement déjà entendu parlé de l’encodage UTF-8 ? Pour notre page, nous avons besoin de pouvoir en plus de notre texte, utiliser nos accents, ce pourquoi l’encodage iso-8859-1 a été choisi ici.
Enfin, comme je l’aurai indiqué via un commentaire sur le code, on retrouve les balises <body> et </body>. Entre celles-ci, nous coderons le contenu même du site, ce qui se verra directement sur votre page, le corps de la page.


Bien à présent, je vais vous proposer une liste de balises html pour vous aider à créer votre page. Etant donné que ceci n’est pas en cours (sinon il aurait fallu que je fasse plusieurs chapitres), je ne ferai que vous donner les balises jugées « utiles » pour vous et leur description. Ajouté à cela, vous aurez droit à un exemple de page très simple pour comprendre l’application de ce que vous aurez vu jusqu’ici.

Les balises html qui vont suivre sont donc à utiliser entre les balises <body> et </body> soyons d’accord.

Pour mettre un commentaire dans un script (x)html (qui ne sera pas lu par votre navigateur), il suffit de procéder ainsi:

Code: Select All Code
<!-- Un commentaire non lu par le navigateur de la PSP -->


Code: Select All Code
<br />

:: Permet de passer à la ligne suivante. En mettre deux permet donc un saut de ligne.

Code: Select All Code
<hr />

:: Créer une ligne horizontale (pour séparer deux parties par exemple).

Code: Select All Code
<hx>Votre Titre</hx>

:: Mettre un titre (de chapitre par exemple). Remplacer le "x" par un chiffre entre 1 et 6 pour obtenir un titre plus ou moins important.

Code: Select All Code
<p>Votre paragraphe de Texte</p>

:: Permet de faire un paragraphe. Si vous en faîtes un second, il y aura un saut de ligne entre chacun.

Code: Select All Code
<x>Votre texte changé</x>

:: Appliquer un effet au texte. Remplacer les "x" par un "b" pour du texte en gras, par un "u" pour du texte souligné, par un "i" pour du texte en italique.

Code: Select All Code
<center>Votre Texte, Image ou Contenu Divers</center>

:: Permet de centre votre texte. Néanmoins, évitez ce genre de méthode, nous allons voir comment donner un style à notre texte autre que par du html.

Code: Select All Code
<img src="http://lien_image">

:: Pour afficher une image.

Code: Select All Code
<a>http://www.pspgen.com</a>
< !-- Ou bien -->
<a href="http://www.pspgen.com">Site PSPGen</a>

:: Mettre un lien internet (nécessitera une connexion si c’est pour un site en ligne, mais peut aussi diriger vers une autre page de votre portail). Le premier affiche directement le lien dur (avec le "http://"), tandis que le second affichera "Site PSPGen".

Code: Select All Code
<ul>
<li>Idée 1</li>
<li>Idée 2</li>
</ul>

:: Faire une liste à puces. Pour les numéroter, remplacer les balises <ul> et </ul> par <ol> et </ol>.

Afin d’éviter de compliquer les choses, les balises de formulaire et de tableau ne seront pas décrites ici. De plus, elles ne trouveront sûrement pas leur utilité dans un portail html de toute façon.

Comme promis, voici un exemple de code html que l’on pourrait se faire simplement pour un portail:

Code: Select All Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

  <head>
    <title>Ma première page de Portail</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
   
 <body>

<center><h1>Bienvenue sur Mon Portail !</h1>
<img src="pspgen.png"><br /><br /></center>

<p>J'espère que ce guide vous a aidé dans pas mal de choses et qu'il vous a permis de comprendre la création d'un portail. Mais vous n'êtes pas
au bout de vos surprises, en effet, il reste encore beaucoup à apprendre et voir.<br />
Bon courage à tous pour ce qui suivra !</p><br /><br />

<center><p>:: Copyright - Y'en A Pas ::</p></center>
       
 </body>
</html>


Si vous avez-vous-même codé votre page html déjà, ou pris celle que je viens de vous donner, enregistrez votre fichier texte, en lui donnant l’extension (ou format) html (ou htm). Pour mettre une image, il faut simplement indiquer le lien de l’image par rapport au script html. Ici, étant donné qu’ils sont tous les deux sur le Bureau, je n’ai eu qu’à donner le nom de l’image ("pspgen.png").

Vous avez donc tout ce qui demeure basique pour coder du html facilement et efficacement. Mais un texte ne sera pas suffisant pour avoir un joli portail, mais ça c’est le but de ce qui va suivre.

-----------------------------------------------------------------------------------------------------

IV)- Faisons style avec du Css.

Que serait un site sans du css ? Ce langage va nous permettre de styler, et apporter des effets sur le contenu de notre page html. Rappelez-vous de la balise html <center>, je vous ai conseillé de ne pas l’utiliser. En effet, puisque nous ferons cela avec du css.
Son avantage ? Notre fichier html n’aura que le contenu en lui-même de votre portail, et le css se chargera du style graphique, du design. Simple, en faisant plusieurs fichiers css, il suffirait de passer de l’un à l’autre pour changer intégralement le thème de votre portail; efficace non ? :)

Il est grand temps de coder comme des grands. Nous allons donc travailler avant tout la structuration des fichiers de votre portail. Pour cela, créez un dossier sur votre bureau (que vous nommerez "Portail PSP" par exemple). Dedans, placez votre script html et renommez le (par exemple "accueil.html"). Toutefois, on préfère nommer la première page qui sera chargée sur un portail "index.html", afin de mieux s’y retrouver.
A côté de notre script html principal, nous allons faire un dossier qui contiendra notre (nos ?) feuille(s) de style en css. Enfin, un autre dossier qui contiendra les possibles images que vous pourrez utiliser.

On obtient donc un dossier "Portail PSP" de ce type:

Image

A l’avenir, rien ne vous empêche de créer d’autres répertoires (dossier "modules" pour chaque partie de votre portail, dossier "scripts" pour tout ce qui est codé en javascript ou flash, etc…).
Ne perdons pas de temps à présent, allez dans le dossier style (ou celui qui doit contenir vos feuilles de style), et créez un nouveau fichier texte, renommez le "theme" et portant le format css ("theme.css"). Encore une fois, vous pouvez très bien l’appeler "Design_1.css", c’est vous que ça regarde. Maintenant, si vous réfléchissez bien, il faut que notre fichier html puisse charger le css pour que les effets soient appliqués à celui-ci. Pour cela, rien de plus simple, ouvrez votre "index.html" de tout à l’heure. Vous voyez la ligne "<meta..." pour l’encodage de la page ? Après celle-ci (entre la balise "<meta>" et "</head>" donc, placez le code suivant:

Code: Select All Code
<link rel="stylesheet" media="screen" type="text/css" title="Theme" href="style/theme.css" />


Ainsi, quand votre page html charge, en lisant cette ligne, le css est lui-même chargé et va donc appliquer son contenu sur votre portail. Au passage, vous pouvez changer le titre de votre feuille css (après le "title="). Et, si vous avez suivi la même structure des fichiers vu auparavant, nous avons indique le lien où se trouve le css par rapport au fichier html, donc dans le dossier "style" (ce qui donne "style/theme.css").
Bien, le nécessaire est vu. J’espère que vous avez bien suivi jusque là. Au besoin, n’hésitez pas à relire ce guide, à prendre des notes et vous faire des repères, c’est le mieux pour assimiler et comprendre ce que vous allez faire !

Voyons comment on code dans le fichier css. Il ne vous reste qu’à l’ouvrir à l’aide de votre éditeur de texte. Le css paraît un peu compliqué, et prise de tête au début, mais c’est en comprenant son aspect logique que tout s’éclaircit et devient un jeu d’enfant. Jetez donc un rapide coup d’œil sur ces deux bouts de code (ils ne sont pas complets):

:: Bout de code de fichier html ::
Code: Select All Code
<body>
<h1>Un titre -_-</h1>
<p>Bonjour amis de PSPGen !</p>
</body>


:: Bout de code de fichier css ::
Code: Select All Code
h1
{
   font-family: papyrus, arial, serif;
   color: red;
}

p
{
   color: blue;
   font-weight: bold;
}


Même si vous n’avez pas encore vu le css, en analysant de plus près les deux bouts de code, je suis persuadé que vous avez tout compris !
Si ce n’est pas le cas, alors soyez attentifs à ce qui suit. En regardant le contenu de notre html, nous avons utilisé deux sortes de balises: la balise de gros titre <h1> et la balise de paragraphe <p>. Ironie du sort, dans le code du css, nous pouvons distinguer deux groupes: un premier qui commence par h1 et contient des infos entre {}, de même pour p qui en contient aussi entre {}.
Voilà, h1 et p ne sont pas des noms donnés au petit bonheur la chance dans le css, ce sont les noms des balises html. Pour résumer, quand le css croise la balise p dans le script html, il lui applique automatiquement les modifications inscrites entre les accolades de p. Il en fait de même pour la balise <h1>.
Alors, ce n’est pas logique tout ça ? Eh oui, ça l’est, et ça se passera toujours comme ça dans un fichier css. Voyons maintenant les notions de classe et id. Admettons que je veuille créer un bloc html portant un nom que j’aurai moi-même inventé pour le menu du portail par exemple. Ca nous donnerait dans le html quelque chose de ce type:

Code: Select All Code
<body>
<div id="espace">
  <div class="menu1">
   <p>Jeux flash</p>
  </div>
  <div class="menu2">
   <p>Calculatrice</p>
  </div>
</div>
</body>


Voilà un petit menu tout simple. Bien évidemment, vous pouvez glisser du texte, une liste, des images ou encore des liens à la place des "<p>Jeux flash</p>" et "<p>Calculatrice</p>" que j’ai mis.
Enfin, j’ai donné le nom "espace" pour l’id, et les noms "menu1" et "menu2" pour les classes; ces noms peuvent être changés à votre convenance.

Si on veut que notre 'menu' s’affiche comme tel, il va falloir user du css qui va s’en charger:

Css: je s’occupe de tout, tu s’occupes de rien ^^ !


Pour cela, on aurait un code ce genre:

Code: Select All Code
#espace
{
   width: 200px;
   float: right;
}

.menu1
{
   color: blue;
   font-style: italic;
}

.menu2
{
   color: green;
}


D’après ce qui précède, nous aurons donc notre menu sur la droite (pour changer hein), il aura une taille de 200 pixels (de largeur). Concernant le premier sous-menu (Jeux flash), il sera écrit en bleu et en italique, pour le second (Calculatrice), il sera en vert.
Vous avez maintenant compris le fonctionnement entre html et css. Pour un id, nous noterons un # suivi du nom de l’id (ici espace), et pour une class, on utilisera le point . suivi du nom (ici, ce sont "menu1" et "menu2").

Nous avons vu le fonctionnement du css assez rapidement. Maintenant, nous allons fixer notre portail pour un affichage optimal sur la PSP. On sait que l’écran de la psp fait 480 pixels de largeur, alors il serait parfait d’avoir une page web dans cette taille, ni plus ni moins. Rien de plus simple, faîtes preuve de style ^^, et indiquez le dans votre css:

Code: Select All Code
body
{
   width: 480px;
   margin: auto;
}


Simple à comprendre, tout ce qui se trouve dans le body (le corps de votre page, donc tout ce qu’on y code), sera de 480 pixels de largeur, et ce gros block de page sera centré.

A présent, comme je l’ai fait pour le html, voici des propriétés du css qui vous serviront plus d’une fois je suis sûr. Comme dit précédemment, ce guide n’étant pas un cours, je ne ferai que présenter le tout et le décrire rapidement. La meilleure façon de comprendre leur fonctionnement, c’est de les tester dans vos scripts.

Code: Select All Code
/* Un commentaire */

Comme les langages C/C++, ceci est la façon de procéder pour mettre un commentaire dans votre fichier css, il ne sera pas lu par votre navigateur. Il ne vous aide qu’à vous retrouver dans votre code, et indiquer ce que vous voulez. Passons maintenant à un ensemble de choses que vous pourrez utiliser:

Code: Select All Code
param: x;

:: Très utilisé, ceci concerne notamment les blocks. Remplacez le mot "param" par "width" pour la largeur, "height" pour la hauteur. De même qu’il y a aussi "min/max-width" et "min/max-height" pour les dimensions minimales et maximales en largeur/hauteur.
Puis, on remplace "x" par une valeur en pixels, ou par "auto".

Code: Select All Code
font-weight: bold;

:: Avoir le texte en gras. On peut remplacer "bold" par "bolder" pour un texte encore plus gras, ou à l’inverse par "lighter" pour un texte plus fin.

Code: Select All Code
font-style: italic

:: Mettre le texte en italique. Remplacer le "italic" par "oblique" change le système italique.

Code: Select All Code
text-decoration: underline;

:: Pour souligner le texte. On peut souligner au dessus du texte en remplaçant "underline" par "overline", ou le barrer en remplaçant par "line-through".

Code: Select All Code
font-size: xy;

:: Définit la taille du texte. On remplace le "y" par "px" si on exprime la taille en pixels, ou par "%" si on l’exprime en pourcentage. De ce fait, on remplacera le "x" par un nombre, en général de 2 à 72 si c’est en pixels, de 1 à 100 si c’est en pourcent.

Code: Select All Code
color: x;

:: Pour donner de la couleur à votre texte. Diverses façons existent en remplaçant le "x" par le code hexadécimal de la couleur (par exemple #FACD2F pour un joli jaune), le nom de la couleur en anglais (red, green, blue, black, yellow…) ou encore en système RVB: RougeVertBleu (255,0,0 pour du rouge).

Code: Select All Code
background-color: x

:: On retrouve ici les mêmes remplacements à faire pour le "x", mais cela aura une influence sur la couleur de fond.

Code: Select All Code
font-family: "Comic Sans MS", arial, serif;

:: Définir la police de caractères. On peut en indiquer plusieurs. La page utilise la première (sauf si le visiteur ne l’a pas, elle utilisera la seconde, etc…). Les polices en plusieurs mots se mettent entre guillemets. Enfin, il faut toujours terminer un font-family avec serif ou sans-serif.

Code: Select All Code
text-align: x;

:: Pour l’alignement du contenu de la page. On remplace "x" par "left" pour l’aligner à gauche, "center" pour le centrer et "right" pour l’aligner sur la droite. De même, on peut remplacer par "justify" pour que toute la largeur de la page soit utilisée.

Code: Select All Code
background-image:url(x);

:: Permet de mettre une image de fond. On change le "x" par le lien où se trouve l’image pour faire votre background.

Code: Select All Code
background-position: x;

:: Définir la position du fond. La valeur "x" peut être remplacée par "top", "bottom", "center", "right" ou encore "left" selon une position verticlale/horizontale du fond. On peut aussi remplacer le "x" par une valeur en pixels, ou en pourcentage, sachant que le 0 (zéro) se trouve en haut à gauche.

Code: Select All Code
background-repeat: x;

:: Paramétrer le fond de la page. Si on remplace le "x" par "repeat", le fond se répète, en remplaçant par "repeat-x", il ne se répète que sur une ligne, et par "repeat-y" pour le faire répéter sur une colonne; un petit "no-repeat" et il ne se répètera pas.

Code: Select All Code
background-attachment: x;

:: En rapport avec l’image de fond précédente, il faut choisir de remplacer "x" par "fixed" pour que le fond reste statique, et par "scroll" si on veut un fond qui bouge quand on monte et descend la page du portail.

On pourrait appliquer d’autres choses comme la position du fond, mais si vous avez vraiment besoin de ça, il suffira de le demander et je vous l’indiquerai.

Code: Select All Code
margin: y;
/* ou bien */
margin-x: y;

:: Très utile pour créer une marge. On change le "x" par "top", "bottom", "right" ou "left" si on veut en haut, en bas, à droite ou à gauche. La valeur à indiquer à la place du "y" sera en pixels (ou "auto").

Voilà voilà, toutes les bases vous sont données, même s’il manquerait les bordures, quelques propriétés d’affichage, le strict nécessaire est présent ici-même.
Tout à l’heure, vous avez eu droit à un petit exemple de code html (celui avec l’image de PSPGen), alors voici un exemple de css en ayant modifié le html au préalable à télécharger. Une fois fait, il suffit de double-cliquer sur le fichier "index.html" et d’admirer le travail:

Page de Portail Simple
Image

Si vous testez cette page agrémentée du css, voyez déjà ce qui est réalisable en quelques petites minutes ! A s’y méprendre, cela ressemblerait plus à un site qu’un portail. Mais bon, un site est un portail…un portail est un site.

-----------------------------------------------------------------------------------------------------

V)- Mon portail est prêt, que dois-je faire ?

Souvenez-vous en début de ce guide, je vous avais promis de vous montrer comment proposer sont portail hors ligne, ou en ligne, au choix selon vos désirs. Alors, nous ferons de la sorte:

  • Pour un portail hors ligne -> il vous suffira simplement de le présenter sur tous les sites sur lesquels vous voulez le faire partager. Pour la présentation, le contenu général (auteur, type), les fonctions principales, quelques screenshots, hébergés sur des sites comme:

- Mabul
- Casimages

Et le fichier à télécharger bien évidemment pour le mettre sur notre PSP et le tester. Avant de proposer le fichier, soyez sûrs qu’il ne contient plus d’erreurs ou bugs, testez-le et corrigez les possibles fautes d’orthographe. Ensuite, archivez le tout en zip ou rar (via votre programme de compression). Il ne reste plus qu’à héberger le fichier sur un système de stockage parmi les suivants:

- Megaupload
- Fileden
- Mediafire
- File factory

Mettez alors le lien de téléchargement sur les disites pour permettre aux gens de se le procurer.

  • Pour un portail en ligne -> il faut trouver avant toute chose un hébergeur qui autorisera votre portail/site à être hébergé sur le net, et que toute personne pourra accéder via un lien. Pour cela, je ne vous proposerai que de supers hébergeurs gratuits, sans pub (sauf lescigales) et de qualité:

- Umbreon, hébergeur fiable et assez conséquent.

- FirstHeberg, mais propose une petite pub tous les 7 affichages de page.

- Lescigales, mais moins performant que les autres.

Respectivement à chacun, votre portail/site aura pour adresse votre_pseudo.u7n.org chez umbreon, votre_pseudo.firstheberg.com chez firstheberg et votre_pseudo.lescigales.org sur lescigales.

Concernant l’hébergement, si vous rencontrez des problèmes particuliers, les webmasteurs des sites, ou moi-même pourront vous venir en aide !

Une fois votre hébergement créé, il ne vous reste qu’à envoyer via FTP les fichiers de votre portail. Voici des clients ftp très intéressants, en français et gratuits encore une fois:

- Ftp expert, version d’utilisation complète pendant 30 jours gratuite, mais amplement suffisant.

- Filezilla, simple, léger et efficace ! La langue française se met dans le "Settings".

Pareil ici, si vous avez besoin d'aide pour l'utilisation d'un client ftp, je ne suis pas là pour rien.

Une fois que votre portail/site est sur le net, et bien, donnez-nous vite le lien pour y accéder avec ou sans notre PSP !

---------------------------------------------------------------------------------------------------

Pfiouu !! On en est arrivé à terme finalement, et vous savez ce qui est drôle ? C'est que je ne regrette en rien ce que je viens de faire. La seule chose que je souhaite à présent, c'est que ce guide puisse venir en aide à TOUS ceux qui en ont besoin. Un portail, c'est un concept toujours attirant, mais il faut savoir comment on fait, et je viens de vous en donner les moyens.

Bon codage !

ps: information rapide, je n'en ai pas fini avec vous, puisque je n'ai pas terminé de proposer mon aide et mes connaissances aux membres de PSPGen (en plus de ceux de mon site). Alors, suivez l'actualité, et suivez le forum.
Dernière édition par Invité le 23 Sep 2010, 14:39, édité 11 fois.
Fondateur et Administrateur des communautés EvoluNoob & ArcheAge Alliance
Avatar de l’utilisateur Naoki Gamer Bronze
Gamer Bronze
Messages: 1622
Inscription: 29 Juil 2010, 11:29
Localisation: GamerGen
Prénom: Jason
Pays: France
Sexe: Homme

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar SpiritOfSilver » 24 Mai 2009, 19:02

Bravo pour ton exelent travail et le temps qu'a du prendre la New :wink:
SpiritOfSilver Gamer Bronze
Gamer Bronze
Messages: 2138
Inscription: 30 Jan 2011, 22:20
Prénom: Remy
Pays: France
Sexe: Homme

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar urbano25_1 » 24 Mai 2009, 19:03

Très bien, mais il a deja deux tutoriel concernant la création de portail.Merci d'avoir ajouter des précision :wink:
Avatar de l’utilisateur urbano25_1

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar [Yaourt] » 24 Mai 2009, 19:14

Passage en post-it, merci à toi.

Par contre, désolé, mais il faut éviter les sondages pour les tuto. Ce n'est vraiment pas utile et ça gêne la visibilité des post-its.
[Yaourt] Gamer Or
Gamer Or
Messages: 5724
Inscription: 20 Mai 2009, 12:13
Pays: France

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar vermine35_1 » 24 Mai 2009, 19:16

super tuto :wink:

Je pense qu'il passera en officiel... je pense pas gent suis sur :mrgreen:
Image

Image
vermine35_1 Gamer Hardcore
Gamer Hardcore
Messages: 623
Inscription: 01 Mai 2008, 00:00
Localisation: rennes

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar Naoki » 24 Mai 2009, 19:17

Merci à vous.

ps: je supprime le sondage dans ce cas.
Fondateur et Administrateur des communautés EvoluNoob & ArcheAge Alliance
Avatar de l’utilisateur Naoki Gamer Bronze
Gamer Bronze
Messages: 1622
Inscription: 29 Juil 2010, 11:29
Localisation: GamerGen
Prénom: Jason
Pays: France
Sexe: Homme

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar biscottealacrevette » 24 Mai 2009, 21:12

bravo :) et non je ne vois pas pourquoi on se plaindrais d'avoir trop de tuto :D
si tu veut on peut se partager le boulot : tu fait les base HTML/CSS et je m'occupe du javascript/radioplayer sa permettra d'étalonner les tuto sous plusieurs niveau de difficulté :) contacte moi par MP si t'est partent .

coquille :
<img src=»http://lien_image»>

<a href=»http://www.pspgen.com">Site PSPGen</a>

Css: je s’occupe de tout, tu s’occupes de rien ^^ !
a moins que se soit un jeux de mot :S ^^

et ya une URL pas loin du screen MAC ki a looper :(

et pour le client FTP : j'utilise WinSCP , il prend en charge le FTP / SFTP / SSH etc... open source , dragNdrop , etc.. a tester
biscottealacrevette Gamer Hardcore
Gamer Hardcore
Messages: 750
Inscription: 28 Jan 2010, 20:54

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar Naoki » 24 Mai 2009, 22:11

Je me doutais, vu que j'ai tape sous Word pour éviter de tout devoir recommencer (on ne sait jamais avec le net), et il met des guillemets autres que d'habitude.

Pour le lien de Mac, il n'est pas faux, seulement, même en le mettant correctement, le lien [url][/url] ne se fait pas correctement ici (va savoir pourquoi). Pour les bases du html, ça pourrait être intéressant, même si j'ai bien d'autres projets en plus.

ps/hs: pour le "je s'occupe de tout, tu s'occupes de rien !", c'est une réplique de Jamel 100% Debbouze.

EDIT: petites coquilles corrigées ! :wink:
Fondateur et Administrateur des communautés EvoluNoob & ArcheAge Alliance
Avatar de l’utilisateur Naoki Gamer Bronze
Gamer Bronze
Messages: 1622
Inscription: 29 Juil 2010, 11:29
Localisation: GamerGen
Prénom: Jason
Pays: France
Sexe: Homme

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar napster23 » 24 Mai 2009, 22:58

super TUTO mais si vous partager Toi est biscottalacreuvet ca serat vraiment trops cool. :wink:
Always Look as Far as Possible!!!
napster23 Gamer Pro
Gamer Pro
Messages: 214
Inscription: 29 Juil 2010, 09:24
Localisation: Annaba,
Prénom: Fares
Pays: Algerie
Sexe: Homme

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar Naoki » 25 Mai 2009, 19:00

Personnellement, je n'ai jamais été égoïste, donc je ne vois pas pourquoi je refuserais =).
Fondateur et Administrateur des communautés EvoluNoob & ArcheAge Alliance
Avatar de l’utilisateur Naoki Gamer Bronze
Gamer Bronze
Messages: 1622
Inscription: 29 Juil 2010, 11:29
Localisation: GamerGen
Prénom: Jason
Pays: France
Sexe: Homme

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar urbano25_1 » 26 Mai 2009, 11:59

Oh les machine a écrire :lol:
Avatar de l’utilisateur urbano25_1

Re: [GUIDE] Créer un portail, comment s'y prendre !

Message non lupar Naoki » 27 Mai 2009, 16:36

Quand tu aimes écrire, peu importe le temps que prend un guide de ce genre, du moment que l'on est fier d'aider les autres dans le besoin, c'est tout ce qui compte ! =)
Fondateur et Administrateur des communautés EvoluNoob & ArcheAge Alliance
Avatar de l’utilisateur Naoki Gamer Bronze
Gamer Bronze
Messages: 1622
Inscription: 29 Juil 2010, 11:29
Localisation: GamerGen
Prénom: Jason
Pays: France
Sexe: Homme

Suivante

 

Retourner vers Blabla