Vous vous réveillez ce matin, vendredi 3 septembre 2010 et votre site sous SPIP (version 2.1) n’affiche plus aucun article ni aucune page. Pas de panique ! La faute est due à l’introduction d’un ENORME bug dans le core de spip, une erreur de calcul.

« Une date trop éloignée dans le futur se trouvant revenir à janvier 1901″.

Dans le fichier ecrire/public/quete.php, à la ligne 82, il faut simplement remplacer la valeur 10000 par 365*2 :

(time()+(3600*24*10000))) ; // Remplacer ici la valeur 10000
(time()+(3600*24*365*2))) ; // Par la valeur 365*2

Encore plus fort, le bug aurait été introduit de manière quasi volontaire :

D’après l’Oracle, la fin du monde aura lieu avant l’an 9999 puisque le 31 décembre de cette année n’existe pas. Puisqu’en peut donc en dire « Il n’y a plus rien », on remplace par {{dans dix mille ans}}, pour fêter au passage l’inauguration tant attendue d’une place Léo Ferré à Paris.

Source: http://www.spip.net/fr_article5248.html et http://trac.rezo.net/trac/spip/changeset/14710

We ♥ SPIP !

Il faut donc bien réfléchir à la manière d’utiliser ces images sur son site internet avant de se lancer dans l’upload barbare !

1. Retailler ses images

Il va de soi qu’il est inutile et absurde d’avoir une image de grande dimension (mettons 1024×768) si c’est pour l’afficher dans un menu à la taille de 48×36 ! Il y a deux raisons à cela :

1. La première c’est que l’affichage de l’image sera de moins bonne qualité car il faudra « caser » tous ces pixels supplémentaires dans une plus petite surface.
2. La deuxième est une question de poids ! On perds évidemment beaucoup en affichant une vignette qui pèse 5 fois le poids normal d’une vignette !

Il vaut donc mieux exporter plusieurs versions d’une image, à différentes tailles pour différentes utilisations (vignette, icone, image plein écran …), ce que font la plupart des CMS aujourd’hui.

2. Exporter au bon format

Il existe 3 principaux formats d’image couramment utilisés sur Internet :

• Le JPEG
• Le GIF
• Le PNG

Chacun ayant son propre domaine d’utilisation.

Le JPEG

On utilisera donc le JPEG pour tout ce qui a trait aux photos, bannières et autres images complexes (dégradés de couleur …). A noter qu’avec ce format, il est possible de réduire la qualité de l’image (pertes).

Le GIF

Le GIF est essentillement utilisé pour – non les GIF animés c’est fini merci beaucoup ! – Les images simples (logos, petits boutons, puces, images avec du texte). Le GIF permet de sauvegarder une compression des images sans perte et gère également la transparence (dans la mesure où le détourage est assez simple).

Le PNG

Le PNG tend à être un format très utilisé car il est aujourd’hui celui qui excelle dans la gestion de la transparence, très utilisée dans la plupart des designs modernes (Attention, la transparence des PNG n’est pas supportée sur IE 6). A utiliser à bon escient, que lorsque le contexte l’impose, car ce format est très gourmand en poids.

Il est donc important de faire le bon choix quant à l’export des images utilisées sur un site internet. Une erreur de format peut entraîner une différence de poids notable (un gif au lieu d’un JPEG pour une photo, un PNG pour une image sans transparence …) et ralentir votre site internet.

3. Utiliser les Sprites CSS

Les Sprites CSS c’est quoi ?

C’est une technique qui permet de combiner plusieurs images en une seule. Elle a deux énormes avantages :

1. Elle réduit considérablement le nombre de requêtes demandées au serveur (une seule au lieu d’autant qu’il y a d’images)
2. Elle permet un affichage instantané pour toutes les images de type rollover (visibles seulement après une action utilisateur).

On n’utilise donc plus des images au sens HTML (<img src= »" … />) mais des blocs avec un style CSS associé et donc un background-image.

Comment fabrique-t-on une sprite CSS ?

Le sprite CSS de Google

Il est très facile de construire une sprite CSS, il faut juste un minimum de calcul.

Pour commencer, on peut utiliser une logiciel comme Photoshop pour le faire manuellement, ou utiliser des scripts en ligne automatiques comme ceux-ci :

• http://spritegen.website-performance.org
• http://csssprites.com
• http://css-sprit.es

Le fonctionnement de base est qu’il suffit de positionner chaque image à un endroit précis et « calculable » de sorte que l’on puisse facilement y accéder en modifiant la position du background.

Ensuite il suffit de modifier la position du background-x et du background-y dans la feuille de style.

Voici par exemple différents boutons utilisés par google avec les sprites :

Bouton Google Bouton Google Bouton Google Bouton Google Bouton Google

Voici le style CSS associé aux boutons :

background:url("nav_logo14.png") -20px -132px; /* Position à faire varier */
display:inline-block; /* Pour que le bloc conserve sa largeur */
height:19px;
text-indent:-9999px; /* Pour masquer le texte */
width:19px;

Remarque :

En utilisant ce procédé, on favorise également le référencement du site grâce notamment à l’attribut « text-indent » qui décale le texte de sorte qu’il n’y ait que l’image d’arrière plan qui soit visible, mais qui est parfaitement visible par les robots (qui ne voient pas le CSS).

Aller plus loin avec les sprites :

• http://www.webinventif.fr/sprites-css
• http://www.pompage.net/pompe/sprites
• http://css-tricks.com/css-sprites

Quelques outils pratiques

• Un très bon outil pour savoir si on peut gagner du poids sur une image: Smush It !
• Le plugin YSlow qui vous permettra de savoir si vous utilisez correctement vos images (A utiliser avec Firebug).

Conclusion

Les images d’un site internet ne sont donc pas à prendre à la légère (sans jeu de mots ). Il faut bien veiller à respecter les différentes étapes énoncées au dessus pour minimiser les temps de chargement de votre site internet.

Tout ces fichiers ont un impact très important sur le temps de chargement du site en question. Et il faut bien se rappeler que la vocation première d’un site internet est d’informer, de sensibiliser, de toucher un public cible. Comment y parvenir si le site internet a besoin de 30 secondes pour s’afficher ?

Ce dossier a pour but de vous familiariser aux différentes techniques d’optimisation des temps de chargements.

Il y a en effet plusieurs méthodes d’optimisation qui opèrent à différents niveaux du site :

• les images
• le CSS
• le javascript
• la configuration du serveur

Chaque domaine fera l’objet d’un article où j’essaierai de présenter au mieux les techniques préconisées pour optimiser le temps de chargement d’un site internet.

Le premier article est donc consacré aux Images.

J’ai regroupé ci-dessous une liste non-exhaustive de plugins JQuery qui permettent de faire défiler des images. Ils figurent dans cette liste car ils sont simples mais élégants et facile à mettre en oeuvre.

1. Automatic Image Slider

Automatic Image Slider est un script simple dont le point de départ était la volonté d’avoir un widget de slider d’images accessible partout, et notamment sur iPad.

Accéder au tutoriel complet du script.

2. jCarousel

jCarousel permet de créer des sliders horizontaux ou bien verticaux. On peut charger le contenu via Ajax. Le nombre d’éléments à slider est paramétrable. Il est automatique et très simple à mettre en place !

Accéder au site de l’auteur.

3. Nivo Slider

Nivo Slider est un magnifique plugin qui embarque 9 effets de transition différents, un code simple et qui respecte les standards, des flèches directionnelles et une navigation au clavier.

Accéder au site du plugin.

4. Coin Slider

Coin Slider est une alternative à Nivo Slider, il propose également différents effets de transition très sympas. C’est un script très léger, parfaitement configurable.

Accéder au site du plugin.

5. Space Gallery

Space Gallery est un script original qui fait défiler les images un peu comme dans le générique de Star Wars, ou dans le logiciel Time Machine sur Mac. Quelques options sont disponibles pour régler le délai de transition ou la perspective. Un bon plugin pour vous démarquer des autres !

Accéder au site du script.

6. JQuery Roundabout

JQuery Roundabout est un script plus atypique, il fait défiler des éléments autour d’un axe, en fausse 3D. L’effet est très réussi, le script entièrement configurable, on peut faire défiler de nombreux éléments, même autres que de simples images.

Accéder au site du plugin.

Il en existe évidemment beaucoup d’autres …

N’hésitez pas à mentionner les scripts qui ont retenu toute votre attention et à les partager !

Nouveau plugin très intéressant aujourd’hui : un générateur de mots en JQuery. Le principe est simple, une phrase simple suivi d’un adjectif simple, aléatoire et qui change à interval de temps régulier et paramétrable avec un léger fondu.

On peut choisir le délai d’affichage entre chaque mot et bien sûr choisir une liste de mot à afficher. Une liste d’adjectifs est déjà présente par défaut et à mon goût plutôt pertinente !

Pour initialiser le script :

$("#phrase").adjectifs({
	delay : 2 // Délai d'affichage
	mots : ['mot1','mot2,' ...] // Liste de mots à afficher, optionnel
});

Pas besoin de beaucoup d’explications cette fois, il suffit de visualiser le résultat !

DEMO DOWNLOAD

Apple a officialisé la sortie du nouvel iPhone, appelé finalement iPhone 4 et non iPhone HD. C’est exactement le même que nous avait présenté Gizmodo. Il arrivera avec 100 nouveautés dont un nouvel écran 960×640 pixels, une caméra en façade, un flash pour l’appareil photo, FaceTime, iMovie pour iPhone et j’en passe …

Il sera disponible le 24 Juin, équipé bien évidemment du nouvel OS 4, appelé iOS 4, également disponible pour iPhone 3G (sans multi-tâches), iPhone 3GS et iPod Touch à partir du 21 juin en téléchargement gratuit.

WordPress est selon moi le moteur de blog le plus abouti pour réaliser un blog de qualité. Il est livré de base avec son lot de fonctionnalités mais certaines choses manquent encore. Voilà pourquoi il existe presque 10 000 plugins permettant de combler certains oublis.

J’ai rassemblé ci-dessous une liste non exhaustive des plugins qui me semblent les plus utiles. N’hésitez pas à mentionner dans les commentaires des plugins intéressants que j’aurai oubliés.

Akismet

Akismet est un plugin très pratique, sans doute utilisé par la majorité des blogs, il permet de filtrer tous les commentaires et donc d’éviter au maximum à votre blog de se faire spammer. Vous pouvez bien évidemment changer la politique de chaque commentaire saisi (spam, approuvé …).

Aller sur le site de l’extension.

All in One SEO Pack

All in One SEO Pack est un outil qui rassemble tout un tas de fonctionnalités vous permettant d’optimiser votre SEO: définition des balises méta, choix d’indexation, format des titres de page … Il vous aidera à améliorer votre référencement.

Aller sur le site de l’extension.

Google XML Sitemaps

Ce plugin gère la création et la mise à jour d’un fichier sitemap.xml dynamique avec la liste de tous vos articles et pages. Il est mis à jour à chaque ajout ou modification de contenu.

Aller sur le site de l’extension.

Breadcrumb NavXT

Ce petit outil bien pratique vous permettra d’afficher un fil d’ariane sur votre blog, permettant à vos lecteurs de savoir où ils se trouvent au sein de votre blog.

Aller sur le site de l’extension.

Contact Form 7

Quand je faisais référence aux manquements de Wordress, le formulaire de contact en faisait parti. Voici donc un plugin permettant de configurer un formulaire pour que vos lecteurs puissent vous contacter facilement. Entièrement configurable et stylisable.

Aller sur le site de l’extension.

Sociable

Avec Sociable vous proposez à vos lecteurs de partager vos articles sur tous les sites sociaux souhaités (Facebook, Twitter, Google …).

Aller sur le site de l’extension.

SyntaxHighlighter Evolved

Si comme moi vous voulez écrire des articles techniques avec du code expliqué, il vous faudra ce plugin qui permet d’afficher vos bouts de code comme dans un éditeur de texte, avec une coloration syntaxique pour différents formats (html, javascript, css, …).

Aller sur le site de l’extension.

WP-Polls

Il est toujours intéressant de faire des sondages auprès de vos lecteurs. Wp-polls est un plugin simple et facilement administrable qui vous permettra de recueillir de nombreuses informations.

Aller sur le site de l’extension.

WPtouch iPhone Theme

Il est important qu’un blog à l’heure d’aujourd’hui soit lisible sur un maximum de plateformes. Voici donc un plugin qui transforme votre blog en appli iPhone parfaitement lisible.

Aller sur le site de l’extension.

WP Super Cache

Un plugin qui permet de gérer le cache de wordpress, très pratique si vous avez une quantité relativement importante d’articles, il permet d’accélérer le chargement de vos pages.

Aller sur le site de l’extension.

Voici donc des plugins intéressants qui devraient apporter à votre blog un coup de boost que ce soit pour le référencement ou pour l’ergonomie générale. Maintenant, à vous de m’en présenter d’autres !

La conférence annuelle des développeurs se tiendra le Lundi 7 Juin à partir de 10h heure locale (19h heure française) et Steve Jobs sera bel et bien là pour présenter au monde entier le nouvel iPhone tant attendu: l’iPhone 4G (à moins que ce ne soit l’iPhone HD ?).

En tout cas, selon les dires du patron de la grosse pomme: « Vous ne serez pas déçus ! », alors on attend ce rendez-vous comme chaque année avec beaucoup d’impatience … !

Voici une nouveauté très intéressante de la part de nos amis de chez Mountain View: Google Font API ou comment intégrer une police non standard en 20 secondes chrono !

Rien de plus simple, il suffit d’inclure un css depuis le serveur de Google et de styliser son texte :

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
    <style>
      body {
        font-family: 'Lobster', serif;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Google embellit le web !</h1>
  </body>
</html>

Il faut donc utiliser le catalogue de Fonts de Google (économie de bande passante au passage), peu fourni pour l’instant mais qui ne tardera pas à s’enrichir par la suite, soyons sûrs !

Plus d’infos ici: Google Font API, mode d’emploi

Ça fait quelque temps déjà que l’on voit des bribes de ce que sera la norme CSS 3 mais elle n’a toujours pas été finalisée par le W3C. Cependant, certains des plus innovants navigateurs tels Firefox, Safari ou encore Chrome le gèrent déjà (via l’utilisation de propriétés particulières tout de même). Modifié le 10/05/2010

Pourtant, cette version permettrait de créer des interfaces riches, ergonomiques et plus visuelles. On pourrait se passer des traditionnelles astuces pour créer des bords arrondis avec des images ou ajouter des ombres portées sur Photoshop !

Si le CSS 3 était adopté par tous les navigateurs, nous pourrions par exemple avoir de jolis boutons entièrement stylés en CSS.

Les avantages sont évidents :

• Nul besoin d’images ou de Javascript
• Boutons redimensionnables à souhaits (selon la taille du texte)
• Applicable à tout élément HTML (input, a …)

Mais pour bien comprendre, quelques explications :

Les styles CSS3

Voici le code HTML pour nos boutons :

<p>Button <button class="btn">My Button</button></p>
<p>Input type Button <input type="button" class="btn" value="My Button" /></p>
<p>Blue Button <input type="button" class="btn blue" value="My Button" /></p>
<p>Disabled Blue Button <input type="button" class="btn blue disabled" value="My Button" /></p>
<p>Link <a href="#" class="btn">My link</a></p>

Et voici le code CSS associé :

.btn{
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	border:1px solid #ccc;
	-moz-border-radius:0.3em; /* Coins arrondis pour Firefox */
	-webkit-border-radius:0.3em; /* Coins arrondis pour Safari / Chrome */
	padding:3px 6px;
	background:#ddd;
	/* Degradé linéaire (Firefox) */
	background:-moz-linear-gradient(center top , #fff 0%, #fff 5%, #ddd) repeat scroll 0 0 #F6F6F6;
	text-decoration:none;
	color:#333;
	cursor:pointer;
	letter-spacing:0.05em;
	text-shadow:1px 1px #f5f5f5; /* Ombre portée sur le texte */
}

Comportement au rollover sur le bouton :

.btn:hover{
	 /* Degradé inversé linéaire (Firefox) */
	background:-moz-linear-gradient(center top , #fff, #ddd) repeat scroll 0 0 #F6F6F6;
 	-moz-box-shadow:0 0 0.4em #aaa; /* Ombre portée du bouton (Firefox) */
 	-webkit-box-shadow:0 0 0.4em #aaa; /* Ombre portée du bouton (Safari / Chrome) */
}

Pour les voir en démo, cliquez ici !

Elle est chouette ta démo, mais si je suis sur Internet Explorer, je fais comment ?

Eh bien, tu peux te renseigner sur Smashing Magazine pour adapter au mieux la feuille de style pour IE avec tout un tas de jolis filters

Autres exemples et infos

• Des bouton CSS3 sur webdesignerwall
• Infos sur le CSS3
• Introduction au CSS3 par le W3C
• Tableau récapitulatif du support du CSS3 et du HTML5 par les différents navigateurs