AJAXed websites done right

Published by Ronny on October 18th, 2008 in General, Open-source, PHP, plugins. 2 Comments Tagged with , , , ,

Mijn beste maat, Nick, heeft zonet een van zijn coolste Javascript projecten online gepost. Het gaat om zijn Javascript class die het toelaat om een standaard (werkende) HTML site on-the-fly om te bouwen naar een full-option AJAX site.

Het idee was ooit ontstaan bij gesprekken over Flash-sites, AJAX-sites, Google-vriendelijke sites, en de snelst mogelijke en goedkoopste oplossing om deze RIA-oplossingen zo dicht mogelijk bij elkaar te brengen. Nick had de smaak te pakken en is er enkele maanden geleden in zijn vrije tijd aan begonnen. Gelukkig is hij koppig genoeg, zodat hij een paar weken geleden met een brede smile op zijn gezicht liet zijn hoe het ermee stond… Ik keek ernaar… Ik was onder de indruk…

Onlangs ging hij live met zijn nieuwe portfolio waarop je de Javascript class al in volle actie kan zien.

Enkele features:

  • 1 site bouwen: geen extra XML, geen bijkomende PHP functionaliteit, niets. Elke HTML site kan een AJAX site worden in enkele simpele stappen.
  • Het is simpel.
  • De site wordt niet destructief bewerkt door het AJAX script òf de implementatie ervan. Als je browser de AJAX functionaliteit niet aan kan, surf je gewoon door de standaard HTML site, zonder te bemerken dat er in feite ‘meer onder de motorkap’ zit.
  • Het script kan omgaan met ‘incorrecte’ HTML. Dit wordt niet aangeraden, maar de class is robuust genoeg om dit soort fouten te hanteren.
  • Je site blijft Google vriendelijk: ondanks het feit dat je bezoekers allerhande cool shit zien gebeuren, blijft Google een standaard HTML site zien, die goed kan geïndexeerd worden.
  • Deeplinking: gezien Google je site kan indexeren, kan je content van je site dus ook volwaardig naar voor komen in de zoekresultaten. Deze zoekresultaten zullen je naar de juiste pagina op de website brengen, vanwaar het AJAX script jou weer met eye-candy kan bedienen.
  • Crossbrowser: Internet Explorer, Firefox, Safari, Opera. Zelfs op de iPhone kan de website inclusieve AJAX features ten volle naar voor komen.
  • Error-handling en browser selection: Als er fouten gebeuren probeert de class dit zelf op te lossen. Hetzij door correctie, hetzij disablen van de class zelf, en de gebruiker zonder AJAX features verder laten surfen. Als de browser geen AJAX ondersteund schakelt de class zichzelf uit.
  • Animaties: Niets is leuker dan bewegende onderdelen om de gebruiker te laten weten dat de site verstaan heeft wat er gevraagd werd. De class preload de afbeeldingen en maakt vloeiende transities van één pagina naar de andere.

En dit zijn er slechts een paar. Er zijn nog heel wat features. Meer hierover op Nick’s blog.

Voorbeeld: byDust.com
Documentatie: byDust.com

Ik ben erg onder de indruk, en zal deze class binnenkort zelf inbouwen in mijn eigen site.
Lees er meer over op Nick’s blog (Engels).

Posts that somehow relate to this one:

You liked this article? No shit? Well, feel free to donate or share it with your friends using the following links. :)

popular opinion

2 others felt like sharing their feelings about this. Feel free to do so as well.

Erik Bauffman @ 18:29 - October 19th, 2008

Het ziet er nice uit, een dezer dagen ga’k er zeker eens mee experimenteren.

Gov @ 13:12 - October 28th, 2008

Heb het gisteren geïmplementeerd in mijn current project and it went as a snap! Wel is het eenbeetje uitkijken naar conflicten met andere Ajax klassen die dan eventueel niet meer worden geladen. Een probleem waartegen ik gestoten heb dus… In mijn volgend project hou ik daar zeker rekening mee.

Al bij al, deze “ByDust Ajax class” is een top “Ajax eye candy” die door om het even wie in no-time aan de praat zal krijgen! Aanrader!

Freedom of speech!

Whatever it is you feel: Tell me! It's for free!