Astuces de Webmaster

Tout est là : http://googletesting.blogspot.com/2009/05/yet-another-javascript-testing.html

Un outil qui teste vos JS sur tous les navigateurs, magnifique

Article remis à jour le 26 août 2010
—- NOUVELLE VERSION DE L’ARTICLE —-
Table Sorter 2.0 est une version qui a bien vieilli par rapport à celui de Dator

Il permet de faire des tris directement dans l’interface (au niveau du navigateur client) si les données sont correctes

Petit aperçu :

La démo est sur le site : Table Sorter 2.0

—- ANCIENNE VERSION DE L’ARTICLE —-

A voir, un plug-in Jquery permettant un tri et une pagination dynamique. Je trouve ça énorme.

A diffuser !

Le lien : http://www.sprymedia.co.uk/dataTables-1.4/media/js/jquery.dataTables.js
Doc & démo : http://www.sprymedia.co.uk/dataTables-1.4/example_zero_config.html
La source : http://www.dator.fr/une-datagrid-avec-jquery-gerant-le-trie-et-la-pagination/

Alsacreations est un très bon site que vous connaissez probablement.

Je vous conseille comme à moi-même d’aller régulièrement faire un petit quizz au hasard, on apprend toujours quelque chose, c’est ça qui est bon

Ici : http://www.alsacreations.com/quiz/

Petit instantané (on verra l’évolution au fil du temps )
Moyenne Joueurs
XHTML débutant 5.9 1155
XHTML moyen 5.6 596
XHTML difficile 4.5 610
XHTML difficile (bis) 4.9 442
CSS débutant 9.1 886
CSS moyen 4.7 604
CSS difficile 3.3 446
JS / DOM débutant 6.3 305
JS / DOM moyen 4.7 204
JS / DOM difficile 3.4 207
Accessibilité 7.3 260
PHP débutant 8 799
PHP moyen 5.9 655
PHP difficile 5.6 634
PHP difficile (bis) 2.9 459

On en a tous rêvé en secret, on l’avait à peu près découvert en regardant les sources Javascript de Google Maps, il faut maintenant se rendre à l’évidence, on ne peut pas se passer de Minify, un projet déposé sur Google Code.

Vous qui rêviez de rassembler tous vos scripts JQuery en un seul fichier..

http://code.google.com/p/minify/

L’idée ? transformer ça :

<script type= »text/javascript » src= »/_lib/_action/montre2.js »></script>
<script type= »text/javascript » src= »/javascript/prototype.js »></script>
<script type= »text/javascript » src= »/javascript/scriptaculous.js »></script>
<script type= »text/javascript » src= »/javascript/jscalendar/calendar.js »></script>
<script type= »text/javascript » src= »/javascript/jscalendar/lang/calendar-fr.js »></script>

<script type= »text/javascript » src= »/javascript/jscalendar/calendar-setup.js »></script>
<script type= »text/javascript » src= »/javascript/jquery-1.2.3.js »></script>
<script type= »text/javascript » src= »/javascript/jquery.form.js »></script>
<script type= »text/javascript » src= »/javascript/ficheProduit.js »></script>
<script type= »text/javascript » src= »/javascript/resa.js »></script>

en ça :

<script type= »text/javascript » src= »/min/?f=javascript/jquery-1.2.6.min.js,javascript/jquery.scrollTo.js,javascript/player/carousel_behavior.js,javascript/jquery.hoverIntent.min.js,javascript/superfish.js,javascript/jquery.bgiframe.min.js,javascript/jquery.reflect.js,javascript/jquery.form.js »></script>

ce petit bout de code PHP rassemble tous les scripts en un seul, retire les espaces qui ne servent à rien, ce qui compresse un petit peu le tout et vous met ça à disposition.

L’idée c’est qu’au lieu d’une dizaine de requête, vous n’en avez plus qu’une, ce qui allège considérablement les échanges et les temps de téléchargement..

Il suffit d’ailleurs de voir leur exemple : 98KBytes au départ, 29KBytes à l’arrivée.. et moins de questions / réponses entre le navigateur et le serveur.

Et ça marche aussi avec les fichiers CSS

Pour les perfectionnistes, on a là une bonne bible de tout ce qu’on peut faire pour optimiser le chargement des pages : http://developer.yahoo.com/performance/rules.html

Qu’attendez-vous ?

Quelques effets amusants « shoot » en Javascript.

Prise en compte du vent, etc. On a un peu l’impression de tirer sur une cannette

Un seul lien : http://www.inf.ufrgs.br/~rcpinto/physics/

D’autres effets amusants ici : http://webdev.stephband.info/parallax_demos.html

Vous en aviez rêvé, un code vous permettant de « transformer » les vieux navigateurs comme Internet Explorer 5 et 6 « aussi compatibles » (s’il en est) que Internet Explorer 7 : le simple code à copier coller et la source javascript à télécharger à cette adresse : http://code.google.com/p/ie7-js/

Cette question, idiote il y a quelques années, semble avoir trouvé des réponses récemment avec l’avènement d’Ajax.

Je vous invite à découvrir Xajax, qui permet d’appeler  facilement des fonctions prédéfinies. Je n’irai pas plus loin car je préfère pour ma part créer mes propres fonctions grâce à Prototype, mais c’est à connaître et ça évite un chargement désormais superflu d’une page supplémentaire.