Dit is het webblog van Peter Kassenaar - Ik geef training en consultancy in het maken van crossplatform mobiele apps en webapps. Trefwoorden: AngularJS, PhoneGap, jQuery/Mobile. HTML5, CSS3, JavaScript, AJAX, JSON. Ik schrijf boeken en artikelen over tal van (ICT-)onderwerpen. Ik ben lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij ook volgen op Twitter.(@PeterKassenaar)

Terug naar de algemene site.

14augustus

jQuery UI Cookbook – book review

Cover jQuery UI Cookbook

jQuery UI is een uitgebreide bibliotheek met tal van visuele componenten die user interfacedesigners kunnen gebruiken om attractieve websites te ontwerpen.

Nergens is de jQuery-slogan write less, do more zo van toepassing als in jQuery UI. Dat gezegd hebbende, is de bibliotheek natuurlijk niet 100% perfect of direct geschikt voor elke taak. Ervaren ontwikkelaars zullen onderdelen van jQuery UI naar eigen behoefte willen uitbreiden, of aanpassen voor de interface die ze aan het ontwikkelen zijn. Welkom jQuery UI Cookbook.

 

Kookboek

Het kookboek biedt ruim 70 'recepten' waarmee je naar hartenlust kunt hacken in de jQuery UI-code om op deze manier doelen te bereiken waarvoor de standaardmiddelen en configuratieopties niet toereikend zijn. Bijvoorbeeld: je weet waarschijnlijk al dat jQuery UI een tab-widget biedt waarmee je snel een tabblad interface maakt op basis van je HTML-code. Maar wat nu als je de tabs wilt uitbreiden met aanklikbare pictogrammen naast de tekst, zonder handmatig losse <img /> tags in de code te schrijven?

Of je wilt de widget Accordeon uitbreiden zodat je ook met de Tab-toets tussen onderdelen kunt navigeren, of je wilt met drag-an-drop inhoud tussen accordeons verslepen? Dit boek legt dat perfect uit, tezamen met nog tientallen andere voorbeelden van kleinere en grotere ingrepen in de bibliotheek.

Veel code

Maar pas op. Er staat code in dit boek. Veel code. Je zult je handen uit de mouwen moeten steken en diep in de functies moeten duiken die het hart van jQuery UI vormen. Je moet beschikken over solide achtergrondkennis van JavaScript en jQuery om te weten wat je eigenlijk aan het doen bent en om de recepten in het boek te kunnen aanpassen zodat ze perfect in je eigen projecten passen. En dit begint direct op pagina 1. Er is niet zoiets als een rustige start, om vervolgens kalm en rustig het eerste voorbeeld in te glijden. Het gaat meer van: "Bam! Kijk, zo doe je het,

(function ($, undefined) {
	$.widget("ab.accordion", $.ui.accordion, {
		_create: function () {
			// heel veel andere code …
		}
	})
})(jQuery);

Dus als je nieuw bent in jQuery UI of jQuery-development in het algemeen, is dit boek niet geschikt voor jou. Het legt niet uit wat jQuery UI is, waar je het kunt halen en hoe het basisgebruik is. In plaats daarvan worden alle widgets in de bibliotheek op alfabetische volgorde besproken. Hoofdstuk 1 gaat over de Accordion. Vervolgens gaat het over Autocompletes, Buttons, Datepickers, Dialogs enzovoort. Het boek besluit met een hoofdstuk over Widgets en de manier waarop je zelf vanaf het nulpunt je eigen widgets zou kunnen maken.

Conclusie

Ben jij tevreden met de basismogelijkheden en lay-out van jQuery UI? Prima. Laat dit boek lekker op de plank liggen. Maar voor ieder ander kan ik het van harte aanbevelen. Als je het niet gebruikt voor het uitbreiden van jQuery UI, dan leer je in ieder geval iets over de manier waarop je jQuery plug-ins kunt schrijven en jQuery-uitbreidingen in zijn algemeenheid programmeert.

Mijn enige wens is dat de auteur ook voorzien zou hebben in een inleidend hoofdstuk, waarin jQuery UI wordt geïntroduceerd en de basis kort wordt uitgelegd (voor als je bijvoorbeeld een ervaren ontwikkelaar bent, maar toevallig nieuw bent op het gebied van jQuery UI).

Het zou ook prettig zijn geweest als hij behalve de widgets nog andere onderdelen uit de bibliotheek meer in detail zou hebben besproken, zoals Effects, Interactions en/of Utilities zoals het object Position. Maar zelfs met deze kleine tekortkomingen, is het jQuery Cookbook elke cent waard.

 

 

Deze review bij Amazon.com.uk (Engels)

Peter Kassenaar
-- 14 augustus 2013

[disclaimer: ik heb het boek van de uitgever gratis gekregen ter review. De uitgever heeft op geen enkele manier invloed gevraagd of uitgeoefend op de inhoud van dit artikel. Het is mijn persoonlijke mening.]

07augustus

Website kassenaar.com vernieuwd

kassenaar.com.logo-114-precomposed Een nieuw seizoen, een nieuwe look.

In 2008 heb ik mijn website voor het laatst een grote make-over gegeven. Het betrof toen de overgang van een ‘gewone’ site naar een blog, waarover je in de eerste blogpost kunt lezen.

Nu, ruim vijf jaar en een kleine 200 blogartikelen later, is het tijd voor een volgende stap. Ik had het gevoel dat het blog – hoewel dynamisch en regelmatig bijgewerkt – de speerpunten en werkzaamheden van mijn bedrijf niet goed genoeg representeerde.

Website anno 2013

Daarom heb ik de afgelopen zomermaanden gebruikt om een nieuwe website te ontwerpen rondom de drie thema’s die mijn bedrijf covert:

  • Trainingen – ik blijf trainingen geven (voor partners en in eigen beheer) op het gebied van webdevelopment. De focus ligt op front-end technieken: HTML, CSS, JavaScript, jQuery en app-trainingen als PhoneGap. Binnenkort worden (als eerste in Nederland!) high-end technische trainingen aan het portfolio toegevoegd, waaronder trainingen in Twitter Bootstrap, Node.js en Angular.js. Volg mij op Twitter om op de hoogte te blijven van de ontwikkelingen
  • Schrijven – Dit jaar heb ik titels geschreven als Handboek Word 2013, Handboek Outlook 2013 en het binnenkort te verschijnen Handboek JavaScript en jQuery. Ook in de toekomst blijf ik schrijven voor uitgevers, websites en magazines.
  • Development – als programmeur ben ik verbonden aan projecten als Yindo en Boekenwolk. Ook ontwikkel ik gedurende projecten diverse besloten apps en websites als prototype of proof-of-concept. Als je hier een vraag over hebt, of een consultancy-afspraak wilt maken, kun je uiteraard contact opnemen.

Finetuning

De nieuwe website is voor een groot deel gereed, maar er zijn nog enkele aandachtspunten die finetuning behoeven. Hier wilde ik met de lancering echter niet op wachten. Dit is analoog aan het developmentprincipe release early, release often.

In de komende weken zullen de laatste plooien worden gladgestreken met betrekking tot:

  • Facebook Like-buttons toevoegen voor pagina’s (de Facebook API blijkt er niet van te houden als je deze dynamisch genereert/aanpast).
  • Weergave op tablets: op de meeste tablets (iPad, Android, Windows RT) is de weergave in orde, maar op tablets met een afwijkende resolutie (bijvoorbeeld 1024x600) is het responsive design nog niet helemaal correct. Het menu en sommige andere tekst kan wegvallen. Wordt aan gewerkt.
  • Typefoutjes en andere kleinigheden. Als je iets tegenkomt wat volgens jou niet klopt, of je vindt het onlogisch: laat het weten!

Die goede oude tijd…

Tot slot, in de categorie ‘opa vertelt’: het huidige ontwerp is de vierde generatie website op kassenaar.com. De eerste versie stamt uit 1997, hiervan is helaas geen screenshot bewaard gebleven. Deze tel ik daarom niet mee. Maar al vrij snel (na een paar maanden) was dit het ontwerp dat van 1998-2001 dienst heeft gedaan:

1998-2001

Een standaard website, opgemaakt met tabellen en afbeeldingen. Alles handgecodeerd in (jawel!) Frontpage 98 en Kladblok.

kassenaar.com-1999

2002 – 2008

Het kenmerk van deze site waren de tabbladstructuur (groot gemaakt door amazon.com en bol.com) en veel, heel veel tabellen en Dreamweaver MM_SwapImage()-scripts. Maar ook custom scripts om de stylesheets te wisselen tussen grote- en kleine letters en voor het eerst een ingevoegde Google-zoekdienst.

kassenaar.com-2003

2008 – 2013

Overgang naar een blogstructuur, waardoor de site regelmatiger bijgewerkt kon worden en er minder tijd aan onderhoud besteed hoefde te worden. Dit blog blijft gehandhaafd, maar ik keer toch ook een beetje terug naar de ‘oude’ opzet, waarin op eenvoudige wijze de pijlers van het bedrijf worden benoemd.

image

2013 – …

Een nieuwe site, een nieuw logo. Geheel volgens de mode van deze tijd, met één grote centrale visual en korte kernbegrippen. Een lichtere opmaak, verbeterde CSS en HTML5-elementen en meer witruimte moeten de inhoud beter leesbaar maken. De site is voor een groot deel gebaseerd op Twitter Bootstrap in combinatie met jQuery, maar maakt op de achtergrond gebruik van een SQL Server-database en het .NET-framework.

kassenaar.com-2013

Nogmaals, het is werk in uitvoering. Als je opmerkingen hebt, of punten ter verbetering dan hoor ik het graag!

Peter Kassenaar
-- 6 augustus 2013

06augustus

Handboek JavaScript en jQuery uitgesteld

Slecht nieuws van de uitgever.

Ondanks dat het Handboek JavaScript en jQuery al op 1 juli gereed was (zie mijn aparte blogartikel hierover), is het niet gelukt het boek tijdig te redigeren, zodat het nog in augustus kan verschijnen.

Dat is een tegenvaller die zorgt voor ongeveer een maand vertraging. Uitgave wordt nu verwacht medio september.

Als het boek verkrijgbaar is, meldt ik dat uiteraard op dit blog. Je kunt me ook volgen op Twitter (@PeterKassenaar) voor de snelste updates.

-- 6 augustus 2013

26juni

jQuery Hotshot – book review

9106OS_ jQuery Hotshots

jQuery Hotshot is een boek uit de serie Hotshot van Packt Publishing. In deze serie boeken staan altijd tien projecten rondom een bepaalde techniek centraal. Ik kocht al eerder PhoneGap Hotshot en was hier zeer tevreden over. Het boek over jQuery overtrof echter mijn verwachtingen.

 

 

Niet voor beginners

jQuery Hotshot is geen boek voor absolute jQuery beginners (tip: lees hiervoor mijn Handboek JavaScript en jQuery dat binnenkort verschijnt. Koop pas daarna jQuery Hotshot). Je moet minimaal basisbegrip hebben van wat jQuery en JavaScript is en hoe het werkt. Maar zodra je deze eigenschappen onder de knie hebt, kan ik je van harte aanbevelen dit boek aan te schaffen. Er is nog zoveel meer te leren na je eerste document.ready() script en dit boek helpt je daar enorm mee op weg. Maar let op. Het is geen makkelijk boek. Reken er op dat je veel tijd kwijt gaat zijn aan het bestuderen van de code en de voorbeelden.

Tien projecten

Het boek is verdeeld in tien hoofdstukken. In elk hoofdstuk wordt een compleet project besproken. Je leert hoe je een jQuery schuifpuzzel maakt (nee, niet hoe je een plug-in download die van een bestaande afbeelding een schuifpuzzel maakt, maar juist hoe je zelf alles programmeert), hoe je jQuery combineert met Google Maps, hoe je een jQuery Ajax File uploader maakt, hoe je een eigen jQuery-build maakt op basis van Github en nog veel meer.

Structuur

Elk project is bovendien in hoge mate gestructureerd met sub missions en mini debriefings die het lezen vergemakkelijken. Het verdeelt de (grote) projecten in kleinere stukken code en bijbehorende uitleg. Elk project wordt bovendien afgesloten met een hotshot challenge, waarin uitdagingen worden genoemd om het project verder uit te breiden of te verbeteren. De oplossingen hiervan worden niet gegeven, maar zijn bedoeld als oefening voor de lezer.

Hoewel je dit boek niet van kaft tot kaft hoeft te lezen en je de hoofdstukken/projecten er uit kunt pikken die je op dat moment het meest interesseren, zit er wel een leercurve in het boek. De eerdere hoofdstukken (over de schuifpuzzel, een lay-out met zijbalk en animated scrolling) zijn in het algemeen wat makkelijker dan de latere hoofdstukken (een jQuery heat map maken en werken met aanvullende tools en bibliotheken zoals knockout.js). Ik denk daarom dat het in de praktijk toch een goed idee is het boek hoofdstuk voor hoofdstuk te lezen om er het meeste profijt van te trekken.

De voorbeeldcode van de projecten kan worden gedownload vanaf de site de uitgever, zodat je niet alle code zelf hoeft te typen (hoewel je daar juist weer veel van leert). En reken maar dat er veel code in het boek staat.

Voor de veeleisende programmeur

JQuery Hotshot is beslist een boek voor de veeleisende programmeur die meer wil dan alleen een serie pointers naar handige plug-ins en webadressen met kant-en-klare oplossingen. Dit is een boek voor degenen die bereid zijn dieper te graven en tijd willen investeren om jQuery op hoog niveau onder de knie te krijgen.

De auteur onderkent daarbij dat jQuery geen eiland is. Er is aandacht voor de manieren en best practices om jQuery te combineren met aanvullende API's en tools als Google Maps, jsRender en knockout.js. Je leert zodoende niet alleen jQuery, maar ook waar jQuery staat in het huidige front-end landschap met al zijn diverse mogelijkheden en bibliotheken.

Het boek verdient daarom absoluut een 5-sterrenbeoordeling. Van harte aanbevolen!

 

-- Peter Kassenaar
26 juni 2013

[disclaimer: ik heb het boek van de uitgever gratis gekregen ter review. De uitgever heeft op geen enkele manier invloed gevraagd of uitgeoefend op de inhoud van dit artikel. Het is mijn persoonlijke mening.]

17juni

Instant jQuery UI Starter– book review

Instant jQuery UI Starter

Instant jQuery UI Starter is een boek uit de serie Instant van Packt Publishing. Dit is een serie boeken die kort en bondig een onderwerp beschrijven. Zoals de naam al aangeeft biedt het boek een snelle start in het betreffende onderwerp. Niet meer en niet minder. Verwacht dus geen compleet naslagwerk of een dik boek waarin alle aspecten worden besproken.

 

Inhoud

Het boek Instant jQuery UI Starter doet precies wat het beloofd. Als eerste geeft de auteur aan hoe de ontwikkelomgeving voor jQuery UI het best wordt ingesteld. Hij laat zien welke onderdelen uit de download u wel- en niet nodig hebt. De volgende pagina's geven als herhaling een inleiding op JavaScript en jQuery en tonen hoe u een eerste widget maakt met jQuery UI.

In de rest van het boek komen vijf onderdelen uit de totale bibliotheek aan de orde: drag-and-drop, selectables, effects, formulierelementen vormgeven (knoppen, checkboxes en radiobuttons) en modale vensters. Andere widgets worden niet besproken, noch genoemd (denk aan de accordeon, datumpicker, autocomplete en meer).

Het boek besluit met een aantal nuttige hyperlinks naar de officiële jQuery-sites enkele – schijnbaar willekeurig gekozen – blogartikelen over jQuery UI en de twitteradressen van bekende jQuery-ontwikkelaars.

Voordelen

  • Het boek biedt nuttige codevoorbeelden en bereikt zijn doel: om de lezer op weg te helpen met jQuery UI.
  • De opmaak is prettig, goed leesbaar en de tekst is in het algemeen goed en begrijpelijk geschreven zonder al te veel onnodig jargon.
  • De URL's aan het einde van het boek bieden een goed uitgangspunt voor verdere studie en maken u bekend met enkele bekende personen in jQuery-land.

Nadelen

  • Het boek is slechts 47 pagina's lang, waarvan bovendien maar 17(!) pagina's (de pagina's 14 t/m 31) voor daadwerkelijke codevoorbeelden en informatie worden gebruikt. De rest van het boek wordt gevuld met introductietekst, inhoudsopgave en advertenties voor andere boeken van Packt.
  • Door alleen de codevoorbeelden te lezen (niet uitputtend, ik heb de voorbeelden niet uitgeprobeerd op een computer) viel mijn oog al op enkele typefouten die voor beginners lastig te vinden zijn zoals vergeten apostrofs en komma's in JavaScript-objecten. Deze hadden in het redactieproces ondervangen moeten worden.
  • Hoewel de tekst goed leesbaar is, ontbreken aanvullende screenshots totaal. JQuery UI is een visuele bibliotheek en ik zou graag zien dat de codevoorbeelden in het boek werden toegelicht met schermafbeeldingen waarin het resultaat is te zien. Alleen bij de slider in het introductiehoofdstuk worden een paar screenshots geplaatst, maar de rest van het boek bestaat enkel uit tekst en code.
  • De prijs van de paperbackversie (onder meer verkrijgbaar bij amazon.co.uk, ca. GBP 13,-) is te hoog voor het gebodene.

Conclusie

Het boek bereikt het gestelde doel: de lezer laten kennismaken met de kracht van jQuery UI. Dat is prima. Maar als paperback is het boek te duur voor wat geboden wordt. Als e-book voor ongeveer de helft van de prijs (onder meer bij bol.com of op de site van de uitgever zelf voor ongeveer EUR 5,-) is het een betere deal, ofschoon de inhoud nog steeds erg beperkt is. Zelfs voor een Starter boek.

 

 

Peter Kassenaar
-- 17 juni 2013

[disclaimer: ik heb het boek van de uitgever gratis gekregen ter review. De uitgever heeft op geen enkele manier invloed gevraagd of uitgeoefend op de inhoud van dit artikel. Het is mijn persoonlijke mening.]

24mei

Vooruitblik-Handboek JavaScript en jQuery

cover

Het is inmiddels ruim 16 jaar (!) geleden dat mijn Basiscursus JavaScript 1.2 verscheen. Een eeuwigheid in computerland. Ook de opvolger, Basiscursus JavaScript 1.5 uit 2002 is al hoogbejaard. Beide boeken zijn inmiddels dusdanig verouderd dat ik ze niemand meer kan aanbevelen. Ook als je ze nog tegenkomt op Marktplaats.nl of bij De Slegte: laten liggen.

Wacht liever nog even op de opvolger, het Handboek JavaScript en jQuery. Dat ben ik nu aan het schrijven en uitgave wordt later dit jaar verwacht (zomer 2013).

Op deze pagina geef ik alvast een kleine vooruitblik wat je kunt verwachten en zal ik updates plaatsen over de voortgang en verschijningsdatum. Het oudste updatebericht staat onderin. Begin daar dus met lezen als je deze pagina voor het eerst bezoekt.

4. Update – 5 augustus 2013

Slecht nieuws van de uitgever.

Helaas is hij er niet in geslaagd het boek tijdig te (laten) redigeren voor uitgave in augustus. Dat is een tegenvaller. Uitgave wordt nu in september verwacht. Houd dit blog in de gaten, of volg mij op Twitter (@PeterKassenaar) voor de laatste stand van zaken.

3. Update – 1 juli 2013

Het jQuery-deel is ook gereed. Daarmee is het boek klaar en ingeleverd bij de uitgever! Er is een terzake kundige redacteur aangetrokken (Peter Doolaard, zelf auteur van het Handboek HTML5 en CSS3) en deze gaat er in juli –tijdens mijn vakantie- mee aan de slag.

Daarna kan het boek worden opgemaakt, gedrukt en gedistribueerd. Naar verwachting ligt het dan medio augustus in de winkels.

Het jQuery-deel heeft nog een aantal kleine wijzigingen ondergaan.

  • Hoofdstuk 13 gaat uitsluitend over jQuery-plug-ins: wat zijn het, waar vind je ze en hoe gebruik je ze. In detail wordt gekeken naar de plug-ins Form Validation en Cycle2. Het gebruik hiervan wordt als algemeen voorbeeld beschouwd voor alle overige plug-ins.
  • Hoofdstuk 14 gaat geheel over jQuery UI. In dit omvangrijke hoofdstuk wordt de structuur van jQuery UI besproken en worden weer een aantal kenmerkende functies er uitgelicht die kunnen dienen als startpunt voor de rest van de bibliotheek. Aan de orde komen onder meer de widgets datepicker, slider, tabs en meer. Ook het werken met jQuery UI thema’s wordt besproken.

Het was een hele klus, en ik denk dat het boek behoorlijk omvangrijk zal worden. Maar het wordt tevens een compleet up-to-date overzicht en perfecte leergang voor JavaScript en jQuery.

Het enige oorspronkelijk Nederlandstalige werk van dit niveau en deze omvang.

2. Update – 17 juni 2013

Het JavaScript-deel is afgerond. De doelstelling is om nog voor het begin van de schoolvakantie (vrijdag 28 juni 2013) het complete manuscript gereed te hebben, maar het is nog niet zeker of dat lukt.

In het JavaScript-deel zijn de volgende wijzigingen opgetreden:

  • De oorspronkelijke hoofdstukken 7 en 8 zijn samengevoegd tot één hoofdstuk 7 waarin zowel het DOM als de core JavaScript DOM-functies worden besproken.

In het jQuery-deel zijn de volgende wijzigingen opgetreden.

  • De oorspronkelijke hoofdstukken 9 en 10 zijn samengevoegd tot één hoofdstuk 8 waarin zowel de ontstaansgeschiedenis van jQuery als de selectorsyntaxis wordt besproken.
  • Het hoofdstuk met veelgebruikte jQuery-functies is naar voren gehaald en wordt hierna besproken.
  • Uit dit hoofdstuk hebben de functies voor jQuery-animaties en  -effecten een apart hoofdstuk gekregen.
  • Daarna worden de Ajax-functies behandeld.

De uiteindelijke indeling van het jQuery-deel wordt als volgt:

  • 8. Kennismaken met jQuery
  • 9. HTML- en CSS-functies in jQuery
  • 10. Events afhandelen
  • 11. jQuery animatiefuncties
  • 12. jQuery en AJAX
  • 13. jQuery plug-ins gebruiken
  • 14. Meer doen met jQuery

 

1. Update – 24 mei 2013

Het Handboek JavaScript en jQuery is bedoeld voor de beginnende programmeur. Enige HTML- en CSS-voorkennis wordt bekend verondersteld. Je leert vanaf het eerste begin programmeren. Het is daarom ook geschikt als algemene inleiding in het programmeren (met toevallig JavaScript als toepassingsgebied). Het gaat uit twee delen bestaan.

  • In het eerste deel worden de core JavaScript-functies en –syntaxis besproken: hoe werken variabelen, lussen, functies, accolades en puntkomma’s, statements, enzovoort.
  • In het tweede deel wordt deze kennis toegepast op het DOM, oftewel de webpagina in de browser. Je leert eerst de pure JavaScript DOM-functies, maar gaat dan al snel over op toepassing via jQuery. Je leert hierin onderdelen in de pagina selecteren en vervolgens bewerken, animeren, event afvangen en verwerken en meer.

Heel globaal zou je daarom kunnen stellen dat het eerste deel vooral theoretisch is (hoewel je veel voorbeeldcode en oefeningen direct in de browser uitvoert) en het tweede deel vooral praktisch is (hoewel je daarin ook nog nieuwe achtergronden leert zoals het werken met callback-functies en asynchroon- en unobtrusive programmeren).

Elk hoofdstuk wordt afgesloten met vragen en oefeningen om de stof te herhalen. Het boek is daarmee erg geschikt voor zelfstudie, scholen en opleidingen. Van de voorbeelden kun je de broncode downloaden, de oefeningen moet je zelf maken ;-).

Globale inhoudsopgave

Ik ben het boek nu aan het schrijven, dus onderstaande inhoudsopgave is subject to change. Er kunnen onderdelen afvallen, nieuwe hoofdstukken bijkomen of in volgorde worden gewisseld. Laat het weten als je er opmerkingen over hebt!

  1. Deel I: Kennismaken met JavaScript
  2. Werken met statements, data en variabelen
  3. Operatoren
  4. Functies, arrays en objecten
  5. Voorwaardelijke statements en de program flow beïnvloeden
  6. Het JavaScript Event model
  7. Werken met het DOM
  8. JavaScript DOM-functies en –methodes
  9. Deel II: Kennismaken met jQuery
  10. De jQuery selector syntaxis
  11. jQuery Events en de jQuery API
  12. Veelgebruikte jQuery functies
  13. Webapps maken met jQuery en AJAX
  14. jQuery plug-ins gebruiken
  15. Voorbeelden en toepassingen

Heb je opmerkingen of vragen over de inhoud? Laat dan een reactie achter onder dit artikel, of neem contact op.

-- Peter Kassenaar
24 mei 2013

23mei

Webapp toevoegen aan Android Homescreen

Bij de onthulling van de iPhone in 2007 werd ook het concept webapps geïntroduceerd. Dit betekent dat je een koppeling naar een website op je startscherm kunt plaatsen, waardoor het net een app lijkt. Met één klik kun je daarna de site openen alsof het een app is. Het enige wat de website in kwestie daar voor hoeft te doen is de regel

<meta name="apple-mobile-web-app-capable" content="yes">

toevoegen aan de header van de site. Met

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

kun je bovendien aangeven welke afbeelding als icon wordt gebruikt voor de webapp. Bezoekers kunnen op een iPhone of iPad in de browser Voeg toe aan beginscherm kiezen om de site als app te plaatsen.

Webapp toevoegen aan startscherm

Maar hoe gaat dat op Android?

Android heeft echter geen 1-klikoptie om websites of webapps toe te voegen aan het startscherm. Er zijn wat meer stappen voor nodig. In deze beschrijving gaan we uit van Google Chrome als browser, maar in andere browsers zal het vergelijkbaar werken.

  1. Open op je Android-device de browser (Google Chrome).
  2. Ga naar de gewenste pagina. Hier gebruiken we www.boekenwolk.nl als voorbeeld.
  3. Klik in Chrome op het pictogram met de ster in de adresregel om een favoriet te maken van de website.
  4. Volg de aanwijzingen in de browser om de favoriet op te slaan. In Chrome kun je bijvoorbeeld de naam aanpassen en een locatie opgeven waar de snelkoppeling wordt opgeslagen.

Favoriet maken van website in Chrome voor Android

  • Open het menu met instellingen in Chrome en kies Bladwijzers. Hierin staat minimaal de bladwijzer die je zojuist hebt gemaakt.

Bladwijzers openen in Chrome voor Android

  • Tik op de bladwijzer en houdt je vinger ingedrukt. Na ongeveer een seconde verschijnt een snelmenu met mogelijkheden.
  • Kies hierin de optie Toevoegen aan startscherm.

Bladwijzer toevoegen aan Android Startscherm

  • Dat is alles. Ga terug naar het Android startscherm. Hierin staat de snelkoppeling. Sleep hem naar de plek waar je hem graag wilt hebben.
  • Android houdt zoals je ziet (net zoals Apple iOS) rekening met het pictogram dat is aangegeven in de code van de site.
    • Als de maker van de site geen apart pictogram heeft opgegeven, wordt het standaard webpagina-pictogram van de browser gebruikt.
  • Tik op de snelkoppeling om de website/webapp snel te openen.
    • Anders dan in iOS wordt de site niet in het volledige scherm geopend (dus zonder dat de browsertabbladen en adresregel zichtbaar zijn). In Android is altijd de omliggende browser zichtbaar. Misschien wordt dit in een volgende versie van Android nog aangepast?

Snelkoppeling op Android Startscherm

Veel succes er mee!

--Peter Kassenaar
23-mei-2013

16mei

Introductie PhoneGap

Cover PC-Active 269Wat 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 of Cordova?

Het project PhoneGap is oorspronkelijk gestart door Nitobi. In 2011 werd PhoneGap overgenomen door Adobe. Om de continuïteit en het opensourcekarakter te garanderen, werd de codebase ondergebracht bij Apache, waar het de naam Cordova heeft gekregen. U kunt de huidige versie van PhoneGap zien als een distributie van de Cordova core. Ingewikkeld? Tja. Ook op de PhoneGap-site zelf komt u beide termen nog tegen! Online vind u de officiële uitleg. Met PhoneGap schrijft u één keer de HTML-code. Deze kan worden omgezet naar apps voor liefst zeven verschillende mobiele platformen.

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.

PhoneGap-workflow

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.

phonegap_01_correct

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.

Figuur 2 - PhoneGap Build

  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.

Figuur 3 - PhoneGap app builden

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.

Figuur 4 - PhoneGap app downloaden

Geen app voor iOS?

U zult zien dat de knoppen voor Android en andere platforms al snel blauw worden, het teken dat u de app kunt downloaden. Voor iOS gaat dit echter niet op. De knop blijft rood. Hiervoor zult u eerst uw developerscertificaat en een provisioning profile moeten uploaden naar PhoneGap Build. Pas dan kan de app voor iOS met dit certificaat worden ondertekend en gecompileerd. Dit is (helaas) een omslachtig proces dat verplicht is gesteld door Apple als u apps wilt ontwikkelen voor iOS. Meer informatie over het signeren van iOS-apps vindt u bij PhoneGap Build op http://build.phonegap.com/docs/ios-builds en bij Apple op https://developer.apple.com/programs/ios/.

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.

Figuur 5 - Android telefoon instellen

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

Figuur 6 - Machtigingen voor Android app

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

Figuur 7 - Eenvoudige PhoneGap app op 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.

Figuur 8 - Voorbeeldcode van Google Maps met PhoneGap

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.

Geschikte typen PhoneGap-apps

Met PhoneGap maakt u snel en eenvoudig apps, maar dat wil niet zeggen dat dit het aanbevolen platform voor alle typen apps is. Als u apps maakt die intensief de hardware aanspreken zoals games of audio- en videobewerking, dan bent u waarschijnlijk beter af met een oplossing als Corona SDK. Door de hybride laag van PhoneGap levert u altijd iets in op de performance. PhoneGap is vooral geschikt voor informatieve- en business apps en is bijvoorbeeld erg goed in het werken met AJAX- en JSON-data. Dit betekent trouwens niet dat uw app er saai uit hoeft te zien. Met aanvullende bibliotheken als Twitter Bootstrap, jQuery en/of jQuery Mobile kunt u apps een fantastische look en feel geven.

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.

<shameless plug>
Meer weten over PhoneGap of een van de andere technieken die in dit artikel werden besproken? Ik verzorg hierin trainingen of help uw organisatie bij het beslissen welk type apps (web-, hybride-, native-) in uw situatie de beste keuze zijn. Neem contact op!
</shameless plug>

-- Peter Kassenaar
16-mei-2013