• Webdesign

• woensdag, 30 juli 2008 12:36
• Laatst aangepast op zondag, 14 juni 2009 12:34

Ik ben geen hard-core javascript-programmeur.

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).

Op mijn eigen site gebruik ik het ook:

• De menu-pijltjes heb ik met JQuery gegeneerd
• Het hover-effect (bijvoorbeeld over de play-knop, 'rechtsboven') over de afbeeldingen op de homepage heb ik ook met jQuery geanimeerd
• De Youtube-filmpjes op mijn site bouw ik ook in met behulp van JQuery. Het enige wat ik hoef te doen, is een link naar de filmpjes op te nemen en deze een class mee te geven. De ingevoerde html zie je als je 'view source code' doet, wat JQuery er mee doet, zie je als je via de Webmaster Toolbar een 'view generated source' doet.

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.

Overzicht veelgebruikte JQuery plug-ins

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.)

"Flash"-menu's

En wat dacht je hiervan:

• http://nettuts.s3.amazonaws.com/009_jQueryMenu/sm/result/index.html
• http://css-tricks.com/examples/GarageDoorMenu/
• http://www.tyssendesign.com.au/examples/animated-nav.htm
• http://snook.ca/technical/jquery-bg/
• http://nixboxdesigns.com/lavalamptest.html

Beetje menu-achtig (maar dan images in een list):

• http://www.sohtanaka.com/web-design/examples/image-zoom/

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

(Son of) Suckerfish

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 image gallery demootje, heel basic

Voor inspiratie kun je terecht op WebDesignerWall. De code voor onderstaande demo (even doorscrollen) vind je hier.

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.

---

JQuery is een library

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:

• De website van JQuery zelf
• Simon Willison's Weblog
• Dev.Opera over JQuery
• SitePoint's Easy Javascript for Designers
• http://www.learningjquery.com/
• http://jquerystyle.com/tutorials/
• http://twittexperts.com/link/91504332922 (over simpele regels om de performance te verbeteren)
• http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
• http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html

Oh ja, ook als je met AJAX aan de slag wilt, heeft JQuery hier oplossingen voor.

JQuery en populaire blogsystemen / cms

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.

Portfolio:

Nu je hier toch bent aanbeland: neem eens een kijkje in mijn portfolio.