Astuces de Webmaster

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/

http://jqueryui.com/themeroller/
http://mochaui.com/demo/

MochaUI vous propose une interface toute prête, adaptable, flexible, qui vous permet rapidement de mettre en place un canevas ergonomique pour tout back-office (par exemple).

JQueryUI vous donne tous les éléments d’interface sous forme modulaire, et vous laisse créer la présentation vous-mêmes.

Encore un outil basé sur JQuery, encore un

JCrop, outil qui permet de recadrer / retailler une image en Javascript, c’est-t-y pas énorme ?

Il fonctionne sur FF3/GG Chrome / IE6+ / Opera 9.5 et Safari 3

Les exemples sont là : http://deepliquid.com/content/Jcrop_Examples.html
Le téléchargement est là : http://deepliquid.com/content/Jcrop_Download.html

Voir aussi ImgAreaSelect : http://odyniec.net/projects/imgareaselect/

Saviez-vous qu’en chargeant une page, les éléments de différents (sous-)domaines peuvent se charger simultanément ? Concrètement, si vous avez un script sur le « www. » et des images sur le « images. », les téléchargements commenceront en même temps alors que s’ils sont tous les deux sur le « www. », ils seront consécutifs et téléchargés dans l’ordre.

Donc on a tout intérêt à diversifier les téléchargements et faire télécharger un script JS particulièrement lourd comme JQuery directement sur le serveur de Google, ça peut avoir un sacré nombre d’avantages :
- décharger votre serveur
- temps de téléchargement réduit
- capacité de mettre facilement à jour les librairies en changeant un simple paramètre

A savoir que vous avez la possibilité d’appeler ces librairies en HTTPS, ce qui vous permet de les utiliser sur des pages sécurisées.

Un seul lien, ici : http://code.google.com/intl/fr/apis/ajaxlibs/

Vu sur Free Tools, effet de page cornée très efficace : http://smple.com/2008/12/15/jquery-plugin-page-peel/
Aperçu ici : http://www.smple.com/pagePeel

Voici quelques équivalences entre JQuery et Prototype qui peuvent aider lorsque l’on veut passer de l’un à l’autre

Mettre à jour le contenu d’un bloc via un appel AJAX
Prototype :

new Ajax.Updater(‘identifiantConteneur’,'/dossier/fichier.php’, {evalScripts:true,parameters:’var1=val1&var2=val2′});

JQuery :

$j.ajax({
type: ‘POST’,
processData: true,
url: ‘/dossier/fichier.php’,
data: ‘var1=val1&var2=val2′,
dataType: ‘html’,
success: function(data){
//alert(data);
$j(‘#identifiantConteneur’).html(data);
}
});
}

Serializer un formulaire
Prototype : Form.serialize(« identifiantFormulaire »)
Jquery : $j(« #identifiantFormulaire »).serialize()

JQuery – Appel fonction lors de la modification d’un champs de type radio ou select

$(« :checkbox, :radio »).click(nomFonction);
$(« select »).change(nomFonction);

(doc et exemple : http://docs.jquery.com/Ajax/serialize)

Liste à compléter au fur et à mesure

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

Source : http://malsup.com/jquery/cycle/

Une source pour voir différents diaporamas réalisables avec JQuery.

Modes disponibles : « déroulé de photos », « zoom in / zoom out », « fade in and out », « cube qui tourne », « page qui se tourne », « défilement au clic »