Voor de Slickr Gallery, een AJAX Flickr plugin voor Wordpress blogs, had ik een andere Wordpress plugin nodig, namelijk Lightbox. Maar deze plugin lukt het ook aardig om van een thumbnail op een dynamische manier (DHTML) de grote foto te voorschijn te toveren op de webpagina.

Dit wordt hier bij Dynamic Drive DHTML Scripts’ Image Thumbnail Viewer geïllustreerd.

Wat HTML betreft: een snuifje CSS en Javascript in de header, plus een GIF voor de animatie terwijl de bezoeker op de foto wacht en last but not least een rel attribuut toevoegen in de HTML-code van de hyperlink.

De plugin installeren was een fluitje van een cent. Voor dit viewer script moet je toch hier en daar wat ingrijpen o.a. het pad naar de verschillende bestanden aanpassen. Je kunt er ook maar 1 foto meer tonen, niet een hele reeks foto’s zoals bij Lightbox wel het geval is. En sneltoetsen zoals bij Lightbox zijn er ook al niet.

Ik was al een tijdje op zoek naar een goeie open source IDE voor HTML, CSS en javascript. Toevallig vind ik vanavond Aptana, een IDE om gemakkelijk Ajax applicaties te ontwikkelen en te ontplooien.

Je vindt op de site alleszins heel wat screencasts om het werken met Aptana onder de knie te krijgen. Er is ook een screencast om te starten met een webproject gebaseerd op de YUI Javascript library.

Voor wie Flash en Javascript wil combineren om dynamische webapplicaties te maken, wordt er op de site ook verwezen naar AFLAX (Asynchronous Flash and XML).

paragraph

second paragraph

this is a blockquote

third paragraph

1. ordered list
2. etc.

• unordered list
• etc.

H1 header

H2 header

H3 header

H4 header

a link to this weblog

this is code
second line
third line


paragraph class=small

GIF of a dog

abbr tag

This CSS

Met een CSS document kan men de HTML elementen opmaken, zich baserend op de HTML 4.01 specificatie. Bekijk dit voorbeeld [CSS document] eens.

Twee aanbevelingen overgenomen uit bovenstaand voorbeeld:

• De eenheid 1em is ongeveer gelijk aan 12px.
• Naast een font-size ook altijd een line-height specifiëren.

een klein javascript om ook IE gebruikers tevreden te stellen. Dat alles lees je in het artikel Drop-Down Menus, Horizontal Style. Een HTML lijst met de menu items, wat CSS eraan toevoegen en klaar is kees. Maak eventueel het geheel nog wat aantrekkelijker door een kleurtje toe te voegen wanneer de muis over een menu item komt. Het proberen waard !

Gebruik CSS om websites op te maken. Max Design geeft enkele goeie voorbeelden van het gebruik van CSS: list, floating image, rules, selectors, het komt allemaal aan bod. Meer over web and graphic design vindt men op de website van Max Design.

Voor een overzicht: zie Three Column Layouts.

Geef aan een foto of ook aan een titel wat schaduw met de CSS-techniek die duidelijk beschreven en uitgelegd wordt in dit artikel van A List Apart.

In plaats van dit schaduweffect te realiseren met behulp van een fotobewerkingsprogramma, kan het eenvoudig met enkele CSS lijnen in het stijlblad en enkele kleine GIF-bestanden als achtergrond.

Het uitvouwen en samenvouwen van HTML-tekst (Expandable/Collapsible Content) wordt eenvoudig gerealiseerd met behulp van CSS.