Le fichier color.css

 
/*    --------------------------------------------------------------------
    [color.css]
 
    Table of Contents
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    1. Default Style
    2. Background
 
 
    My Colors
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    .black { color: #1b1b1b; }
    .SoftBlack { color: #282828; }
 
    .white { color: #fefefe; }
 
    .grey { color: #d4d4d4; }
    .softGrey { color: #f2f2f2; }
    .darkGrey { color: #545454;}
 
    .red { color: #ff0000; }
    .darkRed { color: #b20202; }
 
    .pink { color: #ff017d; }
    .darkPink { color: #87305a; }
 
    .purple { color: #7a00c8; }
 
    .blue { color: #053ba8; }
    .flashBlue { color: #44d1ff; }
    .darkBlue { color: #047ca3; }
 
    .green { color: #029b02; }
    .flashGreen { color: #38d03c; }
    .darkGreen { color: #007857; }
 
    .yellow { color: #ffcc00; }
 
    .orange { color: #ff9600; }
    .softOrange { color: #ffae00; }
 
    .brown { color: #8d3800; }
    .softBrown { color: #ca7700; }
    .darkBrown { color: #8d0000; }
 
--------------------------------------------------------------------    */
 
 
/*    --------------------------------------------------------------------   
    1. Default Style : because we need one :)
--------------------------------------------------------------------    */
 
body { background-color: #fefefe; color: #1b1b1b; }
 
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
 
/*    --------------------------------------------------------------------   
    2. Background
--------------------------------------------------------------------    */
 
.bgBlack { background-color: #1b1b1b; color: #fefefe; }
.bgWhite { background-color: #fefefe; color: #1b1b1b; }

Quoi c’est tout ?! Mais vous allez crier à l’arnaque .

Notre table des matières

Petite nouveauté dans la table des matières, nous allons rajouter des informations concernant le design de notre site. Ceux qui ont connus les précédentes versions du pockyworld savent que si les images et moi ne font pas forcément bon ménage, ce n’est pas le cas des couleurs. J’adore les utiliser et en abuser. Étant donné que ma maquette est faite avant le framework, j’ai donc en poche la liste complète de ces couleurs et il me faut bien les noter quelques parts afin d’avoir un référentiel concret et éviter tout problème.

Ce référentiel trouve donc sa place dans le fichier color.css via les commentaires.

1. Default Style : because we need one

Comme à mon habitude, des styles par défaut. Un background blanc (mais pas tout à fait) et une police noire (mais pas tout à fait) feront l’affaire. Pourquoi pas tout à fait blanc ou tout à fait noire ? Simplement pour répondre au problème de contraste trop élevé qui abiment les yeux. N’avez vous jamais eu des sortes de « visions » après avoir consulté un site au fond noir ? Vous remarquerez d’ailleurs que certains ordinateurs (comme les macbook pro héhé) ajustent le niveau de luminosité de l’écran suivant la couleur dominante à l’instant T et la lumière environnante, le tout afin de préserver vos yeux.

Viennent ensuite les liens. Les liens peuvent être décomposés en 4 parties a:link, a:visited,a:hover et a:active. Pour vous souvenir de cette règle, pensez LoVe HAte (amour haine).

2. Background

Ma maquette initiale utilise deux couleurs de background, soit blanc, soit noir. Je vais donc les spécifier et au passage m’occuper de la couleur du texte. Tant qu’à faire, autant aller à l’essentiel.

La totale

Un petit fichier d’exemple pour voir ce que cela peut donner.

Maintenant, tous à vos neurones

Alors maintenant question, comment faire pour gérer mes couleurs de manière correcte sans me prendre la tête ? Vous avez pu voir que j’ai à gérer un nombre de couleurs relativement important puisque chacune des futures catégories du blog est associée à une couleur.

Coté XHTML, nous pouvons caractériser un article par les critères suivants :

• Un container général : par exemple le body (qui correspondra au div exemple2 dans l’exemple… 2)
• Un div englobant l’article que nous appellerons entry
• Une balise titre type h2 ou h3
• Une date : entry-date
• Une catégorie : entry-category
• Un petit truc marrant qui identifie ma catégorie dans un span
• Du contenu : entry-content
• Des images, des liens,…
• Un formulaire de commentaire
• Les commentaires

Du coté de CSS maintenant, nous avons donc deux informations :

• Les classes bgBlack ou bgWhite pour le background
• Une classe correspondant à une catégorie et donc une couleur : cat-item-1

Alors comment faire pour avoir mon background de couleur blanche, le formulaire de commentaire correctement intégré et tout mes liens, images, le petit truc marrant identifiant la catégorie et mon chapeau d’articles en rose ? Le tout sans me prendre la tête.

Place donc à la structure XHTML reprenant l’ensemble des éléments et nos classes. Attention, tout le CSS apparaissant dans style= »…. » ne sont la que parce que le framework n’est pas terminé . J’ai aussi du reprendre un peu le code pour que l’affichage reste correcte sur le blog, l’exemple est plus complet.

<div class="cat-item-1 bgWhite" id="exemple2">
 
	<div class="entry">
		<div class="entry-meta">
			<p style="float: left; width: 460px; margin-right: 10px;" class="cat-item-1">
			<span class="meta-separator">\o/</span> Catégorie 1</p>
			<p style="float: left; width: 460px; margin-left: 10px; text-align: right" class="entry-date">
			22 Octobre 2008</p>
		</div>
 
		<h1 style="border-top: 1px solid; clear: both;">Mon article</h1>
		<div class="entry-content" style="clear: both">
			<p class="alignCenter"><img src="http://blog.pockyworld.com/wp-content/uploads/vespa1.jpg" width="900px" /></p>
			<div class="alignJustify">
				<p class="uppercase verdana chapeau">Le chapeau</p>
				<p>Un petit texte</p>
			</div>
		</div>
	</div>
 
	<div class="form" style="clear:both;">
	<form action="#" method="post" id="commentform">
 
		<p><input type="text" name="author" id="author" value="" size="22" />
		<label for="author"><small>Pseudo</small></label></p>
 
		<p><input type="text" name="email" id="email" value="" size="22" />
		<label for="email"><small>Mail</small></label></p>
 
		<p><input type="text" name="url" id="url" value="" size="22"  />
		<label for="url"><small>Blog/site</small></label></p>
 
		<p><textarea name="comment" id="comment" cols="100%" rows="10"></textarea></p>
 
		<p><input name="submit" type="submit" id="submit" value="Envoyer" /> 
		<input type="hidden" name="comment" value="#" />
		</p>
	</form>
	</div>
</div>

Comme vous pourrez le voir, j’ai décidé de remonter mes deux classes bgWhite et cat-item-1 au plus haut niveau. Je n’ai donc plus qu’à gérer ma cascade par rapport à ces éléments en CSS.

.bgWhite { background-color: #fefefe; color: #1b1b1b; }
.bgWhite form input, .bgWhite form textarea { border:1px solid #d4d4d4; background-color:#f2f2f2; }
 
.cat-item-1 span, .cat-item-1 a:link, .cat-item-1 a:visited,
.cat-item a:hover, .cat-item a:active, .cat-item-1 .chapeau { color: #ff017d; }
.cat-item-1 img { border: 3px solid #ff017d; }

Je m’occupe d’abord de mon background et du formulaire aux couleurs associés puis après de ma catégorie et donc des couleurs. Résultats des courses 4 lignes de CSS et un minimum de valeurs utilisées.
Ayant 17 couleurs et 2 background, je pourrais gérer l’ensemble de mes couleurs en seulement 38 lignes de CSS contre un nombre beaucoup plus important (que je n’ai même pas envie de calculer) si j’avais choisi de rajouter une classe à chacun des liens, span, chapeau et image pour les gérer indépendamment les uns des autres. J’ai tellement du mal à voir m’imaginer la chose que je n’arrive d’ailleurs même pas à vous l’expliquer correctement alors beaucoup plus simple, l’opération se serais soldé un bordel monstrueux.

Pour un résultat visible ici qui ne correspond pas forcément à la prochaine version du pockyworld (vous avez eu suffisamment d’informations pour aujourd’hui).

Le bilan

L’article du jour était donc pour moi l’occasion de vous inciter à penser votre code de manière correcte et simple. N’oubliez pas la règle KISS, Keep It Simple and Stupid, vous passerez donc environ 5 minutes à mettre sur une feuille vos balises XHTML puis trouver vos classes pour finalement avoir en résultat en… 2 minutes supplémentaires .

Et pas comme votre bureau dans lequel vous êtes le seul à vous retrouver.

Vous allez notamment voir apparaitre dans ce fichier des classes composées de plusieurs mots. Il est bien évidemment (comme dans tous langages de programmation) impossible de séparer un identifiant ou une classe en plusieurs mots. Il nous faut donc définir une sorte de règle permettant de s’y retrouver. Certains utiliserons le tirait -, d’autres l’underscore _ et en ce qui me concerne, la majuscule.

Il convient donc, une fois la règle établie de votre coté, de l’appliquer dans le temps

Le fichier typography.css

/*	--------------------------------------------------------------------
	[typography.css]
 
	Table of Contents
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	1. Default Style
	2. Heading
	3. Safe font family
	4. Text decoration
	5. Text align
	6. Typographic style
	7. Span me I'm famous!
 
--------------------------------------------------------------------	*/
 
 
/*	--------------------------------------------------------------------	
	1. Default Style : because we need one :)
--------------------------------------------------------------------	*/
 
body { font-size: 1.2em; line-height: 1.6em; }
 
/*	--------------------------------------------------------------------	
	2. Heading
--------------------------------------------------------------------	*/
 
h1 { font: 3em/1.6em serif; }
h2 { font: 2.5em/1.6em serif; }
h3 { font: 2em/1.6em serif; }
h4 { font: 1.8em/1.6em serif; }
h5 { font: 1.6em/1.6em serif; }
h6 { font: 1.4em/1.6em serif; }
 
/*	--------------------------------------------------------------------	
	3. Safe font family
--------------------------------------------------------------------	*/
 
.arial { font-family: Arial, Helvetica, sans-serif; }
.courierNew { font-family: 'Courier New', Courier, monospace; }
.georgia { font-family: Georgia, 'Times New Roman', Times, serif; }
.lucidaConsole { font-family: 'Lucida Console', Monaco, monospace; }
.lucidaSansUnicode { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }
.tahoma { font-family: Tahoma, Geneva, sans-serif; }
.times { font-family: 'Times New Roman', Times, serif; }
.trebuchet { font-family: 'Trebuchet MS', Helvetica, sans-serif; }
.verdana { font-family: Verdana, Geneva, sans-serif; }
.msSans { font-family: 'MS Sans Serif', Geneva, sans-serif; }
.msSerif { font-family: 'MS Serif', 'New York', serif; }
.helvetica { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.impact { font-family: Impact, Charcoal, sans-serif; }
 
/*	--------------------------------------------------------------------	
	4. Text decoration
--------------------------------------------------------------------	*/
 
.underline { text-decoration: underline; }
.strike { text-decoration: line-through; }
 
/*	--------------------------------------------------------------------	
	5. Text align
--------------------------------------------------------------------	*/
 
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.alignCenter { text-align: center; }
.alignJustify { text-align: justify; }
 
/*	--------------------------------------------------------------------	
	6. Typographic style
--------------------------------------------------------------------	*/
 
.bold { font-weight: 900; }
.light { font-weight: 100; }
.italic { font-style: italic; }
.smallcaps { font-variant: small-caps; }
.expanded { letter-spacing: .5em; }
.condensed { letter-spacing: -.1em; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
 
/*	--------------------------------------------------------------------	
	7. Span me I'm famous!
--------------------------------------------------------------------	*/
 
span.first-letter { float: left; font-size: 3.4em; line-height: .5em; text-transform: uppercase; margin: 0.25em 0.14em 0 0; }

Le fichier typography.css en détail

Passons donc maintenant le fichier en revu. Certaines choses vont peut être vous plaire et d’autres non mais une fois de plus, ce fichier peut être adapté à votre sauce et c’est la tout l’intérêt. N’oubliez pas aussi le principe même des fichiers CSS, la dernière valeur indiquée est prioritaire sur toutes les autres.

1. Default Style : because we need one

La chose porte plutôt bien son nom car elle permet effectivement de spécifier une valeur par défaut pour le texte. Les valeurs font-size: 1.2em et line-height: 1.6em sont deux valeurs dont vous entendrez souvent parler pour une simple et bonne raison. En effet, associée au html { font-size : 62.5% } de clean.css qui permet d’utiliser em de la même façon que px, elles permettent de régler les valeurs d’un texte à 12px de hauteur ainsi qu’un espace entre les lignes de 19.2px. Le tout dans un souci de visibilité pour ce cher lecteur.

2. Heading

Ah ces titres… Ceux qui sont tant sous-estimés voir mal utilisés. Petite piqure de rappelle donc, vous retrouverez en html 6 balises hx. Elles permettent de spécifier la hiérarchisation des titres et leurs niveaux d’importance. h1 sera donc logiquement plus important que h6 qui sera le titre de plus bas niveau. Vous ne comprenez pas ? Ouvrez donc word (ou OpenOffice, soyons fou) et regardez la partie style de texte, vous retrouverez aussi ce principe de Titre, Titre 1, Titre 2 vous permettant de hiérarchiser votre document.

Grâce à CSS, nous allons donc styler nos titres du plus important au moins important. Pour l’instant le fichier typography.css ne fait que définir une taille de texte, un espacement et une police par défaut. Il va s’en dire que ces titres seront modifiés par la suite soient dans un autre fichier, soit directement via d’autres classes CSS. Cependant n’oubliez pas que CSS n’aura pas d’influence sur la balise au niveau sémantique. Ainsi, même si votre titre de niveau 6 fait 50 pixels de plus que votre titre de niveau 1, il sera toujours au niveau le plus bas d’un point de vue sémantique.

3. Safe font family

Une liste de classe CSS afin de définir des familles de polices. Pour trouver une famille de police qui tienne la route, rien bien compliqué. Sortez votre ami google et cherchez « safe font family » et la bonheur, des dizaines de sites répertories des familles de polices correctes. Il n’y a plus qu’à faire son choix !

4. Text decoration | 5. Text align | 6. Typographic style

La encore des séries de classes afin de modifier directement le texte. C’est à ce moment (selon moi) que vous pouvez comprendre tout l’intérêt du framework qui comme je l’avais précisé au début, est un framework fait pour l’intégrateur. Rappelez-vous, le mec qui a la maquette sous les yeux et qui doit se débrouiller pour faire la même chose en version html le plus rapidement possible car les personnes chargés du développement veulent commencer à intégrer leurs fonctionnalités dynamique . Beaucoup de classes dans ces parties donc afin d’offrir un gain de temps conséquent.

Pour la petite histoire, vous retrouverez dans la partie 6 deux classes répondant au doux nom de expanded et condensed. Ces deux classes sont la pour rappeler la propriété font-stretch de CSS qui n’est malheureusement pas intégré dans les navigateurs… expanded et condensed s’amusent donc avec letter-spacing (espacement entre les lettres) pour combler ce manque.

Et pour ceux qui se poseraient la question, oui oui, on peut aussi régler l’espacement entres les mots avec word-spacing mais honnêtement, je ne vois pas vraiment d’utilité à la chose.

7. Span me I’m famous!

Alors la petit débat. J’utilise dans cette partie span.first-letter. Première entorse donc à ma règle concernant le nom des classes puisque je devrais utiliser span.firstLetter mais il y a une raison. Connaissez-vous les proprietés CSS2 :first-letter ou encore :first-line qui font partie de la famille des pseudo-elements ? Deux magnifiques inventions qui peuvent modifier votre première lettre ou votre première ligne de façon automatique. Deux magnifiques inventions qui malheureusement, ne sont pas comprises par IE6.

Dans un souci de compatibilité, certains utiliseront donc un span afin d’effectuer la tache. Les autres pourront se rabattre sur un fix en javascript permettant de modifier le comportement du navigateur et répondant au doux nom de IE7.js (ou IE8.js).

A noter qu’il existe un vrai débat autour de l’utilisation de ces deux fichiers javascript. Je les ai parfois utilisés, ils ont certains avantages et tout de même peu d’inconvénients mais en ce qui concerne le framework, je ne me suis pas encore posé la question puisque je ne prendrais ma décision une fois ce dernier terminé et un peu éprouvé. La pratique vous permettra cependant de voir que l’on peu facilement s’en passer. Enfin et pour ceux qui souhaiterais faire le test, vous pourrez vous apercevoir que :first-letter et span.first-letter peuvent avoir deux comportements différents avec les mêmes valeurs. Et oui, si c’était aussi facile…

Pour ceux qui voudraient voir les fichiers en action, vous pouvez aller voir sur ce lien. Vous pourrez donc vous apercevoir que exploit, notre premier bug de mise en page apparaitra sur le fameux span.first-letter sur les navigateurs de la famille Internet Explorer. Qu’est ce que vous voulez… On ne se refait pas mais rassurez-vous, tout sera fixé en temps et en heure.

La prochaine étape sera consacré à color.css qui sera avec typography.css le fichier de base que l’on n’hésitera pas à modifier pour l’adapter à ses besoins (contrairement à clean.css ou layout.css).

J’espère que le prochain billet arrivera plus vite que celui-ci .l

Une fois l’étape 5 terminée, mon travail sera mis à la disposition de tous comme l’avait été le précédent.

Pour la petite histoire, le framework BIC est un framework que j’ai à l’époque pensé pour l’intégrateur qui interviens donc avant le développement sur une maquette statique. Il consiste en un système de classe lui permettant de mettre en page plus rapidement tout en diminuant la longueur du CSS propre au site.

Un peu de bonnes pratiques

Avant d’aller plus loin, un peu de bonnes pratiques concernant la mise en page d’un framework. Un framework est un outil relativement complet, certaines choses seront couramment utilisées, d’autres moins. Reste qu’il faudra le documenter non seulement pour son utilisation mais aussi pour pouvoir le partager. Une fois fini, rien ne vous empêchera de le concaténer afin d’enlever tous les commentaires, les sauts de lignes et le rendre le plus léger possible mais en attendant… Il faut y voir clair.

Organiser ses fichiers

Un framework css est généralement articulés autour de plusieurs fichiers. Il peut y avoir un reset.css, un typography.css, un layout.css, un color.css ou je ne sais quoi encore mais vous noterez que mes exemples sont relativement précis, les mots sont parlants et vous savez à peu près ce que vous trouverez dans le fichier avant de l’ouvrir. N’oublier pas de ranger vos différents fichiers CSS dans un dossier que vous pourriez par exemple appeler… Hum… Pourquoi pas CSS ?

Un petit gain de temps pour vous (puisque vous en êtes l’auteur) mais un gros gain de temps pour les autres.

Documenter

La documentation est à la fois la chose la plus importante et la plus négligé. Une fois dans votre fichier entrain de fouiller dans vos 300 classes rangées à votre façon, vous vous perdrez vite et perdrez du temps inutilement. Important donc de bien utiliser le système de commentaire afin de partager votre fichier CSS en plusieurs parties de la même manière qu’un… livre pourquoi pas ?

Histoire de remettre les choses en place et quitte à me répéter, un commentaire dans un fichier CSS se fait de la façon suivante :

/* < --- l'ouverture du commentaire - la fin du commentaire ---> */
/* blablabla */

Première partie : le master

La première partie donc, créer un fichier master. J’ai pour ma part choisis de le nommer screen.css afin de l’associer dans ma ligne xhtml aux medias screen et projection. Encore une fois, c’est relativement parlant et vous pourrez vous douter que le CSS pour gérer l’imprimante (et donc le media print) se nommera certainement print.css.

Dans ce premier fichier donc, la liste des différents fichiers CSS à appeler dans le répertoire /css/

screen.css

/*--------------------------------------------------------------------
 
[Master Stylesheet]
 
Framework : BIC
Version : 2
Last Change : 09/10/2008
Author : pocky
Please use for beautiful design only
 
[Credits]
clean.css is inspired from Meyer : http://meyerweb.com
 
--------------------------------------------------------------------*/
 
@import "css/clean.css";
@import "css/typography.css";
@import "css/color.css";
@import "css/layout.css";
@import "css/myclass.css";
 
/* Optional */
@import "css/wordpress.css";

clean.css : Mon fichier clean.css est donc mon reset. Je ne souhaite pas m’arrêter au reset et redéfinis donc certaines choses à la suite du travail effectué par Eric Meyer. Je l’ai donc baptisé clean.css car il nettoie tout avec mes propres produits d’entretiens

typography.css : La encore très simple, ce fichier se chargera des classes en rapport avec la typographie des pages web.

color.css : Une série de classe associées à des couleurs les plus fréquemment utilisées par mes petites mains.

layout.css : Un gros morceau dans ce fichier, une série de classes afin de faciliter la mise en page de la structure XHTML. Deux colonnes ou plus, tout va venir la dedans.

myclass.css : Le fourre-tout du framework. Toutes les classes que je serais tenter de rajouter en vrac et au gré de mes humeurs.

wordpress.css : Comme l’indique le commentaire au dessus, ce fichier est optionnel puisqu’il ne contiens que des classes utilisées par wordpress afin de faciliter la mise en page (par exemple des galeries).

Allez op, nettoyez moi tout ça !

Le fichier clean.css donc. Le but, remettre tout à zéro et nettoyer le reset à ma façon pour obtenir une base saine et donc… clean. Comme vous pourrez le constater, le fichier est documenté via une table des matières permettant de s’y repérer beaucoup plus simplement. Une fois de plus, c’est ma façon de faire mais vous pourrez très bien vous en inspirer .

/*	--------------------------------------------------------------------
	[clean.css]
 
	Table of Contents
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	1. Meyer modified reset
	2. Body
	3. Tables
	4. Quotes
	5. List
	6. Links
	7. Anything else
--------------------------------------------------------------------	*/
 
 
/*	--------------------------------------------------------------------	
	1. Meyer modified reset
--------------------------------------------------------------------	*/
 
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
 
em, strong, strike, acronym {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
* { font-size: 100.01%; }
html { font-size: 62.5%; }
 
/*	--------------------------------------------------------------------
	2. Body
--------------------------------------------------------------------	*/
 
body { min-height: 100% }
 
/*	--------------------------------------------------------------------
	3. Tables
--------------------------------------------------------------------	*/
 
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
 
/*	--------------------------------------------------------------------
	4. Quotes
--------------------------------------------------------------------	*/
 
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
 
/*	--------------------------------------------------------------------
	5. List
--------------------------------------------------------------------	*/
 
 
ol, ul { list-style: none; list-type: inside; margin: 1em 0; }
 
/*	--------------------------------------------------------------------
	6. Links
--------------------------------------------------------------------	*/
 
a, a img { text-decoration : none; }
:focus { border: 1px dotted; }
 
/*	--------------------------------------------------------------------
	7. Anything else
--------------------------------------------------------------------	*/
 
abbr { border-bottom: 1px dotted; }
p { margin: 1em 0 1em 0; }
hr { border: 0; height: 1px; margin-top: -1px; }

Meyer modified reset

Comme l’indique la table des matières et le crédit, la première partie du CSS est donc basée sur le reset d’Eric Meyer. Seulement j’ai pris la peine de séparer le reset en deux parties pour les balises em, strike, strong et accronym afin de ne pas à avoir a redéfinir le font-style ou font-weight pour chacune d’entre elle.

Comme vous pouvez le voir en dessous, Meyer documente :focus en nous rappelant de penser à le définir. Pour information le focus est une pseudo-class CSS permettant de visualiser le lien en cours lors d’une navigation avec la touche tabulation ou lors du clic de souris (dans certains cas). Le focus est habituellement composé de pointillés autour de l’élément en cours.

Enfin des petites modifications pour combler un problème sur Internet Explorer * { font-size: 100.01% } et une autre pour pouvoir spécifier des hauteurs en em comme des px (pixels) html { font-size: 62.5%; }

Maintenant, on nettoie à notre sauce

Place maintenant aux balises, je définis un peu de mise en page simple sur certaines balises sans pour autant m’attaquer au problème typographique. Normal, il sera effectué dans le fichier typography.css. On notera le retour de :focus afin de le redéfinir comme nous le conseil Meyer.

Vous pourrez aussi vous apercevoir que je n’ai que très peu concaténé mes valeurs afin de rencontrer le minimum de problème avec les navigateurs quel qu’ils soient. C’est une fois de plus un choix de ma part à ce niveau et valable uniquement pour ce fichier. Deux petites choses intéressantes encore, body { min-height: 100%; } afin d’éviter un problème de background sur certains navigateurs et enfin hr { border: 0; height: 1px; margin-top: -1px; }, un petit truc glané autour de quelques articles de blogs sur la balise hr afin une fois de plus de rencontrer le moins de problèmes avec cette balise qui pourra être redéfini via le fichier myclass.css pour la rendre toute kawai.

Prochain article consacré à typography.css.

Avant de partir sur les bonnes pratiques, petit récapitulatif. Il existe trois façons d’intégrer du CSS, les deux premières sont directement incluse dans le fichier XHTML de structure et la troisième (celle des bonnes pratiques) dans fichier à l’extension .css

Comment utiliser du CSS dans une page web

Dans une balise avec l’attribut style

Intégrer du CSS dans une balise doit rester quelque chose de ponctuel et d’exceptionnel. On pourrait par exemple s’en servir pour modifier un élément sans avoir accès au fichier CSS directement par exemple mais… A éviter.

<p style="color: #ff017d">Mon texte en rose</p>

Dans une page avec la balise style

Second moyen de faire toujours dans une page, utiliser la balise. On retrouve donc une séparation de la structure et du CSS mais tout se trouve dans le même fichier. A éviter donc, quitte à séparer, autant utiliser deux fichiers.

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR">
<head profile="http://gmpg.org/xfn/11">
	<title>Exemple</title>
	<style type="text/css">
		p { color: #ff017d; }
	</style>
</head>
 
<body>
	<p>Un texte en rose</p>
</body>
 
</html>

Dans un fichier CSS

Enfin une bonne façon de faire sur toute la ligne. En procédant de cette manière, la structure et la mise en page se font bien dans deux fichiers différents et indépendants l’un de l’autre. Il est donc possible de faire intervenir deux personnes différentes n’ayant pas directement accès à l’un ou l’autre des fichiers.

Cela se décompose en deux étapes, la première, le fichier XHTML de structure. Tout se passe dans la partie head.

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR">
<head profile="http://gmpg.org/xfn/11">
	<title>Exemple</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
	<p>Mon texte en rose</p>
</body>
</html>

Enfin un fichier CSS qui devra donc s’appeler dans mon cas style.css

p { color: #ff017d; }

Trois manières de faire pour un même résultat. N’est-ce pas franchement sympa ?

Comment cibler un élément en CSS

Il existe plusieurs moyens de cibler un élément.

Via le nom de sa balise afin de redéfinir tous les styles des balises XHTML :

body { mes styles pour body; }
p { mes styles pour p; }

Via l’id afin de cibler un élément unique dans la page :

<div id="paragraphe">
	<p>blablabla</p>
</div>

#paragraphe { mes styles pour parapgrahe }
#paragraphe p { mes styles pour p dans le div paragraphe }

Via les class qui peuvent être utilisés autant de fois que nous le souhaitons sur une page :

<div class="paragraphe">
	<p>blablabla</p>
</div>
 
<div class="paragraphe2">
	<p>blablabla</p>
</div>
 
<div class="paragraphe">
	<p>blablabla</p>
</div>

.paragraphe { mes styles pour .parapgrahe }
.paragraphe p { mes styles pour p dans .paragraphe }
.paragraphe2 { mes styles pour .parapgrahe2 }
.paragraphe2 p { mes styles pour p dans .paragraphe2 }

Trois possibilités donc avec lesquelles il faudra apprendre à jongler. Essayez cependant de limiter le nombre d’id au profit de class pour assurer une plus grande flexibilité du code.

Bonnes pratiques

La partie introduction terminée, penchons nous sur les bonnes pratiques associées à l’utilisation des CSS.

Inclure correctement un fichier CSS

Comme nous l’avons vu plus haut, nous utilisons link associé à l’attribut type, rel et href pour inclure correctement un fichier CSS. Seulement voila, mon code plus haut n’est pas forcément le meilleur. En effet et après un peu de pratique vous pourrez vous apercevoir qu’un attribut supplémentaire baptisé media peut venir chambouler les choses.

Il existe donc plusieurs types de media, par media comprenez interface de visualisation. CSS prends donc tout cela en charge afin d’optimiser voir de changer tout votre design suivant le type de périphérique connecté sur votre site.

La liste complète :

• all : Cela porte plutôt bien son nom, tous les medias sont concernés par all
• screen : Un écran d’ordinateur
• print : Une imprimante
• projection : Un vidéo projecteur
• handled : Un périphérique portable de type pocketpc ou palm
• tv : Les écrans de télévisions
• aural : Pour les lecteurs vocaux
• braille : Les appareils à retour tactiles
• embossed : Les imprimantes brailles
• tty : Les petits périphériques portables à la navigation limitée

Autant de médias, autant de possibilités. La simplicité rimerais donc à spécifier all et à ne pas trop se poser de questions. Malheureusement, nous aimons bien réfléchir un peu et pourquoi pas optimiser pour les différents medias par exemple :

<link rel="stylesheet" type="text/css" href="style/style.css" media="screen, projection" />

Ainsi nous disons : Si tu es un media de type ordinateur ou vidéo-projecteur, charge le fichier style.css dans le répertoire style. Pourquoi dire screen et projection ? Tout simplement car Opera en plein écran est un media de type projection. Il serait bête de ne plus voir de CSS dans ce cas .

Seconde optimisation (et nous aurons fait le tour des plus courantes), l’imprimante. Reprenons donc notre code et ajoutons lui une ligne.

<link rel="stylesheet" type="text/css" href="style/style.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="style/print.css" media="print" />

Deux fichiers différents seront donc chargés. style/style.css dans le cas d’un média de type écran ou vidéoprojecteur et le fichier style/print.css dans le cas d’une imprimante. Le minimum syndical est donc fait, nous pourrions en plus (vu la démocratisation) nous intéresser au périphérique mobile pour avoir le minimum syndicale de 2009 .

Quant aux autres types de médias, ils n’auront alors aucun fichier de style mais par moment, cela n’est pas forcément une lacune. Bien au contraire.

Remettre sur un pied d’égalité l’ensemble des navigateurs

Une fois nos CSS correctement déclarés dans la structure XHTML, il faut se poser la questions des navigateurs. Un peu de pratique vous mettra donc devant le fait accompli : les navigateurs ne sont pas tous sur un pied d’égalité concernant CSS. Pourquoi ? Parce qu’il ne respecte pas de la même manière les standard du web.

La meilleure façon de faire est donc de remettre l’ensemble des valeurs par défauts et donc tout à 0. Cela s’appelle le reset et un peu de recherche sur google vous conduira vers une tonne de ressource consacrées au reset css dont css4design (le retour de ce cher br1o) qui a décrypté plusieurs façons de faire. N’aimant pas réinventer la roue, allez donc faire un tour du coté de son site.

Éviter les hacks CSS inutiles

Une fois remise à zéro, vous vous apercevrez toujours que certains éléments ne sont pourtant pas correct sur tous les navigateurs. La tentation est donc grande de procéder à un hack css pour rectifier la valeur simplement

Prenons par exemple un problème de marge sur Internet Explorer 6. IE6, le meilleur ami de l’intégrateur… Ou pas. Nous avons donc fait un CSS qui s’affiche correctement sur Firefox et Opera mais pas sur IE6, nous pouvons alors utiliser la règle !important.

#container { margin: 0 10px; margin: 0 15px !important; }

Ainsi, IE6 ne n’aura que 10px à gauche et à droite du #container alors que Firefox en utilisera 15.

Seulement, la chose à ces limites et !important ainsi que tous les hacks CSS ont toujours leurs limites. Les bonnes pratiques consistent donc à utiliser une autre règle afin de dire au navigateur d’ouvrir ou non certains fichiers CSS et ainsi rectifier le CSS correctement et explicitement (dans un autre fichier). Nous procéderons donc de la façon suivante :

<!--[if IE ]>
<link rel="stylesheet" href="css/ie.css" type="text/css" />
< ![endif]-->

Ainsi si le visiteur utilise IE, le fichier ie.css sera automatiquement chargé. Il existe d’autres utilisation de if comme gt (greather than), lt (lower than) ou gte/lte (greather than or equal/lower than or equal) pour les différentes version d’un navigateur IE 6, IE 5, IE 7 ou même plus tard IE8.

Un CSS pour les dominer tous

Nous reviendrons sur le problème plus tard mais utiliser un fichier master css qui appelle d’autres fichiers css a quelques avantages. En effet si l’on reprends le code suivant :

<link rel="stylesheet" type="text/css" href="style/style.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="style/print.css" media="print" />

Nous pouvons nous poser la question suivante Vais-je utiliser un master css ou non ? J’aurais tendance à dire oui. Prenons le cas de notre fichier de reset amicalement baptisé reset.css. Il sera tout aussi important dans le cas de l’affichage sur un écran que sur une simple feuille de papier alors pourquoi le copier coller deux fois ? Autant le mettre à part et l’appeler de la façon suivante :

@import url("css/reset.css");

Puis de procéder ainsi pour un ensemble de fichier. Un gain de temps non négligeable, surtout pour les personnes pointilleuses avec la mise en page.

Utiliser une librairie CSS afin d’accélérer la mise en page

Tout le monde à l’habitude d’utiliser des classes CSS et de s’en fabriquer quelques unes afin d’accélérer l’intégration alors pourquoi ne pas en profiter ? Nous pourrions par exemple très simplement créer un fichier css répondant au doux nom de classe.css et incorporer des éléments redondants comme par exemple :

.FloatLeft { float: left; }
.FloatRight { float: right; }
.Clear { clear: both }
.Border { border: 1px solid; }

Ne reste donc plus qu’à inclure notre fichier class.css dans notre master.css.

Commenter son CSS et l’organiser

Un fichier CSS peut rapidement devenir un grand n’importe quoi. Il est donc important de commenter votre feuille de style et l’organiser correctement. Il n’y a malheureusement pas grand chose d’autres à dire, tout dépend de l’individu. Vous pouvez cependant commenter les parties comme générale, header, sidebar, footer afin de vous repérer ou encore indenter votre code CSS.

Pour ma part je nomme les parties dans mon fichier css mais n’indente pas et tape tout sur une ligne (à moins d’avoir beaucoup de valeur). C’est ma façon de faire et je m’y retrouve très bien .

/*------------------------------------------------------*/
/*--------- Un exemple de commentaire en css --------*/
/*------------------------------------------------------*/

p { margin: 10px 0; text-align: center; }

ou

p { 
	margin: 10px 0;
	text-align: center;
}

Concaténer les valeurs

Nous pouvons concaténer certaines valeurs en css afin de gagner quelques lignes et au passage, se prendre un peu moins la tête. Par exemple pour une marge, je peux aussi bien faire :

p { margin-top: 10px; margin-right: 0 px; margin-bottom: 10px; margin-left: 0px; }

que

p { margin: 10px 0; }

ou encore

p { margin: 10px 0 10px 0; }

Ceci est valable pour définir margin, padding, font et border.

Exemple pour margin (même chose pour padding):

p { margin: top right bottom left; }
p { margin: 10px 0 10px 0; }
 
p { margin: top/bottom right/left; }
p { margin: 10px 0; }
 
p { margin: top/bottom/right/left; }
p { margin: 10px; }

Pour border :

p { border: width style color; }
p { border: 1px solid #ff017d; }

Pour background :

p { background: color image repeat attachment position; }
p { background: #f00 url(background.gif) no-repeat fixed 0 0; }

Pour font :

p { font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family; }
p { font: italic small-caps bold 1em/1.6em "Lucida Grande",sans-serif; }

Éviter le trop noir ou le trop blanc

Vous pouvez éviter d’utiliser #000000 pour du noir (au passage cela peut aussi s’écrire #000) et #ffffff pour du blanc (#fff) afin de protéger les écrans et les yeux de vos lecteurs.

On utilisera donc par exemple #fefefe pour du blanc cassé et #1b1b1b pour du noir pas tout à fait noir .

Penser sa cascade

CSS c’est avant tout Cascading StyleSheet. Tout fonctionne en cascade de haut en bas. Si je modifiais 10 fois ma balise p en mettant autant de couleur différente, seule la dernière ligne serait interprétée. A contrario, je peux définir une première fois des valeurs globales puis affiner au fur et à mesure comme par exemple :

body { font: 1em/1.6em "Lucida Grande",sans-serif; }
p { color: #333; margin: 10px 0; }
a { color: #ff017d; text-decoration: none; border-bottom: 1px solid #ff017d; }

Toute ma page respectera donc la taille 1em avec 1.6em d’interligne dans la police Lucida Grande, mes paragraphes auront 10px de marge en haut et en bas et mes liens seront roses. Rien ne sert de spécifier à chaque fois la taille de ma police, cela est déjà fait. J’utilise donc la cascade comme il se doit.

Je pourrais tout aussi bien prendre le même code :

body { font: 1em/1.6em "Lucida Grande",sans-serif; }
p { color: #333; margin: 10px 0; }
a { color: #ff017d; text-decoration: none; border-bottom: 1px solid #ff017d; font-family: arial, verdana; }

Et faire la même chose pour ne modifier que la police des liens pour utiliser arial.

Définir une famille de police

Sans pour autant rentrer dans le débat des différents choix de police, pensez à utiliser une famille de police plutôt qu’une police seule. En effet un visiteur ne possédant pas la première police passera automatiquement à la suivante puis la troisième et ainsi de suite. Cela reflète aussi l’importance d’utiliser des polices de type web.

p { font-family: Arial, Verdana, Helvetica, sans-serif; }

Et la suite ?

Je vous propose tout simplement de passer aux commentaires afin de laisser vos propres bonnes pratiques. Nous pourrions par exemple aborder le sujet des 100,01%, des 62,5% pour utiliser em comme px et de pleins d’autres choses. Les bonnes pratiques CSS méritent à elles seules 3 chapitres

Nous en reparlerons cependant très vite avec la construction d’une librairie CSS reprenant l’ensemble des bonnes pratiques.

Une fois de plus, deux types de personnes vont donc se démarquer : ceux qui font du web « sexy » et les autres.

Ressources

Les ressources à ce niveau ne sont ni chères ni compliquées. Pour les personnes qui préfèrent avoir quelque chose en main, les mémentos XHTML et CSS seront vos plus fidèles alliés. Pour les autres, deux sites internet peuvent par exemple servir de bible à savoir X H T M L et mediabox.

XHTML et CSS, mécékoica ?

Essayons de faire la chose simple en comparant à quelque chose de connue comme Word. Lorsque vous créez un document Word, vous avez deux moyens de faire.

Le premier étant de créer votre document puis de passer sur chacun de vos éléments afin de mettre en page votre document. Bilan : long, fastidieux et pas toujours cohérents du début à la fin. Voici l’exemple du web comme il ne doit plus être, un seul élément pour tout définir le tout, très compliqué à maintenir correctement et peu ouvert aux collaborateurs.

Seconde option, taper votre document au kilomètre sans vous soucier d’autres choses que de la structure. Faire des paragraphes, mettre vos titres de niveau 1, puis 2, puis 3, vos listes et tutiquanti. Une fois l’opération terminée, utiliser les styles du document et les définir pour chacun des éléments de votre document. Enfin, les appliquer. Si vous faites de cette manière, vous voila dans le web actuel, celui que tout le monde devrait faire et divisé en deux parties : la structure (HTML ou XHTML) et le fichier de style (CSS).

Pour un web plus « sexy »

Faire des lignes de codes sexy est une véritable mentalité et un réflexe qui devrait être présent chez chacun des intervenants amenés à écrire une ligne de code. Voici quelques avantages à rendre du code sexy.

Faciliter la lecture du code

Prenons un exemple trouvé lors d’une de mes lectures de la semaine dernière. Le bout de code XHTML suivant se trouve sur le blog des microformateurs. Les microformateurs sont un groupe réunis autour d’un même but, faire découvrir les microformats au plus grand nombre et par la même occasion, la sémantique sur le web.

<div class="vcard">
<div class="fn">Christophe Ducamp</div>
<div class="adr">
<span class="locality">Paris</span>,
<span class="country-name">France</span></div>
</div>

Comme vous pourrez facilement vous en apercevoir, se retrouver dans ce petit code n’est pas forcément facile. La raison : il n’est pas indenté. La première étape vers un code plus sexy est donc l’indentation du code afin de rendre la lecture pour les différents intervenants plus facile. Le même code indenté donne donc la chose suivante :

<div class="vcard">
	<div class="fn">Christophe Ducamp</div>
	<div class="adr">
		<span class="locality">Paris</span>,
		<span class="country-name">France</span>
	</div>
</div>

Ce n’est pas très compliqué non ? Des tabulations correctement placées nous permettent de lire plus facilement le code et de séparer visuellement les différents éléments de la page.

Utiliser les bonnes balises aux bons endroits

Toujours en nous basant sur le code précédent, nous pouvons nous poser la question du balisage XHTML utilisé. Il utilise en l’occurrence la balise div représentant un conteneur générique neutre de type bloc (oui ça se complique). Le balisage utilisé est donc en soit acceptable. Seulement pour ma part et pour beaucoup d’intégrateurs, le choix de l’imbrication de plusieurs div n’est pas forcément une bonne solution, non seulement car cela n’a pas beaucoup de sens mais en plus car cela peut causer bien des problèmes selon les navigateurs employés.

Opter pour un bon balisage permet donc de donner du sens à la structure en l’identifiant d’une manière correcte et significative. Nous pourrions par exemple dans ce cas (une carte de visite) utiliser une liste non-numéroté avec la balise ul et les éléments de liste li. Pourquoi ces balises ? Car une carte de visite n’est après tout qu’un ensemble d’informations listées et utilisées afin de désigner un individu.

<ul class="vcard">
	<li class="fn">Christophe Ducamp</li>
	<li class="adr">
		<ul>
			<li class="locality">Paris</li>
			<li class="country-name">France</li>
		</ul>
	</li>
</ul>

Penser aux autres

Une autre étape dans la mise en place dans code plus sexy est tout simplement l’accessibilité. Par accessibilité nous entendons accessibilité aux informations. Pourquoi ? Car les personnes handicapées représentent tout de même environ 1 personne sur 10 en Europe. Vous vous devez, en tant que professionnel du web penser à ces personnes car ils ont comme tout le monde le droit de visiter votre site internet. Sans tomber dans l’extrême, il est tout simplement utile de noter qu’un site associant XHTML et CSS former autour de bonnes pratiques et de bon balisage répondra environ au trois quarts des demandes du référentiel général d’accessibilité des administrations. Le dernier quart étant essentiellement constitué de problématiques associées à la bonne dégradation du javascript (vive le web 2.0) et les pratiques vraiment spécifiques à l’accessibilité comme l’utilisation des attributs lang, des accesskey ou encore de tabindex (tabindex dont vous pourriez même vous passer en faisant correctement votre travail). Notons que ces attributs spécifiques à l’accessibilité sont tout aussi facile à mettre en place et ne sont donc qu’un simple coup de main à prendre.

Prenons le cas de lang. L’attribut lang est à utiliser lorsque l’on veut spécifier la langue utilisée dans la balise en cours. Elle sert en plus à assister le navigateur dans le choix du type de guillemet ou encore à assister les vérificateurs de grammaire et d’orthographe. Coté accessibilité, l’utilisation de lang permet aux synthétiseurs vocaux d’utiliser la bonne voix et donc la bonne intonation/le bon accent.

Je définis donc dans un premier temps la langue utilisée sur mon site, le Français de France (et non pas le Français du Canada par exemple qui serait fr-CA)

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR">
</html>

Mais dans mon contenu, au grès des articles, je pourrais très bien citer Sir Richard Steele avec la citation suivante en anglais :

<p lang="uk">
	<q>Reading is to the mind what exercise is to the body.</q>
	<cite>Sir Richard Steele</cite>
</p>

Modifier la langue pour qu’un lecteur vocal puisse effectuer son travail correctement ? Parfaitement inutile pour 99% du web. Utile pour le pourcentage restant. Non, très utile pour le pourcentage restant.

Sémantiquement votre

Dernière étape, optionnelle certes, s’ouvrir aux futurs technologies comme celles du web sémantique. Deux possibilité Microformats et RDFa s’offrent donc à vous. Ne rentrons pas dans le débat tout de suite mais occupons nous du principal avantage procuré par ces technologies : l’ouverture.

Utiliser l’une ou l’autre de ces technologies et les mettre en place permet donc de se faire comprendre et de donner un sens sémantique à son contenu. L’exemple le plus concret étant celui du « sac de patate » dont use et abuse les enseignants de mathématiques afin d’obliger les élèves à préciser la nature exacte d’un nombre. Le parallèle peut donc être fait avec le web, reprenons pour cela notre carte de visite qui est donc microformaté (l’une des deux manières de faire) :

<ul class="vcard">
	<li class="fn">Christophe Ducamp</li>
	<li class="adr">
		<ul>
			<li class="locality">Paris</li>
			<li class="country-name">France</li>
		</ul>
	</li>
</ul>

Comme vous pourrez le voir, cette petite carte de visite contiens un nom, un prénom, une ville et un pays. Mais comment le dire à un ordinateur ? Réponse proposée par les microformats, utiliser les classes CSS. Ainsi vcard, fn, adr, locality, country-name sont autant de microformats compris par certains outils comme les moteurs de recherche.

La finalité

Nous avons donc rendu notre code plus lisible, lui avons donné une structure correcte, nous l’avons rendu accessible et enfin, nous lui avons donné un sens. Mais dans quel but ? Réponse simple, le référencement naturel et donc 90% du travail qui permettra de vous faire comprendre par l’ensemble du web et ainsi vous mettre en avant d’une façon correcte et pertinente. Ah ce référencement, un mot tellement simple qui fera plaisir à plus d’un décideur…

Prochaine étape, le CSS…

Nous pouvons diviser le chapitre de l’hébergement en trois catégories : le mutualisé, le serveur virtuel et le serveur dédié. Chacune de ces catégories peut aussi être associé à une infogérance via un prestataire qui peut être l’hébergeur ou un tiers de confiance.

Ce qu’il faut savoir

Plusieurs choses sont à connaitre avant de choisir son hébergeur et à vérifier. Tout d’abord le nombre de site que vous allez pouvoir héberger sur votre machine ainsi que le nombre de sous-domaines. Si vous n’avez peut être actuellement qu’un seul site, ce ne sera peut être pas tout le temps le cas. Viennnet ensuite le nombre de base de données et leurs tailles afin de ne pas tout mettre ses œufs dans le même panier. Enfin le trafic mensuel, le nombre de comptes emails (ainsi que la taille des boites mails) ou encore le nombre de compte ftp. N’hésitez pas à vous faire un tableau comparatif !

Certaines solutions ont aussi besoins de serveur Microsoft (pour de l’asp/.net ou autre choses M$) mais la plupart du temps, la suite Linux/Apache/Mysql est utilisée.

Les différentes offres

L’offre mutualisée

L’offre mutualisée est la moins chére disponible sur le marché. Cela vient essentiellement du fait qu’une seule et même machine sert à héberger plusieurs dizaines voir centaines de sites (plutôt des centaines d’ailleurs). Les performances générales de la machine peuvent donc être plus ou moins fiable même en tenant compte du fait que les hébergeurs les surveillent généralement relativement bien afin d’éviter un désagrément de ce type à tous leurs clients.

Avantange : Le prix qui est généralement associé à un package relativement intéressant pour l’utilisateur aux besoins lambda.
Inconvénient : Il faudra cependant se demander si le trafic général (la moyenne de données échangées entre votre site et le visiteur multipliée par le nombre de visiteurs) de la machine ne vas être trop gourmand pour un hébergement mutualisé. Dans ce cas, votre hébergeur pourrait vous demander de passer sur une autre offre (serveur virtuel ou dédié) ou alors couper votre site…
Avis : L’hébergement mutualisé est largement suffisant dans 90% des projets web, alors profitez-en !

Le serveur dédié virtuel

Second palier, le serveur dédié virtuel. Pourquoi virtuel et pourquoi dédié ? Tout simplement car le serveur dédié virtuel est un serveur hébergé sur la même machine que d’autres clients (tout comme un serveur mutualisé mais avec beaucoup moins de monde). Le prestataire via un système de virtualisation à donc partagé sa machine en en sous-ensemble de machine dont vous êtes l’un des heureux possesseurs. Vous ne louez donc pas un serveur dédié à proprement parlé mais êtes libre de la même manière.

Avantage : L’apparente liberté qu’offrent ce type d’hébergement. Elles sont par ailleurs moins chères qu’un serveur dédié.
Inconvénient : Les connaissances techniques, qui dit dédié dit installation/configuration/maintenance et donc un niveau de connaissance technique. Il faudra donc suivant les prestataires penser à se trouver un allié en cas de pépin…
Avis : Un bon intermédiaire même si je préfère pour ma part soit le mutualisé, soit le dédié… Il y a des fois comme ça…

Le serveur dédié

La rolls de l’hébergement, le serveur dédié vous permet en toute liberté de faire ce que vous entendez de votre serveur. Il faudra donc regarder du coté des spécifications de la machine, de la bande-passante ou encore du type de connexion. Ensuite, il faudra choisir la système d’exploitation utilisé sur la machine Ubuntu, Debian, Gentoo… Ou encore Windows Server ?

D’autres questions pourront se poser, panel de gestion ou pas ? Et dans ce cas lequel ? Qui va installer cette machine et la maintenir dans le temps (ne serait-ce que pour faire les mises à jours) ? Quelle va être la stratégie de sécurité ?

Vous l’aurez compris, le serveur dédié est réservé aux personnes ayant de bonnes voir de très bonnes connaissances dans le milieu de l’administration de serveur. Et comme enfoncer le clou est toujours important, l’administration de serveur n’est pas chose facile mais installer un serveur l’est… Attention aux touristes du web !

Avantage : La flexibilité.
Inconvénients : Le prix et les connaissances techniques associées à ce type d’hébergement.
Avis : Si vous pouvez le faire, faites-le. On ne regrette malheureusement jamais un serveur dédié, excepté pour les apprentis bricoleurs du web.

Et le nom de domaine ?

Chacun des hébergeurs que vous trouverez (en dehors des serveurs dédiés) vous offre la possibilité d’enregistrer, de transférer ou d’héberger des noms de domaines. Certains hébergeur vous offrirons mêmes un ou deux noms de domaine en souscrivant chez eux. L’autre option est d’acheter vos noms de domaines chez un prestataire tiers afin de ne pas vous retrouver bloqué avec votre hébergeur car vous l’apprendrez malheureusement pas toujours de la bonne manière, le transfert d’un nom de domaine d’une société à une autre est en général un véritable parcours du combattant.

Pour ma part j’utilise gandi pour gérer mes domaines et n’ai jamais eu de problème. Il faut dire que je n’ai aussi jamais chercher à transférer de domaine entres plusieurs registrar…

Les gros VS les petits

Derniers point mais toujours aussi important, faut-il plutôt s’orienter vers les gros du web tels qu’OVH ou 1&1 ou vers des prestataires plus petits comme PHPnet voir carrément intimiste pour certains ?
Ma réponse sera très simple, tout dépend de ce que vous avez à héberger, avec quel type d’hébergement et qui peut vous appuyer en cas de problème.

Voici donc ceux que j’ai pu essayer :

• OVH : J’ai essayé les offres mutualisées et les serveurs dédiés. Pour ma part le panel d’administration me laisse un peu perplexe, j’ai toujours eu beaucoup de mal à m’y repérer. Reste qu’OVH en tant que gros du web est une bonne solution. Attendez-vous seulement à n’être qu’un client parmi tant d’autres.
  Le site
• 1&1 : Autre « gros » du web, je n’ai essayé que la solution mutualisé de 1&1 et n’ai jamais eu de problèmes particuliers.
  Le site
• PHPnet : Mon préféré, malgré un problème rencontré en 2005 qui m’a donné bien du fil à retordre, PHPnet reste mon hébergeur culte. Tout me plait (peut être à force de l’utiliser je ne sais plus), les offres tiennent la route, le suivi aussi et particulièrement en cas de pépin.
  Le site
• Celeonet : Il faut bien dire du mal de quelqu’un… J’ai utilisé un hébergement en mutualisé qui ne m’a jamais donné satisfaction, même dans l’administration d’un blog wordpress fraichement installé.
  Le site
• Dedibox : J’ai comme beaucoup d’autres pu essayer les dédibox lors du lancement de l’offre. Pas vraiment de déception puisque tout était géré par mes soins. Ma box à cependant connu quelques problèmes matériels indépendant de ma volonté. Après quelques déboires, je me suis surtout aperçu que gérer un dédié me prenait beaucoup de temps et que je n’en avais pas forcément le besoin. Un très bon apprentissage pour un cout faible comparé aux autres offres dédiés de l’époque.
  Le site
• Etigris : J’utilise ce prestataire belge pour héberger certains sites en mutualisé. Si le prix est supérieur à la moyenne, le suivi client est particulièrement efficace et même à la hauteur d’un serveur dédié. On a donc quelque chose idéal pour une personne désirant un serveur mutualisé avec des exigences de réactivités importantes. Sur ce point, rien à redire.
  Le site
• Elginux : J’utilise cet hébergeur pour un site seulement, nous avions besoin d’un serveur efficace, infogéré avec une réactivité très importante. Après consultations des différentes offres et comparatif des tarifs, elginux est sorti du lot.
  Le site

Conclusion

Je pense avoir fait le tour de toutes les choses à savoir avant de créer un site web. Vous avez donc suffisamment de cartes en main pour savoir quoi faire et ou aller. Ce blog va donc passer dans une phase plus technique et graphique puisque nous allons voir des barbaries de développeurs, webdesigners ou encore intégrateurs.

Place maintenant au PHP, xHTML, CSS, Flash et ActionScript, webdesign le tout sur une base de Wordpress. Et oui.

Joomla

Know your rights

Porsche Brasil

SPIP

Supercasino

Evian masters 2008

Drupal

Spread Firefox

Ubuntu

OsCommerce

Waliboo

Pimkie

Prestashop

Mageekstore et Laurent qui fête son anniversaire aujourd’hui

Wordpress

Jeux de maux

Lukasz Adamczak

Dotclear

Fubiz

Movable

SimpleBits