This article has been published in Usability Magazine #3, see usabilityweb.nl. It is available in Dutch only.
\r\n\r\n\r\nBij het artikel horen een aantal toelichtingen waarvoor in de gedrukte versie geen ruimte meer was. Dit zijn:\r\n
- \r\n
- De basis van het Semantic Web \r\n
- GRDDL als brug \r\n
- hCard in html \r\n
- Veiligheid en privacy \r\n
\r\n\r\n
Het statische world wide web
\r\n\r\nRond 1990 werd het world wide web bedacht door Tim Berners-Lee. Het succes was enorm, mede door de eenvoud van de basis technieken die gebruikt werden. Daarbij was de belangrijkste doorbraak de opmaak van informatie in HTML, met als unieke eigenschap de links naar de rest van het web.
\r\n\r\nGedurende de eerste tien jaar groeide het web exponentieel, waarbij iedereen die dat wilde, zijn informatie op zijn eigen wijze vorm gaf en op websites beschikbaar maakte. De bezoeker van een website kon deze bekijken, maar er niets aan toevoegen. Ook het vinden van informatie bleef een lastige opgave, zeker omdat zoekmachines nog niet goed ontwikkeld waren.
\r\n\r\nVerre belofte: het semantic web
\r\n\r\nHiermee was dit niet het web zoals Berners-Lee dit oorspronkelijk voor ogen had. Hij was veel meer uit op een web waarbij informatie ruimer toegankelijk was. Ruimer dan in het geval van een website met een enkele beheerder bereikbaar was. In de eerste plaats doordat iedere webpagina te bewerken zou zijn door bezoekers (dit is later gedeeltelijk gerealiseerd, in de vorm van Wiki's). Maar ook doordat informatie eenvoudig en automatisch gecombineerd zou moeten kunnen worden. Dit laatste idee verwoordde Berners-Lee rond 1999 als The Semantic Web, kortweg semweb. Informatie wordt hierbij voorzien van betekenis die ook door machines, computers, te interpreteren is. Het basis principe komt er op neer dat er rijke meta-data wordt toegevoegd, dat wil zeggen, informatie over de (soort) informatie. Daarnaast werd er een hele reeks aan standaarden en technieken voorgesteld om deze meta-informatie te kunnen verwerken.
\r\n\r\nHet semweb leunt zwaar op nogal abstracte disciplines uit de academische wereld, kunstmatige intelligentie, verzamelingenleer en archiefwetenschappen.
\r\n\r\nDit is lastige kost, heel anders dan de schijnbare eenvoud van opmaak in html. Het semweb werd dan ook aanvankelijk buiten de wereld van wetenschap en bibliotheken vrijwel genegeerd.
\r\n\r\nNaast de lastige academische materie waren er nog meer redenen waarom het semweb niet direct een succes werd. Het toevoegen van gegevens over web content, metadata, is veel werk en de eerste jaren zou daar nog niet veel profijt tegenover staan. Daarvoor is het immers nodig dat alle relevante informatie op het web verrijkt is, een enorme klus voor de content producenten.
\r\n\r\nRond de eeuwwisseling was ook de tijd dat Google een nieuwe manier introduceerde om het web te indexeren. Door gebruik te maken van de structuur van het web zelf bleek het mogelijk om verrassend goede aannames te maken over de relevantie van gegevens. Dit maakte het handmatig verrijken van content minder urgent.
\r\n\r\nToch waren de beloften van het semweb niet gering. Een standaard voorbeeld uit die dagen ging over het gebruik van intelligente agents die op zoek gaan voor hun opdrachtgevers en zelfstandig activiteiten uitvoeren of met adviezen komen. Zoals bij het maken van een afspraak: ik wil een afspraak maken met collega's en stuur mijn agenda agent het net op, met de namen van mijn gesprekspartners. De agent weet wanneer ik beschikbaar ben en gaat op zoek naar de informatie van alle betrokkenen. Door alle beschikbaarheidsgegevens en voorkeuren te vergelijken, wordt er vanzelf een afspraak geboekt en in alle agenda's bijgeschreven.
\r\n\r\nHet sociale web
\r\n\r\n Vanuit een heel andere hoek bleek er uiteindelijk toch meer behoefte aan een rijker web te komen. Vanaf 2000 groeide het verschijnsel van de weblog exponentieel. Dit leidde tot de opkomst van een sterke sociale component bij het publiceren op het web. Ik vertel op mijn weblog graag wie mijn vrienden en inspiratiebronnen zijn en deel belangrijke gebeurtenissen met anderen. Met de enorme groei van het aantal weblogs werd het ondoenlijk om alle blogs actief bij te houden. RSS feeds (op zich een veel oudere techniek) boden een gedeeltelijke oplossing, maar er moest meer gebeuren om informatie thematisch te kunnen verzamelen.
\r\n\r\nIn 2004 signaleerde uitgever Tim O'Reilly dat er een wezenlijke sociale- en samenwerkings component aan het web werd toegevoegd en hij noemde dit Web 2.0. Een van de kenmerken was het toegankelijk maken van ruwe gegevens voor derden. Door deze gegevens te combineren met andere bronnen en verder te verwerken (te mixen) kunnen er geheel nieuwe, vaak verrassende toepassingen gemaakt worden. Een vroeg voorbeeld is housing maps, dat huizen die op Craigs List te koop staan, op Google Maps markeert.
Een verschijnsel dat een hoge vlucht nam was het taggen van informatie en links. Bekende voortrekkers zijn del.icio.us (bookmarks) en flickr (foto's). Zo'n verzameling tags, met betrekking tot een zelfde onderwerp, wordt ook wel folksonomy genoemd. Ook voor weblogs werden tags populair. Op basis van deze tags kunnen blogs dan weer thematisch gegroepeerd worden. Een bekend voorbeeld is Technorati, dat op basis van door gebruikers aangebrachte tags weblogs en artikelen groepeert en samenvoegt.
Hiermee was er een grote vraag naar informatie met goede meta data ontstaan, ook buiten de blogosphere. De business case voor het semweb was als het ware rond. In dat zelfde jaar 2004 stelde Tantek ‚elik (van Technorati) microformats voor onder de veelzeggende naam Real World Semantics. De doelstellingen van het semweb worden verwezenlijkt met bestaande (x)html techniek, voor en door de gewone gebruiker - primair de weblogger.\r\n\r\nMicroformats
Microformats zijn snel populair geworden als eenvoudig, begrijpelijk alternatief voor ingewikkelde semweb technieken. Het uitgangspunt is bestaande web techniek, voornamelijk html en wat css. Hieronder wordt in meer detail ingegaan op de kenmerken.\r\n\r\n
Voor \"gewone\" mensen
\r\n\r\nDe definitie van microformats, vrij vertaald:
\r\n\r\n\"Microformats zijn in de eerste plaats ontwikkeld voor mensen en op de tweede plaats voor machines. Het zijn open data formats, gebaseerd op bestaande en veel gebruikte standaarden. In plaats van het wiel opnieuw te willen uitvinden, bouwen microformats verder op wat nu al werkt, door uit te gaan van eenvoudige oplossingen. En door huidige patronen in gedrag en gebruik als basis te nemen.\"
\r\n\r\nEn inderdaad, de basis van microformats is gewoon bestaande html. Daar binnen wordt bepaalde informatie vervolgens op een gestructureerde manier opgenomen. Let wel, het gaat hier niet om de uiterlijke weergave, de vormgeving of layout, maar om de interne structuur van de html. Zo bestaan er afspraken voor een groeiend aantal formaten. Een paar voorbeelden:
\r\n\r\n- \r\n
- hCard: adres- en contact gegevens \r\n\r\n
- hCalendar: agenda gegevens (gebeurtenissen en data) \r\n\r\n
- XFN: relaties (wie zijn mijn vrienden en bekenden) \r\n\r\n
- hReview: recensies \r\n\r\n
- XOXO: lijsten, opsommingen, definities \r\n\r\n
- hResume: curriculum Vitae (een samengesteld formaat). \r\n
Door \"gewone\" mensen
\r\n\r\nHet is opvallend dat de specificatie van microformats niet door een offici‘le commissie wordt bepaald, maar door een zelf georganiseerde groep van web ontwikkelaars, met een brede belangstelling voor sociale processen op het internet.
\r\n\r\nAl deze formaten komen tot stand op basis van uitgebreide observatie hoe de betreffende soort informatie in de praktijk het vaakst wordt gepubliceerd. Vervolgens wordt er kritisch gekeken naar wat er daadwerkelijk gebruikt wordt en waar de knelpunten zitten. Zo is bijvoorbeeld het hCard formaat gebaseerd op het al veel langer bestaande vCard formaat (bekend van o.a. Outlook en Mac Adresboek).
\r\n\r\nDe uitgangspunten zijn steeds:
\r\n\r\n- \r\n
- Een specifiek probleem oplossen \r\n\r\n
- Zo simpel mogelijk beginnen \r\n\r\n
- Ga uit van menselijk gebruik, daarna de machine \r\n\r\n
- Maak gebruik van veel gebruikte standaarden \r\n\r\n
- Modulaire opzet, samen te voegen tot groter geheel \r\n\r\n
- Bevorder decentrale ontwikkeling, content en diensten \r\n
Toepassingen
\r\n\r\n Microformats zijn niet bedoeld als volwaardig alternatief voor het semweb. Maar een aantal kenmerken komen wel in die richting. Nu al is er een zoekmachine voor microformat content, waarmee je kan zoeken naar personen, gebeurtenissen of recensies.
\r\n\r\nVoor de browser Firefox zijn er een aantal plugins die microformats detecteren. Vervolgens kan je de microformat gegevens gebruiken om te zoeken op andere websites, of exporteren naar andere programma's op je computer.
Uitwisselen van gestructureerde gegevens tussen webpagina's en locale applicaties wordt ook mogelijk gemaakt met Live Clipboard, een voorstel van Microsoft dat een jaar geleden met veel enthousiasme ontvangen werd (Ray Ozzie: Wiring the Web).
\r\n\r\nDit maakt nuttige toepassingen mogelijk, dicht bij huis.
\r\n\r\nVoorbeeld: adresgegevens, opgemaakt als vCard, kan je direct vinden op Google Maps voor een routebeschrijving.
\r\n\r\nOf: het jaarprogramma van de voetbalclub met uit- en thuis wedstrijden, opgemaakt met hCalendar. Met een enkele druk op de knop staat het hele programma foutloos in je eigen agenda.
\r\n\r\nMaar er zijn ook toepassingen waarbij informatie van verschillende bronnen met elkaar in verband gebracht kan worden. Zo kan je door het koppelen van XFN relatienetwerk gegevens uitvinden of, en hoe, je via je vrienden in contact met iemand kan komen.
\r\n\r\nHier liggen grote mogelijkheden voor sites die gegevens verzamelen en indexeren. Van een recensie in hReview is het onderwerp eenduidig vastgelegd en meerdere recensies zijn makkelijk tot een gezamenlijk oordeel samen te voegen. Via je vriendenlijst kan je dan bijvoorbeeld recensies van mensen uit je eigen netwerk zwaarder laten wegen.
\r\n\r\nDe mogelijkheden werden eigenlijk alleen maar beperkt door de beschikbaarheid van microformats in de praktijk. Op dit moment is er een ware explosie in aandacht voor microformats. Veel toepassingen zoals weblog software (Wordpress, LiveJournal) worden voorzien van microformat opmaak, zonder dat de eindgebruiker er iets voor hoeft te doen. Onlangs heeft zakelijke netwerk site LinkedIn beknopte versies van de CV's van hun 9 miljoen leden als hResume gepubliceerd. Het ziet er hiermee naar uit dat de doorbraak vanuit de aanbod zijde aan het komen is, de toepassingen volgen nu heel snel.
\r\n\r\nToekomst
\r\n\r\n De kritische massa voor microformat content is bij de web pioniers inmiddels wel bereikt. Voor eindgebruikers is het aanbod nog wat mager. Het meest zichtbaar zijn vaak de enigszins knullige logo's op websites, zoals we die ook kennen van RSS feeds en podcasts. Hier ligt nog veel werk voor usability experts en vormgevers om daar meer mee te doen. Dit wordt door Alex Faaborg, UI designer voor Firefox, onderkend in het artikel Structured Data Chaos.
\r\n\r\nVerder zal webbrowser Firefox in versie 3.0 sterke ondersteuning voor microformats gaan bieden. Dit betekent dat de webbrowser een functie kan krijgen als centrale informatie makelaar voor het web. Het online en offline beheer van je gegevens, koppeling en uitwisseling via het web: The Web Browser as Information Broker (Alex Faaberg). Dat hier grote usability uitdagingen liggen mag duidelijk zijn. De informele webloggers en de open source gemeenschap hebben het voortouw genomen. Als de gereedschappen voldoende bruikbaar worden voor het grote publiek, is het ideaal van het read/write web, ofwel het Web Operating System, veel dichter bij gekomen.
\r\n\r\nVanuit het semantic web kamp lijkt er een voorzichtige toenadering naar de enthousiaste microformat communities te beginnen. Aan de ene kant zijn de microformats heel duidelijk gedefinieerd, waardoor ze eenvoudig te beschrijven zijn in semweb termen. Aan de andere kant begint het besef door te breken dat een dergelijke massabeweging het gebruik van meta data op het web eindelijk tot een succes zal kunnen maken (The Shortest Path to the Future Web, Danny Ayers voor IEEE Internet Computing, dec. 2006).
\r\n\r\nDoor deze kruisbestuiving kan het ontstaan van het semweb uiteindelijk via een proces van evolutie lopen. Kleine stapjes tegelijk, waarbij technieken die niet gebruikt worden ook weer (tijdelijk) vergeten worden. Langzamer dan een van bovenaf opgelegde revolutie, maar diep verankerd in de belevingswereld van de gebruikers van het web zelf.
\r\n\r\n[ratings]\r\n[tags]usability, web30, semweb, microformats[/tags]" .I just found out about some Unix history by using the zcat command on Mac OSX Tiger.\r\n
zcat is the really handy shortcut command to quickly expand a (gzip-) compressed file on the fly, e.g. for viewing a logfile, as in:
$ zcat /var/log/messages.0.gz | grep \"Error:\"
Now suddenly this didn't work for me, the command kept saying something like \"messages.0.gz.Z: file not found\". The reason appears to be that there was an ancient zcat tool, way before Linux and the GNU project were invented, which only operates on \"compress\" compressed files, ending in .Z
Compress was an old Unix compression format, which to my knowledge nobody is using for at least 10 years.
And for some reason, Apple reverted back to this original tool, leaving zcat as gzcat. I guess they get some unix purity karma for this, but to me it's just confusing and some Unix history I really don't need to know about.
So folks, just remember: use gzcat and everything will work just as always under OSX.
$ gzcat /var/log/messages.0.gz | grep \"Error:\"
And don't forget to inspect your shell scripts if something just stopped working when migrating from Panther to Tiger...
" .There's some weirdness with the GM_xmlhttpRequest and the HEAD method.
\r\nIn the first place, the readychangestate event seems not to fire in a reliable way, but this is more or less a known bug (diveinto greasemonkey).\r\nOn the other hand, there appears to be just one and only one callback for the HEAD method, so no urgent need to check the readystate value.
The other weirdness is that sometimes the onload handler doesn't get called, while the onerror handler fires with a perfectly legal result (e.g. status 200 OK).
Observations
There seems to be not much of a pattern in which sites do trigger the onerror or onload events. The behavior seems consistent for each request though. With a couple of tests, http://www.yahoo.com consistently triggered the onerror, while a couple of other sites just worked fine.
\r\n\r\nWork around
My work around for the time being is:
\r\n- \r\n
- Avoid checking readystate altogether \r\n
- Duplicate the callback function for both
onloadandonerror\r\n
Today, I published my Greasemonkey user script: Link Checker.
\r\n\r\nIf you have Firefox 1.5, with Greasemonkey installed, you can quickly scan your web pages for broken links.\r\n
\r\n\r\nThere is one catch: you need to manually enable the script for the pages you like to scan. The most easy way to do this, is from the Greasemonkey menu (click on the little monkey fase in the right lower corner of your Firefox window's status bar).\r\nJust add the url(s) you want to enable in the box labeled with Include Pages. A * serves as wildcard, so any page on a Google subdomain is added like this:\r\n
\r\n\r\n\r\nhttp://*.google.com/*\r\n\r\n\r\n
Enjoy!
\r\n\r\n" .Using XMLHttpRequest to fetch binary data from a HTTP source is \"problematic\", as you can find with a simple websearch.
But what exactly means \"problematic\" in this context?
I gave it a try with Firefox and found out that every byte above 0x7f is translated into 0xfd. In other words: Plain old ASCII is left alone, everything above it results in a fixed value of 0xfd. Guess this has to do with the stream being interpreted as UTF-8 text...
A hex dump of a binary range [00 .. ff], retrieved through XMLHttpRequest:
\r\njoe$ od -t x1 -v xhrsweep.bin \r\n0000000 00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f\r\n0000020 10 11 12 13 14 15 16 17 18 19 1a 1b 1c 1d 1e 1f\r\n0000040 20 21 22 23 24 25 26 27 28 29 2a 2b 2c 2d 2e 2f\r\n0000060 30 31 32 33 34 35 36 37 38 39 3a 3b 3c 3d 3e 3f\r\n0000100 40 41 42 43 44 45 46 47 48 49 4a 4b 4c 4d 4e 4f\r\n0000120 50 51 52 53 54 55 56 57 58 59 5a 5b 5c 5d 5e 5f\r\n0000140 60 61 62 63 64 65 66 67 68 69 6a 6b 6c 6d 6e 6f\r\n0000160 70 71 72 73 74 75 76 77 78 79 7a 7b 7c 7d 7e 7f\r\n0000200 fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd\r\n0000220 fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd\r\n0000240 fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd\r\n0000260 fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd\r\n0000300 fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd\r\n0000320 fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd\r\n0000340 fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd\r\n0000360 fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd fd\r\n0000400\r\n\r\n" .
Way back I used to work with Adobe Photoshop (yes, way back, when version 4.0 was current). Nowadays, the GIMP (The GNU Image Manipulation Program) is a perfect free alternative. It even has slightly more functionality than Photoshop 4.0, so the leap shouldn't be too big for me.
However, somehow all those Photoshop menus and keyboard shortcuts are stored into my permanent memory and make working with the GIMP more challenging than needed. I just discovered the solution for this: Gimpshop!
This is a repackaged version of the GIMP, built for OS-X. You really should give it a try if you are familiar with Photoshop but want to give the GIMP a decent chance.
Oh yes, and I found an excellent plugin for working with RAW camera images as well: UFRaw Gimpshop.app Plugin - just download the Point and Click installer, which installs the plugin for Gimpshop.
" .For those who have slept under a stone for the last 48 hours or so: Apple just released a beta version of their Apple Boot Camp software. This comprises an easy installer for Windows XP on Intel based Mac hardware, turning your Mac in a dual bootable Mac/WinXP machine.
I can hardly wait for upcoming intel iBook versions, so I can finally do away with that crappy Windoze box I keep for running just one single accounting program...
You definitely should read Daring Fireball: Windows: The New Classic: \"And this points to the rather delicious conclusion that Apple is casting Windows, including Vista, as the new Classic\"
Even better on the short term: Parallels releases a beta of their Virtualization Solution for Intel-powered Macs - which promises running any windows, without the dual booting penalty.
\r\n" .So Annual CSS Naked Day is over.
It has attracted some 750 participants and stirred some good discussions among web designers, geeks and web standards advocates. I like the points made in Monday by Noon: \"But it validates\"
My web styles are back to regular, but I kept the empty CSS Naked Day stylesheet as an alternate style:
\r\n<link rel=\"stylesheet alternate\" type=\"text/css\" \r\n title=\"CSS Naked Day\" href=\"css/naked-css-day.css\"/>\r\n
It has been fun, let's see how much traction this event gets next year (if any)!
\r\n\r\nUpdate: Dustin's comments Alright, now somebody hand me a towel
\r\n" .Tomorrow, April 5th, is acclaimed Annual CSS Naked Day by Webdeveloper Dustin Diaz of Yahoo!
Funny to see all those nicely designed websites start to look like the old days of HTML 1.0 and the Mosaic web browser.
Strange that most of us need to do our utmost best to live up to this challenge, to make our well designed sites look at least reasonable without any style applied. For me, it is good to experience that following web standards pays off, even in this weird challenge.
In my case I already had positioned my navigation and other non-content stuff absolutely. Now I had a good reason to move this below the page content in the HTML source.
Not only makes this the CSS Naked look neat (relatively spoken), but it also benefits the loading time before the actual content is readable, with CSS applied.
I just replaced my CSS stylesheet by an empty one to accommodate the Aussies' time zone.
Take a look for yourself and experience the clean look of what the web was like, some 15 years ago...
By tomorrow night all will be back to normal (with slightly improved loading time!).
BTW, there's some leftovers of in-line style, e.g. for the relative size of links in my tag cloud.
For Firefox, the inline styles can be overridden with this simple Javascript function:
\r\n<script type=\"text/javascript\">\r\n\r\nwindow.onload = function() {\r\n var l = document.getElementsByTagName('*');\r\n for (var i in l) {\r\n try {\r\n if (l[i].style.cssText) l[i].style.cssText = \"\";\r\n } catch (e) { }\r\n }\r\n}\r\n</script>\r\n\r\nNotes:
- \r\n
- Untested on MSIE/Windows. \r\n
- This trick does not work for Safari/OS-X. \r\n
Update: made resetting style conditional: \r\nif (l[i].style.cssText) l[i].style.cssText = \"\";\r\n
This is a great little tool, which helps you with generating a secure, memorable, long, or even an insecure short password, just for your taste.
\r\nThe only drawback is that it is tightly coupled to Keychain Access, which you don't want to open and drill down to this utility, just to quickly generate a password for a website.\r\n\r\n
Good news: the people from Code Poetry built a simple, stand alone application, which just calls the Password Assistant to help you when you need it.
Download it here: codepoetry - Password Assistant.\r\n
\r\n![\"Password](\"http://squio.nl/blog/wp-content/passwd-assist.png\")
The source code is available as well, for inspection, which I recommend for security related software.
You can even build it yourself from the xcode project (you need the Developer Tools installed) - and yes, I did!" .
(The web form did not survive the migration to a new server, I'm currently looking into fixing this)![\"Born](\"http://squio.nl/blog/wp-content/born.gif\")
\r\n\r\nTest test test" .
De bedoeling is dat elk stukje op een ander weblog verschijnt, met een link naar het volgende stukje.\r\n\r\nAls je een weblog hebt, kun je meedoen. Het werkt heel eenvoudig. Geef je op en je krijgt een stuk van de tekst van het boek. Kopieer het en plak het op je eigen site.
\r\n\r\nLees hier fragment 133...\r\n\r\n\r\n![\"wembley\"](\"http://richardosinga.com/wembley/images/ext/wembley.gif\")
// XHR implementation\r\n// overrideMimeType is available to Moz' native XHR\r\nfunction requestPage(src, func) {\r\n    var xhr = new window.XMLHttpRequest();\r\n    xhr.onreadystatechange = function() { func(xhr); };\r\n    xhr.open(\"GET\", src);\r\n    // this fixes the content type glitch...\r\n    xhr.overrideMimeType(\"text/html; charset=ISO-8859-1\");\r\n    xhr.send(null);\r\n}\r\nThis solves the problem for regular XMLHttpRequest calls, without the benefits of cross domain permissions of the GM_xmlhttpRequest method of course. It would be nice if this method could be exposed in Greasemonkey as well!\r\n![\"Reblog](\"http://img.zemanta.com/reblog_e.png?x-id=3ebb5af7-fe87-4c03-a979-486157ccfa28\")