Version en ligne

Tutoriel : Introduction aux designs distants

Table des matières

Introduction aux designs distants
Propos et prérequis
La clé de la création
Structure XHTML de base
Pack design, notre casse-croûte
Le code CSS, ça fait mal
Une ancienne structure maintenant rénovée
L'hébergement pour vos designs

Introduction aux designs distants

Propos et prérequis

Depuis 2005, le Site du Zéro dispose d'un module assez pratique permettant de customiser à votre guise le design du site : les designs distants.
Dans cet article, nous allons voir comment réaliser tout cela avec une introduction aux designs distants.

Propos et prérequis

La clé de la création

Rapidement, si vous ne connaissez pas : le webdesign est la création et la mise sous logiciel de la charte graphique d'un site (les formes, les couleurs...). Si nous prenons en exemple le site actuel, nous avons un #header en haut ainsi qu'un #menu sur la gauche... C'est ce que vous devez faire : recréer l'interface du site selon votre envie.

Vous êtes donc décidé à créer votre propre design ? Il faut cependant vous mettre en tête que la réalisation d'un webdesign requiert certaines connaissances poussées.
La création d'un design se structure habituellement en trois grandes étapes :

Cela est une règle générale pour tous les webdesigns. Or, pour les designs distants du Site du Zéro, vous avez une étape en moins : l'intégration (X)HTML. Il est en effet logique que vous ne puissiez pas modifier la structure HTML d'un site. Le schéma devient donc :

Les connaissances

La création d'un design n'est pas toujours une chose aisée, il faut être imaginatif et avoir un assez bon niveau dans le domaine de l'infographie 2D, sans quoi vous n'aurez pas de rendu correct.
Ensuite, il va bien falloir intégrer tout ça au site... ce qui ne sera pas simple (nous verrons cela un peu plus tard). Concrètement, pour ne pas passer par quatre chemins, vous devez avoir de très bonnes connaissances, dans notre cas, en CSS.


La clé de la création

La clé de la création

Propos et prérequis Structure XHTML de base

Nous allons reprendre notre petit schéma et le découper pour mieux comprendre.
Dans un premier temps, nous vous avons parlé de l'imagination et des croquis. Mais comment ça marche, tout ça ? Comment pouvez-vous vous inspirer ? Surtout pour un site dont la structure est déjà établie ?

Comment imaginer mon design ?

Il existe plusieurs types d'inspiration ; celle qui vous servira le plus est appelée l'inspiration réelle. Regardez autour de vous : regardez les couleurs ainsi que les différentes formes qui vous entourent. Pour mieux comprendre ce que nous souhaitons exprimer, voici un petit exemple.

Cyril a un bureau boisé assez clair, et voici sa récente charte graphique. Le fond clair correspond à la couleur de son bureau, le bois foncé correspond aux couleurs (bon, en plus clair quand même) des troncs d'arbres pas loin de chez lui. Vous voyez ? Ce n'est pas non plus hyper compliqué.

Ensuite, vous avez une autre technique un peu plus complexe qui consiste à dessiner tout ce qui vous passe par la tête. Nous n'avons pas d'exemple propre à vous proposer, mais vous pouvez dessiner un rectangle sur du papier blanc et schématiser des formes pour votre webdesign, ainsi que sortir vos crayons de couleur... En temps normal, vous devez élaborer la forme de votre site sur papier, mais tout le monde ne le fait pas, nous ne pouvons donc pas vous y forcer.

Il existe aussi des sites qui recensent des designs réalisés par des professionnels et qui peuvent vous donner des idées et autres. Google est votre ami pour trouver des galeries CSS.

Comment créer mon design ?

Il y a une grosse différence avec la question précédente. Nous en sommes à la deuxième partie de notre schéma : la mise en forme sous logiciel. Nous n'allons pas vous refaire ce qui a été écrit un peu plus haut, mais si vous n'avez aucune connaissance, ne continuez pas, vous aurez beaucoup de mal à mettre en œuvre vos idées.

Munissez-vous donc d'un logiciel d'imagerie tel que Gimp, Photoshop ou autre (même Paint, pour rigoler un peu) et commencez à tracer votre design. Reprenez vos formes réelles ou vos formes dessinées et constituez, créez, innovez (il faut toujours chercher à innover les webdesigns, pour ne pas refaire un webdesign existant — ou presque).
Ne vous retenez vraiment pas, faites ce que vous devez malgré la question suivante qui vous fera quelque peu réfléchir.

La structure de ma charte ne correspond pas à celle du site, comment faire ?

Vous devez tout recommencer... Non, c'est une petite blague pour voir vos petites têtes. o_O

Alors, ça, c'est une question qui peut vous bloquer, mais rassurez-vous, nous allons y répondre simplement. On donne une structure HTML et vous devez vous débrouiller avec du CSS (c'est pour cela qu'il faut que vous soyez ami(e) avec ce langage). Il va falloir faire correspondre les différentes parties HTML avec votre charte, et ce ne sera pas toujours de la tarte (surtout avec la compatibilité des navigateurs).

Heureusement, en CSS, vous pouvez utiliser deux choses qui vous seront sans doute très utiles, à savoir :

Imaginons que vous ayez une petite barre à coder en bas, comme Facebook par exemple : comment allez-vous vous y prendre ? En reprenant par exemple le header et en le modifiant en ajoutant un position : fixed. Simplement, il faut vous mettre quelque chose en tête : avant de vous attaquer au développement, étudiez le code CSS et HTML du Site du Zéro. Sans cela, vous n'arriverez jamais à savoir ce que vous devez déplacer ou modifier.

N'hésitez pas non plus à utiliser les pseudo-éléments :before et :after qui vous seront assez utiles dans des cas complexes.


Propos et prérequis Structure XHTML de base

Structure XHTML de base

La clé de la création Pack design, notre casse-croûte

Vous devrez créer votre design distant en vous servant des nombreux id et class disponibles dans la structure (X)HTML du site. Nous vous conseillons, si vous utilisez Mozilla Firefox, l'extension Firebug qui permet de naviguer au sein du code source pour voir la structure et le CSS. Vous pourrez apporter des modifications en ayant un aperçu en direct.
Voici un condensé de la structure (X)HTML du Site du Zéro :

<div id="top">
   <ul class="intersites"></ul>                 <!-- Onglets « Informatique » et « Bientôt » -->
   <ul class="stats_sites"></ul>                <!-- Amis connectés — nombre de membres connectés — nombre d'inscrits -->
</div>

<div id="header">
   <div class="header_gauche"></div>            <!-- Logo -->

   <div class="header_droit">
      <div class="fr">                          <!-- À savoir : la classe fr signifie « float: right; ». C'est une classe très utilisée sur le SdZ -->
         <div id="logbox"></div>                <!-- Boîte contenant toutes les options du compte en haut à droite -->
         <form id="recherche"></form>           <!-- Comme son nom l'indique, c'est le formulaire de recherche, en dessous de la logbox -->
      </div>
   </div>

   <div id="publicite_banniere"></div>          <!-- Bannière de publicité en haut des pages (pas toujours présente) -->
   <ul id="speedbar">                           <!-- Menu de navigation -->
      <li id="speed_xxxx"></li>                 <!-- Chaque li a un id différent (speed_accueil, speed_cours, etc.) -->
   </ul>
</div>

<div class="contenu">
   <div id="menu">                              <!-- Menu de gauche (sidebar) -->
      <div id="menu_xxxx" class="box_menu">
         <h5></h5>                              <!-- Titre du menu -->
         <div class="corpsmenu">                <!-- Contenu du menu -->
         </div>
      </div>
   </div>
   

   <div id="corps">
      <div id="zozor_position"></div>           <!-- Zozor à droite -->
      <div id="container_bulle_zozor"></div>    <!-- Message de Zozor -->

      <div id="arbre"></div>                    <!-- Fil d'Ariane -->
      
      <h1></h1>                                 <!-- Titre de la page -->
      
                                                <!-- Suivi du contenu dont la structure varie selon les pages -->
   </div>
</div>

<div id="footer">                               <!-- Pied de page -->
   <ul>
      <li>                                      <!-- li représentant une colonne du pied -->
         Titre colonne                          <!-- Titre de la colonne -->
         <ul>
            <li>Lien</li>                       <!-- Lien de la colonne -->
            <li>Lien</li>
            <li>Lien</li>
            <li>Lien</li>
            <li>Lien</li>
         </ul>
      </li>
   </ul>
</div>

Autant dire qu'il y a de quoi personnaliser le site comme on le souhaite !
On retrouve cette structure sur toutes les pages du site, avec certaines boîtes du menu de gauche qui sont optionnelles.


La clé de la création Pack design, notre casse-croûte

Pack design, notre casse-croûte

Structure XHTML de base Le code CSS, ça fait mal

Il est maintenant temps d'aborder le vif du sujet : notre pack design.
Nous allons dans un premier temps découvrir ce fameux pack design, puis nous verrons comment le modifier et intégrer notre design au site.

Un pack design, c'est bon au goûter

C'est avec un peu d'humour que nous allons démarrer ce sous-chapitre.
Tout d'abord, qu'est-ce que le pack design ? Parce que c'est bien beau d'en parler, mais si vous ne savez pas ce que c'est, vous allez avoir faim. ^^

Le pack design est un fichier compressé contenant les codes CSS et les images du site. Avant de le télécharger, analysons sa structure.

J'ai volontairement supprimé de la liste les fichiers sf_admin.css et sf_joboffer.css qui ont des rôles internes pour les membres de l'équipe. Cela n'est donc pas de notre ressort.
Nous avons beaucoup décortiqué le pack design, ce qui est une bonne chose. Nous allons maintenant voir comment nous procurer cette fameuse archive.

Procurez-vous votre propre pack !

Voici un point important qu'il va falloir bien comprendre.
Suite à une suggestion présente sur le forum prévu à cet effet, le pack design a été modifié. Passé un temps, l'archive était conservée sur le site et mise à jour tous les matins à 7 h (ou dans ces eaux-là). Cela a maintenant été modifié. Tout se structure dans un dépôt Git.

Maintenant, vous avez deux choix :

C'est cette dernière solution que nous allons voir ici (pas besoin d'explications pour cliquer sur un simple lien, dans le cas de la première solution).
Tout d'abord, nous allons créer un dossier quelconque pour y accueillir notre pack. Je vais imaginer que je me crée un dossier spécial pour mes designs du site :

cyril@cyril-laptop:~$ mkdir siteduzero
cyril@cyril-laptop:~$ cd siteduzero
cyril@cyril-laptop:~/siteduzero$

Nous allons maintenant initialiser notre dossier et y cloner le dépôt.

cyril@cyril-laptop:~/siteduzero$ git init
Initialized empty Git repository in /home/cyril/siteduzero/.git/

cyril@cyril-laptop:~/siteduzero$ git clone http://github.com/simpleit/zDesign.git
Initialized empty Git repository in /home/cyril/siteduzero/zDesign/.git/
remote: Counting objects: 236, done.
remote: Compressing objects: 100% (225/225), done.
remote: Total 236 (delta 12), reused 229 (delta 9)
Receiving objects: 100% (236/236), 376.20 KiB | 282 KiB/s, done.
Resolving deltas: 100% (12/12), done.

cyril@cyril-laptop:~/siteduzero$

Dirigez-vous vers votre dossier nouvellement créé : cyril@cyril-laptop:~/siteduzero$ nautilus.

Voilà, vous êtes maintenant en possession de la toute dernière version du design du site. Un petit git pull pour mettre à jour votre dossier de temps à autre et vous voilà parés pour nous réaliser de beaux designs.


Structure XHTML de base Le code CSS, ça fait mal

Le code CSS, ça fait mal

Pack design, notre casse-croûte Une ancienne structure maintenant rénovée

Le code CSS du Site du Zéro, une vraie prise de tête, nous pouvons vous le garantir. Mais ce n'est pas pour autant que nous devons abandonner, loin de là.
Nous allons maintenant nous occuper du code CSS et plus précisément du fichier design.css qui contient tout le design du site.

Voici la structure CSS raccourcie (oui, nous n'allons pas vous copier-coller tout le code non plus).

/* --------------------------------- */
/* ------------- zCode ------------- */
/* --------------------------------- */

.fl, .flot_gauche {}
.fr, .flot_droite {}
/* ... */

/* --------------------------------- */
/* ----------- Génériques ---------- */
/* --------------------------------- */

body {}
h1 {}
/* ... */

/* ---------- Formulaires ---------- */

label {}
fieldset {}
/* ... */

/* --------------------------------- */
/* ------------- Contenu ----------- */
/* --------------------------------- */

/* --------------- Top ------------- En code HTML, tout ce qui se trouve dans la div #top */

.stats_sites, .intersites {}
.stats_sites {}             /* Partie gauche du top */
.intersites {}              /* Partie droite (intersite) du top */
/* ... */

/* -------- Menu déroulant --------- Le menu déroulant pour les amis, la logbox... */

.popup_menu ul {}
.popup_menu ul li {}
/* ... */

/* ---- Classes rapport boutique --- Deux classes pour des inputs en rapport avec la boutique */

.adresses {}
.adresses_boutique {}

/* ------------- Header ------------ En code HTML, tout ce qui se trouve dans la div #header */

#header {}
#header .header_gauche {}   /* Partie gauche du header */
#header .header_droit {}    /* Partie droite du header */
/* ... */

#logbox {}                  /* Logbox */
/* ... */
#recherche {}               /* Barre de recherche */
/* ... */

ul#speedbarre {}            /* Speedbarre */
/* ... */

/* ------------- Menus ------------- En code HTML, tout ce qui se trouve dans la div #menu */

#menu {}
.box_menu h5 {}             /* Titre des boîtes */
.box_menu .corpsmenu {}     /* Contenu des boîtes */
/* ... */

.barre_msg {}               /* Barre des messages d'information ou d'erreur */
/* ... */

/* ------------ Contenu ------------ En code HTML, tout ce qui se trouve dans la div #contenu */

.contenu {}                 /* Contient les menus et le corps */
#corps {}                   /* Corps du site */
/* ... */

.infobox {}                 /* Différents blocs présents sur le site ou dans les news... */
/* ... */

a.bouton_action, .bouton_action  {} /* Bouton d'action comme « ajouter un message »... */
/* ... */

/* ------------ Footer ------------- En code HTML, tout ce qui se trouve dans la div #footer */

#footer {}
/* ... */

/* ------------ Tableaux ----------- Liste des forums, affichage d'un sujet... */

.liste_messages {}          /* L'affichage d'un sujet */
.liste_cat {}               /* L'affichage de la liste des sujets */
/* ... */

/* -------------- zCode ------------ Paramètre du parseur zCode */

.rmq {}                     /* Balise <attention></attention>... */
/* ... */

/* -------------- zForm ------------ Paramètre de la barre de zCode */

.zform_menu {}
.zform_couleur {}
/* ... */

Je viens de vous décortiquer le gros du code CSS. Bien sûr, il reste incomplet, mais j'ai choisi de lister ici seulement les balises importantes dont je suis sûr que vous allez vous servir dans vos designs. Vous n'avez pas vraiment besoin des autres, étant donné que vous ne les utiliserez normalement pas.

Avec un peu de logique, vous allez prendre ce raisonnement via ce petit listing que je vous ai fait.

Citation : un monsieur qui pense à créer son design pour le SdZ

Hum... Je dois modifier la logbox, mis à part le fait que je ne sais pas sur quoi me baser.

Cet homme a deux choix :

Il se rendra vite compte qu'il faut utiliser #logbox et ses enfants pour modifier la logbox.


Pack design, notre casse-croûte Une ancienne structure maintenant rénovée

Une ancienne structure maintenant rénovée

Le code CSS, ça fait mal L'hébergement pour vos designs

Les plus anciens d'entre nous se souviendront sans doute de Bluzaz, l'ancienne version du site. Pour les autres, ce n'est pas très grave, nous allons rattraper le temps perdu.
Depuis la sortie de New-Wave en mars 2009, beaucoup de membres auraient préféré rester sur Bluzaz, car ils n'aimaient pas trop la nouvelle version. De plus, les designs distants n'étaient plus compatibles avec New-Wave.

Un peu plus tard, quelques membres ont essayé de recréer cette interface mais le résultat n'était pas vraiment ressemblant aux yeux des membres. Je me suis donc lancé moi aussi dans ce petit défi personnel : recréer l'interface Bluzaz pour New-Wave et ainsi pouvoir remettre à jour les anciens designs.

Voici un petit aperçu de la version actuelle de zBluzaz (le nom du design) :

Image utilisateur

À l'image du design officiel, j'ai créé un dépôt Git pour accueillir le code source de Bluzaz. Vous pourrez ainsi maintenir à jour vos designs sous cette structure plus facilement. Mais vous pouvez aussi utiliser la structure, qui sera à jour en même temps que le dépôt Git.

Là encore, nous allons refaire notre petit bazar pour cloner notre dépôt Git.

cyril@cyril-laptop:~$ cd siteduzero
cyril@cyril-laptop:~$ mkdir zBluzaz
cyril@cyril-laptop:~/siteduzero$ cd zBluzaz

cyril@cyril-laptop:~/siteduzero/zBluzaz$ git init
Reinitialized existing Git repository in /home/cyril/siteduzero/zBluzaz/.git/

cyril@cyril-laptop:~/siteduzero/zBluzaz$ git clone git://github.com/Kagogal/zBluzaz.git
Initialized empty Git repository in /home/cyril/siteduzero/zBluzaz/zBluzaz/.git/
remote: Counting objects: 342, done.
remote: Compressing objects: 100% (327/327), done.
remote: Total 342 (delta 13), reused 342 (delta 13)
Receiving objects: 100% (342/342), 463.41 KiB | 77 KiB/s, done.
Resolving deltas: 100% (13/13), done.

cyril@cyril-laptop:~/siteduzero/zBluzaz$

Dorénavant, si vous avez envie de retourner sur d'anciens designs comme Methys par exemple, vous le pouvez en modifiant les images de la structure ; rien de plus simple.


Le code CSS, ça fait mal L'hébergement pour vos designs

L'hébergement pour vos designs

Une ancienne structure maintenant rénovée

Le site n'héberge pas vos designs, il vous faut les héberger sur un serveur distant. Vous avez plusieurs choix.

Votre URL, une fois votre design hébergé, ressemblera à quelque chose de ce genre : http://(www).monsite.fr/pack_design/.
C'est cette URL qu'il va falloir entrer et faire valider sur le site.

Comment ça marche ?

Rendez-vous sur la page des designs distants (ou Mon Compte → Réglages → Modifier le design) et vous suivez les instructions. Je ne pense pas qu'il soit nécessaire de vous rédiger des lignes pour ça.
Cependant, il faut savoir une chose : l'URL est insérée dans la base de données. Pour changer de design, vous êtes obligé de retourner sur cette page et de cliquer sur « Revenir sur le design d'origine ». Il se peut que votre serveur ne fonctionne plus ou assez mal. Vous aurez donc un site tout blanc car aucun CSS ne sera présent. Si plus rien ne marche, retenez cette URL : http://www.siteduzero.com/designs.html ; elle vous donnera un accès direct à votre affichage personnel.

Citation : Monsieur X

Hum... C'est bien beau tout ça, mais si je veux changer de design sans devoir aller sur Mon Compte → Réglages → Modifier le design, comment puis-je faire ? Par exemple en une URL ?

Les développeurs ont pensé à tout ! En effet, à la place de retenir chaque URL et de les coller dans cette page, vous pouvez tout faire en une seule URL : http://www.siteduzero.com/designs.html?design=http://(www).monsite.fr/pack_design/.

Cela peut faire un peu lourd, mais bon, de ce fait, le champ sera automatiquement rempli et vous n'aurez plus qu'à valider votre changement de design.

Cet article est terminé.
Nous espérons qu'il vous aura servi pour la réalisation de vos designs pour le Site du Zéro !

N'hésitez pas à poser vos questions dans le forum dédié, nous nous ferons une joie de vous répondre. Merci d'éviter les messages privés ; d'ailleurs, plus de personnes sont susceptibles de répondre sur le forum. En cas d'extrême urgence, vous pouvez toutefois tenter de nous contacter via un message privé.

Bonne continuation avec vos propres designs, et à bientôt sur le Site du Zéro !

Cordialement,
Alex-D & Cyril Mizzi


Une ancienne structure maintenant rénovée