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

Terug naar de algemene site.

03september

Snel en gratis een website via Windows Azure

logo_windows_azure

Het Microsoft cloudplatform Windows Azure is nu ruim drieënhalf jaar commercieel beschikbaar. Maar pas sinds recente aanpassingen in het beheerdashboard en fikse prijsverlagingen deze zomer is het ook interessant geworden voor particulieren en hobbyisten. Azure is een compleet platform waar u allerlei zaken kunt onderbrengen: databases, webservices, websites, virtuele machines, uw complete Active Directory en nog veel meer.

Gratis hosting

In dit artikel kijk ik naar een interessante optie voor particulieren en kleine bedrijven. Het is sinds deze zomer namelijk zonder meer mogelijk om gratis (als in: voor 0 euro) permanent een website te hosten bij Azure. De website is gewoon 24/7 beschikbaar, maakt naar keuze gebruik van PHP of .NET (of uitsluitend HTML/CSS), u kunt er een gratis 20MB SQL Server database aan koppelen en elke programmeertaal van uw keuze gebruiken.

Pas op het moment dat u meer wilt – denk bijvoorbeeld aan de koppeling met een eigen domeinnaam, een SSL-certificaat, een grotere database, capaciteit voor meer bezoekers – dan hoeft u de site te upgraden en gaat de (financiële) teller lopen. Dat opwaarderen is eenvoudig een kwestie van een schuif naar rechts verslepen op het beheerdashboard van Azure regelt de rest. En als de piekbelasting voorbij is, kunt u de site weer afwaarderen naar bijvoorbeeld minder processors, minder RAM, enzovoort.

Dit is een perfect scenario voor particulieren en hobbyisten. Maar ook voor teams die bijvoorbeeld voor korte tijd een evenementenwebsite moeten plaatsen die gedurende een week (of korter of langer) zeer veel bezoek moet kunnen verwerken.

Iedereen kan zich gratis aanmelden. Stel dat u lokaal al een testwebsite hebt voorbereid, dan plaatst u die op de volgende wijze online bij Azure.

Stap 1. Aanmelden bij Azure

  • Ga naar http://www.windowsazure.com/nl-nl/ en kies rechtsboven de optie Gratis proefversie.
  • Meldt u aan met een Microsoft-account en volg verder de aanwijzingen op het scherm.
  • Let op: hebt u al een MSDN-abonnement, of bijvoorbeeld een Microsoft Partner-account? Dan is daarbij al Azure-toegang inbegrepen. U krijgt dan elke maand bijvoorbeeld 75 euro (de eerste maand zelfs 150,-) om te spenderen aan Virtual Machines, databases of andere diensten naar keuze.

Gratis aanmelden bij Windows Azure

Stap 2. Nieuwe website maken

Als u bent aangemeld bij Azure, komt u in het management portal, op https://manage.windowsazure.com. Dit is vanaf nu ook het centrale adres om al uw Azure-services te beheren. Aan de linkerkant ziet u een overzicht van alle diensten die u kunt benutten. We kiezen nu voor het maken van een nieuwe website.

  • Klik onderin, in de grijze balk op de knop met het grote plusteken NEW.
  • Kies Compute, Web site.

Azure - nieuwe website maken

  • Kies de optie Quick Create. Dit maakt een nieuwe, lege website die u naar eigen wens kunt vullen.
    • Quick Create is handig als u bijvoorbeeld al lokaal een website hebt voorbereid die u wilt gaan hosten op Azure. Als u nog helemaal niks hebt, kunt u ook een standaardsite beginnen via From Gallery. Dit bespreek ik later, in een volgende blogpost.
  • Geef de site een naam en kies een regio.
    • De regio bepaalt in welk Microsoft-datacenter de website wordt geplaatst. Voor ons ligt North Europe het meest voor de hand, maar als u veel bezoek uit Azië verwacht, kies dan bijvoorbeeld East Asia.
  • De naam moet uniek zijn, en bepaalt onder welke URL de website beschikbaar wordt. Ik kies als voorbeeld pk-asieldieren (ik heb een kleine testsite gemaakt die XML-data uit de Nederlandse asielen ophaalt en toont) en de totale URL wordt daarom http://pk-asieldieren.azurewebsites.net/.

Kies een naam en locatie voor de site

  • Klik onderin op Create Web Site. Azure gaat aan de slag en toont na enige tijd de status in het dashboard. Uw eerste Azure website is gereed!

De Azure-testsite is gereed

  • U kunt de website zelfs al testen. Klik op de URL achter de websitenaam om te zien hoe de site er uitziet. Standaard plaatst Microsoft de volgende pagina.

De standaard placeholder pagina bij Azure websites

Het is nu tijd om te bepalen hoe u uw eigen site op de Azure-site gaat plaatsen. Dit hangt af van uw voorkeuren voor een editor of publicatiewijze. Microsoft ziet natuurlijk graag dat u de (gratis) Visual Studio Express gebruikt – en dat is ook een prima editor. Een van de beste zelfs die op de markt is, wat mij betreft. Van uit Visual Studio kunt u rechtstreeks publiceren naar Azure.

Maar misschien werkt u liever met traditionele FTP-software zoals FileZilla of CuteFTP. Ook dat is geen probleem. U kunt dan een profiel aanmaken voor Azure. Vandaar dat ik de volgende stap heb gesplitst in twee delen

  • Stap 3a – publiceren vanuit Visual Studio via PublishSettings
  • Stap 3b – publiceren via FTP.

Stap 3a – Publiceren vanuit Visual Studio

Visual Studio is een van de beste IDE’s die beschikbaar is en de standaardeditor voor iedereen die programmeert in .NET. Vanuit Azure kunt u een bestandje met Publish Settings downloaden die u kunt importeren in Visual Studio. Azure is dan als publicatieprofiel beschikbaar in de werkbalk.

Publish Settings downloaden voor gebruik in Visual Studio

Na het maken van de website is het overzicht te zien (u kunt dit opnieuw openen door op het blauwe wolkje, links naast de tabs Dashboard, Monitor, enzovoort te klikken).

  • Kies onder Publish your app voor Download the publish profile en sla het .PublishSettings-bestand op (bijvoorbeeld op het bureaublad).
  • Open uw site in Visual Studio en kies voor het importeren van het publicatieprofiel.

Het publicatieprofiel importeren in Visual Studio

  • Met de knop Publish – ook zichtbaar, rechtsonder in de afbeelding – wordt de site vanuit Visual Studio rechtstreeks naar de juiste locatie bij Azure gepubliceerd. Makkelijker kan bijna niet.

De vensters zien er achtereenvolgens als volgt uit:

Eigenschappen voor publicatie naar Azure vanuit Visual Studio

  • Gebruik eventueel de knop Validate Connection om te zien of Visual Studio goed verbinding kan maken met Azure.
  • Klik op Publish als alles OK is. Na enige tijd laat Visual Studio in het venster Output zien dat de operatie geslaagd is.

Publiceren naar Azure vanuit Visual Studio

  • Op de URL bij Azure is nu de complete website te zien, in plaats van alleen de placeholder pagina.

Stap 3b – Publiceren via FTP

Als u liever werkt met een traditionele FTP-client zoals FileZilla, dan moet hierin eerst een publicatieprofiel aanmaken met een FTP-username en wachtwoord. Hiervoor kunt u uiteraard niet uw Microsoft-account gebruiken. U zult in Azure eerst een FTP-username en wachtwoord moeten instellen. Dat gaat op de volgende manier.

Instellingen opgeven voor publicatie via FTP

  • Kies onder Publish your app voor Set up deployment credentials.
  • Typ in het volgende scherm een gebruikersnaam en een wachtwoord. Deze moet u straks (samen met andere informatie!) gaan gebruiken in uw FTP-toepassing.
    • Een andere mogelijkheid is dat Azure rechtstreeks verbinding maakt met uw Github-account. Ook daar kom ik in een latere blogpost op terug.

Een FTP-gebruikersnaam en wachtwoord instellen

  • Azure wijzigt uw gegevens en laat dit via de meldingsbalk onderin het venster zien. Dit is altijd een handige locatie om te zien wat u hebt gedaan. Met het kruisje zijn eventueel de oude meldingen te verwijderen.

Azure statusmeldingen

FTP-toepassing instellen

U kunt nu een publicatieprofiel in uw FTP-toepassing gaan maken. Ik gebruik CuteFTP (een tamelijk verouderd FTP-programma, maar ik ben er nu eenmaal aan gewend en het doet alles wat ik wil). De complete gegevens zijn op te vragen via het Azure Dashboard. Dit gaat op de volgende manier. U kunt deze stappen ongetwijfeld vertalen naar uw eigen favoriete FTP-tool).

  • Selecteer bovenin de optie Dashboard. U ziet dan een overzicht met alle eigenschappen van de site, het dataverbruik en meer.
  • Blader naar beneden en bekijk rechts de opties bij FTP Host Name en Deployment/FTP User. Deze gegevens kopieert u naar uw FTP-tool.
    • De FTP Host Name begint met ftp://waws-…enzovoort.
    • De FTP Username is de naam van uw site plus de gebruikersnaam die u hebt opgegeven. In mijn voorbeeld dus letterlijk pk-asieldieren/PeterKassenaar.
  • Gebruik in uw FTP-tool deze items en het wachtwoord dat u in de vorige stap hebt opgegeven.

FTP-gegevens opzoeken via het Azure Dashboard

U kunt nu verbinding maken via FTP. In CuteFTP ziet het venster er dan als volgt uit.

Via FTP verbonden met Azure

  • Blader naar de map /site/wwwroot om de site te plaatsen.
  • Standaard is hierin alleen het bestand hostingstart.html aanwezig. Dit is de placeholder pagina die we hierboven al tegenkwamen. Zodra u de site hebt geplaatst, kunt u dit eventueel verwijderen.
  • Upload de site op de gebruikelijke manier.

Stap 4 – de site controleren

De site is nu geplaatst bij Azure en is voor iedereen op het web te bereiken. Test dit door de URL in de browser te bezoeken. In dit voorbeeld is dat http://pk-asieldieren.azurewebsites.net/

azure_12

Het is niet verplicht een database of serversided techniek te gebruiken. Deze voorbeeldsite (Asieldieren) is met uitsluitend HTML, CSS, JavaScript en jQuery (Mobile) gebouwd. Op Azure kunt u allerlei soorten sites kwijt. U kunt nu de site op de gebruikelijke manier onderhouden: lokaal, op uw eigen computer bouwen en testen, en daarna naar wens via Visual Studio of via FTP naar Azure publiceren.

In volgende blogartikelen zal ik dieper ingaan op de configuratie en verschillende mogelijkheden voor websites bij Azure.

Conclusie

Via Windows Azure kan iedereen gratis een website hosten. Er zijn tal van configuratiemogelijkheden via een uitgebreid beheerdersdashboard. In dit artikel hebben we gezien hoe u zich aanmeldt voor een Azure-account, hoe u een nieuwe website maakt binnen uw account en hoe u een site vervolgens met Visual Studio of via FTP publiceert. In volgende blogartikelen wordt dieper ingegaan op de diverse mogelijkheden van Azure.

Hebt u ondertussen vragen of opmerkingen, stuur dan even een mailtje of laat onder dit artikel een reactie achter.

 

Peter Kassenaar
-- 3 september 2013

16mei

Introductie PhoneGap

Cover PC-Active 269Wat is er leuker dan een eigen app op uw telefoon te plaatsen? Met relatief nieuwe diensten als PhoneGap en PhoneGap Build maakt u apps met bekende technieken als HTML, CSS en JavaScript. Na het uploaden van de code krijgt u een kant-en-klare app retour. In dit artikel maakt u in vijftig regels code een werkende app met geïntegreerde Google Maps.

[Dit artikel verscheen eerder in PC-Active 269, mei 2013]

Download de voorbeeldcode bij dit artikel


Inleiding

Het mobiele landschap is hot. Het marktaandeel van smartphones is in Nederland al ruim 60%. Voor het grootste deel draaien deze op Android (ook ruim 60%). De rest wordt verdeeld tussen iOS, Windows Phone en andere platforms. En als u ook nog weet dat zo goed als iedereen die een smartphone heeft daar meerdere apps voor download, beginnen uw vingers natuurlijk te jeuken. Uw app moet daar ook bij! Maar waar moet u beginnen? Elders in deze PC-Active vindt u een artikel over de Corona SDK en bijvoorbeeld in PC-Active 266 las u meer over het maken van een Android app met Java en Eclipse.

In dit artikel bespreken we een ander alternatief. Want ook met webdesigntechnieken als HTML, CSS en JavaScript kunt u in combinatie met de tool PhoneGap eigen apps maken. Deze kunt u verspreiden onder vrienden en bekenden, of – als u een developer account afsluit bij Apple of Google – in de diverse app stores publiceren. Een developer account kost geld, maar het begin is gratis. Het enige dat u nodig hebt is een editor (Kladblok is al voldoende), enige voorkennis van HTML, CSS en JavaScript en een account bij Adobe. Het is het handigst als u een Android-telefoon bij de hand hebt, want hierop kunt u zonder beperkingen apps toevoegen. Voor iPhones en iPads is dat een stuk ingewikkelder door de beperkingen die Apple oplegt.

PhoneGap of Cordova?

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

PhoneGap en andere diensten

PhoneGap is niet de enige dienst die webcode kan omzetten naar apps. Andere bekende namen zijn bijvoorbeeld AppMobi (onlangs overgenomen door Intel) en Sencha Touch. PhoneGap kunt u op twee manieren gebruiken.

  • Ten eerste kunt u PhoneGap downloaden (het is immers open source) en per platform zelf de juiste versie installeren. Zo compileert u apps op uw eigen pc of Mac. Hiermee hebt u de volledige controle over elk platform, maar het kost wel tijd en moeite om dit goed te doorgronden.
  • De andere manier is de cloudgebaseerde service gebruiken. U maakt de app, test hem in de browser en als u tevreden bent upload u een zipbestand naar PhoneGap Build. Dan wordt uw code op de servers van Adobe naar een app omgezet. Na enkele ogenblikken (meestal binnen één a twee minuten) kunt u een kant-en-klare app downloaden. Dit is de route die we in dit artikel bewandelen.

PhoneGap-workflow

Hybride apps

Het soort app dat PhoneGap maakt staat ook wel bekend onder de noemer hybride apps. Een gemeenschappelijk kenmerk van elk mobiel platform is namelijk dat ze het mogelijk maken binnen een app een mini-browservenster te openen. Hier maakt PhoneGap handig gebruik van door per platform een lege kapstok-app te maken en hierin direct het browservenster te openen. Binnen deze browser draait vervolgens uw (HTML-, CSS- en JavaScript-)code. PhoneGap zorgt voor de koppeling van uw code met de native bibliotheken van het besturingssysteem. Op die manier kunt u in uw app ook gebruik maken van systeembronnen op het mobiele apparaat, zoals de camera, de GPS-sensor, de contactenlijst en meer. Alle beschikbare onderdelen worden uitgebreid en met codevoorbeelden beschreven in de PhoneGap API. Omdat u geen code schrijft die rechtstreeks het besturingssysteem aanspreekt (native code), maar de PhoneGap-omweg neemt, spreken we van hybride apps.

Code structureren en schrijven

Laten we van start gaan en PhoneGap Build verkennen via een eenvoudige app. De structuur van een PhoneGap-app ligt voor een deel vast.

  1. Maak eerst een map www, bijvoorbeeld op het bureaublad. Dit is het startpunt.
  2. Open uw favoriete editor (Dreamweaver, Eclipse, Visual Studio of Kladblok) en maak het bestand index.html.
  3. Sla het op in de map www. Dit zijn de enige twee vereisten, het zijn de punten (hooks) die PhoneGap herkent en waaraan de rest van de app wordt gekoppeld. In de overige bestandsnamen, mappen en locaties voor scripts, afbeeldingen en meer bent u volkomen vrij.
  4. Neem de code over zoals in de afbeelding staat (of download de voorbeeldcode bij dit artikel).

Figuur 1 toont de code voor een minimale PhoneGap-app.

phonegap_01_correct

Het enige dat in deze HTML-pagina opvalt, is het attribuut onload=”onLoad();” in de tag <body> en de lege <div> met id=”divResult”.

Op regel 10 en op regel 13 staan de JavaScriptfuncties die worden uitgevoerd op het moment dat de pagina wordt geladen en het apparaat (device) gereed is. De standaardnaam hiervoor in PhoneGap is OnDeviceReady(). In deze functie wordt een tekst in divResult geplaatst en wordt een alert-venstertje getoond waarin is te zien dat PhoneGap goed werkt.

We doen op dit moment nog niets aan mooie opmaak of foutcontrole, iets wat u in een echte app uiteraard wel zult doen. Let er verder op dat op regel 8 een verwijzing naar <script src="phonegap.js"></script> staat. U hoeft dit bestand echter niet zelf te plaatsen. Het wordt door PhoneGap Build dynamisch ingevoegd.

Uploaden

Toegegeven, het stelt nog niet veel voor, maar we kunnen de code nu omzetten naar een app en testen. Maak een zip-bestand van de code die u tot nu toe hebt: index.html in de map \www. Ga dan naar https://build.phonegap.com/ en meldt u aan met een Adobe ID. Als u dit nog niet hebt, registreer dan een nieuwe account.

Figuur 2 - PhoneGap Build

  1. Als u bent ingelogd bij PhoneGap Build, klik dan rechtsboven +new app.
  2. Kies Upload a zip file en blader naar het zipbestand dat u zojuist hebt gemaakt. Zodra het bestand is verzonden kunt u de gegevens invullen.
  3. Wij kiezen nu als naam Mijn demo-app en type een korte beschrijving. De overige opties mogen op dit moment uitgeschakeld blijven.
  4. Klikt tot slot op Ready to build. Dit proces is ook te zien in figuur 3.

Figuur 3 - PhoneGap app builden

Build en download

Uw code wordt nu bij PhoneGap Build omgezet naar een app. Dit kost hooguit enkele minuten. Er zijn vervolgens twee manieren om de app te downloaden en te installeren (figuur 4). De eerste manier is om onder de appnaam te klikken op de blauwe knop van het betreffende platform. U download dan een .apk-bestand voor Android, een .ipa-bestand voor iOS, een .xap-bestand voor Windows Phone, enzovoort. De app kunt u vervolgens naar uw telefoon kopiëren, ook weer volgens de regels van het betreffende platform. Voor Android betekent dit bijvoorbeeld dat u het bestand via USB kunt kopiëren en openen. Voor iOS zult u het bestand naar iTunes moeten slepen en dan uw iPhone synchroniseren, want dit is nu eenmaal de wijze waarop Apple werkt. Maar de tweede manier is waarschijnlijk veel eenvoudiger: scan de QR-code die PhoneGap toont, en de app wordt automatisch gedownload.

Figuur 4 - PhoneGap app downloaden

Geen app voor iOS?

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

Installeren

We gaan er zoals gezegd van uit dat u de demo-app installeert op een Android-telefoon. Stel eerst in dat ook apps uit andere bronnen dan de Google Play Store mogen worden geïnstalleerd. Dit gaat via Instellingen, Toepassingen, Onbekende bronnen (figuur 5). Daarna kunt u uw QR-scanner richten op de QR-code op het scherm en de applicatie downloaden en installeren. Bij het installeren worden de benodigde machtigingen voor de app getoond, zie figuur 6. Deze kunt u eventueel zelf nauwkeurig instellen via een optioneel config.xml-bestand. Meer hierover leest u in de documentatie van PhoneGap Build. Klik op Installeren en daarna op Openen om de app te starten.

Stel op uw telefoon in dat toepassingen uit andere bronnen geïnstalleerd mogen worden.

Figuur 5 - Android telefoon instellen

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

Figuur 6 - Machtigingen voor Android app

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

Figuur 7 - Eenvoudige PhoneGap app op telefoon

Google Maps integreren

Nu u weet dat de basisapp goed werkt, kunt u de code naar believen uitbreiden. Als voorbeeld voegen we een kaart toe die werkt met Google Maps.

  1. In index.html plaatsen we een koppeling <a href="maps.html">Toon kaart</a> . Deze verwijst naar een nieuwe pagina maps.html.
  2. Een voorbeeld van de code staat in figuur 8.
  3. In de commentaarregels wordt uitgelegd hoe de code werkt. Belangrijk is uiteraard dat de juiste bibliotheken voor jQuery en Google Maps worden ingevoegd.
  4. U kunt nu het zipbestand bijwerken en daarna in PhoneGap Build de knop Update code gebruiken. Er wordt een nieuwe versie van de app gemaakt die u weer kunt downloaden en testen.

Figuur 8 - Voorbeeldcode van Google Maps met PhoneGap

Finetuning van de app

Klik in het hoofdscherm van PhoneGap Build op de naam van uw app om een venster met detailgegevens te openen. Hier kunt u op verschillende tabbladen bijvoorbeeld het versienummer en de naam van uw app aanpassen, eigen pictogrammen uploaden en meer. Dit is ook de plek waar u uw app kunt verwijderen als u helemaal opnieuw wilt beginnen.

Geschikte typen PhoneGap-apps

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

Conclusie

Met de online dienst PhoneGap Build maakt u in een handomdraai apps voor tal van mobiele platformen op basis van de webtechnieken HTML, CSS en JavaScript. De apps kunt u makkelijk downloaden en op een telefoon installeren. Bekijk bij PhoneGap Build vooral de optie Docs in het hoofdmenu om meer te leren over de manier waarop u apps via PhoneGap Build kunt finetunen. Het daadwerkelijk publiceren van (vooral Apple) apps in de app store heeft wat meer voeten in de aarde, maar hiervoor vind u bij Apple, Google en Microsoft veel aanvullende informatie.

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

-- Peter Kassenaar
16-mei-2013

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

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.

04oktober

Binnenkort: Modern Redesign – 2e editie

redesign_cover

Een eeuwigheid geleden, in 2004, heb ik het boek Modern Redesign – met XHTML, CSS en XML geschreven. Op de oude site kun je nog de detailpagina van dit boek vinden. Het boek was gericht op de factoren die destijds bij modern web(re)design hoorden: het omzetten van een op HTML-tabellen gebaseerd ontwerp naar een CSS-gebaseerd ontwerp. Ook het vormgeven van elementen als formulieren, forums en blogs kwam aan de orde.

Inmiddels zijn we bijna zeven jaar verder en is er op webgebied enorm veel gebeurd. Het doet mij dan ook deugd te kunnen melden dat in het voorjaar van 2011 de opvolger van dit boek zal verschijnen: Modern Redesign – tweede herziene editie (titel nog onder voorbehoud).

Het boek zelf zal (haha) een compleet redesign ondergaan; ik verwacht dat 70%-80% van de inhoud vernieuwd zal worden ten opzichte van de eerste editie. Want de uitdaging waar de hedendaagse webdesigner voor staat is een heel andere dan destijds. Tegenwoordig moet de site voorbereid zijn op de komst van HTML5, maar wel zonder oudere browsers in de kou te laten staan, liefst zonder aanpassingen draaien op een veelheid aan platforms (Windows, Mac, iPad, iPhone, Android), en verwachten bezoekers veel meer van de interactieve mogelijkheden van een site.

Modern Redesign - tweede herziene editie komt hieraan tegemoet. Het wordt een boek voor alle webdesigners die nieuwe sites direct geschikt willen maken voor HTML 5, of oudere sites willen gaan opwaarderen naar de nieuwste standaarden. Uiteraard zal ik werken met veel praktijkvoorbeelden en tref je allerlei cases aan van redesignprojecten waarin (delen van) de HTML5-standaard verwerkt worden.

Beknopte inhoudsopgave

De inhoud staat op dit moment – aan de start van het schrijfproces - nog niet in steen gebeiteld, maar begint al wel vorm te krijgen. En: je kunt meepraten! Zie hiervoor de aanwijzingen aan het einde van dit artikel. Onder meer de volgende onderwerpen zullen aan de orde komen.

  • Waarom Redesign? – een inleiding in de standaarden HTML, CSS en het DOM/JavaScript en de ontstaansgeschiedenis van HTML5.
  • Consequent structureren – De HTML5-tijdlijn, wat is HTML5 (en wat is het niet?), de erfenis van XHTML, de juiste notatie van tags en attributen in diverse typen HTML-pagina’s.
  • Redesign - van HTML4 naar HTML5 – De verschillen in DOCTYPE’s, nieuwe structuurtags voor HTML5, nieuwe tags voor inhoud in HTML5, verouderde HTML4-elementen en –attributen.
  • Nieuwe documenten structureren – Top-level elementen structureren, inhoudselementen maken, headers maken, de document outline, ontwerpen voor verschillende browsers.
  • De presentatie verzorgen met CSS3 – herhaling van basiskenmerken CSSS, nieuwe selectors in CSS3, graceful degredation.
  • CSS3 en HTML5 in combinatie – verbeterde typografische mogelijkheden, CSS3-transitions, tools om problemen te omzeilen.
  • Redesign – webformulieren van HTML4 naar HTML5 – nieuwe invoertypen, autofocus, placeholder teksten, formuliervalidatie, invoer van getallen, datums en cijfers.
  • Redesign – nieuwe HTML5 API’s gebruiken – het element <canvas>, de elementen <audio> en <video>, de API drag-and-drop, API voor offline storage, Gerelateerde API’s.
  • Interactie met JavaScript – ECMAScript en het DOM, kant-en-klare JavaScript bibliotheken, jQuery, menu’s, tabs en tooltips, Ajax-toepassingen met JavaScript en XHR.
  • Redesign van overige elementen – een website zonder plug-ins, diashow’s en caroussels, geanimeerde menu’s, overige interactieve elementen.

Meedenken? Graag!

Het schrijfwerk van dit boek zal volgens planning tot medio januari 2011 duren. Mis je in bovenstaande opsomming onderdelen? Wil je sommige aspecten graag besproken zien of heb je misschien zelf een bijdrage die (uiteraard met naam/bronvermelding) in het boek aan de orde zou kunnen komen? Aarzel dan niet om dat in een commentaar bij dit bericht te laten weten. Je kunt ook 1:1 contact opnemen via het Contactformulier.

Ik ben benieuwd naar jullie input.

Peter Kassenaar
-- 4 oktober 2010

29juni

Handboek (X)HTML, CSS en JavaScript

Vandaag is het Handboek (X)HTML, CSS en JavaScript verschenen. In dit handboek leert u vanaf het nulpunt hoe een website wordt opgezet en welke technieken daarbij worden gebruikt. U leert hierbij zelf de codes schrijven voor webpagina. Het boek gaat hierbij niet uit van een visuele editor, zoals Adobe Dreamweaver of Microsoft Visual Studio. In plaats daarvan gaat u zelf met de code aan de slag, zodat u maximale grip hebt op het eindresultaat. U weet na afloop van dit boek precies wat nodig is om een moderne website te ontwerpen en kunt websites van anderen doorzien.

In de inleidende hoofdstukken worden de drie technieken kort voorgesteld. In de overige hoofdstukken worden de technieken altijd geïntegreerd toegepast. Het boek werkt hierbij case/oplossingsgericht. In het hoofdstuk over formulieren wordt bijvoorbeeld de HTML-code besproken om het formulier in te stellen, maar direct ook de CSS-code om het formulier op te maken en JavaScript-code om formuliervelden te valideren.

Specificaties

  • Boek, paperback, 480 pagina's.
  • Geschikt voor Windows en Macintosh
  • Geschikt voor opleidingen en zelfstudie.
  • ISBN-13: 978-90-5940-414-4 (9789059404144)
  • Prijs: EUR 29,90
  • Voorbeeldhoofdstuk beschikbaar op Yindo

Van de flapekst:

"(X)HTML, CSS en JavaScript vormen de drijvende kracht achter de hedendaagse website. Niet alleen kennis van deze onderdelen, maar ook van de onderlinge interactie is van cruciaal belang om een gelikte, gebruiksvriendelijke en moderne website te ontwikkelen. In het Handboek (X)HTML, CSS & JavaScript laat internetexpert Peter Kassenaar u zien hoe u gebruikmaakt van genoemde technieken, maar vooral ook hoe u ze optimaal laat samenwerken. Het resultaat is een website die zich aan de huidige webstandaarden conformeert en in alle gangbare browsers optimaal presteert."

Beknopte inhoudsopgave

Tot de behandelde onderwerpen behoren:

  • Beginnen met HTML
  • Kennismaken met CSS
  • JavaScript in een notendop
  • Koppelingen maken
  • Werken met HTML-lijsten
  • Verschillende mediatypen op de site gebruiken
  • Werken met HTML-tabellen
  • Pagina's opmaken met CSS-lagen
  • Werken met formulieren
  • Technieken met JavaScript
  • De site publiceren op het web

Oefenbestanden

In het boek staan tal van oefeningen om zelf met HTML, CSS en JavaScript aan de slag te gaan en direct uw eigen website op te zetten voor school, vereniging, onderneming of hobby. Het is typisch een boek om naast het toetsenbord te leggen en zelf mee oefenen.

HtmlCssJavaScriptOefenbestanden.zip (1,0 MB)

De oefenbestanden zijn te downloaden als één groot zip-bestand. Hierin staan de oefenbestanden gerangschikt in afzonderlijke zip-bestandjes per hoofdstuk.

Hebt u het boek gelezen en hebt u er opmerkingen over ter verbetering van een eventuele volgende druk? Of wilt u andere lezers laten delen in uw ervaringen? Laat dan een bericht achter onder dit artikel.

Bestellen

Peter Kassenaar
-- 29 juni 2009

 

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

20maart

Fireworks of Photoshop?

Toevallig ontving ik de afgelopen week drie e-mailberichten van verschillende personen met min of meer dezelfde strekking. Ze stelden allemaal de vraag die ongeveer op het volgende neerkwam:

"Ik moet een keuze maken tussen Fireworks CS3 en Photoshop CS3.
Welke kunt u aanraden. Het gaat om webdesign."

En in twee van de drie gevallen werd daarbij aangegeven dat ook samengewerkt moest kunnen worden met Dreamweaver en Flash. Nu is dat laatste bij geen enkele van de Adobe-toepassingen nog een knelpunt. Alle voormalige Macromedia-producten beschikken inmiddels over uitstekende Photoshop-importfilters. In Flash en Fireworks blijven ook laageffecten, kleuren, transparanties, verlopen en filters intact.

Overwegingen

In alle gevallen heb ik ongeveer het volgende antwoord gegeven. Dit is lang niet een uitputtend overzicht van de kenmerken en/of verschillen tussen Fireworks en Photoshop, maar het geeft wel enkele aanknopingspunten waarmee je rekening kunt houden als je zelf ook deze keuze moet maken.

  • Wat moet je ontwerpen? - Maak je vooral (statische) afbeeldingen, foto's en artwork voor websites, dan kun je het beste Photoshop kiezen. Dit programma staat daarin op eenzame hoogte.
  • Webelementen? - Maak je vooral websiteontwerpen, grafische layouts, knoppen en menu's en dergelijke? Oftewel, bestaat jouw taak uit het ontwerpen van interactieve elementen voor websites, kies dan Fireworks. Hierin in Fireworks CS3 echt heel sterk, terwijl de basisbewerkingsmogelijkheden voor foto's bijna niet onderdoen voor Photoshop.
  • Waar heb je al ervaring mee? - Als je al gewend bent te werken met vectortekenpakketten zoals bijvoorbeeld CorelDraw of Illustrator, dan zal Fireworks je waarschijnlijk beter passen. Er zijn erg makkelijk en goede vectortekengereedschappen voor beschikbaar.
    Als je evenwel veel gewend bent te werken met fotobewerkingsprogrammatuur (pixelbewerking), dan ligt Photoshop meer voor de hand.
  • In welke taal wil je werken?  - Als je niet erg bekend bent met de Engelstalige termen voor beeldbewerking, dan ligt het gebruik van Photohop meer voor de hand. Dit programma is vertaald in het Nederlands en er zijn vele Nederlandstalige Photoshop-websites en magazines. Fireworks is uitsluitend in het Engels verkrijgbaar. En zal ook niet worden vertaald, volgens mijn contacten bij Adobe.

Er zijn nog tal van andere overwegingen, maar dit zijn de belangrijkste naar mijn idee. Op de productpagina's van de beide programma's bij Adobe kun je eenvoudig pdf-productsheets vinden waarin alles op een rijtje staat.

Fireworks tutorials

En alsof het toeval een handje wilde helpen bij het schrijven van dit blogbericht, zag ik vanochtend dat op de site van Smashing Magazine (tip!) een complete pagina was verschrenen met Fireworks Tutorials en downloads. Uiteraard allemaal Engelstalig.

Adobe Fireworks Tutorials and Downloads - Best of

Smashing Magazine

Als je meer Nederlandstalige informatie over Fireworks CS3 zoekt, dan kun je -beperkt- terecht op de site van Adobe, of lees Het Complete Boek Adobe Creative Suite 3 Web Edition. Hierin is een compleet deel gewijd aan het werken met Fireworks CS3.

 

Peter Kassenaar
-- 19 maart 2008