Une astuce à la fois très légère, très simple, et qui présente le mérite de ne pas vous encombrer d’un plugin supplémentaire. Car en effet, tout ce que vous avez à faire pour changer la longueur de l’extrait de WordPress est de suivre les étapes suivantes :

1. Ouvrez ou créez le fichier functions.php à la racine de votre thème. A noter que ce dernier est disponible sur le nouveau thème par défaut introduit par WordPress 3.0 alors faites attention de ne pas l’écraser.
2. Copiez et collez cette ligne de code : function new_excerpt_length($length) { return 100; } add_filter(‘excerpt_length’, ‘new_excerpt_length’);
3. Enregistrez votre fichier puis rechargez tout simplement votre page. Tous vos extraits, ou excerpts, seront immédiatement modifiés en conséquence.

Et pour ajouter ou enlever des lettres, c’est très simple, il vous suffit de modifier l’instruction « return » xxx où xxx est égal au nombre de caractères souhaités. Comme vous le voyez, on ne peut pas dire que c’était très compliqué, non ?

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

1. Développer moins pour gagner plus

La plupart des développeurs vous diront qu’il faut tout coder soi-même, quitte à passer des nuits blanches devant son Notepad++. En ce qui me concerne, je pars du principe qu’il ne sert à rien de réinventer la roue et qu’il est préférable d’utiliser une solution fiable et éprouvée plutôt que de se risquer à coder un script tout seul dans son coin tard la nuit.

Cela dit, je ne suis plus webdesigner que développeur, hein…

A l’époque où j’ai souhaité intégré un diaporama sur Weedle, je me suis beaucoup renseigné sur le sujet. Développer un script de ce genre n’est pas difficile en soi. Ce qui est plus délicat, c’est de faire en sorte qu’il soit doté de toutes les fonctionnalités dont on a besoin, qu’il respecte les standards établis et qu’il soit compatible avec tous les navigateurs du marché.

EasySlider réunit justement toutes ses qualités et c’est la raison pour laquelle c’est vers cet outil que je me suis tourné.

2. EasySlider, les fonctionnalités du script

En plus d’être respectueux des normes et d’être compatible avec les différents navigateurs web du marché, EasySlider propose de nombreuses options de personnalisation. Il est ainsi possible de déterminer la rapidité d’exécution des différents slides, d’opter pour deux systèmes de navigation différents (précédent / suivant et contrôles numériques) et bien d’autres choses encore.

Voici d’ailleurs une liste non exhaustive des options du script :

• Deux systèmes de navigation : précédent / suivant, contrôles numériques.
• Possibilité d’afficher / de masquer les différents contrôles.
• Possibilité de choisir l’ID des composantes du système de navigation.
• Deux orientations possible pour le diaporama : horizontale ou verticale.
• Possibilité de choisir la rapidité d’exécution des slides.
• Possibilité de définir un défilement continu ou pas.

Pour avoir plus d’informations sur le sujet, je vous encourage vivement à aller consulter la page dédiée du plugin. N’hésitez pas non plus à aller consulter celles des versions précédentes, elles contiennent de nombreuses informations qui vous permettront de mieux comprendre le fonctionnement de notre EasySlider.

3. EasySlider, l’installer et l’utiliser

Maintenant que les présentations sont faites, nous allons pouvoir passer au vif du sujet et voir comment s’installe et s’utilise EasySlider. Pour se faire, vous aurez besoin d’un minimum de connaissances techniques et maîtriser le HTML ainsi que les CSS. Si ce n’est pas le cas, ce n’est pas grave, vous pouvez garder cet article dans un coin puisque je pense publier dans les semaines qui viennent des guides complets sur les bases du développement web.

3.1. Installer jQuery et  EasySlider :

Pour commencer, il est nécessaire de récupérer la dernière version du plugin sur la page dédiée. Une fois l’archive téléchargée, contentez-vous de la décompresser dans le dossier de votre site. Puis, ouvrez votre éditeur préféré ainsi que le fichier header.php si vous utilisez WordPress ou sinon le fichier de votre site qui va bien.

Placez-vous entre les balise <head> et </head> et insérez les deux lignes suivantes :

1
2

<script src="http://chemin-de-votre-site/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://chemin-de-votre-site/easySlider1.7.js" type="text/javascript"></script>

Deux choses à noter :

1. Il est primordial d’intégrer EasySlider après jQuery. Si vous ne le faites pas, alors le script ne pourra pas fonctionner.
2. Le chemin indiqué soit être complet. Attention, donc, si vous avez tendance à mettre vos fichiers JS dans un sous-dossier.

3.2. La base HTML + CSS :

A présent que jQuery et EasySlider sont bien installés, nous allons pouvoir commencer à préparer notre template HTML. Notons que les scripts qui suivent ont été volontairement allégés au maximum afin d’insister sur l’essentiel. Globalement, donc, vous aurez ensuite encore un peu de travail à faire au niveau de la mise en forme.

Côté HTML, c’est relativement simple puisqu’il suffit d’insérer les lignes qui suivent à l’endroit où vous souhaitez voir apparaître votre diaporama. Précisons juste que notre structure s’appuie essentiellement sur les listes.

1
2
3
4
5
6
7
8
9

<div id="diaporamali">
<ul>
<li >Mon premier slide</li>
<li >Mon second slide</li>
<li >Mon troisième slide</li>
<li >Mon quatrième slide</li>
<li >Mon cinquième slide</li>
</ul>
</div>

Au niveau des CSS, ce n’est guère plus compliqué, il suffit d’insérer ces lignes dans votre feuille de style. Notons le overflow: hidden placé sur nos listes. Sans lui, le diaporama ne pourra pas fonctionner correctement, il est donc indispensable. Notons également que votre conteneur et vos listes doivent avoir les mêmes dimensions.

1
2
3
4
5
6
7

div#diaporamali,div#diaporamali li {
display: block;
width: 500px;
height: 200px;
list-style-type: none;
overflow: hidden;
}

3.3. Le script jQuery :

Maintenant que notre structure est prête, il ne nous reste plus qu’une étape à accomplir : nous allons devoir insérer entre nos balises <head> et </head> le script qui nous permettra d’initialiser et de paramétrer notre diaporama. A toute fin utile, je préfère tout de même préciser un point important : ce script doit obligatoirement être inséré après jQuery et EasySlider.

1
2
3
4
5
6
7
8
9
10
11

<script text="text/javascript">
$(document).ready(function() {
        $("#diaporamali").easySlider({
		speed: 1200,
		pause : 10000,
		auto: true, 
		continuous: true,
		numeric : true
	});
});
</script>

Alors évidemment, libre à vous de personnaliser ce script à votre convenance. Ici, j’ai finalement repris le même script que celui qui anime le diaporama de Weedle : un défilement continu, une pause assez longue et un système de navigation numérique transformé en boutons afin de permettre aux internautes de se promener au travers des différents slides.

4. Et après ?

Voilà, cette courte présentation de EasySlider touche à sa fin. Je tiens à préciser que ce script n’est pas le seul du genre mais il a néanmoins le mérite d’être très simple à intégrer et très rapide à déployer. Et si vous avez des questions ou si vous souhaitez simplement remercier son auteur, n’hésitez pas à aller faire un tour chez lui.

Alors maintenant, il y a sans doute une question que vous devez vous poser, à savoir comment j’ai fait pour intégrer les images de mes articles dans ce diaporama. C’est une bonne question, et c’est la raison pour laquelle j’ai décidé d’insérer ci-dessous mon script complet. Comme vous le verrez, ce n’est pas très compliqué.

Le code HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="diaporamali">
<ul>
<?php
global $post;
$myposts = get_posts('numberposts=5&orderby=post_date&order=DESC');
foreach($myposts as $post) :
?>
<li style="background:url(<?php get_first_image($post->post_content); ?>)">
<a href="<?php the_permalink(); ?>" class="diaporamatitre"><?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>

Le code CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

div#diaporamali {
border: 4px solid #dedede;
text-align: left;
}
div#diaporamali ul {
margin: 0;
padding: 0;
}
div#diaporamali, div#diaporamali li {
display: block;
width: 573px;
height: 170px;
list-style-type: none;
overflow: hidden;
}
a.diaporamatitre:link, a.diaporamatitre:visited, a.diaporamatitre:hover {
background: #9dd1eb;
color: #fff;
display: block;
font-size: 14px;
height: 22px; 
margin-top: 67px;
padding-left: 10px;
padding-top: 5px;
width: 358px;
}
a.diaporamatitre:hover {
opacity: 0.9px;
}
/* CONTROLES DIAPORAMA  */
ol#controls {
margin-left: 511px;
margin-top: 2px;
padding: 0;
}
ol#controls li {
background: url(img/bouton_diaporama.png) no-repeat;
display: block;
float: left;
height: 12px;
list-style-type: none;
margin-left: 2px;
padding: 0;
width: 12px;
}
ol#controls li a:link,ol#controls li a:visited,ol#controls li a:hover {
display: block;
text-indent: -9999;
height: 12px;
width: 12px;
}

Le script Javascript :

1
2
3
4
5
6
7
8
9
10
11

<script text="text/javascript">
$(document).ready(function() {
$("#diaporamali").easySlider({
		speed: 1200,
		pause : 10000,
		auto: true, 
		continuous: true,
		numeric : true
	});
});
</script>

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

1. Penser et optimiser son thème à la source

Lorsqu’on réalise un site, on est très souvent tenté d’en faire le plus possible. Il n’est ainsi pas rare de succomber à la tentation et d’agrémenter ses pages d’animations flash, de vidéos ou d’images. Ces différents éléments doivent être utilisés avec parcimonie dans la mesure où ils consomment de la bande passante et qu’ils peuvent par conséquent ralentir considérablement l’affichage de vos pages. Alors bien entendu, vous pouvez parfaitement utiliser ces technologies, mais ce n’est pas pour autant que vous devez les accumuler. Ajouter des scripts en AJAX pour le plaisir d’en ajouter, cela ne rime à rien.

De la même manière, il est primordial de toujours se méfier des scripts externes, qu’il s’agisse de régie publicitaires ou de widgets communautaires. Là encore, le blogueur est très souvent tenté d’en faire trop, de passer par plusieurs régies différentes, d’ajouter des widgets à sa sidebar pour la rendre plus vivante. Et là encore, il convient de se montrer très prudent. Optimiser ses pages, son serveur, c’est une chose, mais vous ne pouvez pas intervenir sur ces scripts externes. Par conséquent, vous en êtes tributaire.

Cela dit, ce n’est pas pour autant que vous devez proscrire ces différentes technologies. Sur Weedle, par exemple, la galerie de photographies générées à partir de FlickRSS qui se trouve dans ma barre latérale est l’un des éléments qui ralentit le plus l’affichage de mes pages. Si je l’enlevais, je gagnerais sans doute 1 ou 2 secondes sur leur chargement. Cependant, dans la mesure où j’estime que cette fonctionnalité peut vous être profitable, j’ai préféré la laisser. Le tout est donc de faire ses choix avec le plus grand soin.

Pour calculer le « poids » de vos pages, il existe deux outils que tous les webmestres devraient connaître : Firebug et YSlow. Utilisés conjointement, ils vous permettront de corriger vos pages et de gagner ainsi quelques précieuses secondes. En ce qui concerne les images constituant votre thème, n’hésitez pas non plus à les optimiser en mettant en place des CSS Sprites.

Concernant WordPress, nous préciserons enfin que ce qui vaut pour les scripts, animations flash et autres vaut également pour les plugins que vous utilisez. Votre objectif doit toujours être d’en utiliser le moins possible et, là encore, il convient de faire son choix avec le plus grand soin.

2. Les astuces pour optimiser WordPress

Il suffit de faire une simple recherche sur Google pour trouver des milliers de résultats sur l’optimisation WordPress. Mon objectif n’étant pas de dresser une énième liste d’astuces sur le sujet, je vais me contenter de vous parler de ce que je connais et de ce que j’ai fait sur Weedle. Pour vous donner une idée de ce que valent ces différentes astuces, il faut savoir que ma page d’accueil mettait initialement 16 secondes pour charger. A présent, j’en suis à une moyenne de 3 ou 4 secondes. Un gain non négligeable.

2.1. Optimiser sa base de données :

On l’oublie souvent mais il est nécessaire d’optimiser régulièrement sa base de données afin qu’elle reste aussi réactive qu’au premier jour. Pour se faire, plusieurs options s’offrent à vous. Au choix, vous pouvez passer directement par PHPMyAdmin ou bien installer un plugin dédié pour WordPress. Là encore, il en existe un certain nombre mais, en ce qui me concerne, j’ai opté pour WP DB Manager. Outre le fait de s’intégrer à merveille à l’interface d’administration, il présente comme principal avantage de vous permettre de programmer des tâches pour qu’elles s’exécutent automatiquement.

Concernant la fréquence d’optimisation, vous êtes libre de faire comme bon vous semble mais pour un blog mis à jour régulièrement, un nettoyage hebdomadaire semble être la meilleure option. En tout cas, c’est ainsi que je l’ai paramétré.

2.2. Installer un système de cache pour sa base de données :

De mon point de vue, la base de données est toujours le point faible d’un site et c’est d’autant plus vrai avec WordPress. Surtout si vous êtes hébergés sur un serveur mutualisé. C’est la raison pour laquelle il est nécessaire de faire en sorte de la solliciter le moins possible et c’est aussi la raison pour laquelle il est préférable d’installer un système de cache pour sa base de données.

Là encore, on trouve de nombreux plugins dédiés pour WordPress. Celui que j’utilise, c’est DB Cache. Configurable en un clic, il est à la fois très accessible et très simple à mettre en fonction. Entre autres choses, vous allez avoir la possibilité de paramétrer la durée du cache (par défaut, 5 minutes par requête) ou encore afficher des statistiques directement dans votre thème.

2.3. « Minifier » ses CSS et son Javascript :

L’autre point faible des sites web, ce sont les requêtes HTTP. Chaque image, chaque script, chaque fichier CSS entraine une requête lorsque la page charge. Et plus on a de requêtes, plus la page met du temps à charger. En diminuant le nombre de requêtes HTTP, vous gagnerez quelques précieuses secondes supplémentaires. Pour se faire, de nombreuses méthodes existent. Sur ce point, j’ai sans doute encore du travail à faire mais, pour le moment, je me suis contenté de compresser mes CSS et mon Javascript.

Pour se faire, certains optimisent directement leur serveur, d’autres passent par leur fichier .htaccess mais, en ce qui me concerne, j’ai préféré opter pour un plugin dédié : WP Minify. Ce dernier ajoute le moteur Minify a WordPress, le tout en quelques clics. Inutile de configurer votre serveur, la procédure est complètement automatisée (mais certaines options sont paramétrables par l’intermédiaire de l’interface d’administration).

Attention tout-de-même car si vous utilisez un thème personnel, WP Minify est susceptible de planter. Si vous rencontrez une erreur, je vous invite à récupérer le « header » du thème par défaut et de le coller dans votre propre thème (en l’adaptant si nécessaire).

2.4. Installer un « super » cache :

Si l’on parle de WordPress et de cache dans la même conversation, on pense immédiatement au plugin Super Cache. En effet, sur le sujet, ce dernier reste le plus connu, et pour cause… En effet, il va très loin en créant, pour chaque page, un fichier HTML. Lorsqu’un internaute vient sur votre site, c’est ce fameux fichier HTML qui sera appelé. Du coup, seul Apache sera utilisé pour afficher vos pages, votre base de données n’intervenant qu’en cas de mise à jour de votre contenu (publication d’un nouveau billet et/ou d’un nouveau commentaire).

Seul bémol, pour que Super Cache fonctionne correctement, il faut que votre hébergeur supporte la réécriture d’URL par l’intermédiaire du fichier .htaccess. A ce sujet, je vous conseille de bien lire toutes les informations présentes sur la page de configuration du plugin. Il vous faudra en effet mettre votre fichier .htaccess à jour pour que le cache fonctionne correctement.

En conclusion

Ces quelques astuces d’optimisation sont très loin d’être exhaustives mais elles présentent le mérite d’être compatibles avec tous les hébergeurs, du dédié au mutualisé en passant par le virtualisé. En préparant cet article, j’ai en effet effectué quelques recherches sur le web et la plupart des conseils glanés demandaient l’utilisation d’un serveur dédié. Évidemment, si vous avez d’autres astuces, n’hésitez pas à vous manifester dans les commentaires de ce billet.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

jQuery, présentation de la bibliothèque

Avant de vous présenter jQuery et de vous parler de son histoire, il est préférable de commencer par le début et de vous expliquer ce qu’est une bibliothèque. Il s’agit d’un ensemble d’outils et d’instructions permettant le développement rapide d’applications. Constituée de différentes « briques », elle propose ainsi de nombreuses fonctions destinées à faciliter le travail du développeur. Un bon moyen de ne pas perdre son temps en tout codant de zéro.

Le jQuery est donc une bibliothèque Javascript, ce qui signifie qu’elle est entièrement dédiée à ce langage et qu’elle a pour objectif de simplifier l’utilisation de certaines commandes. En effet, l’avènement du Web 2.0 a donné lieu à une véritable révolution en matière de développement web. Les sites ne se contentent ainsi plus de présenter de l’information, ils se doivent en effet de proposer une interface riche et une expérience utilisateur améliorée. C’est ainsi que l’on a vu apparaître de véritables webwares (ou applications web) finalement très proches des fonctions proposées par un logiciel traditionnel.

Pour en finir avec cette courte présentation, on ajoutera simplement que jQuery a vu le jour en 2006.

jQuery, l’installation

Bien que le terme soit assez mal choisi (on installe un programme, pas une bibliothèque), le fait est que nous allons devoir commencer par intégrer jQuery à notre site pour pouvoir profiter de toutes ses possibilités. La procédure à suivre est relativement simple. Pour commencer, il est nécessaire de se rendre sur le site officiel, http://www.jquery.com, et de télécharger notre bibliothèque, soit en version complète, soit en version compressée. Précisons juste que la différence entre ces deux versions est assez simple : la version compressée, légère mais illisible, convient aux sites en production alors que la version complète, plus lourde mais plus claire, vous permettra de mieux comprendre comment les choses se passent.

Une fois le fichier téléchargé, nous allons devoir le lier à notre site. Pour se faire, dans le code source de votre site, entre les balise <head> et </head>, nous allons simplement ajouter la ligne suivante :

1

<script src="VOTRE_FICHIER.js" type="text/javascript" />

Précisons que tous vos scripts Javascript devront nécessairement se situer après cette ligne. Sans cela, ils ne seront pas correctement interprétés. De la même manière, assurez-vous que le chemin indiqué est correct.

Tutoriel jQuery : écrire le squelette de notre boîte d’onglets

La première étape de notre tutoriel est relativement simple puisque nous allons devoir commencer par créer le squelette de notre boîte d’onglets et donc définir sa structure HTML ainsi que ses CSS. Pour se faire, vous aurez besoin d’un minimum de connaissances en la matière.

Etape 1 : la structure HTML

Notre boîte d’onglets sera constituée de plusieurs éléments. Nous aurons tout d’abord une liste horizontale comprenant nos trois onglets dotés d’un ID unique. En dessous, nous aurons trois DIV portant chacun un ID unique aussi. Globalement, votre code devrait ressembler à ça :

1
2
3
4
5
6
7
8

<ul id="cap_nav">
<li id="tab_1" class="cap_onglet cap_active" title="content_1">Onglet 1</li>
<li id="tab_2" class="cap_onglet" title="content_2">Onglet 2</li>
<li id="tab_3" class="cap_onglet" title="content_3">Onglet 3</li>
</ul>
<div id="content_1" class="cap_content">Content 1</div>
<div id="content_2" class="cap_content">Content 2</div>
<div id="content_3" class="cap_content">Content 3</div>

Dans un premier temps, je vous recommande de ne pas faire de fioritures. Une fois que vous aurez vérifié le bon fonctionnement de votre boîte à onglets, vous pourrez commencer à les personnaliser. Avoir une structure simplifiée et épurée vous permettra de résoudre plus facilement les éventuels bogues que vous pourriez rencontrer.

Précisons également que tous nos onglets portent la classe « cap_onglet » mais que nous avons ajouté la classe « cap_active » au premier pour qu’il soit affiché par défaut.

Etape 2 : les CSS

Là encore, afin de conserver une certaine lisibilité (et donc vous faciliter les choses), le morceau de code qui suit ne comporte aucune fioriture, uniquement les propriétés indispensables pour que notre boîte d’onglets puisse fonctionner dans de bonnes conditions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.cap_onglet, .cap_active {
cursor : pointer;
display : block;
float : left;
}
 
.cap_onglet {
color:#863486;
}
 
.cap_active {
color : #fff;
}
 
div#content_2, div#content_3 {
display :none;
}

Plusieurs choses à signaler ici. En premier lieu, on va utiliser deux classes pour les onglets : la classe   ».cap_onglet » et la classe « .cap_active ». Ainsi, nous pourrons modifier l’apparence de l’onglet actif (sur Weedle, ce dernier est noir). Même chose, nous ajoutons la propriété « cursor:pointer » dans un souci d’accessibilité : en passant leur curseur sur nos onglets, les internautes verront qu’ils peuvent cliquer dessus.

Enfin, par défaut, nos DIV « content_2″ et « content_3″ sont masqués. Ce n’est pas le cas de « content_1″ car il est affiché par défaut.

Tutoriel jQuery : écrire le script qui animera l’ensemble

En l’état, notre boîte d’onglets est complètement figée. Si nous cliquons sur l’un de ces derniers, rien ne se passe. C’est normal, car il manque encore une dernière étape, la plus complexe pour les néophytes : le script. Il faudra bien entendu le copier entre les balise <head> et </head>, juste après la ligne qui appelle le fichier jQuery.

Afin de le rendre plus clair pour vous, je l’ai commenté et nous allons ensuite l’expliquer en détails.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script text="text/javascript">
$(document).ready(  function() {
    	// Lorsqu'on clique sur un onglet
        $("li.cap_onglet").click(   function () {
            // On les met tous en inactif
            $(".cap_active").removeClass("cap_active");
 
            // On met l'onglet cliqué en actif
            $(this).addClass("cap_active");
 
            // On cache toutes les boîtes de contenu
            $(".cap_content").slideUp();
 
            // On affiche la boîte de contenu liée à notre onglet
            var contenu_aff = $(this).attr("title");
            	$("#" + contenu_aff).slideDown();
        });
</script>

Dans un premier temps, on attend la fin du chargement de la page (ce qui correspond à la première ligne de notre script). Ensuite, on appelle tous les onglets possédant la classe « cap_onglet ». Les lignes qui suivent ne concerneront que ces derniers.

On commence par retirer la classe « cap_active » à tous les onglets, puis on l’ajoute à celui sur lequel on vient de cliquer afin de changer son apparence. On enchaine ensuite en cachant toutes les boîtes de contenu (c’est le fameux « slideUp ») et on termine en déroulant uniquement la boîte liée à l’onglet sur lequel on vient de cliquer (le « slideDown »).

Petite précision à ce sujet. Pour trouver la boîte de contenu liée à l’onglet cliqué, on passe par le contenu de la balise « title » de ce dernier. Si vous regardez attentivement notre structure HTML, vous pourrez remarquer que tous les onglets possèdent un « title » unique qui n’est autre que l’ID du DIV rattaché.

Et pour aller plus loin

En l’état, nos onglets fonctionnent parfaitement mais il reste encore beaucoup de choses à faire, notamment au niveau des CSS de chaque élément. J’aurais pu y consacrer une rubrique dans cet article mais j’ai préféré me concentrer sur l’essentiel et ce sera donc à vous de compléter ce point.

En revanche, jQuery propose de nombreux autres effets que le « slideUp » ou le « slideDown ». Si ces derniers ne vous conviennent pas, ou si vous souhaitez en expérimenter d’autres, il suffit de vous reporter à la liste du site officiel. Au passage, vous trouverez également à cette adresse une documentation complète pour aller un peu plus loin.

Bien évidemment, je ne manquerai pas de vous proposer d’autres tutoriels sur le sujet dans les semaines qui viennent. En tout cas, j’espère que celui-ci vous aidera à mieux comprendre le fonctionnement de la bibliothèque.

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

1. Un bouton style Windows Vista

Depuis sa sortie, et comme pour la plupart des O.S de la firme de Redmond, Windows Vista a inspiré nombre de designers. C’est la raison pour laquelle on trouve aujourd’hui de nombreux sets d’icônes inspirés par le style de ce système d’exploitation. Les menus ne dérogent pas à la règle, comme le prouve ce tutoriel très bien réalisé.

2. Un menu inspiré de Windows Vista (encore)

Encore un menu inspiré de Windows Vista, mais un peu plus détaillé que le précédent. On remarquera d’ailleurs le fond du menu, qui a subit de nombreux effets de transparence et qui fait ressortir le système de navigation proposé.

3. Un bouton mat et minimaliste

Très complet, ce tutoriel vous apprendra à travailler aussi bien sous Photoshop qu’au niveau des CSS. Vous apprendrez ainsi à créer une image, à l’affecter à un bouton et à la déplacer suivant l’état de la souris de l’internaute. Précisons également que Six Revision propose une archive complète contenant l’image, bien sûr, mais aussi le PSD et les CSS de l’exercice.

4. Un menu « plastique »

Certains webdesigners aiment s’inspirer de matériaux pour construire leurs systèmes de navigation. Avec ce tutoriel, vous apprendrez à réaliser un menu type « plastique ». Au passage, je vous conseille d’en profiter pour jeter un coup d’oeil à la charte graphique du site source, qui est vraiment magnifique.

5. Des boutons « glossy »

Si l’on devait citer deux grandes tendances « web 2.0″, ce serait sans doute les reflets et les effets d’ombre. Tant mieux, car c’est justement ce que va vous faire travailler ce tutoriel. A conseiller à tous ceux qui ne sont pas très familiers des effets de calque.

6. Un menu noir et bleu

Un peu plus conventionnel, ce tutoriel permettra de vous familiariser avec les effets de volume et de lumière. Là encore, il s’agit d’effets incontournables dont il devient de plus en plus difficile de se passer.

7. Un menu minimaliste

Parfois, la simplicité paie. Ce menu blanc et fin pourra s’intégrer à la plupart des chartes graphiques. L’inconvénient de ce genre de menus, c’est qu’ils se font parfois trop discret. Heureusement , le rollover bleu vous permettra d’attirer l’attention de vos visiteurs.

8. Un menu minimaliste et sombre

Pourquoi faire compliqué lorsqu’on peut faire simple ? Ce tutoriel, reposant sur 10 étapes seulement, vous permettra de réaliser un menu complet, minimaliste mais très agréable à l’oeil. A noter qu’il conviendra sans doute à tous les publics, y compris à ceux qui apprennent tout juste à maitriser Photoshop.

9. Un menu minimaliste blanc

Toujours dans le minimalisme et dans le discret, voici un autre menu tout en douceur qui ne vous laissera peut-être pas indifférent. Là encore, il s’agira de jouer avec les effets de dégradé et d’ombre, tout en prenant soin de choisir des couleurs adaptées et nuancées.

10. Un menu futuriste

Si ce genre de menus était très à la mode dans les années 90-2000, cela n’est plus vraiment le cas aujourd’hui. En revanche, ce tutoriel est surtout intéressant sur le plan technique puisqu’il vous permettra de vous familiariser avec les formes et certains effets de calque.

11. Un menu en trois dimensions

Si les menus figés et traditionnels vous déçoivent, alors ce tutoriel proposé par PSD Tuts risque de vous intéresser. En effet, il vous apprendra à utiliser les effets de dégradés, d’ombres et de lumières afin de rendre vos systèmes de navigation plus vivants et plus séduisants. Là encore, les techniques étudiées sont nombreuses et vous permettront d’approfondir votre connaissance de l’outil.

12. Un menu « aquarelle »

Là encore, le manuscrit, le « fait main » revient de plus en plus à la mode. Il n’est ainsi pas rare de voir des blogs opter pour ce style si particulier (je pense notamment aux blogs BD). Justement, durant ce tutoriel, vous apprendrez à fabriquer du papier et à l’intégrer au mieux au reste de votre charte. Et comme un bonheur ne vient jamais seul, le site source vous conseillera également l’une des plus belles polices écrites qui existe.

13. Un menu moderne noir

Là encore, ce menu fait partie de ce qui pouvait se faire dans les années 90-2000, avec quelques effets de reflet en plus. Cela dit, il n’en reste pas moins pertinent et le tutoriel proposé vous permettra, une fois de plus, de vous familiariser avec les effets de calque.

14. Un menu professionnel

Une entreprise ne peut pas tout se permettre, et c’est d’autant plus vrai sur le web. Tout en proposant un design agréable, séduisant et épuré, elle doit faire en sorte de ne pas choquer et de convenir à la plupart des publics. Ce que ce tutoriel vous propose, c’est justement ça : parvenir à réaliser un système de navigation agréable et professionnel.

15. Un menu futuriste

Aujourd’hui, en matière de web, il ne faut plus montrer, il faut suggérer. Ce que fait justement ce menu avec ses rollovers gros clair qui dénotent à peine du fond blanc du menu. Au passage, on remarquera que la police d’écriture utilisée occupe une place de choix puisqu’elle parvient à déterminer l’ambiance générale de la création. Avec une autre police, ce menu n’aurait pas eu l’air aussi futuriste.

16. Un menu tout en décorations

Si les techniques utilisées pour réaliser ce menu sont globalement les mêmes que pour les autres menus de cette sélection, ce tutoriel n’en reste pas moins très intéressant, notamment en ce qui concerne le travail effectué sur le fond. Malheureusement, ces étapes-là n’ont pas été très détaillées, il vous faudra donc faire preuve de patience et de rigueur pour obtenir ce résultat.

17. Un menu très « web 2.0″

Là encore, ce tutoriel vous permettra de jongler avec les différents effets de calques proposés par l’outil. Sans être inoubliable, l’effet produit est tout-de-même intéressant.

18. Un menu inspiré par Apple

Ce n’est un secret pour personne, les designers d’Apple ont toujours su faire parler d’eux. Ainsi, depuis ces dernières années, nous avons vu débarquer un bon nombre de tutoriels vous proposant de recréer le système de navigation du site officiel de la marque. Celui-ci en est un de plus.

19. Encore un menu inspiré par Apple

Bien que ce menu puisse paraître redondant une fois confronté au quatorzième menu présenté dans cette sélection, on comprend vite qu’il n’en est rien. En effet, celui-ci avait pour objectif de reproduire le menu proposé sur le site officiel de la marque. Il en reprend donc le logo, la police ainsi que la présentation générale et constitue un bon moyen d’éduquer son oeil.

20. Un menu inspiré de la Wii

Cette fois, c’est de Nintendo dont s’est inspiré le concepteur de ce tutoriel très élaboré qui vous propose de reproduire le même menu de la Wii. Très détaillé, il vous apprendra à utiliser conjointement toutes les techniques vues pendant les tutoriels de cette sélection. Au passage, on remarquera l’effet de lumière bleue sur la gauche, qui est vraiment magnifique.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

C’est une bonne nouvelle pour pas mal de gens, Internet Explorer 6 est en train de vivre ses derniers jours. Il aura fallu attendre plusieurs années mais une nouvelle page est donc actuellement en train de se tourner. Oui, mais de nombreux internautes continuent encore d’utiliser ce navigateur vétuste et c’est la raison pour laquelle j’ai décidé de lister les différents « hacks » que je connais (et que j’ai souvent utilisé) pour ce navigateur.

1. Les hacks CSS pour Internet Explorer 6

Pour commencer, nous allons nous intéresser à quelques règles CSS qui vont nous permettre de choisir les propriétés à interpréter selon le navigateur utilisé. Cela peut vous paraître confus, mais nous allons voir qu’il n’en est rien. En réalité, nous allons jouer avec les défauts intrinsèques d’Internet Explorer 6 afin de le prendre à son propre piège.

1.1. La règle « !important » :

Cette règle peut s’appliquer à toutes les propriétés CSS. Globalement, une propriété accompagnée de la règle « !important » ne sera pas interprétée par Internet Explorer 6, uniquement par les autres navigateurs du marché. En la jouant finement, il est donc possible de rendre certaines propriétés invisibles aux yeux de ces derniers et donc de régler la plupart des bogues honteux du navigateur de Microsoft. L’exemple suivant vous permettra de mieux comprendre ce dont je parle :

div#mon_calque {
background-color:blue !important; background-color:green;
}

Dans cet exemple, nous définissons deux couleurs de fond pour notre calque. Dans ce cas, puisque Internet Explorer 6 est incapable de comprendre la règle « !important », il affichera un fond vert. Les autres navigateurs, eux, afficheront un fond bleu. En jouant avec les propriétés CSS les plus problématiques (je pense notamment aux « padding » et « margin »), il sera donc possible de résoudre la plupart des erreurs d’interprétation d’Internet Explorer 6.

Note : Il est aussi possible de noter « !background-color:green; » à la place de « background-color:green; !important » mais il faut savoir que seule cette dernière expression est valide W3C.

1.2. Le hack * html :

Toujours dans le même ordre d’idée, Internet Explorer 6 est totalement incapable de comprendre le marqueur « * ». Pour les autres navigateurs, il pointera tous les éléments se trouvant au-dessus de la balise « html ». Comme il n’y en a pas, les propriétés se trouvant à cet endroit ne seront pas interprétés. Internet Explorer 6, quant à lui, se laissera prendre au piège et interprétera donc tout ce qui se situera à cet endroit. Là encore, je vous propose l’exemple suivant :

* html body { background-color:blue; }
html body { background-color:green; }

Une fois de plus, nous avons défini deux couleurs de fond. Sachant que Internet Explorer 6 est incapable de comprendre le marqueur « * », il affichera la couleur bleue pour notre page. Les autres navigateurs, quant à lui, l’afficheront en vert.

1.3. Le hack underscore :

Même principe, il est également possible d’utiliser des caractères spéciaux pour rattacher des propriétés CSS à un navigateur spécifique. On notera d’ailleurs que cette méthode fonctionne aussi bien pour Firefox que pour Internet Explorer 6 ou encore Internet Explorer 7. L’exemple suivant parle de lui-même :

div#mon_calque {
width:400px; height:250px; margin:0 0; padding:0 0;
background-color:red; /* Pour tous les navigateurs */
/background-color:blue; /* Pour IE 7 seulement */
_background-color:green; /* pour IE6 seulement */
}

Note : Il est également possible d’utiliser ce « hack » pour Internet Explorer 7. En revanche, il faudra écrire « *+html {} » à la place de « * html {} ».

En jouant avec ces deux méthodes, il est possible de corriger la plupart des erreurs d’affichage d’Internet Explorer 6. Cela dit, si les CSS sont relativement puissantes, il arrive parfois qu’elles ne soient d’aucun secours. C’est la raison pour laquelle nous allons à présent nous intéresser aux « hacks » HTML.

2. Les hacks HTML pour Internet Explorer 6

Les astuces HTML pour Internet Explorer 6 fonctionnent sur le même modèle que les astuces CSS. Il s’agira en effet de faire en sorte qu’une partie de notre code ne soit compréhensible que de ce dernier, et pas des autres. Pour se faire, il existe plusieurs méthodes mais, la plus connue d’entre elles, c’est le commentaire conditionnel.

2.1. Le commentaire conditionnel :

Le commentaire conditionnel n’est pas vraiment un « hack », il s’agit plutôt d’un commentaire spécial qu’Internet Explorer 6 va interpréter volontairement. C’est à croire que les développeurs du programme avaient prévu le coup. Ces commentaires vont en effet nous permettre de faire passer du code qui ne sera compris que de leur navigateur. Là encore, un exemple vaut mieux que mille discours :

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

Concrètement, cet exemple nous permet de définir une feuille de style spécifique pour Internet Explorer 6 et une autre feuille de style spécifique pour les autres navigateurs du marché. Attention par contre, parce qu’il est nécessaire d’appeler d’abord la feuille de style générale et ensuite la feuille de style pour IE.

Note : Il est possible d’utiliser les commentaires conditionnels pour les différentes versions d’Internet Explorer. Un « <!–[if IE 6]><![endif]–> » visera exclusivement Internet Explorer 6 alors qu’un « <!–[if IE 7]><![endif]–> » visera plutôt Internet Explorer 7.

2.2. La transparence PNG :

Là encore, il s’agit d’un bug auquel nous avons tous été confronté au moins une fois dans nos vies de développeur. Si tous les navigateurs sont capables d’interpréter la transparence des images au format PNG, il n’en est rien pour Internet Explorer 6 qui n’y entend rien du tout. Heureusement pour nous, il existe une méthode éprouvée (HTML+CSS)  qui nous simplifie grandement la vie.

Pour la partie HTML, à mettre dans le header de votre page :

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

Et dans votre fichier « style_png_fix.css » :

* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src="transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Pour avoir déjà essayé plusieurs solutions, cette dernière reste à mon sens la plus simple et la moins hasardeuse à mettre en place. Cela dit, en ce qui me concerne, je préfère tout simplement éviter les PNG transparents et m’assurer que mes images conviennent à tous les navigateurs du marché. C’est sans doute un peu plus long (on s’arrache parfois les cheveux) mais ça évite les mauvaises surprises.

Pour conclure, on peut rappeler que cette liste n’est certainement pas exhaustive mais que ce sont des astuces éprouvées qui m’ont souvent sauvé la vie. Alors bien sûr, les développeurs se posent pas mal de questions sur le sujet. Certains se demandent même s’il n’est pas préférable de ne pas se préoccuper d’Internet Explorer 6 afin de pousser les internautes à changer, ou mettre à jour, leur navigateur. En ce qui me concerne, je sais au moins une chose : lorsqu’on bosse sur un projet pour un client, on ne peut pas se permettre de se poser ce genre de questions. Le client paye pour un site, il faut donc s’assurer qu’il s’affiche de la même manière quel que soit le navigateur utilisé.

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

D’après différentes études très sérieuses, il semblerait qu’une image retienne mieux l’attention des internautes que du texte. Et c’est sans doute la raison pour laquelle les blogueurs ont de plus en plus tendance à présenter la liste de leurs derniers billets sous la forme de miniatures cliquables. Ce n’est pas le cas de mon autre blog (la Fredzone pour ceux qui ne suivent pas) mais on le retrouve sur pas mal d’autres blogs, tels Fubiz ou encore Nowhere Else (sur les tests de produits). Une tendance qui nous vient tout droit des Etats-Unis et qui commence à s’étendre à travers la blogosphère francophone.

Mais en dehors de l’affichage des derniers billets, les miniatures (ou vignettes) sont également intéressantes lorsqu’on opte pour un thème dit « magazine ». Là encore, on ne peut pas se contenter d’afficher les premières lignes de ses billets. Afin de donner envie aux internautes de les lire, il est préférable de les accompagner d’une image pertinente.

Pour mettre en place ces vignettes, de nombreux blogueurs optent pour les champs personnalisés. Si cette solution reste relativement souple, elle nécessite toutefois un effort constant de la part du blogueur qui devra indiquer, en dur, le chemin de l’image à intégrer, pour chacun de ses billets. Pouvoir afficher des miniatures de manière automatique représente donc un gain de temps non négligeable et c’est la raison pour laquelle j’ai préféré opter pour cette solution.

En la matière, pas mal de scripts existent. Celui que j’ai utilisé n’est pas de mon fait, je l’ai simplement trouvé sur un sujet des forums du support WordPress. Son point fort réside en le fait qu’il ira directement chercher la première image des billets de votre choix et que le redimensionnement se fera ensuite en HTML pur. En quelques secondes, vous pourrez donc l’adapter à n’importe quel thème et apporter toutes les modifications de votre choix sans perdre de temps. Pour le déployer sur votre propre thème, c’est simple, il suffit de suivre les étapes suivantes :

1. Création de la fonction

Tout va commencer par la création de la fonction que vous pourrez ensuite appeler où bon vous semble dans votre thème WordPress. La procédure est relativement simple, il suffit de créer le fichier « functions.php » dans le dossier de votre thème et d’y coller le code suivant :

function get_first_image($lookthat) {
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('', $lookthat, $matches);
$first_img = $matches[1][0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
echo $first_img;
}

Comme je l’ai déjà précisé, cette fonction ira automatiquement chercher la première image du billet. Dans le cas où il n’y en aurait pas, alors elle chargera à la place l’image dont la source est indiquée dans la variable « $first_img ».

2. Appel de la fonction

Là encore, rien de très compliqué. Une fois votre fonction créée et enregistrée, il vous suffira de saisir les quelques lignes suivantes pour l’appeler à n’importe quel endroit de votre thème. Précisons également qu’il est possible d’utiliser cette fonction dans une boucle et à plusieurs endroits différents de vos pages :

<?php
        // On appelle les "x" derniers billets
	global $post;
	$myposts = get_posts('numberposts=6&orderby=post_date&order=DESC');
	foreach($myposts as $post) :
?>
// On affiche les "x" derniers billets
<a title="<?php the_title();?>;" rel="bookmark" href="<?php the_permalink(); ?>;">
<img style="border: 3px solid #2d2d2d;" src="<?php get_first_image($post-&gt;post_content);?>;" alt="" width="140px" height="91px" />
</a>

Le morceau de code précédent est suffisamment simple pour ne pas avoir besoin d’être expliqué. On peut juste remarquer que la fonction « get_first_image » est appelée directement au niveau de la balise « img » et que cette dernière contient également la largeur et la hauteur imposée (respectivement « width » et « height »). Libre à vous de les modifier comme bon vous semble pour adapter ces vignettes à votre propre thème.

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.