Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

27februari

PhoneGap-apps handmatig signeren

Het maken en testen van PhoneGap/Cordova-apps op je eigen computer is niet lastig. De apps worden dan gesigneerd met een (tijdelijke, machinegebonden) debug-key en met deze key op je device geplaatst. phonegap-to-googlePlay

Anders wordt het als je je apps wilt publiceren in de Google Play Store. Dan moeten ze met een ‘echt’ certificaat worden ondertekend. Nu is dat proces niet zo lastig als bij Apple, waarbij je verplicht via het Apple Developer Portal moet werken, maar het kan toch nog een hele klus zijn.

Opties

Als je app gereed is, heb je verschillende opties:

  • Signeren via Eclipse en de Android Developer Tools (als je met deze IDE werkt).
  • Signeren via Android Studio. Android Studio gebruikt echter een andere build-tool (Gradle) dan PhoneGap/Cordova (Apache Ant), reden waarom het ook niet eenvoudig is een PhoneGap-app vanuit Android Studio te signeren.
  • Handmatig signeren vanaf de command line.

Deze laatste optie is de optie die altijd werkt, ongeacht het platform (Mac/Pc/Linux) en de tool die je gebruikt. Ik heb van het complete proces een YouTube-video gemaakt. Daaronder worden de stappen nog kort samengevat, maar bekijk de video (15 min.) voor een complete walkthrough.

http://www.youtube.com/watch?v=EAzFAntSM3Q

Stappen

1. Maak een keystore. Bewaar de keystore op een veilige plaats. Onthoud je wachtwoord voor de keystore. Elke app heeft zijn eigen keystore. Maak nieuwe builds van de app (updates) met dezelfde keystore.

De opdracht luidt (vervang […] door gegevens van je eigen app)

keytool -genkey -v -keystore [appname-key].keystore -alias [alias_appName] -keyalg RSA -keysize 2048 -validity 10000

2. Compileer de app in release-mode. Maak hiervoor een bestand ant.properties in de root van je android-projectmap. Dit is de inhoud van ant.properties:

key.store=[/Pad/Naar/Jouw/keystores/hello-key.keystore]
key.alias=alias_[appname]

3. Typ de opdracht ant release. Ant maakt nu in de \bin map van het project een release-versie van de app.

3a. Krijg je de foutmelding sdk.dir is missing ? Dit vooral het geval als je de app voor het eerst in release-modus wilt maken, zo heb ik gemerkt. Bij updates gaat het meestal goed. Draai dan eerst een update van het project. De opdracht hiervoor is

android update project –p [/Pad/Naar/Jouw/Project/platforms/android] –subprojects

Typ daarna opnieuw de opdracht ant release.

Typ je wachtwoord (uit stap 1) als daar om gevraagd wordt.

4. Draai jarsigner. De opdracht hiervoor is:

cd \bin

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore [Pad/Naar/Appname-key.keystore] CordovaApp-release-unsigned.apk alias_[appName]

4a. Verifieer eventueel de apk. Deze stap is niet verplicht. De opdracht hiervoor is:

jarsigner -verify -verbose -certs CordovaApp-release-unsigned.apk

5. Draai zipalign. Dit comprimeert de app verder en zet alle bytes in de goede volgorde. De opdracht is:

zipalign -v 4 CordovaApp-release-unaligned.apk FinalAppName.apk

Dan heb je uiteindelijk een gesigneerde, uitgelijnde versie van je app in het bestand FinalAppName.apk. Deze versie kun je uploaden naar Google Play.

Bovenstaande is een verkorte (en ik hoop duidelijker) weergave van de pagina op http://developer.android.com/tools/publishing/app-signing.html.

Succes er mee!

Peter Kassenaar
-- 27 februari 2015

20februari

Bronnen voor AngularJS

angularjs-logoAls docent merk je regelmatig dat je in trainingen en cursussen teruggrijpt op dezelfde bronnen. Zo ook in mijn training over AngularJS. Vaak verwijs ik naar eenzelfde blogpost, documentatiepagina of video op YouTube. En elke keer moet ik deze weer opdiepen uit mijn lijstje met Favorieten of uit mijn Diigo-links. Omdat de documentatie bij AngularJS zelf nou niet bepaald uitblinkt in leesbaarheid, voorbeelden en duidelijkheid (er is verbetering zichtbaar, maar echt handig vind ik ze nog steeds niet), heb ik er hier enkele op een rijtje gezet. Voor mezelf, maar ook als handig startpunt voor de lezer.

High level-achtergronden bij AngularJS

Waarom zou je – als bedrijf – je developmentcyclus omzetten naar, of uitbreiden met AngularJS? Wat is eigenlijk AngularJS en wat kan het voor mijn front-end development betekenen?

  • An overview of AngularJS for managers – blogpost van Fifod.com. Bekijkt meer op een high-level niveau wat er nodig is in de organisatie om (ook) Angular-projecten te gaan doen.K
  • Keynote NG-Conf 2014– Keynote van de eerste wereldwijde AngularJS-conferentie in januari 2014. Misko Hevery (maker van AngularJS) legt uit hoe Angular ontstaan is en waar het naar toe gaat. Een blik in het verleden, heden en de toekomst (roadmap).
  • [update] How do I “think AngularJS” if I have a jQuery background?  - uitgebreide post op Stackoverflow.com. In het antwoord wordt veel duidelijk over de manier waarop Angular werkt en hoe je daar het beste op kunt inspringen als je zelf vanuit een jQuery-achtergrond de switch maakt.
  • My Experience with AngularJS – The super heroic framework (…) – het blogartikel zelf bestaat voornamelijk uit onderstaande graphic – die ook mijn gevoelens voor AngularJS uiterst correct weergeven – maar lees vooral ook de commentaren onder de blogpost. Erg leerzaam en veel verschillende invalshoeken.

My feelings about AngularJS over time.

Beginnen met AngularJS – het totaalplaatje

Een serie totaal-overzichten, waar in alle gevallen een (eenvoudige) app wordt gemaakt, en een groot deel van de Angular-technieken aan de orde komt: een snel overzicht en gebruik van directives, modules, controllers, services en (soms) nog meer.

  • AngularJS Fundamentals in 60-ish minutes – Dan Wahlin laat in iets meer dan een uur zien hoe je een basis AngularJS-app maakt. Deze video is langzamerhand uitgegroeid tot een standaard-inleiding voor AngularJS.
  • A Step-by-Step Guide to Your First AngularJS App – een blogpost over het maken van een Formule1-app waarbij je via een open API live data opvraagt uit een database met F1-resultaten. Onder meer het gebruik van Ajax-calls met $http wordt hier getoond. Mede leerzaam omdat een andere techniek wordt gebruikt voor het ontwikkelen van controllers en services die via DI in de hoofdmodule worden ingevoegd.
  • AngularJS Sticky notes Pt. 1 – Architecture – Een totaalplaatje van een app om sticky notes te maken, met nadruk op de architectuur. Hier zijn services het uitgangspunt in plaats van een onderdeel dat later erbij wordt geïntroduceerd als best practice om in gegevensvoorziening te voorzien in je app. Dit ‘omgekeerd denken’ kan net net handig zijn om je op het goede spoor te zetten.
  • Searching the iTunes API asynchronously with Angular JS – artikel over een korte app waarmee je de openbare iTunes-API kunt doorzoeken en de resultaten presenteren.
  • JukeTube – Een AngularJS-YouTube videospeleer. Weinig uitleg, maar een compleet project om te downloaden bij Github en zelf de code te bestuderen.

AngularJS-ervaringen

Veel programmeurs hebben na verloop van tijd hun ervaringen in het werken met Angular op papier (of in ieder geval: op een blog) gezet. Er is veel te leren van hun fouten en ervaringen. Vaak geven ze ook een aantal tips om zelf dergelijke vergissingen te vermijden. Lees:

AngularJS en PhoneGap

Ik geef ook veel PhoneGap-trainingen, en zie langzamerhand dat AngularJS ook in deze omgeving doordringt, ten faveure van bijvoorbeeld ‘losse’ libraries als jQuery Mobile. De volgende artikelen gaan over het inzetten van AngularJS in een PhoneGap-project.

  • The Definitive Guide to Angular on Mobile – Hoe gebruik je bijvoorbeeld de module ngTouch in een mobiel project en hoe kun je met $swipe veeggebaren afvangen? Ongeveer halverwege wordt ingegaan op het omzetten van de webapp naar een standalone app met Cordova/PhoneGap.
  • AngularJS, PhoneGap and angular-seed. Let’s Go! – artikel over het gebruik van angular-seed om snel een project met basisstructuur te starten en vervolgens Angular en PhoneGap in te zetten.
  • Apps with AngularJS – combinatieartikel over het werken met AngularJS, PhoneGap en het Ionic-framework voor de user interface-elementen. Met veel nuttige verwijzingen naar meer online literatuur.

$http, services, interceptors en meer

Tot de lastigste onderdelen van het framework behoren (mijns inziens) onderdelen als het werken met promises, de low-level services $http en $resource en het gebruik van interceptors, bijvoorbeeld om gebruikers in een Angular app te authenticeren tegen een RESTful service/API. Deze artikelen hebben mij erg geholpen bij het begrijpen van de materie.

cookie-token-auth

Overige algemene blogs en literatuur

Een aantal personen in de community schrijven bijna altijd op hoog niveau. In plaats van hun individuele artikelen te noemen, verwijs ik naar de blogs zelf.

  • Dan Wahlin Blog – Eerder noemde ik al de 60-ish minutes video van Dan Wahlin, op zijn blog staan tal van andere nuttige artikelen en video-links (hij produceert ook de Web Weekly video-edition, met breder front-end webdevelopment nieuws over CSS, HTML5 en JavaScript).
  • John Papa – Ik volgde in Las Vegas een workshop van John Papa en dacht op voorhand dat ik al aardig wist hoe de vork in de steel zat. Ik vergiste me... Volg zijn blog voor meer artikelen over AngularJS en tal van andere frameworks (Breeze, Durandal en meer).
  • John Lindquist, egghead.io-  met een serie video-tutorials over AngularJS. Er is een betaald #pro-abonnement, maar veel video’s zijn ook gratis toegankelijk.
  • ng-newsletter – abonneer je op ng-newsletter, een wekelijkse nieuwsbrief met AngularJS-nieuws en verwijzingen. Hoog niveau.

AngularJS-training

<shameless plug>
Zijn bovenstaande adressen een stap in de goede richting, maar wil je liever in een wat rustiger tempo kennismaken met AngularJS, met begeleiding en feedback op je vorderingen? Neem dan contact op voor een
AngularJS-training. In twee of drie dagen maak je onder leiding van een ervaren docent (ondergetekende :-) kennis met dit uitgebreide JavaScript-framework. Ik laat je precies zien hoe je AngularJS kunt inzetten, hoe niet (!) en wat de knelpunten zijn die je kunt tegenkomen in productie-omgevingen.
</shameless plug>

Heb je zelf andere ervaringen, of meer nuttige links? Laat het weten, dan breidt ik het artikel uit!

Peter Kassenaar
-- 20 februari 2014

09oktober

Gastcollege ‘usability voor mobiele apparaten’ bij HvA

Logo Hogeschool van Amsterdam

Woensdag 9 oktober 2013 gaf ik een gastcollege ‘Usability op mobiele apparaten’ op deHogeschool van Amsterdam, afdeling Sport, Management en Ondernemen (SM & O).

Beknopte inhoud

In ongeveer een uur kwamen de volgende onderwerpen aan de orde:

  • Waarom is usability belangrijk – waarom heb ik dit als specialisatie gekozen?
  • Een korte geschiedenis van mobiele communicatie.
  • Hoe worden mobiele apparaten op dit moment ingezet bij aankoop- en informatiebeslissingen? De verschuiving van bureaublad-devices naar mobiele devices is onherroepelijk ingezet. Mobiel internet gaat de rol van traditioneel (vast) internet overnemen. Je moet hier in de website of –app voor je onderneming of (sport)vereniging nu al rekening mee houden.
  • Wat is eigenlijk het verschil tussen een (mobiele) website en een App?

Drie concrete verschillen tussen desktop usability en mobile usability:

  • schermafmeting (en de gevolgen daarvan voor je design)
  • bediening: muis vs. touch (en de gevolgen…)
  • belangrijkste doel van de site identificeren (en de gevolgen…)
  • Deze drie aspecten werden daarna getoetst voor drie verschillende sites:
  • Het bleek dat er grote verschillen zijn tussen de sites onderling. Zo is de desktop-gebruikerservaring van Rio 2016 op veel punten nog wel voor verbetering vatbaar, maar is er wel gezorgd voor een geoptimaliseerde mobiele versie van de website. Bij NOC*NSF is dit beeld omgekeerd. De gebruikerservaring van de ‘gewone’ publiekssite is prima, maar is lastig bij mobiel gebruik. Hockey.nl laat min of meer hetzelfde beeld zien als rio2016.com.
  • Bij hockey.nl zijn bijvoorbeeld goede keuzes gemaakt in het terugdringen van de hoeveelheid menu-items in de navigatiestructuur. Zo biedt de mobiele versie snel toegang tot de belangrijkste functies van de site, zonder dat de gebruikersinterface overdadig vol aandoet.

Verschillende sites kennen verschillende sterke en zwakke punten. Het is niet zo dat een site compleet ‘mislukt’ of ‘onbruikbaar’ is, als een van de onderdelen niet goed is uitgewerkt. Het geeft wel aan dat dit betreffende aspect nader bekeken (en liefst verholpen) moet worden, om site-bezoekers op zowel desktop- als mobiele apparaten zoveel mogelijk tegemoet te komen.

Als een site responsive is, betekent dit dat de site zelf onderzoekt op welk type apparaat en schermbreedte hij getoond wordt. De site past zich vervolgens aan, aan het apparaat. Uiteraard moet dit wel door een programmeur worden ingesteld. Het gaat niet vanzelf.

Responsive design is de huidige trend in de webdesignwereld. Het maken van een responsive site is meestal wat duurder dan van een gewone site. Het onderhoud ervan kan vervolgens echter goedkoper omdat je maar één serie bronbestanden hoeft bij te houden.

Eerste dia presentatie usability mobiele apparaten

Presentatie

Je kunt de presentatie van dit college downloaden. Hij is beschikbaar in twee formaten:

Voor vragen over de presentatie of de rest van het gastcollege kun je contact opnemen via het contactformulier op deze site.

Peter Kassenaar
-- 09 oktober 2013

07oktober

Overstappen naar Windows Phone

Van iOS naar Windows Phone 8

Mijn mobiele telefoon was naar de huidige maatstaven hoogbejaard (het is een iPhone 3GS uit het voorjaar van 2009). Ruim vierenhalf jaar heb ik er met veel plezier gebruik van gemaakt. Maar toen duidelijk werd dat dit model bij het uitbrengen van iOS7 enkele weken geleden, buiten de boot zou vallen, ben ik eens om me heen gaan kijken.

Een nieuwe iPhone? Mwaa, meer van hetzelfde. En iOS7 met de nieuwste serie iPhones (5S en de 5C) zijn naar mijn idee nou niet bepaald het meest revolutionaire producten die Apple de laatste jaren heeft gelanceerd.

In plaats daarvan besloot ik me te richten op het platform waar ik nog geen ervaring mee had, maar wat de laatste maanden wel een gestage groei liet zien: Windows Phone 8. Voor mij is dit een verrijking. Op deze manier heb ik namelijk voor de drie grote mobiele platforms (iOS, Android en Window Phone) apparaten in huis en kan ik hiervoor apps ontwikkelen en testen op de hardware zelf. En dat is altijd beter dan op een software-emulator.

En nu Windows Phone eindelijk een beetje in de lift lijkt te zitten en – in Europa althans – in de grootste markten (Duitsland, Engeland, Frankrijk, Italie en Spanje) bijna in de dubbele cijfers is beland qua marktaandeel en bovendien mijn oude liefde Nokia een serie meer dan fatsoenlijke toestellen op de markt heeft gebracht, was de keuze duidelijk. Vandaar dat vorige week een simlockvrije Lumia 1020 op mijn kantoor werd afgeleverd.

lumia01

Elders op het web lees je meer dan complete reviews van de Nokia Lumia telefoons (bijvoorbeeld bij EngadgetTweakers.net of bij Techzine) en op YouTube zijn allerlei vergelijkende videoreviews te vinden – vaak wordt hierin de camera als uitgangspunt genomen.

Ik deel in dit artikel zoals gebruikelijk mijn persoonlijke ervaringen. Die zullen soms naïef en simpel lijken voor doorgewinterde Windows Phone-gebruikers, maar er zullen ongetwijfeld lezers zijn die ook de overstap willen maken vanaf het ene mobiele platform naar het andere. En de kans dat Windows Phone deel uitmaakt van die afweging wordt langzamerhand steeds groter. Daarom, zonder verder oponthoud mijn eerste stappen op Windows Phone 8-gebied.

Hardware

  • De Lumia 1020 is een prachtig toestel. Verbijsterend gewoon wat voor supercomputer ze in zo’n kleine behuizing hebben weten te plaatsen. Als je de markt een beetje hebt gevolgd, dan weet je dat de 41-megapixel camera het selling point van deze telefoon is. Maar minstens zo indrukwekkend vind ik de overige hardware daar omheen. Het toestel is even groot als de huidige generatie nieuwe Samsungs, LG’s of Sony Experia-toestellen en weeg ruwweg even veel (of weinig), ca 150 gram. Dat is minder dan de directe voorganger de Luma 920 (die ik met 185 gram net wat aan de zware kant vond), terwijl de overige hardware er alleen maar op vooruit is gegaan. Het scherm is 1280x768 pixels, kraakhelder, de kunststof behuizing is niet te glad en ligt prettig in de hand.
  • In de meeste telefoonwinkels is de Lumia 1020 op dit moment (begin oktober 2013) nog niet leverbaar of niet op voorraad. Maar online bij Bol.com of Coolblue kun je het toestel binnen 24 uur in huis hebben.
  • Ja, de telefoon heeft een ‘bobbel’ aan de achterkant, waar de camera uitsteekt. Hij is echter veel minder prominent aanwezig dan ik op basis van de foto’s had verwacht. Het is maar enkele millimeters en valt weinig op. Sterker nog, ik vind het zelfs wel prettig. Die camera-uitstulping geeft je vingers juist houvast tijdens het bedienen en je voelt direct hoe de oriëntatie is als je hem uit je broekzak haalt (bron foto:http://tweakers.net/productreview/84382/nokia-lumia-1020-zwart.html).
  • http://tweakers.net/ext/f/ttBNb6N3dRItEMcdp1z68Y1b/full.jpg
  • Ik mis in vergelijking met mijn iPhone een schuifknop om de telefoon met één handeling op ‘stil’ te zetten. Die gebruik ik veel tijdens trainingen en presentaties. Het lijkt er op dat dit op de Lumia alleen met minimaal drie extra handelingen kan via het menu Instellingen.
  • De luidspreker is voldoende luid als hij gewoon in je zak zit en je wordt gebeld. Er is een groot verschil aanwezig in volume bij gewoon gebruik en met een koptelefoon. Bij gebruik met oortjes moet je het volume echt terugschakelen om niet doof te worden. Maar je moet niet vergeten het weer op te schroeven als je de oortjes uitdoet, anders hoor je de telefoon niet meer. Die balans is niet goed, naar mijn mening.
  • In de Lumia 1020 gaat een Micro SIM-kaartje. In mijn iPhone 3GS zat een standaard SIM-kaart. Dat past niet. Gelukkig kunnen ze bij elke telecomwinkel je SIM-kaart op maat knippen, zodanig dat het wel past. Het personeel van de Hi-winkel in Zutphen regelde dit kosteloos voor mij.

Software

Apple verdient alle credits voor het creëren van de smartphone-revolutie, dat kan niet genoeg benadrukt worden. Maar jaren na dato is het gebruik, de acceptatie en het verwachtingspatroon natuurlijk volkomen anders dan ten tijde van de introductie in 2007. Een grid met pictogrammen zoals iOS en ook Android bieden (al biedt die laatste wat meer vrijheid in de vormgeving met widgets) is wat mij betreft wel uitgeëvolueerd. Weer een reden om teleurgesteld te zijn in de vernieuwingen die iOS7 bracht.

De tegelinterface die Windows Phone 8 biedt is in het begin wennen, maar uiteindelijk veel flexibeler en moderner dan iOS en Android bij elkaar. Onderdelen sluiten beter op elkaar aan en apps leven niet uitsluitend in hun eigen sandbox. De integratie van systemen, apps en sociale netwerken is veel beter. Ik heb nu twee dagen met Windows Phone 8 gewerkt en het is verrassend hoe verouderd en omslachtig iOS (maar ook Android) aanvoelt als ik nog eens mijn iPhone of Samsung er bijpak.

Het is echter niet allemaal goud wat er blinkt op softwaregebied op een Windows Phone. Het is een Dr. Jekyll en Mr. Hyde-situatie wat mij betreft. Laat me dat toelichten:

Sterke punt: de apps

Nokia plaatst op elke Windows Phone-telefoon een serie eigen apps van verbluffende kwaliteit. TomTom? Niet meer nodig, want elke telefoon wordt geleverd met Nokia Here en Nokia Drive. Gratis turn-by-turn navigatie met gratis live verkeersupdates én alle OV-dienstregelingen van Nederland via Nokia Transit. Het TomTom HD-traffic abonnement kan dus ook de deur uit. Evenals het Spotify-abonnement, want Nokia Music laat je gratis muziek streamen. Je kunt eigen genre-mixen maken en pinnen op je startscherm. Zelfs offline beluisteren is mogelijk. Alleen als je hogere kwaliteit wilt of meer wilt opslaan hoef je een abonnement (EUR 4,-/maand) af te sluiten.

De foto-apps zijn geweldig. In het begin lijkt het overkill, want wat is het verschil tussen bijvoorbeeld Nokia Pro Cam en Nokia Smart Cam? Maar als je de apps eenmaal opstart wordt je dit in een korte introductie duidelijk gemaakt. Daarnaast zijn nog apps aanwezig voor het projecten van je foto’s op devices van andere (via de clouddienst photobeamer.com), voor het maken van panorama’s en zijn er bewerkingsprogramma’s Nokia Cinemagraph, Nokia Video Trimmer en Nokia Creative Studio. Keuze te over.

Zo goed als alle populaire apps uit de top-100 zijn inmiddels ook als Windows Phone-variant verkrijgbaar: Twitter, Facebook, Nu.nl, Tv-gids, Buienradar, Adobe Reader, Dropbox, Netflix, internetbankieren en treininformatie stonden in een mum van tijd op mijn telefoon. Ook de sectie games (als je daar van houdt op je telefoon) is inmiddels ruim gevuld. De Windows Store is zijn achterstand op de Apple App Store en Google Play in ieder geval op kwalitatief niveau in hoog tempo aan het inlopen, is mijn indruk. Een goede YouTube-app ontbreekt nog, door het conflict tussen Google en Microsoft, maar dit zal een kwestie van tijd zijn.

Het enige waar ik nog geen goede Windows Phone-variant van heb gevonden zijn de GPS-apps Runkeeper en Strava. Deze lijken voorlopig alleen beschikbaar voor Android en iOS.

screenshots

Links: enkele veelgebruikte apps op het startscherm van mijn telefoon. Rechts: Office voor Mobile ondersteunt alle standaard Office-documenten.

Op elke Windows Phone wordt bovendien een versie van Office voor Mobile meegeleverd die rechtstreeks overweg kan met je .docx en .xlsx-bestanden. Erg handig.

Integratie met Windows

Zodra je een Windows Phone aansluit op een pc, wordt hij herkend en is hij gewoon als map aanwezig in Windows Verkenner. Wat een verademing. Geen gezeur meer met iTunes (dat is het allereerste programma dat ik nu van mijn computer ga verwijderen!), drivers installeren of met synchronisatie-issue. Mac-gebruikers kunnen zonder problemen de Windows Phone-app voor Mac installeren en ook Nokia heeft bijvoorbeeld Nokia photo transfer for Mac, mocht je deze liever gebruiken.

lumia-windows_01

 

SNAGHTML6799fe99

Windows Phone in Windows Verkenner: je kunt gewoon foto’s, muziek en documenten uitwisselen met je computer. Handig.

Zwakke punt – de ontbrekende apps

Maar dan: het viel mij in negatief opzicht op dat er in vergelijking met iOS en Android weinig standaardapps worden meegeleverd, waarvan je er tegenwoordig toch wel van uit mag gaan dat ze aanwezig zullen zijn.

Een rekenmachine en een eenvoudige alarmklok? Check. Maar verder? Geen apps voor weer, timer, countdown, beurskoersen of wereldklok. Geen kompas, dictafoon, batterijstatus, nieuws of zelfs maar een notitieblokje. Dat was toch even een WTF?-momentje. Jazeker, ze zijn via de Store wel te installeren – en vaak ook gratis – maar dat had ik toch anders verwacht. Nu moet je eerst ontdekken dat

  • a) de app die je zoekt kennelijk niet aanwezig is, terwijl het toch om basisdingen gaat die al sinds Android 2.x en iOS 3.x gesneden koek zijn. Vervolgens:
  • b) de store openen en zelf op zoek naar een alternatief.
  • c) zoeken uit veel varianten welke je het beste kunt proberen (gratis? betaald?) en moet je weer recensies lezen, apps installeren, uitproberen en weer weggooien enzovoort. En dan weer opnieuw beginnen bij A.

Een tegenvaller.

Ook kent Windows Phone geen centraal notificatiecentrum voor nieuwe berichten, pushnotifications en statusupdates. Ik ben hier zeker geen grootgebruiker van, maar nu het er niet is (zoals op iPhone en Android), mis ik het toch. Ik hoop dat dit in de toekomst nog toegevoegd zal worden aan Windows Phone.

Tot slot – show off

Ik kan het natuurlijk niet laten, en moet ook even de obligate kijk-eens-wat-mijn-nieuwe-speeltje-kan zaken toevoegen. De 41 Megapixel-camera is geweldig. Inzoomen achteraf is werkelijk een uitvinding, zeker als het zo goed uitgewerkt is. Kijk bijvoorbeeld eens deze opname van de IJssel tussen Dieren en Doesburg.

ijssel

Had je die vogel gezien op dat markeringsbord voor de vaargeul aan de overkant? Welke vogel? Nou, deze:

vogel

(foto’s verder niet bewerkt voor kleur of helderheid, en online verkleind in resolutie voor sneller downloaden). Je kunt heel eenvoudig panorama’s schieten, met vrijwel vergelijkbare resolutie.

panorama

Nokia Smart Cam

Met Nokia Smart Cam kun je actie-opnames maken. Je schiet een serie foto’s (of liever: dat doet de app voor je) en naderhand bepaal je welke opname je wilt gebruiken. Er zijn allerlei kunstzinnige effecten mogelijk. Wil je bijvoorbeeld een standaardfoto?

winkel1

Of wil je liever een serie actie-shots?

winkel2

Of liever met een vervaagde achtergrond om beweging te suggereren?

winkel3

Of wil je liever alle bewegende onderdelen weglaten? Ook dat kan:

winkel4

Alle bovenstaande foto’s zijn dus gemaakt op basis van één opname. Je kiest achteraf welke je wilt gebruiken en hoe je hem eventueel verder bewerkt (opnieuw met dank aan personeel Hi-winkel Zutphen). Behalve bovenstaande kun je bijvoorbeeld ook een groepsportret schieten en uit een serie van zes of zeven opnames voor iedereen het ‘beste gezicht’ kiezen, dat er vervolgens ingemonteerd wordt. Erg leuk.

muziek

Links: Gratis muziek streamen en mixen maken op basis van genre of artiest met Nokia Music. Ook concerten bij jou in de buurt worden getoond. Rechts: gratis routenavigatie met live verkeersupdates via Nokia Drive+.

Conclusie

Mijn kennismaking met Windows Phone 8 smaakt naar meer. Het is verfrissend en uitdagend ten opzichte van iOS en Android. De hardware is uitstekend, de software van Nokia en de door Microsoft meegeleverde apps zijn van hoge kwaliteit. Wat tegenvalt is dat voor veel standaardhandelingen (notities maken, weer, beurskoersen, klok en timer instellen enzovoort) geen apps aanwezig zijn en je hiervoor zelf op zoek moet. Dit doet een beetje onvolledig aan. Integratie van apps met online diensten en sociale media is meer dan uitstekend en moderner dan wat andere mobiele platforms bieden.

Wil je zelf meer weten over Windows Phone, kijk dan eens op deze introductiepagina’s van Microsoft en Nokia. Ik heb er de afgelopen dagen veel aan gehad.

Ben ik belangrijke dingen vergeten of heb ik ze verkeerd beschreven? Laat het weten!

Peter Kassenaar
-- 7 oktober 2013.

30augustus

5 x snel op weg met JavaScript. Via YouTube

Ik krijg veel vragen over mijn cursussen jQuery Mobile en Mobiele apps maken met Dreamweaver, jQuery Mobile en PhoneGap. Zie bijvoorbeeld ook mijn eerdere blogartikel Mobiele apps zonder programmeren.

Vaak worden de vragen (vooral) gesteld door designers die redelijk wat ervaring hebben met het vormgeven van pagina’s met HTML en CSS (naast natuurlijk de typische designtools als Photoshop en Illustrator), maar nog minder ervaring hebben met programmeren en JavaScript.

Bij het ontwikkelen van een geoptimaliseerde mobiele website of een mobiele app komen globaal gesproken twee kernstromingen aan de orde:

  • het visualiseren van je app, met jQuery Mobile, HTML en CSS. Als editor wordt bijvoorbeeld Dreamweaver of Visual Studio gebruikt.
  • Het scripten van je app, voor als je meer wilt dan een statische webapplicatie. Hiervoor wordt JavaScript gebruikt.

JavaScript leren via YouTube

Als je nog niet zo bekend bent met JavaScript, kunnen deze YouTube-video’s je snel op weg helpen. Ze zijn allemaal Engelstalig, maar daar ontkom je niet aan als je wat verder op webdevelopment ingaat. Ik heb de video’s (mede) geselecteerd op verstaanbaarheid en audiokwaliteit, zodat het makkelijk te volgen is. De volgorde van boven naar beneden is globaal ook van ‘makkelijk’ naar ‘moeilijk’.

1. The New Boston

http://www.youtube.com/watch?v=yQaAGmHNn9s

Dit is de eerste video uit een serie. Bucky Roberts neemt je in 40 (!) lessen mee op JavaScript-safari. Veel voorbeelden, hands-on, snel resultaat en een goed leertempo. Elk filmpje duurt 5-6 minuten, zodat je er snel een kunt meepikken. Minpunten: niet meer helemaal actueel (XHTML) en er wordt nog veel inline code/eventhandlers gebruikt (zoals onMouseover en onClick), iets wat tegenwoordig niet meer als best practice wordt beschouwd. Maar als introductie in de taal (syntaxis, variabelen, statements en structuur) is het een zeer gedegen inleiding.

Het YouTube-kanaal van de complete serie staat op http://www.youtube.com/playlist?list=PL46F0A159EC02DF82

2. New Think Tank

http://www.youtube.com/watch?v=_cLvpJY2deo

In de serie video tutorials van de New Think Tank wordt globaal hetzelfde besproken als hiervoor, maar dan in afleveringen van ongeveer een half uur per film. Het tempo ligt hoger. Ook nu zijn sommige concepten verouderd (document.write() wordt momenteel liever niet meer gebruikt), maar als algemene introductie is het uitstekend.

De complete serie van acht tutorials is beschikbaar via http://www.newthinktank.com/web-design/learn-javascript/. Het aandachtsgebied is ook hier breed, uiteenlopend van functies tot cookies en event handling.

3. Think Vitamin

http://www.youtube.com/watch?v=CHh5fPs1Hvg

Werken met JavaScript in een browser betekent altijd ook werken met het DOM (Document Object Model). Deze video geeft een inleiding op de manier waarop je met JavaScript onderdelen van het DOM kunt selecteren en bewerken. Deze manier van werken is erg belangrijk als je ook met jQuery aan het werk wilt.

De serie van Think Vitamin is ook goed en gaat iets verder dan de voorgaande twee, maar is niet geheel gratis te volgen. Voor andere video’s uit deze serie moet betaald worden.

4. Google Tech Talk (1)

http://www.youtube.com/watch?v=ljNi8nS5TtQ

Deze technische video van ruim een uur gaat (diep!) in op de taal JavaScript zelf. Niet op de verschilende browserimplementaties van JavaScript (‘Hoe werkt JavaScript in Chrome en waarin verschilt dit van IE’), maar puur op de constructie van de taal zelf.

Vragen als ‘wat is een object in JavaScript en hoe werken constructors en hoe verhoudt zich dit met andere OO-talen’ wordt behandeld. Het is een razend interessante video, maar ik zou je adviseren deze pas wat later te bekijken, als je al wat meer hands-on ervaring hebt met JavaScript en zelf al wat programmaatjes hebt geschreven. Daarna echter: verplichte kost! De video is (Engels) ondertiteld, hetgeen het makkelijker maakt de voorbeelden te volgen.

5. Google Tech Talk (2) – Douglas Crockford

http://www.youtube.com/watch?v=hQVTIJBZook

Ook uit de serie Google Tech Talk, een geweldige presentatie over JavaScript van Douglas Crockford. Crockford is een zeer belangrijk en invloedrijk persoon in de JavaScriptwereld en het is een genoegen hem zelf aan het woord te horen. ‘JavaScript is the worlds most misunderstood programming language’ en ‘JavaScript is the only language that people think they don’t need to learn before they start using it.’ Deze presentatie is gebaseerd op zijn boek JavaScript: The good Parts en duurt eveneens ongeveer een uur. Hij is ondertiteld.

Het is een presentatie uit 2009, dus nog vóór de ‘jQuery-explosie’ van de laatste jaren. Voor deze presentatie maakt dat echter niet uit, omdat het voornamelijk over concepten en principes gaat en minder over concrete browservoorbeelden. Erg leerzaam.

Conclusie

Soms is het lastig om als designer de overstap te maken naar mobiel webdesign, omdat hier vrijwel altijd een deel programmeren (in JavaScript) bij komt kijken. De video’s die in dit artikel werden genoemd, helpen je op weg bij het kennismaken met JavaScript. Op basis van de inhoud van de video’s kun je zelf aan het oefenen gaan. Als je ze hebt gevolgd en begrijpt (met name de eerste twee series) heb je zeker voldoende bagage om met succes de cursussen voor het maken van mobiele apps te volgen.

Peter Kassenaar.
-- 29-30 augustus 2012.