Webinventif

une question mon ptit k-ny, niveau référencement, les liens sont considérés comme des liens vers des ancres ou ouvrant une page externe ?
car le premier cas, notre amie la pieuvre risque de ne référencer que la page globale et ignorer celles qui sont ouvertes à l’intérieur, un peu comme une iframe.
En tout cas le rendu est sympa, je l’aurais bien testé mais ce détail me titille.

Je ne suis pas vraiment sûr de comprendre l’intérêt de cette technique. Et je comprends encore moins à la vue des contraintes ergonomiques qu’elle impose :/

@Eugene

Les liens ne changent absolument pas, ils pointent simplement vers une véritable page HTML complète. Ma fonction javascript utilise l’attribut href du lien pour loader la page distante et parser le contenu chargé pour ne remplacer que l’ID ciblée. Donc les moteurs de recherche ne font pas de différences avec des liens normaux. Donc pas d’obfuscation du référencement …

D’ailleurs le menu test 3 de mon exemple montre le fonctionnement comme pour un moteur de recherche (sans javascript donc)

@Murdock

C’est vrai qu’il y a les petites contraintes ergonomiques, mais au moins on ne subit pas les contraintes dues au référencement et à l’accessibilité, ce qui est habituellement les plus gros soucis rencontrés avec se genre de navigation. Donc ce tutoriel sert surtout à changer un peu l’expérience utilisateur, comme on le fait souvent pour des petits sites vitrines ou promotionnels (mieux vaut ça que du flash) ..

Après, je ne force personne à s’en servir, mais vu le nombre de mail que j’ai déjà reçu au sujet de mes liens « a propos » etc … je pense (et j’espère) que certains y trouveront satisfaction

Héhé!
Perso je suis en train de déve un plugin jQuery basé sur le même principe, qui à l’heure actuelle est un peu plus poussé que ton exemple.
Il permet de modifier plusieurs blocs d’un coup, de personnalisé les effets et les fonctions de callbacks et à terme va gérer l’historic (me reste plus que ça à coder)

Merci, encore un bon tutoriel ! J’aime bien ce menu !Bravo à toi

@Mat, de rien

@MoOx
Nickel, j’avais effectivement pensé a en faire un plugin plus poussé, mais je manque vraiment de temps.

En tout cas fait moi signe quand il sera abouti, j’te ferais un coup de pub

Pas de soucis
Ca commence à être bien stable et évolutif ^^

yep c’est cool! mais en effet niveau reférencement j’y trouve des lacunes. Je m’explique, en effet le href présente bien le lien de la page mais si cette dites page est référencée ben on arrivera sur une page sans menu
de plus, mais la je chipote, si l’on veux transmettre le lien d’une page intéressante a un ami, ben la copie en barre d’adresse ne sera pas la bonne

Merci pour le truc, je vais tester tout ça!

Je ne veux pas jouer le rabat-joie mais c’est pas tip top pour le référencement ! :/

Mais ça reste intéressant dans le principe

@Murdock

salut
c’est super comme tuto cependant j’ai une question sur le referencement et le visuel

parce que le moteur de recherche
va referencer

des adresses
http://…/projets/ajaxisation/

http://…/projets/ajaxisation/pages/page1.htm

si on tombe sur la page1.htm depuis un moteur de recherche il va y avoir un souci au niveau de la charte graphiphe…

Est ce qu’on peut palier cela ???

merci et bonne nuit !

sur ton site tu utilise ce script pour faire ta page a propos et ca fait pas pareil graphiquement…

ou et ta solution ????

@Benoit, pour le lien a transmettre ok c’est vrai. Mais pour l’histoire du menu, il suffit de l’inclure aussi sur les autres page ! Je ne l’ai pas fais dans l’exemple mais ça ne change rien au fonctionnement

@Blogiz, mais pourquoi ce n’est pas top pour le référencement ? Le site est construit de façon normal, exactement comme si il n’y avait pas de javascript !

@akouel337 et aux autres,

le principe de ce tuto, c’est de pouvoir « ajaxiser » un site tout à fait normal et existant. Donc un site avec des pages contenant menu et tout ce qu’il faut … En gros, il suffit de construire votre site sans vraiment penser à « l’ajaxisation ». Dans le cas d’un cms comme wordpress, il n’y a rien à modifier, il suffit juste d’inclure le javascript et de cibler la div a remplacer et les liens à activer

Bon j’ai compris, c’est ma faute, je vais inclure le menu sur toutes les pages de l’exemple …

@akouel337, pour mon site, j’utilise exactement la même fonction animé que dans ce tuto …

Mea-culpa, j’ai rien dit !

Effectivement il y a aucun problème vu que les liens appellent des pages et non a des fonctions java script

merci pour ta reponse

c’esst super ! par contre je ne crois pas que ton systeme qui envoi un mail lorsqu’il y a une reponse marche bien

car j’ai rien recu !

merci pour tout

est ce ca pose un probleme cette ajax avec les formulaire et comment fait -on si je fais un lien sur le texte il y a aucune particularité à faire ? pour garder la meme mise en page ?

@Blogiz, y a pas d’mal

@akouel337, oui j’ai des petits soucis temporaires avec les mails.
Si tu charge un formulaire ajax, tu pourrais rencontrer des problèmes … tout dépend comment le javascript du formulaire est implanté (en dur, dans un fichier .js …)
Pour le reste je n’ai pas bien saisi ..

Si je mets un lien dans la ou ya le texte en alllemand qui pointe vers la page 4 par exemple on fait un lien normal ???

<a href= »" rel= »nofollow »>texte </a>

Je me permet d’ouvrir ma bouche.
Je connais bien le référencement, et je ne vois aucun problème potentiel. Perso ma méthode ne pose aucun problème.
Il faut faire son site normalement, optmisié référencement. Sans javascript. Ok.
Mais les robots n’ont pas le js et s’en contrefoutent.
Après on rajoute un plugin et paff y’a la nav ajax. Mon système récupère la page entière donc tout le code, et ne récupère que les morceaux que vous voulez rendre dynamique (dont le title de la page pour faire mieux).
C’est du js non intrusif ça ne pose donc aucun soucis.
Allé voir su mon site avec ou sans javascript, Vous verez bien que mon site est opé dans tout les cas.
Note: mon dév n’est pas fini et ne gère pas encore l’historic comme dis plus haut mais ça va arriver)

(Arf merde dns mon site est inopé) :s

je me reexplique

si je mets un lien dans la partie ou ya le texte en allemand est ce qu’il va s’ouvrir correctement ou non ???

une autre question est ce que avec jquery tu peux faire un triage de tableau sans rafraichir juste par colonne

avec un exemple
www.fulltiltpoker.com/fr/sunday-brawl

ca pourrait faire un autre bon tuto

deux fois je publie un message et deux fois il n’apparait pas bug ? ou moderation ?

@Mr.MoOx, oui oui et ton site et HS depuis un petit moment déjà ^^

@akouel337, tes messages était partis dans la boite à spam !

Pour le triage de tableau, il y a un plugin jQuery extra pour ça: http://tablesorter.com/docs/

Pour ton lien texte allemand, vraiment je ne saisi pas, t’as pas un exemple précis ?

est ce que tu pourrais m’envoyer le zip par mail ? celui de ton site ne marche pas chez moi
mon adresse est aquewel@hotmail.com

merci bonne journée
axel

je commence en javascript et j’ai intégré ton tuto de la manière suivante :

Bienvenue

function ajax_page(ele,msg,url){
$(ele).html(msg).load(url+ » « +ele);
}

$(document).ready(function(){
$(« #bip »).click(function(){
ajax_page(‘#swithcontenu’,'Chargement …’,this.href);
return false;
});
});

En ajoutant biensur l’id dans la partie xhtml
Peux tu m’indiquer l’erreur que j’ai faite ?
de plus la page indiqué par l’url concerné doit bien être une page html classique ?
Merci d’avance

En fait, cela sert un peu à rien sauf si vous vous assurer que les moteurs de recherche puissent voir une version standard de votre site (sans javascript).

Le fait d’avoir la page qui s’ouvre en AJAX est peut être beau à voir et pratique pour l’utilisateur mais personnellement, je ne le recommanderai pas sauf si vous savez comment les moteurs de recherche fonctionne.

Bref, à utiliser avec modération !!

@akouel337, zip ok chez moi !

@estelle, #bip est l’id de quoi ? D’un lien ou d’une div contenant des liens ? Si c’est le 2ème cas alors essais de remplacer :

$('#bip').click(function(){

par

$('#bip a').click(function(){

@Tommy, oui, je sais comment les moteurs fonctionnent, il ne prennent tout simplement pas le javascript en compte. Et c’est l’avantage de ma méthode, qui ajoute la surcouche de javascript sur un site déjà existant et fonctionnel ! Pour t’en convaincre, va voir ma demo, le menu de test 3 est construit exactement pareil que les 2 autres menus, sauf qu’il n’a a aucun javascript qui lui est appliqué …

Ouais t’as bien raison. Vu ques les robots pompent rien au js, c’set tou bénéf (j’dis ça, mon boss est référenceur naturel)
Mon site remarche (et vous vous regarderez bien qu’il marche parfaitement sans js! => donc les robots n’ont aucun problème!!=>donc le site est référencé normalement)

#bip est bien l’id d’un lien, donc je ne pense pas que l’erreur vienne de là.

ok c’est bon j’ai recu en faite:-)

tu utilise la meme chose pour ton site c’est bien ca ?

mais toi les liens change dans la barre d’adresse ainsi que le titre ??

ca c’est verifié sur certaine page mais pas touteS….

toujours pour relancer le sujet, étant pur debutant, y a un truc serieux qui va pas dans ton code ou plutot a améliorer c’est les accents il ne passe pas….. il faudrait tout encodé

???? une petite suggestion ????

buenanoté

A mon aivs, ça viens plutôt de ton serveur enfin de la sortie qu’il produit. Il faut préciser les entêtes…

@akouel337

Voilà, je suis de l’avis de MR.Moox, ça doit ètre un soucis d’encodage (utf-8), car de mon coté les accents passent nickel …

oui mais pourtant ils sont tous comme ca ….

– Recherche de joueurs

Salut,

J’ai le même probleme d’accent avec jquery et pourtant, mon charset est déclaré dans les metas des 2 pages (page receptacle et page appelée)… Est ce que quelqu’un aurait une solution, pour ceux qui veulent concretement connaitre mon cas, l’adresse de la pge est la suivante: http://coenonympha.free.fr/cocktail/index.html

Merci pour vos eventuelles réponses

@coenonympha
Avoir le mème charset n’est pas suffisant, vérifie que tes 2 pages aient la même encodage (en dur, enregistrer sous via le bloc note)

Bonjour,
joli travail!
J’ai voulu faire la même chose mais je n’ai pas utilisé la même méthode.
Si tu veux aller jeter un oeuil

http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/

A bientôt

Il dit qu’il voit pas le rapport…

Autant pour moi j’ai fait une erreur dans mon copier coller….

http://antoine.guiral.info/wp-admin/post.php?action=edit&post=79

T’as encore du mal avec les copier coller :p

mais décidemment jsui un boulet ou quoi?

http://antoine.guiral.info/2008/04/20/tuto-jquery-navigation-en-ajax-non-intrusif-12/

je reviens sur le sujet

je pige pas trop ton code antoine ou fo mettre le code et tout….

et sur le tien keny comment je peux faire lorsque les liens sont sur une map avec des zones cliquables ?

bonne journée

@akouel : salut, je veux bien faire le service après vente ici mais ça m’embête de polluer les comm’s de keny (je l’ai déjà assez fait avec mes probs de copier coller…) je te répondrais sur mon blog si tu veux

Bonjour et merci pour ce script! Je voulais inclure des effets jquery dans une page appelée en ajax (un caroussel pour être précis). Seulement l’effet n’est pas appliqué (cela fonctionne très bien dans la page appelée directement, sans ajax). Savez-vous si il y a un moyen de faire ça?

http://jquery.developpeur-web2.com/documentation/ajax/$.getScript.php ca devrait t’aider sinon il faut que tu bind a nouveau ta fonction sur ton élément car le ready ne prend pas en compte l’ajax

Merci pour cette réponse très rapide!
Donc ça fonctionne très bien en ajoutant (pour le plugin cycle par ex), après $(ele).html(tampon); :
$.getScript(« jquery.cycle.js », function(){
$(‘.pics’).cycle({ fx: ‘slideY’, timeout: 5000, pause: 1 });
});

Bonjour à tous, en passant par hasard sur ce site (que j’aime bien graphiquement d’ailleurs), je tenais à préciser que, effectivement, la navigation est possible en mode dégradé (javascript Off), ce qui n’entrave donc en rien le référencement par les moteurs de recherche (puisqu’ils ne peuvent comprendre le javascript), ils réagissent donc comme un utilisateur ayant désactivé son JS.

Néanmoins, ce qui me dérange dans cette méthode, c’est surtout le fait que le contenu ne soit pas lié à l’url courante, ce qui empêche donc toute navigation normal ou tout bookmark de la page.

La mise en place de la gestion de l’historique pour un parcours en full ajax d’un site est pour moi tout aussi important que de s’assurer du bon référencement du site , et du caractères non intrusif du code JS. D’autant que Jquery dispose d’un plugin fort intéressant : http://plugins.jquery.com/project/history et voici un article très intéressant sur la navigation en ajax en respectant les contraintes d’accessibilités et d’ergonomie : http://www.clever-age.com/veille/blog/comment-gerer-une-navigation-en-ajax.html

@ bientôt !!

Salut k-ny,

Tout d’abord merci pour ton code, c’est ce qui m’a lancé pour de bon dans l’ajax.

Je suis donc en train de refaire un site existant grâce à cette méthode cependant je rencontre un problème esthétique (pas très grave en soi) avec la version advanced que je n’arrive pas à comprendre.

Il se trouve que la page qu’on appelle s’affiche très succinctement avant le retour du texte de chargement ce qui fait un clignement désagréable et non demandé.

Le code est identique au tien et ce même code marche parfaitement dans l’exemple d’utilisation.

Je ne comprends vraiment pas où est l’erreur, ce n’est ni l’animation flash, ni mon autre js (qui me permet de slider le menu services) qui provoquent ça, j’ai fait des tests sans et c’était pareil.

J’ai mis la version actuelle du site avec le problème ici : http://juricayproperties.com/ajax_juricay/

Ton script se trouve à partir de la ligne 85, ce qui est au dessus me permet juste de transformer les liens pour pointer vers la bonne URL.

Voila, je crois que j’ai tout dit alors si tu as un indice, je suis bien évidemment preneur

Merci.

Bon, je me réponds tout seul vu que j’ai enfin trouvé la réponse à ma question précédente.

En fait ça venait de ma librairie jQuery (sûrement pas à jour), j’avais pourtant fait des tests là-dessus aussi mais j’ai dû m’emmêler les pinceaux à un moment donné.

Une journée de perdu mais au moins j’ai trouvé et ça m’apprendra à double tester la prochaine fois.

Merci encore pour ton script