Tu souhaites adapter ton site pour l’iPad ? Il faut pouvoir l’identifier afin de charger les bonnes feuilles de styles, les bons templates et les bon JavaScript.

Plusieurs solutions s’offrent à toi faire la détection en PHP ou en JavaScript. Tout d’abord voyons le Javascript :

if( navigator.userAgent.match(/iPad/i) != null )
{
     // javascript à faire si l'iPad est détecté
}

Enfin pour le PHP :

if( strpos($_SERVER['HTTP_USER_AGENT'],'iPad') !== null )
{
     // PHP à faire si l'iPad est détecté
}

Photo

Le site du jour, que je viens tout juste de découvrir : TheyMakeApps.com. Le site propose de référencer les agences de création d’applications pour « ordiphone » – smartphone en anglais – : Iphone, Android…

Le design tout d’abord. Tout, ou presque, est en gris (#303232) et blanc. Cela donne un certain style (assez classe je trouve) au site. Un gros travail a donc été fait sur les typographies (tu peux déjà compter le nombre de typos différentes sur la capture ci-dessus !). Les icônes et petites illustrations (en dehors des images des agences) sont également très travaillés et bien réussies.

Ensuite la navigation sur le site lui-même. La première fois que l’on y accède, il est demandé de choisir entre modes de navigation : à la souris (classique) ou tout au clavier (avec, nous promettent-ils « more fun »). Après avoir choisi clavier, tu pourras constater que tout a bien été étudié pour naviguer dans le contenu, activer un bloc, voir les détails d’une agence et revenir sur le listing…

Cela faisait quelques temps que je n’étais pas tombé sur un site web tel que celui là

Pour prolonger la série des tutorials et conseils sur JQuery, je propose un article pour livrer quelques astuces que j’ai découvert par moi-même ou glanées sur le web dans le but de mieux coder et d’optimiser le code JQuery.

En effet, si celui-ci n’est pas bien optimisé, les perfomances peuvent être détérioriées en fonction des capacités de la machine de visiteur. Le JavaScript est un langage côté client, il ne faut pas négliger les visiteurs ayant une machine de moindre puissance !

1 – Optimisation des sélecteurs

Pour commencer, un petit rappel de l’ordre des sélecteurs de JQuery en fonction de leurs vitesses d’interprétation (la liste n’est pas exhaustive) :

$(" #monbloc")
 
$("p")
 
$(".laclasse")

Quelques explications s’imposent. Le plus rapide reste d’utiliser directement l’ID de ce que l’on recherche, la fonction étant basé sur la fonction getElementById() de JavaScript. La fonction recherche un objet du DOM unique et s’arrête dès qu’elle l’a trouvé !

Le deuxième sélecteur est basé sur la fonction JavaScript getElementByTagName(). Le nombre d’éléments à parcourir est moindre par rapport à simplement « .laclasse ». Avec un sélecteur composé simplement d’un nom de classe, tout le DOM est parcouru ! C’est ce qu’il y a de pire !

Dernier petit conseil concernant les sélecteurs, il est toujours mieux de donner un contexte au sélecteur si l’on doit utiliser une classe :

$(« #monID .maclasse ») est plus rapide que $(« .maclasse »)

2 – Utilisation des objets JQuery et des variables JavaScript

Si tu dois utiliser plusieurs fois le même sélecteur, il faut utiliser les objets JQuery et enregistrer celui-ci dans une variable.

Regardons ce bout de code (ceci est bien entendu un exemple à ne pas reproduire !) :

$("a#monLien").click( function(e) { // quand on clique sur le lien ayant l'id monLien
     if( $("#monBloc").is(":visible") ) // si le bloc "monBloc" est visible
     {
          $("#monBloc").slideUp("slow"); // on l'enroule
          $("#monBloc").addClass("ferme"); // et on y ajoute la classe "ferme"
     }
     e.preventDefault(); // pour empecher le navigateur de suivre le lien
});

Le sélecteur $(« #monBloc ») est utilisé 3 fois. Le DOM est donc parcouru autant de fois pour toujours avoir le même résultat.

$("a#monLien").click( function(e) {
     // on affecte à la variable monBloc l'objet JQuery correspondant :
     var monBloc = $("#monBloc");
     if( monBloc.is(":visible") ) // si le bloc "monBloc" est visible
     {
          monBloc.slideUp("slow"); // on enroule le bloc
          monBloc.addClass("ferme"); // et on y ajoute la classe "ferme"
     }
     e.preventDefault();
});

Le simple fait de mettre dans une variable le résultat de $(« #monBloc ») permet de n’utiliser le sélecteur qu’une seule fois. On peut appliquer n’importe quelle fonction JQuery à la variable monBloc qui contient l’objet JQuery retourné par le sélecteur !

3 – La chainabilité

L’un des avantages de JQuery est la possibilité d’utiliser la « chainabilité » pour écrire son code. Un exemple vaudra toute les explications.

Reprenons le bout de code précédent :

$("a#monLien").click( function(e) {
     var monBloc = $("#monBloc");
     if( monBloc.is(":visible") )
     {
          monBloc.slideUp("slow");
          monBloc.addClass("ferme");
     }
     e.preventDefault();
});

On constate que dans la condition if (monBloc… il y a 2 actions à effectuer sur « monBloc ». La chainabilité permet de raccourcir l’écriture du code :

$("a#monLien").click( function(e) {
     var monBloc = $("#monBloc");
     if( monBloc.is(":visible") )
     {
          // on enroule le bloc et on y ajoute la classe "ferme" :
          monBloc.slideUp("slow").addClass("ferme");
     }
     e.preventDefault();
});

Par la suite, il est donc possible de faire des choses comme ceci :

$("a")
   .filter(".class1") // si un lien à la classe .class1
     .click(function(e){ // et qu'on clique dessus
       alert("Un clique sur le lien .class1"); // on alert
       e.preventDefault(); // et on empeche le navigateur de suivre le lien
     })
   .end() // on retire le sélecteur ajouté avec filter()
   .not("#superId") // si un lien n'a pas pour id superId
     .click(function(){ // et qu'on clique dessus
       $(this).hide(); // on cache le lien
       e.preventDefault(); // et on empeche le navigateur de suivre le lien
     })
   .end(); // et on retire le sélecteur
   ... // on peut continuer trèèèèès longtemps comme ça.

La chainabilité est possible grâce au fait que chaque fonction JQuery retourne l’objet auquel est appliqué la méthode (ou fonction pour rester dans des termes compréhensibles ). La fonction end() permet de « retirer » le dernier sélecteur de « Traversing » (je vois pas trop le mot à utiliser pour le traduire). Pour voir la liste de ces sélecteurs, n’hésite pas à faire un tour sur la Doc JQuery !

4 – Utiliser le fonctions de toggle

Une petite astuce toute simple et pourtant très utile. Je ne vois pas très souvent les fonctions de « toggle » utilisées… Or ces fonctions permettent d’inverser un état d’un élément. Il y en a plusieurs, mais je parle notamment de :

• toggle() qui rend visible un élément non visible ou qui cache l’élément si celui-ci est visible
• slideToggle() qui slideDown (déroule) un élément non visible ou qui slideUp (enroule) l’élément si celui-ci est visible
• toggleClass(« maClass ») ajoute la classe à l’élément si celui-ci ne l’a pas ou supprime la classe à l’élément si celui-ci l’a déjà

Par exemple :

if($("#monTest").is(":visible") ) // si le bloc ayant pour id "monTest" est visible
{
     $("#monTest").hide(); // on le cache
}
else // sinon
{
     $("#monTest").show(); // on le montre
}

Tout ce bloc peut être réduit (et donc optimisé) à 1 seule ligne de code :

$("#monTest").toggle(); // !!

5 – Utiliser la fonction data() de JQuery

Chose que j’ai découverte il y a peu (en refaisant mon portfolio), il est possible avec JQuery d’attacher des données à un élément.  Cette fonction est très utiliser par certans plugins (comme par exemple JQueryUI). La fonction data() s’utilise comme ceci :

$("#id").data('color', $("#id").css('color'));  // On enregistre la couleur du bloc à ce moment
[...]
$("#autreId").css('color', $("#id").data('color') );  // On affecte la couleur enregistré à un autre élément
[...]
$("#id").removeData('color'); //Et on n'oublie pas de vider le data quand on a fini

J’espère avoir appris au moins une astuce à une personne, comme ça je n’aurai rien perdu !

[image : JQuery Rock Star by tsinilas]

Pour aujourd’hui je voulais parler du site minning.de. Un site au design minimaliste mais qui a de la classe (comme tous les sites aux designs minimalistes réussis). C’est le site web d’un graphiste Berlinois, les diverses illustrations sont assez réussies je dois dite (j’aime particulièrement l’image de la page d’accueil).

A noter que la navigation sur le site est faite tout en Javascript (apparemment sans JQuery, d’après ce que j’ai pu voir dans le code) et est agréable à utiliser !

Lorsque l’on a l’habitude de coder en php avec ses multiples fonctions natives (avec ses fonctions de date, sur les tableaux, les chaînes de caractère…), on a parfois du mal à s’y retrouver en JavaScript.

C’est de ce constat qu’est parti le projet PHP-JS. PHP-JS permet l’utilisation des fonctions natives de php en JavaScript ! Pour le moment 386 fonctions sont disponibles. Pour créer cela, ils ont simplement re-coder les fonctions php en JavaScript. On retrouve toute sorte de fonctions de l’include() (qui ajoute les balises script) à date() en passant par in_array() (pour savoir si un élément est dans un tableau).

Le pack complet de fonction est disponible en téléchargement sur le site, mais je vous recommande d’utiliser l’outil qui permet de générer un fichier js contenant uniquement les  fonctions qui seront nécessaires.

Découverte de cet après-midi : une nouvelle documentation de JQuery en Français. Elle reprend les textes originaux d’une autre documentation JQuery en Français mais apporte des nouveautés comme les toutes dernières fonctions de la dernière version de JQuery (live(), die()…) et surtout la possibilité de publier des commentaires sur n’importe quelle fonctions. Cette dernière fonctionnalité augmente sensiblement l’intérêt de ce genre de site (un peu comme les commentaires explicatifs sur la doc php). Et pour finir, le site a un design bien sympa, avec des couleurs chaudes et dynamiques (ça change pour une documentation!)

Bref une adresse à Bookmarker!