HTML 5 App. Herman van Dompseler in opdracht van SURFnet. 20 december 2012 Versie 0.91
|
|
|
- Henriette Abbink
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Herman van Dompseler in opdracht van SURFnet 20 december 2012 Versie 0.91
2 Contents Inleiding... 4 Wat is HTML Wat is er mogelijk met HTML 5?... 5 HTML 5 handige links... 8 Part 1: HTML 5 Apps... 9 Typen Apps... 9 Native apps Webapps Hybride apps Een kijkje in de toekomst Welk type App gebruiken? Beslisboom Scenario s Typen Apps handige links Part 2: Hybride apps uitgewerkt Native app architectuur Hybride app architectuur Stand-alone hybride app Connected hybride app Werken met Phonegap Audio voorbeeld Part 3: Een hybride app bouwen Stap 1: Hello World! De ontwikkelomgeving opzetten Stap 2: Run en test de App Kopieer de App naar een apparaat Stap 3: Welke Android versie? Stap 4. Directory structuur Stap 5. Icoon & start-up scherm Stap 6. Schermgrootte & Responsive design Schermtype definitie Images en text grootte Stap 7: Events & Touch GUI Volgorde
3 Meer over gebruiker events Stap 8: Off You Go!
4 Inleiding HTML 5 is een technologie die nog volop in beweging is en toepasbaar is binnen nieuwe toepassingsgebieden voor onderzoek en onderwijs. Dit rapport is een technologie verkenning naar de mogelijkheden van HTML 5 bij het maken van Apps voor mobiele apparaten. Het rapport geeft de volgende inzichten: Overzicht van de mogelijkheden van native apps, webapps en hybride apps en de overwegingen om voor een bepaalde soort App te kiezen. Verdieping in HTML 5 hybride apps met onder andere een aansluiting op bestaande webarchitectuur en middleware. Maar ook uitleg bij het bouwen van een HTML 5 App. Het rapport is geschikt voor (website) ontwikkelaars die meer willen leren over het maken van Apps of het transformeren van een bestaande website naar een webapp. Er is informatie over verschillende typen Apps, met de nadruk op Apps gebouwd met HTML 5. Bij dit rapport is ook een website gemaakt: Deze website is een samenvatting van het rapport, en is een webapp op zichzelf. De website is te gebruiken als HTML 5 referentie en bevat een voorbeeld hybride app. Dit rapport bestaat uit 4 delen. 1. Allereerst een inleiding op HTML 5 2. Vervolgens een overzicht van type Apps en HTML 5 Apps 3. Daarna een verdieping en uitleg over hybride apps 4. Afsluitend een stap voor stap handleiding voor het zelf bouwen van een hybride app Wat is HTML 5 HTML 5 is de nieuwe standaard voor het presenteren van webpagina s. HTML 5 is niet één grote nieuwe functionaliteit, maar een collectie van nieuwe standaarden en functionaliteiten op drie deelgebieden: 1. HTML 5 2. Javascript (JS) 3. CSS3 Nieuw staat tussen aanhalingstekens omdat sommige HTML 5 elementen al enige tijd te gebruiken zijn en andere elementen nog in ontwikkeling zijn. HTML 5 is daarom het best te omschrijven als een continue verbetering van de taal en tools voor het maken van web applicaties. Met de nadruk op applicaties ipv. statische pagina s. In de combinatie van HTML 5, Javascript en CSS3 zijn het de HTML <tags> die de declaratie van de elementen vormen. Met Javascript en CSS3 worden deze elementen dynamisch gemaakt. Bij programma s in Javascript ligt de focus op het procedureel aanpassen van de elementen. Met CSS3 worden de elementen vorm gegeven en ligt de focus op de positionering en transities van elementen. 4
5 HTML 5 is al te gebruiken. Of de specificatie nu af is of niet, alle browsers en apparaten ondersteunen een subset van de mogelijkheden. Veelal wordt HTML 5 ingezet om dynamische toepassingen te maken, die voorheen met een andere technologie, zoals flash, werden gemaakt. Een webpagina die begint met <!doctype html> is een HTML 5 pagina. Vervolgens is het belangrijk te onderzoeken of de functionaliteit die nagestreefd wordt, beschikbaar is voor het platform waarop het getoond wordt. In één van de vele desktop browsers of op een mobiel platform, zoals een Android of ios apparaat. Op staat een overzicht van de functionaliteiten voor de verschillende platformen. Wat is er mogelijk met HTML 5? In een drietal onderzoeken heeft SURFnet de afgelopen jaren diverse aspecten van HTML 5 belicht. Eind 2010 heeft een theoretisch onderzoek naar de HTML 5 <video> tag laten zien wat er mogelijk is op video gebied met HTML 5. Een demo pagina toont de implementatie. Een van de vragen een uitkomsten van het onderzoek was: Is het gebruik van op HTML 5 gebaseerde video nuttig voor de videodiensten van SURFnet, van Kennisnet en van de Nederlandse onderwijsinstellingen? Zoals in dit rapport naar voren is gekomen, biedt HTML 5 Video vele nieuwe mogelijkheden, met name op het gebied van integratie van de video met de rest van de webpagina. Bovendien zijn voor het afspelen van HTML 5 Video geen losse plugins meer nodig. Deze twee zaken maken dat HTML 5 Video zeer nuttig kan worden voor gebruik in de videodiensten van SURFnet, van Kennisnet en van de Nederlandse onderwijsinstellingen. Een nadeel van HTML 5 Video is echter dat er op dit moment geen enkel formaat is dat in alle browsers kan worden afgespeeld, en er dus altijd 5
6 minimaal twee versies van elke video zullen moeten worden aangeboden. De verwachting is dat op de langere termijn HTML 5 Video de standaardmanier zal worden waarmee video in webpagina s worden opgenomen. Dit zal echter nog wel enige jaren duren. Voor meer informatie over HTML 5 video kan het betreffende rapport gedownload worden vanaf de website behorende bij dit rapport. Vervolgens is er begin 2011 onderzoek gedaan naar andere HTML 5 elementen, zoals nieuwe invoer typen voor formulieren en lokale opslag van data. Van verschillende HTML 5 elementen is een proefimplementatie gedaan om de resultaten te tonen. Bekijk hier bijvoorbeeld het element <input type= date >. De Opera browser toont dan een datum prikker, daarvoor is geen code meer aan te pas gekomen. Een ander voorbeeld is de videowall, geschikt voor verschillende apparaten: desktop, tablet en mobiel, met dynamische elementen erin, zoals het inschuiven van metadata. Met deze videowall, kunnen 9 video s parallel afgespeeld worden. De metadata werd lokaal opgeslagen op het apparaat en is daardoor direct te raadplegen. 6
7 Eind 2011 is er een proof of concept gemaakt van een HTML 5 Video Annotatie Player. Daarmee is het mogelijk een HTML 5 video met meerdere mensen te annoteren, van commentaar te voorzien en met sociale media erover te praten. Daarnaast is deze video player gepresenteerd in een <canvas> element om de video speler een gaming karakter te geven. Met het <canvas> element is het bijvoorbeeld mogelijk een video te bewerken en andere elemenen in een overlay op de video te zetten. Daarnaast is er gekeken naar ondertiteling met WebVTT. 7
8 Al deze onderzoeken waren theoretisch en technisch georiënteerd, met proof of concept implementaties. Ze tonen aan dat alles wat denkbaar is, eigenlijk ook met HTML 5 te maken is. HTML 5 handige links Voor meer informatie over HTML 5 zijn de volgende bronnen te raadplegen. HTML specificatie van W3C CSS beschrijving van W3C Over HTML 5 Over Javascript Over CSS 3 Voorbeelden (voor welk platform?) (oh, kan dat ook!) (en dit ook) (wow) 8
9 Part 1: HTML 5 Apps HTML 5 is een webtechnologie waarmee informatie toegankelijk wordt gemaakt via webbrowsers, tot voorkort voornamelijk toegepast op desktop en laptop computers met een scherm, toetsenbord en muis. Maar dit verandert. Het internet breidt zich uit naar andere apparaten, zoals smartphones, tablets, maar denk ook aan auto s, koelkasten en anderen apparaten die aan internet verbonden worden. Gezamenlijk met deze uitbreiding van apparaten die met internet verbonden worden, zal ook HTML 5 verder ontwikkeld worden en een interface aanbieden aan de gebruiker van deze apparaten. De eerste logische stap is een HTML 5 interface voor smartphones en tablets. Oftewel, apparaten met aanraakschermen die (bijna) altijd verbonden zijn met internet. Toepassingen voor deze apparaten, Apps genoemd, bieden vaak uitgebreidere functionaliteit dan met webbrowsers te realiseren is. Denk bijvoorbeeld aan locatie gebaseerde gegevens of een kompas. Maar ook toegang tot de adressenlijst van het apparaat of opname van foto s, video en geluid is anders dan bij webbrowsers. Een uitgebreider overzicht van deze extra functionaliteiten komt later in dit rapport nog ter sprake. Daarvoor is het eerst noodzakelijk te begrijpen wat voor typen Apps er te onderscheiden zijn. Typen Apps Een website die geoptimaliseerd is voor gebruik op een smartphone of tablet wordt een webapp genoemd. Dit is een website die opgevraagd wordt met de browser van het apparaat. De site reageert op het touchscreen en kan interactie hebben met bijvoorbeeld de GPS positie van het apparaat. Voor een webapp is het typisch om naar een URL te browsen. Webapps zijn het tegenovergestelde van native apps. Native apps zijn voor een specifiek apparaat gemaakte toepassingen, al dan niet verbonden met het Internet. Native apps zijn programma s die zonder webbrowser werken, maar juist rechtstreeks op het apparaat zijn geïnstalleerd. Een native app wordt typisch uit de App store gedownload, waarna deze gebruikt kan worden. Tussen deze twee uiterste in zitten de hybride apps. Hybride apps zijn direct op het appraat geïnstalleerde applicaties (zoals native apps), die gebruik maken van een geïntegreerde browser (zoals webapps). Er zijn dus drie typen Apps te onderscheiden: 1. Native apps, specifiek voor een apparaat gemaakte toepassing, met specifieke voor het apparaat geschreven code in Xcode voor ios of java voor Android bijvoorbeeld. 2. Hybride apps, voor een apparaat gemaakte toepassing met generieke code in HTML 5 3. Webapps, een website die geoptimaliseerd is voor mobiele platformen En wat is dan een HTML 5 App? Dat is een App die met HTML 5 technologie is gemaakt en dat kan zowel een webapp als een hybride app opleveren. 9
10 Het verschil tussen native apps en webapps levert een strijd tussen twee filosofieën. Met aan beide kanten voor- en tegenstanders. Dit wordt goed geïllustreerd in deze video: Hierin komen duidelijk de verschillen naar voren tussen het gebruik van native apps en webapps. In de volgende hoofdstukken worden de drie typen Apps afzonderlijk beschreven om deze verschillen weer te geven. Native apps De voordelen van native apps: Direct toegang tot alle apparaat hardware + direct interactie met het apparaat, zoals notificaties via het platform aan de gebruiker + integratie met andere Apps o Webapps daarentegen hebben beperkter toegang tot het apparaat Het verschil in deze toegang zit in het verschil wat de gebruikte software biedt. De ios SDK van Apple en de Android SDK van Google bieden zoveel mogelijk toegang tot het apparaat. Het valt buiten de scope van dit document om al deze functionaliteit te benoemen. Een webapp is afhankelijk van welke toegang de browser heeft tot het apparaat. De browser heeft minder functionaliteit om van een onderliggend apparaat gebruik te maken. Welke elementen wel gebruikt kunnen worden, dat is heel dynamisch en staat beschreven in de HTML 5 referentie van de website behorende bij dit document. Runs faster, wat voornamelijk geldt voor grafisch intensieve applicaties Native apps kunnen de look & feel van het mobile OS gebruiken, dat levert een smooth user experience. o Webapps kunnen dit native app gevoel nabootsen, maar niet evenaren. Dit kan door een webapp direct te starten vanaf het apparaat, waardoor de browser van de App onzichtbaar wordt, maar nog wel steeds wordt gebruikt. Dit is een actie die de gebruiker moet uitvoeren en dat kan niet door de webapp geforceerd worden. Bijkomend voordeel, de App store: Apps kunnen worden geplaatst in App stores en zijn daardoor makkelijk toegankelijk en kunnen makkelijk op het apparaat geplaatst worden. o Web Apps worden via websites gedistribueerd Met Apps in App stores is ook geld te verdienen, via de App store kan een bedrag voor het downloaden van de App worden gevraagd, waarvan 70% voor de App ontwikkelaar is. Dat percentage is vrijwel hetzelfde in alle App stores. Webapps De voordelen van webapps: Write once, run many, een generiek HTML 5 platform voor meerdere apparaten o Native apps moeten voor iedere platform opnieuw gebouwd worden Bijkomend voordeel, content beheer: 10
11 De content wordt van internet gehaald, er is dus één content store, die ook voor andere doeleinden, zoals een website, gebruikt kan worden. Content is daardoor makkelijk te beheren/wijzigen o bij native apps moet een nieuwe App worden geplaatst in de App store bij iedere update. Er wordt gezegd dat dit een tijdrovend en niet een triviaal proces is, vanwege oa. keuringen door App store eigenaren. Daarnaast zijn er uiteraard ook overeenkomsten tussen native apps en webapps, met beiden technologieën is ongeveer dezelfde applicatie ervaring te bereiken: De Apps zijn op beiden manieren met verschillende aanraak methoden te bedienen Beide typen Apps zijn online en offline te gebruiken, nadat ze eenmalig vanaf het internet/uit de App store opgehaald zijn. Hybride apps Even samenvattend: native apps zijn voor één specifiek apparaat gemaakte toepassingen. Een webapp is een website, voor verschillende apparaten toegankelijk gemaakt. Een hybride app is de combinatie: een native app met HTML geintegreerd. De HTML 5, CSS3 en Javascript kan in de App opgeslagen worden (zoals bij een native app) of van het web worden gedownload. Een hybride app geeft de flexibiliteit van een Web App en de user experience van een native app. Voordelen ten opzichte van een native app: Deze wordt eenmalig geprogrammeerd, in HTML 5 Voordelen ten opzichte van webapps: Gebruik een framework (zoals Phonegap), die de directe toegang tot het apparaat omzet in webservices die met HTML 5 zijn te raadplegen. Hierdoor zijn meer apparaat afhankelijk functionaliteiten te gebruiken. Kunnen in App stores worden geplaatst en kan dus ook voor betaald worden. Een hybride app maakt gebruik van een tussenliggend platform wat de functionaliteit van het apparaat doorgeeft aan de App. De functionaliteiten die in een hybride app toegankelijk zijn, worden beschreven in de verdieping in het volgende hoofdstuk. Een kijkje in de toekomst Webapps zullen waarschijnlijk meer op native apps gaan lijken. De volgende ontwikkelingen zijn nu gaande: WebGL voor het versnellen van 3D grafische mogelijkheden in de browser Webapp stores, om ook met webapps geld te kunnen verdienen en ze makkelijk te kunnen vinden/installeren. o Open App Market is een webapp store: o Google heeft een eigen Webstore, o Mozilla werkt aan een webapp store, 11
12 Er zullen steeds meer toegangsmogelijkheden komen voor webapps om van apparaat specifieke toepassingen gebruik te maken. GPS is er bijvoorbeeld al. Meer zal er volgen. Het steeds verder ontwikkelen van HTML 5 voor webapps en het toegankelijk maken van meer functionaliteiten in de browser heeft ook gevolgen voor het maken van hybride apps en speciaal voor het gebruik van een platform zoals Phonegap. De naam zegt het al, dit platform overbrugt de gap tussen het apparaat en het gebruik ervan in de browser. Als de browser zelf toegang tot het apparaat gaat leveren, zal een tussenliggend platform minder noodzakelijk worden. Merk op dat Phonegap niet alleen deze brug verzorgt, maar ook ervoor zorgt dat een HTML 5 App als App in een App store kan worden geplaatst. Voor deze laatste functionaliteit is Phonegap dan nog steeds nodig, tenzij genoegen wordt genomen met het plaatsen van de App in een webapp store. Welk type App gebruiken? Een afweging kan gemaakt worden op basis van de genoemde verschillen tussen de type Apps: native, hybride of web. Onderstaande vergelijking kan daarbij helpen. Hier worden de Apps vergeleken op: Device Access: de toegang tot de verschillende functionaliteiten van het apparaat. o Webapps hebben duidelijk minder toegang tot functionaliteiten ten opzichte van de andere twee typen, vanwege het gebruik in een browser. Speed: de snelheid waarmee de App moet werken en reageren. o Native apps werken het snelst omdat ze geprogrammeerd zijn met de SDK van het specifieke apparaat en er geen platform/browser tussen zit zoals, bij hybride apps of webapps. Development cost: de prijs voor het ontwikkelen van de App. o De ontwikkeling van native apps zal in veel gevallen het intensiefst zijn, omdat voor iedere apparaat specifieke expertise nodig is. App store (en het Approval Proces): heeft de App een plekje in de App store nodig? o Webapps zijn niet in een App store te plaatsen Taken from: 12
13 Het zal echter niet voldoende zijn om op deze manier naar App ontwikkeling te kijken. Wat in ieder geval ook meegenomen moet worden is: Het soort App. o Ontsluit de toepassing veel content of is er juist veel interactie in de vorm van gaming. Welke uitstraling heeft de App. o Moet de App naadloos aansluiten bij het apparaat of juist aansluiten bij de eigen huisstijl/website. Waar zitten de gebruikers. o Er kan bijvoorbeeld specifiek ontwikkelt worden voor iphone/ipad gebruikers. Met welke technologie zijn de eigen ontwikkelaars bekend. o Wat bijvoorbeeld HTML 5 betreft kan dit aansluiten bij de ontwikkeling van websites die vaak al gaande is. Het is min of meer bekende technologie. Beslisboom Onderstaande flowchart helpt bij het maken van een keuze. Er zijn drie gezichtspunten. Bekijk het ontwikkelen van de App: 1. Vanuit de wens om een App te maken. 2. Vanuit de gebruikers van de App. 3. Vanuit de ontwikkelaar van de App. De kosten voor het ontwikkelen van de App zijn niet in deze beslisboom meegenomen. Het is duidelijk dat een aangepaste website die gebruikt wordt als webapp de minste kosten met zich mee brengt. Voor het ontwikkelen van apparaat specifieke Apps, zijn de kosten hoger. Maar bovenal zijn de kosten van een App erg afhankelijk van het ontwerp en daar kan in deze beslisboom geen rekening mee gehouden worden. Van deze beslisboom is op de bijbehorende website van dit rapport een App gemaakt, waarmee de boom doorlopen kan worden. Klik hiervoor op de link: App Technology Chooser. 13
14 14
15 Scenario s Er zijn verschillende scenario s denkbaar waarvoor een App ingezet kan worden. Hier volgen er een aantal. 1. Je wilt een high speed game ontwikkelen, en geen concessies wat betreft snelheid en grafische kwaliteit doen. De flowchart brengt je bij: native app. 2. Je wilt een toepassing ontwikkelen waarbij je toegang nodig hebt tot de camera van het apparaat. De flowchart brengt je bij: hybride app. (native is ook een optie) 3. Je wilt online content aanbieden en hebt een mooie vormgeving ontwikkelt. Je hebt niet specifieke apparaat toegang nodig. Je wilt wel dat mensen voor gebruik van je App betalen De flowchart brengt je bij: hybride app. 4. Je hebt online content aan te bieden, wat je deels ook gebruikt op je site. Voor de App heb je een nieuw design gemaakt, geschikt voor het formaat van het apparaat. Je wilt dit net als je website gratis aanbieden De flowchart brengt je bij: webapp. 5. Je wilt dat je website ook op een smartphone of tablet is te bekijken met de browser van het apparaat. De flowchart brengt je bij: webapp. Typen Apps handige links Voor meer informatie over typen Apps zijn de volgende bronnen te raadplegen. Video met duidelijke standpunten over native apps vs. webapps. Sites met vergelijkingen tussen typen Apps Een video met diepgaande uitleg over typen Apps 15
16 Part 2: Hybride apps uitgewerkt Dit hoofdstuk duikt in de wereld van hybride apps. Om de App in een breder kader te plaatsen wordt eerst de architectuur geschetst voor het ontwikkelen en beschikbaar stellen van een App. Daarin komen de belangrijkste libraries die nodig zijn aan bod. Ook volgt er een beknopte omschrijving van het ontwerp van een App en gebruik van (web)resources. Vervolgens wordt dieper ingegaan op het werken met de Phonegap library. Native app architectuur Voor het ontwikkelen van een native iphone of Android App worden de volgende stappen ondernomen. De programmeur schrijft zijn code in Objective C of Java. Hij maakt gebruik van een SDK als raamwerk voor zijn code. In het ontwikkel proces wordt een App gemaakt. (.app of.apk) De App wordt in een App store aangeboden van waaruit hij op een apparaat kan worden gedownload en geïnstalleerd. iphone en Android App ontwikkel methode 16
17 Hybride app architectuur Het uitwerken van een hybride architectuur vergt twee stappen. Allereerst dient er een oplossing gemaakt te worden om te kunnen programmeren in HTML 5. Deze stap wordt gemaakt in het volgende hoofdstuk waar een stand-alone hybride app wordt uitgelegd. Vervolgens wordt de architectuur verder uitgewerkt naar een connected architectuur. Het is erg waarschijnlijk dat een hybride app gebruik maakt van informatie die al beschikbaar is op een website. In de connected architectuur wordt een oplossing geschetst voor het bouwen van een hybride app waarbij gebruik gemaakt wordt van al bestaande content, zodat de App, website en andere informatie uitingen geïntegreerd worden. Stand-alone hybride app Om te kunnen programmeren in HTML 5, CSS3 en Javascript moet er een brug gevormd tussen deze code en de App SDK van het apparaat. Hiervoor zijn verschillende Libraries gemaakt. Libraries verzorgen de koppeling met het achterliggende apparaat, in dit document backend libraries genoemd. Of libraries leveren interface elementen, frontend libraries genoemd: 1. Backend Libraries: javascript libraries die toegang tot de SDK en functionaliteiten van het apparaat verzorgen. 2. Frontend Libraries: javascript libraries die het maken van de look & feel van de applicatie verzorgen. Backend libraries Backend libraries maken verschillende functionaliteiten van een apparaat toegankelijk voor javascript code. De library die in dit onderzoek verder wordt onderzocht is Phonegap. In Plaats van Phonegap wordt nu ook de naam Cordova gebruikt. Dit is de naam voor de core van het Phonegap systeem dat middels de Apache Software Foundation open source wordt aangeboden, terwijl Phonegap door Adobe is overgenomen. Een aantal backend libraries: Phonegap: Appmobi: Appcelerator (Titanium): Frontend libraries Van frontend libraries die het ontwikkelen van de App interface eenvoudiger maken zijn meerdere smaken, die varieren van heel uitvoerige libraries tot kleine, handige scripts. Bekende libraries zijn: Modernizr: voor het detecteren van HTML 5 ondersteuning door de browser. jquery, en jquerymobile: voor een algemeen javascript framework. jqtouch: en Zepto.js: alternatieve javascript raamwerken voor mobile devices. Sencha, biedt een compleet en uitgebreid raamwerk voor mobile development. 17
18 Dojo, focused op het maken van een native look & feel mobile App. Naast Phonegap als backend, wordt in dit onderzoek gebruik gemaakt van jquery Mobile als frontend library. Zie de architectuur voor de plaatsing van deze libraries: Hybride app ontwikkel methode 18
19 Connected hybride app In de stand-alone hybride app staat alle HTML 5, CSS3 en Javascript in de App zelf. Echter niet alle resources hoeven in de App te staan. Een App kan web resources voor content gebruiken, zoals een nieuws pagina. Net zoals een bestaande website de web resources gebruikt. Zie: Hybride app + Website ontwikkel methode 19
20 In deze architectuur zijn, ten opzichte van de stand-alone versie, twee stromen aan de APP stroom toegevoegd. Daarmee worden een API server en een Web server gerealiseerd. 1. De DATA stroom: vanuit de resources is een database opgebouwd die via eigen code en een favoriet raamwerk op Internet wordt ontsloten middels een API. Een API levert data in een XML en/of JSON formaat. 2. Een WEB stroom: vanuit HTML 5, CSS3 en Javascript wordt al dan niet met een (jquery) library een website gebouwd. De XML of JSON uit de API levert content aan deze website. Deze website is te bekijken met een browser op een apparaat. Merk op dat dit ook een smartphone of tablet kan zijn. In deze connected architectuur worden de belangrijkste overeenkomsten tussen ontwikkelen voor web sites en webapps duidelijk: Programmeer in HTML 5, CSS3 en Javascript (de grijze blokken) en maak daarbij gebruik van libraries. Daar is het in dit onderzoek natuurlijk allemaal om te doen. Put uit één bron van resources. Resources kunnen ofwel toegankelijk gemaakt worden via de App ofwel via de API, die op zijn beurt ook de website van content voorziet. App design & App resources Een goed interactie design van een App is van essentieel belang. Zomaar een website kopiëren is niet de optimale oplossing. Waar met name rekening mee moet worden gehouden is het formaat van het apparaat. Een scherm van een smartphone is het kleinst en een smartphone wordt vaak in portrait bediend. Een tablet scherm is groter en wordt weer vaker landscape gebruikt. Een smartphone kan op ieder moment van de dag op iedere lokatie gebruikt worden. Dat moet snel en effectief werken. Dat is een andere beleving dan wanneer de gebruiker met een tablet of laptop op schoot aan het browsen en lezen is. Ook qua visueel design vergt het bouwen van een App aandacht. Het is belangrijk te bepalen in hoeverre aangesloten moet worden bij het design van het apparaat waarop gekeken wordt. Design van een App is verder geen onderdeel van dit rapport. Google en Apple hebben beiden richtlijnen voor het ontwikkelen van een App, die erg interessant zijn om te lezen. Android: ios: ehig/introduction/introduction.html Een belangrijke vraag die nog wel beantwoord moet worden alvorens een Connected hybride app te gaan ontwikkelen is: Welke resource moet in de App en welke kan via de API opgehaald worden? Er zijn twee uitgangspunten: 20
21 1. De App moet een snelle response geven, dat zijn gebruikers ook van native apps gewend. 2. Er moet niet teveel data verkeer gegenereerd worden tussen App en API, dat bespaard de gebruiker netwerkkosten. Om aan deze uitgangspunten te kunnen voldoen is het zinvol zoveel mogelijk resources in de App beschikbaar te hebben en zo min mogelijk uit de API te halen. Toch kan het belangrijk zijn om content, wat toch al beschikbaar is op de website, via de API toegankelijk te maken, omdat: Content dan niet gedupliceerd hoeft te worden. Niet voor elke content wijzigingen een nieuwe App moet worden gemaakt. Content die uit de API opgehaald moet worden kan bovendien het beste in het JSON formaat worden beschreven, waarmee delen van een HTML pagina worden vervangen. De Javascript processing en de HTML rendering van de content vindt dan plaats op het apparaat zelf. Hierdoor wordt de netwerkbelasting zo klein mogelijk gehouden en wordt de response van de API zo snel mogelijk gemaakt. Werken met Phonegap Phonegap is een Javascript library, waarin functies zijn gedefinieerd die gebruikt kunnen worden om toegang te krijgen tot functionaliteiten van een apparaat. Of het apparaat nu een Android, iphone of ander apparaat is, de Javascript functies zijn hetzelfde. Dit is een overzicht van de elementen waar Phonegap toegang toe geeft: Events voor starten en pauzeren van de App, etc. Capture, voor het opslaan van geluid, foto s en videos met de bijbehorende tools van het apparaat. Camera, voor het maken van een foto met de camera tool van het apparaat. Dit was de voorloper van capture en wordt alleen nog gebruikt ter referentie. Media, voor het opslaan en afspelen van geluid, met oa. play en pause interface. Accelerometer, de bewegingssensor. o Geeft antwoord op de vraag: naar welke kant beweegt het apparaat? Compas, het kompas. o Geeft antwoord op de vraag: welke kant wijst het apparaat op? Geolocation, de GPS. o Geeft antwoord op de vraag: waar bevindt het apparaat zich? File, voor het maken van files en opslaan van gegevens op het apparaat. Storage, voor het maken van een Web SQL database voor het apparaat. Contacts, geeft toegang tot het adresboek van het apparaat. Notification, geeft toegang tot tekstuele notificaties, maar ook geluiden en vibraties etc. Device, geeft informatie over de hardware en software van het apparaat 21
22 Connection, geeft information over de netwerk status, wifi of 3G etc. De interface tot de functies van deze elementen staat op: Audio voorbeeld Voor sommige functies is het mogelijk meerdere oplossing te kiezen, neem bijvoorbeeld het afspelen van geluid. De HTML 5 oplossing voor afspelen van geluid is gebruik maken van de <audio> tag in de HTML pagina. Met javascript kan dan vervolgens de functie play() aangeroepen worden voor het afspelen van het fragment. De Phonegap oplossing voor het afspelen van geluid is gebruik maken van het media object en ook dit object heeft een play() methode. Voordeel van gebruik van de Phonegap oplossing is dat het hiermee ook mogelijk is om audio op te nemen, met de startrecord() methode. Met de HTML 5 oplossing is het alleen mogelijk af te spelen. 22
23 Part 3: Een hybride app bouwen Hieronder volgt een stap voor stap handleiding voor het bouwen van een hybride app met gebruik van Phonegap en de Android SDK. Met Phonegap is het mogelijk voor meerdere platformen te ontwikkelen. Voor ieder platform dient de bijbehorende SDK gedownload te worden en een aparte App te worden gemaakt. Het is aan te raden één platform te kiezen voor de ontwikkeling, bijvoorbeeld Android. Als deze versie naar wens werkt, dan kan vervolgens op elk ander platform, zoals ios, de ontwikkeling omgeving opgezet worden en de HTML 5 code worden gekopieerd. De HTML 5 code is op elk platform dan gelijk, maar de ontwikkel omgeving verschilt, zodat er verschillende Apps kunnen worden gemaakt. Stap 1: Hello World! De ontwikkelomgeving opzetten Hello World! Maak het eerste Phonegap project gebruikmakend van de handleiding op: Deze handleiding volgen komt neer op de volgende acties: Installeer ontwikkelomgeving Eclipse Download en configureer Android SDK Installeer Android Development Tools (ADT) plugin vanuit Eclipse Download Phonegap Opzetten van de development omgeving Stap 2: Run en test de App Om de App uit te voeren en te testen is eerder de ADT plugin geïnstalleerd. Het is belangrijk te begrijpen hoe deze plugin gebruikt kan worden om verschillende apparaten te simuleren. Hieronder staan twee apparaten voor tests. 23
24 1. Dit is een emulatie van een Sony Experia U, een smartphone met High density scherm, portrait georiënteerd. a. resolutie: 480x854 b. density: Dit is een emulatie van een yarvik gotab, een tablet met een low density scherm, landscape georiënteerd. a. resolutie: 1024x768 b. density: 120 Voor het testen van een applicatie wordt op Run geklikt en vervolgens kan één van deze virtual devices gekozen worden, waarop de applicatie uitgevoerd wordt. Kopieer de App naar een apparaat De App zal ook op een echt apparaat getest moeten worden, naast het testen op deze virtuele apparaten. Daarvoor hoeft de App niet meteen in een store geplaatst te worden, maar kan een zelf gemaakte.apk file op het apparaat geïnstalleerd worden. Daarom worden de volgende stappen ondernomen: Maak een eigen certificaat waarmee de App gesigneerd wordt. o maak met keytool een key + keystore Exporteer de App o right klik projectnaam -> android tools -> export signed application package Verplaats.apk bestand naar het apparaat 24
25 o Koppel met usb het apparaat en kopieer bestand Installeer de.apk op het apparaat. Het maken van het certificaat hoeft maar één keer gedaan te worden, Het certificaat kan hergebruikt worden om alle toekomstige Apps te signeren. Stap 3: Welke Android versie? Tijdens het opzetten van de ontwikkel omgeving is de keuze voor de Android versie al langs gekomen. Automatisch wordt voor de laatste versie gekozen, maar daarmee worden niet alle gebruikers bediend. Kijk op voor de laatste verdeling van de verschillende Android versies. In juli 2012 was het gebruik van Android: 2.1: Éclair: 4% 2.2: Froyo: 15% 2.3[.3]: Gingerbread: 60% 3.2: Honeycomb: 2% 4.0[.3]: Ice Cream Sandwich: 16% 4.1: Jelly Bean: 1% Door te ontwikkelen voor Android vanaf versie 2.1 wordt totaal dus 98% van de Android gebruikers bereikt. Maar dat betekent dat de code moet voldoen aan API level 7 waarop Eclair is gebouwd. Terwijl Jelly Bean al op API Level 16 zit. Versie Gingerbread is veruit de meest gebruikte versie met 60% en Ice Cream Sandwich is de hardste stijger met 16%, in juli Tijdens het opzetten van het project dient hier een weloverwogen keuze gemaakt te worden. Stap 4. Directory structuur Tijdens het opzetten van het project zijn ook al verschillende directories in de Android SDK langs gekomen. De belangrijkste voor het ontwikkelen van een HTML 5 App is de directory assets/www. Dat is in feite de documentroot, zoals deze ook gebruikt wordt bij het ontwikkelen van een website. In deze directory is de index.html de eerste file die gestart wordt. Het is aan te bevelen om vervolgens de CSS, JS en graphics (GFX) in subdirectories te plaatsen. 25
26 Eclipse explorer voor Android Stap 5. Icoon & start-up scherm Door te klikken op een icoon wordt de App gestart. Dit icoon representeert de App en wordt getoond op het scherm en in de App store. Na klikken op het icoon verschijnt vervolgens een zogenaamd splash screen /start-up scherm. Dit is het plaatje dat getoond wordt tijdens het opstarten van de App. Het icoon en start-up scherm moet voor ieder platform apart ingesteld worden. Bij Android wordt het start icoon gedefinieerd in de XMLmanifest file: In de directory res/drawable* staat de file ic_launcher.png, dit is het icoon. 26
27 Voor het tonen van een start-up scherm, tijdens het laden van de App, worden voor Android twee regels code gebruikt. Voeg deze regels toe aan de belangrijkste Java file, waar de HTML geladen wordt. Deze file heeft dezelfde naam als het Android project wat is aangemaakt: super.setintegerproperty("splashscreen", R.drawable.splash); super.loadurl("file:///android_asset/www/index.html", 10000); Met deze code blijft het splash screen tien seconden staan, na het laden van de App kan het screen eventueel eerder verwijderd worden met: settimeout(function() { navigator.splashscreen.hide(); }, 2000); Ook het splashscreen, splash.png, moet gekopieerd worden in de res/drawable* directories, net als het start icoon. Stap 6. Schermgrootte & Responsive design Er zijn verschillende formaten waar rekening mee gehouden kan/moet worden. Android verdeelt de formaten met een eenheid: 'dp', dat staat voor density pixel. Lees hierover meer op: Een density pixel is hetzelfde als een gewoon pixel (px) bij een dichtheid van het scherm van 160 dpi (dot per inch). Dit wordt de gemiddelde dichtheid genoemd. Bij deze dichtheid is het meest geschikte formaat voor een button 48x48 pixels, zodat comfortabel met een vinger aangewezen kan worden. Bij een dichtheid van het scherm van 240 dpi is de density 1,5 x zo groot. Dat betekent dat op het scherm ook 1.5 keer zo grootte buttons moeten staan, 72x72 pixels dus, om hetzelfde formaat button te creëren voor een vinger. Verschillende densities zijn: low: 120 dpi, 36x36 buttons medium: 160 dpi, 48x48 buttons high: 240 dpi, 72x72 buttons xhigh: 320 dpi, 96x96 buttons Verschillende schermgrootte worden uitgedrukt in density pixels: small: 426dp x 320dp normal: 470dp x 320dp large: 640dp x 480dp xlarge: 960dp x 720dp 27
28 Als voor Android specifiek ontworpen wordt, dan kan voor ieder formaat het juiste plaatje gemaakt worden en in de daarvoor bestemde directory neergezet worden. De Android SDK bepaalt dan welk plaatje het meest geschikt is voor het apparaat waar de App op draait. Verschillende schermgrootte en ontwerp van het scherm kan echter ook met CSS3 opgelost worden. Dat wordt hieronder uitgelegd. Schermtype definitie Het design van een App is hier van cruciaal belang. De drie belangrijkste designs die zijn te onderscheiden zijn: Ontwikkel voor een smartphone o width: < 700 o orientation: portrait ( 1 kolom) o dpi: 160 Ontwikkel voor een tablet o width: > 700 & < 1000 o orientation: landscape (2 kolom) o dpi: 160 Ontwikkel voor een laptop o width: > 1000 o orientation: landscape (3 kolom) o dpi: 160 Deze designs zijn ook uit te voeren in hogere resolutie Ontwikkel voor high resolution: laptop, ipad3 & new smartphones o Width: ALL o Orientation: ALL o dpi: > 240 Met een combinatie van deze designs kan voor veel devices ontwikkeld worden. In de voorbeeld App die is gemaakt komt dit tot uiting in een drie koloms applicatie voor laptop, twee koloms applicatie voor een tablet en dezelfde data in één kolom voor een high resolution smartphone. 28
29 Drie koloms webapp voor laptop Twee koloms tablet layout 29
30 Eén kolom smartphone layout Het voorbeeld van de code om dit te realiseren wordt in de webapp gegeven. Deze specifieke layout staat in de HTML 5 Referentie onder het onderwerp Responsive design. Als gebruik wordt gemaakt van responsive design code, dan past de opmaak van het scherm zich automatisch aan aan de grootte van het scherm. Ook past de opmaak zich aan als het scherm geroteerd wordt, in portrait of landscape mode. Overigens kan, indien gewenst, de App in portrait of landscape mode geforceerd kan worden. In de Android XMLmanifest file moet het volgende opgenomen worden als de App alleen in landscape mode moet worden getoond: android:screenorientation="landscape" Images en text grootte De button grootte is in het vorige hoofdstuk al ter sprake gekomen. Normale buttons zijn 48x48 pixels. Voor high density schermen wordt 72x72 pixels gebruikt. Voor text grootte geldt hetzelfde. Normale text grootte is 12 pt. Voor high density schermen wordt dan 18 pt gebruikt, zodat de tekst leesbaar blijft. Voor verschillende densities kunnen verschillende plaatjes gebruikt worden. Let wel op dat alle plaatjes in CSS gedefinieerd moeten worden om dit te laten werken. 30
Summerschool Mobiele Apps 15-17 augustus 2012 Herman van Dompseler. HTML 5 App
Summerschool Mobiele Apps 15-17 augustus 2012 Herman van Dompseler HTML 5 App 1. Wat is HTML 5 2. HTML 5 Apps 3. Hybride App Architectuur 4. Een App maken Overzicht Deel 1: HTML5 HTML 5 gebruikt als verzamelnaam
HTML5 App. Herman van Dompseler In samenwerking met SURFnet. 3 augustus 2012 Versie 0.3 - CONCEPT
Herman van Dompseler In samenwerking met SURFnet 3 augustus 2012 Versie 0.3 - CONCEPT Contents Part 1: Wat is HTML5... 4 Laat maar zien, wat kan ik met HTML5?... 4 HTML5 Resources... 7 HTML5 Apps... 7
Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase
Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet
01/05. Websites Nederland over. Mobile marketing. Whitepaper #03/2013. Mabelie Samuels internet marketeer
01/05 Websites Nederland over Mobile marketing Mabelie Samuels internet marketeer 02/05 Mobile marketing Kunt u zich uw eerste mobiele telefoon nog herinneren? Die van mij was een Motorola, versie onbekend,
Bottleball Onderzoeksverslag MovingMonsters. Uitgevoerd door Arno Classens a.classens@student.fontys.nl
Bottleball Onderzoeksverslag MovingMonsters Uitgevoerd door Arno Classens a.classens@student.fontys.nl 1 1. Inhoudsopgave Wat? Bladzijde 1. Introductie 3 2. Methodologie 4 3. Resultaten 3.1 Oriëntatie
Web Games en het mobiele web. Hoorcollege Webdesign 9 6 juni 2014 Christof van Nimwegen
Web Games en het mobiele web Hoorcollege Webdesign 9 6 juni 2014 Christof van Nimwegen Webgames: scope dit college onderdeel Games staan nu centraal in deze faculteit. In een cursus over webdesign MOET
React en React Native voor websites en apps
React en React Native voor websites en apps H A N S-PE T E R H ARMSEN HEEFT DI T GE SCH R E V EN IN APRI L 2017 Deze whitepaper is bedoeld voor product owners en beslissers. Hij gaat over React, een JavaScript
Technische data. Versie dec
Technische data Versie dec.2016 www.mobilea.nl Mobiléa Infrastructuur: Pagina 1 Pagina 2 Specificaties: Het platform van Mobiléa valt op te splitsen in een aantal technische componenten, te weten: De webapplicatie
Bart ter Steege bart.ter.steege@jungleminds.nl 06 8128 7569. The Mobile Mindmap
Titel Nationale project, Vakdag 10 maart Dialogue 2010 &/ Klantnaam Digital Marketing 2010 Titel The Mobile projectmindmap Bart ter Steege bart.ter.steege@jungleminds.nl 06 8128 7569 Best of Mobile Best
F U N C T I O N E E L O N T W E R P V O O R F U L L H O U S E M O B I LE ( V I S I O N V E R S I E )
F U N C T I O N E E L O N T W E R P V O O R F U L L H O U S E M O B I LE ( V I S I O N V E R S I E ) Datum: 29-09-2010 Auteur: Dairo Bosschart Versie: 1.0 Document: Functioneel_ontwerp (vision versie).docx
10. Single Page Applications
WHITEPAPER IN 5 MINUTEN M E I 2 0 1 4 10. Single Page Applications Introductie De wereld verandert snel en gebruikers openen je site of applicatie steeds minder met een traditionele browser. Een site of
Introductie testtooling Wink
Introductie testtooling Wink SYSQA B.V. Almere Datum : 10-04-2013 Status : 1.0 Opgesteld door : Organisatie SYSQA B.V. Pagina 2 van 16 Inhoudsopgave 1 Inleiding... 3 1.1 Opbouw... 3 2 Wink... 4 2.1 Wat
HTML5 VIDEO. Een stand van zaken Jeroen Wijering, LongTail Video
HTML5 VIDEO Een stand van zaken Jeroen Wijering, LongTail Video WHOIS JW? Auteur van de JW Player (2005) Open-source Flash video speler voor embedden in websites. Gebruikt door YouTube in 1e jaar Helaas,
Betreft: Gebruiksinstructie vrkastour
Betreft: Gebruiksinstructie vrkastour www.vrapp.co/komindekas/vrkastour Beste gebruiker, Via deze handleiding leggen we uit hoe je het beste de vrkastour webapplicatie kunt gebruiken. Deze handleiding
HTML. Media. Hans Roeyen V 3.0
Media Hans Roeyen V 3.0 12 maart 2015 Inhoud 1. (Multi)Media op websites... 3 2. Flash en Websites... 4 3. Video op je website... 4 3.1. YouTube insluiten op de pagina... 4 3.2. Video zonder YouTube...
Onderzoeksvaardigheden 2
Performance van Phonegap Naam: Datum: april 2012 Studentnummer: 0235938 Opleiding: CMD Docenten: Pauline Krebbers Modulecode: MEDMO101DT Modulenaam: Onderzoeksvaardigheden 2 / Media & Onderzoek Inhoudsopgave
Vakinhoudelijke uitwerking Keuzevak Applicatieontwikkeling van het profiel MVI vmbo beroepsgericht
Vakinhoudelijke uitwerking Keuzevak Applicatieontwikkeling van het profiel MVI vmbo beroepsgericht Deze vakinhoudelijke uitwerking is ontwikkeld door het Redactieteam van de Schooleamenbank vmbo voor dit
MyMediasite Handleiding 2013 - V1.0
MyMediasite Handleiding 2013 - V1.0 1 INHOUDSOPGAVE 1. INSTALLATIE 3 2.1 OPNEMEN: OPSTARTEN 4 2.2 OPNEMEN: NIEUWE PRESENTATIE 5 2.3 OPNEMEN: OPNAME PROCES 7 2.4. OPNEMEN: EIGEN MEDIA UPLOADEN 11 3. PRESENTATIE
Acht stappen voor JSF
Acht stappen voor JSF Inleiding In deze tutorial zullen we JSF (Java server faces) installeren. Wat we niet beschrijven is hoe te werken met JSF, over dit onderwerp zijn er genoeg boeken en internetsites
Handleiding: Whitelabel Customersite
ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.
ERGER JIJ JE OOK AAN DIE LOSSE PAPIERTJES, DE FOTO S DIE
ERGER JIJ JE OOK AAN DIE LOSSE PAPIERTJES, DE FOTO S DIE GEDOWNLOAD MOETEN WORDEN EN HET LANGE WERK AAN ÉÉN OFFERTE? DE INTAKE-APP LOST HET OP Alles over de Intake-app Inhoud Over ons... 2 Waarom Intake-app?...
Werkomgeving. Android Studio. Android - werkomgeving 1/6
Android - werkomgeving 1/6 Werkomgeving Android Studio Installatie Ga naar de volgende URL: http://developer.android.com/sdk/index.html Klik op de knop "Download Android Studio for Windows" om het programma
Kenmerken Nomadesk Software
Kenmerken Nomadesk Software DATABEVEILIGING Versleutelde lokale schijf Nomadesk creëert een veilige virtuele omgeving, een Vault, op uw lokale harde schijf. Alle mappen en bestanden opgeslagen op de Vault
Ontwikkelen voor Android. Het waarom, het hoe en het wat - Sander Tuit
Ontwikkelen voor Android Het waarom, het hoe en het wat - Sander Tuit Over mij Mede-oprichter Androidworld Ontwikkelaar Androidworld-app @SanderTuit op Twitter, +SanderTuit op Google+ Over Androidworld
Selenium IDE Webdriver. Introductie
Selenium IDE Webdriver Het Wielsem 10, 5231 BW s- Hertogenbosch, telefoon 073-6409311 e- mail info@testwork.nl internet http://www.testwork.nl 1 Inhoudsopgave 1 Inhoudsopgave... 2 2 Selenium IDE... 3 3
Card sorting Sitemap Use case. Wireframes Schermontwerpen Stijlgids. Niet in les gedaan! Via je einddocument. Verkennen. Genereren.
Hoorcollege 4 Verkennen Genereren Evalueren Communiceren Card sorting Sitemap Use case Wireframes Schermontwerpen Stijlgids Niet in les gedaan! Via je einddocument Schermontwerpen Pauze Stijlgids Feedback
Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules
Release notes Argo 7 Argo 7 heeft een interactief web design. Het is optimaal afgestemd op de grote diversiteit aan computerbeeldschermen, van grootbeeld desktops en notebooks tot tablets en smart phones.
TETRA HTML5. 3de gebruikersgroepvergadering 3 juni 2013, Gent
TETRA HTML5 3de gebruikersgroepvergadering 3 juni 2013, Gent Agenda WP1: Administratie WP6: Valorisatie WP3 & WP4: Proof-of-Concept en performantietesten Voorstelling online-offline POC HTML5 vandaag,
De abonnementsduur van het contract is afhankelijk van uw bundelkeuze (camera en abonnement).
Panasonic Cameramanager Go! Cloud videobeveiliging per direct beschikbaar! Panasonic Cameramanager biedt ondernemers de mogelijkheid op afstand een oogje in het zeil te houden. Met de alles in 1 oplossing
Responsive & Adaptive
Responsive & Adaptive webdesign door online regisseur Snakeware versie 1.0 woensdag, 17 oktober 2012 Uitgebracht door: Auteurs: Snakeware Martiniplein 15e 8601 EG Sneek Dhr. Gerben Kuipers gerben@snakeware.nl
Bouw snel en eenvoudig een eigen mobile Virtual Reality app
Bouw snel en eenvoudig een eigen mobile Virtual Reality app Deze handleiding is opgesplitst in twee delen. Deel 1: Hoe gebruik je het Smart2VR CMS? Deel 2: Hoe gebruik je de Virtual Reality app? Deel 1:
Altijd en overal online?
Altijd en overal online? Smartphone Tablet E-Reader Netbook Notebook Chromebook Smartphones Bekende merken en types: Apple iphone 4 Samsung Galaxy S II HTC Desire HD Blackberry bold Steeds minder: Nokia
LegManager Mobile Handleiding
LegManager Mobile Handleiding Handleiding LegManager Mobile 1 1. Inhoud 1. INHOUD... 2 2. PROGRAMMAVEREISTEN... 3 a. Vragen, opmerkingen en suggesties... 3 b. Welke tablet/ipad of smartphone/iphone kan
Op pad met een digitale kaart. Martijn Oolman en Jack Schoenmakers, Hogeschool VHL KNAG presentatie 19B op 13-11-2016
Op pad met een digitale kaart Martijn Oolman en Jack Schoenmakers, Hogeschool VHL KNAG presentatie 19B op 13-11-2016 Inhoud Introductie Routes met stoppunten en opdrachten Online te gebruiken Waarbij allerlei
APPS. Presentatie
APPS Presentatie 2010-10-18 1 INLEIDING In principe heeft het vrij weinig uitleg nodig, want we de meeste onder ons zijn er wel mee bekend. Een applicatie is een klein stukje software dat draait op een
02. Responsive Design
WHITEPAPER IN 5 MINUTEN J U L I 2 0 1 2 02. Responsive Design Introductie De wereld van schermen waarop je website wordt getoond, raakt in rap tempo versnipperd. Voorheen was het makkelijk: websites werden
Stappenplan. De ontwikkeling van een interface doorloopt bij Studio Wolf vier stappen. Deze stappen verduidelijken de weg naar het eindresultaat.
Stappenplan Een interface is in principe alles wat de communicatie tussen de gebruiker en de computer bepaalt of vorm geeft. Het is het deel van de website of webapplicatie dat de interactie met de gebruiker
Technologieverkenning
Technologieverkenning Videocontent in the cloud door de koppeling van MediaMosa installaties Versie 1.0 14 oktober 2010 Auteur: Herman van Dompseler SURFnet/Kennisnet Innovatieprogramma Het SURFnet/ Kennisnet
Meehelpen met de ontwikkeling van nieuwe of verbetering van bestaande spellen. Pag. 1 www.edubas.nl
Meehelpen met de ontwikkeling van nieuwe of verbetering van bestaande spellen. Pag. 1 Versie 1.0 februari 2015 Start-versie Over dit document In dit document probeer is duidelijk te maken hoe de spellen
Je kiest bij Voeg een widget toe het widget waarvoor je een embed wilt instellen. Of je gaat naar een bestaande reeds ingestelde widget toe.
Embeds Versie 2.0 Introductie Wil je één van de grafieken uit Finchline op een website tonen? Dit kan met behulp van de embed optie. Een embed is simpel gezegd een plaatje dat geïntegreerd kan worden.
Webuniversum. www.vlaanderen.be
Webuniversum www.vlaanderen.be 1 Webuniversum doelstelling Onze primaire focus is de Vlaamse overheid en lokale besturen. Federale diensten worden maximaal meegenomen Burger kijkt naar de overheid, los
MOBILE De mogelijkheden van mobile apps
MOBILE De mogelijkheden van mobile apps Gemak dient de mens INHOUD Apps zorgen voor gebruikersgemak 2 The future is mobile 3 De groei van apps 4 Verwachting = nieuwe standaard 4 Van website naar mobiel
Website beoordeling weeknummers.nl
Website beoordeling weeknummers.nl Gegenereerd op Oktober 19 2018 20:01 PM De score is 65/100 SEO Content Title Welk weeknummer is het? Weeknummers 2018 Lengte : 40 Perfect, uw title tag bevat tussen de
Responsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders
Responsive Design Werkwijze en aanlevering Responsive Design Mach3Builders Introductie Door de explosieve stijging van het aantal soorten devices waarop websites bekeken kan worden, is het ontwerpen van
Ameland binnen handbereik
Ameland binnen handbereik Gauke Pieter Sietzema Hoofd ontwikkeling, SEO specialist & Sterc partner Hendrik Jan Hofstede Strateeg & internetmarketeer & Sterc partner VVV Ameland mobile - Ameland binnen
Dag van Geogebra 2013
Dag van Geogebra 2013 Geogebra Instituut Vlaanderen 19 oktober 2013 Versies van Geogebra VUB Campus Etterbeek Geogebra integreren in andere toepassingen Paul Decuypere, nascholer ict-integratie VVKSO -
Technisch Ontwerp W e b s i t e W O S I
Technisch Ontwerp W e b s i t e W O S I WOSI Ruud Jungbacker en Michael de Vries - Technisch ontwerp Website Document historie Versie(s) Versie Datum Status Omschrijving / wijzigingen 0.1 20 nov 2008 Concept
ONTWERPEN VAN INTERACTIEVE PRODUCTEN
ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten WORKSHOP INTERACTIEF PROTOTYPE BOUWEN Ontwerp Keuze tool/techniek Maken layout 2 dagen: dinsdag 23 september Ochtend:
Android Development CCSS2011
Android Development Voor dummies, door dummies... Challenges in Computer Science Seminar LIACS, Universiteit Leiden 15 Februari 2011 Inhoud 1 Introductie 2 Development Environment 3 Programmeren voor Android
1. ONTWIKKEL EEN MOBIELE VERSIE
1. ONTWIKKEL EEN MOBIELE VERSIE Het is een misvatting om te denken dat een webshop die ontwikkeld is als desktopsite, ook goed werkt voor mobiele gebruikers. Integendeel, je moet de website optimaliseren
Frontend performance meting
Frontend performance meting als aanvulling op de traditionele manier van performancetesten René Meijboom rene@performancearchitecten.nl Introductie Uitdaging bij huidige klant Succesvolle performancetest
Selecteer het NRF52-Dk platform in de IDE rechtsboven in het browser scherm.
Ontwikkel je eigen Bluetooth LE device Welkom bij de workshop, tijdens deze workshop ga je aan de gang met het ontwikkelen van een Bluetooth LE device met behulp van MBED. Tijdens de workshop heb je het
Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP... 8 Joomla installeren op
1 Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP.... 8 Joomla installeren op XAMPP... 15 Handige links... 16 2 Disclaimer Bij de samenstelling
TETRA HTML5. 4de gebruikersgroepvergadering 4 oktober 2013, Hasselt
TETRA HTML5 4de gebruikersgroepvergadering 4 oktober 2013, Hasselt Agenda WP1: Administratie WP3 & WP4: Proof-of-Concept en performantietesten WP5 & WP6: Valorisatie en pilootprojecten Varia & broodjeslunch
Documentatie WD32. Christine van Woensel M32
Documentatie WD32 Christine van Woensel M32 Ontwerpkeuzes per device resolutie Desktop (1025 1600px & 769 1024px): Tablet (481 768px): Smartphone (321 480px & tot 320px): Algemeen: Alle ontwerpen voor
icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous
icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous 2006-2007 Inhoudsopgave 1 2 1.1 Programmeertaal PHP5..................... 2 1.2 MySQL database......................... 3 1.3 Adobe Flash...........................
Design for Mobile. Projectplan CMD jaar 2. Remco Dekker Daan van Klinken Sybren Wartna CMD3A UXD
I C I Projectplan CMD jaar 2 Remco Dekker Daan van Klinken Sybren Wartna CMD3A UXD INHOUDSOPGAVE IPHONE PLATFORM 3 DE IPHONE 4 APPS 5 AAN DE SLAG MET APPS 6 BRIEFING 7 KONGINNEDAG 8 LOWLANDS 9 BUSINESS
Inhoud Wat is mobiel werken?... 2 Installeren VPN Client... 3 Laptop... 3 Windows 8... 4 Windows 7... 10 Mac OS X... 16 Linux... 16 Tablet...
333 Inhoud Wat is mobiel werken?... 2 Installeren VPN Client... 3 Laptop... 3 Windows 8... 4 Windows 7... 10 Mac OS X... 16 Linux... 16 Tablet... 18 ios (ipad)... 18 Android... 21 Windows... 21 Smartphone...
Secure File Sync - Quick Start Guide
Secure File Sync - Quick Start Guide Secure File Sync Quick Start Guide 1. Installatie van de applicatie op een computer; 2. Gebruik van de applicatie; 3. Bestanden delen vanuit de applicatie; 4. Gebruik
Intramed OnLine instellen en gebruiken. Voor ipad en iphone
Intramed OnLine instellen en gebruiken Voor ipad en iphone Inhoudsopgave Hoofdstuk 1 Algemeen...1 1.1 Toegang tot inlogportalen...1 Hoofdstuk 2 Basic account...3 2.1 Microsoft Remote Desktop installeren
De interface van de Audio Narration lijkt nu meer op de vormgeving zoals we die kennen van Storyline. Meerdere blokken zijn vanaf Studio 360 naar
De interface van de Audio Narration lijkt nu meer op de vormgeving zoals we die kennen van Storyline. Meerdere blokken zijn vanaf Studio 360 naar wens los te trekken en te positioneren op het scherm. Daarnaast
Documentatie gereedschapbeheer android applicatie. GB Inspect. Handleiding Gereedschapbeheer android applicatie GB Inspect - 1
GB Inspect Handleiding Gereedschapbeheer android applicatie GB Inspect Datum: 10 september 2014 Behorende bij app versie 1.1.5-1 1. Inleiding De Gereedschapbeheer.nl app is bedoeld voor het inspecteren
Paphos Group Risk & Security Mobile App Security Testing
Paphos Group Risk & Security Mobile App Security Testing Gert Huisman gert.huisman@paphosgroup.com Introductie 10 jaar werkzaam geweest voor Achmea als Software Engineer 3 jaar als Security Tester Security
Mobiele internet strategie
Mobiele internet strategie Waar staan we? Reduitlaan 33 Unit 2.09 4814 DC Breda +31 (0)76 888 00 88 info@e-sites.nl www.e-sites.nl BTW 1387489189 KvK 1891618948 Bank 1894894561 Inhoud Inleiding... 3 Wees
JPTrainControl. JPTrainControl versie Alpha. Eerste kennismaking
JPTrainControl JPTrainControl versie 5.2.4 Alpha 28 april 2019 Eerste kennismaking De eerste kennismaking met JPTrainControl, wat doet het en hoe gebruik ik het de eerste keer. JPTrain V5.2.4. April 2019
Desktop, Laptop, Netbook, Ultrabook or Tablet? Which is best for what? Keuzes maken
Desktop, Laptop, Netbook, Ultrabook or Tablet? Which is best for what?. Keuzes maken Wanneer je een computer wilt aanschaffen denk je tegenwoordig niet meteen meer aan de desktop. De desktop is een "grote"
iprova Suite Systeemeisen iprova 5 Hosting
iprova Suite Systeemeisen iprova 5 Hosting Let op Dit document bevat de systeemeisen voor versie 5.0 van de iprova Suite. Door nieuwe ontwikkelingen kunnen de systeemeisen voor iprova wijzigen. Controleer
HANDLEIDING EXTERNE TOEGANG CURAMARE
HANDLEIDING EXTERNE TOEGANG CURAMARE Via onze SonicWALL Secure Remote Access Appliance is het mogelijk om vanaf thuis in te loggen op de RDS omgeving van CuraMare. Deze handleiding beschrijft de inlogmethode
HTML Graphics. Hans Roeyen V 3.0
HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.
Zicht - Content Management Systeem een algemene beschrijving
Zicht - Content Management Systeem een algemene beschrijving Versie april/2008 Zicht nieuwe media ontwerpers 2008 1 Inleiding Een Content Management Systeem (CMS) is een webapplicatie waarmee je zonder
Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM
Tips & Tricks Eigen Widgets in CRM Eigen Widgets in CRM Introductie De WebUI van CRM 7.0 maakt het mogelijk om je eigen widgets te maken en deze in je eigen view te gebruiken. Dat kan door gebruik te maken
Web Handleiding. semper vigilant Fall 2014 LOCALBOX 1.1.3
Web Handleiding semper vigilant Fall 2014 Functionaliteiten web-based 2 Inloggen 2 Home 3 Uploaden: 4 Opties: 6 Map Delen: 6 Beheer Links 8 Functionaliteiten App-based 12 Hoger niveau 16 Acties op bestanden
aanmaken van een webaccount om e-books te kunnen lenen P. 3-7 het lenen van e-books de basis P. 13-14
aanmaken van een webaccount om e-books te kunnen lenen P. 3-7 wachtwoord vergeten P. 8-9 uw account beheren P. 10-12 het lenen van e-books de basis P. 13-14 het lenen van e-books online lezen (is streamed
2. Wat kost HBO GO? HBO GO is onderdeel van het HBO Pakket. Daarom betaalt u er niets extra voor.
Q&A HBO GO Versie: 0 Versie: 1 Datum: 27 april 2012 ------------------------------------------------------------------------------------------------------------ Algemeen Instellingen Problemen oplossen
Maak kennis met de apps van Rhinofly. Augustus 2012
Maak kennis met de apps van Rhinofly Augustus 2012 Rhinofly en mobiele ontwikkeling De afgelopen jaren hebben we ons intensief verdiept in de mogelijkheden van mobiel. Na grondige research & development-trajecten
Externe toegang met ESET Secure Authentication. Daxis helpdesk@daxis.nl Versie 2.0
Externe toegang met ESET Secure Authentication Daxis helpdesk@daxis.nl Versie 2.0 Inhoudsopgave: Inhoudsopgave:... 1 Inleiding:... 2 Stap 1: Download eenmalig Eset Secure Authentication op uw smartphone...
Modular Development. Een App in Facebook. Dennis van der Oost CMD2D 0822118. Module: CMDDEV01-7 Docent: Eric Mahieu. Eindverslag v.1.
Modular Development Een App in Facebook Dennis van der Oost CMD2D 0822118 Module: CMDDEV01-7 Docent: Eric Mahieu Eindverslag v.1.0 Inhoudsopgave - Inleiding - Concept omschrijving - Technisch onderzoek
KraamZorgCompleet OnLine instellen en gebruiken. Voor ipad of iphone
KraamZorgCompleet OnLine instellen en gebruiken Voor ipad of iphone Inhoudsopgave Hoofdstuk 1 Algemeen...1 1.1 Toegang tot inlogportalen...1 Hoofdstuk 2 Basic account...3 2.1 Microsoft Remote Desktop installeren
Gebruikershandleiding GO search 2.0
Gebruikershandleiding GO search 2.0 1 Gebruikershandleiding Product: GO search 2.0 Documentversie: 1.1 Datum: 2 februari 2015 Niets uit deze uitgave mag zonder toestemming van GemeenteOplossingen worden
Responsive web applicaties op Oracle
APEX Responsive web applicaties op Oracle Spreker(s) : Datum : E-mail : Arian Macleane & Jacob Beeuwkes 06-06-2013 info@transfer-solutions.com WWW.TRANSFER-SOLUTIONS.COM Outline Trends APEX intro APEX
SAP Mobile Documents SP 05 Hoe het werken met de nieuwste versie nog makkelijker is geworden.
SAP Mobile Documents SP 05 Hoe het werken met de nieuwste versie nog makkelijker is geworden. Documentnummer: 1.0 Datum: 4-1-2016 Auteur: SANDER MAES Rompertdreef 1b 5233 ED s-hertogenbosch Postbus 86
Handleiding voor Zotero versie 2.0
Handleiding voor Zotero versie 2.0 Michiel Wolda De handleiding voor Zetero is geschreven voor de lezers van het boek Deskresearch: Informatie selecteren, beoordelen en verwerken: tweede editie (Van Veen
Snel op weg met de PepperPlayer.
Snel op weg met de PepperPlayer. Dit is een korte leidraad voor de installatie van de PepperPlayer. Hierin wordt zo simpel mogelijk beschreven hoe u de PepperPlayer kunt instaleren. Kijk voor uitgebreide
USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR
USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR WELKOM AGENDA Introductie Korte algemene inleiding Usability Usability voor mobiele apparaten Vragen - afsluiting INTRODUCTIE Peter Kassenaar;
Gebruiksaanwijzing OV-NewBase www.overmax.nl
Gebruiksaanwijzing OV-NewBase www.overmax.nl Snel Start Batterij management en opladen Voordat u het toestel in gebruik neemt, dient u de accu eerst geheel op te laden. Stop de lader in het toestel en
Louis van Amerongen - Witteveen+Bos
Christiaan Post Mark Stals - Sweco - Gemeente Eindhoven Louis van Amerongen - Witteveen+Bos Algemeen: Tijdens deze workshop zullen we twee manieren behandelen om vanuit MicroStation een 3D model om te
Intramed OnLine instellen en gebruiken. Voor Android tablet of telefoon
Intramed OnLine instellen en gebruiken Voor Android tablet of telefoon Inhoudsopgave Hoofdstuk 1 Algemeen...1 1.1 Toegang tot inlogportalen...1 Hoofdstuk 2 Basic account...3 2.1 Microsoft Remote Desktop
WHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES
WHITEPAPER RESPONSIVE WEBSITES Wat is een Responsive website? Voordelen van een Responsive website? Hoe start je met een Responsive website? INTRODUCTIE Met het downloaden van deze whitepaper kunnen we
Via methodewebsite www w.emma.eisma.nl of de ELO van de school
Via methodewebsite www.emma.eisma.nl of de ELO van de school Veelgestelde vragen rondom de online leerlingomgeving Veelgestelde vragen rondom de online leerlingomgeving (Station, Library en Route 2F) servicedesk@eisma.nl
ANOUK ROUMANS TO CODE OR NOT TO CODE.
ANOUK ROUMANS ANOUK ROUMANS TO CODE OR NOT TO CODE. 00 HOOFDVRAAG 00 HOOFDVRAAG Is het relevant voor een UX-designer om development kennis te hebben op gebied van apps? 00 INHOUDSOPGAVE 00 INHOUDSOPGAVE
GEBRUIKSAANWIJZING akiosk-lite software (basis level)
GEBRUIKSAANWIJZING akiosk-lite software (basis level) Verwijderen van de folies: De device is met 2 folies lagen beschermd. Verwijder de beide folies. Inschakelen van de device: Plaats de voedingsconnector
Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman
Documentatie Onsweb Club plugin voor NHV verenigingen Versie 0.2 Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,
Content tips & tricks
Content tips & tricks E-learning vormt de basis van je lessen en als docent steek je veel tijd in het ontwikkelen en vormgeven van deze content. Met deze handleiding maken we dit proces net even makkelijker
ipad integratie in het onderhoud
Maximo Comes To You ipad integratie in het onderhoud Door: Marcel Staring 2013 IBM Corporation Agenda 1. Waarom Mobiel Werken? 2. Wat houdt Mobiel Werken in? Praktisch Technisch 3. MAXIMO Mobiel vs. MAXIMO
USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR
USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR WELKOM AGENDA Introductie Korte algemene inleiding Usability Usability voor mobiele apparaten Vragen - afsluiting INTRODUCTIE Peter Kassenaar;
10 onderdelen die niet mogen ontbreken in een online briefing
Een goede online briefing past op één A4 [+ checklist] Auteur: Ronald Heijkens, Sabel Online Je wilt een nieuwe website, intranet, online magazine of app. Maar omdat je de expertise zelf niet in huis hebt,
Informatieopslag van websites
Informatieopslag van websites Inleiding Tijdens je project raadpleeg je veel websites. Vaak is het lastig om achteraf te achterhalen wat het adres en bijbehorende inhoud van de desbetreffende pagina was.