Weedle » Tutoriels

Comment activer WordPress MU dans WordPress 3.0

Fred — Thu, 15 Jul 2010 16:33:04 +0000

Comme chacun le sait, WordPress 3.0 apporte de nombreuses nouveautés parmi lesquelles nous pouvons citer l’intégration de WordPress MU. Cela étant dit, le mode multisite de la dernière mouture de WordPress n’est pas activé par défaut, ce qui ne manquera pas d’en dérouter certains. Il est ainsi nécessaire de suivre une procédure relativement simple bien que fortement méconnue afin d’activer ce mode et tout se trouve justement dans la suite de l’article. Si vous souhaitez pouvoir gérer facilement plusieurs blogs WordPress, vous savez donc ce qu’il vous reste à faire.

Les étapes à suivre pour activer WordPress MU dans WordPress 3.0 ne sont guère compliquées mais il est toutefois préférable de commencer par faire une sauvegarde complète de votre site avant de commencer.

Téléchargez et installez WordPress 3.0 ou bien procédez à la mise à jour de votre installation.
Ouvrez le fichier wp-config.php dans n’importe quel éditeur de texte.
Dans le haut de ce fichier, ajoutez simplement define(‘WP_ALLOW_MULTISITE’, true);.
Sauvegardez votre fichier puis reconnectez-vous à votre WordPress.
Dans la colonne de gauche, allez dans le menu « Outils » puis dans « Network ».
Suivez simplement les instructions indiquées.
Reconnectez-vous à votre WordPress.
Dans la colonne de gauche, un menu « Super Admin » a fait son apparition.

Précisons que l’activation de WordPress MU modifie automatiquement tous les permaliens de votre site en ajoutant le préfixe « blog/ » à toutes vos adresses. Pour corriger ce problème, il suffit de suivre les étapes suivantes :

Connectez-vous à votre WordPress.
Ouvrez le menu « Super Admin ».
Cliquez sur « Sites » puis sur le lien modifier de votre site.
Dans les réglages du site, modifiez simplement la structure des permaliens.
Validez.

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.

Tutoriel : voir le trafic heure par heure sur Google Analytics

Fred — Sat, 03 Jul 2010 15:00:17 +0000

Google Analytics est un outil très puissant qui vous permet d’accéder à toutes les statistiques de votre site internet. On peut ainsi connaître le nombre de visiteurs ou de visites, bien sûr, mais aussi les navigateurs utilisés, les articles qui rencontrent le plus de succès et bien d’autres choses encore. Et justement, nous allons voir comment faire pour afficher le trafic heure par heure sur ce formidable outil.

Car en effet, les graphiques de fréquentation qui s’affichent par défaut sont relativement perfectibles et ne représentent que le trafic de la journée ou celui des jours précédents. Un bon moyen de savoir si notre site est fréquenté, certes, mais il peut aussi être très intéressant de voir le trafic heure par heure de la journée afin de connaître les tendances des visiteurs et d’adapter son infrastructure en fonction de cette donnée.

Pour se faire, il suffit de suivre les étapes suivantes :

Connectez-vous sur Google Analytics.
Cliquez sur l’option « visiteurs » dans le menu de gauche.
Cliquez sur « Visiteurs – Tendance » et sur « Visites » toujours dans ce même menu.
Dans la partie de droite, cliquez sur l’icône de l’heure (« Graphique par… »).
Et voilà !

A présent, il vous suffira de changer la date du jour ou de définir une période pour connaître les habitudes de vos lecteurs. Simple et efficace.

Tutoriel HTML : l’entête de la page

Fred — Wed, 07 Apr 2010 15:00:43 +0000

C’est la semaine dernière que nous avons commencé notre longue série de tutoriels dédiés au HTML. Et si vous l’avez suivi (ce que j’espère), alors vous devez normalement avoir installé un éditeur de texte sur votre machine. Tant mieux, parce que nous allons en avoir besoin aujourd’hui. En effet, pour cette semaine, nous allons nous intéresser à l’entête de la page, voir quel est son rôle et jeter les premiers jalons de notre futur site. Tout un programme, donc.

1. Le rôle de l’entête de la page

Je ne l’ai pas précisé lors de notre dernier tutoriel mais il faut savoir qu’un navigateur lit un fichier HTML de haut en bas. Si vous vous reportez à notre leçon de la semaine dernière et à la page que nous avions créé, alors cela signifie qu’il va lire l’entête de notre page juste après son DOCTYPE et juste avant son contenu.

Concrètement, donc, l’entête d’une page (délimité par les balises « » et « ») va fournir des informations sur le document au navigateur web. Ces dernières peuvent évidemment être de plusieurs sortes différentes et nous allons justement nous y intéresser tout au long de cet article. Entre autres choses, nous verrons donc ce que sont les balises META et comment ajouter des CSS et des scripts JAVASCRIPT à notre page.

2. Les balises META

Les balises META, connues également sous le nom de « meta tags », sont relativement importantes puisqu’elles vont donner des renseignements sur la page aux moteurs de recherche. Généralement, on les insère directement sous le titre de la page, délimité par les balises « »</em> et <em>« ».

2.1. Le rôle des balises META :

Alors attention car de nombreuses informations circulent au sujet des balises META et tout n’est pas exact. A l’origine, les balises META servait essentiellement au référencement et permettaient aux robots des moteurs de recherche de mieux cataloguer, ou indexer, les pages visitées. Désormais, ce n’est plus le cas puisque les robots prennent essentiellement en compte le contenu de la page ainsi que d’autres critères déterminants comme les liens entrants.

Cela dit, ce n’est pas pour autant que les balises META doivent être négligées. Bien au contraire, certaines d’entre elles sont tout simplement indispensables et vont même favoriser l’indexation de la page.

2.2. Les balises META liées au contenu de la page :

Comme nous allons le voir, les balises META liées au contenu de la page sont assez nombreuses. Elles ne sont pas toutes utiles mais on en trouve vraiment deux qui sont absolument nécessaires et qui doivent être uniques d’une page à une autre : le titre et la description.


<title>Le titre de ma page</title>
 

<meta name="description" content="une longue description de ma page" />

Autre balise importante, celle qui définit la table des caractères à utiliser. Indispensable si vous écrivez dans une autre langue et si vous souhaitez que des caractères exotiques soient correctement interprétés par le navigateur.

1 2	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Ensuite, on peut également citer la balise META dédiée aux mots-clés. Cette dernière est devenue nettement moins importante ces dernières années mais elle est encore utilisée par certains annuaires, voir même par certains moteurs.

1 2	<meta name="keywords" content="web,design,tutoriels,tous-mes-mots-clés..." />

Puisque l’on parle des annuaires, il ne faut pas non plus oublier la balise META liée à la catégorie du site. A noter qu’il est possible de faire passer plusieurs valeurs lorsqu’un site traite de thématiques diverses.

1 2	<meta name="category" content="développement,webmastering,toutes-mes-catégories" />

Comme vous le savez déjà, toutes les langues sont représentées sur le web. Et c’est pour cette raison qu’a été inventé la balise META dédiée aux langues. Cela dit, on notera qu’elle n’est plus prise en considération par les robots des moteurs de recherche qui se contentent le plus souvent d’examiner le contenu d’une page pour déterminer sa langue.

1 2	<meta name="language" content="fr" />

2.3. Les balises META liées à l’auteur de la page :

Une fois de plus, on trouve plusieurs balises META qui vont vous permettre de vous identifier en tant que personne auprès des moteurs de recherche. Très utiles, elles vous permettront de « signer » vos pages et d’indiquer votre copyright.


<meta name="author" content="Fred,Bob l'éponge" />
 

<meta name="copyright" content="Fred Inc & Co" />

Dans le même ordre d’idée, il existe également une balise META qui va vous permettre d’indiquer le nom de la personne qui publie le site.

1 2	<meta name="publisher" content="Fred" />

Si vous aimez qu’on vous écrive ou si vous avez envie de recevoir beaucoup de spams, vous pouvez également indiquer votre adresse mail dans une balise META dédiée. Autant dire qu’il vaut mieux l’éviter, hein…

1 2	<meta name="Reply-To" content="spamme@moi.com" />

2.4. Les balises META liées aux robots des moteurs de recherche :

Autre utilité des balises META, ces dernières vont vous permettre de dialoguer avec les robots des moteurs de recherche et même de leur donner quelques ordres. Oui mais ne vous faites pas une fausse joie, il n’est pas question d’améliorer le positionnement de son site. Ça, malheureusement, c’est à la seule discrétion du moteur de recherche.

Cela dit, vous pourrez par exemple autoriser ou interdire l’accès des robots à vos pages. Très pratique si vous ne souhaitez pas diffuser certains types de contenu.

1 2	<meta name="robots" content="all" />

De la même manière, vous pourrez indiquer aux robots le délai minimum souhaité entre chaque visite. Cela dit, il me faut vous préciser que la plupart des moteurs de recherche du moment n’en tiennent plus vraiment compte. Notamment Google, qui visite un site en fonction de la richesse et de la pertinence de son contenu (et qui indexe d’ailleurs certains sites en temps réel).

1 2	<meta name="revisit-after" content="30 days" />

Point intéressant, vous pouvez également autoriser ou interdire la mise en cache de vos pages à Google ou aux autres moteurs de recherche.


<meta name="googlebot" content="noarchive" />
 

<meta http-equiv="pragma" content="no-cache" />

2.5 Les autres balises META :

Si les balises META que nous venons de voir sont les plus courantes (ce qui ne veut pas dire qu’elles sont les plus utilisées), il en existe encore un certain nombre d’autres. Précisons cependant qu’elles ne sont pas utiles et que vous pouvez donc parfaitement vous en passer.


<meta http-equiv="refresh" content="10;url=http://www.monsite.fr" />
 

<meta name="identifier-url" content="www.monsite.fr" />
 

<meta name="generator" content="wordpress" />

3. Les CSS – Cascading Style Sheets

Comme nous le verrons à la prochaine leçon, les possibilités du HTML sont très limitées, notamment en matière de mise en forme. En effet, pour aller plus loin et avoir la main sur tous les éléments visuels d’une page, il est nécessaire d’utiliser conjointement les CSS. Ces dernières, de plus en plus puissantes, vont vous permettre de modifier facilement l’apparence de vos pages.

Justement, c’est dans l’entête de la page que nous allons avoir la possibilité de les déclarer et donc de les utiliser. Et ce de deux manières différentes, soit en les intégrant directement à l’entête, soit en spécifiant l’emplacement du fichier dans lequel elles seront stockées :


<style type="text/css">
body {
margin: 0;
padding: 0;
background: #000;
}
</style>
 

<link rel="stylesheet" href="chemin-de-mon-fichier/style.css" type="text/css" media="screen" />

Note : Bien évidemment, à ce stade de notre leçon, nous n’irons pas beaucoup plus loin. Pour le moment, je préfère en effet que vous vous concentriez sur le HTML et rien que sur le HTML. En revanche, une fois que nous serons venus à bout de tous nos leçons sur le sujet, nous commencerons à nous intéresser aux CSS qui feront également l’objet de tutoriels dédiés.

4. Les scripts Javascript :

Si le HTML et les CSS permettent de faire de beaux sites, c’est le Javascript qui va pouvoir leur apporter un peu de dynamisme. Oui et là, je raisonne essentiellement en terme de web design, puisqu’il existe à côté d’autres langages comme le PHP ou l’ASP qui vont nous permettre de travailler sur le contenu et d’automatiser certaines tâches.

Et là encore, c’est dans l’entête de la page que nous allons pouvoir déclarer et utiliser nos scripts. Une fois de plus, deux solutions existent, on peut soit les intégrer directement à l’entête, soit spécifier le chemin du fichier externe dans lequel ils sont stockés.


<script language="Javascript">

</script>
 

<script src="chemin-de-mon-script/script.js" type="text/javascript"></script>

Note : Et tout comme pour les CSS, nous en resterons là avec le Javascript. Précisons juste que ce dernier a énormément évolué ces dernières années et qu’il prend de plus en plus d’importance dans la vie d’un développeur, notamment au travers de librairies dédiées comme jQuery ou Mootools. Oui et bien évidemment, nous serons amenés à en reparler dans les semaines qui viennent.

5. En conclusion

Et voilà, c’est finalement tout ce qu’il y a à dire sur l’entête d’une page. Si vous avez suivi cette leçon jusqu’au bout, alors vous devez désormais comprendre son importance. Car en effet, si c’est le contenu d’un site qui fera sa pertinence, ce sont tous les éléments que l’on peut ajouter à son entête qui feront sa richesse.

Dans notre prochaine leçon, nous rentrerons dans le vif du sujet et nous nous intéresseront à toutes les balises qui vont nous permettre de structurer le contenu de notre page.

Tutoriel HTML : la structure d’une page

Fred — Tue, 30 Mar 2010 16:00:26 +0000

Créer des sites internet, c’est un vrai métier. Et comme tous les métiers, celui-ci nécessite certaines connaissances techniques. Et à la base, nous trouvons le HTML. Afin de vous permettre de mieux comprendre comment sont structurés les sites web et pour que vous puissiez apprendre à en faire, j’ai donc décidé de publier une série de tutoriels sur le sujet. Et pour commencer, nous allons nous intéresser à la structure d’une page HTML.

1. Qu’est ce que le HTML ?

Avant de passer au vif du sujet, nous allons quand même prendre le temps d’expliquer ce qu’est le HTML. Ce dernier a donc été inventé en 1990 par un scientifique portant le nom de Tim Berners-Lee. Ce dernier souhaitait faciliter les échanges entre les scientifiques de différentes universités. Il ne savait pas, à l’époque, que le HTML allait donner vie à internet.

Le HyperText Markup Language est donc un format de données constitué de balises qui permet de structurer et de mettre en forme le contenu des pages web. Précisons enfin que ses différentes versions l’ont considérablement enrichi et qu’il est à utiliser conjointement aux CSS, JavaScript et PHP.

Pour ce tout premier tutoriel, nous allons nous intéresser aux bases, à savoir la structure d’une page. Puis, dans les tutoriels qui suivront, nous irons un peu plus loin et nous nous intéresserons aux différentes balises qu’il propose.

2. Comment coder en HTML ?

Pour coder en HTML, vous allez avoir besoin d’un éditeur de texte. Certes, il existe également des logiciels dédiés à la créations de sites web comme Dreamweaver mais ces derniers sont déconseillés. Car en effet, s’ils vous permettent de « dessiner » un site très facilement, ils ont souvent tendance à vous éloigner du code. Notons toutefois que ces outils là ont leurs défenseurs, dont je ne fais pas partie.

Bref, même s’il est tout à fait possible de se contenter du bloc note intégré à Windows (Démarrer > Tous les programmes > Accessoires > Bloc-Note), nous allons lui préférer des éditeurs un peu plus évolués comme Notepad++ (Windows), Smultron (Mac OS) ou Emacs (Linux).

Précisons qu’il existe de nombreux éditeurs et que ces derniers ne sont pas forcément les meilleurs, mais simplement ceux que j’utilise. Enfin à part Emacs.

3. La structure d’une page en HTML

Bon, maintenant que vous savez plus ou moins ce qu’est le HTML et que vous avez installé un éditeur de texte sur votre machine, nous allons pouvoir commencer à nous amuser et nous intéresser à la structure d’une page en HTML. Oui, et comme le mieux reste de partir d’un exemple, voilà à quoi ressemblerait une page vide :



      "http://www.w3.org/TR/html4/loose.dtd">
 

<html>
 

<head>
 

<title>Ma toute première page en HTML !!!</title>

 
</head>

 

<body>
 
     Ma première page HTML !
 
</body>

 
</html>

Comme vous pouvez le voir sur notre exemple, une page HTML est découpée en plusieurs « zones ». Ces dernières sont délimitées par des balises d’ouverture (« <html> ») et de fermeture (« html> »). Notons d’ailleurs que la plupart des balises doivent nécessairement être fermées. Quoi qu’il en soit, nous allons nous intéresser aux différentes zones de notre page.

3.1. HTML : le Document Type

1
2
3



      "http://www.w3.org/TR/html4/loose.dtd">

La première ligne de notre exemple, le DOCTYPE, est très importante puisque c’est elle qui renseigner le navigateur internet au sujet du type d’HTML que nous allons utiliser. Dans notre cas, il s’agit du HTML 4.01. Globalement, cette ligne est structurée de la façon suivante :

HTML PUBLIC »type de HTML » »adresse_de_DTD »>

Et là, vous devez sans doute vous demander ce qu’est le DTD. Et bien disons simplement qu’il donne l’adresse complète du « document type declaration » qui est un document centralisant toutes les propriétés de chaque élément, toutes les balises et tous les attributs de la version choisie du HTML.

3.2. HTML : la structure globale de la page


<html>
     ...
</html>

Après le DOCTYPE vient une première balise : <html>. Cette dernière marque le début de notre page. Concrètement, donc, tout ce que contiendront les pages HTML tiendront entre les balises <html> et html>. Autant dire que si vous mettez quelque chose en dehors de ces balises, alors votre navigateur ne l’interprètera pas.

3.3. HTML : l’entête de la page


<head>
     ...
</head>

Juste après notre première balise vient une autre balise : . Tout ce qui est compris entre cette dernière et sa balise de fermeture (« ») constitue l’entête de la page. Cette entête peut contenir beaucoup de choses, comme le titre de la page (cf rubrique suivante) ou encore toutes les balises META qui permettront aux moteurs de recherche de l’identifier.

Ajoutons d’ailleurs que vos CSS et vos scripts JavaScript seront également à ajouter à cet endroit. L’entête de la page fera également l’objet d’un tutoriel complet par la suite.

Pour simplifier, nous pouvons dire que l’entête de la page s’adresse essentiellement aux navigateurs internet et aux moteurs de recherche.

3.4. HTML : Le titre de la page

1
2
3


<title>Ma première page HTML !!!</title>

Dans l’entête se trouve une autre balise qui a également son importance : </strong>. Ici, c’est nettement plus simple puisque tout ce qui se trouve entre cette dernière et sa balise de fermeture <em>(« ») constitue le titre de la page. Titre de la page qui apparaitra ensuite tout au sommet de votre navigateur.

Précisons d’ailleurs que cette balise est indispensable et qu’il est préférable de soigner au maximum son contenu pour optimiser son référencement.

3.5. HTML : le corps de la page

1 2 3 4 5
<body> ... </body>

Après la balise de fermeture de l’entête se trouve une nouvelle balise : . Tout ce qui se trouvera entre cette dernière et sa balise de fermeture (« ») va constituer le contenu de notre page. On pourra y trouver des titres, du texte, des images, des listes, des tableaux et ainsi de suite.

Pour simplifier, nous pouvons dire que le corps de la page s’adresse essentiellement aux internautes. Bon, ce n’est pas tout à fait exact puisque les moteurs de recherche l’explorent en long, en large et en travers mais cette image sera plus facile à retenir si vous êtes débutant.

4. En conclusion :

Cet article plutôt court vous permettra de mieux comprendre ce qu’est une page HTML et surtout comment elle se structure. Bien évidemment, il reste encore beaucoup de travail à faire, nous n’en sommes qu’aux prémices, mais nous avons encore du temps pour nous intéresser aux autres aspects du HTML.

Notre prochain tutoriel traitera donc essentiellement de l’entête d’une page. Nous passerons ainsi en revue les différents éléments qui peuvent y figurer et nous verrons en détails à quoi ils servent. Afin de vous rendre la navigation plus aisée, j’ajouterai un lien à la fin de cet article lorsque le prochain tutoriel sera publié.

Leçon 1 : Tutoriel HTML, la structure d’une page

Leçon 2 : Tutoriel HTML, l’entête de la page

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.

EasySlider : un plugin jQuery pour réaliser des diaporamas

Fred — Wed, 24 Mar 2010 16:00:35 +0000

Depuis un moment déjà, le web a pris une toute nouvelle tournure. Les sites internet ont changé de visage, deviennent des webwares et l’interactivité est désormais une priorité pour tous les webmestres. Oui et ce changement s’est en grande partie fait grâce à l’avènement des nouvelles techniques de développement et de certaines librairies comme le jQuery. Pour continuer sur notre lancée, nous allons aujourd’hui nous intéresser à EasySlider, un plugin jQuery pour réaliser de chouettes diaporamas.

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 et et insérez les deux lignes suivantes :

1 2

Deux choses à noter :

Il est primordial d’intégrer EasySlider après jQuery. Si vous ne le faites pas, alors le script ne pourra pas fonctionner.

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

Mon premier slide

Mon second slide

Mon troisième slide

Mon quatrième slide

Mon cinquième slide

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 et 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

global $post; $myposts = get_posts('numberposts=5&orderby=post_date&order=DESC'); foreach($myposts as $post) : ?>
get_first_image($post->post_content); ?>)"> the_permalink(); ?>" class="diaporamatitre"> the_title(); ?>
endforeach; ?>

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.

CSS 3 : les effets de texte

Fred — Fri, 05 Mar 2010 16:00:09 +0000

C’est en 1999 que le développement des CSS 3 a débuté et aujourd’hui encore tous les navigateurs du marché ne sont pas capables de les interpréter. C’est d’autant plus regrettable que ces dernières apportent de nombreuses nouveautés très pratiques pour tous les webmestres. Oui même que nous allons justement nous intéresser aux effets de texte qui vous permettront de laisser Photoshop de côté.

Développer en CSS 3 est un choix qui appartient à chaque webmestre. Comme je l’ai dit un peu plus haut, tous les navigateurs du marché ne sont pas capables de les interpréter. Concrètement, si la plupart de ces derniers font de gros efforts, c’est encore et toujours Internet Explorer qui reste à la traîne. Même sa dernière version, Internet Explorer 8, n’est pas capable de gérer la plupart des nouvelles propriétés introduites par les CSS3.

Globalement, donc, il est préférable de ne pas baser tout son site sur les CSS 3. En revanche, ceux qui ont un vrai navigateur seront les premiers à en profiter et c’est finalement ça qui compte. Pour le reste, comme dirait l’autre, OSEF !

Le Word-Wrapping : la césure du texte

D’un certain sens, le texte est assez paradoxal. C’est l’élément le plus important d’un site (sans contenu, un site n’est rien) mais c’est aussi le plus difficile à mettre en forme. On doit choisir le bon contraste, c’est un fait, mais on doit également s’assurer de bien présenter ses paragraphes pour qu’ils soient aérés et qu’ils incitent nos visiteurs à passer un peu plus de temps chez nous.

En la matière, les propriétés CSS ne manquent pas. En dehors de l’éternel « text-align », on peut aussi citer le « letter-spacing » ou encore le « line-height » qui nous permettent de faire pas mal de choses. Cela dit, le vrai problème, ce sont les longs mots (ou les URL) qui ont tendance à semer la zizanie dans notre mise en page et l’objectif de la propriété « word-wrap » est justement de nous filer un coup de main :

1 2 3
p { word-wrap: break-word; }

Compatibilité :

Internet Explorer : à partir de la version 5.5

Opera : ?

Safari : à partir de la version 1.0

Firefox : à partir de la version 3.5

Chrome : ?

Web Fonts : toutes les polices que l’on aime

Les webmestres le savent, tous les navigateurs ne sont pas capables d’interpréter toutes les polices d’écriture. En réalité, ces dernières varient même selon le navigateur, bien sûr, mais aussi et surtout selon le système d’exploitation de l’internaute. On est donc souvent obligé de troquer notre chouette police ultra hyper qui rend super bien sur Photoshop avec des polices plus traditionnelles.

Bien entendu, des méthodes existent pour tromper le navigateur, comme de transformer certains éléments en images, mais les CSS 3 le permettent également grâce à la règle « @font-face » dont voici un exemple :

1 2 3 4
@font-face { font-family: 'Nom de ma police hype'; src: url('url de ma police hype'); }

Compatibilité :

Internet Explorer : Embedded OpenType uniquement

Opera : à partir de la version 10

Safari : à partir de la version 3.1

Firefox : à partir de la version 3.5

Chrome : ?

Text-Shadow : de l’ombré sur ses textes

En réalité, cette propriété a été introduite dans les CSS 2 mais je la compte quand même dans cette liste car je la trouve très orientée CSS 3. Elle permet ainsi d’ajouter un effet ombré à n’importe quel texte. On précisera en outre que l’effet est entièrement personnalisable et qu’il peut ainsi s’adapter à n’importe quelle charte.

1 2 3
.monelement { text-shadow: 2em 2em 0.2em red; }

C’est donc un bon moyen de mettre en valeur certains éléments de son texte et par conséquent d’attirer l’attention des internautes. Pour certains, ce n’est qu’un effet « gadget » mais vous aurez sans doute compris que je ne suis pas de ceux-là.

Compatibilité :

Internet Explorer : non

Opera : à partir de la version 9.5

Safari : à partir de la version 1.1

Firefox : à partir de la version 3.1 (ombres multiples à partir de la version 4.0)

Chrome : à partir de la version 1

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.

WordPress : intégrer Google Buzz à son blog

Fred — Mon, 15 Feb 2010 15:00:08 +0000

Cela n’aura sans doute échappé à personne, Google vient tout juste de lancer un service pour concurrencer Twitter et Facebook : Google Buzz. Et si j’en ai déjà beaucoup parlé sur la Fredzone, je me suis dit que ce serait intéressant de vous filer des méthodes pour l’intégrer à votre blog WordPress. Juste histoire de garder contact avec toute votre communauté.

Il n’aura pas fallu longtemps aux développeurs pour se jeter dans l’arène et proposer des plugins pour WordPress facilitant l’intégration de Google Buzz sur son blog. Notez bien que c’est une bonne chose, cela permettra sans doute au service de se faire de nouveaux adeptes.

1. Intégrer un bouton Google Buzz à ses articles

Permettre à ses lecteurs de partager leurs articles préférés sur les réseaux sociaux du moment, c’est un bon moyen de toucher un nouveau public. Oui et nous avions déjà consacré un article complet sur le sujet pour Twitter et il est donc normal que nous en fassions de même pour Google Buzz.

Pour ajouter un bouton de ce type, il suffit donc de télécharger et d’installer le plugin Google Buzz Button. Il vous permettra de placer automatiquement un bouton dans chacun de vos articles.

A noter que si vous préférez opter pour une intégration manuelle, alors il suffira de vous rendre sur la page de configuration du plugin, de le spécifier et d’ajouter à votre thème la ligne suivante à l’endroit précis où vous souhaitez insérer le bouton :

if ( function_exists( ‘add_google_buzz_button’ ) ) { add_google_buzz_button();} ?>

Précisons juste que cette ligne devra nécessairement être insérée dans la boucle de vos articles sur la page single.php.

2. Afficher ses Google Buzz sur son blog

Si vous observez attentivement la barre latérale de Weedle, alors vous verrez que le compte Twitter du site a été intégré. C’est une bonne manière pour moi de partager facilement de l’information puisque ma liste de partage Google Reader est automatiquement ajoutée à ce dernier.

Bien évidemment, il est possible d’en faire de même pour Google Buzz, et ce au travers d’un plugin dédié : Google Buzz ER.

Là encore, vous pouvez vous contenter de l’insérer directement dans les widgets de votre site mais il est également possible d’opter pour une intégration manuelle en insérer la ligne suivante à l’endroit de son choix :

GoogleBuzzEr(); ?>

Alors, qu’est ce que vous attendez pour vous rapprocher de vos lecteurs ?

Via Geekeries

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.

Quelques astuces pour optimiser WordPress

Fred — Sun, 24 Jan 2010 09:00:35 +0000

Créer son thème WordPress, ce n’est certes pas évident mais ce n’est pas non plus le plus difficile. Il suffit de quelques heures, et d’un peu de patience, pour intégrer son thème. En revanche, l’étape la plus délicate, à mon sens, c’est encore d’optimiser son thème afin qu’il s’affiche le plus vite possible sur le navigateur des internautes. Ces derniers n’étant pas très patients, il convient en effet de tout faire pour rendre leur séjour le plus agréable possible. Sans être exhaustive, cette liste d’astuces vous permettra de gagner quelques précieuses secondes.

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.

Tutoriel jQuery : créer une boîte d’onglets

Fred — Sat, 16 Jan 2010 09:00:39 +0000

Très populaire, le jQuery est utilisé par de nombreux développeurs pour la mise en place de leurs projets web. Et pour cause puisque cette bibliothèque Javascript facilite grandement les choses et permet de déployer facilement des effets saisissants. Une bonne manière d’améliorer l’interaction homme / machine et de donner un coup de fouet à l’expérience utilisateur proposée. Pour ce premier tutoriel sur le sujet, nous allons apprendre à réaliser facilement une boîte d’onglets du même genre que celles utilisées dans la barre latérale de Weedle.

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 et , 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 1li> <li id="tab_2" class="cap_onglet" title="content_2">Onglet 2li> <li id="tab_3" class="cap_onglet" title="content_3">Onglet 3li> ul> <div id="content_1" class="cap_content">Content 1div> <div id="content_2" class="cap_content">Content 2div> <div id="content_3" class="cap_content">Content 3div>

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 et , 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.

30+ tutoriels Photoshop pour des effets vintage

Fred — Mon, 11 Jan 2010 15:15:13 +0000

Parfois, la mode nous joue de drôles de tours et il arrive fréquemment que les styles les plus démodés finissent par revenir sur le devant de la scène. Le webdesign n’échappe évidemment pas à la règle et de nombreux créateurs s’inspirent des années passées pour leurs propres créations. C’est ainsi que j’ai décidé de vous sélectionner 30 tutoriels Photoshop pour vous apprendre à réaliser des effets « vintage ». Alors si vous recherchez un peu d’authenticité, vous savez ce qu’il vous reste à faire.

PSD TUTS

Abduzeedo

Tutorial9

PSHero

PSD Fan

DeviantArt

PSDFan

Computer Arts

Outlaw Design Blog

PVM Garage

DesignBlurb

Talk Mania

X24D

EyesOnTutorials

UBLTuts

Online Photoshop Tutorials

Worth1000

Vileworks

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.