Boeken Top 10 Widget

Aha, nog eens een nieuwe widget. De Boeken Top 10 Widget toont de boeken die de afgelopen week best verkochten in de Belgische (Nederlandstalige) boekhandels (Klik de info knop om de week te kennen gedurende dewelke deze cijfers werden opgetekend). In tegenstelling tot de vorige widgets die ontwikkeld werden op basis van het "Spring Framework" en het "Spring-MVC Framework" kozen wij hier voor een veel lichtere maar ook nieuwere opstelling. Een eerste component is een stand-alone Java object dat gebruik maakt van Quartz, een open source job scheduling systeem dat regelmatig de boek.be website aftast op zoek naar nieuwe Excell bestanden waarin de laatste verkoopscijfers worden weergegeven. Indien er effectief zo een bestand bestaat, dan leest en interpreteert een ander Java object dit document door gebruik te maken van de Apache POI libs. Het resultaat van dit proces is een set van xml bestanden waarin de verkoopscijfers per category op een gestructureerde manier worden opgeslagen. Voor het displayen van de Top 10 data creëerden wij een web-applicatie die gebruik maakt van het nieuwe 'Play' framework dit zowel voor de widget pagina zelf als voor het genereren van de REST data services voor elke categorie van boeken (fictie, non-fictie, kinderboeken, ...). Play is volgens ons echt de ontdekking van het jaar, het bundelt de voordelen van zowel Rails als van Java in een oplossing waarvan de ontwerpers zelf het volgende zeggen: "it's an easier way to build Web applications with Java. It’s a clean alternative to bloated Enterprise Java stacks."Zeker op te volgen! Widget toevoegen aan jouw web pagina - Klik hier.

IPhone Meteo Widget Update

De laatste versie van de "Meteo Widget" voor iPhone gebruikers is nog steeds een web toepassing gebaseerd op gewone web standaarden maar dan eentje met heel veel JavaScripts en iPhone-eigen CSS aanpassingen. O.m. door het toevoegen van "touch" events waardoor je met je vinger kan navigeren naar het weerbericht van de vorige of de volgende dag wordt het steeds moeilijker om verschillen te vinden tussen deze "web" applicatie en echte iPhone applicaties. iPhone gebruikers openen Mobile Safari en surfen naar deze url. (Deze widget bestaat ook nog steeds voor PC en Mac gebruikers)

Respect!

Geweldig nieuws van de ...

Wij kregen de toestemming om de data die op deze website verschijnt gratis te gebruiken om ze in de meteo widget te verwerken.

RESPECT!

Meteo Widget updated

Zoals ik eerder al voorspelde duurde het inderdaad niet al te lang vooralleer de MeteoWidget blokkeerde op de structuur van de vernieuwde BDB website.
De problemen komen voort uit het feit dat het weerbericht is opgesteld als een 'html table' die schijnbaar manueel wordt aangepast waardoor er plots nieuwe rijen opduiken terwijl andere weer verdwijnen. Het is dus zoeken naar één of andere vorm van structuur en vooral naar de mogelijke afwijkingen daarop zodat een automatisch proces er toch steeds weer in slaagt om deze ongestructureerde data om te zetten naar een vast xml formaat.
Dit wordt dus een proces van vallen en opstaan. Het gevolg van dit leerproces is dat de applicatie na elke val opnieuw een beetje slimmer zal geworden zijn en dus minder zal falen in de toekomst.

BDB met vernieuwde website

Afgelopen weekend werd een nieuwe versie van de website van de Bodemkundige dienst van België online geplaatst ...
Plots werkte natuurlijk geen van alle 'meteo' widgets nog aangezien deze allen de data van BDB interpreteren en gebruiken. Deze voormiddag moest ik dan ook in spoed tempo de broncode van de widgets aanpassen.
De kans bestaat dat er zich de komende dagen nog problemen voordoen wanneer bijvoorbeeld de data op de BDB website eerder uitzonderlijke data moet tonen die extra in de verf worden gezet met bijkomende info. Wanneer dat gebeurt maak ik zo snel mogelijk een vangnet voor de fouten die dan optreden en een voer ik een extra veld in om deze bijkomende info ook in de widgets te tonen.

Weerbericht/Meteo voor iPhone

Van de 'Weerbericht' widget maakte ik gisteren een 'iPhone-like' webpagina waardoor iPhone adepten er een leuk online weerbericht bij gekregen hebben. De conversie verliep verbazend vlot. Dit komt omdat de widget eigenlijk niet meer is dan een heel eenvoudige html pagina die wordt opgebouwd aan de hand van JavaScript functies. In deze pagina wordt vervolgens data geinjecteerd afkomstig uit de resultaten van een aantal Asynchrone HTTP oproepen. En aangezien de mobiele versie van de Safari webbrowser JavaScript ondersteunt kon deze technologie gewoon worden overgezet. De style van de widget werd lichtjes aangepast zodat alles op de iPhone er wat groter en dus beter leesbaar uitkomt. Voor extra info en scripts deed ik beroep op het geweldige IUI project van Joe Hewitt. Deze lib bevat ook een aantal scripts die de widget nog meer iPhone-like kunnen maken door de overgangen tussen het volgende en het vorige weerbericht te laten gebeuren dmv een horizontale 'sliding'. iPhone gebruikers klikken hier om deze 'widget' uit te proberen.

Weerbericht / Météo Widgets

Widget insluiten

Widget insluiten

Eigenschappen van deze widget
Gebruik	Om het weerbericht van de vorige of de volgende dag te zien klik je op of .
	Je kan deze widget toevoegen aan je iGoogle pagina of insluiten in een webpagina. De Google homepage van deze widget vind je hier
Toepassing	Indien gewenst vervangen wij ons logo onderaan door jouw logo. Zo verkrijg je je eigen, gepersonaliseerde widget die je op je blog of website kan plaatsen en zelf kan beginnen verspreiden.
Werking	Een server applicatie zorgt ervoor dat een dagelijkse kopij wordt genomen van het weerbericht dat door de BDB zowel in het Nederlands als in het Frans wordt gepubliceerd. Ook op de server, zorgt een automatisch proces ervoor dat deze html pagina die oorspronkelijk in tabelvorm werd opgesteld volledig wordt ontleed en terug wordt samengesteld in een universeel bruikbaar dataformaat, in dit geval XML. Aan de voorzijde van de widget zorgt een JavaScript ervoor dat de HTML structuur van de widget wordt opgebouwd en dat de data d.m.v. een asynchrone (AJAX) aanvraag wordt opgehaald van de server. Tenslotte wordt deze XML data doorlopen en geïnjecteerd in de HTML code. De knoppen waarmee naar links en rechts wordt genavigeerd voeren op hun beurt ook weer JavaScript opdrachten uit waarmee bepaalde zichtbare blokken worden verborgen terwijl andere juist wel zichtbaar worden gemaakt.
Technologie Server
Technologie Widget
Bron van de data	De Bodemkundige Dienst van België vzw
The Widgetbox	Deze widget is ook beschikbaar op widgetbox waar je zelf heel eenvoudig de code kan ophalen voor publicatie van deze widget op Blogger, TypePad, WordPress, Netvibes, Pageflakes, enz

Beurskoersen Widgets

Widget insluiten

Widget insluiten

Eigenschappen van deze widget
Gebruik	Om het koersverloop van een andere onderliggende waarde te zien, klik je bovenaan de widget op de naam van de actuele onderliggende waarde en kies je je nieuwe aandeel of index door op de gewenste link te klikken in de lijst die je nu te zien krijgt. Opmerking: Deze widget maakt gebruik van een zeer nieuwe technologie waarbij de (Flash) grafieken, 'on the fly' worden opgemaakt door het uitvoeren van JavaScript functies. Er is nog heel wat werk aan de winkel wanneer je ziet dat de grafieken soms verdwijnen bij het scrollen. Het ligt in onze bedoeling om binnenkort deze technologie te vervangen door pure JavaScript waardoor de widget veel stabieler zal worden.
	Je kan deze widget toevoegen aan je iGoogle pagina of insluiten in een webpagina. De Google homepage van deze widget vind je hier
Toepassing	Indien gewenst vervangen wij ons logo onderaan door jouw logo. Zo verkrijg je je eigen, gepersonaliseerde widget die je op je blog of website kan plaatsen en zelf kan beginnen verspreiden.
Werking	Een server applicatie zorgt ervoor dat bij elke nieuwe aanvraag een heel complex xml object wordt opgehaald bij Yahoo finance dat vervolgens wordt omgezet in een veel eenvoudiger JSON object dat naar de widget wordt doorgestuurd. Aan de voorzijde van de widget zorgt een JavaScript ervoor dat de HTML structuur van de widget wordt opgebouwd en dat de juiste JSON data d.m.v. een asynchrone (AJAX) aanvraag wordt opgehaald van de server. Tenslotte wordt de data in dit JSON object doorlopen en geïnjecteerd in de HTML code. De knoppen waarmee naar links en rechts wordt genavigeerd voeren op hun beurt ook weer JavaScript opdrachten uit waarmee bepaalde zichtbare blokken worden verborgen terwijl andere juist wel zichtbaar worden gemaakt.
Technologie Server
Technologie Widget
Bron van de data

Widgets insluiten in je eigen webpagina

Een Google widget aan je eigen webpagina of blog toevoegen doe je in drie eenvoudige stappen.

1. Eerst ga je best op zoek naar de 'homepage' van de widget die je wil inbedden, en klik je daar op de "Deze gadget insluiten" link.
2. Vervolgens pas je op deze pagina de instellingen van de widget aan zoals o.a. de hoogte, de breedte en de kader en wanneer je tevreden bent over het resultaat klik je op de "Code ophalen" knop.
3. Tenslotte kopiëer je de gegenereerde code die je nu om het even waar in elke webpagina of blog pagina moet plakken om de widget op die plaats zichtbaar te maken.

Via deze blog vind je bij elke widget een "Inbedden" link die je onmiddellijk naar de pagina doorverwijst waar je je widget kan personaliseren (stap 2).

Stap voor stap

1. Leuke widgets vinden:

Ga naar de 'Gadgets Directory' kies een leuke widget uit en klik de "Toevoegen aan uw webpagina" link.

2. Je gekozen widget personaliseren:

3. De code:

Widgets toevoegen aan iGoogle

Een nieuwe widget aan je gepersonaliseerde Google pagina toevoegen is heel eenvoudig. Eerst klik je op  waardoor je naar onderstaande pagina wordt doorverwezen ...



Klik nu gewoon op de 'Toevoegen aan Google' knop en de widget verschijnt op je iGoogle pagina wanneer je deze opnieuw laadt.