lundi 5 avril 2010

Utiliser jQuery pour augmenter la vitesse de chargement des pages!

Dans le monde du web, tout doit être hyper-rapide. C'est pourquoi il est inacceptable de faire attendre ses visiteurs après le chargement d'un script d'analyse d'audience externe (ex: Google Analytics).

C'est pourquoi j'ai créé un petit script très simple qui pouvait me permettre de télécharger le script en parallèle, augmentant ainsi de façon significative la vitesse de chargement de la page:

$(document).ready(function() {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
jQuery.getScript(gaJsHost+"google-analytics.com/ga.js", function(){try {var pageTracker = _gat._getTracker("[METTRE NUMÉRO DE TRACKER ICI]");pageTracker._trackPageview();} catch(err) {}});
});

Le seul désavantage de ce fragment de code est que nous ne sommes pas certains que chaque visite ait été analysée. Ce n'est pas un problème en soit: selon moi, les visiteurs qui quittent avant que le script soit chargé n'étaient pas intéressés à notre site web de toute façon.

Le GRAND avantage, cependant, est que vos précieux visiteurs n'auront plus à attendre! Un site plus rapide est un site plus agréable à utiliser et ce script peut vous aider à faire un pas dans la bonne direction!

Note: Vous aurez besoin de jQuery pour utiliser ce fragment!

dimanche 14 février 2010

Woa, mon site est revenu à la vie!

Et oui, il semblerait que j'ai investi quelques minutes à chercher à travers les différents backups que j'avais afin d'arriver avec une version qui ressemble à peu près à ce qui était sur le serveur avant les évènements qui l'avaient forcé à fermer.

Bref, ça se peut qu'il y ait du neuf éventuellement!

samedi 28 mars 2009

Contrôler les erreurs avec FirePHP

Si vous développez des sites web, j'espère que vous utilisez Firefox ainsi que son extension FireBug ou un équivalent. Ce que je vous montre aujourd'hui, c'est comment automatiser la gestion des erreurs afin d'éviter les messages automatiquement écrits par Apache.

Ce n'est pas un secret: Les messages d'erreurs par défaut ne font jamais l'affaire
Ce que je vous propose aujourd'hui, c'est de modifier ce qui était autrefois:

Notice: No translation found for string 'title' in en and in DEFAULT_LANG in C:\wamp\www\           \class\Internationalizable.php on line 76

En ceci, qui est invisible aux utilisateurs qui n'utilisent pas l'extension FirePHP:

firephp

Les avantages?
  • Le message d'erreur n'apparaît pas directement sur la page (séparation du contenu);
  • Les erreurs sont reçues même si elles sont levées lors d'une requête AJAX;
  • Informations beaucoup plus complètes, incluant la pile d'appels ayant mené à l'exception;
  • Possibilité de transférer des informations complexes à la console client, ex: "FB::warn($_SESSION,'$_SESSION');";
  • Toutes les erreurs sont enregistrées dans le fichier FirePHPCore/errors.html.
Voici maintenant comment faire. Vous êtes chanceux, j'ai déjà tout inclus dans un fichier que vous pouvez télécharger librement!

2 ième étape: Télécharger mon script
http://www.ericgagnon.net/files/error_handler.zip


Et voilà! J'espère que ça va vous être utile!

mardi 10 février 2009

Utiliser jQuery pour augmenter l'accessibilité

C'est vrai, ce n'est pas donné à tous de bien voir. Certains ne voient pas du tout, mais nous reparlerons de ceux-ci dans un autre message (peut-être). Aujourd'hui nous allons nous concentrer sur ceux qui ont de la difficulté à lire les textes, que ce soit par handicap ou simplement par habitude.

Le code que je vous propose aujourd'hui est un petit script très simple qui permet de gérer l'agrandissement et la réduction de la taille de police sur votre page. Évidemment, ceci ne fonctionne que si vous avez utilisés des mesures relatives (em, %), chose que vous devriez toujours faire!

Ce script utilise la bibliothèque jQuery (http://jquery.com/) ainsi qu'un plugin appelé jQuery cookie (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)

Tout d'abord, nous allons développer les techniques utilisés pour conserver la taille de police dans un cookie;
var accessCookie = 'font'; //Le nom du cookie
function getSavedSize(){
var taille = parseFloat($('html').css('font-size'));//On va chercher la taille actuelle
var cookieTaille = $.cookie(accessCookie);
if(cookieTaille){ //Si la valeur existe, nous l'affectons à la variable
taille = cookieTaille;
}
return taille;
}

function saveSize(size){
$.cookie(accessCookie, size, { expires: 365 }); //Expires dans 1 an
}

Ensuite, nous devons ajouter le code pour la modification de la taille de police. C'est plutôt facile avec jQuery;
var originalSize = $('html').css('font-size'); //Pour revenir à la taille en tout temps,
//même si celle-ci est modifié par l'utilisateur (qui utilise IE par exemple)
function modifyFont(increase){
var nouvelleTaille = parseFloat($('html').css('font-size')) + increase;
setFont(nouvelleTaille);
}

function setFont(size){
$('html').animate({fontSize:size},300);
saveSize(size);
}

Finalement, on ajoute le code pour que les différents boutons utilisent le code;
$(document).ready(function() {
$('#increaseFont').click(function(){
modifyFont(2); //Normalement, les gens veulent grossir la police rapidement
return false;
});
$('#resetFont').click(function(){
setFont(originalSize);
return false;
});
$('#decreaseFont').click(function(){
modifyFont(-1); //Ou ils veulent la réduire lentement, afin d'être précis
return false;
});

//Afin de modifier la taille de la police au chargement (ainsi l'utilisateur ne voit
//pas que la police est modifié à chaque nouvelle page)
var size = getSavedSize() + '';
$("html").css({fontSize : size + (size.indexOf("px")!=-1 ? "" : "px")});
});

Voila! L'avantage de ce script est qu'il est réutilisable et vous pouvez l'utiliser avec n'importe quel élément HTML; vous n'avez qu'à définir le bon "id" pour chaque "bouton". Voici un exemple simple de trois liens qui permettent d'utiliser ce script et qui ne causent aucun problème si Javascript n'est pas activé;
<a href="#" id="increaseFont" title="Augmenter la taille de police">A+</a>&nbsp;
<a href="#" id="resetFont" title="Restaurer la taille de police">a</a>&nbsp;
<a href="#" id="decreaseFont" title="Diminuer la taille de police">a-</a>

Voilà! Ce n'est pas très compliqué comme code, mais je pense que c'est le genre de choses qui mérite définitivement 5 minutes de votre temps lorsque vous créez une page web. Les gens qui souffrent de problèmes de vue apprécieront définitivement l'effort et le temps que vous avez pris pour eux!

mardi 20 janvier 2009

Site web terminé!

Et oui, j'ai enfin trouvé le temps pour terminer mon site web. J'ai ajouté une page d'accueil et mon cv, mais j'ai également modifié le site en tant que tel pour qu'il fonctionne sur IE et j'ai ajouté des pages d'erreur 404 qui fonctionnent. D'ailleurs, un gros merci à Etienne Scott pour m'avoir sensibilisé à la balise "base" qui s'est avérée très utile dans ce cas!

Bien sûr, toutes les sections sont susceptibles de changer à un moment ou à un autre, mais le site va garder à peu près la même forme. Alors j'aimerais avoir vos commentaires! Est-ce que le site est convivial? Est-ce qu'il est difficile à comprendre? Avez vous vu des bugs?

J'attends vos commentaires!

jeudi 15 janvier 2009

Propositions pour Ubuntu 9.04

J'ai fais quelques propositions pour la prochaine version d'Ubuntu. Les voicis:






Vous pouvez cliquer sur l'image pour aller voter pour ces idées si vous les trouvez bonnes!

Pour ceux qui s'intéressent à Ubuntu, sachez que la version Alpha 3 est supposé sortir aujourd'hui. C'est à partir de cette version que l'on pourra enfin installer OpenOffice 3 sur Ubuntu (Qui est sorti, je vous le rapelle, en Octobre 2008). Enfin!

samedi 10 janvier 2009

Comment payer 15$ pour un item valant plus de 300$

Je vais bientôt faire un shooting en studio avec mon cher Sony Alpha A200, mais un hic se présente: Il me faut un adaptateur pour faire fonctionner des flashs de studio (prise "PC"). Un tel adaptateur se vend pour les appareils Nikon (environ 30$), mais puisque presque tous les pieds de flashs sont compatibles entre-eux, ce n'est pas un problème pour les propriétaires de Canon, Pentax, et autres. Une exception à la règle: Sony. Puisque le pied de flash de Sony est tout sauf standard, il faut un adaptateur spécial.

Je me met donc à la recherche de cet accesoire. Je trouve celui-ci sur le site de Sony:
C'est l'adaptateur permettant de connecter un fil "PC" sur l'appareil. Croyez-le ou non, mais cet accessoire vaut 230$. Je ne l'ai évidemment pas acheté. Je me mis donc à la recherche d'un équivalent sur eBay. Je trouve ceci pour la modique somme de 15$ (avec les frais de livraisons inclus):
Image Hosted by ImageShack.usCe qui est encore plus épatant de cet adaptateur, c'est qu'il y a un pied de flash standard sur son dessus (caché sur cette photo). Ceci me permet donc d'utiliser n'importe quel genre de flash. Sony vend ce même genre d'accessoire pour 150$.

Sony vend des appareils photo à un prix très raisonnable, mais les accessoires, eux, coutent très cher. Une chance qu'il y a de petits marchands sur eBay qui vendent des adaptateurs qui sont certainement de moins bonne qualité mais qui offrent un rapport qualité/prix BEAUCOUP plus avantageux!