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.

26mei

Handboek Usability – 2e editie

978905940699523 mei 2014 – Vandaag is het Handboek Usability – 2e geactualiseerde editie verschenen. In dit handboek leert u alles over het ontwerpen van gebruikersvriendelijke websites. In deze uitgave is alle tekst geactualiseerd en zijn de screenshots aangepast voor de situatie in 2014. Nieuw is een compleet hoofdstuk over mobile usability.

U kunt dit boek gebruiken om uw eigen websites te beoordelen op hun gebruikersvriendelijkheid. Ook leert u hoe u betere websites maakt door vanaf het begin af aan al te letten op factoren die gezamenlijk de gebruikersvriendelijkheid van een website bepalen. U leert eerst welke aspecten een rol spelen bij de usability van een site en gaat vervolgens stap voor stap in detail kijken naar deze factoren. Zo krijgt u langzamerhand een totaalbeeld van de gebruikersvriendelijkheid van een site.

Specificaties

  • Boek, paperback, 336 pagina’s
  • Full Color-uitgave
  • Geschikt voor opleidingen en zelfstudie
  • Onafhankelijk van het gebruikte besturingssysteem en browser
  • ISBN-13: 978-90-5940-699-5 (9789059406995)
  • Prijs: EUR 34,95

Van de flaptekst

“Op internet is de gebruiker de baas. Met maar één muisklik kan hij kiezen uit duizenden soortgelijke websites. Usability gaat over het gebruiksgemak van websites. Hoe gebruikersvriendelijker uw website is, hoe beter hij zal scoren ten opzichte van de concurrentie. In dit geheel in kleur uitgevoerde Handboek Usability laat Peter Kassenaar u uitgebreid zien welke richtlijnen van toepassing zijn bij het maken van gebruikersvriendelijke websites. U leert onder meer hoe usability gedefinieerd wordt en welke kenmerken van toepassing zijn op gebruikersvriendelijke websites. Aan de hand van helder beschreven theorie en talloze schermafbeeldingen met goede en foute voorbeelden hebt u snel inzicht in veelgemaakte usabilityfouten bij webdesign. Door het gebruik van vragen en praktijkoefeningen aan het eind van ieder hoofdstuk is het Handboek Usability buitengewoon geschikt voor opleidingen en zelfstudie. Tot de behandelde onderwerpen behoren:

  • wat is usability en wat is user experience
  • van algemeen naar specifiek: siteontwerp, navigatie en paginaontwerp
  • de homepage en de landing page
  • schrijven voor het web
  • het belang van de zoekfunctie op een website
  • usability en multimedia
  • toegankelijk webdesign (accessibility)
  • mobile usability
  • zelf usabilitytesten uitvoeren

“Dit boek is een must voor webdesigners, webprogrammeurs, webmasters, webschrijvers, hobbyisten, (media)studenten, projectmanagers en marketeers. Kortom, iedereen die met websites werkt om mensen te bereiken. Eén boek – alles over website usability.”

Direct bestellen

 

-- Peter Kassenaar
26 mei 2014

18oktober

50% korting op boeken en videos bij Packt Publishing

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

In Nederland vieren we Columbus day (de tweede maandag van oktober) niet. Maar dat betekent niet dat we niet kunnen profiteren van acties in de Verenigde Staten, waar veel bedrijven deze feestdag aangrijpen om korting te geven op producten.

Columbus Day Banner 2

Zo heeft uitgeverij Packt Publishing tot aanstaande maandag een actie waarbij je 50% korting krijgt op alle eBooks en video’s die door dit bedrijf worden uitgegeven. Eerder op dit blog besprak ik bijvoorbeeld de uitgaven jQuery UI Cookbook en jQuery hotshot.

Packt is sterk in technische boeken en trainingsvideo’s over webdesign, development, 3D-design, databasetools en nog veel meer. De eBooks zijn beschikbaar in ePub- en pdf-formaat en kun je ook naar je Kindle tablet laten verzenden (al zijn deze in Nederland ook nog dun gezaaid).

Ook de Nederlandse auteur Hedwyg van Groenendaal (@hedwygNL) is momenteel bezig met een boek in deze serie, Prezi Hotshot, dat later dit jaar of begin 2014 zal verschijnen.

Bestellen

Ga naar http://bit.ly/1bqvB29  om je korting te claimen en gebruik de code COL50 als promocode bij het afrekenen. Door de gunstige dollarkoers valt je voordeel op dit moment zelfs nog hoger uit.

Veel lees- en kijkplezier!

Columbus Day Banner 3

Peter Kassenaar
-- 18 oktober 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

05februari

Digitale kinderboeken bij Boekenwolk

Boekenwolk icon

Maandag 4 februari 2013 is Boekenwolk gestart. Boekenwolk is een digitale bibliotheek, maar dan gevuld met uitsluitend kinderboeken. De eerste serie boeken is afkomstig van gerenommeerde uitgevers als Kluitman, Gottmer en Lemniscaat. Er zijn bij de start ongeveer 200 kindertitels voor de leeftijd van 0  tot en met ongeveer 15 jaar aanwezig. Naar verwachting worden regelmatig nieuwe titels toegevoegd.

Van elk boek zijn gratis pagina’s te lezen ter kennismaking, en na het afsluiten van een abonnement (vanaf €19,95 per kwartaal) is elk boek onbeperkt te lezen.

Boekenwolk en Yindo

Boekenwolk is de eerste spin-off van Yindo. Dat wil zeggen dat Boekenwolk een volkomen eigen gezicht en eigen inhoud heeft, maar dat op de achtergrond gebruik wordt gemaakt van technologie die we eerder ontwikkelden voor het Yindo-platform. Yindo zet daarmee de eerste stappen op weg van een eigen interface (met de website yindo.nl en een Yindo-app) naar een - nog meer - open platform, waarvoor meerdere partijen hun eigen interface kunnen ontwikkelen en hun eigen product op kunnen baseren.

Boekenwolk is een idee van Rikky Schrever van Het Redactiepakhuis. Zij zocht contact met Yindo om haar visie op het (kinder)boekenvak te realiseren. Mijn rol bij het realiseren van Boekenwolk was het ontwikkelen van het front-end (met HTML, CSS, en veel, heel veel JavaScript) en een deel van de database- en API-ontwikkeling (C#).

Enkele technische achtergronden

Om Boekenwolk mogelijk te maken, heeft Yindo een eigen API ontwikkeld. Op basis hiervan kunnen derde partijen informatie opvragen uit de Yindo-database (waarin ondertussen duizenden titels zijn opgenomen) hun eigen gebruikersadministratie voeren en meer.

Een deel van de API is openbaar. Zo kan iedereen bijvoorbeeld via een http-call naar het juiste adres de nieuwste boeken in Yindo opvragen, welke boeken tot een bepaalde serie behoren of welke boeken het populairst zijn. Het is vervolgens aan het het betreffende front-end (een website, een app of een nog andere toepassing) iets met deze informatie te doen. Om bijvoorbeeld de nieuwste boeken op te vragen, wordt dit adres gebruikt:

http://api.yindo.com/api/book/new

De server retourneert vervolgens een XML- of JSON-resultaatset met de nieuwste titels. Dit kan er als volgt uitzien:

Yindo API-call nieuwe boeken

In dit resultaat zijn – naast tal van andere kenmerken – bijvoorbeeld snel de auteursnaam, titel en de door de uitgever vastgestelde prijzen terug te vinden.

Ieder front-end mag zelf weten hoe deze resultaten gevisualiseerd worden. In Yindo doen we dat op de volgende manier (je ziet al dat De zwarte spiegel het eerste boek in de resultaatset op de webpagina is).

Yindo Nieuwe titels

Maar Boekenwolk visualiseert nieuwe titels op een heel andere wijze:

Boekenwolk nieuwe titels

Je ziet bovendien dat hier een heel andere set nieuwe boeken wordt getoond. Hoe kan dat? Welnu, Boekenwolk is een aparte, bekende partij binnen de Yindo-API. Boekenwolk kan daarom de functies in de API naar wens aanroepen met een eigen key (parameter). Zo worden alleen de boeken geretourneerd die voor die partij van belang zijn. En in het geval van Boekenwolk zijn dat uiteraard de kinderboeken.

Zo zijn in de API nu al tientallen functies aanwezig. Ze variëren van het opvragen van details van één boek tot het opvragen van complete categorieën en subcategorieën, abonnementsgegevens, gebruikersgegevens, favoriete boeken, en het zoeken binnen de Yindo-database, desgewenst tot op paginaniveau. De functies in de API worden langzamerhand opengesteld voor gebruik door derden. Op termijn zal ook openbare documentatie worden gepubliceerd zodat iedereen er gebruik van kan maken.

De Yindo-API kan bijvoorbeeld worden gebruikt voor:

  • Whitelabeling-shops op basis van het Yindo-platform.
  • Uitgeverijen die hun eigen boeken via hun site willen laten lezen, huren of kopen.
  • Boekhandelaren die via hun site boeken willen laten inzien of hun klanten in de winkel inzage willen geven in niet op voorraad zijnde boeken.
  • Websitebeheerders of leesclubs met een eigen website die een bepaald boek willen bespreken, recenseren of willen delen met lezers.
  • Opleiders die na afloop van de cursus hun cursisten (al dan niet voor bepaalde tijd) inzage willen laten houden in het digitale cursusmateriaal.
  • …tal van andere toepassingen.

Conclusie

Het maken van de API en een eerste volledige disconnected omgeving als Boekenwolk was een grote uitdaging, maar erg leuk en leerzaam om te doen. Het leidde tot een combinatie van talloze technieken: HTML om de hele zwik te presenteren, CSS om alles er aantrekkelijk uit te laten zien, AJAX en JSON als transportprotocollen en serversided het gebruik van C#, SQL Server en IIS om de juiste gegevens op te halen, te filteren en te sorteren.

Boekenwolk is een zogenoemde web-app en is geoptimaliseerd voor iPad-gebruik. Ga gewoon op je iPad naar www.boekenwolk.nl en de rest wijst zich vanzelf.

We werken op dit moment nog aan verbeterde weergave op andere tablets, zoals Android (Samsung Galaxy Tab)  en Windows 8 (Microsoft Surface). Omdat we gebruik maken van diverse typische webkit/iOS-technieken voor slide en swipe, is de code helaas niet 1:1 te gebruiken op alle platforms. So much voor cross-platformcompatibiliteit… Het realiseren van cross-platform webapps blijft daarom ook een uitdaging op zich, ofschoon dit alsnog (stukken!) sneller is dan alle code te herschrijven voor een specifiek platform (iOS, Android, Windows).

Tot slot een filmpje over het gebruik van Boekenwolk door de doelgroep.

 

Heb je vragen of opmerkingen over Boekenwolk of het Yindo-platform en de Yindo API, dan kun je altijd contact opnemen.

Peter Kassenaar
-- 5 februari 2013

16oktober

Stem op Yindo voor Innovation Award 2012

logo_accenture Accenture is een groot bedrijf (244.000 medewerkers) en wereldwijd actief op het gebied van managementconsulting, technologie en outsourcing.

Elk jaar organiseren ze de prestigieuze verkiezing Accenture Innovation Awards voor nieuwe initiatieven op het gebied van Communicatie, Media en Technologie.

We zijn er trots op dat Yindo in 2012 uit ruim 1450 inzendingen, verdeeld over vijf categorieën is doorgedrongen tot de top-5 van de categorie Best eCommerce. Hierdoor dingt Yindo mee naar de publieksprijs ‘de blauwe tulp’.

YindoLogoSmallZoals trouwe lezers van dit blog weten, ben ik Yindo samen met Bob van Duuren en Wouter Vermeulen gestart in het voorjaar van 2010. Het is een enorme eer dat we met een klein team voor deze prijs zijn genomineerd. We hebben dit mede te danken aan het vertrouwen dat nu al ruim 50 uitgevers aan Yindo hebben geschonken door hun uitgaven (mede) op Yindo te publiceren. Op deze manier zijn we voortrekkers van een nieuwe manier van lezen via de cloud, dat  nu langzamerhand bekend raakt onder het grote publiek.

Publieksprijs

De winnaar van deze publieksprijs De blauwe tulp wordt – zoals de naam al doet vermoeden – bepaald door het publiek. Op de site van de Accenture Innovation Awards moet daartoe getweet (Twitter), geliked (Facebook) of geshared (Linkedin) worden. Alleen stemmen die op de volgende pagina – en op die manier – worden uitgebracht, gelden:

http://www.accenture.com/Microsites/innovation-awards/2012/cmt/Pages/individualconcept.aspx?conceptID=649

Ons verzoek derhalve: bezoek deze pagina en klik op de knoppen om je stem uit te brengen. Als bonus kun je ook nog een video bekijken van Bob die uitlegt wat Yindo is en hoe het werkt :-).

En dat niet alleen: we zouden het enorm op prijs stellen als je jouw (sociale) netwerk zou willen inzetten om meer stemmen voor Yindo te verkrijgen. Met andere woorden: spread the word! De concurrentie is sterk, dus alle steun is welkom. We danken je bij voorbaat hartelijk voor jullie medewerking – na 8 november weten we of Yindo heeft gewonnen!

Mocht je ondertussen vragen hebben over Yindo, aarzel dan niet om een kijkje te nemen op www.yindo.nl, of contact op te nemen.

 

Peter Kassenaar
-- 16 oktober 2012.

15november

Yindo in een HTML-jasje

YindoLogoSmallDe afgelopen maanden ben ik (samen met lead architect Michiel de Rond) druk bezig geweest met het realiseren van een volgende versie van Yindo – jouw digitale bibliotheek (lees meer over mijn rol binnen Yindo).

De eerste versie van Yindo was gebouwd rondom Microsoft Silverlight. Dit was destijds een goede keuze, maar het web is de afgelopen jaren sterk veranderd. Door de opkomst van tablets (iPad, Android tablets) en de verdergaande ontwikkeling van HTML5, CSS, JavaScript en frameworks als jQuery hebben plug-ins als Adobe Flash en Microsoft Silverlight sterk aan belang ingeboet. Sterker nog, op mobiele apparaten zijn deze plug-ins niet eens te gebruiken! Adobe heeft vorige week het einde van Flash voor mobiele apparaten aangekondigd en misschien is ook Silverlight 5 de laatste versie van deze invoegtoepassing.

Daarnaast rapporteerden Yindo-lezers af en toe problemen met de werking van de Silverlight-plugin en de vindbaarheid van informatie.

Deze zomer hebben we daarom besloten van Yindo een volledige HTML/CSS/JavaScript-toepassing te maken. In de rest van dit artikel lees je enkele (technische) achtergronden en belangrijke wijzigingen die we hebben doorgevoerd.

Homepage

Dit was de oude (Silverlight-)versie van de homepage:

Yindo_Silverlight

Hoewel dit er attractief uitzag met een duidelijk boek als blikvanger en fraaie animaties, was het toch onvoldoende om het groeiende aanbod van Yindo (nu ruim 1500 titels and counting) goed te ontsluiten. De categorieën en onderwerpen werden pas zichtbaar na het openen van een uitklapmenu. De zoekfunctie werkte soms niet. Het was lastig om in deze weergave snel de titel, auteur en andere eigenschappen van uitgaven te zien.

Dit is daarom de nieuwe homepage:

Yindo_html

In de nieuwe homepage zijn minder uitgaven tegelijk zichtbaar, maar is wel in één oogopslag te zien welke categorieën en onderwerpen beschikbaar zijn en hoeveel uitgaven binnen een categorie vallen. Het kiezen van een categorie toont direct de uitgaven en de belangrijkste aanvullende informatie (zoals auteur, uitgever en prijs) van een uitgave.

Met de pijlknoppen links en rechts van de boeken en/of met het muiswieltje worden de boeken in een carrousel getoond.

Andere kenmerken van de nieuwe homepage zijn:

Yindo_html_meer

De knop Meer bij een uitgave toont een uitgebreide beschrijving van het boek en knoppen om het boek direct op je boekenplank te plaatsen, te kopen als papieren uitgave, aan te schaffen in een abonnement (indien beschikbaar) en meer. Uiteraard hoef je alleen maar op de cover te klikken om direct te beginnen met lezen!

TIP 1: ook als de uitgave Meer geopend is, kun je gewoon naar links en rechts blijven scrollen en het muiswieltje gebruiken. De carrousel draait gewoon door.
TIP 2: klik op de naam van de auteur of de uitgever om meer uitgaven van die auteur (of uitgever) te openen.

Hoofdmenu

Yindo_html_main

In het hoofdmenu van Yindo is het opschrift op de knoppen gewijzigd. Start en Mijn Yindo zijn hetzelfde gebleven. Maar daarnaast staan nu veelgebruikte (en veelgevraagde) opties als Producten en Uitgaven. De knop Aanmelden/Afmelden is gelijk gebleven.

De volgorde van het servicemenu (met gebruikersnaam en de opties Wat is Yindo en Nieuws) is omgedraaid. Dit voorkomt dat de uitklapmenu’s snel – en vaak ten onrechte – worden geopend.

Ook nieuw is dat de menu-opties nu een groot uitklapmenu tonen (in web-termen: een mega-menu, of mega-dropdown). Hierin kun je snel teruggaan naar je laatstgelezen boek, of direct naar een bepaalde categorie springen (zonder de carroussel centraal op de pagina te gebruiken):

Yindo_html_myYindo

We wachten af hoe de reacties zijn en zullen dan deze menu’s nog uitbreiden of de inhoud aanpassen of herzien.

Techniek

Een klein kijkje achter de schermen. Je kunt deze paragraaf overslaan als je alleen wilt weten wat er nog meer vernieuwd is.

Op de homepage en alle andere pagina’s maken we intensiever gebruik van jQuery en AJAX-calls dan voorheen. Elke keer als een andere categorie, een andere auteur, uitgever of verwante uitgaven worden opgevraagd, stuurt de pagina een AJAX-call naar de Yindo-website. Dit voorkomt dat steeds de hele pagina opnieuw geladen moet worden met de nieuwe informatie en zorgt voor een betere responsiviteit en gebruikerservaring.

De call om bijvoorbeeld de nieuwste titels op te halen (via de hyperlink Nieuw onder de carrousel) ziet er bijvoorbeeld als volgt uit. De hyperlink staat in de code als

<a id="hlNewItems">Nieuw</a>

De jQuery-code om een muisklik op deze link af te vangen ziet er op deze manier uit:

// Top-15 nieuwste boeken ophalen
$('#hlNewItems').bind('click', function
() {
updateUI();
var methodName = YindoJS.bookServiceUrl + 'getNewBooks'
;
$.ajax({
contentType:
'application/json; charset=utf-8',
url: methodName,
success: onCompleteGetCenterInitItemCollection
});
});

Binnen de functie wordt eerst de functie updateUI() aangeroepen. Hiermee wordt de huidige carrousel gewist en wordt de indicator ‘een ogenblik geduld…’op het scherm getoond.

Daarna wordt de jQuery-functie $.ajax() gebruikt. De parameters hiervoor zijn de methode getNewBooks (die in de Yindo-webservice is gedefinieerd) en als callBack-functie is onCompleteGetCenterInitItemCollection aangegeven (OK, dat is niet bepaald de meest logische naam, maar vanuit backward compatibility-overwegingen moest deze nu eenmaal zo blijven:). AJAX-calls zijn asynchrone calls. Dit betekent dat de rest van het script gewoon uitgevoerd wordt, terwijl ondertussen het resultaat van de AJAX-call wordt afgewacht. De UI blijft responsief, er staat geen zandlopertje te draaien in de browser.

TIP 3: binnenkort stellen we een groot aantal functies uit de Yindo-bibliotheek ook beschikbaar via een publieke API. Dan kunnen ook andere websites nieuwe de uitgaven op Yindo tonen, zoeken in uitgaven, eventueel pagina’s laten zien, boekenplankjes aanbieden en meer. Stay tuned!

CallBack

De callbackfunctie wordt uitgevoerd zodra de webservice het resultaat retour geeft. Voor de duidelijkheid laat ik al mijn callback-functies in een script altijd beginnen met onComplete… en herhaal daarna vaak de naam van de oorspronkelijke functie. Zo is duidelijk welke callback-functie bij welke AJAX-call hoort.

Het resultaat van de webservice die de vijftien nieuwste boeken retourneert wordt in Yindo bijvoorbeeld op de volgende wijze verwerkt:

function onCompleteGetCenterInitItemCollection(result) {
// 0. progressIndicator weer verwijderen.
$('.progressIndicator'
).remove();
	// 1. resultaat globaal beschikbaar maken
YindoJS.centerItemCollection = result.d;

// 2. template binden
var carousselMarkup = '<div id="ca-container2" class="ca-container"><div class="ca-wrapper" id="ca-wrapper2">…</div></div>'
;
var items = $("#htmlShopItemsTemplate"
).tmpl(YindoJS.centerItemCollection);
$(
'#htmlShopContainer'
).append(carousselMarkup);
$(
"#ca-wrapper2"
).html(items);

// 3. Carousel maken van template
// Credits: CoDrops: http://tympanus.net/codrops/2011/08/16/circular-content-carousel/
$('#ca-container2'
).contentcarousel();

// 4. Het ISBN van de eerste titel opslaan in HTML5-localStorage om state te bewaren
//… nog meer code
//…
} // end onCompleteGetCenterInitItemCollection()

In totaal bevat de callBack-functie op deze manier 8 verschillende stappen. Niet in bovenstaande code getoond zijn stappen om de juiste koppelingen voor hyperlinks aan te haken voor auteurs en uitgevers, of een boek wel of niet in een abonnement beschikbaar is en meer.

Op vergelijkbare manier zijn in de nieuwe Yindo-versie honderden van dit soort jQuery-functies en callBacks geschreven. Er zijn webservicecalls voor voor vooruit/achteruit bladeren door boeken, springen naar een bepaald hoofdstuk, het maken en delen van bladwijzers, uitgaven op je boekenplank plaatsen en verwijderen, enzovoort. Kortom: vrijwel alle functionaliteit die voorheen door Silverlight werd uitgevoerd, is overgebracht naar non-intrusive HTML en JavaScript/jQuery.

Meer veranderingen – Mijn Yindo

Behalve de homepage is ook de pagina Mijn Yindo met je persoonlijke instellingen en je boekenplank nu helemaal uitgevoerd in HTML. Zo ziet hij er uit:

Yindo_html_bookshelf

Ook nu weer kun je met het muiswiel of met de pijlknoppen van links naar rechts door je boekenplank bladeren. Als je op een boek klikt (of dit nu in het midden staat of niet), wordt dit boek geopend in de reader en ga je verder met lezen waar je de vorige keer gebleven was. Als je een boek nog niet eerder hebt gelezen, begin je gewoon bij pagina 0 (de cover).

De knoppen rechtsboven zijn dynamisch en tonen de mogelijkheden die op dat moment beschikbaar zijn voor het centrale boek. De opties zijn:

  • Verwijderen – verwijder het boek van je boekenplank en verplaats hem naar Geschiedenis (onder in de pagina)
  • Kopen – Koop dit boek als papieren uitgave of als permanent boek op je boekenplank.
  • Kopen of verlengen – verleng de uitgave met één maand (gerekend vanaf de eigenlijke vervaldatum – in Yindo kun je veel uitgaven lenen/lezen voor 1 maand tegen een zeer aantrekkelijk tarief).

De boekenplank is ook nu een volledige HTML/CSS/JavaScript-module, terwijl vroeger hiervoor een Silverlight-module werd gebruikt. Yindo is op deze manier ook veel toegankelijker geworden voor apparaten of besturingssystemen waarop geen Silverlight beschikbaar is (bijvoorbeeld Linux).

Instellingen

Tot slot is ook de reader voor Yindo omgezet naar HTML. De reader is de pagina waarin je boeken leest, leent, koopt, aantekeningen maakt en kunt afdrukken. Hierbij hebben we er echter wel voor gekozen de bestaande Silverlight-reader te handhaven. Dit uit compatibiliteitsoverwegingen en om de overgang voor de duizenden bestaande Yindo-lezers in hun eigen tempo te kunnen laten plaatsvinden.

Via het tabblad Instellingen in Mijn Yindo kun je aangeven of je de HTML-reader of Silverlight-reader wilt gebruiken:

Yindo_html_lezen

Als je kiest voor gebruik van de HTML-reader, ziet de pagina om boeken te lezen er op de volgende manier uit (je voorkeuren worden direct opgeslagen, je hoeft niet apart op Bevestigen of vergelijkbaar te klikken):

Yindo_html_reader01

Bekende Yindo-lezers zullen vrijwel geen verschil ontdekken met de vorige versie, want de Silverlight-reader ziet er op deze manier uit:

Yindo_reader_Silverlight

Omdat in de HTML-versie van de reader echter nog verbeteringen mogelijk zijn, hebben we deze voorlopig het label ‘experimenteel’ gegeven. We nodigen iedereen van harte uit  zijn of haar ervaringen door te geven of te delen via Facebook of Twitter. Refereer aan @TeamYindo, dan weet je zeker dat wij het lezen.

TIP 4: gebruik in de HTML-reader de knoppen + en (plus- en minknop) op het toetsenbord om vooruit of achteruit te bladeren door een boek. Dat scheelt veel muisklikken! Ook in de weergave Volledig scherm/Fullscreen werken deze knoppen.

De HTML-reader werkt zoals gezegd op alle computers en apparaten waarop geen Silverlight voorhanden is. We maken echter direct een voorbehoud voor gebruik op tablets. Omdat er erg intensieve JavaScript-berekeningen nodig zijn voor het plaatsen en zoomen van de pagina’s, is de performance op tablets niet voldoende. De processors in tablets zijn trager dan op desktop-computers en de JavaScript-engines in de diverse mobiele browsers zijn niet bepaald geoptimaliseerd voor intensief rekenwerk (Ja ik kijk naar jou, Safari!) .

Voor Yindo-gebruik op tablets adviseren we voorlopig nog steeds de speciale mobiele versie van Yindo te gebruiken, op http://m.yindo.nl.

yindo_mobile

Conclusie

Tot zover een korte introductie in de belangrijkste vernieuwingen die in Yindo zijn aangebracht. De homepage, het boekenplankje en de reader zijn compleet vernieuwd. Yindo is vanaf nu geheel zonder plug-ins te gebruiken. Alle functionaliteit is bereikbaar via open standaarden als HTML, CSS en JavaScript.

Tegelijkertijd blijft echter de hoofdfunctie van Yindo overeind staan: Uitgaven direct lezen en lenen. Geen installatie, geen downloads, geen kopieerbeveiligingen.

Het aanbod van Yindo groeit dagelijks (Bonustip: gebruik de nieuwe functie Nieuw, onder de carrousel op de homepage) en zal nog dit jaar de grens van 2000 uitgaven passeren.

TIP 5: uitgevers, wilt u uw eigen uitgaven ter beschikking stellen op Yindo? Lees de pagina Yindo voor uitgevers of neem contact op.

Peter Kassenaar
-- 15 november 2011