HTML 5 App. Herman van Dompseler in opdracht van SURFnet. 20 december 2012 Versie 0.91

Maat: px
Weergave met pagina beginnen:

Download "HTML 5 App. Herman van Dompseler in opdracht van SURFnet. 20 december 2012 Versie 0.91"

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 https://developer.mozilla.org/en/javascript/ (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, https://chrome.google.com/webstore# o Mozilla werkt aan een webapp store, https://www.mozilla.org/en-us/apps/partners/ 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 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

Nadere informatie

HTML5 App. Herman van Dompseler In samenwerking met SURFnet. 3 augustus 2012 Versie 0.3 - CONCEPT

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

Nadere informatie

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase

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

Nadere informatie

01/05. Websites Nederland over. Mobile marketing. Whitepaper #03/2013. Mabelie Samuels internet marketeer

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,

Nadere informatie

Bottleball Onderzoeksverslag MovingMonsters. Uitgevoerd door Arno Classens a.classens@student.fontys.nl

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

Nadere informatie

Onderzoeksvaardigheden 2

Onderzoeksvaardigheden 2 Performance van Phonegap Naam: Datum: april 2012 Studentnummer: 0235938 Opleiding: CMD Docenten: Pauline Krebbers Modulecode: MEDMO101DT Modulenaam: Onderzoeksvaardigheden 2 / Media & Onderzoek Inhoudsopgave

Nadere informatie

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 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

Nadere informatie

HTML5 VIDEO. Een stand van zaken Jeroen Wijering, LongTail Video

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,

Nadere informatie

Introductie testtooling Wink

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

Nadere informatie

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 ) 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

Nadere informatie

Acht stappen voor JSF

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

Nadere informatie

Werkomgeving. Android Studio. Android - werkomgeving 1/6

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

Nadere informatie

Bart ter Steege bart.ter.steege@jungleminds.nl 06 8128 7569. The Mobile Mindmap

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

Nadere informatie

MyMediasite Handleiding 2013 - V1.0

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

Nadere informatie

Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules

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.

Nadere informatie

Responsive & Adaptive

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

Nadere informatie

HTML. Media. Hans Roeyen V 3.0

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...

Nadere informatie

Technologieverkenning

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

Nadere informatie

TETRA HTML5. 3de gebruikersgroepvergadering 3 juni 2013, Gent

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,

Nadere informatie

Handleiding: Whitelabel Customersite

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.

Nadere informatie

TETRA HTML5. 4de gebruikersgroepvergadering 4 oktober 2013, Hasselt

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

Nadere informatie

Altijd en overal online?

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

Nadere informatie

10. Single Page Applications

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

Nadere informatie

Ontwikkelen voor Android. Het waarom, het hoe en het wat - Sander Tuit

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

Nadere informatie

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...

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...

Nadere informatie

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 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

Nadere informatie

Android Development CCSS2011

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

Nadere informatie

Card sorting Sitemap Use case. Wireframes Schermontwerpen Stijlgids. Niet in les gedaan! Via je einddocument. Verkennen. Genereren.

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

Nadere informatie

Selenium IDE Webdriver. Introductie

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

Nadere informatie

MOBILE De mogelijkheden van mobile apps

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

Nadere informatie

Webuniversum. www.vlaanderen.be

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

Nadere informatie

Documentatie gereedschapbeheer android applicatie. GB Inspect. Handleiding Gereedschapbeheer android applicatie GB Inspect - 1

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

Nadere informatie

Bouw snel en eenvoudig een eigen mobile Virtual Reality app

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:

Nadere informatie

02. Responsive Design

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

Nadere informatie

Data Acquisitie in een modern jasje. Wordt het de tablet of toch iets anders?

Data Acquisitie in een modern jasje. Wordt het de tablet of toch iets anders? Data Acquisitie in een modern jasje. Wordt het de tablet of toch iets anders? Marco Bischoff Yokogawa Europe BV 7 november 2013 Yokogawa IA Control Products --- Business domain Technologischeontwikkelingen

Nadere informatie

Gebruiksaanwijzing OV-NewBase www.overmax.nl

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

Nadere informatie

Zicht - Content Management Systeem een algemene beschrijving

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

Nadere informatie

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman

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,

Nadere informatie

Frontend performance meting

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

Nadere informatie

Mobiele internet strategie

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

Nadere informatie

De abonnementsduur van het contract is afhankelijk van uw bundelkeuze (camera en abonnement).

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

Nadere informatie

ONTWERPEN VAN INTERACTIEVE PRODUCTEN

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:

Nadere informatie

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 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

Nadere informatie

Responsive web applicaties op Oracle

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

Nadere informatie

iprova Suite Systeemeisen iprova 5 Hosting

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

Nadere informatie

Responsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders

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

Nadere informatie

Kenmerken Nomadesk Software

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

Nadere informatie

Intramed OnLine instellen en gebruiken. Voor ipad en iphone

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

Nadere informatie

icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous

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...........................

Nadere informatie

PRESTATIESITE WEBPAKKET

PRESTATIESITE WEBPAKKET PRESTATIESITE WEBPAKKET PRESTATIESITE Wij hebben al onze ervaring gebruikt om een gestandaardiseerd webpakket te ontwikkelen met een lay-out welke de focus heeft op leads en new business. Op deze wijze

Nadere informatie

Design for Mobile. Projectplan CMD jaar 2. Remco Dekker Daan van Klinken Sybren Wartna CMD3A UXD

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

Nadere informatie

HANDLEIDING EXTERNE TOEGANG CURAMARE

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

Nadere informatie

Web app Spaans voor kinderen

Web app Spaans voor kinderen Web app Spaans voor kinderen Naam: Yanette Wong Lozano Inhoudsopgave Inleiding... 3 Beschrijving applicatie... 4 Doelgroep... 4 Omgeving... 4 Technologische middelen... 4 User stories... 4 Site map...

Nadere informatie

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM

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

Nadere informatie

LegManager Mobile Handleiding

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

Nadere informatie

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 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...

Nadere informatie

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. 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

Nadere informatie

IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6

IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6 IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6 VORIGE WEEK De principes van het web Multiscreen Responsive webdesign Mediaqueries Mobile first Even heel kort samenvatten waar we het ook al weer over hebben

Nadere informatie

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 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

Nadere informatie

KraamZorgCompleet OnLine instellen en gebruiken. Voor ipad of iphone

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

Nadere informatie

2. Wat kost HBO GO? HBO GO is onderdeel van het HBO Pakket. Daarom betaalt u er niets extra voor.

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

Nadere informatie

4 inch screen. The ARCHOS 40 Titanium is voorzien van een groot 4 inch scherm, ideaal voor mails, web of uw foto s of video s.

4 inch screen. The ARCHOS 40 Titanium is voorzien van een groot 4 inch scherm, ideaal voor mails, web of uw foto s of video s. Klik hier voor de specificaties 4 inch screen The ARCHOS 40 Titanium is voorzien van een groot 4 inch scherm, ideaal voor mails, web of uw foto s of video s. Uitstekende kijkhoeken De hoge kwaliteit van

Nadere informatie

WEBSITE SCAN Vrijblijvend advies

WEBSITE SCAN Vrijblijvend advies WEBSITE SCAN Vrijblijvend advies IBAN: NL57ABNA0479025207 Inleiding: Wij hebben uw website op diverse facetten geanalyseerd en hier een bondig rapport voor geschreven. Door het uitvoeren van onderstaande

Nadere informatie

Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0

Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0 Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0 Inhoudsopgave Inhoudsopgave Inleiding 2 3 1. Achtergrond 4 2. Structuur 5 3. Inhoud Mixed Emotions

Nadere informatie

Publishing & Printing Company B.V.

Publishing & Printing Company B.V. STAPPENPLAN WEBSITE Versie 1.3 Publishing & Printing Company B.V. Weth. Sangersstraat 38 (0)46-437 73 11 KVK 140.41959 6191 NA Beek web@pp-company.nl BTW NL 0085.52.861.B01 Algemene voorwaarden www.pp-company.nl

Nadere informatie

Intramed OnLine instellen en gebruiken. Voor Android tablet of telefoon

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

Nadere informatie

Via methodewebsite www w.emma.eisma.nl of de ELO van de school

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

Nadere informatie

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.6 Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

TETRA HTML5. Gebruikersgroepvergadering 25 februari 2014, Hasselt

TETRA HTML5. Gebruikersgroepvergadering 25 februari 2014, Hasselt TETRA HTML5 Gebruikersgroepvergadering 25 februari 2014, Hasselt Agenda Pilootcase Yappa - Showroomr 3D CMS Phonegap / JQM ervaringen Verspreiding technologie Varia Planning Pilootcase Yappa - probleemstelling

Nadere informatie

Google Chrome Windows Vista Windows 7 Windows 8 8.1 Apple imac ibook Adobe Acrobat Reader

Google Chrome Windows Vista Windows 7 Windows 8 8.1 Apple imac ibook Adobe Acrobat Reader Probleem: bij het openen van de apdf ziet u een wit scherm i.p.v. de gegevens m.b.t. uw beheerrekening. Afhankelijk van de webbrowser, Windows versie of merk computer dat u gebruikt, kan dit probleem worden

Nadere informatie

Technologie en Interactie 3.2: software architectuur

Technologie en Interactie 3.2: software architectuur Technologie en Interactie 3.2: software architectuur Manual IAM-TDI-V2-Technologie en Interactie. Jaar 0809 blok 2 Oktober 2008 Fons van Kesteren 1/8 Inhoud Technologie en Interactie 3.2: software architectuur...

Nadere informatie

iprova Suite 4.7 Systeemeisen server

iprova Suite 4.7 Systeemeisen server iprova Suite 4.7 Systeemeisen server Hardware Dualcore Pentium IV 2 Ghz of beter met 4GB RAM; 100 Mbit netwerkverbinding of sneller; 1 GB vrije ruimte voor programmabestanden van iprova; min. 10 GB capaciteit

Nadere informatie

Handleiding. Systeem: Android 4.4 Processor: All Winner A31S Editie: V01

Handleiding. Systeem: Android 4.4 Processor: All Winner A31S Editie: V01 Handleiding Basis inleiding... 1 Knoppen en aansluitingen... Fout! Bladwijzer niet gedefinieerd. Basis specificaties... 1 Starten... Fout! Bladwijzer niet gedefinieerd. Opstarten en afsluiten... Fout!

Nadere informatie

Marlin Family. Marlin

Marlin Family. Marlin PCA Mobile PCA Mobile Organisatie PCA Mobile BV maakt deel uit van de Mobile Solution Group en biedt met ruim 40 enthousiaste collega s een veelomvattend pakket van innovatieve en gebruiksvriendelijke

Nadere informatie

iprova Suite Systeemeisen client

iprova Suite Systeemeisen client iprova Suite Systeemeisen client Hardware Aanbevolen configuratie: Pentium IV 1 Ghz of beter, min. 512 MB RAM, min. 200 MB vrije schijfruimte In alle gevallen moet worden voldaan aan de minimum systeemeisen

Nadere informatie

Evernote kan heel veel verschillende type bestanden opslaan. - gewone tekst - foto s - pdf s - websites (via Evernote webclipper

Evernote kan heel veel verschillende type bestanden opslaan. - gewone tekst - foto s - pdf s - websites (via Evernote webclipper ICT tools: Collaboratie tools in de cloud: Evernote: Werkt met een premium model. Gratis voor basis functies, uitgebreidere functies zijn betalend via een abonnement. Evernote is een samenwerkingstool

Nadere informatie

HTML Graphics. Hans Roeyen V 3.0

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.

Nadere informatie

Maak kennis met de apps van Rhinofly. Augustus 2012

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

Nadere informatie

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 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

Nadere informatie

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag:

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag: Nick Swaerdens 3IV2 10 / 06 / 2015 Naam stagiair: Nick Swaerdens Klas: 3IV2 Praktijkopleider: Jordy Pouw Stagebegeleider: Ron Spitse Stage periode tweede verslag: 2 april 2015 10 juni 2015 Inlever datum:

Nadere informatie

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. 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

Nadere informatie

Enabling Mobile. Een whitepaper over het ontsluiten van data en systemen voor gebruik met en door mobiele applicaties

Enabling Mobile. Een whitepaper over het ontsluiten van data en systemen voor gebruik met en door mobiele applicaties Enabling Mobile Een whitepaper over het ontsluiten van data en systemen voor gebruik met en door mobiele applicaties Door Rutger van Iperen Mobile Developer bij AMIS Services Introductie Het gebruik van

Nadere informatie

Meer mogelijkheden voor mobiele medewerkers met secure app delivery

Meer mogelijkheden voor mobiele medewerkers met secure app delivery Meer mogelijkheden voor mobiele medewerkers met secure app delivery Werken met Windows-applicaties op alle mogelijke devices, met volledige security. Om gemakkelijk en productief te werken, willen veel

Nadere informatie

DRAADLOZE HDMI STICK

DRAADLOZE HDMI STICK DRAADLOZE HDMI STICK G E B R U I K S A A N W I J Z I N G Ondersteuning na aankoop. Gefeliciteerd met de aankoop van deze Draadloze HDMI Stick. Met de aankoop van dit apparaat krijgt u niet alleen een 3-jarige

Nadere informatie

Inhoud Introductie Development Environment Programmeren voor Android Demo. Android Development. Sven van Haastregt

Inhoud Introductie Development Environment Programmeren voor Android Demo. Android Development. Sven van Haastregt Android Development Sven van Haastregt Challenges in Computer Science Seminar LIACS, Universiteit Leiden Februari 2012 Sven van Haastregt Android Development CCSS2012 1 / 19 Inhoud 1 Introductie 2 Development

Nadere informatie

Handleiding Sportlink Club

Handleiding Sportlink Club Handleiding Sportlink Club Dit document is automatisch gegenereerd. We raden u aan de handleiding online te raadplegen via www.sportlinkclub.nl/support. 1. Installatiehandleiding.........................................................................................

Nadere informatie

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407 Project plan Erwin Hannaart Sander Tegelaar 61849 62407 I4C2 I4C1 1 Inhoudsopgave Doel en doelgroep van het project... 3 Beschrijving van het project... 4 Benodigde materialen... 5 Te verwachten resultaten,

Nadere informatie

Veel gestelde vragen over de website kerkomroep

Veel gestelde vragen over de website kerkomroep Veel gestelde vragen over de website kerkomroep 1 Inhoudsopgave Inhoudsopgave...2 Installatie sikn speler...3 Problemen bij installatie sikn speler?...4 Installatie Audiospeler overige browsers...6 Vind

Nadere informatie

Ervaar het Beste van Online. In-Store.

Ervaar het Beste van Online. In-Store. Ervaar het Beste van Online. In-Store. AOPEN maakt gebruik van de laatste ontwikkelingen op het gebied van IT met als doel de digitale communicatie binnen een winkelomgeving te versterken. Door samen te

Nadere informatie

KraamZorgCompleet OnLine instellen en gebruiken. Voor Android tablet of telefoon

KraamZorgCompleet OnLine instellen en gebruiken. Voor Android tablet of telefoon KraamZorgCompleet 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

Nadere informatie

Ameland binnen handbereik

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

Nadere informatie

GB Inspect Handleiding Gereedschapbeheer tablet applicatie GB Inspect

GB Inspect Handleiding Gereedschapbeheer tablet applicatie GB Inspect GB Inspect Handleiding Gereedschapbeheer tablet applicatie GB Inspect Datum: 19 juni 2015 Behorende bij Android versie 1.2 en IOS versie 1.0-1 1. Inleiding De Gereedschapbeheer.nl app GB Inspect is bedoeld

Nadere informatie

WINDOWS 10 Waarom Windows 10? Grootste veranderingen Wanneer upgraden? Installatie Instellingen Ervaringen

WINDOWS 10 Waarom Windows 10? Grootste veranderingen Wanneer upgraden? Installatie Instellingen Ervaringen Waarom Windows 10? Grootste veranderingen Wanneer upgraden? Installatie Instellingen Ervaringen De Pionier 2015 Waarom Windows 10? (1) Windows 10 is een Service, d.w.z. gedurende de levensduur van de hardware

Nadere informatie

WordPress in het Kort

WordPress in het Kort WordPress in het Kort Een website maken met Wordpress. In minder dan één uur online! Inclusief installatie van een thema en plugins Alle rechten 2013, Rudy Brinkman, BrinkhostDotCom, http://www.brinkhost.nl

Nadere informatie

App4Broker : uw nieuwe app!

App4Broker : uw nieuwe app! App4Broker : uw nieuwe app! Pagina 1 van 20 Inhoudsopgave 1. U GEBRUIKT MYBROKER AL... 3 1.1. APP4BROKER DOWNLOADEN OP UW TABLET... 3 1.2. INSTALLATIE VAN HET CERTIFICAAT... 4 2. U HEEFT NOG NOOIT MET

Nadere informatie

Gebruiksaanwijzing Samsung PV 210 Tablet PC. Inhoudsopgave

Gebruiksaanwijzing Samsung PV 210 Tablet PC. Inhoudsopgave Gebruiksaanwijzing Samsung PV 210 Tablet PC Inhoudsopgave 1 Introductie van uw TABLET...2 2 Accu...2 4 Interface en applicaties...4 5 HDMI & Host...5 6 Taal & keyboard...6 7 Beheren van Applicaties...7

Nadere informatie

DOCENTENHANDLEIDING JET-NET WEBCAST

DOCENTENHANDLEIDING JET-NET WEBCAST DOCENTENHANDLEIDING JET-NET WEBCAST Inhoudsopgave Inloggen... 3 Layout... 5 Interactie... 6 Benodigdheden... 8 Praktische tips... 8 Bijlage I : HELP... 9 2 Inloggen Om deel te nemen aan de webcast, moet

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Indoor Navigation System

Indoor Navigation System Project Indoor Navigation System Onderwerp: Indoor Navigation System Document: Handleiding Ontwikkeltools Groep: EII6RTa Auteurs: 1. Jordi Betting 109277 2. Jerome Bos 113180 3. Theo Miltenburg 112883

Nadere informatie