Woensdag 30 Juli 2008 13:36 Laatste aanpassing (Zaterdag 15 November 2008 21:00)
Webdesign
Ik ben geen hard-core javascript-programmeur. Terwijl webpagina's steeds meer richting web-applicaties gaan. Denk bijvoorbeeld eens aan bijvoorbeeld Gmail. Een webpagina. Maar wat voor een. Het is natuurlijk eigenlijk een applicatie.
Voor mensen zoals ik is JQuery (en vele andere libraries) ontwikkeld. Wat toch een feest: in een handomdraai (en met maar een paar regeltjes code) heb je een mooie image gallery gebouwd met semantisch correcte html, en content, presentation en behaviour mooi gescheiden (zie verderop in de tekst).
Het is natuurlijk maar een eenvoudig dingetje en je kan natuurlijk ook Lightbox, Thickbox, Fancybox, of wat-voor-box-dan-ook gebruiken (zie een vergelijkingsmatrix) voor veel subtielere effecten. Het gaat me er nu om te laten zien dat je met een paar regels JQuery veel kan bereiken.
Eerst even iets over 'in een handomdraai': Als je gaat lezen over JQuery zul je vaak lezen dat het heel gemakkelijk is, dat het eigenlijk net CSS is, dat er geen leercurve is, etc. Dat kan allemaal wel zijn, maar het kostte me als niet-echte-programmeur nog wel even wat gepuzzel, om het aan de praat te krijgen.
Maar dat komt ook omdat ik me vaak te veel dingen afvraag vooraf. Gewoon een testpagina maken, zoals op http://docs.jquery.com/How_jQuery_Works beschreven staat, is een goed begin.
Voor inspiratie kun je terecht op WebDesignerWall. De code voor onderstaande demo (even doorscrollen, 't is maar een heel simpel demootje) vind je hier.
En hier een overzicht van veel gebruikte JQuery plugins: http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html (Terwijl JQuery zelf een library is 'bovenop' Javascript worden er weer JQuery-plugins geschreven: redelijk kleine stukjes code die je ná de JQuery core dient te laden.)
En wat dacht je hiervan:
Allemaal 'flash-achtige' menu's, maar in tegenstelling tot Flash perfect toegangelijk voor zoekmachines want het zijn eenvoudige list-items met wat classes en id's.
Om error messages etc te laden infaden en outfaden: http://jquery.offput.ca/highlightFade/old.php
Oh ja, wel eens de (Son of) Suckerfish menu gebruikt? Nu ook een JQuery-versie: http://users.tpg.com.au/j_birch/plugins/superfish/#examples. Zet de style-sheets in je browser maar eens uit en zet javascript uit. Zo, nu zien we het ongeveer zoals Google het ziet. Mooi he. Zo... zo... puur en geheel leesbaar.
En als je de boel weer aanziet en je begint op je tab-toets te tikken en je komt bij het menu uit dan... kun je door het hele menu tabben. Zo hoort het (dit ging volgens mij met de oorspronkelijke Suckerfish niet). Handig voor als je muis-batterijen leeg zijn, voor op PDA's, als je in een schokkende bus zit, of als je motoriek wat minder is.
Er zijn genoeg drop-down menu's te vinden die er precies zo uitzien maar die het geheel opbouwen zonder van een normale html-list uit te gaan en alles met javascript afhandelen. Geen goed idee. Voordeel van zo'n suckerfish menu is dat je het naadloos kan integreren met de menu-code die een fatsoenlijk content management systeem uitspuugt (met voldoende id's en classes aan de list-items etc).
JQuery kan veel meer dan image galleries bouwen; het is een library gebouwd op Javascript die het leven makkelijker maakt (net zoals Mootools, Prototype etc) doordat het veel lastige kwesties in Javascript al voor jou opgelost heeft (inconsistenties tussen browsers, etc).
Het werkt ook goed samen met andere libraries. Je kan het dus ook tezamen met Mootools (dat standaard in Joomla! geïnstalleerd is) laten werken, al moet je je wel afvragen of je dat wilt.
De syntax van JQuery lijkt erg op die van CSS en daarom is het voor mensen zoals ik erg handig.
Nog een aantal goeie bronnen:
Op mijn eigen site gebruik ik het ook (heel beperkt):
Oh ja, ook als je met AJAX aan de slag wilt, heeft JQuery hier oplossingen voor.
Je kunt JQuery inbouwen in je systeem, en met wat simpele html bijvoorbeeld een image gallery bouwen, zoals hierboven. Een class hier en een id daar.
Maar het kan ook anders: er worden plug-ins voor populaire systemen gebouwd, denk aan Wordpress, Joomla. Ik weet niet of er Joomla-plugins op basis van JQuery beschikbaar zijn, omdat Joomla standaard Mootools ingebouwd heeft (een 'concurrent' van JQuery), maar Wordpress heeft veel plugins beschikbaar.
Dan is het een kwestie van de plug-in installeren, en met een speciale syntax in je text-editor een gallerietje creeëren. Meestal een paar vierkante haken, iets in de trant van:
[gallery01]
of iets dergelijks.