Design agile ? Qu’est ce que c’est ?

Aussi appelé responsive web design outre-atlantique, le design agile consiste à proposer un seul site qui s’adapte à tous les supports grâce aux merveilles des media queries. Ainsi vous n’avez plus besoin de maintenir un site pour les écrans classiques, un autre pour les mobiles et un troisième pour les tablettes. Votre design s’adapte naturellement.

Un CV en ligne m’a semblé un exercice idéal pour tester les joies des media queries. Je vous livre donc le résultat :

Voir la démonstration

Télécharger les sources

WaCV de Web Actually est mis à disposition selon les termes de la licence Creative Commons Attribution 3.0 non transposé.

Crédits

Pour concevoir ce mini site, j’ai utilisé les ressources (gratuites) suivantes :

• Base : HTML5 Boilerplate
• Icônes : iconSweets2 et Mighty Social Icons
• Background : Black Linen 2 by Atle Mo

Quelques liens utiles

• Tester son site sur plusieurs résolutions et notamment les résolutions mobiles et tablettes : Screen Fly
• un script pour la prise en charge des media queries: Respond

Le marquage HTML

Je commence toujours, et je vous encourage à faire de même, par l’intégration de mes contenus bruts en HTML. C’est en effet plus pratique par la suite de styler des éléments existants.

Ce tutoriel ayant pour but la mise en place d’un menu, je vous épargne toute la partie concernant la construction de la page. Sachez cependant que je suis parti de l’excellent HTML5 Boilerplate pour faire ma démonstration.

S’agissant d’un menu, nous allons donc créer une liste de lien à laquelle nous attribuons à une ID, de préférence sémantiquement correcte. Et puisqu’on parle de sémantique nous allons lui attribué un rôle ARIA. Ça ne mange pas de pain d’utiliser quelques bonnes pratiques.

Nous obtenons le code suivant :

<div id="menucontainer">
	<ul id="menu" role="navigation">
		<li class="active"><a href="#">Accueil</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Produits</a></li>
		<li><a href="#">&Agrave; propos</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

Notez que nous avons créé une classe « active » afin de définir les styles appliqués au lien sélectionné.

A ce niveau là, vous devriez obtenir le résultat suivant :

Pour l’instant ce n’est pas très sexy, nous allons donc mettre en forme tout cela.

Les styles de base

Nous commençons par supprimer les puces de notre liste, les mettre en ligne et les espacer. Nous nous occupons ensuite d’appliquer quelques styles aux liens de notre menu. Enfin nous terminons par définir les réactions de nos liens aux interactions de l’utilisateur en n’oubliant notre classe « active ».

#menu {
        list-style: none outside none;
	margin:0 auto;
	padding:20px 0;
	width:960px;
}
 
#menu li {
	display:inline-block;
	*float:left; /* Hack IE7 */
	margin-left: 10px;
	padding: 7px;
	position: relative;
}
 
#menu li:hover, #menu li:focus	{
	background-color:#eeeeee;
}
 
#menu li.active a  {
	color :#ce5046;
}
 
#menu li.active a:hover  {
	color: #E07C6F !important;
	border-bottom: none;
}
 
#menu a {
	background: #f9f9f9;
	border:1px solid #e9e9e9;
	color:#777;
	display:block;
	font-weight:700;
	font-size:13px;
	height:26px;
	line-height:27px;
	padding:5px 15px;
	position:relative;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
}
 
#menu a:hover,
#menu a:focus {
	background: #f9f9f9;
	color: #E07C6F !important;
	text-decoration: none;
}
 
#menu a:active {
	background: #f4f4f4;
	color:#ce5046;
}

Le choix des couleurs et des styles est évidemment à ajuster en fonction de votre propre design. Vous constaterez que notre menu a dorénavant meilleure mine :

C’est pas mal, mais grâce aux fonctions avancées de CSS3, nous allons encore l’améliorer.

Les styles avancés CSS3

Avec l’avènement de CSS3, de nouvelles possibilités s’offrent à nous. Nous allons justement les exploiter pour transformer les éléments de notre menu en boutons. Faisons un petit tour des ingrédients à notre disposition.

Les coins arrondis

Pour adoucir la forme de nos éléments nous arrondissons les coins à l’extrême de manière à avoir un demi cercle de chaque côté. Pour cela nous utilisons la propriété border-radius.

li.exemple{border-radius:45px 45px 45px 45px; }

Cette propriété prend normalement 4 valeurs (en pixel), une pour chaque coin de notre élément, la première correspondant au coin en haut à gauche. Dans notre exemple, les 4 coins ayant le même angle, nous utilisons un raccourci :

li.exemple{border-radius:45px; }

Des ombres pour donner du relief

La propriété box-shadow permet de générer des ombres pour nos éléments. Nous les utiliseront pour faire ressortir les éléments de notre menu avec une ombre portée, mais aussi pour donner un effet d’impression à notre classe active avec une ombre interne.

Autre avantage de cette propriété, c’est qu’elle peut prendre plusieurs valeurs. Ainsi nous pourront combiner plusieurs ombre pour accentuer le relief en donnant un léger effet de biseau à notre bouton.

Le fonctionnement est assez simple. La propriété box-shadow prend 4 valeurs :

• La distance de l’ombre sur l’axe horizontal, à partir de la gauche (exprimée en pixel, les valeurs peuvent être négatives)
• La distance de l’ombre sur l’axe vertical par rapport au sommet (exprimée en pixel, les valeurs peuvent être négatives)
• Le flou appliquée (exprimé en pixel)
• La couleur de l’ombre

Par exemple, pour une ombre noire d’une distance de 1 pixel sur l’axe vertical de notre élément avec un flou de 2 pixels, nous écrivons :

div.exemple {box-shadow:0 1px 2px #000; }

Si vous souhaitez que votre ombre apparaisse en haut, vous appliquez une valeur négative et si vous souhaitez que votre ombre soit interne vous ajoutez inset à la fin.

Pour appliquer plusieurs ombres à un même élément, vous dupliquez les paramètres en les séparant avec une virgule :

box-shadow:0 1px 2px #000, 0 1px 1px #fff inset;

Appliquer un dégradé

Pour donner un effet bombé aux liens de notre menu, nous lui appliquons un léger dégradé. Nous allons utiliser la propriété linear-gradient.

Pour faire simple, on définit le type de dégradé (radial ou linéaire), son point de départ, la couleur de début et celle de fin. Ce qui donne au final :

div.exemple {
	background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
}

Maintenant, si vous souhaitez vous simplifier la vie, je vous encourage à utiliser l’excellent générateur de dégradé de ColorZilla : Ultimate CSS Gradient Generator. Un outil puissant qui vous permettra de visualiser directement votre dégradé et de générer des effets complexes. Attention cependant avec le code généré pour Internet Explorer, celui ci ne fonctionne pas très bien. Pour ma part je fais sans.

Des styles pour notre texte

Si vous souhaitez utiliser une police différente pour votre menu, il suffit d’utiliser la règle @font-face. Un sujet déjà abordé dans mon article 5 polices pour agrémenter votre typographie.

Pour accentuer l’effet de bouton, nous pouvons utiliser un effet d’impression en appliquant une légère ombre blanche à notre texte. La propriété text-shadow fonctionne exactement comme sa grande sœur box-shadow.

a.exemple {
	text-shadow:0 1px 1px #fff;
}

Finalement

Maintenant que nous avons nos ingrédients, nous mixons le tout pour l’appliquer à notre menu :

#menu {
    list-style: none outside none;
	margin:0 auto;
	padding:20px 0;
	width:960px;
}
 
#menu li {
	-webkit-border-radius:45px;
	-moz-border-radius:45px;
	-o-border-radius:45px;
	border-radius:45px;
	display:inline-block;
	*float:left; /* Hack IE7 */
	margin-left: 10px;
	padding: 7px;
	position: relative;
}
 
#menu li:hover, #menu li:focus	{
	background-color:#eeeeee;
	-webkit-box-shadow:0px 1px 1px #ffffff;
	-moz-box-shadow:0px 1px 1px #ffffff;
	-o-box-shadow:0px 1px 1px #ffffff;
	box-shadow:0px 1px 1px #ffffff;		
}
 
#menu li.active a  {
	-webkit-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff;
	-moz-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff;
	-o-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff;
	box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff;
	color :#ce5046;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}
 
#menu li.active a:hover  {
	color: #E07C6F !important;
	border-bottom: none;
}
 
#menu a {
	background: #f9f9f9;
	background: -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#f4f4f4));
	background: -webkit-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: -o-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: -ms-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	border:1px solid #e9e9e9;
	color:#777;
	display:block;
	font-family:"museo-sans-1","museo-sans-2", Helvetica Neue, Arial, Helevetica, sans-serif;
	font-weight:700;
	font-size:13px;
	height:26px;
	line-height:27px;
	padding:5px 15px;
	position:relative;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	text-shadow:0 1px 1px #fff;
	-webkit-border-radius:18px;
	-moz-border-radius:18px;
	-o-border-radius:18px;
	border-radius:18px;
	-webkit-box-shadow:0px 1px 1px #ffffff inset;
	-moz-box-shadow:0px 1px 1px #ffffff inset;
	-o-box-shadow:0px 1px 1px #ffffff inset;
	box-shadow:0px 1px 1px #ffffff inset;
}
 
#menu a:hover,
#menu a:focus {
	background: #f9f9f9;
	background: -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#f4f4f4));
	background: -webkit-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: -o-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: -ms-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	-webkit-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset;
	-moz-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset;
	-o-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset;
	box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset;
	color: #E07C6F !important;
	text-decoration: none;
}
 
#menu a:active {
	background: #f4f4f4;
	background: -moz-linear-gradient(top, #f4f4f4 0%, #f9f9f9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f9f9f9));
	background: -webkit-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%);
	background: -o-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%);
	background: -ms-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%);
	background: linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%);
	-webkit-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset;
	-moz-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset;
	-o-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset;
	box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset;
	color:#ce5046;
	text-shadow: 0 1px 1px #fff;
}

Hey ! Il y a plein de propriété qu’on a pas vu ! Je vous rassure il s’agit simplement des déclinaisons de nos propriété CSS3 pour tous les navigateurs compatibles. Certes les dernières versions de Firefox, Chrome, Safari, Opera et Internet Explorer (9) prennent en charge naturellement ces propriétés, mais leurs grands frères nécessitent qu’on leur explique ce qu’il se passe. Pour cela on décline notre propriété en la préfixant du code du navigateur concerné

• -webkit- pour les navigateurs WebKit (Chrome et Safari),
• -moz- pour Mozilla (Firefox),
• -o- pour Opera,

Notre menu est dorénavant graphiquement abouti :

Nous allons pouvoir enrichir l’expérience utilisateur en utilisant les fameuses transitions CSS3

Enrichir l’expérience utilisateur avec les transitions

Les transitions CSS3 sont des outils merveilleux qui nous permettent de fluidifier les changements d’état de nos éléments, par exemple au survol d’un lien ou au clic sur ce même lien. Ils servent à enrichir l’expérience utilisateur. Dans notre cas, nous les utiliseront pour adoucir les changement d’état de notre menu.

Les transitions ne sont évidemment pas supportées par tous les navigateurs. Il faut donc s’assurer que celles ci ne soient pas indispensables à la bonne compréhension de notre site.

Le fonctionnement

Les transitions définissent la manière dont le changement d’état d’un élément est rendu. Elles s’appliquent à l’état normal d’un élément. Par exemple :

a.exemple {
background:#000;
color:#f9f9f9;
-webkit-transition:color 0.3s ease 0.3s, background 0.3s ease;
-moz-transition:color 0.3s ease 0.3s, background 0.3s ease;
-o-transition:color 0.3s ease 0.3s, background 0.3s ease;
transition:color 0.3s ease 0.3s, background 0.3s ease;
}
 
a.exemple:hover, a.exemple:focus {
background:#f9f9f9;
color:#000;
}

Dans cet exemple, on change la couleur de fond et la couleur de texte de notre lien au survol et au focus. La propriété transition nous permet de lisser ce changement d’état. Comme pour le reste des propriétés CSS3 nous la dupliquons pour tous les navigateurs.

Nous définissons d’abord la propriété à modifier. Vous pouvez consulter la liste des propriétés compatibles avec les transitions.

Nous déterminons ensuite sa durée, je vous conseille vivement d’éviter d’utiliser des transitions de plus de 0,5 secondes. Les utilisateurs risquent de vous haïr.

Avec la dernière valeur nous choisissons sa courbe de vitesse. Actuellement, il existe 5 courbes prédéfinies :

• linear
• ease
• ease-in
• ease-out
• ease-in-out

Notez que dans l’exemple, je sépare les 2 propriétés impactées. Nous aurions pu faire beaucoup plus simple en indiquant que toutes les propriétés étaient concernées :

transition:all 0.3s ease;

Enfin, le dernier paramètre possible (appliqué uniquement à la couleur du texte), permet de définir un délai au delà duquel notre effet se déclenchera. Il s’exprime lui aussi en secondes.

Mise en application des transitions

Maintenant que nous avons fait le tour de ce qu’il était possible de faire, nous allons appliquer le tout à notre menu :

#menu {
    list-style: none outside none;
	margin:0 auto;
	padding:20px 0;
	width:960px;
}
 
#menu li {
	-webkit-border-radius:45px;
	-moz-border-radius:45px;
	-o-border-radius:45px;
	border-radius:45px;
	display:inline-block;
	*float:left; /* Hack IE7 */
	margin-left: 10px;
	padding: 7px;
	position: relative;
	-webkit-transition:background 0.3s ease;
	-moz-transition:background 0.3s ease;
	-o-transition:background 0.3s ease;
	transition:background 0.3s ease;
}
 
#menu li:hover, #menu li:focus	{
	background-color:#eeeeee;
	-webkit-box-shadow:0px 1px 1px #ffffff;
	-moz-box-shadow:0px 1px 1px #ffffff;
	-o-box-shadow:0px 1px 1px #ffffff;
	box-shadow:0px 1px 1px #ffffff;		
}
 
#menu li.active a  {
	-webkit-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff;
	-moz-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff;
	-o-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff;
	box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff;
	color :#ce5046;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}
 
#menu li.active a:hover  {
	color: #E07C6F !important;
	border-bottom: none;
}
 
#menu a {
	background: #f9f9f9;
	background: -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#f4f4f4));
	background: -webkit-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: -o-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: -ms-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	border:1px solid #e9e9e9;
	color:#777;
	display:block;
	font-family:"museo-sans-1","museo-sans-2", Helvetica Neue, Arial, Helevetica, sans-serif;
	font-weight:700;
	font-size:13px;
	height:26px;
	line-height:27px;
	padding:5px 15px;
	position:relative;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	text-shadow:0 1px 1px #fff;
	-webkit-border-radius:18px;
	-moz-border-radius:18px;
	-o-border-radius:18px;
	border-radius:18px;
	-webkit-box-shadow:0px 1px 1px #ffffff inset;
	-moz-box-shadow:0px 1px 1px #ffffff inset;
	-o-box-shadow:0px 1px 1px #ffffff inset;
	box-shadow:0px 1px 1px #ffffff inset;
	-webkit-transition:color 0.3s ease, background 0.3s ease !important;
	-moz-transition:color 0.3s ease, background 0.3s ease !important;
	-o-transition:color 0.3s ease, background 0.3s ease !important;
	transition:color 0.3s ease, background 0.3s ease !important;
}
 
#menu a:hover,
#menu a:focus {
	background: #f9f9f9;
	background: -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#f4f4f4));
	background: -webkit-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: -o-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: -ms-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%);
	-webkit-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset;
	-moz-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset;
	-o-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset;
	box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset;
	color: #E07C6F !important;
	text-decoration: none;
	-webkit-transition: all 0.2s ease !important;
	-moz-transition: all 0.2s ease  !important;
	-o-transition: all 0.2s ease  !important;
	transition: all 0.2s ease  !important;
}
 
#menu a:active {
	background: #f4f4f4;
	background: -moz-linear-gradient(top, #f4f4f4 0%, #f9f9f9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f9f9f9));
	background: -webkit-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%);
	background: -o-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%);
	background: -ms-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%);
	background: linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%);
	-webkit-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset;
	-moz-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset;
	-o-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset;
	box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset;
	color:#ce5046;
	text-shadow: 0 1px 1px #fff;
}

Conclusion

Et voilà notre menu est terminé. Je vous remercie d’avoir lu ce tutoriel et j’espère qu’il vous permettra de créer de magnifiques menus pour vos futurs sites.

Voir la démonstration

Pourquoi avoir changé ?

Parce qu’au même titre que son propriétaire, ce site devait évoluer. Bien que très content de l’ancien thème, celui ci était à mon goût trop classique et pas assez représentatif de mes compétences.

En même temps, les technologies ayant énormément évoluées ces derniers temps (HTML 5, CSS 3, WordPress 3, etc…), il m’a semblé intéressant de mettre en application certaines d’entre elles.

C’était pas un peu long ?

Une éternité ! C’est ce que m’a paru le temps entre le moment où j’ai pris la décision de changer et la mise en ligne de ce nouveau design. Il faut dire que je garde en priorité absolue le suivi de mes clients. Il n’était pas question de les abandonner pour satisfaire un projet personnel. Je pense qu’il en va de même pour tous professionnel qui se respecte.

Beaucoup de maquettes, de gribouillages et de test en local pour finalement arriver à une version dont je suis fier, sans tomber dans le piège du site laboratoire (ou « fourre-tout ») dans lequel on entasse les différentes techniques sans réelle cohérence. Paradoxalement, cela m’a pris beaucoup plus de temps que pour les projets de mes clients. Une remise en cause permanente qui finalement fait du bien.

Concrètement qu’est ce qui change ?

Bien qu’il soit toujours fièrement propulsé par WordPress, ce nouveau site a été revu en profondeur.

L’aspect visuel

J’ai opté pour un panel de couleurs plus douces mais qui reste représentatives de mon tempérament passionné. J’ai aussi beaucoup travaillé sur les textures des différentes zone du site. Toujours avec pour objectif principal la mise en valeur du contenu. J’ai essayé de mixer harmonieusement design minimaliste et jeu de texture. Le tout en conservant un esprit de douceur. J’espère y être arrivé.

Typographie, mon amour

Le choix a été dur. Entre les polices gratuites et les versions payantes, le panel de sélection était titanesque. J’ai finalement porté mon choix sur la famille Museo (Sans et Slab), dont j’ai externalisé la gestion chez Typekit

Quoi qu’il en soit, j’ai dorénavant dans mes cartons de nombreuses association de polices qui m’ont séduites. A cette occasion, je vous encourage à consulter la mise à jour de mon article 5 polices pour agrémenter votre typographie.

Evidemment la typographie ne s’arrête pas au choix de la police, couleur, taille, interlignage, mise en valeur des titres et des liens : un travail global.

HTML 5 et CSS 3 : oui mais trop

A la fois passionnantes et contraignantes, ces deux technologies ont été insérées avec parcimonie dans ce projet. La première raison étant que tous les navigateurs, Internet Explorer en tête, ne supportent pas ce duo merveilleux.

J’ai donc pris soin de cibler la couche d’expérience visuelle non critique de mon site. En résumé, les navigateurs modernes bénéficie d’une version plus agréable, plus dynamique sans pour autant gâcher le contenu et la structure du site pour les navigateurs plus anciens.

Au programme, on trouvera donc quelques animations, des boutons d’actions construit grâces aux nouvelles propriétés CSS 3 et un formulaire de contact enrichi pour offrir une meilleure expérience utilisateur à mes lecteurs.

Un site au régime !

Que ce soit pour le contenu, l’offre de service, par exemple, a été simplifiée ; ou le temps de chargement du site, merci au plugin W3 Total Cache au passage, Je me suis évertué à accélérer l’accès au contenu de mon site.

Et ton blog ?

Un peu laissé de côté ces derniers mois, le blog devrait bientôt s’enrichir de nouveaux articles. La refonte de mon site a aussi été l’occasion de revoir ma ligne éditoriale. Le thème principal reste le web design et l’intégration, je partagerai donc avec vous mes découvertes sur le sujet, mais aussi des tutoriels autour du design, de CSS 3, WordPress, Magento et dans une moindre mesure, Prestashop.

Et après ?

Toujours beaucoup de projets dans les cartons, et en premier lieu la préparation de la version mobile de ce site, la création d’une Newsletter (encore à l’état embryonnaire) et bien d’autres choses…

Et vous qu’en pensez vous ?

Comment mettre en valeur les titres et accroches de son site internet ? J’ai décidé de partager avec vous 5 des polices qui m’ont le plus séduit lors de la refonte de mon site. Au passage, on en profitera pour parler de l’utilisation d’@font-face…ça mange pas de pain.

Les critères de sélection

Première contrainte : l’usage. En effet mon objectif était de mettre en valeur mes titres et mes phrases d’accroches, j’ai donc fait mes tests sur une taille de police minimum de 20 pixels, qui correspond à la taille de mes titres de niveau 3 (H3). Je descend assez rarement en dessous.

Il a ensuite été nécessaire de filtrer les polices compatibles avec la majorité des navigateurs (Firefox, Chrome, Safari, Opera et Internet Explorer 6, 7 et 8 ainsi que les navigateurs mobile de l’iPhone et l’iPad). Pour cela je devais trouver une police de caractère comprenant les formats TTF, EOT, WOFF et SVG. Je vous expliquerai pourquoi plus bas.

Enfin, j’ai affiné ma sélection en choisissant des polices concordantes avec ma police de corps de texte (Arial,Helvetica,Verdana,sans-serif).

La méthode @font-face

Différentes méthodes existent pour intégrer de nouvelles polices à votre site. En créant une image (avec un attribut « alt » renseigné), mais au delà de la lourdeur de la procédure, c’est celle de vos pages qui risque de grimper.

Il existe aussi des scripts dédiés, sIFR et Cufon en tête…

La méthode que je préfère a été remise au goûts du jour grâce à l’émergence de CSS 3, il s’agit de @font-face.

Le principe est assez simple. Puisque vous ne pouvez garantir que l’internaute possède votre police sur son terminal (ordinateur, portable, etc…), vous l’embarquez sur votre serveur.

Pour que votre police soit restituée correctement sur la majorité des navigateurs, vous aurez besoin de plusieurs formats :

• Le True Type Fonts (TTF) : Pour la plupart des navigateurs, sauf IE et iPhone,
• Le Embedded OpenType (EOT) : pour Internet Explorer,
• Le Web Open Font Format (WOFF) : une version compressée de la police, qui se veut un futur standard,
• Le Scalable Vector Graphics (SVG) : pour iPhone et iPad.

Il vous faut donc copier ces fichiers sur votre serveur, soit à la racine de votre feuille de style soit dans un sous répertoire intitulé « police » ou « fonts ». Ensuite c’est assez simple, dans votre feuille de style (styles.css) vous déclarez le chemin d’accès aux polices sur votre serveur.

Vous pouvez en déclarer plusieurs mais je déconseille d’en utiliser plus de 2 si vous les hébergez sur votre serveur, cela alourdit le temps de chargement de la page. Ci dessous un code « pare-balles » pour que votre police soit interprétée convenablement par tous les navigateurs. On dira merci à Smashing Magazine

	@font-face {
	font-family: 'MaPolice';
	src: url('MaPolice.eot'); /* Mode de compatibilité IE9 */
	src: url('MaPolice.eot?iefix') format('eot'), /* IE6-IE8 */
	     url('MaPolice.woff') format('woff'), /* Navigateurs modernes...sans IE :x */
	     url('MaPolice.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('MaPolice.svg#svgMaPolice') format('svg'); /* Legacy iOS */
	}

Récapitulons : nous attribuons un nom à notre police avec « font-family: », il est conseillé d’utiliser le nom original de votre police, mais vous pouvez tout aussi bien l’appeler « toto » ou « tata ».

Nous appelons ensuite le format EOT en premier pour ne pas froisser notre ami IE et une deuxième fois pour plaire à toutes les versions de ce navigateur. Ensuite, on déroule tous les formats en précisant bien au navigateur de quel format on parle.

Les polices sont déclarées, il ne reste plus qu’à les appliquer à un élément ou à une classe. Dans notre exemple, nous allons affecter la police PT Sans aux titres H1, H2 et H3 et la police Lobster à une classe « accroche » :

h1, h2, h3 {font-family: 'PT Sans', Arial, Helvetica, Verdana, sans-serif;
}
p.accroche {font-family: "Lobster1.3Regular", Georgia, Times New Roman, serif;}

Vous noterez que nous déclarons des polices de « secours ». En effet, si pour une raison ou pour une autre votre police n’est pas interprétée, il faut indiquer au navigateur par quelle police la remplacer. Voilà pour la partie technique. Maintenant passons aux résultats.

Quelques exemples

PT Sans

• PT Sans sur Font Squirrell
• PT Sans sur Google Web Font
• PT Serif sur Font Squirrell
• PT Serif sur Google Web Font

Bevan

• Bevan sur Font Squirrell
• Bevan sur Google Web Font

Lobster

• Lobster sur Font Squirrell
• Lobster sur Google Web Font
• Une alternative intéressante mais à tester : Marketing Script

Crimson text

• Crimson Text sur Font Squirrell
• Crimson Text sur Google Web Font

Droid Sans

• Droid Sans sur Font Squirrell
• Droid Sans sur Google Web Font
• Droid Serif sur Font Squirrell
• Droid Serif sur Google Web Font

Pour en savoir plus

• Trouver des kits de polices gratuits (y compris pour un usage commercial) : Font Squirrel
• Google propose un service du même acabit : Google Web Font
• Un excellent article sur pompage.net traitant de la typographie (justification, interlignage, emphase, échelle, etc…) : consulter l’article
• Toujours dans l’excellence, un article très détaillé d’Aurélien sur son blog All For Design : test de lisibilité des polices de Google.
• Une mine d’information sur Web design, lisibilité, typographie et rédaction web

Vous avez d’autres sources, des polices exotiques qui vous plaisent (par pitié pas de Comic Sans MS) ? N’hésitez pas à les partager.

Les réseaux sociaux : anges ou démons ?

Je vous l’accorde, le titre est un brin provocateur, cependant il me semble important d’amorcer la réflexion. Faut-il être présent sur les réseaux sociaux et gérer une communauté ou simplement utiliser les fonctionnalités de partage issues de ces plates-formes ?

M’adressant généralement à des petits ou moyens e-commerçants, je privilégierai la seconde option. Entendons nous bien, les réseaux sociaux sont une manne extraordinaire de visiteurs et a fortiori d’acheteurs potentiels. Ils représentent l’équivalent de la zone de chalandise des Champs Élysées pour une boutique en ligne.

Pour rester dans l’allégorie des Champs, vous avez donc le choix entre y afficher une publicité ou ouvrir votre point de vente (succursale) sur les Champs. Tout est une question d’investissement. Quel investissement en temps et en argent êtes vous prêt à faire pour conquérir les réseaux sociaux et transformer votre communauté en clients fidèles ?

Car il ne faut pas se leurrer, être présent sur les plates-formes sociales ne se résume pas à créer un compte. Il faut entretenir sa communauté, savoir quoi lui dire, quoi lui offrir, proposer régulièrement des nouveautés. Il faut passer du temps à répondre aux commentaires, qu’ils soient positifs ou négatifs, il faut donc un ligne éditoriale et la plupart du temps, faire appel à un professionnel (Community Manager).

Utiliser les fonctionnalités de partage vous permet en revanche de faire rayonner vos produits à moindre frais. En proposant des liens de partage, vous permettez à vos internautes de publier sur leur réseau social préféré un lien vers votre page produit. Un potentiel de nouvelles visites à ne pas négliger. Tout n’est pas rose pour autant, cette méthode reste passive, c’est à dire que vous ne pouvez relancer ou contrôler les liens qui sont fait sur votre site.

Ceci étant dit, passons à la pratique.

Ajouter les liens de partage grâce à AddThis

Il existe de nombreuses possibilités pour ajouter des liens de partage. Des extensions gratuites ou payantes, l’intégration manuelle de chaque API dans Magento ou utiliser des solutions déportées en Javascript. Je me suis intéressé à la dernière option : elle m’a semblé la plus complète et la plus facile à mettre en place.

Parmi les solutions existantes, j’ai retenu AddThis. Plus de 300 réseaux sociaux couverts, de nombreuses options, facilement personnalisable et munis d’un suivi statistique des partages (pour peu que vous ayez créé un compte). AddThis permet aussi d’envoyer par mail un lien à un ami vers la page produit ou d’imprimer la page en question. Une solution complète qui couvre à mon sens 99% des besoins.

La création d’un compte n’est pas obligatoire, mais utile si vous souhaitez activer le suivi statistique. AddThis vous propose des portions de code toutes prêtes qu’il vous suffit de copier coller sur vos pages ou articles.

Intégration des liens de partage à Magento

Vous avez choisi le format qui vous convient le mieux ? Nous allons donc intégrer les liens de partage dans Magento. Concrètement vous pouvez l’ajouter où bon vous semble : dans l’entête ou le pied de page de votre site. J’ai personnellement une petite préférence pour la zone « ajouter à » ou « Add to » des pages produits car elle se situe dans le champ de vision de l’internaute.

Prenons donc le fichier addto.phtml que vous trouverez ici : /app/design/frontend/default/default/template/catalog/product/view/addto.phtml

Pour notre exemple, nous utiliserons le modèle de base avec des icônes de 32 pixels :

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_email"></a>
    <a class="addthis_button_google"></a>
    <a class="addthis_button_compact"></a>
</div>
 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cfb9e9757ea6c56"></script>
<!-- AddThis Button END -->

Cette portion de code est à insérer avant ou après la liste de partage par défaut de Magento. Nous obtenons donc le code suivant :

<?php $_product = $this->getProduct() ?>
<ul class="add-to-box">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>"><?php echo $this->__('Add to Wishlist') ?></a></li>
 
<?php endif; ?>
<?php if($_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product) ): ?>
<li> <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a></li>
 
<?php endif; ?>
</ul>
 
<strong>Partager ce produit :</strong>
 
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_email"></a>
    <a class="addthis_button_google"></a>
    <a class="addthis_button_compact"></a>
</div>
 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cfb9e9757ea6c56"></script>
<!-- AddThis Button END -->

Nous afficherons donc des liens de partage vers Facebook, Twitter, Google. Plus un lien pour envoyer la page par mail à un ami et enfin l’icône « plus » permettant aux internautes de choisir d’autres plates-formes sociales.

Et voilà, le tour est joué, nous allons maintenant essayer de personnaliser le tout à notre sauce.

Paramétrer AddThis

Les options par défaut de AddThis suffiront à nombre d’entre vous, mais vous pouvez cependant modifier quelques paramètres. Choisir les principaux réseaux sociaux, modifier le titre des liens, les images et par exemple le format du message pour Twitter.

Ajouter un nouveau service, avec un titre et une icône personnalisée

Vous souhaitez ajouter un nouveau réseau social ? Viadeo par exemple ? Rien de plus simple, nous ajoutons donc un nouveau lien dans la liste avec le code suivant :

<a class="addthis_button_viadeo" title="Partager sur Viadeo"><img src="http://www.monsitemagento/media/repertoire-de-mes-icones/icone-viadeo.png" alt="Viadeo" /></a>

Notez que nous avons aussi inclus un attribut titre et une image différente. Par défaut, les titres des liens sont en anglais, pensez donc à modifier tous vos titres pour les passer en français. L’image permet de modifier l’icône par défaut par celle que vous aurez préalablement chargée sur votre site.

Personnaliser le message par défaut pour Twitter

Pour personnaliser le message que l’internaute publiera sur Twitter il faut ajouter le petit code Javascript suiavnt :

<script type="text/javascript">
var addthis_share = {
  templates: { twitter: 'Hey ! Jetez un oeil sur {{title}} @ {{url}}' }
}
</script>

Au final

Vous trouverez ci dessous un code près à l’emploi à mettre dans votre fichier addto.phtml

<?php $_product = $this->getProduct() ?>
<ul class="add-to-box">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>"><?php echo $this->__('Add to Wishlist') ?></a></li>
 
<?php endif; ?>
<?php if($_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product) ): ?>
<li> <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a></li>
 
<?php endif; ?>
</ul>
 
<strong>Partager ce produit :</strong>
 
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_google" title="Partager sur Google"></a>
<a class="addthis_button_delicious" title="Partager sur Delicious"></a>
<a class="addthis_button_linkedin" title="Partager sur LinkedIn"></a>
<a class="addthis_button_viadeo" title="Partager sur Viadeo"></a>
<a class="addthis_button_email" title="Envoyer par email a un ami"></a>
<a class="addthis_button_print" title="Imprimer la page"></a>
<a class="addthis_button_favorites" title="Ajouter cette page à vos Favoris"></a>
<a class="addthis_button_compact"></a>
</div>
 
<script type="text/javascript">
var addthis_share = {
  templates: { twitter: 'Jetez un oeil sur {{title}} @ {{url}}' }
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ceadfc841653fac"></script>
<!-- AddThis Button END -->

Pour en savoir plus

• Une extension de Magentix pour ajouter les liens sociaux sur les pages de sa boutique (produits ou autres) : découvrir l’extension social bookmarking
• Un excellent article d’Olivier Lévy de blog e-commerce qui traite des fausses bonnes idées du référencement et notamment des réseaux sociaux : lire l’article sur blog e-commerce
• L’un des blog de Frédéric CAVAZZA traitant des média sociaux en général : Le blog Medias Sociaux
• Un autre blog fort intéressant sur les média sociaux : Kriisiis.fr
• Une alternative à AddThis : Add To Any

Les règles de base

Avant toutes modifications, sauvegardez votre .htaccess original !

Dans un premier temps, nous allons empêcher le listage des répertoires. Un sujet déjà abordé dans mon précédent article

Options -Indexes

On ajoute ou supprime le www pour éviter la duplication de contenu,remplacer www.exemple.fr par votre nom de domaine.

RewriteCond %{HTTP_HOST} !^www.exemple.fr$ [NC]
RewriteRule ^(.*)$ http://www.exemple.fr/$1 [R=301,L]

Sécuriser votre .htaccess et votre wp-config.php

	<Files wp-config.php>  
	 Order Deny,Allow  
	 Deny from all  
	</Files>
	<Files .htaccess>  
	 Order Allow,Deny  
	 Deny from all  
	</Files>

Enfin, nous allons rediriger tous les appels au fichiers et répertoire inexistants vers l’index

   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . index.php [PT]

Bloquer tous les bots et IP malicieux

Pour les bots nous allons utiliser la Bots Blacklist 2010 Perishable Press.

Pour les IP nous utiliserons l’IP Blacklist 2010 Perishable Press.

Résultat final

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
# DEBUT PERSO
Options -Indexes
RewriteCond %{HTTP_HOST} !^www.immorezo.net$ [NC]  
RewriteRule ^(.*)$ http://www.immorezo.net/$1 [R=301,L]
	<Files wp-config.php>  
	 Order Deny,Allow  
	 Deny from all  
	</Files>
	<Files .htaccess>  
	 Order Allow,Deny  
	 Deny from all  
	</Files> 
RewriteCond %{HTTP_HOST} !^(127\.0\.0\.0|localhost) [NC]
RewriteCond %{HTTP_USER_AGENT} .*(Firs|exac|Cloak|Detect|uchoo|beaut|ASPSeek|swish|ICS\)|MSIE\ 6\.0\;\ Windows\ NT\;\ DigExt\)|pt\-BR\;\ rv\:1\.9\.0\.3\)\ Firefox\/3\.0|pt\-BR\;\ rv\:1\.9\.0\.18\)\ Firefox\/3\.0|\!susie|\$x0e|\%0a|\%0d|\@\$x|\_irc|\_works|\+select\+|\+union\+|\&lt;\?|1\,\1\,1\,|3gse|4all|4anything|5\.1\;\ xv6875\)|59\.64\.153\.|85\.17\.|88\.0\.106\.|98|a\_browser|a1\ site|abac|abach|abby|aberja|abilon|abont|abot|accept|access|accoo|accoon|aceftp|acme|active|address|adopt|adress|advisor|agent|ahead|aihit|aipbot|alarm|albert|alek|alexa\ toolbar\;\ \(r1\ 1\.5\)|alltop|alma|alot|alpha|america\ online\ browser\ 1\.1|amfi|amfibi|anal|andit|anon|ansearch|answer|answerbus|answerchase|antivirx|apollo|appie|arach|archive|arian|aboutoil|asps|aster|atari|atlocal|atom|atrax|atrop|attrib|autoh|autohot|av\ fetch|avsearch|axod|axon|baboom|baby|back|baid|bali|bandit|barry|basichttp|batch|bdfetch|beat|become|bee|beij|betabot|biglotron|bilgi|bison|bitacle|bitly|blaiz|blitz|blogl|blogscope|blogzice|bloob|blow|bord|boi|bond|boris|bost|bot\.ara|botje|botw|bpimage|brand|brok|broth|browseabit|browsex|bruin|bsalsa|bsdseek|built|bulls|bumble|bunny|busca|busi|buy|bwh3|cafek|cafi|camel|cand|captu|casper|catch|ccbot|ccubee|cd34|ceg|cfnetwork|cgichk|cha0s|chang|chaos|char|char\(|chase\ x|check\_http|checker|checkonly|chek|chill|chttpclient|cipinet|cisco|cita|citeseer|clam|claria|claw|clush|coast|code\.com|cogent|coldfusion|coll|collect|comb|combine|commentreader|common|compan|compatible\-|conc|conduc|contact|control|contype|conv|cool|copi|copy|coral|corn|cosmos|costa|cowbot|cr4nk|craft|cralwer|crank|crap|crawler0|crazy|cres|cs\-cz|cshttp|cuill|CURI|curl|curry|custo|cute|cyber|cz3|czx|daily|dalvik|daobot|dark|darwin|data|daten|dcbot|dcs|dds\ explorer|deep|deps|detect|dex|diam|diibot|dillo|ding|disc|disp|ditto|dlc|doco|dotbot|drag|drec|dsdl|dsok|dts|duck|dumb|eag|earn|earthcom|easydl|ebin|echo|edco|egoto|elnsb5|email|emer|empas|encyclo|enfi|enhan|enterprise\_search|envolk|erck|erocr|eventax|evere|evil|ewh|exploit|expre|extra|eyen|fang|fast|fastbug|faxo|fdse|feed24|feeddisc|feedhub|fetch|filan|fileboo|fimap|find|firebat|firedownload\/1\.2pre\ firefox\/3\.6|firefox\/0|firefox\/1|firefox\/2|firs|flam|flash|flexum|flip|fly|focus|fooky|forum|forv|fost|foto|foun|fount|foxy\/1\;|free|friend|frontpage|fuck|fuer|futile|fyber|gais|galbot|gbpl|gecko\/2001|gecko\/2002|gecko\/2006|gecko\/2009042316|gener|geni|geo|geona|geth|getr|getw|ggl|gira|gluc|gnome|go\!zilla|goforit|goldfire|gonzo|google\ wireless|googlebot\-image|gosearch|got\-it|gozilla|grab|graf|greg|grub|grup|gsa\-cra|gsearch|gt\:\:www|guidebot|guruji|gyps|haha|hailo|harv|hash|hatena|hax|head|helm|herit|heritrix|hgre|hippo|hloader|hmse|hmview|holm|holy|hotbar\ 4\.4\.5\.0|hpprint|httpclient|httpconnect|httplib|human|huron|hverify|hybrid|hyper|iaskspi|ibm\ evv|iccra|ichiro|icopy|ida|ie\/5\.0|ieauto|iempt|iexplore\.exe|ilium|ilse|iltrov|indexer|indy|ineturl|infonav|innerpr|inspect|insuran|intellig|interget|internet\_explorer|internet\x|intraf|ip2|ipsel|irlbot|isc\_sys|isilo|isrccrawler|isspi|jady|jaka|jam|jenn|jet|jiro|jobo|joc|jupit|just|jyx|jyxo|kash|kazo|kbee|kenjin|kernel|keywo|kfsw|kkma|kmc|know|kosmix|krae|krug|ksibot|ktxn|kum|labs|lanshan|lapo|larbin|leech|lets|lexi|lexxe|libby|libcrawl|libcurl|libfetch|libweb|libwww|light|linc|lingue|linkcheck|linklint|linkman|lint|list|litefeeds|livedoor|livejournal|liveup|lmq|locu|london|lone|loop|lork|lth\_|lwp|mac\_f|magi|magp|mail\.ru|main|majest|mam|mama|mana|marketwire|masc|mass|mata|mvi|mcbot|mecha|mechanize|mediapartners|metadata|metalogger|metaspin|metauri|mete|mib\/2\.2|microsoft\.url|microsoft\_internet\_explorer|mido|miggi|miix|mindjet|mindman|mips|mira|mire|miss|mist|mizz|mj12|mlbot|mlm|mnog|moge|moje|mooz|more|mouse|mozdex) [NC]
RewriteRule ^.*$ - [G]
RewriteCond %{HTTP_HOST} !^(127\.0\.0\.0|localhost) [NC]
RewriteCond %{HTTP_USER_AGENT} .*(Windows\ NT\ 6\.1\;\ tr\;\ rv\:1\.9\.2\.6\)|mozilla\/0|mozilla\/1|mozilla\/2|mozilla\/3|mozilla\/4\.61\ \[en\]|mozilla\/firefox|mpf|msie\ 1|msie\ 2|msie\ 3|msie\ 4|msie\ 5|msie\ 6\.0\-|msie\ 6\.0b|msie\ 7\.0a1\;|msie\ 7\.0b\;|msie6xpv1|msiecrawler|msnbot\-media|msnbot\-products|msnptc|msproxy|msrbot|musc|mvac|mwm|my\_age|myapp|mydog|myeng|myie2|mysearch|myurl|nag|name|naver|navr|near|netants|netcach|netcrawl|netfront|netinfo|netmech|netsp|netx|netz|neural|neut|newsbreak|newsgatorinbox|newsrob|newt|next|ng\-s|ng\/2|nice|nikto|nimb|ninja|ninte|nog|noko|nomad|norb|note|npbot|nuse|nutch|nutex|nwsp|obje|ocel|octo|odi3|oegp|offby|offline|omea|omg|omhttp|onfo|onyx|openf|openssl|openu|opera\ 2|opera\ 3|opera\ 4|opera\ 5|opera\ 6|opera\ 7|orac|orbit|oreg|osis|our|outf|owl|p3p\_|page2rss|pagefet|pansci|parser|patw|pavu|pb2pb|pcbrow|pear|peer|pepe|perfect|perl|petit|phoenix\/0\.|php|phras|picalo|piff|pig|pingd|pipe|pirs|plag|planet|plant|platform|playstation|plesk|pluck|plukkie|poe\-com|poirot|pomp|post|postrank|powerset|preload|press|privoxy|probe|program\_shareware|protect|protocol|prowl|proxie|proxy|psbot|pubsub|puf|pulse|punit|purebot|purity|pyq|pyth|query|quest|qweer|radian|rambler|ramp|rapid|rawdog|rawgrunt|reap|reeder|refresh|reget|relevare|repo|requ|request|rese|retrieve|rip|rix|rma|roboz|rocket|rogue|rpt\-http|rsscache|ruby|ruff|rufus|rv\:0\.9\.7\)|salt|sample|sauger|savvy|sbcyds|sbider|sblog|sbp|scagent|scanner|scej\_|sched|schizo|schlong|schmo|scorp|scott|scout|scrawl|screen|screenshot|script|seamonkey\/1\.5a|search17|searchbot|searchme|sega|semto|sensis|seop|seopro|sept|sezn|seznam|share|sharp|shaz|shell|shelo|sherl|shim|shopwiki|silurian|simple|simplepie|siph|sitekiosk|sitescan|sitevigil|sitex|skam|skimp|sledink|sleip|slide|sly|smag|smurf|snag|snapbot|snapshot|snif|snip|snoop|sock|socsci|sogou|sohu|solr|some|soso|spad|span|spbot|speed|sphere|spin|sproose|spurl|sputnik|spyder|squi|sqwid|sqworm|ssm\_ag|stack|stamp|statbot|state|steel|stilo|strateg|stress|strip|style|subot|such|suck|sume|sunos\ 5\.7|sunrise|superbot|superbro|supervi|surf4me|surfbot|survey|susi|suza|suzu|sweep|sygol|synapse|sync2it|systems|szukacz|tagger|tagoo|tagyu|take|talkro|tamu|tandem|tarantula|tbot|tcf|tcs\/1|teamsoft|tecomi|teesoft|teleport|telesoft|tencent|terrawiz|test|texnut|thomas|tiehttp|timebot|timely|tipp|tiscali|titan|tmcrawler|tmhtload|tocrawl|todobr|tongco|toolbar\;\ \(r1|topic|topyx|torrent|track|translate|traveler|treeview|tricus|trivia|trivial|true|tunnel|turing|turnitin|tutorgig|twat|tweak|twice|tygo|ubee|ultraseek|unavail|unf|universal|unknown|upg1|uptime|urlbase|urllib|urly|user\-agent\:|useragent|usyd|vagabo|valet|vamp|vci|veri\~li|verif|versus|via|virtual|visual|void|voyager|vsyn|w0000t|w3search|walhello|walker|wand|waol|watch|wavefire|wbdbot|weather|web\.ima|web2mal|webarchive|webbot|webcat|webcor|webcorp|webcrawl|webdat|webdup|webgo|webind|webis|webitpr|weblea|webmin|webmoney|webp|webql|webrobot|webster|websurf|webtre|webvac|webzip|wells|wep\_s|wget|whiz|widow|win67|windows\-rss|windows\ 2000|windows\ 3|windows\ 95|windows\ 98|windows\ ce|windows\ me|winht|winodws|wish|wizz|wordp|worio|works|world|worth|wwwc|wwwo|wwwster|xaldon|xbot|xenu|xirq|y\!tunnel|yacy|yahoo\-mmaudvid|yahooseeker|yahooysmcm|yamm|yand|yandex|yang|yoono|yori|yotta|yplus\ |ytunnel|zade|zagre|zeal|zebot|zerx|zeus|zhuaxia|zipcode|zixy|zmao) [NC]
RewriteRule ^.*$ - [G]
	<Limit GET POST PUT>
	 Order Allow,Deny
	 Allow from all
	 Deny from 208.120.202.98
	 Deny from 208.64.202.134
	 Deny from 217.218.166.14
	 Deny from 173.65.81.35
	 Deny from 77.21.46.241
	 Deny from 82.166.163.
	 Deny from 85.175.209.175
	 Deny from 212.107.136.66
	 Deny from 76.70.116.52
	 Deny from 70.106.192.200
	 Deny from 213.98.214.17
	 Deny from 114.58.253.56
	 Deny from 70.27.145.208
	 Deny from 208.99.193.10
	 Deny from 58.243.5.216
	 Deny from 146.115.72.39
	 Deny from 219.136.130.241
	 Deny from 65.208.151.
	 Deny from 222.73.173.11
	 Deny from 65.55.106.
	 Deny from 72.206.102.189
	 Deny from 99.159.41.74
	 Deny from 188.40.42.199
	 Deny from 195.10.218.132
	 Deny from 69.116.41.121
	 Deny from 84.220.96.39
	 Deny from 85.137.90.133
	 Deny from 85.137.83.160
	 Deny from 91.144.190.35
	 Deny from 83.233.165.88
	 Deny from 86.35.12.14
	 Deny from 24.182.45.28
	 Deny from 97.74.24.41
	 Deny from 24.182.45.26
	 Deny from 211.206.123.177
	 Deny from 213.215.116.99
	 Deny from 188.40.89.203
	 Deny from 65.55.207.
	 Deny from 71.95.178.74
	 Deny from 98.189.159.150
	 Deny from 174.143.3.188
	 Deny from 66.96.248.69
	 Deny from 71.235.77.152
	 Deny from 67.36.185.44
	 Deny from 65.242.250.130
	 Deny from 194.8.75.
	 Deny from 188.26.51.239
	 Deny from 118.208.240.173
	 Deny from 24.43.155.122
	 Deny from 91.149.157.136
	 Deny from 88.0.172.95
	 Deny from 66.82.9.92
	 Deny from 66.63.167.50
	 Deny from 208.99
	 Deny from 64.219.110.207
	 Deny from 98.189.159.153
	 Deny from 174.127.132.10
	 Deny from 67.185.43.239
	 Deny from 83.246.164.78
	 Deny from 213.227.252.26
	 Deny from 91.213.121.24
	 Deny from 96.243.186.28
	 Deny from 67.142.164.34
	 Deny from 173.58.132.100
	 Deny from 59.160.160.9
	 Deny from 67.225.242.171
	 Deny from 71.34.43.102
	 Deny from 67.205.45.142
	 Deny from 77.49.61.248
	 Deny from 79.174.64.184
	 Deny from 207.241.228.162
	 Deny from 204.12.192.135
	 Deny from 218.24.170.133
	 Deny from 200.90.216.146
	 Deny from 86.18.88.15
	 Deny from 212.225.185.11
	 Deny from 76.115.45.61
	 Deny from 213.37.57.113
	 Deny from 192.117.105.105
	 Deny from 69.45.51.98
	 Deny from 72.193.217.97
	 Deny from 115.133.252.31
	 Deny from 117.196.229.254
	 Deny from 117.196.234.101
	 Deny from 117.196.236.41
	 Deny from 77.49.57.214
	 Deny from 71.95.178.68
	 Deny from 92.233.3.91
	 Deny from 76.25.146.62
	 Deny from 66.25.140.85
	 Deny from 79.103.230.53
	 Deny from 76.65.178.130
	 Deny from 41.129.5.121
	 Deny from 84.40.30.37
	 Deny from 110.45.143.142
	 Deny from 66.221.63.33
	 Deny from 121.254.228.146
	 Deny from 222.236.47.182
	 Deny from 118.129.170.49
	 Deny from 88.191.94.188
	 Deny from 62.141.56.136
	 Deny from 174.120.219.160
	 Deny from 67.222.152.66
	 Deny from 92.240.42.10
	 Deny from 174.142.75.205
	 Deny from 91.142.208.158
	 Deny from 64.22.96.66
	 Deny from 78.86.185.224
	 Deny from 91.205.96.19
	 Deny from 202.70.54.115
	 Deny from 213.167.96.196
	 Deny from 195.117.223.98
	 Deny from 85.17.211.164
	 Deny from 213.93.38.160
	</Limit>
# FIN PERSO
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
 
# END WordPress

Mes sources pour cet article :

Je vous encourage vivement à consulter ces articles, seule contrainte, ils sont en anglais.

• 20 Steps to a Flexible and Secure WordPress Installation de net.tuts.plus.com
• Le blog de Jeff Starr Perishable Press

Pour aller plus loin :

Un plugin intéressant qui permet de noter le niveau de sécurité de votre installation WordPress et qui fournit de précieuses indications : Ultimate Security Check

Comment créer un champ personnalisé ?

Le plus simple, est d’utiliser le bloc champs personnalisés prévu à cet effet dans la page de création d’articles de WordPress. Indiquez le nom de votre champ et la valeur que vous souhaitez lui attribuer.

Dans notre exemple nous allons créer un champ personnalisé « wa_prix ».

Afficher son champ personnalisé

Une fois le champ créé, nous allons l’afficher sur tous les articles. Dans le fichier single.php de notre thème, nous ajoutons la ligne de code suivante :

<p class="prix">
 <?php echo  get_post_meta($post->ID, "wa_prix", true); ?>&nbsp;&euro;
</p>

Si vous souhaitez l’afficher dans les résultats de recherche ou dans vos archives, ajouter la même ligne dans les fichiers search.php et archive.php de votre thème.

Un custom field …ou l’autre

Période de soldes oblige, imaginons que nous ayons un prix spécial à afficher.

Nous allons donc créer un champ personnalisé « wa_prix_special ». Si ce champ existe dans l’article nous l’affichons, dans le cas contraire, nous irons chercher le prix standard :

<?php $wa_prix_special = get_post_meta($post->ID, 'wa_prix_special', true);
	if ($wa_prix_special) {
?>
<?php echo $wa_prix_special; ?>
<?php } else { ?>
	<?php echo  get_post_meta($post->ID, "wa_prix", true); ?>
<?php } ?>

Trier vos articles grâce aux champs personnalisés

Par défaut WordPress classe les articles par date, vous pouvez, si vous le souhaitez, les trier grâce à un champ personnalisé. Trions nos articles par prix croissant :

<?php query_posts('meta_key=wa_prix&orderby=meta_value&order=ASC'); ?>
<?php while(have_posts()) : the_post() ?>

Pour voir l’ensemble des possibilités et usages du query_posts et des custom fields, consultez le Codex WordPress

Sinon pour les feignants il y a :

2 excellents plugins pour créer des champs personnalisés à la pelle :

• Flutter
• et mon préféré, Magic Fields

Ces deux plugins intègrent déjà une API pour appeler les valeurs des champs personnalisés. Je vous encourage à consulter la documentation.

Amusez vous bien avec les champs personnalisés !

Les shortcodes, qu’est ce que c’est ?

Concrètement ce sont des raccourcis qui permettent d’appliquer un style à un contenu. Ils se présentent comme suit :

[nomdemonraccourci]contenu de mon bloc ou de mon élément[/nomdemonraccourci]

Ainsi le contenu de mon bloc héritera des styles que j’aurais appliqué à [nomdemonraccourci]. Pour qui connait les CSS, cela n’a rien de révolutionnaire, puisque l’équivalent est d’appliquer soit un style à un élément ou d’appeler une classe préalablement définie. Cependant pour vos clients cela peut être agréable de ne pas devoir se soucier du code source.

Quelques exemples qui peuvent être intéressants :

Créer un message d’information stylé

Dans un premier temps il faut déclarer notre raccourci dans le fichier functions.php. Vous le trouverez à la racine de votre thème.

function msginfo($atts, $content = null) {
	return '
<div class="msginfo">;'.$content.'</div>
 
';
}
add_shortcode('msginfo', 'msginfo');

Vous déclarez la votre fonction en lui indiquant de retourner le contenu dans un bloc ayant la classe « msginfo ».

Il vous reste à déclarer le style que vous souhaitez appliquer à votre bloc. Enregistrez les dans la feuille de style de votre thème :

.msginfo {
background-color:#D1ECFF;
border-color:#74C7FF;
border-style:solid;
border-width:1px 1px 1px 15px;
color:#0E2A00;
padding:15px 15px 15px 55px;
}

Enfin pour utiliser votre raccourci, il vous suffit d’utiliser la syntaxe suivante :

[msginfo]Un message d'information que je souhaite mettre en valeur[/msginfo]

Résultat :

Créer un bouton de téléchargement

Un cas un petit peu plus complexe, nous allons faire passer à l’utilisateur un paramètre (une URL) dans le raccourci :

	function btndl($atts, $content = null) {
	    extract(shortcode_atts(array(
	        "url" => ' '
	    ), $atts));
	    return '<a class="btndl" href="'.$url.'" target="_blank">'.$content.'</a>';
	}
	add_shortcode('btndl', 'btndl');

On indique que nous attendons une paramètre URL dans le raccourci qui sera utilisé dans le rendu.

Les CSS :

a.btndl{
	display: inline-block;
	color:#ffffff;
	font-weight:bold;
	font-size:1.2em;
	background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
	background : -moz-linear-gradient(center top, #88c841, #73b338);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 5px 20px;
	text-align: center;
	text-shadow: 0px 1px 0px #6c0909;
	text-decoration:none;
}
 
a.btndl:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
background : -moz-linear-gradient(center top, #73b338, #88c841);
color:#ffffff;
text-decoration:underline;
}

L’appel du raccourci :

[btndl url="http://fr.wordpress.org/"]Télécharger Wordpress[/btndl]

Le résultat :

Télécharger WordPress

Une présentation sur plusieurs colonnes

La fonction :

	function one-half($atts, $content = null) {
	    return '
<div class="one-half">'.$content.'</div>
 
';
	}
	function one-half_last($atts, $content = null) {
	    return '
<div class="one-half last">'.$content.'</div>
 
<br style="clear: both;" />';
	}
	add_shortcode('one-half', 'one-half');
	add_shortcode('one-half_last', 'one-half_last');

Les styles :

	.one-half {
		width: 45%;
		margin-right: 30px;
		float: left;
	}
        .one-half.last { margin-right:0; }

L’appel du raccourci :

[one-half]Un contenu sur une demie colonne. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor leo ac arcu feugiat sed porttitor sapien tristique. Nunc auctor, purus id faucibus volutpat, enim sem ullamcorper sapien, ut tempor est leo posuere purus. Nunc facilisis dui id nibh bibendum commodo sed non risus. Sed quis consectetur massa.[/one-half]
[one-half_last]Un autre contenu dans la colonne de droite. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor leo ac arcu feugiat sed porttitor sapien tristique. Nunc auctor, purus id faucibus volutpat, enim sem ullamcorper sapien, ut tempor est leo posuere purus. Nunc facilisis dui id nibh bibendum commodo sed non risus. Sed quis consectetur massa.[/one-half_last]

Le résultat :

En savoir plus

• Le codex WordPress vous parle des raccourcis (en anglais)

Un petit tour des nouvelles fonctionnalités de WordPress 3

Une interface d’administration plus légère, 1 217 bugs corrigés, la possibilité (enfin) de s’affranchir du sempiternel nom d’administrateur « admin » dès la création du site, la gestion des backgrounds (arrière plan) et headers (en-tête), et plein d’autres petits « plus » pour cette version 3. Il ne faudra cependant pas oublier les gros plus !

Personnaliser votre taxonomie !

A vos souhaits !

Je ne vous le cache pas, la première fois que j’ai lu ce terme cela m’a laissé un peu dubitatif. Mais avec le gros Robert on comprend vite le potentiel qui se cache derrière ce terme barbare.

En résumé, c’est la possibilité de regrouper certains éléments, dans notre cas, des articles, au sein d’un même groupe.
Nous utilisons en général les mots clés ou les catégories pour ce faire. Dorénavant nous pourrons utiliser d’autres éléments de classification.
Par exemple sur le site typechart.com, 3 nouvelles taxonomies ont fait leur apparition, dans la barre de droite, nous permettant de filtrer par type de police, l’emphase ou la taille. Un énorme bond en avant qui n’a de limite que votre imagination.

Les types de contenu personnalisables

Par défaut WordPress vous propose 2 types de contenu, les articles ou les pages. Vous allez maintenant pouvoir en définir de nouveaux. Par exemple dans le cadre d’un portfolio, vous pourrez définir une entrée spécifiques pour vos réalisations. Celle ci apparaitra alors dans votre menu d’administration sous une entité propre au même titre que vos articles ou pages.

La gestion des menus

Au même titre que les articles ou les pages, vous allez dorénavant pouvoir gérer vos menus nativement dans WordPress sans passer par un plugin ou une intervention dans les fichiers sources de votre thème. Evidemment cela sous entend que votre thème est compatible avec cette fonction. Personnellement, je dois avouer ne pas être « bluffé » par cet ajout, mais pour une grande partie de la population, cela va s’avérer bien pratique.

WordPress 3 en vidéo

La vidéo de présentation de WordPress 3.0 in english

Télécharger WordPress 3.0 en français

Pour en savoir plus

• La liste de toutes les fonctionnalités de la version 3 en anglais
• Le plugin Custom Post Type UI qui exploite déjà la taxonomie et les types de contenu
• Un autre plugin : GD Custom Posts And Taxonomies Tools, dans la même veine.

Amusez vous bien !

Un ouvrage complet

Mickaël Blanchard (l’auteur) nous présente à travers 11 chapitres (et 344 pages), les fonctionnalités de la bêtes (paramétrage de votre boutique, le Back Office, le Front Office, etc…) ainsi que les bases du design et du développement de module sur cette plate-forme.

Bref, un guide indispensable pour les utilisateurs débutants ou confirmés, mais surtout pour partir du bon pied (doigt ?) avec Magento.

Pour info, ce guide est publié par les éditions Eyrolles dans la collection Accès Libre et est préfacé par Sébastien Lepers.

Pour acheter le livre, rendez vous chez Eyrolles.

Au passage je vous encourage à consulter les autres ouvrages de la collection Accès Libre, dont je suis très friand.

Bonne lecture à tous