Astuces de Webmaster

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/

Excellent article lu sur JDNet via Compario : Les axes de performance du moteur de recherche dans le secteur du e-commerce

L’auteur y explique les techniques actuelles pour répondre au mieux à toute requête d’un prospect sur un moteur de recherche type « one box ».

Morceaux choisis :
« Un chercheur transforme deux fois plus qu’un visiteur »

« 73% des visiteurs de site e-commerce quittent le site au bout de deux minutes »

« 40% des visiteurs d’un site marchand vont utiliser le moteur de recherche interne »

« lorsque l’internaute recherche TV, il s’attend à avoir la liste des télévisions disponibles sur le site en priorité et bien plus tard ou en marge, les accessoires qui se branchent sur la Télévision »

« [La navigation à facettes] s’appuie sur une recherche simple, sans mention de critères. En réponse, le moteur va présenter une vue de la répartition de l’ensemble des réponses selon diverses catégories ainsi que le nombre d’occurences. L’internaute choisit alors la facette qui l’intéresse, et va ainsi restreindre les résultats à ceux qui correspondent à son choix. »

« es sources d’erreur dans la recherche d’un article ou d’un produit sont multiples (faute d’orthographe, recherche de référence mal saisie…) et leurs effets sur l’acte d’achat sont en général rédhibitoires » (lire à ce sujet notre article sur la distance de levenshtein)

« La question de l’intégration d’un module de langage naturel doit se poser lorsque l’on se trouve sur un service présentant une offre dont plus de 3 caractéristiques semblent indispensables à la définition des produits : ex : l’immobilier ou l’achat de véhicule. L’internaute va recherche un appartement de 100m2 avec terrasse et 3 chambres. »

« Le principe [de la suggestion orthographique] est donc de proposer en lien, une orthographe approchante de celle saisie par l’internaute, en reformulant exactement la recherche avec les termes corrigés. »

« [L'autocomplétion] permet de compléter en live la saisie de l’internaute dans la boîte de recherche. Cela permet de lui suggérer des recherches avant même qu’il ait terminé de l’exprimer »

« il faudra plutôt envisager la suggestion d’articles au sein des réponses afin de compléter l’offre et d’enrichir le panier. « 

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

Petite description from Framasoft :

Aptana est un IDE (Environnement de développement intégré), pour créer des sites web dynamiques. Si vous préférez, c’est un GROS éditeur de texte plutôt complet… Il vous facilitera donc la vie de codeur HTML, Javascript, AJAX, CSS, PHP ou ruby…

Basé sur Eclipse, Aptana possède énormément de fonctionnalités : gestion de script, auto-complétion (HTML, JS(AJAX), PHP, CSS, ruby), coloration personnalisable, FTP, Gestion de projet, synchronisation local/serveur, analyseur syntaxique, ainsi qu’une documentation très complète en anglais.

Le site officiel d’Aptana : http://www.aptana.com/

Aptana est sous licence APL, il n’est donc pas possible de redistribuer le produit.

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.

Connaissez-vous Prototype ? Si oui, tant mieux, si non il faut absolument que vous lisiez ce post jusqu’au bout.

Pour faire simple, la librairie Prototype permet de simplifier nombre de fonctionnalités que l’on souhaite faire via JavaScript / Ajax.

Exemple 1 : en une ligne de code, vous envoyez le contenu d’un formulaire vers un fichier distant, récupérez le contenu généré par ce fichier distant et l’insérez dans le conteneur de votre choix.
var recupererInfo = function(quelForm){
Params = Form.serialize(quelForm);
new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {parameters:Params});
}

pour aller plus loin, on peut mettre plus de paramètres entre les accolades. exemple : {method: 'post', parameters: Form.serialize(form), asynchronous:false, evalScripts:true}
On peut aussi définir de ne pas remplacer le contenu du conteneur souhaité et plutôt mettre à la suite de ce qu’il contient déjà, il suffit de rajouter « ,insertion: Insertion.Bottom » . exemple : new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {parameters:Params},insertion: Insertion.Bottom);

Exemple 1bis : suite à la demande d’Abid, voici un exemple complet pour la soumission d’un formulaire en Ajax :
<script type="text/javascript">
/*
* personnellement, je déconseille désormais
* l'utilisation des commentaires HTML dans
* les balises JS qui n'ont plus vraiment
* d'incidence sur les navigateurs et qui
* peuvent poser des problèmes avec Prototype
*/
var lancerRecherche = function(infosForm) {
new Ajax.Updater('resultatsRecherche','exeRecherche.php', {parameters:infosForm});
}
</script>
<form method="post">
<fieldset>
<legend>Recherche</legend>
<select name="typeRecherche"> <option value="societe">Société</option> <option value="numCommande">Numéro de commande</option> <option value="nomParticipant">Nom de participant</option> </select>
<input name="recherche" type="text" />
<input value="Chercher" onclick="lancerRecherche(Form.serialize(this.form)); return false;" type="submit" />
</fieldset>
</form>

Pour cet exemple, le fichier exeRecherche.php reçoit les variables $_POST envoyées par le formulaire (sauf envoi de fichier en multipart/postdata) et renvoie son rendu HTML dans le conteneur resultatsRecherche.

Exemple 2 : version simplifiée du premier exemple. Via une ligne de code, envoyez un paramètre en GET ou en POST à un fichier et récupérez son contenu dans le contenur de votre choix.
var recupererInfo = function(param1,param2){
Params = 'monParam1='+param1+'&monParam2='+param2;
new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {method: 'get',parameters:Params});
}

Exemple 3 : vous pouvez récupérer le contenu de n’importe quel champ de formulaire, que ce soit une liste déroulante, des boutons radio, ou une champ de texte : alert( $F(‘idDeMonChamp’) );

Exemple 4 : vous pouvez oublier les document.getElementById(‘idDeMonConteneur’) et autres document.all(‘idDeMonConteneur’) et tout remplacer par le très simple $(‘idDeMonConteneur’)