HTML5 App. Herman van Dompseler In samenwerking met SURFnet. 3 augustus 2012 Versie CONCEPT
|
|
|
- Rebecca Bosmans
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Herman van Dompseler In samenwerking met SURFnet 3 augustus 2012 Versie CONCEPT
2 Contents Part 1: Wat is HTML Laat maar zien, wat kan ik met HTML5?... 4 HTML5 Resources... 7 HTML5 Apps... 7 Native vs Hybrid vs Web Apps... 8 Native Apps... 8 Web Apps... 9 Hybride Apps... 9 Een kijkje in de toekomst van Web Apps Ok, maar wat kies ik nu voor mijn project? Beslisboom Scenario s Native vs. Hybrid vs Web Resources Part 2: Hybride Apps uitgewerkt Architectuur Stand Alone - Hybride App Connected - Hybride App App design & App resources Libraries Backend libraries Frontend libraries Werken met Phonegap Audio voorbeeld Part 3: Een App bouwen voor Android Stap 1: Hello World Stap 2: Run en test je app Kopieer je App naar een device Stap 3: Welke Android versie? Stap 4. Directory structuur Stap 5. Icon & Start-up scherm Stap 6. Schermgrootte Schermtype definitie Images en text grootte
3 CSS layouts queries Stap 7: Events (backend) Stap 8: Events (frontend) Stap 9: Off You Go! Bijlage 1 index.html Bijlage 2 page.css Bijlage 3 layout.css Bijlage 4 event.js
4 Part 1: Wat is HTML5 HTML 5 is de nieuwe standaard voor het presenteren van webpagina s. HTML5 is niet één groot nieuw ding, maar een collectie van nieuwe standaarden en features op drie deelgebieden: 1. HTML5 2. Javascript (JS) 3. CSS3 Nieuw staat tussen aanhalingstekens omdat sommige HTML5 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. En ja, je kunt het nu meteen gebruiken. Of de specificatie nu af is of niet, alle browsers/devices ondersteunen een subset van de mogelijkheden. Een webpagina die begint met <!doctype html> is een HTML 5 pagina. Vervolgens is het belangrijk te kijken of de functionaliteit die je nastreeft beschikbaar is voor het platform waarop je het wilt laten zien. In één van de vele desktop browsers, op een Android of ios device. Op staat een overzicht van de functionaliteiten voor de verschillende platformen. Laat maar zien, wat kan ik met HTML5? In eerdere onderzoeken heb we al laten zien wat er zoal met HTML5 mogelijk is. Eind 2010 heeft een theoretisch onderzoek naar de HTML5 <video> tag laten zien wat er mogelijk is op video gebied met HTML5. Een demo pagina toont de implementatie. 4
5 Vervolgens is er begin 2011 onderzoek gedaan naar andere HTML5 elementen. Van verschillende HTML5 elementen is een proefimplementatie gedaan om de resultaten te tonen. Bijvoorbeeld het element <input type= date >. De Opera browser toont dan een datum prikker, daarvoor is geen code meer aan te pas gekomen. 5
6 Of de video wall, geschikt voor verschillende devices: desktop, tablet en mobile met dynamische elementen erin. Met deze video wall, kunnen 9 video s parallel afgespeeld worden. De metadata werd lokaal opgeslagen op het device en is daardoor instant te raadplegen. Eind 2011 is er een proof of concept gemaakt van een HTML5 Video Annotatie Player. Waarmee het mogelijk is een HTML5 video met meerdere mensen te annoteren 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. Ook is er gekeken naar ondertiteling met WebVTT. 6
7 Al deze onderzoeken waren vrij theoretisch en technisch georiënteerd, met proof of concept implementaties. Ze tonen aan dat alles wat denkbaar is, eigenlijk ook met HTML5 te maken is. Kijk eens op of te zien dat het echt mogelijk is. Dit document zal een praktische handleiding worden voor het maken van HTML5 Apps met een eigen App als resultaat. HTML5 Resources HTML specificatie van W3C CSS beschrijving van W3C All HTML 5 All Javascript All CSS 3 ff checken (voor welk platform?) (oh, kan dat ook!) (en dit ook) (wow) HTML5 Apps HTML5 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, net zoals het Internet zich uitbreidt naar andere devices, zoals 7
8 smartphones, tablets, maar denk ook aan auto s, koelkasten en anderen apparaten die aan internet verbonden worden. Zo zal ook HTML5 zich uitbreiden om een interface te bieden aan deze apparaten. De eerste logische stap is een HTML5 interface voor smartphones en tablets. Devices met aanraakschermen die (bijna) altijd verbonden zijn met Internet. Een website die geoptimaliseerd is voor gebruik op een smartphone of tablet wordt een Web App genoemd. Dit is een website die opgevraagd wordt met de browser van het device en die specifiek voor het device is ontworpen. De site reageert op het touchscreen en kan interactie hebben met bijvoorbeeld de GPS positie van het device. Voor een Web App is het typisch om naar een URL te browsen. Web Apps zijn het tegenovergestelde van Native Apps. Native Apps zijn voor een specifiek device gemaakte toepassingen, al dan niet verbonden met het Internet. Native Apps zijn programma s die zonder webbrowser werken, maar juist rechtstreeks op het device zijn aangesloten. Een Native App wordt typisch uit de App store gedownload, waarna deze gebruikt kan worden. Het is een gevecht tussen deze twee uitersten: En er zit nog van alles tussen in. Goed beschouwd zijn er vier typen Apps te onderscheiden. 1. Native Apps, specifiek voor een device gemaakte toepassing, met specifieke code 2. Hybride Apps, voor een device gemaakte toepassing met generieke code 3. Web Apps die specifiek voor een mobiel device/platform zijn gemaakt a. Kunnen geïnstalleerd en gestart worden als Native Apps b. Interactieve/touch gui c. Client side rendering d. Offline available 4. Web sites, een website die geoptimaliseerd is voor mobiele platformen a. Worden bezocht door er naartoe te browsen b. Navigatie UI/algemene look & feel c. Server side rendering d. Alleen online De laatste laten we even buiten beschouwing, een aangepaste website wordt vaak ook als voorbeeld van Web App aangehaald, maar dat doen we hier niet. Dus als in dit document gesproken wordt over Web Apps, dan gaat het om specifiek voor een mobiel device gebouwde toepassing. En wat is dan een HTML5 App? Dat is een App die met HTML5 technologie is gemaakt en dat kan zowel een Web App als een Hybride App opleveren. Native vs Hybrid vs Web Apps Native vs Web apps is een strijd tussen twee filosofieën. Met aan beide kanten voor- en tegenstanders. En waar twee vechten om een been Native Apps De voordelen van Native Apps: 8
9 Direct toegang tot de device hardware, zoals camera s etc. EN direct interactie met het device, zoals notificaties aan de gebruiker EN integratie met andere apps o Web Apps hebben beperkt toegang tot het device 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 Web Apps kunnen een native gevoel geven, door ze te starten vanaf het device en geen browser raamwerk om de App heen te maken. Bijkomend voordeel, de App store: Apps kunnen worden geplaatst in App stores en zijn daardoor makkelijk toegankelijk en kunnen makkelijk op het device 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. Web Apps De voordelen van Web Apps: Write once, run many, een generiek platform voor meerdere devices o Native Apps moeten voor iedere platform opnieuw gebouwd worden Bijkomend voordeel, content beheer: 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 owners. De overeenkomsten tussen Native en Web Apps: Ja, die zijn er ook Beiden typen apps zijn online/offline te gebruiken De programmeertalen waarin Native dan wel HTML5 Apps worden gemaakt verschillen wel: Android is Java, ios is objective C en in HTML5 gebruik je Javascript. Maar met alle talen is hetzelfde te bereiken. Het is vaak de persoonlijke voorkeur van de maker die bepaalt wat het beste werkt. Voor native development heeft iedere aanbieder zijn eigen software development kit (SDK) waarmee ontwikkelaars aan de slag kunnen. Voor Web Apps gebruikt de ontwikkelaar zijn eigen favoriete tools. Hybride Apps Even samenvattend: Native Apps zijn voor een specifiek device gemaakte toepassingen en een Web App is een website, specifiek voor een device gemaakt. 9
10 Een Hybride App is de combinatie: een Native App met HTML embedded. De HTML5, 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: Write once, in HTML5 Voordelen ten opzichte van Web Apps: Gebruik een framework (Phonegap bv.), die de directe toegang tot het device omzet in webservices die met HTML5 zijn te raadplegen. Kunnen in App stores worden geplaatst en kan dus ook voor betaald worden. Een kijkje in de toekomst van Web Apps Web Apps 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 Web App stores, om ook met Web Apps geld te kunnen verdienen en ze makkelijk te kunnen vinden/installeren. o Open App Market is een Web App store: o Google heeft een eigen Webstore, o Mozilla werkt aan een Web App store, US/apps/partners/ Er zullen steeds meer toegangsmogelijkheden komen voor Web Apps om van device specifieke toepassingen gebruik te maken. GPS is er bijvoorbeeld al. Meer zal er volgen. Ok, maar wat kies ik nu voor mijn project? Je kunt een afweging maken op basis van de genoemde verschillen tussen de type Apps. Onderstaande vergelijking kan je daarbij helpen. Hier worden de Apps vergeleken op: Device Access: de toegang tot de verschillende functionaliteiten van het device. o Web Apps hebben duidelijk minder toegang tot functionaliteiten ten opzichte van de andere twee typen. Speed: de snelheid waarmee de App moet werken en reageren. o Native Apps zijn het snelst te maken. 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 device specifieke expertise nodig is. App store (en het Approval Proces): heeft de App een plekje in de App store o Web Apps zijn niet in een App store te plaatsen 10
11 Taken from: Het zal echter niet voldoende zijn om op deze manier naar je 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 Wil je naadloos aansluiten bij het device of juist aansluiten bij je eigen huisstijl/website. Waar zitten de gebruikers. o Je kunt bijvoorbeeld specifiek willen ontwikkelen voor iphone/ipad gebruikers. Met welke technologie zijn de eigen ontwikkelaars bekend. o Wat bijvoorbeeld HTML5 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 je bij het maken van een keuze. Er zijn drie gezichtspunten. Bekijk het ontwikkelen van de App: 1. Vanuit je eigen wens om een app te maken. 2. Vanuit de gebruikers van je 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 je gebruikt als Web App de minste kosten met zich mee brengt. Voor het ontwikkelen van device specifieke apps, zijn de kosten hoger en afhankelijk van het design. 11
12 12
13 Scenario s 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 device. De flowchart brengt je bij: Hybrid App. (Native is ook een optie) 3. Je hebt online content aan te bieden en een mooie vormgeving ontwikkelt. Je hebt niet specifieke device toegang nodig. Je wilt wel dat mensen voor gebruik van je App betalen De flowchart brengt je bij: Hybrid 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 device. Je wilt dit net als je website gratis aanbieden De flowchart brengt je bij: Web App. 5. Je wilt dat je website ook op een smartphone of tablet is te bekijken met de browser van het device. De flowchart brengt je bij: Optimaliseer je website. Native vs. Hybrid vs Web Resources The battle The debate an in-depth video of the differences 13
14 Part 2: Hybride Apps uitgewerkt In dit hoofdstuk duiken we de wereld van Hybride Apps in. Om de App in een breder kader te plaatsen wordt eerst de architectuur geschetst. Vervolgens een klein beetje aandacht voor het design van de APP en daarna zoomen we in op de belangrijkste libraries die nodig zijn. 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 build proces wordt een App gemaakt. (.app of.apk) De app wordt in een App store aangeboden van waaruit hij op een device kan worden gedownload en geïnstalleerd. iphone en Android App ontwikkel methode 14
15 Stand Alone - Hybride App Om te kunnen programmeren in HTML5, CSS3 en Javascript moet er een brug gevormd tussen deze code en de App SDK. Hiervoor zijn verschillende Libraries gemaakt: 1. Frontend Libraries: javascript libraries die het maken van de look & feel van je applicatie verzorgen. Een voorbeeld hiervan is jquery Mobile. 2. Backend Libraries: javascript libraries die toegang tot de SDK en functionaliteiten van het device verzorgen. Een voorbeeld hiervan is Phonegap. Hybride App ontwikkel methode 15
16 Connected - Hybride App In de standalone Hybride App staat alle HTML5, 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. Net zoals een bestaande website de web resources gebruikt. 16
17 Hybride App + Website ontwikkel methode In deze architectuur zijn, ten opzichte van de stand alone versie, twee stromen toegevoegd. Daarmee worden een API server en een Web server gerealiseerd. 1. De backend 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 frontend stroom: vanuit HTML5, 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 device. Merk op dat dit ook een smartphone of tablet kan zijn. In deze connected architectuur zie je duidelijk de belangrijkste overeenkomsten tussen ontwikkelen voor web sites en Apps: Programmeer in HTML5, 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 device. 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 je met een tablet of laptop op schoot aan het browsen en lezen bent. 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 device 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 beantwoordt moet worden alvorens een Connected Hybride App te gaan ontwikkelen is: 17
18 Welke resource moet in de App en welke kan via de API opgehaald worden? Er zijn twee uitgangspunten: 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 device zelf. Hierdoor wordt de netwerkbelasting zo klein mogelijk gehouden en wordt de response van de API zo snel mogelijk gemaakt. Libraries In de architectuur is aangegeven dat gebruik gemaakt kan worden van verschillende libraries. Libraries verzorgen de koppeling met het achterliggende device, in dit document backend libraries genoemd. Of libraries leveren interface elementen, frontend libraries genoemd. Backend libraries Backend libraries maken verschillende functionaliteiten van een device 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. ( ). Eeen 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. 18
19 jqtouch: en Zepto.js: alternatieve javascript raamwerken voor mobile devices. Sencha, biedt een compleet en uitgebreid raamwerk voor mobile development. Dojo, focused op het maken van een native look & feel mobile App. Werken met Phonegap Phonegap is een Javascript library, waarin functies zijn gedefinieerd die je kunt gebruiken om toegang te krijgen tot functionaliteiten van een device. Of het device nu een Android, iphone of ander device is, de Javascript functies zijn hetzelfde. Dit is een overzicht van de elementen waar Phonegap toegang toe geeft: Events, Events voor starten en pauzeren van App etc. Capture, voor het opslaan van geluid, foto s en videos met de bijbehorende tools van het device. Camera, voor het maken van een foto met de camera tool van het device. o Kan dus ook met capture, wat is het verschil? 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 device. Compas, het kompas. o Geeft antwoord op de vraag welke kant wijst het device op. Geolocation, de GPS. o Geeft antwoord op de vraag waar bevindt het device zich. File, voor het maken van files op het device Storage, voor het maken van een Web SQL database voor het device Contacts, geeft toegang tot het adresboek van het device Notification, geeft toegang tot tekstuele notificaties, maar ook geluiden en vibraties etc. Device, geeft informatie over de hardware en software van het device Connection, geeft information over de netwerk status, wifi of 3G etc. De interface tot de functies van deze elementen staat op: 19
20 Audio voorbeeld Voor sommige functies is het mogelijk meerdere oplossing te kiezen, neem bijvoorbeeld het afspelen van geluid. De HTML5 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 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 HTML5 oplossing is het alleen mogelijk af te spelen. 20
21 Part 3: Een App bouwen voor Android Hieronder volgt een stap voor stap handleiding voor het bouwen van een Hybride App met gebruik van Phonegap en de Android SDK. Stap 1: Hello World Hello World! Maak je eerste Phonegap project gebruikmakend van de handleiding op: Deze handleiding volgen komt neer op de volgende acties: Installeer 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 je app Daarvoor heb je eerder de ADT plugin geïnstalleerd. Het is belangrijk te begrijpen hoe je deze plugin kunt gebruiken om verschillende devices te simuleren. Hieronder zie je twee devices voor tests. 21
22 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 Als je een applicatie wilt testen, dan klik je op Run en kies je een van deze virtual devices waarop je wilt draaien. Kopieer je App naar een device Je zult je App eerder of later ook willen testen op een real device, naast deze virtuele devices. Daarvoor hoef je je App niet meteen in een store te plaatsen, maar kun je een zelf gemaakte.apk file op je device installeren. Je moet daarvoor wel iets doen. Maak eerst je eigen certificaaat waarmee je de App signeerd. o maak met keytool een key + keystore Exporteer je App o right klik projectnaam -> android tools -> export signed application package Verplaats.apk bestand naar je device o Koppel met usb je device en kopieer bestand 22
23 Installeer de.apk op je device. Het maken van het certificaat hoef je maar één keer te doen, je kunt hiermee alle toekomstige app signeren. Stap 3: Welke Android versie? 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 je 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 nu 16%. Tijdens het opzetten van je project dien je hierin een keuze te maken. Stap 4. Directory structuur Tijdens het opzetten van je project ben je al verschillende directories in de Android SDK tegen gekomen. De belangrijkste voor het ontwikkelen van een HTML5 App is de directory assets/www. Dat is in feite de documentroot, zoals je hem ook gewend bent 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. 23
24 Eclipse explorer voor Android Stap 5. Icon & Start-up scherm Alvorens je App start, zie je een start icoon, die jouw App representeert. Na klikken op het icoon verschijnt vervolgens een splash screen gedurende het opstarten van je App. Deze images moet je voor ieder platform apart behandelen. 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. Als je een splash screen wilt tonen als je App start, dan geef je voor Android een splash screen op in de belangrijkste Java file met de volgende twee regels: 24
25 super.setintegerproperty("splashscreen", R.drawable.splash); super.loadurl("file:///android_asset/www/index.html", 10000); Dit splash screen blijft tien seconden staan, na het laden van je App kun je het screen eventueel eerder verwijderen 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 Op lees je over de verschillende formaten waar je rekening mee kan/moet houden. Android verdeeld de formaten met een eenheid: 'dp', dat staat voor density pixel. Een density pixel is het zelfde als een gewone 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 je comfortabel met je vinger kunt aanwijzen. Bij een dichtheid van het scherm van 240 dpi is de density 1,5 x zo groot. Dat betekent dat je op het scherm ook 1.5 keer zo grootte buttons moet neerzetten, 72x72 pixels dus, om het zelfde 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 Ontwikkel je voor Android specifiek, dan kun je voor ieder formaat de juiste images maken en in de daarvoor bestemde directory neerzetten. De Android SDK bepaalt dan welk image, voor het device waar de App op draait, het meest geschikt is. 25
26 Schermtype definitie Het design van je App is hier van cruciaal belang. De drie belangrijkste designs die zijn te onderscheiden zijn: Ontwikkel voor een smartphone o width: < 768 o orientation: portrait o dpi: 160 Ontwikkel voor een tablet o width: > 768 o orientation: landscape o dpi: 160 Ontwikkel voor high resolution, 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 twee koloms applicatie voor een tablet en dezelfde data in één kolom voor een high resolution smartphone. Twee koloms tablet layout 26
27 Eén kolom smartphone layout Het voorbeeld van de code om dit te realiseren wordt in de bijlage gegeven. 1. Index.html staat in bijlage 1, dit is de html pagina 2. Page.css staat in bijlage 2, dit is de default vormgeving, zoals deze op het tablet wordt getoond. 27
28 3. Layout.css staat in bijlage 3, dit is de layout die wijzigt voor de smartphone en voor high density schermen. 4. Event.js staat in bijlage 4, dit is de koppeling tussen joouw applicatie en de Phonegap en jquerymobile events. 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 gebruik je 72x72 pixels. Voor text grootte geldt hetzelfde. Normale text grootte is 12 pt. Voor high density schermen gebruik je dan 18 pt, zodat de tekst leesbaar blijft. Je kunt voor verschillende densities verschillende images gaan gebruiken. Let wel op dat je al je images in CSS moet definiëren om dit te laten werken. Een alternatief is om van vector images gebruik te gaan maken in SVG. Vector images is ook een HTML5 goodie en.svg files kun je gebruiken in de <img src= image.svg > tag. Een tool om SVG images te maken is Inkscape, CSS layouts queries Om de juiste layout te kunnen maken moet allereerst in de HTML code gedefinieerd worden hoe het scherm wordt gezien. Dit is de zogenaamde viewport. Voor gebruik met CSS willen we graag dat de viewport net zo groot is als het scherm. Zodat het device niet automatisch gaat zoomen. Deze viewport regel wordt opgenomen in de index.html: <meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densitydpi=device-dpi" /> In CSS kunnen we vervolgens het device herkennen en de layout afhankelijk maken queries: 1. Met CSS kun je voor portrait of landscape mode ontwikkelen: /* for portrait or landscape mode screen and (orientation: portrait) { /* portrait layout screen and (orientation: landscape) { /* landscape layout */ 2. Het ontwerp afhankelijk van de breedte van het scherm maken: /* fixed width layout */ /* standard width screen and (max-width: 767px) { 28
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
HTML 5 App. Herman van Dompseler in opdracht van SURFnet. 20 december 2012 Versie 0.91
Herman van Dompseler in opdracht van SURFnet 20 december 2012 Versie 0.91 Contents Inleiding... 4 Wat is HTML 5... 4 Wat is er mogelijk met HTML 5?... 5 HTML 5 handige links... 8 Part 1: HTML 5 Apps...
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
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
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,
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
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
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
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
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,
Talk Nerdy To Me 16-05-2012 NHL. Responsive Webdesign. Maarten van de Voorde mr10.nl Jan-Wessel Hovingh waxle.com
Talk Nerdy To Me 16-05-2012 NHL Responsive Webdesign Maarten van de Voorde mr10.nl Jan-Wessel Hovingh waxle.com 1.1 Waarom is webdesign voor mobiel gebruik onvermijdelijk? in 2010 was er 600% groei in
Onderzoeksvaardigheden 2
Performance van Phonegap Naam: Datum: april 2012 Studentnummer: 0235938 Opleiding: CMD Docenten: Pauline Krebbers Modulecode: MEDMO101DT Modulenaam: Onderzoeksvaardigheden 2 / Media & Onderzoek Inhoudsopgave
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
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:
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
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
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
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
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
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
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
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.
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
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
Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >
Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken
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
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
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
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
Scripting 2 TUTORIAL EEN APP ONTWIKKELEN VOOR ANDROID MET PROCESSING. ellipse(screenwidth/2, screenheight/2, 140,140); DOOR THIERRY BRANDERHORST
Scripting 2 ellipse(screenwidth/2, screenheight/2, 140,140); TUTORIAL EEN APP ONTWIKKELEN VOOR ANDROID MET PROCESSING. DOOR THIERRY BRANDERHORST ANDROID APPLICATIES Tegenwoordig zijn er duizenden applicaties
Handleiding Woonz.nl iframe
Handleiding Woonz.nl iframe Woonz.nl biedt de mogelijkheid om uw actuele woningaanbod op Woonz.nl op uw website te tonen. Hiervoor dient u eerst een API-key te ontvangen van Woonz.nl, dit is een sleutel
EM6250 Firmware update V030507
EM6250 Firmware update V030507 EM6250 Firmware update 2 NEDERLANDS/ENGLISH Table of contents 1.0 (NL) Introductie... 3 2.0 (NL) Firmware installeren... 3 3.0 (NL) Release notes:... 5 1.0 (UK) Introduction...
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
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,
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
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.
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
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
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...
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
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:
INHOUD 1. Instructie installatie 2X client iphone & ipad... 4. 2. Downloaden app 2x client... 4. 3. Connections... 6
INHOUD 1. Instructie installatie 2X client iphone & ipad... 4 2. Downloaden app 2x client... 4 3. Connections... 6 4. Werkplek Standby connection... 7 a. Een nieuwe connection toevoegen... 7 Alias... 8
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
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
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
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
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
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
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
Handleiding Certificaat installeren
Handleiding Certificaat installeren Inhoudsopgave 1. Installatie op PC s met Windows 2 2. Voor niet-windows PC s en andere apparatuur 4 1.1. Microsoft Internet Explorer / Google Chrome 5 1.2. Mozilla Firefox
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 -
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
Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman
Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,
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
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
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...
Pro templates. Copyright Starteenwinkel.nl
Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen
PageSpeed Insights. JavaScript en CSS in content boven de vouw die het weergeven blokkeren, verwijderen
PageSpeed Insights 69 / 100 Snelheid Dit moet worden gecorrigeerd: JavaScript en CSS in content boven de vouw die het weergeven blokkeren, verwijderen Je pagina heeft 1 blokkerende CSS-bronnen. Dit veroorzaakt
Informatietechnologie 1. Cascading Style Sheets. Responsive web design - Positioning. Kristof Michiels
Informatietechnologie 1 Cascading Style Sheets Responsive web design - Positioning Kristof Michiels In deze presentatie Wat is Responsive web design? Waarom belangrijk? Vloeiende layouts Media queries
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.
Handleiding. Certificaat installeren
Handleiding Certificaat installeren Inhoudsopgave 1. Installatie op PC s met Windows 2 2. Voor niet-windows PC s en andere apparatuur 3 1.1. Microsoft Internet Explorer / Google Chrome 3 1.2. Mozilla Firefox
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
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
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
STAGE VERSLAG LVB NETWORKS
STAGE VERSLAG LVB NETWORKS Stagiair : Praktijkopleider : Stagebegeleider : Periode : Inlever Datum : Michael Scherpenisse Jeffrey van Draanen Bert de Boer 1 2 April, 2015 Opmerking Beoordeling stageverslag:
DrICTVoip.dll v 2.1 Informatie en handleiding
DrICTVoip.dll v 2.1 Informatie en handleiding Nieuw in deze versie : Koppeling voor web gebaseerde toepassingen (DrICTVoIPwebClient.exe) (zie hoofdstuk 8) 1. Inleiding Met de DrICTVoIP.DLL maakt u uw software
QUICK START. IP cam viewer.
QUICK START IP cam viewer www.profile.eu 1 Hardware Installation Verbind de camera met de stroom via de meegeleverde adaptor Verbind de camera met uw router via de meegeleverde netwerkkabel Verbind de
Mobiel werken. 15.12.10 Mobiel Werken Sven Moreels 1
Mobiel werken 15.12.10 Mobiel Werken Sven Moreels 1 Inhoud: Definitie van Mobiel werken Wat heb je nodig om mobiel te werken? Historiek mobiele connecties Historiek van de toestellen Operating systems
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
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
design ook items uitsnijden
(fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het
i ll take off to the cloud
i ll take off to the cloud Webbased applicaties gebouwd door ILE programmeurs Gepresenteerd door: Drs. Martijn van Breden Lead software architect Pantheon Automatisering 26-4-2017 1 Historie Pantheon Ontstaan
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
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,
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
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
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
Drupal theming. 28 april 2014 - CVO Crescendo
Drupal theming 28 april 2014 - CVO Crescendo About-me.tpl.php Esther De Jonghe Drupal front end developer verleden: @cronos, @adforce, @puresign nu: freelance (wwwonderland) @estherdejonghe Wat is theming?
Mobile Watch Snelle Handleiding. Bezoek voor meer informatie
Mobile Watch Snelle Handleiding Ⅰ. Software installatie - Software download: Zoek voor "360Eye"in de Iphone App Store en installeer de applicatie. Of scan de QR Code aan de rechterzeide. Voor meer details
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
Cookieverklaring Green Tech Support B.V. KVK:
Cookieverklaring Green Tech Support B.V. KVK: 69811245 Cookieverklaring Laatst gewijzigd op 28 augustus 2018 Dit is de cookieverklaring van Green Tech Support B.V. (Kamer van Koophandel-nummer 69811245).
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
APEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010
APEX Templates OGH APEX dag 30 maart Art Melssen Introductie Over de spreker 4 jaar APEX ervaring / 7 jaar Oracle 10 jaar web technologie ervaring APEX trajecten o.a. bij Centraal Boekhuis en eboekhuis
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
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
Welkom bij mijn website tutorial (Deel 2)
Welkom bij mijn website tutorial (Deel 2) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
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
Delft-FEWS & Web Services
Delft-FEWS & Web Services Presentatie Delft-FEWS Gebruikers dag 2018 Marc van Dijk, Rudie Ekkelenkamp, Stef Hummel 5 Juni 2018 Delft-FEWS & (Web) Services 1. Delft-FEWS 2. Roadmap 3. Standaarden Verzamelen
Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website
Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website Wat we gaan doen 1. Wie ben ik? 2. Voor- en nadelen bestaande templates en eigen templates 3. Eigen template op basis
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
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,
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
Introductie. Handleiding: Owncloud instellen
Introductie QSIT Owncloud is de hollandse en 100% privacy-veilige variant van Dropbox of Google Drive. Het stelt u in staat om vanaf elk apparaat aan dezelfde bestanden te werken. Omdat wij onze servers
Functioneel Ontwerp / Wireframes:
Functioneel Ontwerp / Wireframes: Het functioneel ontwerp van de ilands applicatie voor op de iphone is gebaseerd op het iphone Human Interface Guidelines handboek geschreven door Apple Inc 2007. Rounded-Rectangle
Websitecursus deel 1 HTML
Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015 Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!
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
Self-Service Portal Registeren, downloaden & activeren van een soft token
Self-Service Portal Registeren, downloaden & activeren van een soft token Document versie: 3.2 Uitgavedatum: september 2014 Inhoud Introductie... 3 Over 2 e factor authenticatie... 3 Over egrid authenticatie...
Cisco Cloud. Collaboration. Ronald Zondervan David Betlem September, 2011. Presentation_ID 2010 Cisco Systems, Inc. All rights reserved.
Cisco Cloud Collaboration Ronald Zondervan David Betlem September, 2011 1 E Open architectuur Uitgangspunten Gebaseerd op Open Standaarden telefonie, video, desktop integratie, beschikbaarheidsstatus (presence)