Construire son site

Vaste sujet ! Mais, qui n'est pas sans intérêt.
Il est assez simple de faire son blog , avoir son forum ou les deux; gratuitement, de nombreux sites le proposent,il suffit de parcourir un peu le web ...
- Plus "amusant" : Faire son site de A à Z ou presque , pour cela il faut un peu de temps, de patience et quelques recherches.
1) En premier définir le ou les sujet(s) abordé(s) et trouver un nom.
2) Définir le CMS qui convient: simple blog, wiki avec ou sans forum, portail complet ...
3) Installer un serveur local pour permettre de travailler directement sur son ordinateur.
4) Se procurer un nom de domaine
5) Trouver un hébergeur.
Voilà pour les grandes lignes.
Si vous débutez ne vous ruez pas tout de suite chez un hébergeur payant; préférez les gratuits qui vous permettrons de tester "en vrai" l'impact de votre site et ses fonctionnalités. Attendez d'avoir un petit groupe de membres qui peuvent vous faire remonter des erreurs (ils y en as toujours) souvent lièes à l'affichage et au côté pratique du site. Ne soyez pas pressé d'avoir votre site en première ligne d'un moteur de recherche ! Certains sites paient pour cela. Comptez une bonne année avant d'apparaître sur les écrans de "Recherches".
- Et, plus tard il vous sera toujours possible de quitter votre hébergeur gratuit pour un hébergement de type "pro" . Les premiers prix tournent aux environs d'un euro par mois avec ou sans nom de domaine, a vous de voir et de comparer, les besoins de chacun étant très différents.



Un serveur local



L'incontournable sera de bien potasser les différents tutos existant sur le web. Il est impensable de se lancer dans la construction d'un site sans la plus petite notion en html,php et css. Rassurez-vous il n'est pas utile d'être un développeur non plus.
Avant toute chose : Installer un serveur local sur votre ordinateur, voir -Installer LAMP- ou si vous avez Windows : Wamp Server . Créez un dossier nommé -public_html- et placez y votre futur site , puis, suivez les conseils d'installation.
Dans la pratique :
La configuration recommandée pour installer un site est de disposer d’un serveur: Apache, de PHP et Mysql, c’est trois composant sont généralement fourni par un hébergeur contre une rémunération plus ou moins importante, étant donnée que vous commencez vous n'êtes pas chez un hébergeur, vous avez donc la possibilité d’installer sur votre ordinateur un serveur qui remplira exactement les mêmes fonctions : d'où le nom -serveur local - à moindre frais.
- Pourquoi aurais-je besoin d’un serveur local ?
  • Votre site est directement accessible, inutile de passer par un logiciel de transfert comme Filezilla. Vous pouvez donc modifier, supprimer et ajouter des fichiers directement dans le dossier public_html.
  • Vous apprendrez à gérer une ou des bases de données via PHPmyAdmin et à les sauvegarder. Voir à les transférrer le moment venu chez un hébergeur .
  • Et si cela vous tente héberger votre site en ligne chez vous : auto-hébergement


Un nom de domaine



Inutile d'acheter un nom de domaine dés le début, vous pouvez très bien déployer votre site chez vous et/ou grâce à l'hébergement fournit par votre FAI, voir utiliser un hébergeur gratuit vous permettant de tester votre site en conditions réelles. Généralement ces hébergement intègrent un nom de domaine pas toujours au top, mais il n'y as pas de petites économies.
- Plus tard quand votre site ronronne doucement vous aurez tout le loisir de trouver le nom de domaine -qui claque- !
La plus part des hébergeurs payants vous en proposent en .fr .com .org avec l'adresse mail qui correspond.
Les noms de domaine sont attribués à l'année, il est donc important de les renouveler régulièrement, regardez ceux qui sont disponible sait-on jamais. De ce fait vous bénéficieriez de l'impact laissé par votre prédécesseur dans les moteurs de recherches.

Un hébergement



Là nous touchons au gros problème: investissement raisonné ou pas ?
Et bien si vous avez suivi les conseils plus haut vous devez avoir une idée de "l'impact" de votre site. Si, il n'est visité que par 4 personnes par jour : inutile de cibler le gros trafic et la méga structure = pour le moment .
Commencez doucement vous aurez tout le loisir de monter en puissance par la suite , en attendant que, comme je vous le souhaite, votre site soit dans le top 50.
Pour commencer, privilégiez un peu le trafic, le volume disque n'est pas vraiment un gros soucis de nos jour 1 giga c'est gigantesque ! A minima une base de données si votre site le réclame et le mail pour faire plus sérieux. Comme je l'ai dit l'hébergement démarre au alentour de 1€ par mois. De toutes les façons SI vous avez déjà l'expérience sur du gratuit ou en local vous connaissez le volume disque indispensable a vos débuts ainsi que la base de données ou pas ,et, le trafic sera -au début-toujours largement suffisant.
Différents types d'hébergement :
- Les offres d'hébergement mutualisées : adapté aux sites personnels de taille moyenne.
- Les offres d'hébergement dédiées : pour des sites nécessitant des ressources importantes.
- Les offres d'hébergement semi-dédiés ou virtuelles : dites "offres VPS" (serveurs privé virtuel) elles se trouvent à mi chemin entre les solutions dédiées et mutualisées,
- les offres d'hébergement cloud : particulièrement adaptées aux sites qui ont de grandes fluctuations en termes de ressources.
En dehors de ce fait il faut mettre dans la balance non seulement le coût mais aussi ses besoins, la sécurité, la disponibilité, l'accès à la base de données, l'aide que peut fournir l'hébergeur et dans quelle langue....

Télécharger le thème Drakinfos



Si vous avez choisi le CMS PHPBoost, vous pouvez installer le thème -draktem- ou du moins sa version prête à être modifiée.
Ce n'est pas une version officielle PHPBoost vous devrez un peu modifier du code pour en faire votre thème, la lavande et le mauve sont volontairement présent pour vous guider dans la modification du style. Je parle là des images et des couleurs le reste est identique au site actuel. je n'ai pas la prétention de livrer un thème aboutit, il convient de voir cela comme une base de départ.

lavande


Les couleurs sont volontairement voyantes je n'ai pas cherché à harmoniser puisque le résultat final vous appartient.
A noter
  • Les colonnes droite et gauche ne sont pas disponibles.
  • Le menu haut contenant la connexion doit se trouver impérativement dans la -Tête de page- Administration/contenu/menu/gestion. modification en cours
  • Des modules peuvent ne pas fonctionner je n'ai pas tout testé.

Modifications conseillées :
- Vous devrez modifier le sprite ou le remplacer par le votre voici un lien : CSS Sprite Generator dans ce cas vous devrez modifier le fichier design.css à partir de la ligne 352 /*Sprite du theme*/ en fonction de vos besoins et, accessoirement le .tpl du module connect (attention au nom :tema si vous en changez).
- Le footer et son dégradé son modifiable en ligne 269 de design css le dégradé est généré sur ce site : Ultimate CSS Gradient Generator il vous suffit de remplacer les lignes.
- Le fichier draksoft.css contient les adresses des images utilisées en remplacement de font awesome, vous pouvez remettre ces fonts .Il vous faudra modifier frame.tpl ligne 22 et remettre le lien pointant sur le css font awesome. Vous pourrez de ce fait supprimer le dossier drakico .
- Il y as plein de choses qui "clochent" oui et non, j'ai conservé les css dites de base vous pouvez les alléger et les simplifier a votre guise. ceux du site en ligne sont complètement différentes.
Pour le moment PHPBoost allant passer en UTF8 le thème est en cours de modification:
Télécharger le style : montheme.zip Lien mort
Vous remarquerez , une fois installé, que sur ce site (Drak-infos) le footer est un peu différent:

footer1


En fait c'est une modification qui se fait via le panel d'administration.
Si vous désirez le conserver, il faut créer le Menu dans : Administration/Contenu/Menus/Gestion/ et activer pied de page (sauf si déjà actif).
Puis cliquer sur : Ajouter un menu - Menu de Lien . une page s'ouvre à vous de la compléter : Ajouter un sous menu puis le nombre d'éléments que vous désirez.

footer2


Sur ce site j'ai opté pour quatre colonnes; pour chaque colonne vous devrez recommencer l'opération : Ajouter un sous menu et ses éléments.

footer3


Conservez ou indiqué l'adresse du .gif transparent contenu dans : Thème/images/transparent.gif
Cette image d'un pixel vous permet d'afficher les symboles image présent sur le sprite. Ou indiquez l'image de votre choix..mais là vous savez le faire.

Remarques


Le site Drak-infos est un passe temps, le style est en constantes évolutions. Toutes les css ont étaient optimisées, allégées et misent "inline" c'est à dire sur une seule ligne sans commentaires ni indications, et seront dans un second temps regroupé en deux ou trois css, pour réduire les requêtes.
Vous pouvez bien sur en faire de même en gardant à l'esprit que -inline- est un peu moins clair à modifier, la solution consiste (mon avis) à conserver en local les css «classiques» et apporter les modifications puis, après des tests en local les modifier -inline- dans un dossier pour les envoyer sur votre serveur.
Pour optimiser les css j'ai utilisé :
CSS Minifier il suffit de copier/coller une à une les css, et de refaire l'opération inverse si l'on veut conserver la css de base
. Simple rapide efficace!
Attention aux espaces et ponctuations:
En vous lançant dans la modification faites très attention a tout ce qui touche les espaces, accents et symboles:
  • Ne mettez pas d'accents: é-à-è-û sont à évitez presque partout sauf dans du texte .
  • Ne placez aucun espace dans vos liens du genre : ma page de texte.png faites plutôt: ma_page_de_texte.png ou trouvez un nom plus simple.
    Sans cela vous vous retrouverez avec un lien du genre : ou %20 : ma page%20de_texte.png = pour exemple.
  • La commande peut, être bien formulée mais mal placée ce qui du coups ne fonctionne pas.
  • Soyez précis et méticuleux, les commandes répondent à des codes qui sont établit par et pour les navigateurs inutiles d'en changer.
  • Les symboles et ponctuations ont également leur rôle ne les négligez pas ; point-virgules et : deux-points n'ont pas la même fonction (par exemple).
  • Pour le moment le cms PHPBoost n'utilise pas UFT8 (c'est prévu pour bientôt), il utilise actuellement (2016 version 5.0) l'encodage Europe occidentale ISO-8859-1/windows-1252.
  • Commencez par des choses simple quitte à revenir dessus par la suite.
  • Utilisez firebug (pluging Firefox) Tutoriel Firebug

Plus d'infos : Le thème en détails.

Cette page a été vue 1004 fois