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.

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

17februari

review – eBooks lezen op de iPhone

Het is al weer een tijd geleden dat ik een video heb gepost op mijn blog. Maar nu was er weer een leuke aanleiding voor. Mijn uitgever vroeg me of ik niet eens wat indrukken kon geven van de huidige stand van zaken en vooral de ervaringen van het lezen van eBooks op de iPhone en de bediening van de applicaties.

En in plaats van een Word-documentje in elkaar te knutselen met screenshots en toelichtingen is het net zo makkelijk om even een video te maken en deze op YouTube te plaatsen. Dan kunnen er bovendien meer mensen meekijken.

Onderstaande video geeft voornamelijk een impressie van de werking van eBook-applicaties op de iPhone. Je ziet tips voor het downloaden, lezen en navigeren binnen een boek. Zo nu en dan geef ik mijn mening, maar verder het is vooral een (redelijk) objectief overzicht.

Of het lezen van boeken op een iPhone een prettige leeservaring oplevert, zal iedereen voor zichzelf moeten uitmaken. Persoonlijk kan ik best langere teksten lezen vanaf het beeldscherm en vind ik de zoekfuncties binnen de complete tekst van het boek erg handig. Maar anderen zullen het lezen vanaf een (klein) beeldschermpje te vermoeiend vinden, of gewoon niet leuk. Maak zelf je keuze.

 

Samenvattend, ik vind handig:

  • Veel boeken direct onder handbereik. Vooral technische titels en naslagwerken zijn best goed te lezen. Afbeeldingen komen ook goed over (al zie je hier in de video geen voorbeelden van).
  • Zoekfunctie binnen complete tekst van het boek.
  • Bladwijzers maken en aantekeningen bij het boek en daar snel naar toe navigeren.
  • Lage prijs per boek. EUR 3,99 voor een boek dat in de winkel 20 euro of meer kost, is een koopje.

Ik vind niet handig:

  • Scrollen door de superlange inhoudsopgaven. Het ontbreken van in/uitklappen per hoofdstuk is een gemis.
  • Losse applicaties voor elk boek. Ik zou het handiger vinden een overkoepelende app te hebben, waarbinnen de boeken gebundeld zijn (zoals de toekomstige iBookStore?)
  • Geen integratie tussen Stanza (en het kopen vanuit Stanza) en de book-apps? Ik snap nog steeds niet wat de onderlinge relatie is.

Peter Kassenaar
-- 17 februari 2010

09november

Mijn YouTube-verslaving: Penn and Teller

image YouTube is nog steeds immens populair. Hoewel ook andere videodiensten in opmars zijn (Vimeo, Dailymotion.com), blijft YouTube met afstand de meestgebruikte videowebsite. Ook bij mij.

Iedereen heeft zo zijn eigen YouTube-zwaktes.

Zo heb ik bijvoorbeeld een nicht die alle poezen-video’s op YouTube bijhoud. Poezen die in een mand kruipen, Poezen die van een schommel vallen, een vogel vangen, enzovoort. Noem het maar op, of ze heeft het gezien.

Mijn broer daarentegen is weer helemaal gek van buikspreek-video’s (ja, er is wat met hem. Altijd al gedacht). Hij vind het leuk om naar mannen te kijken die hun arm in het achterste van een pop hebben gestoken en daarmee dialogen met zichzelf voeren. Zoek maar eens op ventriloquism, dan trekken tal van voorbeelden voorbij.

Ikzelf heb een zwak voor goochelaars en illusionisten.

In het Engels zo fraai magicians geheten. En dan met name degenen die een meer fysieke act uitvoeren. Een beetje zoals Waardenberg en De Jong vroeger op het podium stonden, maar dan met goocheltrucs (ja, er is wat met mij. Altijd al gedacht). Ik kan het ook niet helpen.

En mijn absolute helden in dit genre zijn de Amerikanen Penn & Teller. Hun voornamen hebben ze al lang geleden afgezworen. Vroeger werd hun show "The unpleasant world of Penn and Teller" wel eens uitgezonden door de VPRO.

Hierin werd dan het horloge van iemand uit het publiek gevraagd, met een hamer verpulverd en vervolgens kon de beste man zijn eigen horloge opvissen uit de maag van een serie dode vissen op ijs die het podium werden opgereden. Wel eerst zelf opensnijden, die vis. Verbazingwekkend.

Penn and Teller

Erg bekend is ook hun Catch the bullet-act, waarbij ze kogels (die door het publiek zijn gesigneerd) op elkaar afvuren en opvangen met hun mond. Het adagium Don’t try this at home is zeker op Penn & Teller van toepassing. En oh ja, dit was ruim 10 jaar voordat JackAss van MTV bedacht werd.

Je moet er van houden.

Maar tegenwoordig zijn we op YouTube aangewezen. Gelukkig zijn er ook minder ongemakkelijke video’s te vinden. Die zelfs zeer grappig zijn. Penn & Teller lappen bijvoorbeeld regelmatig de ‘goochelaarswet’ dat je een truc nooit twee keer doet, en al helemaal nooit een truc uitlegt, aan hun laars. Dit levert hilarische beelden op.

Zoals dit filmpje, van de Balls and cups-truc. Eerst laten ze de truc met verdwijnende balletjes onder bekers ‘gewoon’ zien. Daarna doen ze hem nog een keer, maar nu met doorzichtige, plastic bekers.

 

 

Dan zou je verwachten dat je de tweede keer precies weet hoe het gaat. Maar dan blijkt juist het vakmanschap. Want zelfs met doorzichtige bekers, zie je nog niet hoe het gaat en hoe snel en hoe vingervlug de mannen eigenlijk zijn. Inderdaad, verbazingwekkend.

Hilarisch is ook de uitwerking van hun `in drieën gesneden assistente´, waarbij Teller de rol van charmante assistent op zich neemt. Eerst weer de gewone truc, daarna de onverbloemde uitvoering.

 

 

Ik kan er uren naar kijken.

Wat is jouw YouTube-verslaving? Laat het weten via een reactie op dit blogbericht.

Peter Kassenaar
-- 9 november 2009

 

PS: in aanvulling op het bloggen ben ik sinds kort ook actief op Twitter, voor korte berichten, tips en handige links - bijvoorbeeld meer YouTube-hits. Je kunt me volgen via http://twitter.com/PeterKassenaar (@PeterKassenaar is mijn Twitternaam)

09april

Videodemo's bij Adobe Pulse

Tags: , | Categories: video
E-mail | Permalink | Reacties (0) | Post RSSRSS comment feed

Als je dit blog al wat vaker hebt bezocht, dan weet je dat ik hier met enige regelmaat video's plaats, bijvoorbeeld over Adobe producten als Dreamweaver en Flash.

Gisteren sprak ik met Klaasjan Tukker, Business Development Manager bij Adobe Benelux, en die wees mij op het bestaan van Adobe Pulse. Adobe Pulse is de nieuwe online portal van Adobe Benelux. De site is sinds 1 maart in de lucht.

Misschien ben je ook bekend met Adobe.tv - de videoportal van Adobe die sinds de lancering van de Creative Suite 4-software een enorme boost aan inhoud heeft ondergaan. Het is een erg goed gevulde site (waar ook behoorlijk wat budget voor beschikbaar was, zo vertelde Tukker), maar heeft voor Nederlanders en Belgen een belangrijk nadeel - alle inhoud is Engelstalig.

Veel Engelstalige video's bij Adobe.tv

En hoewel de meeste mensen wel een aardig mondje Engels beheersen, is het in de praktijk lastig om een Engelstalige presentatie, met Engelse software (over een product dat misschien helemaal nieuw voor je is) zonder ondertitels te volgen. Niet alle presentatoren hebben immers een opleiding tot nieuwslezer ondergaan…

Adobe Pulse vult deze leemte op.

Op de site zijn op het moment van schrijven 17 video's aanwezig. Over Adobe-onderwerpen als Photoshop, Acrobat en Flash, maar bijvoorbeeld ook over Apple-hardware en -software, zoals het werken met Mac OS X Finder, Spotlight en Time Machine. Alle video's zijn met Nederlandstalige presentatoren. Aan uitbreiding van het aantal video's wordt gewerkt (want ik zie in de twitter-berichtjes van Tukker dat hij juist Premiere Pro weer heeft gestart voor een nieuwe edit-sessie :-)

Het is de bedoeling dat de site een echte portal gaat worden, met een agenda, community en Adobe evenementen in het land, maar zo ver is het nog niet. Het begin is echter veelbelovend.

Verbeteringen

Er zijn nog een aantal andere puntjes op de site die misschien aangepakt kunnen worden, zoals de mix van Engelstalige en Nederlandstalige inhoud (maar hier moet ik de hand in eigen boezem steken – dit weblog heeft dat ook, omdat het op een vertaalde Engelstalige engine gebaseerd is).

Ook zou het handig zijn als na het kiezen van een video de film automatisch gestart wordt. Nu zit ik vaak enkele seconden te kijken naar het beginscherm, zonder me te realiseren dat ik nogmaals moet klikken om de video te starten…

Hoe dan ook, het initiatief is toe te juichen - neem eens een kijkje op Adobe Pulse.

Peter Kassenaar
-- 09 april 2009

18augustus

Duotoon afbeeldingen maken in Photoshop

Onlangs ben ik gestart een serie – al wat oudere – videodemo's om te zetten naar webformaat en te publiceren op dit blog. In deze serie zijn inmiddels de volgende afleveringen verschenen.

De video van dit bericht gaat over het werken met Duotoon-afbeeldingen. Deze zijn vooral in de drukwereld bekend, maar ook voor webdesign kan het werken met Duotonen tot snel resultaat leiden. Ze komen vooral van pas als het nodig is om bijvoorbeeld snel een kleurfilter over een foto te leggen. Met een paar klikken kan de foto dan snel van de gewenste sfeer worden voorzien.

 

Duotoon afbeeldingen maken in Photoshop

 

Mocht het daarna (eveneens) nodig zijn om de foto af te drukken op een drukpers, dan is in elk geval het exacte kleurnummer bekend en zal de kleur van het drukwerk precies overeenkomen met de afbeelding op het scherm. Het is niet nodig om verschillende kleuren drukinkt te mengen om tot het gewenste resultaat te komen. Op een eenvoudige inktjetprinter zal dit verschil overigens niet te zien zijn, maar een drukker zal blij zijn met de exacte kleurinformatie uit het Pantone- of HKS-profiel.

 

Met Duotoon zijn snel mooie effecten te bereiken. Hiernaast bijvoorbeeld een foto van mijn zoontje (4 jaar) die is omgezet naar een Duotoon-afbeelding waarop de kleur Pantone Yellow C is toegepast.

 

Succes er mee, bedankt voor het lezen/kijken.

 

Peter Kassenaar
--18 augustus 2008

10augustus

Uitgebreide tekstmaskers in Photoshop

In mijn serie videoposts over digitale fotografie en het werken met grafische programma's (Photoshop, Photoshop Elements, overige) zijn ondertussen de volgende afleveringen verschenen:

De video van dit blogbericht is wat uitgebreider (10:40 min.) en laat zien hoe tekstmaskers kunnen worden gebruikt voor verschillende letters van een woord. Achter elke letter wordt een andere foto als masker gebruikt.

 

Uitgebreide tekstmaskers in Photoshop

Om het effect er wat meer uit te laten springen worden daarna(ast) enkele teksteffecten toegepast op de maskers, zoals Schuine rand (Bevel and emboss) en Slagschaduw (Drop shadow). U leert hoe deze eenmalig worden ingesteld en vervolgens makkelijk naar elke laag worden gekopieerd.

De oefenbestanden die in deze videodemo worden gebruikt zijn te downloaden als zip-bestand. Kijk hiervoor onderaan dit bericht.

Wilt u meer weten over Photoshop, kijk dan ook eens in de linkerbalk van dit blog met Google-advertenties. Google is meestal vrij goed met het inschatten welke advertenties op een bepaald blogbericht van toepassing zijn :-).

Door deze adverteerders te bezoeken draagt een u een steentje bij in de kosten van dit weblog. Maar natuurlijk mag u ook rechtstreeks een donatie overmaken om uw waardering te laten blijken!

Bedankt voor het lezen/kijken.

Peter Kassenaar
-- 08 augustus 2008.

tekstmaskers_aap.zip (1,43 mb)