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.

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.

04mei

Nieuw: serie Basiscursus op Yindo

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

YindoLogoSmallBeeldmerkEen aantal jaar geleden ben ik in samenwerking met uitgeverij Van Duuren Media begonnen met Yindo, jouw digitale bibliotheek (lees het aankondigingsbericht uit 2010). Yindo is vanaf het begin af aan opgezet als een breed, open systeem, waarin we liefst zo veel mogelijk uitgaven aanbieden.

En dat begint aardig te lukken. Het Yindo-aanbod is gegroeid van ongeveer 400 titels in het eerste jaar naar 1500 titels vorig jaar. Momenteel bevat Yindo zo’n 2500 titels van ongeveer 15 verschillende uitgevers. Aan het eind van dit jaar hopen we via Yindo 5.000-10.000 uitgaven aan te bieden.

Academic Service

En het doet mij bijzonder deugd dat ik vandaag kan aankondigen dat ook de SDU/Academic Service (de uitgeverij waar ik mijn schrijversloopbaan in 1996 gestart ben) heeft besloten een groot deel van haar fonds via Yindo toegankelijk te maken.

Om te beginnen is de serie Basiscursus zo goed als integraal op Yindo geplaatst. Dit betreft dan zowel het actuele aanbod, waaronder titels als Basiscursus Apps ontwikkelen en de Basiscursus Drupal 7, maar ook ook oudere uitgaven die soms niet meer in de winkel verkrijgbaar zijn (maar nog wel worden gebruikt door hobbyisten, scholen en opleidingen). Yindo biedt op deze manier blijvend toegang tot uitgaven, ook als ze niet meer in de boekhandel zijn te vinden.

Dit zijn enkele voorbeelden van oudere boeken van mij, die nu weer compleet beschikbaar zijn:

9789012584234 978901258453197890125847089789012584739

In totaal zijn maar liefst 70 Basiscursussen in hun geheel online te lezen. Van elke Basiscursus is een aantal hoofdstukken gratis beschikbaar (inkijkexemplaar). Als je je registreert kun je voor een gering bedrag een boek een maand of langer op je persoonlijke boekenplankje plaatsen.

Nog voor de zomer zal SDU ook een groot aantal managementtitels via Yindo beschikbaar stellen, aldus senior publisher Gerdi Smit van Academic Service.

Alle uitgaven op Yindo zijn te lezen op elke computer met een browser en uiteraard ook op de iPad. We werken hard aan verdere verbeteringen binnen Yindo. Als je daar tips of opmerkingen over hebt, dan horen we dat graag!

Peter Kassenaar
-- 4 mei 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

13juni

Apps voor uitgevers zijn overbodig (meestal)

app-storeVorige week bezocht ik namens Yindo het e-reading event 2011 in Mechelen, Belgie. Het e-reading event is een vakbeurs voor iedereen die met e-reading, e-books en digitaal publiceren van content te maken heeft (zie het verslag van eLinia). Yindo hoort daar als cloud-based leesplatform uiteraard thuis. Behalve op de stand uitleg geven over Yindo en bij te praten met vakgenoten kon ik ook een paar sessies bezoeken.

“Elke uitgever wil een app”

Een van de items die mij opviel was dat veel uitgevers en andere professionals de app zo ongeveer heilig hebben verklaard. Enigszins gechargeerd kun je zelfs stellen dat de algemene gedachte was ‘als je geen app hebt, besta je niet’. Ik zie dit ook dagelijks in mijn Twitter-timeline. Als het over ‘digitaal uitgeven’ gaat, wordt hier in negen van de tien gevallen een app mee bedoeld.

Zo ook op het e-reading event. Tijdschriften moeten in een app, kranten moeten in een app, boeken moeten in een app. Een app moet abonnementen verkopen en losse exemplaren kunnen verkopen, een app moet advertenties kunnen verkopen, een app moet... Nou ja, de trend is duidelijk. Er waren stands van fabrikanten die App Software aan de man brachten (waaronder Woodwing en Adobe Digital Publishing Suite) en meer. En:

hier begrijp ik nou werkelijk helemaal niets van.

Ik snap niet dat uitgevers, wier type content bij uitstek geschikt is om in standaard webformaat te distribueren zich zo willoos uitleveren aan de nukken en grillen van Apple om maar vertegenwoordigd te zijn in het stuwmeer van ondertussen 500.000+ apps (and counting) en tegelijkertijd verwachten daar ook nog op te vallen en geld te verdienen.

Met app bedoel ik hier een native toepassing voor iPad (of Android) die is gecompileerd met de tools die voor dat platform beschikbaar zijn (XCode voor Mac, of Java/Eclipse voor Android) en na beoordeling en goedkeuring door aanbieder van dat platform (Apple of Google) beschikbaar worden gesteld in een centrale App Store. De app kan vervolgens worden gedownload door gebruikers van het apparaat en worden geïnstalleerd en gestart. Het proces van het zoeken, downloaden en installeren van apps behoort tot de basiskennis van elke tabletgebruiker.

Stelling

Mijn stelling is ‘apps voor uitgevers zijn in 95% van de gevallen overbodig’. Daarentegen: een geoptimaliseerde website is dé aangewezen manier om content te distribueren op mobiele apparaten zoals iPad en Android-tablets.

Let op: ik zeg niet dat álle apps overbodig zijn of altijd vervangen kunnen worden door een webgebaseerde variant, maar wel dat apps voor uitgevers in de meeste gevallen de moeite van de investering niet waard zijn. Dat geld kan veel beter worden besteed aan een geoptimaliseerde mobiele website.

Laat ik dit toelichten door eerst een stapje hoger te gaan kijken en de voor- en nadelen van native apps versus web apps te vergelijken. In het (uitmuntende!) boek Building iPhone apps with HTML, CSS and JavaScript noemt Jonathan Stark onder meer de volgende kenmerken (uitgebreid een aangepast aan de huidige omstandigheden door ondergetekende)

Voordelen van native apps

  • Verkrijgbaar via de App Store, een bekend mechanisme voor alle miljoenen iPad-bezitters, te installeren met een muisklik. Je app is instant beschikbaar voor een potentieel miljoenenpubliek.
  • Een native app biedt toegang tot alle specifieke hardwarekenmerken van het apparaat: accelerometer, camera, microfoon, videokaart, luidsprekers, enzovoort.
  • Programmeurs kunnen een bekende programmeeromgeving (XCode) gebruiken met mogelijkheden voor simulatie, debugging en standaard interfacecomponenten (sliders, vensters, knoppen, menubalken en dergelijke).
  • Er is meestal geen netwerkverbinding noodzakelijk om app te kunnen starten (ofschoon voor het ophalen van webcontent uiteraard wel een internetverbinding nodig is, anders blijft de user tegen een leeg scherm met een draaiende indicator ‘loading...’ aankijken).

Nadelen van native apps

  • Je moet betalen om te mogen ontwikkelen onder de Apple licentie en om je app in de App Store te mogen publiceren.
  • Je moet afwachten of je app wordt goedgekeurd, er zijn geen garanties over de termijn waarbinnen dit gebeurt en wanneer je app vervolgens in de App store verkrijgbaar is.
  • Als de app eenmaal in de store beschikbaar is, moet hij concurreren met honderduizenden gelijksoortige apps. Je moet veel moeite doen om op te vallen.
  • Je bent overgeleverd aan de nukken en grillen van Apple met betrekking tot de voorwaarden van app developmet (en deze worden nogal eens –onaangekondigd – gewijzigd volgens het principe ‘We kondigen twee forste stappen verzwaring aan, en zwakken dat later af tot één forste stap, iedereen blij’).
  • Als je een bug ontdekt, is er geen manier om dit snel te herstellen. Je moet de app dan opnieuw indienen en opnieuw de goedkeuringsmachine afwachten. Het kan weken duren voordat je gefixte app in de store verschijnt.
  • Het ontwikkelproces is daarmee traag en langdurig. Je moet er bovendien rekening mee houden dat lang niet alle users altijd hun apps zullen updaten. Je moet dus verschillende versies (blijven) ondersteunen en debuggen/bugfixen.
  • Bestaande businessmodellen zijn vaak niet bruikbaar binnen apps. Je moet je plooien naar het prijsmodel van Apple, het advertentiemodel van Apple en het abonnementenmodel van Apple. Je keuzevrijheid hierin is zo goed als nihil.

Voordelen van web apps

  • Webdevelopers kunnen hun eigen bekende tools blijven gebruiken (Dreamweaver, Photoshop Visual Studio, Notepad, enzovoort).
  • Je huidige programmeerkennis van HTML, CSS en JavaScript volstaat om volwaardige web apps te maken. Steeds meer vormgevingstools (Adobe InDesign, Corel-tools) kunnen publiceren naar HTML-formaat.
  • Je ontwikkelomgeving mag je zelf kiezen (pc, Mac, Linux).
  • Je applicatie zal draaien in elke device met een webbrowser. Niet alleen op iPhone/iPad.
  • De ontwikkelcyclus is snel. Bug ontdekt? Fix de code op de server en iedereen profiteert daar instant van.
  • Alle users gebruiken dezelfde versie van de app.
  • Inmiddels mogelijkheden beschikbaar voor caching en offline gebruik van de app (ofschoon de hoeveelheid data hierbij vooralsnog beperkt is)

Nadelen van web apps

  • Native hardware van het iDevice (camera, speakers, accelerometer) is niet beschikbaar/bereikbaar.
  • Als je betaalmodellen binnen je app wilt, of voor het gebruik van de app wilt laten betalen, zul je dit zelf moeten programmeren.
  • Het is lastiger dezelfde gebruikerservaring (slide, scroll, pinch/zoom) en User Interface-conventies te bieden als met een native app. Performance van web apps in in het algemeen geringer dan van native apps.

Als je nu de voor- en nadelen van een native app op een rijtje zet, dan blijkt dat native apps bij uitstek geschikt voor specifieke doeleinden: games, ultieme multimediale ervaring, applicaties waarbij toegang tot de hardware van het iDevice onontbeerlijk is: foto-applicaties, kalender- en zakelijke applicaties, muziektoepassingen (hoewel toegang tot deze gegevens door Apple zeer beperkt is. Je mag alleen werken via de door Apple ter beschikking gestelde API’s).

En uitgevers?

Als we nu kijken naar het type content dat uitgevers willen exploiteren, dan is dit in de meeste gevallen: eigen tekst, beeld en visueel rijk opgemaakte content (met kolommen, insets, aflopende illustraties, diverse lettertypen). In enkele gevallen zal daar –tamelijk eenvoudige – multimedia aan te pas komen: animaties, audio- of videofragmenten.

En, uitgevers, wees eens eerlijk, iedereen praat wel over de interactieve, verrijkte e-boeken en alle mogelijkheden die dit gaat geven en ‘die alleen een app kan bieden’ als meerwaarde boven het traditionele e-book. Maar wie heeft die rijke, interactieve e-boeken al gemaakt? Juist. Niemand dus. Want het maken en samenstellen van verrijkte e-boeken blijkt verrekte lastig en bovendien erg duur. Dat is onbetaalbaar in een wereld waar een app van 1,99 euro al als ‘duur’ wordt beschouwd en waar de teller maximaal tot enkele honderden betaalde downloads zal oplopen.

En vervolgens moet je ze de volgende maand – in het geval van een magazine – opnieuw tot aankoop zien te verleiden. Op een aantal pioniers na (tevens: Timo en het toverboek), die behoren tot de vijf procent die ik hierboven als uitzondering heb genoemd is het maken van een app daarom feitelijk geen voor de hand liggende keuze.

De overgrote bulk van alle inhoud bestaat uit de hiervoor genoemde inhoud. Tekst (dat vooral, zowel fictie als non-fictie en proza), afbeeldingen en eenvoudige multimedia. Bij uitstek het type inhoud waar HTML, CSS en JavaScript voor gemaakt is!

Webstandaarden For The Win

De iPad (maar ook de Android tablets) zijn zonder uitzondering voorzien van moderne browsers die overweg kunnen met de nieuwste standaarden op het gebied van HTML5 en CSS3.

Alleen de uitvoering van JavaScript blijft duidelijk achter bij desktop-browsers. De chips in tablets zijn hiervoor nog niet krachtig genoeg. Daarentegen zijn veel CSS3-animaties (waarvoor je op de desktop moet terugvallen op JavaScript of specifieke browsers) in mobiele browsers al ingebouwd.

Qua opmaakmogelijkheden zijn Mobile Safari en Google Chrome verder dan hun desktop-tegenhangers. Hier kun je bij het ontwerp van je web app goed gebruik van maken. Zaken als soepel scrollen, hardware-acceleratie van afbeeldingen (!) en CSS3-animaties gaan mobiel veel beter dan op de desktop (waarbij de ontwerper zoals bekend ook rekening moet houden met oude versies van Internet Explorer en Mozilla Firefox). Tablets hebben op dit gebied geen historie, omdat ze nog maar zo kort bestaan. Voor de webdeveloper is dat prettig, want hij weet zeker dat zijn moderne code goed uitgevoerd zal worden.

HTML5

Elke moderne mobiele web app zal gebaseerd worden op de nieuwe webstandaarden voor HTML5. En ofschoon deze nog niet gereed is, zijn veel onderdelen al gewoon bruikbaar. Elke mobiele browser ondersteunt de specifieke tags waar uitgevers in web apps behoefte aan hebben, zoals <article>, <section>, <aside>, <header> en <footer> voor artikelen en sectionering van inhoud en <audio> en <video> voor multimedia. Alle ingrediënten voor een succesvolle mobiele web app voor uitgevers zijn dus ruimschoots voorhanden.

Mobiele frameworks

Ik wil overigens niet de suggestie wekken dat het maken van een geoptimaliseerde mobiele versie van de site versus de ontwikkeling van een native app primair een kwestie van kostenbesparing is. De huidige generatie webdesigners, gespecialiseerd in desktopontwerp en –CMS’en, redden het niet met hun HTML- en CSS-kennis. Je komt van een koude kermis thuis als je denkt dat je alleen maar in Dreamweaver een paar extra mediaqueries en CSS-rules hoeft te schrijven. Gedegen studie en veel testwerk blijven noodzaak. En gespecialiseerde mobiele front-end designers zijn nog schaars. En dus duur. Het schrijven van geoptimaliseerde HTML5 en CSS3 is een vak apart.

Wel zijn er ondertussen een aantal frameworks gereed die het leven van de mobiele webdesigner wat makkelijker maken. Dit zijn bijvoorbeeld

Conclusie

Voor Yindo hebben we al in een vroeg stadium gekozen een geoptimaliseerde mobiele versie van de website in plaats van een native app. Deze is zeker nog niet perfect – zo is de combinatie van swipe, pinch & zoom is een lastig issue in web apps – maar het geeft al wel goed de richting aan die we op willen gaan. We zijn hiermee volledig onafhankelijk van welke App Store dan ook, kunnen onze eigen business logic (en die van onze klanten) implementeren en onze eigen businessmodellen uitvoeren en testen. En als we een bug ontdekken, is deze vaak binnen een werkdag gefixt.

Ook in desktopbrowsers is de mobiele Yindo-site te bekijken. Surf met Safari of Chrome (immers: op iPad worden WebKit-browsers gebruikt) naar http://m.yindo.nl voor een impressie. Nogmaals de disclaimer: niet geschikt voor Internet Explorer of Mozilla Firefox.

Internationaal gezien is laatstelijk bijvoorbeeld de mobiele versie van de Financial Times veel in het nieuws geweest. Ook zij hebben het native app-model vaarwel gezegd en zijn overgestapt op een web app-benadering. Mijn verwachting is dat veel uitgevers zullen volgen.

Maar misschien zie ik het wel helemaal verkeerd en zijn er uitgevers die kunnen toelichten waarom een app voor hen juist onontbeerlijk is? Ik hoor het graag van ze via de commentaren onder dit artikel!

Peter Kassenaar
-- 10-13 juni 2011

<shameless plug>
Moet u als uitgever nu zelf web apps gaan ontwikkelen? Nee! Dat hebben wij bij Yindo immers al gedaan. Neem contact op om de mogelijkheden te bespreken uw uitgaven in een handomdraai te publiceren op tablet, laptop en pc/mac. U bent van harte uitgenodigd. :-)
</shameless plug>