Maak je programma mobiel!

Met simpele QR code

Telefoontje: Wij willen deelnemers aan Dé Managementconferentie in Domburg 2011 graag de mogelijkheid geven om het programmaoverzicht op een mobieltje te bekijken, het liefst gekoppeld aan een QR code. Kan dat Willem?

Natuurlijk kan dat!
Zoals ik in dit bericht al verteld heb kun je dankzij Blogger een site geschikt maken voor mobiele weergave.
Dus heb ik het programmaoverzicht van Dé Managementconferentie in een zo plat mogelijke HTML tabel geplaatst en die in een bericht op het weblog geplakt. Voor de leesbaarheid met inline CSS wel een lijn onder iedere regel, maar voor de rest zo weinig mogelijk code gebruikt.

Dat ziet er dus zo uit:

<style>
TD {
font-family : "Arial";
font-size : small;
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #004a94;
}
</style>
<table border="0" cellspacing="0" cellpadding="1">
<tr><td colspan="3" align="center"><strong>Programmaoverzicht Presentaties Domburg 2011</strong></td></tr>
<tr><td>Organisatie</td><td>Titel</td><td>Presentatoren</td></tr>
<tr><td>Alfa College</td><td>Cooperatief leren in de mobiliteitssector</td><td>Gerard Krikken</td></tr>
<tr><td>Alfa College</td><td>Het parelsnoer van het Alfa-college</td><td>Karin Kienhuis</td></tr>
</table>

Zoals bekend kun je een QR code voor een hele site genereren, maar dat kan natuurlijk ook voor iedere afzonderlijke pagina.
Zo'n QR code kun je heel makkelijk online maken door in de brwoser dit in de adresbalk te zetten:
http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=
en daar de url van de pagina waarvan je de QR code wilt achter te plaatsen.
In mijn voorbeeld wordt dat dus:
http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=http://domburg2011.cviweblog.nl/2011/01/programmaoverzicht-mobiel.html
Doordat de url lang is krijg je ook een redelijk ingewikkelde code te zien met veel vierkantjes zoals hiernaast te zien is.
Om de leesbaarheid voor een mobieltje te vergroten kun je die lange url dus beter eerst inkorten, bijvoorbeeld via goo.gl
Die maakt van de lange url dit: http://goo.gl/SnsN1
Dus zet ik in de browser:
http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=http://goo.gl/SnsN1
Daarmee krijg ik de QR code zoals ik bovenaan dit bericht geplaatst heb. Zie je het verschil in puntjes?
De getallen in de url staan voor de hoogte en de breedte. Wil ik een groter plaatje, bijvoorbeeld om te kunnen afdrukken dan vergroot ik de waarden gewoon (tot maximaal 500)
http://chart.apis.google.com/chart?cht=qr&chs=500x500&chl=http://goo.gl/SnsN1

Al met al is het resultaat een pagina met kolommen die op een mobieltje (in horizontale stand) prima te lezen is!