La plupart des formations dédiées à la création de sites web ressemble trop souvent encore aujourd’hui aux formations PAO d’hier où l’on apprenait à utiliser des logiciels sans rien connaitre des aspects «métier». A quoi bon connaitre les différentes manières de faire des colonnes dans Quark XPress ou InDesign et d’importer du texte et des images si l’on a aucune notion de mise en page et de typographie ?! C’est la même chose avec Dreameweaver ou votre éditeur HTML préféré. Les fondamentaux du graphisme et les principes de base de l’ergonomie doivent faire partie intégrante des projets de formation en Webdesign, sans quoi ils sont voués à l’échec.

Introduction

En attendant que les pouvoirs publics ne se décident à financer des formations adaptées — et puisque le Pôle-Emploi est souvent hors du coup et hors des coûts –, se sont des générations de Webdesigners qui sont souvent formés à la va comme je te pousse ! A moins qu’un veilleur bien inspiré de la Région Rhône-Alpes ne vienne lire ce billet…

«Les Standards du Web, connais pas, c’est quoi ? Moi, j’ai suivi une formation en Webdesign Dreamweaver. Mais une fois, le formateur nous a fait cliquer sur le mode Source. Ça ne compte pas ?»

Par Astrid Graeber via Wikimedia Commons

Former des grands débutants à la création de site Web From Scratch est un pari difficile. Voici quelques éléments issus de la formation Chargé d’Intervention Multimédia que j’ai mise en place il y a une dizaine d’années pour le compte de la région Rhône-Alpes.

A l’issue de cette formation, les apprenants devaient être capables de mettre au jour les besoins du client, de formaliser les besoins dans un cahier des charges, de créer l’architecture d’un site internet, de concevoir le design à l’aide de Photoshop et d’Illustrator, de réaliser l’intégration d’un PSD dans Dreamweaver et de comprendre les bases de Javascript, PHP & MySQL.

Si je devais remettre cette formation en place aujourd’hui, je remplacerais Dreamweaver par Notepad++, j’insisterais lourdement sur les CSS 2.1 et CSS3 et la sémantique associée aux balises HTML5 et j’ajouterais la réalisation d’un thème WordPress comme examen de fin d’année ;-)

«J’ai bien envie de savoir découper un PSD autrement qu’en exportant toutes les tranches depuis ImageReady, c’est possible ?»

Niabot (Licence GFDL ou CC-BY-3.0), via Wikimedia Commons

Tout au long de la formation, j’insiste sur l’accessibilité, l’ergonomie, les standards du Web, la rédaction Web et le référencement (SEO). J’aborde également les outils de mesure d’audience (Google Analytics, GetClicky, Feedburner) et l’utilisation des réseaux sociaux pour faire la promotion de son site et effectuer une veille technique pro-active.

Ça fait beaucoup de choses, mais distillés par petites touches, ces conseils trouvent leur place et permettent de recadrer la production des apprenants avec des arguments concrets du type : «oui, ton texte est très bien écrit, mais non, en verdana 9px ça passe difficilement et en plus tu risques d’augmenter ton taux de rebond» ou encore : « Ton formulaire de recherche est bien placé mais sans bordure, avec son fond gris clair sur blanc on ne le distingue pas », etc.

Après Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS , ce billet fait partie d’un ensemble d’articles que je compte consacrer à la mise en place d’une formation globale sur l’intégration HTML & CSS dont le nom de code provisoire est :

« CSS Sans Stress & HTML S’en Mêle »

C’est quoi le Web ?

Expliquer comment faire un site Web c’est d’abord dire deux mots sur le Web et l’Internet dans les grandes lignes : histoire, protocoles, notions de client-serveur, débits, navigateurs et enfin la page web elle-même. Un site web n’est qu’une collection de pages reliées entre elles par une intention plus que par une technologie. C’est cette intention qui se traduit par le design dans le sens de «dessein».

A partir de là seulement, on peut évoquer la partie technique : HTML, CSS, Javascript, formats d’images et vidéos puis aller voir sous le capot l’apparence du code source. Pour éviter que l’expression «code source» ne soit source de confusion, j’insiste sur le fait que ni HTML ni CSS ne sont des langages de programmation, contrairement à Javascript côté client ou PHP côté serveur, par exemple.

Une très brève histoire du web

Représentation symbolique du réseau Arpanet (september 1974)

Par Yngvar (Public domain), via Wikimedia Commons

En 1969, un réseau connecte les universités d’Utah et de Californie. A partir de 1972 et jusqu’en 1981, les 213 hôtes qui sont reliés donneront naissance au cœur du réseau des réseaux (l’Internet). C’est à cette époque que les RFC sont mises en place : elles permettront de proposer et de distribuer les protocoles qui régissent et font vivre Internet aujourd’hui encore. Source Wikipédia.

Alors, c’est quoi le Web ? La lecture de l’article La plateforme Web de Karl Dubost (@karlpro sur Twitter) est très instructive. Le web est un espace d’information composé d’éléments caractérisés par des identifiants, appelé URI pour Uniform Resource Identifier. En gros, il s’agit de documents accessibles via un identifiant, par exemple une URL. Ce n’est peut-être pas grand chose, mais c’est déjà beaucoup.

Les premiers documents Web

Le site web du consortium du World Wide Web en 1992 encore accessible sur le site du W3.org

Les premières pages web sont principalement des documents universitaires, ce qui n’est pas étonnant puisque le Web est né du besoin des universités de partager leurs connaissances ou de confronter leurs travaux. Les balises HTML ont été conçues pour mettre en ligne des documents sémantiques et structurés et HTML5 ne déroge pas à ce sacro-saint principe.

Mise en page en tableaux

Les tableaux ont permis aux Webmasters de proposer des pages moins linéaires. On a ainsi vu apparaitre des en-têtes, des colonnes et des pieds de page. L’augmentation progressive des débits de connexion aidant, les images ont pris peu à peu la place qu’elles occupaient déjà dans les documents imprimés.

Inutile de sortir votre palette et vos pinceaux : la mise en page en tableaux ne fera pas de vous un(e) artiste ! (Photo par Rinina25)

photo by Rinina25 sur Wikimedia

Les tableaux c’était bien, mais leurs limites ont rapidement été atteintes : la maintenance est un casse-tête, l’accessibilité est souvent compromise et le ratio «code vs. contenu» n’est pas du bon côté de la force.

Mise en page avec CSS

Dans les années 2001, on a commencé à se dire que les CSS permettraient de produire des sites web plus efficaces en terme de maintenance, notamment en ce qui concerne la partie liées à la décoration des polices de caractères pour éviter d’alourdir les pages avec trop de «font» . Mais c’est à partir de 2005 (à la louche) que leur utilisation a vraiment commencé à s’imposer dans les esprits grâce au nouvelles possibilités de positionnement des blocs.

Les feuilles de styles CSS de l’intégrateur web ne sont pas fatiguées d’être sexy, elles !

By danBLOO (Own work) Public domain, via Wikimedia Commons

Toutefois, à cette époque encore, les CSS ont la réputation d’être un peu rigides ; les sites un peu funky n’y trouvent pas toujours leur compte. On reproche aux CSS de produire des mise en pages trop «carrés» (bien avant border-radius, donc). Pour certains, les CSS permettent tout juste d’arriver à la hauteur des sites Web en tableaux les plus basiques.

La lecture régulière de sites tels que  Cybercodeur, Openweb, CSS Zen Garden ou Alsacréations ont permis de tirer le meilleur du couple HTML & CSS vers le haut pour produire des pages Web respectueuses des standards, des maquettes du client et des délais (et des performances).

C’est quoi le graphisme ?

Les notions de Graphisme et de Design sont un peu les «laissés pour compte» dans les formations en création de site web. Tout au plus a-t-on le temps d’enfoncer le clou de la lisibilité et de donner quelques conseils de base concernant les trois mamelles du gris typographique : polices de caractères, contraste et interlignage.

Ce n’est pourtant pas une mission impossible. Il suffit de rappeler que le graphisme est composé de deux parties distinctes et complémentaires : Direction artistique et Design. La première va définir l’ambiance, le style, ce que le visiteur va ressentir en voyant le site ; tandis que le second est l’application des bonnes pratiques concernant la manière dont sont agencées les composantes de chaque page. Ce n’est jamais que l’expression de l’opposition de principe entre le fond et la forme, l’intention et l’exécution.

Une fois que l’on a bien compris que la direction artistique et le Web Design sont deux choses différentes, on peut se concentrer sur les fondamentaux du graphisme : les principes du design (traduit en français sur pouipouidesign) et les éléments que ces principes doivent organiser.

Graphisme & Webdesign

Voici le minimum syndical dont tout apprenant en Webdesign devrait entendre parler, ne serait-ce que dans les grandes lignes en fonction de la durée de la formation.

Quelques principes de base, un milliard de possibilités

Équilibre (symétrie, asymétrie)

Les notions de base de notre physique quotidienne comme la masse, la gravité ou encore le vide restent actives lorsque nous regardons une composition graphique. Nous attribuons un «poids visuel» aux éléments qui composent une mise en pages. Cet équilibre peut être arrangé de manière symétrique ou asymétrique.

Dans le premier cas, la composition est répartie autour d’un axe vertical ou horizontal. Il en résulte une impression… d’équilibre, de paix, de stabilité. Dans le cas de l’asymétrie, les éléments sont organisés de manière à produire une plus grande tension visuelle par l’utilisation de plusieurs petits éléments pour équilibrer une plus grande forme, par exemple.

Rythme (régulier, mouvant, progressif)

L’intervalle entre la répétition ou l’alternance d’éléments crée le sens du mouvement et définit des motifs ou des textures. Le rythme peut être régulier lorsque les intervalles ou les éléments sont similaires en taille ou en longueur, fluide avec un mouvement plus organique ou plus naturel, ou encore progressif lorsque des étapes sont suggérées.

Proportion (distribution des formes, échelle et relation entre les éléments)

Il s’agit des dimensions ou de la distribution des formes, mais aussi de l’échelle entre un élément et un autre. Un petit objet à côté d’un plus important peut donner l’impression d’être plus éloigné.

Hiérarchique ou prédominance (quelle place pour quel élément)…

…Ou comment établir la perspective d’une composition et décider de l’importance relative des éléments entre eux selon le premier-plan, le plan médian et l’arrière-plan. Il existe la perspective à deux points de fuite et à trois points. Rarement utilisée, cette dernière est utilisée pour augmenter une perspective représentant des immeubles très hauts, des clochers d’église, etc. Via ABC Dessin.

Unité (d’après la Gestalt théorie)

Il s’agit de la composition vue comme un tout, où chaque élément, les liens et les relations qu’ils entretiennent font partie d’une démarche conceptuelle qui pousse l’esprit à établir des liens, à former des catégories ou des groupes porteurs de sens. La nature a horreur du vide, l’esprit humain aussi !

• Fermeture — L’esprit imagine les pièces manquantes dans une composition,
• Continuité — L’œil continue dans une direction donnée,
• Similarité — Relation entre la forme et la fonction,
• Proximité — Relation entre les éléments et comportement induit,
• Alignement — Mise en place des objets dans l’espace pour organiser des ensembles cohérents.

La couleur

J’ajoute un topo sur les couleurs, sans lesquelles la vie serait bien triste. Sans entrer dans le détail de la symbolique des couleurs, je retiens que l’on a toujours besoin d’une couleur dominante et de quelques couleurs secondaires.

1. Couleur dominante (bandeau ou logo) déclinée en 3 couleurs moins saturées et/ou plus claires pour découper la page en blocs fonctionnels.
2. Couleur tonique pour les titres, déclinée en deux couleurs pour les puces, les pictos ou des textes courts,
3. Troisième couleur pour les encarts, déclinée en deux couleurs pour les mises en exergue, les traits de séparation,
4. Couleur typo pour le texte principal,
5. Fond de page.

Le nuancier Pantone, que les imprimeurs appellent aussi « pantonier » et qui ne comprend pas moins de huit cents teintes, donne en fait les proportions de chacune de ces dix teintes de base

Nuancier Pantone

Un travail de qualité ne saurait se contenter de ces cinq étapes pour déterminer une palette de couleurs. Néanmoins, cette to-do list permet de franchir le cap de la feuille blanche. N’hésitez à consulter Choisir sa palette de couleurs où vous trouverez pas moins de 14 outils en ligne pour vous aider dans cette tâche. C’est d’ailleurs l’une des phases les plus passionnantes dans le processus de création ; c’est aussi celle qui sera la plus impactante en terme de première impression.

L’idéal serait d’avoir un très beau visuel sur lequel promener la pipette pour recueillir délicatement quelques gouttes de pixels… Ne rêvons pas trop, car la réalité est souvent plus proche d’un logo conçu en fonction des contraintes de l’imprimé versus les possibilités chatoyantes de l’écran.

Le gris typographique

C’est grosso modo l’impression visuelle faite par un pavé de texte que l’on regarde de loin en plissant les yeux (‘-_-’). En appliquant cette idée du gris typographique à l’ensemble des blocs (et au texte qu’ils contiennent), il est possible de travailler sur le rythme du site et la respiration de la page.

Rythmer la navigation

Nous avons plus haut la notion de rythme appliquée au niveau de la page. Ici, je m’intéresse aux relations qu’entretiennent les différentes pages d’un site en fonction des éléments qu’elles partagent : logo, bandeau et les menus de navigation qui fédèrent par nature les pages d’un site Web. L’enchainement des liens va donner du souffle à la navigation et à l’expérience utilisateur.

Il ne faut pas non plus que le site se transforme en machine à cliquer. Chaque page doit retenir le visiteur en offrant un espace qu’il peut identifier et situer immédiatement par rapport au reste du site. Si ce n’est pas le cas, il faut revoir la copie !

Plan de cours

A l’issue de cette série de billets , je proposerai un plan de cours sur cinq jours pour l’apprentissage de HTML & CSS auprès d’un public de débutants plus ou moins avancés. Cette formation devrait être idéale pour les webdesigners ou les graphistes voulant aller plus loin que le mode «Aperçu» de Dreamweaver ;-).

Exemple pour la première journée :

1. Lundi

   Matin :

   • Présentation rapide de l’objectif de la formation : exemple de page web à assembler le dernier jours #1,
   • Qu’est-ce que le web (les grands jalons historiques),
   • Qu’y trouve-t-on, (sites web, les blog, pages perso, intranet),
   • La relation client-serveur (comment ça marche, les protocoles utilisés).

   Après-midi :

   • Présentation détaillée de l’objectif de la formation : exemple de page web à assembler le dernier jours #2,
   • Présentation des briques composant l’exemple de la page web sur un support papier distribué aux apprenants,
   • Présentation du code source commenté de la page web en isolant bien chaque brique et en indiquant où elle se situe sur le support papier.

C’est tout pour le moment ;)

PS — Ah, j’oubliais : n’hésitez pas à me contacter pour que nous discutions ensemble de votre projet de formation, que vous soyez débutant, ou pas.

Articles sur le même sujet

• Une solution CSS accessible pour remplacer du texte HTML par une image
• Améliorations cosmétiques et ergonomiques sur ce blog
• Petit bilan statistique du CSS Naked Day
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Quelques notes — Programme de formation HTML & CSS

Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau h1 (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes.

Une solution satisfaisante devrait permettre de garder un document intelligible lorsque les feuilles de styles et les images sont désactivées, mais aussi lorsque l’une ou l’autre seulement est active. Pour cela, il suffit de placer le texte en question derrière l’image via la propriété z-index pour jouer avec la profondeur. De cette manière, le texte apparait lorsque les images et/ou les feuilles de styles CSS ont été désactivées par l’( agent ) utilisateur.

Marquage HTML & CSS

Voici un exemple que j’ai testé en situation réelle pour m’assurer que cette solution n’entrainait pas d’effets de bord sur le reste de la page. Voici donc la partie de l’en-tête avec un logo et une description en mode texte, et une image en dur pour avoir un bon vieil attribut alt des familles comme on les aime !

<header>
    <hgroup>
        <h1 id="logo"><a href="/" rel="home">Salut, c'est moi : logo !</a></h1>
        <h2 id="motto">Salut, c'est moi : motto !</h2>
    </hgroup>
    <div id="banner">
        <a href="/"><img src="images/logo.png" alt="CSS & Webdesign" width="940px" height="150px"></a>
    </div>
</header>

header {
    position: relative;
    height: 170px;
}
hgroup {
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 1px;
}
#banner {
    position: absolute;
    z-index: 2;
}

Les éléments hgroup et #banner sont positionnés de manière absolue pour permettre d’utilisation de la propriété z-index. Quant à hgroup, il est en z-index: 1 pour permettre aux liens qu’il contient de rester cliquables (ce qui ne serait pas le cas, s’il leur z-index était inférieur à zéro).

L’image contenue dans #banner est en z-index: 2, ce qui la place au-dessus des éléments contenus dans hgroup. Le décalage en top et left sert à positionner précisément hgroup derrière l’image, selon ses dimensions. Le left: 1px empêche les serifs de certaines polices de caractères de dépasser de l’image.

Aperçu du composé HTML & CSS en images

Après le code, voici le résultat des courses en image avec les différentes cas de figure que l’on peut rencontrer :

1. Avec CSS et images,
2. Avec  image sans CSS,
3. Sans image mais avec CSS,
4. Sans image et sans CSS.

CSS et images activées

Le logo texte et la description se retrouve derrière l’image conformément à leurs propriétés z-index respectives.

Fig. 1 : CSS et images activées. Cliquez pour agrandir l'image.

Avec images sans CSS

L’absence de CSS annule les propriétés de positionnement dans le flux et d’empilement des éléments.

Fig. 2 : image activée, CSS désactivée. Cliquez pour agrandir l'image.

Sans images avec CSS

Si les images sont désactivées, les propriétés position: absolute et z-index continuent de jouer leur partition.

Fig. 3 : CSS activée, image désactivée. Cliquez pour agrandir l'image.

Sans image et sans CSS

Le grand jeu ! Voici le header en l’absence de toute fioriture : plus d’image et plus de CSS !

Fig. 4 : image et CSS désactivées. Cliquez pour agrandir l'image.

Conclusion

Cette solution est loin d’être parfaite, notamment en raison de l’utilisation du positionnement absolu dont je ne suis pas fan ou du moins que j’évite en général pour les éléments structurels d’une page. Il existe certainement d’autres manières de placer du texte derrière une image en faisant en sorte que l’accessibilité des uns et des autres ne soit pas compromise.

Merci à Sébastien Delorme et à Sylvain Fix qui ont inspiré ce billet grâce à leurs commentaires.

A suivre :-)

Articles sur le même sujet

• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Quelques notes sur la balise h1 avec HTML5
• Quelques notes — Programme de formation HTML & CSS
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours

Je viens de lancer mon nouveau site spécialisé dans la publication de communiqués de presse pour les entreprises et les particuliers. Encore un site pour publier des communiqués de presse ? Oui, mais à la mode de Bruno les bons tuyaux, c’est-à-dire avec un plus-produit aussi simple qu’innovant : réécrire les communiqués de presse pour publier des articles originaux. Autrement dit, je mets en ligne sur Dotpress.fr des contenus non dupliqués (ce qui est plutôt rare car le CP est généralement envoyé à l’identique aux journalistes). L’objectif est d’être bien référencé par les moteurs de recherche pour donner le maximum de Link Juice aux liens qui pointent vers les contenus «corporate» que l’on me confie.

Dotpress, what else?

A côté du site Dotpress.fr, j’ai lancé @dotpress pour assurer le relais des publications sur Twitter et partager mes réflexions et mes découvertes sur ce monde à explorer… N’hésitez pas à vous abonner à ce nouveau compte Twitter ainsi qu’au flux RSS de Dotpress pour ne rien rater :-)

Certains se souviennent peut-être qu’à l’origine de l’achat du nom de domaine dopress.fr, j’avais le projet de créer un thème magazine disponible à la fois sur Dotclear et sur WordPress, genre un thème pour les rassembler tous. Depuis, de l’eau a coulé sous le tapis de souris et le projet est passé à la trappe pour renaitre aujourd’hui sous une forme totalement différente.

WordPress, what else?

Sans surprise, j’ai conservé WordPress comme CMS. J’ai laissé le thème Twenty Ten en attendant de finaliser la maquette. Je préfère avoir une idée plus précise de la diversité des contenus pour me décider sur certains éléments-clés, comme le nombre, la taille et l’emplacement des visuels ou l’importance des textes. Sans parler de la largeur des différents formats des encarts AdSense ! Par ailleurs, j’aurais ainsi le temps d’étudier de plus près de quel bois se chauffe WordPress 3 pour analyser ce qui se trouve sous le capot !

Direction artistique et design

La Direction artistique avait pour mission de coller à l’idée de travail manuel en s’inspirant de l’ambiance des ateliers d’imprimerie à l’époque de Gutenberg, où les caractères étaient posés un à un pour composer des mots, puis des phases, puis des choses à lire. L’encre n’est pas totalement sèche, quelques gouttes parsèment le plan de travail pour évoquer la notion de Work in Progress.

Pour le design, je suis resté fidèle à ma grille de 942 pixels de large, déjà utilisée sur ce blog et dont le nombre de colonnes non divisible par 3 oblige à une asymétrie rafraichissante. L’interlignage de 21 pixels représente la moitié de la largeur d’une colonne, ce qui permet — au cas où cela serait nécessaire — d’harmoniser le nombre de lignes avec la hauteur des images, en plus d’aérer le texte.

Rendez-vous sur Direction artistique et Design pour plus d’information sur la différence entre intention et exécution quand on parle de graphisme.

Aperçu de la maquette avec affichage de la grille pour déterminer la taille et l’emplacement des blocs.

Première ébauche sur Illustrator. Cliquez pour agrandir l'image.

Aperçu de la même maquette sans la grille en espérant qu’elle se fasse un peu oublier ;)

Même chose sans la grille de mise en page. Cliquez pour agrandir l'image.

Typographie

En fonction de la police de caractère retenue (probablement Georgia), le texte sera composé en 13/21 ou 14/21, soit un rapport de 1,618 d’une part ou 1,5 d’autre part, respectant dans les deux cas un ratio proche du nombre d’Or (absolu dans le premier cas et typographique pour le second). Quant à la grille elle peut encore évoluer vers une solution un peu plus modulaire à laquelle je réfléchis.

Pour les titres, j’utiliserai IM Fell DW Pica SC et IM Fell DW Pica pour les hors-textes. Ces fontes devraient se «fondre» idéalement dans le décors.

Logotype

Pour le logo, j’ai fais simple en mettant l’accent sur le terme «press» qui possède la même couleur que le paragraphe d’introduction, sur lequel il est aligné. Le terme «dot» est quant à lui de la même couleur que le titre des articles sur lesquel il est aligné pour guider le regard vers le plus important.

Pour le reste, j’ai joué sur la notion de «point presse» suggéré à trois reprises de manière plus ou moins cryptique à mesure qu’on regarde vers la droite.

En attendant…

Bref, comme d’habitude, je m’en remets à votre jugement, parfois bienveillant, souvent lapidaire, toujours intéressant, sans lequel mes blogs ne seraient pas ce qu’ils sont :-)

N’hésitez pas à proposer vos communiqués de presse sur http://dotpress.fr

Retrouvez les liens cités dans l’article

• Publier des communiqués de presse
• Nouveau compte Twitter de Dotpress
• Flux RSS de Dotpress
• Dotclear
• WordPress
• Formats des encarts AdSense
• WordPress 3
• Direction artistique et Design
• Nombre d’Or
• Google Webfonts

Articles sur le même sujet

• WordPress je thème
• Créer son site web avec WordPress de A à Z… avec le Codex
• Direction artistique et Design : deux facettes complémentaires du graphisme
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• WordPress 3.3 — 10 nouvelles fonctionnalités importantes

Après les croquis réalisés plus ou moins rapidement sur un coin de table face au client ou de retour à l’atelier, il est parfois nécessaire de passer à une phase plus industrielle afin de réaliser les maquettes « fil de fer » de la Home et des pages intérieures. Illustrator et Fireworks ont beaucoup d’atouts pour faire les Wireframes d’une page Web, mais InDesign n’est pas en reste. Il permet de mettre en place une grille dès la création d’un nouveau document. Dans la suite de cet article, nous verrons comment créer un colonage compatible avec votre framework CSS préféré et utiliser les gabarits InDesign pour les différentes déclinaisons des pages de votre site Internet.

Préparer InDesign

Ouvrez Préférences (Ctrl + K) > Unités et incréments et modifiez les unités horizontales et verticales de la règle pour passer des millimètres (mm) aux points (pt) (à la résolution de 72 ppp, un point équivaut à un pixel). Reste à déterminer la largeur du plan de travail : dans les exemples qui suivent, j’ai choisi un design d’une largeur de 942 pixels pour 16 colonnes avec une gouttière de 18 pixels, mais n’hésitez pas à utiliser les valeurs de votre framework CSS.

Créer les colonnes

Avec InDesign, quelques réglages suffisent pour mettre rapidement en place une grille magnétique.

Boite de dialogue Nouveau document InDesign.

Selon votre framework CSS, choisissez le nombre de colonnes et la largeur de la gouttières qui les séparent. Pour finir, mettez les marges à zéro.

Notez qu’il est possible de créer un document à la taille du Viewport (ex. 1024). Pour obtenir un document hors marges de 942 pixels, utilisez la formule suivante : largeur du Viewport moins celle du framework et divisez le résultat par deux pour obtenir la valeur des marges gauche et droite. Exemple : (1 024 – 942) / 2 = 41.

N’oubliez pas de cliquer sur Enregistrement prédéfini… pour enregistrer votre plan de travail.

Modifier la la ligne de base

Pour affiner la grille il est peut s’avérer utile de matérialiser la ligne de base en fonction de l’interlignage que vous avez choisi pour le corps du texte. J’ai opté pour un corps de 13 pixels avec un coefficient multiplicateur de 1,6 (pour tutoyer le nombre d’Or) ce qui donne un interlignage de 21 pixels (en arrondissant à l’entier supérieur).

Pour cela, je vais dans les préférences du logiciel Ctrl + K > Grilles et je règle le pas sur 21 pt. J’en profite également pour augmenter la valeur pour améliorer le magnétisme des repères pour faciliter le placement des blocs.

Il est toujours utile de visualiser la ligne de base de votre document.

Modifiez la grille de la ligne de base dans Préférences > Grilles

Gabarits de page avec InDesign

Si InDesign facilite la mise en place d’un système de mise en page en colonnes pour placer vos différents modules, il permet aussi de créer des gabarits réutilisables et c’est assez cool.

Profitez des modèles de pages modifiables d’InDesign !

La fenêtre Pages d'InDesign pour créer et appliquer un gabarit à une page.

A partir d’un zoning comprenant le header, le menu principal et le footer qui se répètent sur toute les pages comme autant de fichiers inclus, il est possible de créer plusieurs variantes d’une page selon les différents modèles de votre projet Web.

(In)Design Web ?

Après quelques tests rapides, je trouve qu’InDesign est une aide précieuse pour mettre au net les croquis et commencer le zoning d’un site. Pourquoi ne pas s’en servir pour faire une maquette plus fouillée en assemblant des éléments en provenance de Photoshop ou d’Illustrator avant d’intégrer le tout dans le navigateur ?

Bref, InDesign semble l’outil idéal pour se rappeler que dans Webdesign il y a aussi «design» avec tout ce que cela comporte de travail sur les blancs tournants, les volumes et la typographie.

Liens complémentaires

• Résolution, pixels, points, dpi : un casse-tête insoluble ?
• Création de gabarits dans InDesign
• Apprendre InDesign : psill.net et milic.com

Articles sur le même sujet

• Calculer une grille de mise en page « typo » avec le nombre d’Or
• Framework CSS — Sémantique, maquette dynamique et autres notes
• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• #WDFR — Imprimez votre grille pour dessiner vos croquis

Les logiciels de création graphique proposent un menu Fichier avec une entrée Nouveau pour créer un nouveau document en réglant des paramètres comme la taille, la couleur de fond, le nombre de couleur, la résolution, etc. J’ai déjà abordé la question des paramètres par défaut pour le Webdesign dans l’article Quelques notes sur les grilles de mise en page et je me demande aujourd’hui dans quelle mesure les frameworks CSS peuvent être considérés comme l’expression des réglages de base pour commencer la création d’un site Web ?

On a toujours besoin d’un standard pour travailler

Quand on y réfléchit, on trouve un format de base dans tous les logiciels et personne ne se pose la question de savoir si le format par défaut proposé par Word ou OpenOffice représente un frein à notre créativité littéraire.

Les formats des feuilles de papier pour les documents destinés à l’impression sont très variés, mais dans la majorité des cas vous choisissez le format « A4 » car c’est celui qui est pris en charge par votre imprimante et tout un éco-système qui va des chemises cartonnées aux cartables en passant par les boites de rangement. D’ailleurs, le format international issu de la norme ISO 216 qui nous a donné le format A4 est utilisé dans tous les pays du monde, sauf aux Etats-Unis et au Canada (source : Wikipédia).

Une seule largeur pour les gouverner tous ?

Vous pensez peut-être que sur le Web la diversité des configurations matérielles interdit justement l’imposition d’un format unique ? En théorie, c’est le cas, mais la pratique et l’observation nous apprennent que 99% des sites Web sont conçus pour entrer dans une largeur de 1024 pixels, ce qui nous donnes des largeurs moyennes utiles proches des 960 pixels que l’on trouve dans de nombreux frameworks CSS.

Choisissez votre framework CSS !

Dans une certaine mesure, les formats proposés par les frameworks CSS remplissent le rôle d’une configuration par défaut pour produire des sites Web comme on produit du texte avec OpenOffice… et ce n’est pas mal : les thèses estudiantines méritent autant que les ouvrages d’art le droit d’exister ! Il en va de même pour les sites web : certains sont «utilitaires» et d’autres à vocation artistique. Pour vous guider dans le labyrinthe des solutions disponibles, voici plus de 30 frameworks CSS commentés qui vous permettront de choisir les réglages par défaut les plus proches de vos besoins. Si vous n’arrivez pas à trouver chaussure à votre pied, l’application Air Boks vous permettra de déterminer le pas de votre grille et bien d’autres choses encore.

Articles sur le même sujet

• Quelques liens sur les Media Queries en CSS3
• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »
• Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
• #WDFR : les Framework CSS en ont pris «plein la grille» pendant le WDFriday
• Frameworks CSS — Blueprint vs 960 Grid System

Le dernier thème du WDFriday (#wdfr sur Twitter) était consacré aux croquis, maquettes et autres fils de fer (Wireframe) qui précèdent souvent le travail sur un logiciel de création comme Illustrator ou Photoshop. J’ai toujours un petit calepin à carreaux de 5 mm de côtés pour prendre des notes graphiques. Comme j’utilise une grille dans Illustrator bien au chaud dans un calque « grille » verrouillé, je me suis dit qu’il serait intéressant de l’imprimer en plusieurs exemplaires pour m’en servir de support. Pour les croquis, je me contente d’imprimer cette grille à 50% de sa taille réelle pour ne pas gâcher inutilement l’encre et le papier (petit geste écolo). Je réserve l’impression en taille réelle pour les maquettes grandeur nature (Mockup) sur lesquelles je peux utiliser des post-it pour placer et déplacer mes éléments à volonté.

942.css : ma grille de mise en page

J’utilise souvent la grille de mise en page créée à l’occasion du redesign de ce blog : 16 colonnes de 42 pixels, gouttières de 18 pixels, largeur totale de 942 pixels. L’interlignage de 21 pixels représente 1,6 fois la taille du caractère de base (13 pixels) arrondi à l’unité supérieure. Le nombre d’Or est basé sur des rapports de 1,618 et bien que l’on considère souvent que 1,5 est le nombre d’Or typographique, j’ai gardé le ratio 1,6 car l’interlignage de 21 pixels représente exactement la moitié de mon module de base de 42px de côté. Hasard, je ne pense pas ^__^

Pour vous inspirer pendant les longues soirées d’hiver pourquoi ne pas lire 500 grilles et feuilles de style pour l’imprimé et le Web de Graham Davis ou imprimer l’un des 10 modèles pour Wireframe ?

Adapter votre grille pour l’impression

Après la phase du croquis, il peut être utile de marquer les regroupements de colonnes pour faciliter la création des maquettes (page d’accueil, pages «intérieures», etc.). On peut tout aussi bien imprimer des blocs de couleurs différentes à la tailles des colonnes pour les placer sur la grille. En ce qui concerne les couleurs, lors de l’impression, j’utilise des couleurs plus légères pour dessiner par dessus.

Avec Illustrator, la création d’un gabarit de mise en page pour faire des croquis ou des maquettes est très simple : Objet >Transformation > Déplacement (ou Maj + Ctrl + M).

Cliquez sur l'image pour voir la grille en taille réelle (1024x1024)

Le « fold » ou la partie émergée de l’iceberg

En plus des colonnes et de l’interlignage, j’ai ajouté quelques éléments à cette grille de base : l’indication de la hauteur du viewport vu de mon Netbook de 10.2 pouces et de mon écran 19 pouces. Pour les visualiser, j’ai placé des repères de chaque côté de la grille, à 420 pixels et à 714 pixels.

Cette matérialisation du fold est utile pour voir les éléments qui seront visibles sans nécessiter de scroll, même s’il faut garder à l’esprit qu’il y a de la vie en dessous de 600px ! La zone des 300px à partir du haut de la page est la plus regardée. Les éléments les plus importants devraient se situer au-dessus du fold mais sans sacrifier le bas de la page qui doit rester attrayant. Il est utile de placer des éléments à cheval sur deux zones pour inciter l’utilisateur à descendre jusqu’au pied de page.

En bref

J’espère que vous n’aurez pas perdu votre temps à la lecture de cette astuce simple mais terriblement efficace qui évite de passer trop de temps à faire des ajustements techniques dans les logiciels de création graphique. J’ai par exemple des difficultés à ne pas aligner parfaitement mes éléments sur Illustrator, alors qu’un placement approximatif serait suffisant dans la phase de recherche.

N’hésitez pas à partager les trucs que vous utilisez au quotidien pour vous faciliter la vie de webdesigner !

Articles sur le même sujet

• Et si Photoshop permettait de tester des maquettes fluides ?
• Calculer une grille de mise en page « typo » avec le nombre d’Or
• Framework CSS — Sémantique, maquette dynamique et autres notes
• display: table et display: table-cell pour faire une mise en page web ?
• Lancement de Dotpress.fr «point presse» de vos communiqués d’entreprise

Les développeurs n’aiment pas les frameworks CSS et les graphistes n’aiment pas l’idée de travailler avec une grille de mise en page. Mais ça ne m’empêche pas de leur trouver un intérêt (aux FW, aux dévs et aux créas). Je suis certainement une espèce mutante, le chainon manquant entre les matheux (le code n’est poétique que dans WordPress ^^) et les graphistes ! Pour autant, je ne pense pas que les frameworks CSS doivent être utilisés partout ou que le design dans le navigateur remplacera votre graphiste ou votre logiciel de création préféré. Il s’agit d’une méthode de travail qui s’ajoute aux précédentes ; elle ne prétend pas s’y substituer. L’article Framework CSS — Sémantique, maquette dynamique et autres notes vous permettra de défricher le terrain sur leur utilisation et leurs avantages.

Framework CSS ?

Les frameworks CSS sont généralement composés d’un ou plusieurs fichiers prenant en charge les différents aspects de la réalisation d’une page (grille, typographie, formulaires, tableaux, etc.) dans le but de faciliter le placement des blocs sur la page et d’harmoniser les styles typographiques selon une grille horizontale.

The Simpler Grid — 12 colonnes «A la une» de 60px avec une gouttière de 20px pour une largeur totale de 940px. Choisissez votre Framework CSS parmi les 30 solutions disponibles.

Les Frameworks CSS proposent un environnement de travail réutilisable et compatible avec la majorité des navigateurs.

Mockup ? (non, ça ne se fume pas)

Un Mockup est une maquette grandeur nature qui permet d’avoir une idée sur la manière dont les fonctionnalités prévues par le cahier des charges (cf. le périmètre des fonctionnalités) vont se concrêtiser. Selon les projets, il peut s’agir d’un croquis réalisé à main levé pendant le rendez-vous avec le client ou d’une version plus élaborée une fois que vous êtes de retour à l’atelier.

Voici un échantillon tiré des 40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups qui devraient vous plaire et vous inspirer.

D'autres croquis sur http://www.flickr.com/photos/43641156@N02

Un logiciel comme Balsamiq Mockups propose plusieurs dizaines de contrôles et plus d’une centaine d’icônes pour représenter les éléments que l’on trouve habituellement sur une page web (menus déroulants, onglets de navigation, blocs de texte, listes, formulaires, login, etc.).  Je les trouve plutôt ennuyeux à utiliser et je préfère poser mes idées dans un bloc-note. Toutefois, ils peuvent être utile si les maquettes doivent circuler dans le flux de production et être modifiées par différents intervenants.

Pour faire un zoning ou une maquette plus précise, j’utilise généralement Illustrator, mais il semble que Fireworks ait plus d’un tour dans son sac. Rapid prototyping in Fireworks CS3 est un tutoriel en français qui explique comment utiliser les fonctionnalités de prototypage rapide apparues dans la version CS3 de la Suite Adobe. Lire également les article de SuperFiction sur les Wireframes.

Framework CSS et prototypage rapide

Partant de l’idée que l’intérêt premier des frameworks est de proposer une méthode pour placer rapidement des blocs sur la page, pourquoi ne pas les utiliser pour le zoning et la maquette fil de fer (Wireframe) ? Les différents objets censés représenter les éléments d’une page web seraient visibles sous leur forme native : les menus déroulants pourraient se dérouler et les diaporamas, diaporamer ! En attendant que les contenus définitifs vous parviennent, il existe du faux texte prêt à l’emploi à base de Lorem Ipsum enveloppé dans différents marquages HTML. Lire les billets traitant des Frameworks CSS sur css4design.

Conclusion

En permettant de modifier rapidement et simplement la largeur et l’emplacement des différents blocs, les frameworks CSS et le design dans le navigateur (au moins en ce qui concerne la maquette) procurent des avantages à l’équipe de développement, mais aussi au client qui pourra manipuler la maquette à l’échelle 1:1 ET en direct-live : il n’est plus obligé de regarder son futur site avec les yeux, mais il peut le toucher avec la souris ! En s’appropriant ainsi sa maquette, il devrait être plus enclin à fournir les contenus pour voir ce qu’ils donneront in situ.

Liens complémentaires

• Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ?
• Conception dans le navigateur avec HTML5 & CSS3 (amélioration progressive)
• A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio
• Free Printable Sketching, Wireframing and Note-Taking PDF Templates
• http://wireframes.linowski.ca/
• Create diagrams online Real Time Collaboration
• 20 Free Web UI Element Kits and Stencils
• Zoning, wireframe, maquettage, prototype : les meilleures pratiques
• Mockups to go
• Foxguide

Articles sur le même sujet

• Webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board)
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• Framework CSS — Sémantique, maquette dynamique et autres notes
• Frameworks CSS + Reset CSS : design from scratch

Depuis quelques temps les propositions commerciales autour des blogs d’entreprise ou des sites web «vitrine» se font plus agressives. On peut trouver des annonces pour des blog pro autour de 150€, 100€, voire 60€ ! Peut-on descendre plus bas ? Et d’ailleurs, est-il possible qu’un blog ayant coûté le prix d’un tee-shirt puisse rapporter de l’argent ? Si oui, foncez ! Mais juste pour info, sachez qu’un blog corporate fait dans les règles de l’art coûte au moins dix fois plus… Ce billet a été écrit il y a longtemps et j’ai décidé de le ressortir pour soutenir @Daibai dans sa lutte contre les sites web à 1€. Attention, si ce billet n’est pas à prendre uniquement au premier degré, l’offre proposée reste valable.

Ca ne coûte pas plus cher, de bien bloguer !

Mais à la réflexion, pourquoi payer plus cher si l’on peut obtenir un retour sur investissement à partir d’une centaine d’euros ? Partant de cette idée — et puisqu’au final la mise en place d’un blog brut de décoffrage ne prend pas plus de 5 minutes d’après le script d’installation du CMS WordPress — je me suis dit qu’il devait être possible de proposer l’installation d’un blog pro pour 9,90€ttc⁽¹⁾ :

Où est l’arnaque ?

(1) Pas d’arnaque : installation par mes soins d’un blog propulsé par WordPress avec un thème graphique en accord avec votre secteur d’activité en contrepartie de l’installation de publicités discrètes, d’outils de mesure d’audience (Google Analytics) et de la somme de 9,90€ versée sur mon compte PayPal à l’adresse infographiste@gmail.com \O/ Vous pouvez me contacter pour en savoir plus.

Envie d’aller plus loin ?

Si vous désirez aller plus loin avec votre blog professionnel, je suis disponible pour vous accompagner ponctuellement ou durablement sur tous les aspects de la vie d’un blog d’entreprise ou d’un site internet :

• Conception et rédaction d’une charte éditoriale pour les blogs multi-rédacteurs,
• Rédaction de contenu : billet, article, dossier, revue de presse,
• Réécriture des textes rédigés initialement par votre équipe pour coller à la charte éditoriale,
• Modification du thème graphique installé à l’origine
• Création d’une charte graphique personnalisée,
• Mise en place de plugins adaptés à vos besoins,
• Accompagnement pour les mises-à-jour,
• Aide à la communication de crise,
• Gestion de votre réputation sur le web (e-réputation) et les réseaux sociaux (oui, ça veut dire que vous saurez comment utiliser Twitter),
• Achat de nom de domaine,
• Montée en charge,
• Référencement,
• Et plus à venir…

Comment ça marche ?

Il suffit de me faire parvenir votre projet de blog d’entreprise via la page contact ou directement à l’adresse infographiste@gmail.com. Facile, non ?

Plus d’information sur les tarifs WordPress

• 8 exemples de tarifs pour l’intégration de votre site WordPress d’après la méthode des Personas
• Quel tarif pour un thème WordPress ?

Articles sur le même sujet

• 8 exemples de tarifs pour l’intégration de votre site WordPress d’après la méthode des Personas
• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Quel tarif pour un thème WordPress ?
• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• Guide stylistique — Exemple de charte graphique et éditoriale

Ces quelques notes sont le fruit d’une réflexion rapide qui fait suite au commentaire de Papier-pixel sur l’article Conception dans le navigateur avec HTML5 & CSS3. Il regrette grosso modo qu’il y a des thèmes récurrents dans mes billets qui tendent à laisser penser que le webdesign et la mise en place d’une vraie charte graphique ne sont pas indispensables. Le fait de coder directement dans le navigateur ou d’oublier photoshop pour finir par m’interroger sur la pertinence du design qui serait « inutile » dans 80% des cas nous entrainerait dans un web uniforme, sans véritable réflexion visuelle en amont.

Prologue

Il y a effectivement quelques articles dans ce blog qui explorent d’autres voies que celle de Photoshop, mais j’en ai écris encore plus sur le design et le graphisme (ne vous arrêtez pas aux derniers articles parus qui ne sont pas forcément représentatifs de mon point de vue). Petite précision avant d’aller plus loin : l’article où je m’interroge sur le graphisme qui serait inutile dans 80% des cas est une ode au design, ne vous méprenez pas.

Un seul design pour les lier tous ?

Le design ou la conception dans le navigation ne signifie pas absence de design ou de conception : c’est même tout le contraire !  Sur la question de l’uniformisation du design des sites web, il est important de prendre en compte plusieurs choses :

• D’une part — et c’est le plus important — en quoi le fait que tous les sites se ressemblent est si grave ? Au pire, le visiteur a une impression de «déjà vu», au mieux, il ne perd pas de temps à se demander comment fonctionne le site.
• D’autre part, les sites soi-disant graphiques se ressemblent tous d’une certaine façon (de mon point de vue, c’est valable pour l’immense majorité d’entre eux). La quantité de pixels utilisés n’enlève rien à une autre forme d’uniformisation. Sans compter que la plupart des fantaisies graphiques rendent souvent le site difficilement utilisable : il faut souvent entrer dans l’univers du graphiste avant d’entrer dans le contenu.
• Par ailleurs, je pense que l’absence de design est parfois préférable à un mauvais design pour peu que le concepteur a fait attention à l’ergonomie et la navigation. Si en plus il a choisi une police de caractère lisible de 16px avec un interlignage de 24px contrastant suffisamment avec le background, c’est parfait ;)

Cela dit, il existe de nombreux cas ou l’on a besoin de faire entrer le visiteur dans un univers visuel : lorsque l’expérience immersive produit du sens en tant que tel en fonction de la marque ou du produit. Mais il ne faut pas se voiler la face : ces cas sont assez rares et quand on les rencontre, il sont malheureusement souvent mal fichus.

Le graphisme n’est pas une surcouche ?

Le webdesign est entré dans une phase de maturité où — n’en déplaise à beaucoup — le graphisme est une couche appliquée sur un marquage HTML, lui-même fruit d’une réflexion sur les différents types de contenus qu’il enveloppe. A cet égard, je ne résiste pas au plaisir de placer l’article Métiers du web — Je suis « enveloppeur web » moi monsieur !

Bientôt (dès demain, en réalité) de nombreux effets graphiques seront réalisés avec les langages du web, ce qui ne veut pas dire que Photoshop sera obsolète, bien au contraire. L’uniformisation des designs de sites réalisés avec HTML5 et CSS3 et «designés» directement dans le navigateur seront un type de prestation parmi d’autres.

Il y aura toujours besoin de créatifs originaux pour les projets où une «patte graphique» sera nécessaire. Mais au moins les créatifs devront-ils faire preuve d’un peu plus d’audace que mettre des dégradés, des coins arrondis ou des ombres portées dans Photoshop ou Illustrator…

Pour ne pas conclure

Lorsque je regarde de près les meilleurs «designs de l’année», je vois bien qu’il y a du travail de qualité, mais en creusant un peu, j’ai le sentiment qu’il s’agit souvent du portfolio d’un webdesigner réputé ou d’un site web réalisé par une agence pour un client qui a dépensé beaucoup d’argent. Bref, des projets que la startup ou la PME française moyenne n’a pas les moyens de s’offrir ou qu’elle ne veut pas payer.

Épilogue

Zut, à la relecture je me rends compte que je donne encore l’impression de sacrifier le graphisme sur l’autel de la sobriété et du mauvais goût. Il y a tellement de cas de figure différents qu’il est difficile de faire un seul billet sur cette question en restant concentré… Mais je reviendrai prochainement vers vous avec un billet sur la notion du Good Enough dans l’industrie du webdesign.

Articles sur le même sujet

• Quelques notes sur les éléments graphiques du webdesign
• Un site Web n’a pas forcément besoin de graphismes
• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Direction artistique et Design : deux facettes complémentaires du graphisme
• Le petit journal du web — Non, Twitter n’a pas tué les Backlinks… La preuve !

CodeIgniter est un framework PHP robuste comme Zend Framework ou Symfony mais bien plus léger. Il vous aidera à construire votre site web avec le modèle MVC (Modèle, Vue et Contrôleur) en améliorant le temps de développement de vos projets grâce à un ensemble complet de bibliothèques simple d’utilisation.

Tutoriel CodeIgniter

Même si le guide de l’utilisateur disponible sur le site de l’éditeur est très bien fait, voici un tutoriel en plusieurs parties pour développer un CMS (Content Management System) rédigé par Ange Chierchia (@nighcrawl) :

1. Développer un moteur de site Web avec CodeIgniter,
2. Système de login sécurisé,
3. La gestion des pages.

Code Igniter en français

codeigniter.fr est le miroir francophone de codeigniter.com. Vous y trouverez notamment le guide de l’utilisateur avec la plupart des rubriques traduites en français ainsi que des tutoriels. Si cela ne suffit pas, le forum est à votre disposition.

Question : «quel site francophone développé avec CodeIgniter fait bonheur des intégrateurs web ?»

Réponse : Alsacréations — Et oui, depuis sa version 3, le site de la communauté d’apprentissage pour les standards du web est développé avec CodeIgniter !

Articles sur le même sujet

• PHPCrossRef — Bibliothèques de référence pour projets PHP Open source
• Supprimer l’attribut title dans les catégories et les pages WordPress avec jQuery ou PHP
• Le petit journal du web — WordPress, développement web, etc.
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• 23 listes pour Webdesigners