Verzin een App. Het mag voor je stagebedrijf zijn, of totaal iets anders. Het mag zelfs met techniek en mogelijkheden die nog helemaal niet bestaan. Je kan uiteraard ook alle bestaande sensoren van je telefoon gebruiken, zoals de camera, de microfoon, de GPS, gyro sensors, proximity sensors, en dingen als hartslag en bloeddruk, die via een Watch kunnen.

Deze opdracht duurt meerdere lessen. De eerste les is stap 1, zie verderop.

Adobe XD

In de lessen daarna gaan we voor het ontwerp van de app, dus voor een klikbaar prototype Adobe XD gebruiken. Zie deze intro en korte uitleg:

Kortom: ontwerp vijf schermen op telefoonformaat, met knoppen erbij, en laat de knoppen of de hele schermen linken naar de volgende schermen. Klik de knop “Prototype” linksboven, en klik dan op de plaatjes > klik het blauwe icoon > sleep de pijl naar het volgende scherm. Je kan ook weer bij “prototype” op Design klikken, dan kun je bijvoorbeeld rechthoekjes tekenen, die vullen met transparante kleur, en dan kun je weer Prototype klikken en deze knop laten linken naar een ander scherm.

Lesplanner

1. STAP 1: Verzin de app en beschrijf het idee in een elevator pitch: een korte tekst om je app te beschrijven, met een leuke goede naam. Doe onderzoek naar de concurrenten en naar een mogelijk goed ontwerp: zoek 3 inspirerende apps die je qua ontwerp zou kunnen gebruiken, of onderdelen daarvan. Maak van elke app dan minstens drie screenshots en schrijf bij alle plaatjes een korte tekst waarom en wat je daar wil gebruiken.
2. STAP 2: Idee, uitvoering en ontwerp van jouw app,
   in minstens 5 screenshots + logo + favicon + naam.
   Dit komt ook op die pagina op je website.
   De ontwerpen kan je het beste maken in Adobe XD of Figma
3. STAP 3: Zet de app werkend op je telefoon (via de XD app op je telefoon), vanaf je startscherm (via Share > rechts bij View setting > User Testing > Create Link  > kopieer de link en open die op je telefoon in je browser > klik: Voeg toe aan Beginscherm, of op Android in je browser > 3 puntjes > Voeg toe aan startscherm)
4. Zet de link ook in je WordPress-artikel, zodat je vanaf dat artikel ook meteen naar de web app kan.

STAP 1: Idee en onderzoek

Beschrijf je idee in een korte tekst, twee a drie alinea’s, oftewel een elevator pitch. Verzin een goed naam of doe meerdere mogelijkheden. Lever het in als een PDF: tekst met plaatjes. Het maakt niet uit in welk programma je dat maakt. Het idee mag van alles zijn. Verzin een naam en de functionaliteit. Het hoeft niet echt te werken, het gaat om een prototype, waar je alleen doorheen hoeft te klikken om het te presenteren en te testen. Denk ook aan alle mogelijkheden zoals Notificaties, en alle sensoren zoals GPS, Camera, 3D, licht, beweging (gyro), geluid. Die kan je allemaal gebruiken.

Maar je mag ook dingen verzinnen die nog helemaal niet bestaan.

• Verzin een goede naam voor de app
• Zoek 3 apps die een goed design hebben waar je wat van kan gebruiken, maak van elke app 3 screenshots. Dus 9 foto’s in totaal. Zet bij elk plaatje een korte tekst waarom je deze koos.

STAP 2: Schetsen

Schets de Web App, dus maak het design. Formaat: jouw telefoon, dus maak bijvoorbeeld een screenshot en open dat in Photoshop. Of gebruik Adobe XD. en kies daar jouw telefoon-formaat. Gratis software is er ook, zoals Figma of Canvas.

Op papier mag ook, of in Photoshop, of in Indesign. Werk zo minstens 5 schermen van de App verder uit. Met vormgeving, kleuren, logo, typografie, knoppen, menu. Gebruik als inspiratie voor het ontwerp de designs uit stap 1 en gebruik standaard onderdelen zoals het keyboard op je telefoon in de schermen waar je dat nog hebt.

• Ontwerp dus 5 schermen van de app
• Ontwerp ook het logo, en een favicon van 500×500 pixels (het app-icoon op je startscherm).

Favicon / app icoon

Maak ook een App icon, 500 x 500 pixels, noem het favicon.png (via Save for Web, Cmd-alt-shift-S > png 24). Als je het in XD maakt kun je de app werkend bekijken op je telefoon, via de Adobe XD app daar. De favicon werkt daar helaas niet op Android. Op IOS kan het via een omweg:

IOS > Opdrachten
Open app > XD > instellingen: hier je favicon kiezen

Sensoren

Er zitten veel sensoren in een telefoon. Die kun je allemaal gebruiken. Zie deze lijst met uitleg. Maar je mag ook dingen verzinnen die nog niet kunnen. Zoals een hartslag- of bloeddrukmeter. Dan kan via je horloge, dus eigenlijk is dat er ook al echt.

Visueel ontwerp

De ontwerpschetsen kan je beginnen op papier, zodat je makkelijk en snel kan testen en aanpassen. Maar het kan ook meteen in Photoshop, Illustrator, Indesign, XD of in wat voor andere software dan ook. Je kan zelfs de papieren tekeningen fotograferen en die plaatjes gebruiken. Interface-elementen zoals knoppen en toetsenbord kun je Googlen (“IOS gui psd” of “IOS UI Kit”) en gebruiken in je schetsen. GUI staat voor Graphical User Interface.

Je kan ook speciale software gebruiken zoals Sketch (99,- in de App Store, kan ook met 50% onderwijskorting). Dat programma combineert vector met pixel en je kan het project direct op je smartphone zien. Je kan exporteren naar prototyping tools zoals Marvel (via Dropbox of via een plugin) of Invision (via Dropbox). Met Photoshop CC 2015 kun je ook je ontwerp live op je mobiel / tablet bekijken, met Adobe Preview CC, een gratis download in de App Store. Zie dit artikel.

In de nieuwere Adobe CC zit Adobe XD oftewel Xperience Design. Dat is een compleet programma voor het maken van web app prototypes.

Het gaat erom dat het visuele ontwerp duidelijk wordt, in minstens vijf schermen, en dat je zo het doorklikken, de usibility en het ontwerp kan testen. Logo, kleur, typografie, vormgeving van het menu, beeldgebruik. Waar moet je klikken, wat kun je doen, hoe kan je terug. Eventueel ook al de animaties, in de interface bijvoorbeeld. Animaties zijn niet alleen versierend maar vaak ook functioneel: denk aan de subtiele bewegingen op IOS, zoals bij swipe naar beneden voor een update.

De losse schermen kun je klikbaar maken met HTML of met andere software. Je kan ook pdf’s uit Indesign gebruiken. Presenteren kan op een telefoon of in een browser. Pdf’s kan je ook presenteren op mobiel, via Dropbox. Op een desktop kan dat met Adobe Reader, die je fullscreen kan zetten met Cmd-L. HTML kan fullscreen op mobiel via onderstaande tips.

STAP 3:
Web App Prototype in HTML/CSS

Dit vervalt als je alles in Adobe XD of iets vergelijkbaars zoals Figma doet: want die kan je meteen klikbaar openen op je telefoon.

Zet de app werkend op je telefoon (via de XD app op je telefoon), vanaf je startscherm (via Share > rechts bij View setting > User Testing > Create Link  > kopieer de link en open die op je telefoon in je browser > klik: Voeg toe aan Beginscherm, of op Android in je browser > 3 puntjes > Voeg toe aan startscherm.

Lever diezelfde link ook in op Teams bij deze opdracht.

Een web app is een gewone website met een manifest.json bestand, zodat het op de telefoon als een echte app werkt:

manifest.json

Plak onderstaande code in een nieuw document, verander 3x de APPNAAM en bewaar het als manifest.json in de hoofdmap (het moet op een Secure Server staan, dus https://):

{
"name": "APPNAAM",
"short_name": "APPNAAM",
"start_url": "https://aartjan.nl/adem",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#bbb",
"description": "hierjetekst",
"icons": [

{
"src": "favicon.png",
"sizes": "512x512",
"type": "image/png"
}],
"scope": "/",
"id": "APPNAAM",
"background_color": "white"
}

HTML maken en uploaden

Zet je 5 plaatjes en je favicon.png in een map “app” in de map “websites”.
Noem de plaatjes 1.jpg, 2.jpg etc
De map “app” met alle HTML-pagina’s, plaatjes en manifest.json moet je uploaden.
Zie hieronder hoe je die allemaal maakt (of kijk helemaal onderaan voor de HTML)

Je app staat nu online op ROCstudent.nl/ftp/jevoornaam/app
Kijk op je telefoon of het werkt, en voeg de app dan toe aan je startscherm.

De plaatjes moet je croppen zonder de batterijbalk, in Photoshop > Crop. En dan bewaren via Save for Web, Cmd-alt-shift-S > jpg High.

Maak voor elk scherm een eigen HTML-pagina (index.html, 2.html, 3.html etc). Laat de plaatjes telkens linken naar de volgende pagina.

Maak eerst de home-pagina: die heet index.html.Bewaar in de map “app”. Als die klaar is kun je de andere pagina’s maken met Bewaar-Als. Zie hieronder (of kijk onderaan voor de complete HTML-code).

• Zet het eerste plaatje in de <body>, via Insert Image
  of tik deze code:   <img src=”1.jpg”> onder de <body>
• Zet bij het plaatje via de Properties de width 100%, en de height moet weg.
• Maak het plaatje klikbaar via de het venster Eigenschappen > Koppeling naar de volgende pagina: 2.html.
• Verander de <title> naar de naam van je app
• Plak in de <head> dit stukje css:
  <style>
  body {margin: 0; padding:0; background:black;}
  a img {border:none}
  </style>

Dan nog wat stappen met knip-en-plak:

• Maak de pagina responsive en fullscreen op je mobiel, zie hieronder
• Zorg dat de app fullscreen blijft, met het script hieronder
• Maak het manifest.json, zie hieronder

En dan alles uploaden, testen en bekijken:

• Zet de map “app” online (uploaden)
• Bekijk het op je mobiel: rocstudent.nl/ftp/jenaam/app
• Voeg die website toe aan je Homescreen (op IOS via de knop onderaan je scherm, op Android via de 3 puntjes). Start de App nu vanaf je homescreen.

Responsive code

[DIT HOEFT NIET MEER als je een manifest gebruikt]
Zet onderstaand in de <head> om de pagina responsive te maken en de App fullscreen te openen na Toevoegen aan Homescreen. Verander APPNAAM. Dat is de naam van de App die onder de knop (jouw favicon) komt te staan.

<link rel="manifest" href="manifest.json">    

<meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="msapplication-starturl" content="index.html">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="APPNAAM">
<meta name="application-name" content="APPNAAM">

<link rel="apple-touch-icon" href="favicon.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="shortcut icon" href="favicon.png">

Web App prototype fullscreen houden

[DIT HOEFT NIET MEER als je een manifest gebruikt]
Onderstaand script zorgt ervoor dat je de Web App fullscreen blijft, ook na het klikken op een interne link. Zet het script in de <head>.

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(chref=d.href).replace(e.href,"").indexOf("#")&&(!/^[a-z\+\.\-]+:/i.test(chref)||chref.indexOf(e.protocol+"//"+e.host)===0)&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone");
</script>

ptioneel: CSS Image Preloader

Je kan een CSS-preloader aan de <style> van index.html toevoegen, zodat het tweede plaatje (en evt derde) van tevoren ingeladen wordt en de gebruiker niet hoeft te wachten:

body:after{
 position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
 content: url(2.jpg) url(3.jpg);
}

Zet dat op elke pagina en verander 2.jpg (en/of 3.jpg)

Meer Prototyping tools

Er zijn tools – ook vaak gratis – om de schermen van een web app prototype klikbaar te maken. Zo kan je de usability van de interface zien en testen. Je kan dat ook direct in HTML doen, bijvoorbeeld met Dreamweaver. In HTML kan je volledig werkende web apps maken, maar je kan ook de schermen los in pagina’s zetten, zonder functionaliteit, en de plaatjes alleen klikbaar maken. Ditzelfde kan je ook doen met apps als Firefly.

Zie ook dit artikel met een vergelijking of dit artikel. In de nieuwste Adobe CC zit ook Adobe XD oftewel Xperience Design. Hier een lijst met andere tools, waarbij Marvel en Invision de beste en ook nog gratis zijn:
marvelapp.com
appsketcher.com
invisionapp.com

justinmind.com
proto.io
fluidui.com
flinto.com
popapp.in
balsamic

Het prototype kun je toevoegen aan je homescreen (op IOS via de knop midden onder, op Android via de drie puntjes). Dan is het net als een echte App, met icoon op het homescreen, die daarna fullscreen start. Er bestaan ook javascripts die de gebruiker vragen om de website toe te voegen aan het homescreen.

Als je alleen een onderdeel van een plaatje klikbaar wil maken, en niet het geheel, dan kan dat met Javascript en hotspots (standaardfunctie in Dreamweaver) of door het plaatje op te delen in stukjes die apart klikbaar moeten zijn. De stukjes beeld kan je naast- en onder elkaar zetten, tegen elkaar aan. Ruimte tussen plaatjes kan je weghalen met inline CSS:

<img src="2.jpg" style="margin-top:-5px; margin-bottom:-5px">

Een echte App moet uiteindelijk in de App Store van Apple (en in de Google Play store) terechtkomen. Voor IOS heb je een developer account nodig. Een HTML-app zou je naar deze systemen kunen porten. Native IOS Apps zijn tegenwoordig meestal in Swift gemaakt.

Je kan een klikbaar web app prototype ook maken in Indesign, met als output een klikbare PDF. Elk element op een pagina kun je klikbaar maken. De PDF kan je full-screen tonen in Adobe Reader, met Ctrl-L. Op IOS kun je een PDF fullscreen tonen door erop te tappen vanuit Dropbox.

LESPLANNER

1. Les 1: Uitleg
2. Les 2: Presenteer je idee voor de klas. De klas geeft feedback.
3. Les 3: Verzin een naam voor je app, en maak een favicon / logo van 500×500 pixels (dat is het icoon voor op je telefoon)
   Zoek 3 apps die een goed design hebben waar je wat van kan gebruiken, maak van elke app 3 screenshots. Dus 9 schermen in totaal.
   Maak er een pagina van in WordPress met een galerie (+ link to media + Easy Fancybox aanzetten).  Zet bij elk plaatje een tekst (zowel als bijschrift als in de “Alt”).
   Schrijf een tekst van 2 of 3 alinea’s om je app te beschrijven: een elevator pitch.
   Lever de url van je wordpress-pagina hier in.
4. Les 4: download een UI kit en ga de schermen maken. Minstens 5 schermen. Kan in Photoshop maar mag ook in andere software. Zelfs tekenen mag.
5. Les 5: verwerk de feedback
6. Les 6: HTML in Dreamweaver, uploaden naar ROCstudent.nl/ftp/jenaam/app, testen, feedback verwerken
7. Les 7: Presenteren en /of verder werken
8. Les 8: Beoordeling
9. Les 9: Herkansing.

<!doctype html>
<html>
<head>

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(chref=d.href).replace(e.href,"").indexOf("#")&&(!/^[a-z\+\.\-]+:/i.test(chref)||chref.indexOf(e.protocol+"//"+e.host)===0)&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone");
</script>

<link rel="manifest" href="manifest.json">

<meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="msapplication-starturl" content="index.html">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="APPNAAM">
<meta name="application-name" content="APPNAAM">

<link rel="apple-touch-icon" href="favicon.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="shortcut icon" href="favicon.png">
<style>
body {margin: 0; padding:0; background:black;}
a img {border:none}
</style>
<meta charset="UTF-8">
<title>APPNAAM</title>
</head>

<body>

<a href="2.html"><img src="1.jpg" width="100%" /></a>

</body></html>