Séquence nostalgie : Mon tout premier site Internet

Khaos Farbauti Ibn Oblivion — Fri, 01 Aug 2008 07:37:00 +0200

J'arpentais négligemment la Toile à la recherche de mes réalisations passées lorsque soudain une illumination impromptue m'a frappée.

Après divers "Diantre", "Saperlipopette" et autres "Nom de Moi de nom de Moi", j'ai effectivement réalisé qu'étant désormais mon propre hébergeur, je disposais d'un espace tout trouvé pour entreposer mes antiques productions, bien à l'abri d'éventuelles explosions de recoins obscurs du réseau.

J'ai donc aussitôt rapatrié mon tout premier site Internet (qui, aux dernières nouvelles, était hébergé chez "Chez", c'est vous dire s'il est vieux) au sein du joyeux bordel qu'est le chaosklub.com.

Il s'appelle DarkTooney's Lair et je vous préviens tout de suite si vous ne l'avez jamais vu, il est très... euh... "vintage"

Si vous êtes courageux vous trouverez même quelques infos bonus sur moi-même.

Guide d'optimisation des blogs Dotclear 2 (partie 3)

Khaos Farbauti Ibn Oblivion — Wed, 23 Jul 2008 07:05:00 +0200

Et voici la troisième (et théoriquement dernière) partie de mon guide d'optimisation des blogs Dotclear 2 (seconde partie)

Les 3 nouvelles techniques décrites ci-dessous apporteront la petite touche finale qui vous permettra de gagner les quelques secondes supplémentaires qui transformeront votre blog en véritable bijou de rapidité.

Comme à chaque fois, je vous recommande de mesurer systématiquement les résultats obtenus en appliquant ces techniques d'optimisation afin de ne conserver que celles véritablement adaptées à votre blog.

Technique n°7 : Utiliser des sprites

Comme nous l'avons vu dans la première partie de ce guide, ce sont généralement les images qui impactent le plus le temps de chargement. Il est donc nécessaire d'en réduire le nombre et la taille au maximum.

Mais on se retrouve parfois obligé d'utiliser beaucoup d'images pour de simples raisons esthétiques et fonctionnelles (par exemple sur mon blog, les smileys en bas et les icônes "Partager" dans le menu)

Il est alors temps de passer aux sprites. Le concept est tout simple, il s'agit de regrouper plusieurs images en une seule. Puis, la partie un peu plus complexe, de n'afficher que la partie de l'image globale qui nous intéresse au bon endroit.

Pour vous donner un exemple concret, les icônes de ma section "Partager" ne sont en fait qu'une seule et même image. J'utilise ensuite le code css pour la découper en morceau et n'afficher que les morceaux qui m'intéressent.

Alors pourquoi est-ce que les sprites améliorent la vitesse ? Et bien regardons, en simplifiant, ce qui se passe si l'on affiche une page avec 10 images :

Le navigateur va d'abord rechercher l'image 1 (temps 1), puis la télécharge (temps 2), puis l'affiche (temps 3), puis il va chercher la deuxième image (temps 4), la télécharge (temps 5), l'affiche (temps 6), etc... jusqu'à la dixième

Maintenant si, au lieu des 10 images, on utilise une seule image contenant 10 sprites, le navigateur va rechercher l'image (temps 1), puis la télécharge (temps 2), puis l'affiche (temps 3)... et c'est tout ! On réduit donc de manière significative les temps de recherche et d'affichage.

Par ailleurs, il y a un effet "bonus" : lorsqu'on regroupe plusieurs images en une seule, en règle générale, l'image globale a une taille (en octets) inférieure à la somme des images d'origine. On économise donc également sur le temps de téléchargement.

Voilà pour la théorie, passons à la pratique. Comme tout le monde préfère les choses simples, il existe des outils pour mettre en place facilement des sprites. Notamment CSS Sprite Generator

C'est en anglais mais le mode d'emploi n'est pas compliqué : vous réunissez toutes vos images dans un fichier zip que vous indiquez dans la case "Upload Images (ZIP)" du site puis vous appuyez sur le bouton "Create Sprite Image & CSS" tout en bas (vous pouvez laisser les options par défaut le temps de vous familiariser avec l'outil)

Vous obtenez alors une image au format PNG, optimisée, regroupant toutes vos images. Ainsi que le code css à utiliser dans votre feuille de style et voilà !

Technique n°8 : Le flush

Pour se reposer de la technique précédente assez complexe, en voici une autre dont l'impact est minime mais très simple à mettre en place.

Ouvrez vos fichiers de template dotclear 2 (home.html, post.html, archive.html, etc...) et insérez

<?php flush(); ?>

juste après la balise "</head>" (et donc juste avant "<body")

Voilà c'est tout !

Grâce à cette commande, on demande au navigateur d'afficher la page "tout de suite" sans attendre la fin du téléchargement. Le résultat varie selon les navigateurs mais permet de diminuer le temps d'attente perçu par l'utilisateur. (c'est à dire le temps durant lequel, il ne s'affiche rien dans le navigateur)

Technique n°9 : Encore plus vite pour les habitués

Les navigateurs Internet utilisent un système appelé "cache" pour vous permettre d'accéder plus vite à vos sites habituels. Le principe est simple : lorsque vous vous connectez une première à un site, les composants de ce site sont stockés sur votre ordinateur. Ensuite lorsque vous retournez sur cette page, au lieu de re-télécharger tous les composants, il suffit de prendre ceux stockés localement sur votre ordinateur, ce qui est beaucoup plus rapide.

Le problème c'est que, pour qu'un cache soit efficace, il doit être capable de déterminer les composants qui ne changent pratiquement jamais (et qu'on peut donc tranquillement mettre en cache) et ceux qui au contraire change sans arrêt (qu'il ne faut donc surtout pas mettre dans le cache)

Afin d'optimiser l'affichage de votre blog Dotclear 2 pour vos visiteurs, il peut donc être utile de définir vous-même ce qui doit ou ne doit pas être mis en cache.

Pour cela il suffit d'éditer le fichier ".htaccess" qui se trouve à la racine de votre installation dotclear 2 et d'y ajouter les lignes suivantes :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</IfModule>

Dans cet exemple, on indique que globalement les images (gif, jpeg, png) ne change quasiment jamais (donc on peut tranquillement les mettre longtemps en cache). Les feuilles de styles (css) ne change pas beaucoup non plus (évitez cette ligne si vous changez de thème tous les jours). Le javascript évolue peu lui aussi (dans mon exemple, il évolue néanmoins plus souvent que les feuilles de styles). Et enfin, dans cet exemple, les fichiers html ne sont jamais mis en cache. (C'est préférable sur un blog afin de toujours bien afficher les nouveaux commentaires ou les nouveaux billets).

Il ne vous reste plus qu'à adapter cet exemple en fonction de vos besoins.

Ainsi s'achève mon guide d'optimisation, j'espère qu'il vous aura été utile et que votre blog sera désormais plus rapide que jamais !

Que la paix soit avec vous.

(Partie 1)(Partie 2)

Tapez-moi dessus

Khaos Farbauti Ibn Oblivion — Thu, 17 Jul 2008 07:20:00 +0200

Non il ne s'agit pas du retour du bon vieux concours d'insultes d'antant mais d'un site bien sympathique que m'a fait découvrir Iceman.
C'est fun, c'est beau, c'est simple... bref, c'est le site idéal pour ne pas bosser au boulot (Mais pour quand même bosser un peu et garder son emploi)

Venez donc tâter de mes poings sur La Brute et tenter (en vain) de me mettre la pâtée !

Votre mot de passe est-il vraiment bien choisi ?

Khaos Farbauti Ibn Oblivion — Thu, 10 Jul 2008 17:53:00 +0200

De nos jours, un bon mot de passe est indispensable pour ne pas voir Kevin le Hacker et sa bande débarquer au beau milieu de votre messagerie avec leur pieds tout sale de jeunes et distribuer vos photos/sextapes personnelles partout sur Internet.

Seulement voilà, un bon mot de passe c'est quoi ?

Et bien pour répondre de manière simple à la question, il existe un outil sympathique sur Internet : le Password Strength Checker
C'est en anglais mais le fonctionnement est tout simple. Vous écrivez un mot de passe dans la case prévue à cette effet et, hop, la force de celui-ci est alors indiqué comme par magie.

Les plus curieux pourront alors regarder les croix rouges indiquées en dessous pour trouver quelques pistes d'amélioration.

Ainsi vous apprendrez que "roberta", le prénom de votre femme, est un mot de passe fort mauvais alors que "R7èk,1&p" est un très bon choix. (Sauf s'il s'agit du petit nom affectueux de votre chien, dont la photo dédicacée se trouve en évidence sur votre bureau)