Aller au menu - Aller au contenu

Icône Introduction aux designs distants

Par Avatar Alex-D
Mise à jour : 14/08/2010
Difficulté : Intermédiaire Intermédiaire Durée d'étude : 1 heure, 30 minutes Creative Commons BY-NC-SA
48 visites depuis 7 jours, classé 680/786
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.
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Propos et prérequis

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 :
  • imagination et croquis : généralement sur papier ;
  • élaboration de l'interface graphique : via un logiciel de graphisme tels Gimp, Photoshop, etc. ;
  • intégration (X)HTML / CSS : vous pouvez retrouver le tutoriel de M@teo21 à propos de ces langages.

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 :
  • imagination et croquis ;
  • élaboration de l'interface graphique ;
  • intégration CSS.


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.
Retour en haut

La clé de la création

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

N'oublions pas qu'Internet Explorer est encore utilisé sous la version 6, le standard CSS 3 n'est donc pas supporté.
Soit vous abandonnez ce navigateur (déconseillé), soit vous trouvez des solutions alternatives (utilisations d'images ou de propriétés Microsoft).

Heureusement, en CSS, vous pouvez utiliser deux choses qui vous seront sans doute très utiles, à savoir :
  • ajouter du texte (non supporté sur les appareils mobiles et IE) ;
  • déplacer du contenu via des positionnements précis (position absolue et relative).

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.
Retour en haut

Structure XHTML de base

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 :

Code : HTML - Structure contractée du Site du Zéro
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<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.
Retour en haut

Pack design, notre casse-croûte

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.
  • ~/css :
    • /design.css : le code CSS général du site ;
    • /ie_old.css : corrections CSS pour les vieilles versions d'IE (antérieures à la version 8) ;
    • /impression.css : interface d'impression (imprimer les tutoriels, etc.) ;
    • /upload.css : interface de l'hébergement interne au site (zUpload).
  • ~/images :
    • /amis/ : petites icônes (connecté, non connecté) ;
    • /boutique/ : apparence de la boutique interne ;
    • /forum/ : interface des forums et messages privés (icônes) ;
    • /groupes/ : icône de groupe (disponible pour les membres de l'équipe) ;
    • /homepage/ : images et icônes de la page d'accueil ;
    • /intersites/ : images des petits onglets en haut à droite ;
    • /jquery/ : icônes pour jQuery (ne pas modifier, sauf si vous savez ce que vous faites) ;
    • /pays/ : petites images pour les pays (généralement utilisées dans les news) ;
    • /sondage/ : apparence des barres présentes sur l'accueil du site ;
    • /sorttable/ : icônes pour jQuery UI (ne pas modifier, sauf si vous savez ce que vous faites) ;
    • /speedbarre/ : images pour la speedbarre (barre de liens) ;
    • /tutos/ : images utilisées pour les tutoriels ;
    • /upload/ : interface de zUpload ;
    • /zcode/ : apparence de la zForm ainsi que du code en général (balises <attention></attention>, etc.).

Note : si vous regardez le code source, vous pouvez voir ceci en tant que lien vers le fichier CSS :
<link href="Templates/css/2/design.min.css?1279793640" <!-- [...] --> />

En effet, les fichiers .min.css sont en réalité des compressions du fichier CSS de base (il se charge plus vite), un peu à l'image de jQuery avec le .min.js et le complet.

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.

Si vous ne savez pas ce que sont les dépôts Git, notre bien-aimé fondateur nous a rédigé un cours tout frais qui explique les principes et commandes de Git. N'ayez pas peur, ce sont juste des commandes qui font flipper. :D

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 :

Code : Console
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. 



Code : Console
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.

                

                
Retour en haut

            
                

                    

                        Le code CSS, ça fait mal
                        
                    


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



Code : CSS
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
/* --------------------------------- */
/* ------------- 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 :


    	

  • rechercher dans la structure HTML les informations de la logbox ;
    • 	

  • reprendre le petit schéma ci-dessus.
    • 



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

                

                
Retour en haut

            
                

                    

                        Une ancienne structure maintenant rénovée
                        
                    


                    
Sous-partie rédigée par Cyril, (re)créateur de la structure Bluzaz pour New-Wave.


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. 



Code : Console
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$



Si vous repérez des erreurs dans la structure, n'hésitez pas à les rapporter ici.


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.

                

                
Retour en haut

            
                

                    

                        L'hébergement pour vos designs
                        
                    


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


    	

  • zDesigns.fr, un site partenaire du Site du Zéro : nous n'en parlons pas ici car leur système sera bientôt mis à jour, nous développerons un peu plus à ce moment-là.
    • 

  • Un hébergeur comme Alwaysdata ou 000webhost (le gestionnaire FTP n'est pas fameux mais il est quand même à 2 GB) qui restent entièrement gratuits. Nous n'allons pas vous faire une liste des différents hébergeurs, ce serait trop long.
    • 



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.

                

                
Retour en haut

            


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



    

        
            
            
        
    


    

        
    







    
Retour en haut



    
Partager

    


    



Retour en haut



    
Lire aussi


    

        
                

                      
                          

                            
                              Icône
                            
                          

                      		
                      
                          TP : création d'un site pas à pas
                      
                

            
                

                      
                          

                            
                              Icône
                            
                          

                      		
                      
                          Initiation à la création d'un design extensible
                      
                

            
                

                      
                          

                            
                              Icône
                            
                          

                      		
                      
                          Des techniques modernes pour l'agencement en colonnes
                      
                

            
                

                      
                          

                            
                              Icône
                            
                          

                      		
                      
                          Aller plus loin
                      
                

            
    




    

    
Retour en haut

    
            

                8 commentaires pour "Introduction aux designs distants"
                

                    Note moyenne :
                        2.94
                    / 4
                    (31 votes)
                    
                

            

        
        

            
              

                Pseudo
                Commentaire
              

            
            
              
                

                  
                    
                      Hors ligne 
                    
                      robin850
                    
                  
                  
                    #
                    
                         Posté le 15/08/2010 à 11:16:23
                    
                    
                


                
                    

                
                
                    

Avatar
	
	

		 
	




	
	close







     Ville : Avesnes-sur-helpe

	Pays : France métropolitaine






                		
                
                    
                    Oui, je suis un champ SQL ... :-° . (désolé pour le HS Cyril)



Je suis entrain d'en faire un de design, ce n'est pas moi qui est fait la charte mais le tuto m'as aidé.
                    
                        
Pardonnez mes fautes d'orthographe.


Image utilisateur
 



Utilisation de Twig, un moteur de Templates

                        
 

                    
                		
                

              
                

                  
                    
                      Hors ligne 
                    
                      anonyme
                    
                  
                  
                    #
                    
                         Posté le 15/08/2010 à 11:59:07
                    
                    
                


                
                    

                
                
                    




    





                		
                
                    
                    C'est le but du tutoriel :)
                    
                
                

              
                

                  
                    
                      Hors ligne 
                    
                      itsanta
                    
                  
                  
                    #
                    
                         Posté le 18/08/2010 à 08:06:17
                    
                    
                


                
                    

                
                
                    

Avatar



    





                		
                
                    
                    bonne route et merci pour le tuto
                    
                
                

              
                

                  
                    
                      Hors ligne 
                    
                      anonyme
                    
                  
                  
                    #
                    
                         Posté le 05/06/2011 à 12:15:24
                    
                    
                


                
                    

                
                
                    




    





                		
                
                    
                    J'adore ton design Alex-D  :)
                    
                
                

              
                

                  
                    
                      Hors ligne 
                    
                      maximleboss1
                    
                  
                  
                    #
                    
                         Posté le 01/08/2011 à 14:41:30
                    
                    
                


                
                    

                
                
                    

Vive l'informatique !
Avatar



    





                		
                
                    
                    Comment on fais quand un design ne marche pas et on peu plus se connecter a son compte ?

On demande a qui de supprimer le design de mon compte ?



signer : Maximeleboss
                    
                        
Disantia le jeu par navigateur, Voir le projet

                        
 

                    
                		
                

              
            
        

        
            
Voir tous les commentaires
        


    

    

Ce tutoriel a été corrigé par les zCorrecteurs.