Wat is er leuker dan een eigen app op uw telefoon te plaatsen? Met relatief nieuwe diensten als PhoneGap en PhoneGap Build maakt u apps met bekende technieken als HTML, CSS en JavaScript. Na het uploaden van de code krijgt u een kant-en-klare app retour. In dit artikel maakt u in vijftig regels code een werkende app met geïntegreerde Google Maps.

[Dit artikel verscheen eerder in PC-Active 269, mei 2013]

Download de voorbeeldcode bij dit artikel

Inleiding

Het mobiele landschap is hot. Het marktaandeel van smartphones is in Nederland al ruim 60%. Voor het grootste deel draaien deze op Android (ook ruim 60%). De rest wordt verdeeld tussen iOS, Windows Phone en andere platforms. En als u ook nog weet dat zo goed als iedereen die een smartphone heeft daar meerdere apps voor download, beginnen uw vingers natuurlijk te jeuken. Uw app moet daar ook bij! Maar waar moet u beginnen? Elders in deze PC-Active vindt u een artikel over de Corona SDK en bijvoorbeeld in PC-Active 266 las u meer over het maken van een Android app met Java en Eclipse.

In dit artikel bespreken we een ander alternatief. Want ook met webdesigntechnieken als HTML, CSS en JavaScript kunt u in combinatie met de tool PhoneGap eigen apps maken. Deze kunt u verspreiden onder vrienden en bekenden, of – als u een developer account afsluit bij Apple of Google – in de diverse app stores publiceren. Een developer account kost geld, maar het begin is gratis. Het enige dat u nodig hebt is een editor (Kladblok is al voldoende), enige voorkennis van HTML, CSS en JavaScript en een account bij Adobe. Het is het handigst als u een Android-telefoon bij de hand hebt, want hierop kunt u zonder beperkingen apps toevoegen. Voor iPhones en iPads is dat een stuk ingewikkelder door de beperkingen die Apple oplegt.

PhoneGap en andere diensten

PhoneGap is niet de enige dienst die webcode kan omzetten naar apps. Andere bekende namen zijn bijvoorbeeld AppMobi (onlangs overgenomen door Intel) en Sencha Touch. PhoneGap kunt u op twee manieren gebruiken.

• Ten eerste kunt u PhoneGap downloaden (het is immers open source) en per platform zelf de juiste versie installeren. Zo compileert u apps op uw eigen pc of Mac. Hiermee hebt u de volledige controle over elk platform, maar het kost wel tijd en moeite om dit goed te doorgronden.
• De andere manier is de cloudgebaseerde service gebruiken. U maakt de app, test hem in de browser en als u tevreden bent upload u een zipbestand naar PhoneGap Build. Dan wordt uw code op de servers van Adobe naar een app omgezet. Na enkele ogenblikken (meestal binnen één a twee minuten) kunt u een kant-en-klare app downloaden. Dit is de route die we in dit artikel bewandelen.

Hybride apps

Het soort app dat PhoneGap maakt staat ook wel bekend onder de noemer hybride apps. Een gemeenschappelijk kenmerk van elk mobiel platform is namelijk dat ze het mogelijk maken binnen een app een mini-browservenster te openen. Hier maakt PhoneGap handig gebruik van door per platform een lege kapstok-app te maken en hierin direct het browservenster te openen. Binnen deze browser draait vervolgens uw (HTML-, CSS- en JavaScript-)code. PhoneGap zorgt voor de koppeling van uw code met de native bibliotheken van het besturingssysteem. Op die manier kunt u in uw app ook gebruik maken van systeembronnen op het mobiele apparaat, zoals de camera, de GPS-sensor, de contactenlijst en meer. Alle beschikbare onderdelen worden uitgebreid en met codevoorbeelden beschreven in de PhoneGap API. Omdat u geen code schrijft die rechtstreeks het besturingssysteem aanspreekt (native code), maar de PhoneGap-omweg neemt, spreken we van hybride apps.

Code structureren en schrijven

Laten we van start gaan en PhoneGap Build verkennen via een eenvoudige app. De structuur van een PhoneGap-app ligt voor een deel vast.

1. Maak eerst een map www, bijvoorbeeld op het bureaublad. Dit is het startpunt.
2. Open uw favoriete editor (Dreamweaver, Eclipse, Visual Studio of Kladblok) en maak het bestand index.html.
3. Sla het op in de map www. Dit zijn de enige twee vereisten, het zijn de punten (hooks) die PhoneGap herkent en waaraan de rest van de app wordt gekoppeld. In de overige bestandsnamen, mappen en locaties voor scripts, afbeeldingen en meer bent u volkomen vrij.
4. Neem de code over zoals in de afbeelding staat (of download de voorbeeldcode bij dit artikel).

Figuur 1 toont de code voor een minimale PhoneGap-app.

Het enige dat in deze HTML-pagina opvalt, is het attribuut onload=”onLoad();” in de tag <body> en de lege <div> met id=”divResult”.

Op regel 10 en op regel 13 staan de JavaScriptfuncties die worden uitgevoerd op het moment dat de pagina wordt geladen en het apparaat (device) gereed is. De standaardnaam hiervoor in PhoneGap is OnDeviceReady(). In deze functie wordt een tekst in divResult geplaatst en wordt een alert-venstertje getoond waarin is te zien dat PhoneGap goed werkt.

We doen op dit moment nog niets aan mooie opmaak of foutcontrole, iets wat u in een echte app uiteraard wel zult doen. Let er verder op dat op regel 8 een verwijzing naar <script src="phonegap.js"></script> staat. U hoeft dit bestand echter niet zelf te plaatsen. Het wordt door PhoneGap Build dynamisch ingevoegd.

Uploaden

Toegegeven, het stelt nog niet veel voor, maar we kunnen de code nu omzetten naar een app en testen. Maak een zip-bestand van de code die u tot nu toe hebt: index.html in de map \www. Ga dan naar https://build.phonegap.com/ en meldt u aan met een Adobe ID. Als u dit nog niet hebt, registreer dan een nieuwe account.

1. Als u bent ingelogd bij PhoneGap Build, klik dan rechtsboven +new app.
2. Kies Upload a zip file en blader naar het zipbestand dat u zojuist hebt gemaakt. Zodra het bestand is verzonden kunt u de gegevens invullen.
3. Wij kiezen nu als naam Mijn demo-app en type een korte beschrijving. De overige opties mogen op dit moment uitgeschakeld blijven.
4. Klikt tot slot op Ready to build. Dit proces is ook te zien in figuur 3.

Build en download

Uw code wordt nu bij PhoneGap Build omgezet naar een app. Dit kost hooguit enkele minuten. Er zijn vervolgens twee manieren om de app te downloaden en te installeren (figuur 4). De eerste manier is om onder de appnaam te klikken op de blauwe knop van het betreffende platform. U download dan een .apk-bestand voor Android, een .ipa-bestand voor iOS, een .xap-bestand voor Windows Phone, enzovoort. De app kunt u vervolgens naar uw telefoon kopiëren, ook weer volgens de regels van het betreffende platform. Voor Android betekent dit bijvoorbeeld dat u het bestand via USB kunt kopiëren en openen. Voor iOS zult u het bestand naar iTunes moeten slepen en dan uw iPhone synchroniseren, want dit is nu eenmaal de wijze waarop Apple werkt. Maar de tweede manier is waarschijnlijk veel eenvoudiger: scan de QR-code die PhoneGap toont, en de app wordt automatisch gedownload.

Installeren

We gaan er zoals gezegd van uit dat u de demo-app installeert op een Android-telefoon. Stel eerst in dat ook apps uit andere bronnen dan de Google Play Store mogen worden geïnstalleerd. Dit gaat via Instellingen, Toepassingen, Onbekende bronnen (figuur 5). Daarna kunt u uw QR-scanner richten op de QR-code op het scherm en de applicatie downloaden en installeren. Bij het installeren worden de benodigde machtigingen voor de app getoond, zie figuur 6. Deze kunt u eventueel zelf nauwkeurig instellen via een optioneel config.xml-bestand. Meer hierover leest u in de documentatie van PhoneGap Build. Klik op Installeren en daarna op Openen om de app te starten.

Stel op uw telefoon in dat toepassingen uit andere bronnen geïnstalleerd mogen worden.

De basisinstelling is dat de app om alle machtigingen vraagt. Via config.xml kunt u dit desgewenst finetunen.

En zo draait de eerste versie van onze app op de telefoon.

Google Maps integreren

Nu u weet dat de basisapp goed werkt, kunt u de code naar believen uitbreiden. Als voorbeeld voegen we een kaart toe die werkt met Google Maps.

1. In index.html plaatsen we een koppeling <a href="maps.html">Toon kaart</a> . Deze verwijst naar een nieuwe pagina maps.html.
2. Een voorbeeld van de code staat in figuur 8.
3. In de commentaarregels wordt uitgelegd hoe de code werkt. Belangrijk is uiteraard dat de juiste bibliotheken voor jQuery en Google Maps worden ingevoegd.
4. U kunt nu het zipbestand bijwerken en daarna in PhoneGap Build de knop Update code gebruiken. Er wordt een nieuwe versie van de app gemaakt die u weer kunt downloaden en testen.

Finetuning van de app

Klik in het hoofdscherm van PhoneGap Build op de naam van uw app om een venster met detailgegevens te openen. Hier kunt u op verschillende tabbladen bijvoorbeeld het versienummer en de naam van uw app aanpassen, eigen pictogrammen uploaden en meer. Dit is ook de plek waar u uw app kunt verwijderen als u helemaal opnieuw wilt beginnen.

Conclusie

Met de online dienst PhoneGap Build maakt u in een handomdraai apps voor tal van mobiele platformen op basis van de webtechnieken HTML, CSS en JavaScript. De apps kunt u makkelijk downloaden en op een telefoon installeren. Bekijk bij PhoneGap Build vooral de optie Docs in het hoofdmenu om meer te leren over de manier waarop u apps via PhoneGap Build kunt finetunen. Het daadwerkelijk publiceren van (vooral Apple) apps in de app store heeft wat meer voeten in de aarde, maar hiervoor vind u bij Apple, Google en Microsoft veel aanvullende informatie.

-- Peter Kassenaar
16-mei-2013

Vorige week schreef ik over mijn eerste indrukken met de Microsoft Surface. Ondertussen heb ik er een weekje mee gewerkt en heb ik wat meer gebruikerservaringen kunnen verzamelen.

Samenvattend (oftewel de TL;DR-versie):  Surface is een prachtig product. De beste tablet die momenteel verkrijgbaar is naar mijn idee. De batterijduur moet verbeterd worden. Het kost tijd om er optimaal mee te leren werken, zeker als je overstapt van een andere tablet (lees: iPad). Het is de vraag of mensen die stap en bijbehorende leercurve willen nemen.

Hieronder volgens de klassieke indeling The Good, the Bad and the Ugly verdere ervaringen met de Surface. Voor het gemak in een puntsgewijze opsomming, zodat het niet een eindeloos verhaal wordt. Als ik vergelijkingen maak, dan is dat vooral met de iPad en iOS, in Nederland zonder twijfel de bekendste andere tablet.

1. The Good

Speakers

Beginnen met een klein, maar aangenaam punt. De Surface beschikt over twee (stereo) luidsprekers, aan de linker en rechterkant van het scherm – bij de liggende stand. De luidsprekertjes worden bovendien bij normaal vasthouden niet bedekt door je handen, waardoor het geluid van games en video’s goed doorkomt. Vergeleken met de mini (en mono) speaker aan de onderkant van de iPad is dat een wereld van verschil. Het geluid is prima om naar te luisteren. Ook via de koptelefoonuitgang is het geluid prima. Hierin hoorde ik geen kwaliteitsverschil met de iPad.

Scherm schoonmaken

Nog een klein (en wat mij betreft opmerkelijk) punt. Alle aanraakschermen worden vies. Er komen onvermijdelijk vette vegen en vingerafdrukken op. Als het scherm aan staat valt dat nog niet eens zo op, maar zodra je het uitzet zie je het. Het scherm van de Surface laat zich veel makkelijker reinigen dan dat van de iPad. Hoe het komt weet ik niet - het zal vast iets te maken hebben met het materiaal van de glasplaat - maar als je bij Surface eenmaal een microvezeldoekje over het scherm haalt, is het weer schoon. Boenen en poetsen is onnodig.

Mijn ervaring met iPad is anders. Hier moet je vaak langduriger poetsen en wordt het vuil in eerste instantie uitgeveegd in plaats van verwijderd. Opmerkelijk verschil.

Meerdere user accounts

Windows werkt (in tegenstelling tot iOS) per definitie met meerdere gebruikersaccounts. Elke gebruiker van de tablet kan zijn eigen account met persoonlijk startscherm, wachtwoord, bureaubladachtergrond, apps en overige instellingen maken.

Dit is zonder concurrentie het beste punt van de Surface!

Eindelijk kunnen de kinderen hun eigen apps (lees: spelletjes) op de tablet plaatsen zonder dat ik daar last van heb. Omdat iedereen ook een eigen wachtwoord heeft hoef ik er ook niet meer bang voor te zijn dat ze – al is het per ongeluk – persoonlijke of zakelijke gegevens (e-mail, agenda, contactpersonen) wissen van de tablet. Ze kunnen er eenvoudigweg niet meer bij.

Onderlinge concurrentie (‘heb jij die levels van Angry Birds al gedaan? Die wilde ik halen!’) is verleden tijd. Ze hebben allebei hun eigen Angry Birds. Idem andere apps. Dat geeft een hoop rust op de bank, dat kan ik je verzekeren.

Ook voor het startscherm is het een verademing. Ik hoef niet eerst door een eeuwigheid aan games te scrollen voordat ik mijn meest gebruikte apps (Mail, Agenda, Office, Twitter) tegenkom, maar ze staan direct in beeld.

Kortom: voor de prijs van één Surface koop je er eigenlijk drie. Of vier, of vijf, afhankelijk van je gezinsgrootte.

<shameless plug> Over het maken van meerdere user accounts in Windows 8 (en dus ook op Surface) lees je meer in hoofdstuk 5 van mijn Handboek Windows 8. Ik heb voor de kinderen een account van het type Microsoft-account ingesteld, zodat ze ook zelf (gratis) apps uit de Store kunnen downloaden en installeren. Weer een kopzorg minder. </shameless plug>

Een nadeel hierbij is wel dat – voor zover ik heb kunnen zien – dat, wanneer een app voor meerdere gebruikersaccounts wordt gedownload uit de Store, hij ook daadwerkelijk twee wordt geinstalleerd en twee keer ruimte inneemt. Bij grote apps en beperkte ruimte op de tablet kan dit lastig worden. Ik heb de 32GB-versie, maar als je echt veel gaat installeren, media (films, muziek) op de tablet plaatst, of de tablet wordt door velen gebruikt, dan moet je de 64GB-variant overwegen denk ik.

Standaard USB-poort

Ook een kleinigheidje op het eerste gezicht, maar de Surface beschikt standaard over een USB 2.0-poort. Dit blijkt in de praktijk buitengewoon handig. Opeens is de tablet uitbreidbaar met tal van standaard randapparatuur. Kom daar bij de iPad maar eens om. Enkele voorbeelden:

• Je kunt een externe harddisk aansluiten om foto’s en video’s te bekijken.
• Je kunt vrijwel elke digitale camera en/of telefoon aansluiten en media op het toestel gebruiken. Geen omslachtig synchronisatiegedoe meer via iTunes.
• Je kunt een muis aansluiten voor het makkelijker werken in de bureaublad-omgeving met Office (zakelijk gebruik).
• Je kunt een standaard toetsenbord aansluiten als je geen Touch Cover hebt (idem).
• Je hoeft geen aparte, dure adapters aan te schaffen (looking at you, Apple!) om overige randapparaten aan te kunnen sluiten.
• Je kunt een printer aansluiten.

En zo kan ik nog wel even doorgaan. De mogelijkheden zijn eindeloos en de keuze om een standaard industriepoort aan te bieden op de Surface is wat mijn betreft een uiterst slimme zit van Microsoft (en past in de traditie van het bedrijf, waarbij uitbreidbaarheid door derde partijen altijd centraal heeft gestaan in het product).

Toch wat te zeuren? OK, het is geen USB 3.0 (terwijl standaardondersteuning hiervoor juist een van de nieuwe features in Windows 8 is die Microsoft niet moe wordt te benadrukken). Dat zullen ze wel voor de Surface 2 bewaren.

Snel toegang tot informatie

Door het concept van Live Tegels (apps kunnen statusinformatie op een tegel in het startscherm weergeven, zoals nieuwsberichten, de laatste tweets of mailtjes of het huidige weer) kan het Startscherm in eerste instantie onrustig overkomen. Zeker als je het vergelijkt met de statische vormgeving van iOS.

Na enkele dagen gebruik merk ik echter dat Live Tegels vreselijk nuttig zijn (disclaimer: ik weet dat dit op Android al langer bestaat, maar ik ben nu eenmaal geen reguliere Android-gebruiker). De verschillen in Workflow worden na enige gewenning duidelijk:

• iPad – je wilt het laatste nieuws lezen. Open de nieuwsapp en bekijk de berichten. Sluit de nieuwsapp. Idem sportnieuws – zoek de sportapp en open hem. Lees de berichten en sluit hem weer door terug te gaan naar het startscherm. Laatste tweets? Blader naar de tweetapp en open hem. Lees tweets. Keer terug naar het startscherm. Nieuw e-mailtje? Swipe naar de e-mailapp en open hem. Lees mail. Sluit de app. Enzovoort.
• Surface – Zorg er voor dat de meest gebruikte apps/tegels vooraan staan. De berichten komen vanzelf voorbij. Het enige wat je hoeft te doen is te lezen. Pas op het moment dat je meer info wilt, kies je specifieke een app (Nieuws, Sport, Mail of Twitter).

Kortom, ik heb gemerkt dat je bij Surface/Windows 8 het startscherm echt gaat lezen en nuttig gebruiken om je productiviteit te verhogen. Op iPad/iOS moet je hiervoor altijd eerst een specifieke app openen. Dat komt mij nu  - na een weekje Surface gebruik – als omslachtig over. De leeftijd en het gekozen concept begint iOS parten te spelen.

Niet alle apps bieden al Live Tegels, maar de apps die dat wel doen worden door mij hoog gewaardeerd. Mijn huidige startscherm op de Surface laat een mix zien van Live Tegels en statische tegels:

2. The Bad

Natuurlijk is het niet allemaal goud wat er blinkt. Ik kwam de volgende negatieve punten tegen bij het gebruik van de Surface.

Beperkte batterijduur

De batterijduur wordt door Microsoft gesteld op ruim 10 uur gebruik. Dat kan ik niet onderschrijven. In mijn ervaring gaat de batterij hooguit een uur of 6-7 mee. In ieder geval is de werkduur ruim minder dan die van iPad.

Natuurlijk, de afgelopen week is de Surface intensief gebruikt (het was de eerste week in ons huishouden), maar hij moest dan ook zeker twee of drie keer aan de lader. En soms bleek hij ‘s ochtends gewoon leeg en moest hij eerst worden opgeladen voordat hij verder gebruikt kon worden. Oftewel: ook in de standby stand verbruikt de tablet naar mijn indruk meer energie dan de iPad.

Bovendien is er niet echt een handige batterij-indicator zichtbaar op het startscherm die het percentage restlading aangeeft (en is daar ook nog geen app voor in de Store (?!) te vinden). Je moet dit handmatig controleren via het bureaublad of door het vergrendelingsscherm te openen. Dit moet verbeterd worden.

Beperkte set instellingen in Windows 8-omgeving

Als ik een tablet gebruik, wil ik ook graag alle instellingen regelen in diezelfde tablet-omgeving. Idealiter wil ik helemaal niks meer met het bureaublad te maken hebben (behalve misschien voor Office-werk in Windows of Excel). Windows 8 heeft hiervoor de app Pc-instellingen. Maar in de praktijk blijkt een omweg naar het bureaublad vaak nog noodzakelijk. Onderdelen die ik de afgelopen week alleen via het bureaublad kon instellen waren bijvoorbeeld:

• Toetsenbordwijzigingen (Duits/Engels/Nederlands)
• Gebruikersaccount verwijderen
• IP-adres controleren

En zo zijn er nog een paar items, ik heb ze niet allemaal genoteerd. Ik verwacht wel dat er in de loop der tijd via updates of Service Packs (in de beste Microsoft-traditie) steeds meer instellingen worden overgebracht, of op zijn minst mede beschikbaar worden gesteld via de app Pc-instellingen, maar op dit moment moet ik nog te vaak naar mijn zin switchen naar het bureaublad.

Matige netwerkstabiliteit

In mijn eerste review merkte ik op dat de Surface vrijwel elk netwerk in de straat leek op te pikken. De gevoeligheid van de antennes is dus uitstekend.

De stabiliteit van de netwerkkaart lijkt minder in orde te zijn. Regelmatig krijg ik tijdens het downloaden van apps uit de Store de melding dat het netwerk niet beschikbaar is (terwijl ik slechts enkele seconden geleden via datzelfde netwerk nog in de Store kon zoeken!) en moet ik de pagina herladen of het downloaden opnieuw beginnen. Idem voor het werken met Internet en met de XBox. Soms ook geeft het netwerkpictogram aan dat de verbinding uitstekend is, maar kan ik desalniettemin geen mail lezen of websites bezoeken.

Het kan natuurlijk aan mijn netwerkwerk-setup liggen (twee WIFI-netwerken met aparte SSID’s en een bridge ertussen om uit dezelfde IP-pool te putten zodat je niet met lastige subnetinstellingen hoeft te werken), of aan de Store zelf. Maar dat kan ik niet controleren, vanwege te weinig mogelijkheden om dit in de tabletomgeving te testen.

Je kunt in de Windows RT-omgeving niet eens controleren welk IP-adres en subnetmasker de Surface toegekend heeft gekregen via de router. Dat was zelfs in iOS versie 1 al ingebakken.

Hier zal Microsoft nog serieus aan moeten werken. Nogmaals; het hoeft geen probleem van Windows 8 of de Surface te zijn, het issue kan ook bij mij liggen. Maar omdat er geen tools zijn om te diagnosticeren vind ik dit toch een minpunt van Windows zelf.

Office niet in Windows 8-stijl

Ik had verwacht dat de meegeleverde versie van Office 13 met Windows RT geoptimaliseerde versies van Word, Powerpoint, Excel en OneNote zouden zijn voor de tabletomgeving. Ongeveer net zoals Apple (uitstekend!) heeft gedaan met Pages, Keynote en Numbers.

Maar niets is minder het geval. Het zijn gewoon de bureaubladversies van Office, omgezet naar een ARM-processorarchitectuur. Jazeker, het zijn uitstekende Office tools en ze werken perfect in de cloud met Windows SkyDrive, maar ze zijn niet bepaald geoptimaliseerd voor touch-bediening. Om maar eens een understatement te gebruiken.

Zoek de verschillen:

Ook het feit dat je eerst te zien krijgt dat je nog met een ‘Preview’ werkt van Office 13 (‘wat, is de software nog niet klaar dan?’) en dat je online moet gaan voor meer informatie over Office verdient bepaald geen schoonheidsprijs. Dat had beter gemoeten. Veel beter.

3.The Ugly

Verder kwam ik tijdens het werken een paar issues tegen die ik zou willen scharen onder de noemer Schoonheidsfoutjes (the ugly). Ze zijn niet al te beperkend in het dagelijks gebruik, maar het zou mooi zijn als ze worden opgelost via softwareupdates. Noem het voor mijn part daarom een ‘wensenlijstje’.

Tekst kopiëren/plakken

Het kopiëren van teksten met je vinger is een nauwkeurig werkje, omdat de letters vaak veel kleiner zijn dan je vingertop. In iOS is dat goed opgelost door een vergrootglaasje te tonen wanneer met touch-and-hold tekst wordt geselecteerd en daarna gekopieerd of geplakt. In Windows 8 verschijnen twee kleine bolletjes onder de tekstselectie en hier moet je het mee doen. Vaak zit je vinger in de weg om te zien wat je nu eigenlijk selecteert en kopieert. Dat is lastig.

Tegels lastig te verslepen

Tegels op het startscherm zijn te verslepen naar een nieuwe positie. Je moet ze hiervoor eerst een klein stukje naar beneden slepen zodat ze geselecteerd worden weergegeven en daarna met je vinger verplaatsen. Dat is lastiger dan gedacht. Je moet ze eerst ‘los trekken’ uit hun bestaande positie en daarna ingedrukt en wel naar de juiste kolom verslepen. Het kost best enige tijd om dit goed onder de knie te krijgen. De tegels zitten vaster dan je denkt ;-).

In ieder geval is dit met de muis (Windows 8 op een bureaubladcomputer) veel eenvoudiger dan met je vingers. Dat had ik niet verwacht.

Invoerveld verdwijnt soms achter onscreen-toetsenbord

De ruimte op een tablet is beperkt. Het onscreen-toetsenbord neemt meer dan de helft van de schermhoogte in beslag als je het gebruikt. Hierdoor kan het gebeuren (en: gebeurt het ook vaak) dat een invoerveld verdwijnt achter het toetsenbord. Je ziet dan niet wat je typt – bijvoorbeeld een naam of wachtwoord om je aan te melden bij een website of bij een app (Twitter, Facebook).

In veel gevallen schuift het invoervak – correct – omhoog zodat het zichtbaar is, maar vaak gebeurt ook niet, zodat je in den blinde zit te typen. Dat is lastig.

Wisselen tussen user accounts kan lang duren

Een van de grote voordelen vind ik het instellen van meerdere gebruikersaccounts (zie hiervoor). Het wisselen tussen die gebruikersaccounts kan soms echter onverwacht lang duren. Dan is het scherm eerst tien, vijftien of zelfs twintig seconden zwart voordat het startscherm met alle accounts weer verschijnt.

Vaak gaat het ook heel snel, maar soms duurt het echt lang. Kinderen hebben dat geduld niet (en ook ik dacht in eerste instantie dat de tablet was vastgelopen). Uiteindelijk gaat het altijd goed, maar de onvoorspelbaarheid hierin is lastig. Hopelijk kan dit worden aangepast.

Nog weinig apps in de Store

Ook dit is een punt dat in de loop van de tijd hopelijk ‘vanzelf’ verbeterd wordt, maar de beschikbaarheid van geoptimaliseerde Windows 8-apps is op dit moment nog…tja. Laten we het suboptimaal noemen. Er zijn nog geen geoptimaliseerde apps van Facebook, Google-diensten, YouTube, LinkedIn en andere belangrijke partijen. Vaak zijn er wel derde partijen die bijvoorbeeld een Twitter- of Facebook-app hebben gemaakt, maar de kwaliteit hiervan is wisselend.

Niet dat we nu zitten te wachten op honderden poezenfoto’s of bierdrink-apps, maar wat meer diversiteit en kwaliteit zou welkom zijn.

Als je zoekt op het wildcardteken (*, het sterretje) zie je alle apps die beschikbaar zijn. Op dit moment zijn dat er ruim 8.000. Dat valt natuurlijk in het niet bij de honderdduizenden apps in de Apple App Store en op Google Play.

Folders of mappen op het Startscherm

Ik ben bepaald geen app-verzamelaar, maar toch merkte ik de afgelopen week al regelmatig dat ik erg veel van links naar rechts aan het scrollen was in het Startscherm. En dan waren de spelletjes van de kinderen er al uit.

Het zou mooi zijn als in een volgende versie van Windows 8 het mogelijk zou worden apps te groeperen in mappen. Dit zou dan vergelijkbaar (of beter?) kunnen worden met de functionaliteit zoals die in iOS 4 is geintroduceerd. Windows 8 werkt nu met appgroepen, maar dit neemt toch veel ruimte en daardoor scrolltijd in beslag. Het verminderd m.i. de productiviteit.

Het zou het overzicht en bruikbaarheid van het Startscherm ten goede komen als je mappen met tegels zou kunnen maken voor Games, Office, Tools, enzovoort.

Dat zal dan wel iets worden voor Windows 8.5 of Windows 9…

Conclusie

Ik ben erg blij met Windows 8 op Surface. De (zakelijke) bruikbaarheid en productiviteit ligt hoger dan bij iOS, is mijn voorzichtige indruk na een weekje werken. De batterijduur en beperkte beschikbaarheid aan apps zijn duidelijke minpunten. De uitbreidbaarheid en meerdere gebruikersaccounts zijn overduidelijke pluspunten.

Heb je hier aanvullingen of opmerkingen op? Laat het weten door een reactie te schrijven.

Peter Kassenaar
-- 12 november 2012

Met het verschijnen van Windows 8 heeft Microsoft voor het eerst ook een een eigen tablet uitgebracht, de Microsoft Surface met Windows RT (de versie van Windows 8 die speciaal voor tablets met een ARM-processor is geoptimaliseerd).

Ruim twee jaar geleden, in april 2010 kocht ik in Los Angeles een iPad voordat deze in Nederland verkrijgbaar was. Het leek me leuk om ook deze gadget aan te schaffen voordat hij officieel op de Nederlandse markt zou verschijnen. Als was de weg er naartoe dit keer wel heel gewoontjes – ik heb in de Duitse Microsoft Store een bestelling geplaatst en enkele dagen na het verschijnen van de Surface werd hij door een koerier van FedEx aan de deur afgeleverd.

Als je ook een Surface wilt bestellen voordat deze via de officiële Nederlandse kanalen verkrijgbaar is, bezoek dan bijvoorbeeld www.surface.de. Maar ook via de Engelse Microsoft Store kun je een tablet bestellen, zij het dat je in ponden (omgerekend) iets meer betaalt dan in euro’s.

Ik bestelde de Surface 32 GB met Touch Cover. Omdat ik bij het schrijven van het Handboek Windows 8 al had gemerkt dat je heel makkelijk van taal kunt wisselen in Windows 8 was ik niet bang dat ik met een puur Duits product zou blijven zitten.

1. Verpakking

Microsoft is vaak bekritiseerd om de uitbundig vormgegeven verpakkingen met tal van reclamekreten en versieaanduidingen. De doos van de surface is minimalistisch ontworpen en ziet er smaakvol uit. Het zwarte deel is de doos, het witte deel de binnendoos die je er uit trekt.

Op achterkant staat in kleine letters vermeld wat Windows RT is en dat je geen gewone desktopapplicaties op de tablet kunt installeren. Op de onderkant staan de landen waarin het product verkocht kan worden. Ook NL staat er bij, dat lijkt me een goed teken.

De binnendoos uitgeschoven:

Onder de binnendoos gaat een inlay verscholen waarin de Touch Cover (toetsenbord en beschermhoes ineen) verscholen gaat. Keurig vormgegeven.

De touch cover lift je makkelijk uit de sjabloon:

Toetsenbord ‘touch cover’

Kleine tegenvaller: het toetsenbord is wel degelijk van een Duitse indeling voorzien en niet van een US-International-indeling zoals de meeste toetsenborden. De indeling hiervan (QWERTZ) is bijna gelijk, maar de toetsen Y en Z zijn omgewisseld en er zijn apart toetsen voor veelgebruikte accentletters als ü, ö en ä.

Dit was op de afbeelding in de MS Store helaas niet goed zichtbaar, anders had ik de versie zonder toetsenbord besteld. Zodra de Surface officieel in Nederland verkrijgbaar is zal ongetwijfeld een goed toetsenbord worden meegeleverd.

Het materiaal waarvan de touch cover is gemaakt voelt heerlijk zacht, bijna fluweelachtig aan. De toetsen hebben geen merkbaar indrukmoment. Het zijn echt aanraaktoetsen.

De touch cover bevat zelfs een Windows-toets om snel terug te keren naar het startscherm en een heuse trackpad.

Het toetsenbord heeft daarnaast aparte knoppen om de speciale Windows 8-charms voor Zoeken, Instellingen en meer direct te openen.

2. Inhoud van de doos

De surface zelf is verpakt in de witte binnendoos. Via een klapdeksel wordt de inhoud zichtbaar.

De complete inhoud van de doos:

• Surface
• Netsnoer en adapter (wel geschikt voor Nederlandse wandcontactdozen)
• Summier boekje en gebruiksaanwijzing.
• Touch cover met toetsenbord

De Surface heeft aan de achterkant een uitklapbaar deel. Hiermee kun je de surface rechtop zetten om bijvoorbeeld een film te kijken, foto’s als diavoorstelling af te spelen of om het toetsenbord in te klikken en de tablet als laptop te gebruiken.

Het toetsenbord klikt zich met een verrassend sterke magnetisch klik vast aan de tablet. Je kunt zonder problemen de Surface optillen aan het toetsenbord zonder dat hij er af valt. Ik heb de indruk dat de bevestiging steviger is dan de cover van de iPad 2. Als je een iPad 2 (of 3) optilt aan het covertje, dan valt de tablet op de grond. De Surface zit steviger vast. De complete opstelling ziet er dan zo uit:

Je kunt de touch cover op verschillende manieren over of achter de tablet vouwen. Het toetsenbord zelf is niet oprolbaar (zoals het hoesje van de iPad 2). Dit is één rigide deel.

3. Surface in gebruik nemen

Tijd om de Surface in gebruik te nemen. Hij wordt opgeladen geleverd, dus als het goed is kun je direct aan de slag. De aan/uitknop zit rechtsboven (als je de tablet rechtop houdt, met het Windows-logo aan de onderkant en de camera aan de bovenzijde).

Installatiestappen

De installatiestappen zijn eenvoudig. Je hoeft bijvoorbeeld geen versienummer in te vullen. Wel moet je de beveiligingssleutel van je Wifi-netwerk bij de hand hebben. Deze kun je tijdens de installatie direct opgeven.

1) Kies de weergavetaal. De keuzes bij deze (Duitse) Surface waren Deutsch, English en Francais. Ik koos bij de installatie voor Engels (en heb dit later omgeschakeld naar Nederlands, zie verderop). Daarna moet je de licentievoorwaarden accepteren.

Je kunt dit zowel via aanraakbediening als via het toetsenbord doen, desgewenst zelfs gemixt. Op het moment dat je de touch cover losklikt wordt automatisch een on-screen toetsenbord getoond als je in een tekstvak klikt.

Terzijde: ik had dit nodig omdat ik mijn e-mailadres moest invullen. Maar ik had geen idee hoe dit op een Duits toetsenbord moest. Het @-teken (Shift+2 op een US-toetsenbord) staat op de touch cover rechts onder de Q. En wat ik ook probeerde (Shift+Ctrl+Q, Alt+Shift+Q), het lukte me niet om een apestaartje op het scherm te toveren. Uiteindelijk heb ik het toetsenbord maar losgeklikt en via het on-screen toetsenbord mijn e-mailadres ingevuld. Daar zat de @ gelukkig op de vertrouwde plek ;-)

2) Kies een kleurenschema en een computernaam.

3) Kies een wireless netwerk om verbinding mee te maken. Wat me opviel was dat ik normaal gesproken in mijn kantoor ongeveer 3 draadloze netwerken ontvang (twee van mezelf en die van de buren). Maar de Surface leek zo ongeveer alle netwerken in de straat op te pikken:

4) Gebruik je e-mailadres (of ander Microsoft Live account) om je aan te melden. Windows 8 haalt dan direct je contactgegevens op en stelt de pc verder persoonlijk in. Hier had ik dus het @-teken nodig en moest ik werken via het on-screen toetsenbord.

5) Daarna is het een kwestie van wachten. In mijn geval ongeveer 4-5 minuten. De apps worden geïnstalleerd en gegevens worden gesynchroniseerd. Ondertussen wordt op de Surface een filmpje met basisbediening afgespeeld en daarna wisselt het scherm telkens van kleur om aan te geven dat het installatieproces nog bezig is.

6) Gereed. Het Windows 8-startscherm verschijnt. Dat de synchronisatie is geslaagd, is direct te zien omdat het kleurenschema van mijn desktop Windows 8-pc is overgenomen (en niet het blauw dat ik bij de installatie koos). Ook de locatieherkenning werkt goed – het actuele weer voor mijn woonplaats werd opgehaald.

Tot mijn verbazing is in Windows RT ook een tegel Bureaublad aanwezig (ik dacht dat die hierin ontbrak, omdat je op Windows RT immers geen gewone Windows-toepassingen kunt installeren. Dit gaat nog voor heel wat vraagtekens en helpdesktelefoontjes zorgen ben ik bang!).

Hierin was in Internet Explorer zelfs al mijn standaardzoekmachine (Google) gesynchroniseerd, in plaats van de standaard zoekdienst Bing van Microsoft.

Onderin de taakbalk zijn de pictogrammen voor Microsoft Word, Excel, Powerpoint en OneNote zichtbaar. Deze zijn standaard geinstalleerd op Windows RT en hoef je dus niet apart te kopen.

Ik was echter in de veronderstelling dat met Windows RT speciale Touch-versies (voorheen: “Metro”-versies) van Office zouden worden meegeleverd. Maar dat is dus niet het geval, het zijn de gewone Bureaubladversies. Vandaar misschien ook de aanwezigheid van de Bureaublad-tegel op het startscherm. Ik

4. Eerste gebruikerservaringen

Ik heb – al zeg ik het zelf – al een ruime gebruikerservaring met Windows 8. Hoewel het (nog) niet mijn standaard besturingssysteem is, werk ik al ruim een half jaar met Windows 8 en heb ik uiteraard het complete Handboek Windows 8 geschreven op een Windows 8-computer, inclusief touchscreen, de Dell ST220 T.

Maar een losse tablet zoals de Surface is toch weer wat anders. Opeens zit je op de bank in de huiskamer met Windows 8 in plaats van op je kantoor met comfortabele muis en toetsenbord onder handbereik.

Na één avondje oefenen (gisteravond) zijn dit mijn eerste indrukken:

• Het scherm is van buitengewone kwaliteit. Helder, responsief, diep zwart. Een dikke pluim. Reageert heel goed op touch-bewegingen. Heerlijk om mee te werken.
• De Windows-toets om terug te keren naar het startscherm geeft een kleine trilling als respons bij indrukken. Zo heb je echt het gevoel dat de tablet op je reageert. Door de plaatsing (midden op de lange zijde) ben je van nature geneigd de tablet horizontaal te houden, in tegenstelling tot bijvoorbeeld een iPad (waarbij de Home-knop midden op de korte kant zit).
• De tablet ligt lekker in de hand. Breder en (iets) zwaarder dan een iPad, maar een lekker ‘warme’, zacht aanvoelende achterkant. Geen koud plastic of metaal.
• De Surface-tablet is niet traag, maar toch merkbaar langzamer dan een desktopcomputer.
• Het installeren van een aanvullende taal is goed te doen, maar verloopt ook via het bureaublad. Daardoor heb je ongemerkt toch het gevoel met een ‘pc’ te maken te hebben in plaats van met een tablet. Niet alles kan dus via de nieuwe interface. En dan moet je opeens een gewoon bureaubladvenster bedienen en manipuleren met je vingers. Dat voelt onnatuurlijk en overbodig.
• Het downloaden en installeren van Nederlands als voorkeurstaal (130 MB taalpakket) duurt bijna een kwartier. Dat is lang.
• Het lijkt er op dat dit voor elk account opnieuw moet gebeuren. Ik maakte een account voor de kinderen, maar dit staat standaard weer op Engels ingesteld en Nederlands staat niet genoemd in de lijst met beschikbare talen, ofschoon ik dat zojuist – voor mijn eigen account – had gedownload en geïnstalleerd.
• In de Store staan onmiddellijk updates klaar voor belangrijke apps als Mail, Foto’s, Kaarten en andere. Dit is te zien zodra je
• De camera’s aan voor- en achterzijde lijken vooral bedoeld voor Skypen en MSN’en. De resolutie en kwaliteit is te laag om echt video- en fotomateriaal mee te schieten.

Later meer gebruikservaringen. Mocht je ondertussen vragen of opmerkingen hebben, laat dan een reactie achter.

Peter Kassenaar
-- 3 november 2012.

Er is de laatste tijd veel aandacht voor het ontwikkelen van mobiele applicaties, of kortweg apps. Niemand zal de populariteit van de iPhone, iPad en Android-telefoons en –tablets zijn ontgaan. Ik heb hier veel trainingen in verzorgd de afgelopen maanden. Steeds vaker krijg ik ook een vraag als ‘Ik wil graag apps ontwikkelen, maar heb eigenlijk geen programmeerachtergrond. Is dit een bezwaar’?

De vraag is eenvoudig genoeg. Het antwoord ligt – zoals vaak – wat gecompliceerder.

Statische applicaties

In principe is voor het maken van apps maar weinig programmeerkennis nodig. Met frameworks als MobDis (http://www.mobdis.com/tour-page/ ) of Codiqa voor jQuery Mobile (http://codiqa.com/) is in enkele stappen een mobiele user interface samen te stellen. Hiervoor kan dan zelfs al content worden ingesteld. De inhoud is dan wel beperkt tot statische tekst en afbeeldingen. Alle informatie van de app wordt rechtstreeks in het framework getypt en kan daarna worden gecompileerd naar een mobiele app. Kortom, op deze wijze heb je snel en (vrijwel) zonder programmeren een app. Tegelijkertijd is dit dan in feite niets meer dan een elektronische folder in app-formaat. Qua functionaliteit is dit vergelijkbaar met de eerste serie statische websites uit de jaren negentig van de vorige eeuw.

Op het moment dat de app ook daadwerkelijk enige functionaliteit moet krijgen – er moeten bijvoorbeeld nieuwsberichten uit webservices worden getoond in de app of de app moet informatie kunnen onthouden, opslaan en doorgeven tussen verschillende pagina’s, of terugsturen naar een server van het bedrijf, dan ontkom je niet aan het feit dat je dit zelf zult moeten programmeren.

Kennis van alleen Dreamweaver, Photoshop of illustrator is dan onvoldoende. Immers, een app is – zoals de naam al zegt – een applicatie, oftewel een computerprogramma. En totdat processors zo slim zijn dat ze onze bedoelingen kunnen raden, moet je een computer exact, tot top de puntkomma nauwkeurig, vertellen wat je van hem verwacht. Dat proces staat al tientallen jaren bekend onder de naam programmeren :-)

Dynamische applicaties

Zodra beslist is dat een applicatie interactiviteit en functionaliteit moet bevatten zijn er verschillende keuzes die gemaakt kunnen worden. De twee belangrijkste zijn:

• Ontwikkelen als web-app en daarna compileren met een tool als PhoneGap, AppMobi of Appcelerator. Hierbij wordt gebruik gemaakt van bekende webtechnieken als HTML, CSS en JavaScript. Dit is de eenvoudigste manier voor iemand met basis-webkennis om snel een mobiele app te maken. Maar let op: het is nog steeds programmeren. Er komt altijd minimaal een zekere hoeveelheid JavaScript bij kijken om een goed werkende app te maken, ongeacht of je een app wilt maken voor iOS, voor Android, of voor Windows Phone 7. Je hebt echter snel resultaat. In veel gevallen biedt deze werkwijze een goede kosten/baten-afweging.
• PhoneGap
• AppCelerator
• AppMobi
• Ontwikkelen als native app voor het doelplatform van je keuze. Je programmeert de app dan in de programmeertaal Objective C voor (Apple iOS), in Java (voor Android, Blackberry en andere), of in Xaml en C# voor Windows Phone. Dit is de krachtigste methode. Het stelt je in staat om rechtstreeks te werken met de tools die specifiek zijn gemaakt om het meeste uit de hardware te halen. Het zal echter geen verbazing wekken dat deze manier ook het meest van je kennis als programmeur vergt en een steile leercurve kent. Het ontwikkelen van apps voor meerdere platformen op deze wijze is daarnaast een prijzige methode. Want: de code die je hebt geschreven voor Apple (iPhone, iPad), laat zich niet 1:1 vertalen naar Java-code voor de andere platformen. Je moet de code dan deels opnieuw schrijven.
• Apple Xcode 4
• Android, Eclips en Java tutorials

Naast de twee hiervoor genoemde manieren zijn er langzamerhand tal van mengvormen waarbij je met kennis van platform A kunt ontwikkelen voor platform B of omgekeerd. Een voorbeeld hiervan is het project Xamarin, waarbij je met C#-technieken (afkomstig uit het .NET-platform van Microsoft) kunt ontwikkelen voor Objective C van Apple of voor Android.

Conclusie

De vraag ‘Ik wil graag apps ontwikkelen, maar heb eigenlijk geen programmeerachtergrond. Is dit een bezwaar?’ kan derhalve vaak worden beantwoord als:

“Nee, dat is geen bezwaar, zolang je er in dat geval tevreden mee bent dat je een uiterst eenvoudige app overhoud die behalve statische informatievoorziening geen toegevoegde kan bieden.”

In de praktijk blijkt dat bedrijven en organisaties (maar ook individuele ontwikkelaars) hier al snel ontevreden mee zijn en tegen beperkingen aanlopen. En dan zal in vrijwel alle gevallen alsnog aanvullende functionaliteit zelf geprogrammeerd moeten worden. Minimaal vereist in dat geval is JavaScript-kennis en de werking van HTML en CSS. Wie het onderste uit de kan wil halen moet zich gedegen verdiepen in het doelplatform van zijn of haar keuze.

Voor meer informatie over de mogelijkheden die in jouw situatie of uw bedrijf of organisatie het beste zijn (consultancy) of het zelf leren programmeren van cross-platform webapps (training) kun je contact opnemen voor een vrijblijvend inventariserend gesprek.

Peter Kassenaar
-- 23 april 2012

Op dinsdag 13 september 2011 toonde Microsoft op de BUILD-conferentie een eerste versie van Windows 8 aan het grote publiek. Verrassend was toch wel dat nog tijdens de keynote-sessie al een downloadadres werd opengesteld, van waaraf iedereen een developer preview kan downloaden. In dit artikel laat ik via een beeldverslag met veel schermafbeeldingen zien hoe u deze versie kunt downloaden en installeren in een Virtual Machine (VM).

Bezoek dev.windows.com voor het laatste nieuws over Windows 8.

Inleiding – welke Virtualisatie-opties zijn er?

Windows 8 kan worden geïnstalleerd op ‘echte’ hardware, maar ook in een virtuele machine. Hierbij gelden de volgende kenmerken voor de developer preview van Windows 8.

• Windows 8 is niet te installeren in VMWare 7.x.
• Windows 8 is niet te installeren op Virtual PC 2007, het virtualisatieprogramma dat met Windows 7 wordt meegeleverd.
• Windows 8 is wel te installeren op Hyper-V, of op VirtualBox. Ik gebruik in dit artikel VirtualBox. Download en installeer Virtual Box vanaf http://www.virtualbox.org/wiki/Downloads.
• Windows 8 kan ook worden gestart vanaf VHD (desgewenst zelfs vanaf USB-stick of externe vaste schijf). Scott Hanselmann heeft hiervan een uitstekende beschrijving gemaakt (Engelstalig).

Windows 8 downloaden en installeren

1. Download Windows 8 developer preview bij Microsoft. Sla het .iso-bestand op op het bureaublad. In Virtual Box kunt u zowel de 32-bits als de 64-bits versie gebruiken. De bestandsomvang varieert van 2.8 GB tot 4.8 GB.

2. Maak de VM met VirtualBox. Start VirtualBox en kies Nieuw.

3. Maak een nieuwe VM. Stel een naam in (bijvoorbeeld Windows 8 Developer Preview) en kies Windows 7 als gastbesturingssysteem.

4. Stel de hoeveelheid geheugen in. Een waarde tussen de 2 en 3 GB zou voldoende moeten zijn.

5. Neem de standaardinstellingen voor een virtuele vaste schijf over. Klik 2 x op Volgende.

6. Stel een locatie en omvang voor het vaste schijfbestand in. Ik sla de virtuele harddisks op een aparte schijf op (In D:\Virtual Machines\) en heb een omvang van 60 GB ingesteld. U kunt ook een dynamische vaste schijf gebruiken, maar dit is vaak wat langzamer.

7. Bekijk de samenvatting en klik op de knop Create.

De vaste schijf wordt gemaakt. Dit kan enkele minuten duren (ca. 5-10 min). Dit is afhankelijk van de omvang van de virtuele schijf die u hebt gekozen en de snelheid van de harddisk waarop de virtuele schijf wordt gemaakt.

Klik na afloop nogmaals op Create. De VM is nu gemaakt, maar nog niet geïnstalleerd of gestart.

De VM instellen

1. Kies in het hoofdscherm van VirtualBox Manager de knop Instellingen om enkele extra instellingen voor de VM op te geven. Kies eerst de sectie Systeem.

• Selecteer de optie IO APIC activeren.
• Kies op het tabblad Processor de optie 2 CPU (alleen als uw computer dit ondersteunt, uiteraard).
• Controleer of op het tabblad Acceleratie de opties VT-x/AMD-V activeren en Geneste Paging activeren actief zijn.

2. Kies de categorie Beeldscherm. Schakel hier de optie 3D acceleratie activeren in. Pas eventueel ook de hoeveelheid videogeheugen aan.

3. In de categorie Opslag kunt u het eerder gedownloade .iso-bestand met de Windows 8-installatiebestanden mounten. Van hieruit kan Windows 8 vervolgens worden geïnstalleerd. Deze stap mag u daarom beslist niet overslaan.

4. Bekijk de overige categorieën en breng hierin naar wens de nodige aanpassingen aan. In principe is de VM nu klaar om gestart te worden. Sluit het venster Instellingen.

5. Klik in het hoofdvenster op Start om de installatie te starten. Na enkele ogenblikken verschijnt het venster Install Windows en kunt u de gewenste installatiegegevens instellen.

6. Kies twee keer Next en daarna Install Now. Doorloop de installatie verder door de standaardinstellingen over te nemen en telkens op Next te klikken (Let op: de installatieoptie Upgrade is niet van toepassing. Kies Custom en daarna de eerder gemaakte virtuele harddisk van 60 GB om Windows 8 te installeren).

7. Op een vlotte computer neemt installatie niet meer dan 3-5 minuten (!) in beslag. De VM start enkele keren opnieuw op. Daarna verschijnt het bekende groene Windows 8-scherm en kunt u enkele vragen beantwoorden.

• Geef de computer een naam, bijvoorbeeld VM_Windows8.
• Kies Use Express Settings om snel de standaardinstellingen te kiezen. Via Customize kunt u zelf instellingen maken voor het netwerk, Windows Update, bescherming van bestanden en meer.
• Gebruik uw Windows Live ID (e-mailadres) om in te loggen bij Windows Live en het account op de VM in te stellen. Merkwaardig genoeg duurde dit bij mij ongeveer net zo lang als de installatie van de complete Windows 8-installatie.

Gereed

Windows 8 is nu geïnstalleerd. U kunt aan de slag met de nieuwe gebruikersomgeving, de Live Tiles, de Metro-style User Interface van applicaties, Internet Explorer 10 en meer. In volgende blogberichten hoop ik wat meer over de eerste gebruikerservaringen te kunnen vertellen.

Peter Kassenaar
-- 15 september 2011

Een goede webdesigner zorgt uiteraard voor een correcte scheiding van structuur (HTML), opmaak (CSS) en gedrag (JavaScript). Het opstellen en onderhouden van stylesheets is er in de loop der jaren echter niet eenvoudiger op geworden. Niet alleen is het aantal mogelijke CSS-eigenschappen met de aanstaande komst van CSS3 flink uitgebreid, alle browsers ondersteunen deze eigenschappen ook nog eens met een iets andere notatie. Browsers gebruiken hiervoor specifieke voorvoegsels als –moz-, –webkit- en –o-, voor respectievelijk Mozilla Firefox, Chrome en Opera. De standaardnotaties zoals door W3C zijn voorgesteld, worden door geen enkele browser ondersteund (op een enkele uitzondering na in de betaversie van IE9).

Problemen

Deze wildgroei aan CSS-eigenschappen zorgt voor een aantal problemen:

• CSS-bestanden worden groot.
• CSS-bestanden worden onoverzichtelijk en daardoor moeilijker – en dus duurder – om te onderhouden.

Vooral bij mobiele apparaten, die bijna per definitie met een beperkte bandbreedte te maken hebben, is dit van belang. Het scheelt het nogal of je een stylesheet van 120KB of van 40KB moet downloaden over een 3G-verbinding.

Oplossing

Vandaag bespreken we een tool die een oplossing kan bieden voor deze problemen: CSS Agent. CSS Agent is een ASP.NET Handler die stylesheets automatisch bewerkt voordat ze naar de browser worden verzonden. Simpel gezegd doet CSS Agent twee dingen:

• CSS Agent zorgt voor automatische browserspecfieke voorvoegsels.
• CSS Agent zorgt voor automatische minification (compressie) van CSS-bestanden.

Als extraatje introduceert CSS Agent bovendien de mogelijkheid CSS constanten te gebruiken. Je definieert dan bijvoorbeeld bovenin je bestand eenmalig een kleur in een $variable en verderop in je stylesheet gebruik je de variabelenaam in plaats van de letterlijke kleurwaarde. Dit kan niet alleen voor kleuren, maar ook voor achtergrondafbeeldingen, margin, padding en veelgebruikte andere CSS-eigenschappen. Jazeker, ook met CSS Agent moet je nog steeds zelf de basiscode schrijven, maar de rest wordt een stuk makkelijker gemaakt.

Je hoeft bijvoorbeeld niet meer precies te weten wat de Firefox-notatie voor afgeronde hoeken is, of welke verschillende notatiewijzen voor linear-gradient gebruikt worden voor Opera, Chrome en IE. CSS Agent ondersteunt 25 CSS3-eigenschappen, variërend van background-size tot transition-timing-function. Je vind ze allemaal op de site van maker Keith Clark.

Stappenplan

Het uitgangspunt is een ASP.NET-website die draait op Internet Information Server 7 of IIS Express. Eerdere versies van IIS of de Web Development Server van Visual Studio (Cassini) worden ook ondersteund, maar blijven in dit artikel buiten beschouwing. Zie eventueel de website van de maker voor meer informatie. Ik ga er van uit dat je de site maakt en onderhoud in Visual Studio 2010 of Visual Studio Express (gratis).

• Download het zip-bestand vanaf http://www.keithclark.co.uk/labs/cssagent/. Op het moment van schrijven van dit artikel was v1.0.0 (alpha) de meest recente versie.
• Het zip-bestand bevat twee bestanden: CSSAgent.dll (12 kb) en een changelog.txt-bestand.
• Kopieer de DLL rechtstreeks naar de /bin-directory van je website. Een andere manier is hem in een map op je vaste schijf te plaatsen en daarna via Add Reference een verwijzing naar de DLL op te nemen. Het voordeel hiervan is dat je in de toekomst maar op één plek de DLL hoeft te kopiëren als er een nieuwe versie verschijnt. Projecten met een referentie worden dan automatisch bijgewerkt (auto-refresh).

• Schrijf een handler in web.config. Deze sluist de .css-bestanden door naar CSS Agent om te bewerken. De handler komt in de sectie <system.webServer> van web.config.

De code voor de handler ziet er als volgt uit:

<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<handlers>
	<add name="CSS Agent" path="*.css" verb="GET" type="KeithClark.Web.CSSAgent" />
</handlers>
</system.webServer>

Voorbeeld

Deze twee stappen (DLL kopieren en handler toevoegen aan web.config) zijn alles wat je hoeft te doen. Schrijf nu in je CSS-bestand de code die je graag zou willen gebruiken. Stel bijvoorbeeld dat je een koptekst met afgeronde hoeken en een verlooptint als achtergrond wilt gebruiken:

h1 {
    color: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #333;
    background: linear-gradient(top, black, grey);
    height:40px;
    text-align:center; 
    padding:10px;
}

En de HTML is als volgt:

<h1>Koptekst met CSS3-eigenschappen</h1>

Je ziet dat alleen de standaard W3C-notaties voor border-radius en background worden gebruikt, zonder verdere toevoegingen. Toch ziet het voorbeeld er in Firefox uit zoals verwacht:

Analyse in Firebug laat zien dat de browserspecifieke eigenschappen zijn toegevoegd door CSS Agent:

Het zal duidelijk zijn dat dit je enorm veel typewerk zal schelen. Je hoeft nu alleen nog maar de ‘echte’ W3C-schrijfwijze te onthouden, en CSS Agent zorgt voor optimalisatie van deze, en nog 23 andere eigenschappen voor de verschillende browsers.

CSS minification

Door aan de verwijzing naar je .css-bestand de optie –min toe te voegen, zorgt CSS Agent voor automatische compressie (minification) van je stylesheet. De spectaculaire ruimtewinst die dit met zich meebrengt laat zich het best illustreren door een stylesheet uit een live site (in mijn voorbeeld: www.yindo.nl) te gebruiken:

In de pagina (of Master Page van de site) staat bijvoorbeeld de volgende code:

<link href="css/yindo.css" type="text/css" rel="stylesheet" />

Maak hiervan

<link href="css/yindo-min.css" type="text/css" rel="stylesheet" />

Analyse

Als je de pagina laadt, zul je geen verschil merken in vormgeving. Maar als je de resultaten op de achtergrond analyseert, zie je dat er veel veranderd is. Met de HTTP Debugging tool Fiddler is dit goed te zien.

Als de ‘gewone’ stylesheet wordt geladen, is de omvang ruim 15,3 KB (zie voorgaande afbeelding, klik eventueel voor een vergroting). De inhoud van de stylesheet is plain text en ziet er op deze manier uit:

Als in de Master Page de verwijzing wordt aangepast in yindo-min.css, wordt het beeld heel anders:

Het stijlenbestand is nu nog maar 2,9 KB in omvang. Een besparing van meer dan 75%! De code is sterk gecomprimeerd, zoals de tekstweergave laat zien.

Voor het menselijk oog is dit niet meer leesbaar, maar computers weten hier prima raad mee. Het bestand  yindo-min.css wordt door CSS Agent gecached op de server en alleen opnieuw gegenereerd als het originele .css bronbestand wordt gewijzigd. Je hoeft er dus niet bang voor te zijn dat de stylesheet elke keer wordt gecomprimeerd en zo voor extra belasting op de server zorgt. De foutmelding die Visual Studio toont (‘kan yindo-min.css niet vinden’), mag je rustig negeren.

Wat mij betreft is de keuze snel gemaakt. Vanaf dit moment gebruik ik CSS Agent voor elk nieuw project!

Aandachtspunten

Er zijn enkele aandachtspunten bij het gebruik van CSS Agent

• CSS Agent werkt niet met inline CSS. Een <style>…</style> blok in een pagina wordt dus niet geparsed. Je zult moeten werken met gekoppelde CSS-bestanden, via <link href=”…” />. Alleen dan wordt het stylesheet door de handler goed opgepikt.
• Het is een typische .NET-tool en bedoeld voor ASP.NET/IIS-websites. CSS Agent is daarmee niet geschikt voor PHP/MySQL/Apache-websites.
• Het werken met Cassini (de ingebouwde Development Web Server van Visual Studio) kan problemen geven. Ik – en enkele andere developers - kregen hem in elk geval niet aan de praat, ondanks aanwijzingen van Keith Clark (zelf had hij er geen problemen mee, en kon de bug niet reproduceren). Maar het is sowieso ondertussen een goed idee om over te stappen op het nieuwere IIS Express.
• CSS Agent is (nog?) niet beschikbaar via de NuGet Gallery. Je zult dus zelf het bestand moeten downloaden en installeren/referencen. Clark gaf aan dat hij de mogelijkheden hiervoor in de toekomst zou bestuderen, maar dat het voorlopig geen hoge prioriteit had.

Conclusie

CSS Agent is absoluut een tool die de moeite waard is. Het maakt je leven als developer een stuk eenvoudiger, in elk geval totdat de browsers overeenstemming hebben bereikt over de voorvoegsels. Daarna blijft CSS Agent nog nuttig om stylesheets automatisch te comprimeren en het werken met CSS contstants mogelijk te maken (niet besproken in dit artikel).

Tip: als je deze tool ook gaat gebruiken, overweeg dan een donatie aan de maker: Keith Clark vraagt een bescheiden bijdrage van GBP 5,- om de verdere ontwikkeling van deze tool mogelijk te maken.

Peter Kassenaar
-- 31 januari 2011

Om de ontwikkelingen op mijn vakgebied bij te houden, moet ik uiteraard regelmatig bijscholen. Dit doe ik onder meer door doorlopend door Twitter en LinkedIn-groepen bij te houden, (ontwikkel-)blogs te lezen en natuurlijk de maandelijkse tijdschriften te lezen. Maar ook door een à twee keer per jaar een conferentie te bezoeken. Vorig jaar was wat dat betreft een hoogtepunt, toen ik in april 2010 bij de Launch-conferentie van Silverlight 4 en Visual Studio 2010 in Las Vegas aanwezig was (zie mijn aparte blog hierover).

Maar dat is al weer bijna een jaar geleden. En in een jaar verandert er veel op internetgebied. Afgelopen week bezocht ik daarom samen met collega-auteur en –programmeur Michiel de Rond het puur op ontwikkelaars gerichte Microsoft WebCamp in Utrecht.

WebCamps

De Microsoft WebCamps zijn tweedaagse, gratis conferenties waarin in hoog tempo de laatste ontwikkelingen worden besproken. Uiteraard is de inhoud voornamelijk gericht op Microsoft-technologieen. Maar er is ook steeds meer aandacht voor de open standaarden, zoals HTML5, jQuery en meer. Sterker nog, zoals hoofdspreker Scott Hanselman het verwoorde, ‘ ja, we praten deze dagen bijna alleen maar over Microsoft-technologie. Maar tegelijkertijd is ruim 90% open source. Van alles wat we deze dagen bespreken, van jQuery tot MVC3, tot NuGet, kun je de broncode downloaden, inzien, verbeteren teruggeven aan de community. Micrsoft nowadays is not nearly as evil as you guys think we are. Or maybe even, as we used to be’. Dat was nog eens een hand in eigen boezem om de dagen mee te beginnen. En het schiep hooggespannen verwachtingen (ter vergelijk: lees nog eens mijn verslag van de Apple iPhone Tech Talk uit november 2008. Naar aanleiding van dit blog werd mij door Apple met juridische stappen gedreigd en ik heb niet de indruk dat dit beleid sindsdien is aangepast).

Alle presentaties, codevoorbeelden, labs en begeleidende papers van deze twee dagen is voor iedereen downloaden vanaf www.webcamps.ms/.

Drew Robbins (li.) en Scott Hanselman voor de start van de eerste dag in De Fabrique, Utrecht.

Scott Hanselman

Met Scott Hanselman heeft Microsoft er voor gekozen een van zijn top-sprekers af te vaardigen. Een ijzersterke zet, wat mij betreft. Na vice president Scott Guthrie (ja, bij Microsoft is het kennelijk een pre als je Scott heet, om hogerop te komen in de hierarchie :) is Hanselman waarschijnlijk degene die het meest weet van alle technologieën die door Microsoft worden bedacht, uitgevoerd en in hoog tempo op de wereld worden losgelaten. En dat zijn er nogal wat. Alleen al het lijstje met nieuwe onderdelen en componenten op de eerste dag werd behandeld, zag er als volgt uit:

• WebMatrix – een nieuwe ontwikkeltool met een lage instapdrempel. Geschikt voor iedereen die ‘ echt’ wil programmeren, maar niet direct bij het topproduct Visual Studio wil instappen.
• MVC3 – de volgende versie van het steeds meer aan belang winnende Model-View-Controller framework. De basics werden besproken, daarna ook de meer complexe nieuwe onderdelen als dependency injection, Custom validation en Custom Action filters.
• NuGet – een nieuwe manier om snel open source libraries uit de community(inclusief dependencies) aan je project toe te voegen.
• HTML Helpers – voor MVC-projecten.
• Razor – een nieuwe View Engine met eenvoudig(er) syntaxis voor MVC-projecten.
• Entity Framework 4 – een nieuwe manier om data te modellen in classes (een ORM-tool), die in veel opzichten beschouwd kan worden als de opvolger van DBML/Linq-to-SQL. Drie benaderingen werden besproken: Model First, Code First en Database First
• Unobtrusive AJAX en client validation  – voor jQuery en MVC-projecten.

Hanselman werd vergezeld door Technical Evangelist Drew Robbins, specialist op het gebied van PHP, Ruby, IIS en ASP.NET. Met zijn tweeen voerden ze een perfecte show op, waarbij Robbins - geheel volgens afspraak- met verve de rol van second banana (aangever in Amerikaanse talkshows) speelde.

Robbins en Hanselman bespreken iPhone 4 vs. Windows Phone 7-opties tijdens de lunch

Hoewel, het woord ‘show’ is hierbij misschien een beetje misplaatst. Jazeker, er werd –zeker in het eerste uur- veel en uitbundig gelachen, maar ondertussen loog het tempo van de demo’s en de slides er niet om. In hoog tempo passeerden tal van onderwerpen de revue. Hanselman is een van die weinige geeks die tegelijk ook een perfect, onderhoudend, enthousiasmerend en toch kraakhelder betoog kan neerzetten en rap van de tongriem gesneden is (over een van de slides vol overbekende brochureplaatjes met tal van lachende mensen rond een pc  ‘I don’t know what this is, probably marketing bullshit. Just look at those clip art girls. Next.’).

Tijdens de presentaties kon je via Twitter vragen stellen, die dan direct beantwoord werden. Or you can just raise your hands, I guess. It’s a bit analogue, but I suppose it will do, aldus Hanselman, met een vette grijns.

Dag 2 – Hands on labs

Dag 2 van de webcamps was geheel ingeruimd voor hands on labs. Voor alle behandelde onderwerpen (en meer) waren voorbeeldwebsites en stap-voor-stap oefeningen aanwezig die je zelfstandig kon uitvoeren op je eigen laptop. Daarvoor was een zaal ingericht met stroompunten en draadloos internet. Een apart gezicht. Het leek inderdaad wel een LAN Party, maar dan voor programmeurs, zoals een van de aanwezigen twitterde. Er liepen veel medewerkers van Microsoft Nederland rond, en uiteraard waren ook Hanselman en Robbins weer van de partij. Zij hielpen je als je vragen had en beantwoorden ook vragen over projecten waar je zelf aan werkte op dat moment. Een hele dag helpdesk op het hoogste niveau.

Hands on Labs op sfeervolle locatie – dag 2 – koffie & cola onder handbereik

Ikzelf heb me deze dag met name gericht op MVC3 – het was mijn eerste kennismaking met dit type programmeermodel en het vergt een heel andere manier van denken over het ophalen en presenteren van data. Modellen maken, deze met een Controller bewerken en het resultaat in een View tonen in je website. Een hele omschakeling als je –zoals ik- al bijna 10 jaar gewend bent te werken met ASP.NET WebForms (naast uiteraard kale HTML, jQuery en CSS). Ook heb ik meer geleerd over Entity Framework en NuGet. Items die me in mijn dagelijks werk voor Yindo en andere projecten goed van pas zullen komen.

Links

Tot slot een paar handige links. Zoals was veel inhoud als open source beschikbaar. Dat gold ook voor de presentaties, voorbeeldcode, labs, tools en andere assets die deze dagen werden gebruikt. Hier zijn enkele adressen.

• Microsoft WebCamps – alle presentaties en voorbeeldcode van de web camps gratis beschikbaar
• Scott Hanselman – blog
• Drew Robbins blog
• Scott Guthrie MVC3 – blogpost met introductie MVC3 en tal van andere producten
• Jon Galloway MVC3 – blogpost
• MSDN NL – organisatie – thanks, guys!

Peter Kassenaar
-- 22 januari 2011

P.S: waarom over deze bijeenkomst een blogartikel geschreven? Wel, deels opnieuw vanwege een wijsheid van Hanselman: ‘If you’ve got something to share or to remember, don’t e-mail it, don’t stuff it in a folder on your harddrive, but blog it. It might be to interest of others, and best of all, you can always Google yourself.’

Waarvan akte.

Je bent nooit te oud om te leren, zo blijkt maar weer eens. Gisteren kwam ik een handigheidje op het spoor waarvan ik wilde dat ik hem eerder had ontdekt. Het blijkt in Word mogelijk om twee documenten naast elkaar te openen en deze synchroon te laten scrollen. Dit kan buitengewoon praktisch zijn bij het reviewen van documenten, waar je bijvoorbeeld je eigen versie (origineel) vergelijkt met de aantekeningen van een redacteur of reviewer. Door synchroon scrollen in te schakelen kun je in het ene document omhoog of naar beneden bladeren, terwijl het andere document automatisch mee schuift.

Werking

Het proces zoals hier beschreven werkt in Word 2007 en Word 2010. Waarschijnlijk is het in eerdere versies van Word ook mogelijk, maar daarvan ken ik de bijbehorende menuopdracht niet.

1. Open het eerste document in Word (bijvoorbeeld je eigen, originele bestand).
2. Open het tweede document (bijvoorbeeld het bestand met aantekeningen van de redacteur).
3. Kies in het eerste document in het Lint de tab Beeld.
4. Klik op Naast elkaar weergeven.
• Als er nog meerdere documenten zijn geopend, vraagt Word in een extra venstertje welk document samen met het huidige bestand weergegeven moet worden.
  
5. De documenten worden naast elkaar gezet. Klik indien nodig op de knop Synchroon schuiven (deze wordt als het goed is vanzelf aangezet).
   
6. Scrollen maar! De bestanden lopen synchroon van boven naar beneden. Uiteraard kun je het document bewerken zoals je gewend bent. Klik nogmaals op deze knoppen om het synchroon schuiven weer uit te schakelen.

Het beeldscherm ziet er hierbij bijvoorbeeld als volgt uit:

Ik hoop dat je wat aan deze tip hebt,

Peter Kassenaar
30 september 2010.