De Modal Box

19 oktober 2010

Ook zooooo web 2.0 is de Modal Box, dialoogvenster in goed Nederlands. Een Modal Box is een goede manier om interactie toe te voegen aan webpagina’s. Mits spaarzaam gebruikt uiteraard. Voordeel is dat de gebruiker op dezelfde pagina bijvoorbeeld een formulier met contactgegevens of inloggegevens kan invullen, en dan ook op diezelfde pagina blijft. Of een ja/nee keuze voorgeschoteld krijgt.

Voor een paar goede voorbeelden zie hier, klik op de tabbladen ‘demo’. Zie coderplus.com voor 19 kant-en-klare oplossingen voor Modal Boxes in jQuery.


Tooltips, de nieuwe oude trend

04 oktober 2010

Een duidelijke trend van het moment is de tooltip. Volgens WikiPedia “…een informatieve tekst die verschijnt wanneer de gebruiker de cursor boven een item stilhoudt…”. De tooltip is vooral bekend van Microsoft Internet Explorer, daar zie je een handig geel vakje met toelichting bij hyperlinks, plaatjes et cetera.

Tooltips kunnen er ook wat aantrekkelijker uitzien. Zie dit voorbeeld voor een leuke tooltip (beweeg je muis over de zwartwitte foto’s). En zie vooral ook de 30 voorbeelden van kant-en-klaar te gebruiken tooltips van 1stwebdesigner.com. Een goede “tooltip-tip” is uiteraard om handige tooltips te gebruiken waar ze nodig zijn, maar niet alles te “tooltippen”. Voor je het weet worden je bezoekers informatiejunks…


Tutorial: jQuery plugin voor een Apple Dock OS X menu

29 augustus 2010

Er is een nieuwe tutorial verschenen bij mijn gloednieuwe jQuery Apple Dock plugin. Dit is een menu dat lijkt op het Apple Dock menu (besturingssysteem OS X). Je kunt het onder andere gebruiken voor het maken van links naar social networks. Zie de demo (het kleine menu onderaan de browser).


Goed boek: jQuery voor beginners tot gevorderden

16 augustus 2010

Tijdens mijn vakantie heb ik een fantastisch boek gelezen over jQuery: jQuery Fundamentals van Rebecca Murphey. Compleet met oefeningen, is dit online boek zeer geschikt om jQuery volledig te begrijpen en er praktisch mee te kunnen werken. Compleet met oefeningen, waarvan je de broncode kunt downloaden. Rebecca: bedankt!


Afgeronde hoeken

05 juli 2010

Het is een uitdaging waar elke webdesigner vroeg of laat tegenaan loopt: hoe maak ik afgeronde hoeken? Xhtml en CSS zijn eigenlijk niet geschikt voor het maken van afgeronde hoeken. Althans niet in alle browsers. Als het aan deze codetalen lag, zag je alleen kubussen en rechthoeken op het wereldwijde web. Slimme webdesigners hebben echter via verschillende benaderingen ronde hoeken weten te creëren. Zie bijvoorbeeld dit menu. De gebruikte techniek heet Spiffy Corners en maakt gebruik van pure Xhtml en CSS.

Je kunt het natuurlijk ook met plaatjes oplossen zoals hier. Zie het volledige artikel (uit 2003! maar nog steeds actueel) over hoe dit te realiseren.


jQuery plugins

15 juni 2010

Creatieve webdesigners hebben allerlei leuke plugins ontworpen in jQuery (zie bericht hier onder). Hiermee kun je een website snel en mooi opleuken. Zie dit bericht op line25.com, voor 30 voorbeelden van wat er mogelijk is.


jQuery

18 mei 2010

Dé trend van het moment in webdesign is jQuery. Maar Herman… wat ís jQuery? Eenvoudig, jQuery is een soort bibliotheekje met allemaal JavaScript-functies. Die JavaScript-functies worden gebruikt om interactie aan een website toe te voegen. Als je jQuery gebruikt voor een website, hoef je minder werk in het coderen te stoppen en kun je meer tijd stoppen in het leuke werk, het ontwerpen zelf.

Waar kun je jQuery allemaal voor gebruiken? Voor een heleboel dingen:

  • De achtergrond achter een website die om de 15 seconden wisselt van afbeelding
  • Een ‘poll’, waarmee mensen kunnen stemmen voor of tegen een bepaalde stelling
  • Het bouwen van een programma als Google Maps
  • Het maken van een interactief menu zoals onder alle YouTube filmpjes staat

Een alternatief voor jQuery is MooTools. Daarmee kun je precies hetzelfde doen als met jQuery, maar je moet wat meer kennis van JavaScript hebben. Meer voor de liefhebber dus. Hier heb ik een tutorial voor een slideshow in MooTools staan. Kijk ook eens naar de tutorials van jQuery.

Tip: gebruik jQuery, niet MooTools. Waarom? Omdat meer andere mensen jQuery gebruiken en omdat de support via forums beter is.


Lettertypes

27 april 2010

Kun je als grafisch ontwerper kiezen uit alle beschikbare lettertypes, als webdesigner ben je normaliter gebonden aan een beperkte lijst van ‘web-safe’ lettertypes. Voor de webdesigner die meer lettertypes wil, zijn er verschillende mogelijkheden beschikbaar:

  • CSS: de ‘@font-face’ eigenschap (niet door alle browsers ondersteund)
  • SIFR (Scalable Inman Flash Replacement)
  • FLIR (Face Lift Image Replacement)

 In deze twee goede Engelstalige artikelen worden deze mogelijkheden voor niet-standaard lettertypes uitgelegd.


Prezi, een leuk alternatief voor PowerPoint

30 maart 2010

Als je een presentatie moet geven, wat is er dan makkelijker om altijd PowerPoint te gebruiken? Er zijn echter ook leuke alternatieven, waarvan ik Prezi wel de leukste tot nu toe vind. Een met Prezi gemaakte presentatie heet een ‘Prezi’…

Je kunt de presentatie online of met een down te loaden programma op je computer maken. De presentatie is down te loaden naar je USB stick zodat je hem stand-alone kunt afspelen vanaf je laptop op de beamer. Een Prezi in je website ‘embedden’ is ook mogelijk.

Als voorbeeld hieronder een eenvoudige bedrijfs-’Prezi’ over waywayway!
(Beweeg de muis onderin het scherm voor het presentatiemenu.)


Hoe groot moet een website zijn?

16 maart 2010

Een van de eerste vragen bij het ontwerpen van een website is: welk formaat moet het ontwerp hebben? De meest voorkomende schermresolutie bij een groot onderzoek in België blijkt momenteel 1024×768 te zijn.

Het advies van de Belgische usability-bloggers van usability-blog.be aan de website ontwerper is een beetje een open deur maar toch zo waar: laat website ontwerpen vloeibaar zijn. Dat wil zeggen dat de site altijd alle beschikbare ruimte op het scherm van de gebruiker vult.


< Nieuwere berichten | Oudere berichten >
 

Handig & leuk