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 was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter.(@PeterKassenaar)

Terug naar de algemene site.

12juni

Angular 2 – leren en begrijpen

Al eerder schreef ik over de online training Angular 2 – Leren en begrijpen die ik aan het ontwikkelen ben. Het doet me plezier te kunnen melden dat deze training nu gereed is en is goedgekeurd door het online trainingsplatform Udemy. De training is vanaf vandaag te vinden op:

https://www.udemy.com/angular-2-leren-en-begrijpen/

angular2-bij-udemy

De training heeft onder meer de volgende kenmerken:

  • Videotraining – beschikbaar op pc, laptop, smartphone en tablet, via de Udemy App.
  • 90+ video’s en 5,5 uur videomateriaal.
  • Korte lessen (4-6 minuten), met telkens één onderwerp.
  • Oefeningen in PDF-formaat zodat je zelf aan de slag kunt met Angular 2.
  • Talloze extra resources en webadressen voor meer informatie.

Zie https://www.udemy.com/angular-2-leren-en-begrijpen/ (verder naar beneden, onder Curriculum) voor een complete inhoudsopgave:

Inhoudsopgave van Angular 2 - Leren en begrijpen

 

Als je specifieke vragen hebt over de training, tips voor verbetering van de inhoud of voor nieuwe trainingen, aarzel dan niet om contact op te nemen of een mailtje te sturen naar info@kassenaar.com!

Experiment

Het is ook voor mij een experiment, om te bekijken of hier in het Nederlandse en Belgische taalgebied voldoende animo voor is. Udemy is een platform dat op dit moment voornamelijk Engelstalige trainingen aanbied (op dit moment kon ik 14 andere Nederlandstalige trainingen ontdekken). Het heeft echter wel ambities om ook een belangrijke rol in andere markten te gaan spelen. Er zijn onder meer al Spaanse, Duitse en Chinese varianten.

Kortingscode

Als je al eerder een kortingscode hebt aangevraagd, dan heb je hierover inmiddels een mailtje ontvangen. Wil je alsnog aanmelden voor een kortingscode voor vroege vogels, dan kan dit nog tot 1 augustus 2016. Stuur een mailtje naar info@kassenaar.com met als onderwerp Udemy – Angular 2 en ik mail je terug met een code en instructies om deze in te wisselen.

Ik ben benieuwd naar jullie reacties,

Ondertussen veel succes met Angular 2!

--Peter Kassenaar
12 juni 2016

 

02juni

Online training Angular 2 – update

angular2-leren-begrijpen-promo-image

Op dit moment ben ik bezig met de ontwikkeling van de training “Angular 2 – leren en begrijpen”. Deze zal worden gepubliceerd op het online learningplatform Udemy.

Het was de bedoeling dat deze training medio mei 2016 zou verschijnen. Dat is helaas niet gelukt.

Ik ben er druk mee bezig, maar het opnemen en bewerken van de video’s duurt in combinatie met mijn overige werk langer dan ik vooraf had ingeschat.

Bovendien is het framework zelf zoals je wellicht hebt gezien nog druk in ontwikkeling. Met name de Router is de afgelopen weken flink onder handen genomen. De oorspronkelijke router is nu als ‘deprecated’ aangemerkt – terwijl de nieuwe router nog niet gereed is. (https://angular.io/docs/ts/latest/guide/router-deprecated.html) . Zowel de router zelf, als de documentatie hierover is nog niet klaar.

Het is daarom een lastige beslissing: Maak ik de module over routing (waar ik juist mee bezig was) op basis van de nu verouderde router, of ga ik toch alvast de nieuwe router gebruiken (die dus nog niet klaar is)?

Keuzes, keuzes ;-)

Ik heb toch besloten de bestaande routermodule opnieuw te gaan maken, met de nieuwe router, en de onderdelen die op het moment van opnemen nog niet gereed zijn aan te geven. Zodra de router wel klaar is, hoop ik vervolgens op een later tijdstip de training aan te vullen.

Dat betekende helaas echter wel weer een nieuwe vertraging.

De vernieuwde planning is dat de training Angular 2 over ongeveer 2 – 2,5 weken klaar is, medio juni 2016.

Mocht je ondertussen vragen hebben, aarzel dan niet om nader contact op te nemen.

Uiteraard kun je je nog altijd aanmelden voor een kortingscode.

Stay tuned, bedankt voor je geduld!

-- Peter Kassenaar
2 juni 2016

27november

Kennismaken met Angular 2

imageOp 26 november 2015 verzorgde ik in samenwerking met Vijfhart IT Opleidingen een webinar over Angular 2. Het was een groot succes. Van de ruim honderd inschrijvers (dit was het aantal plekken dat we op voorhand hadden gereserveerd bij de webinar-provider) waren er meer dan 60 die het hele webinar hebben gevolgd. Elke marketeer zou een moord doen voor 60+% response!. Dus allemaal bedankt voor je aandacht en vragen tijdens het webinar!

Het webinar, dat in totaal ongeveer een uur duurde, bestond uit een theoretisch deel een praktijkdemo. Hierin kwamen de volgende onderdelen aan de orde:

  • Introductie – waarom Angular 2?
  • Angular 2 vs. Angular 1
  • Kenmerken van Angular2
  • Live coding – demo
  • Samenvatting
  • Q & A

Geen video…

Gelukkig konden alle aanwezigen de presentaties goed volgen en horen, maar achteraf bleek dat er geen video-opname was vastgelegd. Dat was balen, want er waren meer inschrijvers dan dat er plek was – en hen was een videodemo na afloop toegezegd.

Om dit euvel te verhelpen heb ik het webinar nog een keer gehouden, maar nu wel met meelopende camera (en zonder publiek…). Dit gaf dan wel weer direct de mogelijkheid een paar schoonheidsfoutjes te verwijderen die er gedurende een live-uitzending altijd insluipen.

…dus een re-recording

De re-recording van dit webinar heb ik in twee delen op YouTube geplaatst, zodat je het nog eens kunt terugkijken. Daarbij is het complete webinar in twee delen gesplitst:

Downloads

Je kunt ook de presentatie downloaden als PDF en de code die tijdens de demo is gemaakt.

Wil je zelf een training Angular 2 volgen, kijk dan bijvoorbeeld bij Vijfhart of neem rechtstreeks contact op!

-- Peter Kassenaar
27 november 2015

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

19november

Unboxing iPad Air 2

Mijn eerste iPad stamt uit april 2010 en is daarmee ruim 4,5 jaar oud. Ik denk dat het een van de oudste iPads in Nederland is, omdat ik hem in de Verenigde Staten kocht toen hij officieel nog niet in Europa gelanceerd was.

Maar de levensduur van de iPad Classic is door Apple beëindigd. Technisch is het apparaat nog prima, maar er worden geen updates van iOS meer uitgegeven voor deze versie. iOS 5.1.1 is de maximale versie. Tegelijkertijd heeft Apple het app-makers verplicht gesteld om nieuw apps minimaal tegen iOS 6 te compileren. Apps voor iOS 5 worden niet meer geaccepteerd in de Store, met xCode kun je ze zelfs niet eens meer maken. Waarmee de originele iPad effectief om zeep is geholpen.

En: daar kwam ik achter toen ik juist in een app-training bezig was (training PhoneGap). Ik dacht slim te zijn door de avond tevoren ‘nog snel even xCode te updaten’. Waardoor je per saldo de volgende dag met een tablet die dan plotsklaps de functionaliteit van een baksteen heeft, op stap gaat. Tja.

Nu dus maar nóg slimmer geweest en tijdig een nieuwe iPad aangeschaft.

Ik maakte onderstaand filmpje over het unboxing- en activeringsproces van de iPad Air 2.

P.S. Ik kan me de storm van kritiek die op Microsoft nederdaalde nog goed herinneren, toen bleek dat van de beloofde 32GB op de Surface tablet slechts 16GB beschikbaar was voor het installeren van apps (november 2012). Apple fanboys riepen huilend van verontwaardiging de hulp van advocaten en class action-specialisten in om alle ‘benadeelden’ te compenseren.

Bij toeval wierp ik nu echter even een blik op de hoeveelheid ruimte die op mijn ‘16GB’ iPad Air beschikbaar is, direct na installatie. Wat blijkt? Slechts ruim 5 GB (!) vrije ruimte. Op een totaal van 11,7?

Dat betekent dus dat minder dan 35% van de geadverteerde ruimte ook daadwerkelijk gebruikt kan worden. Help me even herinneren; waar heb ik ook al weer al die verontwaardigde blogposts hierover gelezen?……crickets……

iPad_air_storage

Maar verder is het een mooi ding.

-- Peter Kassenaar
19 november 2014

19april

Pop-upnotifications met toastr.js

toastr-iconTraditioneel kent JavaScript alleen de alert()-opdracht om mededelingen te doen aan de bezoeker van een site. Maar voor moderne webapplicaties is dat eigenlijk geen optie meer. Er zijn gelukkig tal van pop-up- en notification-bibliotheken ontwikkeld.

Inmijn eigen projecten maak ik vaak gebruik van toastr.js, een kleine jQuery plug-in die precies doet wat ik nodig heb. Ik heb een videodemo gemaakt (10 minuten), waarin de volgende stappen aan de orde komen:

  1. wat is eigenlijk het probleem?
  2. toastr.js downloaden en installeren
  3. een demo-site maken met voorbeelden
  4. meer opties voor toastr.js bekijken

Je kunt de video ook rechtstreeks bekijken bij YouTube:

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

Hyperlinks

Veel succes er mee!

-- Peter Kassenaar
19-04-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.

10maart

Windows 7 installeren op Mac OS X met Boot Camp

Al een jaar of twee heb ik ondertussen een MacBook Pro. Ik heb daar al regelmatig eerder over geblogd. Tot nu toe werkte ik altijd met VMWare Fusion om Windows XP en Windows Vista in een virtuele machine te draaien op mijn Mac, als ik eens Windows-programma’s nodig had.

Maar voor intensief Photoshoppen of videobewerking is dit toch geen ideale situatie, zo heb ik gemerkt. Deze toepassingen vergen veel processorkracht en werken in een virtuele machine aantoonbaar trager.

Vandaar dat ik nu ook de stap heb gemaakt naar Boot Camp. Daarmee wordt Windows (ik kies nu uiteraard voor Windows 7) op een aparte schijfpartitie gezet en kun je tijdens het opstarten van de laptop kiezen welk besturingssysteem je wilt starten.

Tijdens het partitionerings- en installatieproces heb ik de video laten meedraaien. Bekijk het filmpje als je wilt weten hoe het werken met Boot camp in zijn werk gaat.

Op video ziet het er nog tamelijk vloeiend uit, nietwaar? Maar laat ik het hier maar bekennen.

Ik heb gesmokkeld.

Al snel na het klikken op de knop Partitioneer in Boot camp kreeg ik een foutmelding. Iets als ‘Deze schijf kan niet gepartitioneerd worden, omdat de bestanden niet aaneengesloten zijn’. Of zoiets.

Nou, dat was nog een enorm gepuzzel om alles correct te krijgen. Dat heb ik maar niet op video vastgelegd, want dat zou YouTube nooit accepteren ;-)

Ik heb het niet precies bijgehouden, maar de werkvolgorde was ongeveer als volgt. Hopelijk heb je er iets aan als jij ook met deze issues te maken krijgt tijdens het partitioneren van je Mac-schijf met Boot camp.

  • Schijf kan niet gepartitioneerd worden. Ik probeer: OS X Schijfhulpprogramma, Schijf EHBO, Schijf herstellen. Werkt niet. ‘Schijf kan niet worden gedeactiveerd’. Nog een keer proberen, zoeken, forums, Apple support-site. Duur: 1.15 uur.
  • Zoeken op internet. Ik download SuperDuper om een complete systeemback-up te maken op een oude externe vaste schijf die ik ergens onder uit de kast vis. Duur: 1.25 uur.
  • Opnieuw opstarten. Tijdens het opstarten de Alt/Option-toets ingedrukt houden om vanaf de externe vaste schijf te starten.
  • Ik probeer opnieuw via Schijfhulpprogramma vanaf de externe schijf, de originele, interne Macintosh HD-partitie weg te gooien om hem vanaf de back-up (nu met alle bestanden aaneengesloten) terug te zetten. Werkt niet. ‘Schijf kan niet worden gedeactiveerd’.
  • Nadenken. Koffie drinken. Forums lezen. Mac onder passerend bouwvakkersbusje gooien (OK, dat laatste niet, maar je snapt het idee).
  • Ik start de Mac opnieuw, nu vanaf de OS X Snow Leopard systeemdiskette.
  • Weer Schijfhulpprogramma. Partitioneren. Opnieuw proberen partitie weg te gooien. Eindelijk gelukt. hehe, ik heb weer een schone, lege interne vaste schijf. Duur: bij elkaar zo’n 35 minuten.
  • Opnieuw opstarten, nu vanaf de externe vaste schijf met de systeemkopie.
  • Schijfhulpprogramma weer starten. Kiezen voor Terugzetten van de systeemkopie. Dat gaat goed. Duur: 1.45 uur. Hond uitlaten, lunchen, krant lezen. Koffie.
  • Opnieuw opstarten vanaf opgefriste interne vaste schijf. Boot Camp assistent opnieuw starten. Opnieuw proberen te partitioneren. Dat gaat goed. Nee maar, we kunnen verder met de video.

Daarna – ere wie ere toekomt- was het inderdaad nog maar een kwestie van een uurtje, inclusief de installatie van Windows 7 en het installeren van de bijgewerkte Boot Camp drivers. Dat proces heb je in de video kunnen zien.

Nu maar hopen dat het videobewerken en Photoshoppen op native Windows 7 een stukje sneller gaat. Want daar was het allemaal om begonnen…

 

Peter Kassenaar
-- 9-10 maart 2010