Tien weken stageverslag Renske Marris

tien weken stage verslag

Renske Marris | webdesigner

januari maart 2014

Inhoudsopgave

01 Inleiding 3 02 Twee Jongens 4 03 Werkvloer 5 04 05 06 07

Plan van Aanpak PvA | Achievements Runtrainer PvA | Presentatie tool voor iPad PvA | Klant Portal

08 09 10 11 12 13 14 15 16

Logboek 10 Photoshop 13 File app 14 Haukes 17 Leerdoelen 19 LeeO website 21 Json get apps opdracht 23 Dreamix app 25 Reflectie 27

2

6 7 8 9

01 Inleiding

Tien weken Na tien weken kun je zeggen dat je een goede indruk hebt van jouw stage bedrijf, de nieuwigheid is er vanaf. De route er naar toe fiets je inmiddels sneller, doordat je wat binnendoor weggetjes hebt gevonden. Je kan je werkplek wel dromen en je werkzaamheden gaan steeds gemakkelijker. Daarbij ben je gewend geraakt aan je collega’s en zij aan jou.

Voorafgaand aan mijn stage wist ik wat ongeveer mijn werkzaamheden zouden worden, een to-do list stond al op mij te wachten. En na tien weken kun je de eerste dingen afstrepen. Even terugkijkend op deze periode, zie je dat je al een flink stuk bent opgeschoten. Ik heb al verschillende klusjes gemaakt en ook afgerond.

Ook heb ik meerdere dingen geleerd. Zowel aan de grafische kant als aan de applicatie kant. Ik heb veel gezocht (en gevonden) door middel van tutorials en website’s als stackoverflow. Gelukkig is er veel te vinden, op mijn vragen.

En mocht ik er dan nog niet uitkomen of iets niet helemaal begrijpen, dan kan ik met mijn vragen terecht bij mijn stagebegeleider(s).

Na tien weken kan ik ook zeggen dat ik hier op mijn plek zit, ik ga met plezier naar mijn stage. Iedere ochtend weer, vaak heb ik zin om weer verder te gaan waar ik gisteren gestopt was. Dit mede door de sfeer, maar ook door de gegunde vrijheid. Er zit niet non-stop iemand mee te kijken, je wordt een beetje los gelaten. Je word uitgedaagd om het eerst zelf uit zoeken. Er mogen fouten gemaakt worden, zolang deze maar binnen de perken blijven en deze zelf weer oplost.

Oprecht kan ik zeggen dat deze eerste tien weken voorbij zijn gevlogen en ik denk dat dit voor de aankomende tien weken ook zo gaat gelden. Ik heb er zin in, in ieder geval!

3

02 Twee jongens Zij leerden elkaar kennen op een ROC, waar zij beide de opleiding media vormgeving volgden.

Beide jongens hadden dezelfde interesses, maar ondanks dat boterde het na een eerste kennismaking nog niet. Dit had even tijd nodig. En die ingevulde tijd heeft voor een goede band gezorgd. De jongens liepen stage bij hetzelfde bedrijf en zorgden ervoor dat ze eerder met een diploma op zak van de school verdwenen. Een stapje hoger, de jongens gingen naar HAN in Arnhem. En nadat ook deze studie met succes werd afgerond, was het tijd voor een eigen bedrijf. Dreamix Design, opgericht in 2006 als Vof. Er werd gewerkt aan de eerste app, een game. En voor het programmeer werk, zochten ze een oude studiegenoot op. Kevin sloot zich aan bij het duo. En al snel stond er een mooie app in de App Store.

In 2010 werd de naam Dreamix Design veranderd in Dreamix Studio, hiermee profileert het bedrijf zich niet langer als reclamebureau. En de twee jongens storten zicht fulltime op Dreamix, met de daarbij behorende apps.

Met de wind in de rug worden er verschillende apps ontwikkeld en worden er zelfs twee prijzen in de wacht gesleept voor hun werk. Inzicht, interesse en verdieping in de klant worden hiermee rijkelijk beloond.

Natuurlijk zijn er ook genoeg concurrenten op de markt, maar doordat dit bedrijf zich op een goede manier weet te onderscheiden staan zij een streepje voor. Door zich goed te verplaatsen in de klant, of zelfs een dag mee te lopen is er een positie ontstaan, dat deze twee jongens (en Kevin) toch zeker bij de top 10 van Nederland horen. En zij blijven de concurrentie in oost Nederland ver voor. In een tijdsbestek van vier jaar staan er al drie en veertig apps op de plank.

En met een indrukwekkend portfolio worden zij inmiddels ook vaak uitgenodigd in de randstad.

Een belangrijk doel voor de toekomst blijft het maken van mooie apps voor vaste terugkerende klanten, maar ook nieuwe klanten zijn bij Dreamix aan het juiste adres.

Aankomende nieuwe gadgets die op de markt verschijnen trekt hun interesse. Denk hierbij aan Google Glass of Smart-tv, de jongens volgen de ontwikkelingen en nieuwtjes op de voet.

Dreamix studio blijft niet onopgemerkt bij bedrijven als Samsung. Zij werden bijvoorbeeld laatst uitgenodigd voor een presentatie van een nieuwe telefoon die binnenkort op de markt zal verschijnen.

Maar de twee jongens zijn nog lang niet klaar, er staat een groei voor de deur. Er zijn drie werkplekken gecreĂŤerd en heden ten dagen werken er in totaal zes mensen, waarvan drie stagiairs. En hopelijk blijft deze groei in een stijgende lijn door gaan.

De twee jongens en Kevin.

Stefan Wassink

Robin van Doorn

Kevin Coenen

Communicatie manager User Interface

Core Designer Personeelsmanager UI / Interaction designer

Programmeur

4

03 Werkvloer

Er is bewust gekozen voor een gezamenlijk ruimte waar gewerkt wordt. Hierdoor is er een informele sfeer. De communicatie is direct en voor de momenten dat er iets besproken moet worden is er een vergaderruimte.

In drukke tijden kunnen Robin en Stefan ervoor kiezen om gebruik te maken van een Project Management Systeem. Hiermee kunnen zij inzien en uitlezen wie er met welke werkzaamheden bezig is. Stefan neemt projecten aan, waarna Robin de werkzaamheden in deelt. Hij maakt hierbij gebruik van to-do lijsten en doet dit zowel mondeling als door middel van een PM-systeem.

Er is door het kleine formaat geen afdeling kwaliteitszorg. Maar omdat het bedrijf in omvang aan het groeien is zal er in de toekomst meer gebruik gemaakt worden van testrapporten en gedocumenteerde checklists.

Personele zorg.

Er is er voor gezorgd dat ieder een ruime, schone werkplek heeft, met daarbij de juiste apparatuur. Er is duidelijk een goede stimulans om goed te kunnen werken/functioneren. Uit voorzorg houden Stefan en Robin geregeld een evaluatie moment. Dan wordt gevraagd of je het naar je zin hebt en of de werkzaamheden bij je passen. Mochten er dingen aan het licht komen waarin een van beide partijen ontevreden is, dan zal er direct naar een oplossing worden gezocht.

Ten alle tijden is het mogelijk om dingen te vragen of aan te kaarten, om zo voor ieder een fijne werkplek te creĂŤren.

Dreamix staat voor een bepaalde kwaliteit.

Zij gebruiken een module waarvan iedere klant een gedeelte betaalt. Een onderdeel van deze module is het hergebruiken van onderdelen uit bestaande, zelf ontwikkelde apps en hierdoor houden zij de kosten met veertig procent lager dan bijvoorbeeld de concurrent.

5

04 Plan van aanpak

1.2 MAAKT PLAN VAN AANPAK “De applicatie ontwikkelaar is in staat om op adequate wijze een plan van aanpak te maken.“ Ik, Renske Marris, ben 3e jaars student Applicatie Ontwikkelaar aan het ROC A12 te Velp. In periode twee van leerjaar drie, januari 2014 tot en met juni 2014 zal ik stagelopen bij Dreamix Studio te Arnhem.

Mijn stagebegeleider heeft voorafgaand aan de stage drie opdrachten gegeven. Deze worden besproken in het plan van aanpak.

6

05 Achievements Runtrainer

Momenteel ziet de app er van Runtrainer prima uit, maar als er gezweet en gezwoegd wordt is het fijn dat je een beloning ontvangt. Jij, als beginnende hardloper, ontvangt na je eerste vijf kilometer een gave achievement. Een achievement haalt je natuurlijk over de streep om nog beter/sneller te gaan hardlopen.

Opdracht: Ontwerpen van verschillende achievements, per onderdeel zal er een andere look moeten zijn. Verschillende categorieën moeten duidelijk verschillende achievements hebben.

Doel van de opdracht: De hardloper wordt beloond met een mooie prijs. De hardloper is trots op zijn behaalde doel, en kan eventueel zijn behaalde prijs delen via social media.

Aan mij om me te verdiepen in de verschillende mogelijkheden en stijlen. Als voorbeeld krijg ik een afbeelding mee van de film Up. Hierin is een jongetje te zien met allerlei achievements aan zijn jas. Deze zijn gestikt en hebben een hoge ‘cuteness’ gehalte.

Benodigde software: Photoshop, Illustrator Contactpersonen: Stefan Wassink en Robin van Doorn

7

06 Presentatie tool voor iPad

Ter ondersteuning tijdens een klanten gesprek neemt Stefan zijn tablet mee. Want zeg nou zelf. een bedrijf die apps maken hebben een mooie presentatie app.

Alleen is deze er nog niet.

Tijdens zijn praatje bij een klant, kan hij diverse functies toevoegen die de klant uiteindelijk nodig gaat hebben voor zijn nieuwe app. Uiteindelijk is er een eindresultaat te zien zijn op een iPad. In dit eindresultaat kun je jouw toegevoegde functies bekijken, je ziet er voor welke platform de app is en of deze voor tablet, telefoon of beide is.

Opdracht: Het maken van een app voor tablet en alleen beschikbaar voor Dreamix. Met tablet en app in de aanslag zal Stefan langs klanten gaan.

Doel van de opdracht: Verschillende aspecten verduidelijkt en versterkt worden door middel van deze app. Onder deze aspecten kun je verschillende functies verstaan die de toekomstige klant gaat gebruiken in een nog te ontwerpen en uit te voeren app. Daarbij moet de app een goed design hebben, zodat de klant al een kijkje in de keuken kan nemen.

Opdrachtgever: Dreamix Studio – Stefan Wassink Contactpersoon: Stefan Wassink Benodigde software: Illustrator, Photoshop, Scala Functies: Momenteel staan alle functionaliteiten op de site van Dreamix beschreven, deze zullen terug te vinden zijn in de app. Stefan of de klant, kan deze functies toevoegen of verwijderen in de app. Er moet een duidelijk onderscheid komen tussen verschillende functies, door middel van bijvoorbeeld kleur.

Onderdelen die in de app komen: Over Dreamix Studio Klanten van Dreamix Digitale boekenplank (app functies) Traject van ontwikkelen (concept tot werkende app) Ondersteunende diensten (backend systeem, PR pakket etc) Offline te gebruiken Resultaat: Er zal een mooi vormgegeven app ontstaan die een goede indruk van Dreamix geeft en daarbij verduidelijkt de app hoe je doormiddel van verschillende functies een app opbouwt.

8

07 Klant portal

Op dit moment is er een simpele versie van een service gedeelte voor klanten ontwikkeld. Dit is echter enkel een tutorial hoe Dreamix informatie verwacht te ontvangen.

Uiteindelijk moet het service gedeelte een to do list met informatie worden die Dreamix nodig heeft als ontwikkelaar en moet er per klant specifiek aangegeven worden welke onderdelen Dreamix nodig heeft voor het ontwikkelen van hun app.

Deze opdracht is in samen werking met Jesse, hij zal hierin de leiding nemen.

Opdracht: To do list voor de klant bestaand uit wordpress posts met uitleg.

Onder elk onderdeel moet een formulier komen waar de klant zijn gegevens op kan slaan. Wij moeten een overzicht krijgen per klant aan informatie die ze hebben ingevuld.

Doel van de opdracht: Dreamix heeft van nieuwe klanten bepaalde gegevens nodig van bijvoorbeeld Apple bij een app voor iPhone of iPad. Doormiddel van een to do list kan de klant verschillende stappen volgen, nadat deze stappen zijn gedaan moet de klant gegevens invullen en kunnen opslaan bij Dreamix. Deze gegevens zullen in een database opgeslagen worden.

Als je als gebruiker ingelogd bent als admin kun je de verschillende klanten en de daarbij behorende gegevens bekijken en gebruiken om bijvoorbeeld een app te uploaden.

Benodigde software: Photoshop, Coda, Transmit, Wordpress Verschillende stappen: 1. Er zal een basis stramien ontworpen moeten worden.

2. Hierbij moet rekening gehouden worden met de huisstijl van Dreamix.

3. De klant moet een gemakkelijke manier vinden om contact op te nemen.

4. Na ieder onderdeel zullen er gegevens opgeslagen worden.

5. Gegevens zullen uitgelezen worden door Dreamix voor nader gebruik.

Contactpersonen: Robin van Doorn, voor vragen over html/css, wordpress, vormgeving of functionaliteit.

Kevin Coenen, voor vragen over programmeren.(php)

9

Resultaat: Een goed vormgegeven presentatie door het gebruik van een iPad, klanten krijgen een indruk wat er allemaal gebouwd kan gaan worden in een nieuwe app.

08

Iedere week heeft vijf zinnen, deze staan voor de dagen in de week. Van maandag t/m vrijdag.

Logboek

Week 1

Week 2

Json opdracht.

Json opdracht.

Json opdracht.

Json opdracht.

Schetsen service pagina Dreamix

Service pagina Dreamix | Kleine uitleg over Bootstrap Start gemaakt ontwerp app Haukes Ontwerp Haukes afgemaakt.

App in stukje geknipt voor programmeur App in stukje geknipt voor programmeur

Week 3

Week 4

Illustraties ontwerpen voor Runtrainer Illustraties ontwerpen voor Runtrainer Presentatie illustraties Runtrainer Illustraties ontwerpen voor Runtrainer Concept nieuwe app onderzoek naar ndw.nu

Verbeteren formulier site Dirk Zwager Formulier afgemaakt Uitzoeken en vergelijken bestaande file apps Ontwerp file app Ontwerp file app | Kleine aanpassing Haukes app

Week 5

Week 6

Ziek Ziek Ziek Medaille + lint gemaakt voor Runtrainer Gallerij achievements

Rozetten voor Runtrainer Legoblokken voor Dreamix App Legoblokken voor Dreamix App Lego grondvlak | opmaak service pagina’s in html Service pagina’s opgemaakt in html

Week 7

Week 8

Service pagina’s om- online gezet Service pagina’s, klanten overzicht | LeeO d.m.v. Bootstrap LeeO van html naar Wordpress Uitleg Bootstrap Vrij

Ontwerp Dreamix apps pagina in Ps Ontwerp portfolio pagina’s in Ps | Evaluatie gesprek Portfolio pagina omgemaakt in html/css | Intervieuw Brainstormen nieuwe app | Start nieuw ontwerp Vrij

Week 9

Week 10

Illustrator flessen design voor Dreamix App Illustrator flessen + cocktail Illustrator/Ps flessen/bar/cocktail/glas | Stage verslag Illustrator/Ps flessen/bar/cocktail/glas Opzet/schets Dreamix App in Ps/Ai

Stageverslag en illustraties gemaakt Service pagina’s opgemaakt in html, samenwerking Jesse Fouten uit service pagina’s gehaald, samen met Jesse Nieuwe en laatste pagina voor DM app opgemaakt Service pagina’s in html klaar gezet voor Jesse

10

11

ART IS THE ONLY WAY TO RUN AWAY WITHOUT LEAVING HOME

09 Photoshop

Als grafisch ontwerper ken ik de programma’s InDesign en Illustrator goed, maar Photoshop heb ik altijd een beetje links laten liggen. Waar InDesign en Illustrator dikke vrienden met mij zijn geworden, heb ik met Photoshop altijd een beetje ruzie gehad. En sja… Mensen waar het niet zo mee klikt die loop ik uit de weg.

Maar wat als je dan een nieuwe uitdaging hebt gevonden en Photoshop daar ineens weer om de hoe kwam kijken. Want eerlijk is eerlijk, een website of mooie app maak je op in Photoshop.

Ik ben de moeilijkste niet en gaf Photoshop een tweede kans.

Ik in het begin van mijn stage werkte ik aan een opdracht in Photoshop, waarbij Robin mij alvast op gang mee hielp. Het was de bedoeling dat ik in schetsvorm alvast wat pagina’s ging opmaken voor de service pagina’s van Dreamix Studio.

Het enige wat mij bekend was in Photoshop was het omzetten van beelden, zodat ze geschikt zijn voor drukwerk. Nu lag de nadruk juist op de ‘web’ kant. Met een blanco pagina voor m’n snufferd begon ik aan de voor mij onbekende wereld van het webdesign.

Het grote wennen was dat ik geen nieuwe lagen hoefde aan te maken, dit doet Photoshop zelf voor jou. Een dikke plus dus! Op het moment dat ik een beginnetje maakte met het opbouwen van een webpagina, kwam ik erachter dat je gemakkelijk voorwerpen kan creëren, vergroten, verkleinen en verwijderen. Wel is belangrijk dat je de juiste laag te pakken hebt. Dat werkt net even anders dan bijvoorbeeld InDesign, ik maak daarom gebruik van contour lijnen en hulplijnen.

Je kunt gemakkelijk leven in je ontwerp blazen door bijvoorbeeld een (slag)schaduw aan je ontwerp toe te voegen. Knoppen, die op jou scherm er al platte plaatjes uitzien, zien er in een klap aanklikbaar en uitnodigend uit.

Doordat je snel vele lagen in een bestand hebt, werd mij aangeraden om de lagen te benoemen en deze in mappen te groeperen.

Zo blijft je bestand overzichtelijk, voor jezelf en ook voor anderen die met jou bestanden aan de slag gaan.

Een bijkomend voordeel is dat je lagen en dus ook mappen kunt tonen of verbergen. Hierdoor kun je in een bestand bijvoorbeeld verschillende webpagina’s maken. Je basis (bijvoorbeeld een homepage) kan blijven staan en door je map onzichtbaar te maken kun je aan een volgende pagina werken. Hierdoor heb je als eindresultaat een duidelijk beeld van de verschillende stappen die er gemaakt zouden kunnen worden op de website of app.

Een belangrijke tool die ik heb geleerd in Photoshop is zijn Bleding Options. Waar ik het al eerder over heb gehad, hiermee blaas je leven in je ontwerp. Met een schaduw, een verloopje, een glansje, diepte enzovoorts.

13

10 File app

Doordat er sinds januari 2014 een open data bron bij is gekomen, namelijk van het Nationale Databank Wegverkeersgegevens (ndw), was het aan mij om daar onderzoek naar te doen en te bekijken hoe ik deze data om kan zetten naar een app voor je telefoon.

De NDW-databank biedt inzicht in de actuele verkeerssituatie op snelwegen, provinciale wegen en doorgaande stedelijke wegen van de deelnemende overheden.

Wegbeheerders door het hele land leveren gegevens over de situatie op de weg en de beschikbaarheid van de weg aan NDW. De aangeleverde informatie wordt opgeslagen in één centrale databank en vanuit dit punt verspreid naar wegbeheerders en aanbieders van verkeersinformatie. Zij beschikken hiermee over gegevens van zowel het hoofdwegennet als het onderliggend wegennet.

NDW geeft geen verkeersinformatie direct aan weggebruikers. Het is onze rol om de basisgegevens te leveren aan aanbieders van verkeersinformatie en wegbeheerders. Zij informeren de weggebruikers.

Uit mijn onderzoek blijkt dat je de data kan gebruiken om te zien waar er bijvoorbeeld vertraging is. De data geeft weer hoeveel auto’s er over een bepaalde tijd (een minuut) over een lus in het wegdek rijden. Daarbij kunnen de lussen de snelheid meten.

Op het moment dat je weet wat de normale snelheid over een bepaald stuk wegdek is, kun je door deze data vertragingen uitlezen. Een site die bijvoorbeeld gebruikt maakt van deze data is onderweg.nl. Dit is een uitgebreide site en zij geven aan waar er in Nederland vertraging is.

Daarbij is het op de site duidelijk te zien dat ze de wegen opdelen in kleine blokjes, dit is ontstaan vanuit de data van NDW. Het hoofddoel van deze app is in een gemakkelijk overzicht en/of in een opslag te zien krijgen of er op jou route vertraging is. Het is voor jou als gebruiker namelijk niet van belang of er file staat in Friesland terwijl jezelf in Arnhem woont, wat in veel huidige apps wel getoond word.

Een belangrijk aspect is dat jij als gebruiker vaste routes kan opslaan en dat je vlak voor het moment van vertrekken een notificatie krijgt op het moment dat er op jou route vertraging is.

Zodat je bijvoorbeeld eerder van huis vertrekt, waarnaar je wel op tijd op je werk bent aangekomen.

Nadat ik wist wat ik met de data kon doen heb ik concept gemaakt van de verschillende pagina’s in de app.

Uiteindelijk kwam zijn er zes pagina’s ontstaan.

Registreren

Inloggen

Spreekt voor zich, dit scherm wordt alleen getoond op het moment als je de app net geïnstalleerd hebt.

Spreekt ook voor zich, wanneer je niet automatisch bent ingelogd kom je hier op terecht na het openen van de app.

14

Dashboard

Bekijk Route

Het startscherm en je word hier vriendelijk begroet met Goede morgen/middag/avond. Wanneer er vertraging op jouw route is zal dit aangegeven worden in het aantal minuten, deze worden rood weergegeven. Ook zal er een balkje bij staan met waar ongeveer op jouw route de vertraging plaatsvind. Onder deze informatie vind je een button waar je de vertraging kan bekijken. Wanneer er geen vertragingen zijn, zal er komen te staan; Er zijn geen vertragingen op uw route.

Onderaan de pagina vind je een button met Mijn Routes en een Info button. Bij de Info button zal je op een pagina komen met de gegevens van de app en dat deze door Dreamix gemaakt is.

Je kunt jou opgeslagen routes bekijken. Via Mijn Routes of via Dashboard kom je op deze pagina, hier zal, mits er vertraging is, Je verwachte reistijd in rode cijfers zien, wanneer er geen vertraging is blijft dit in een normale tint. Evenals geldt dit voor vertraging, hier wordt het aantal minuten vertraging aangegeven in rode cijfers. Ook zal er op een kaart te zijn waar er op jou route vertraging is, wanneer er geen vertraging is zal deze uit gezoomd zijn. Zodat de gehele route zichtbaar is. In beide gevallen is het mogelijk in of uit te zoomen op de kaart.

Ook staat er een kleine omschrijving van de vertraging bijvoorbeeld, Ridderkerk richting Gorinchem tussen Hendrik-Ido-Ambacht en Sliedrech-West 4 km, stilstaand verkeer.

Onderin deze pagina staan twee buttons, Facebook en Twitter. Hiermee kun je je status delen door middel van social media. Waarmee je misschien vrienden kan helpen die dezelfde route of een stukje daarvan rijden. Wanneer je op de button terug klikt zul je op Dashboard terecht komen.

Mijn Routes Onder deze pagina vind je jouw opgeslagen routes.

Routes waar geen vertraging is gemeten hebben een groen vlakje voor de naam staan. Routes waar een vertraging is gemeten zullen een rood vakje hebben en met achter de opgeslagen naam het aantal minuten vertraging. Alle opgeslagen routes kun je bekijken, je komt dan op de pagina Bekijk Route. Het is mogelijk om een nieuwe route toe te voegen op deze pagina je komt dan op de pagina Mijn Route. Als laatste is het mogelijk om terug te keren naar Dashboard.

Nieuwe Route Wanneer je bent voor het eerst bent ingelogd of wanneer je via de pagina Mijn Routes op Nieuwe Route hebt gedrukt kom je op deze pagina. Op deze pagina kun je aangeven wat de naam moet worden voor jou nieuwe route, bijvoorbeeld Werk-Thuis. Je geeft aan van waar naar waar de route is, of deze retour is, en op welke dagen je deze route rijd. Daarbij kun je aangeven of je een timer wilt, dit houd in dat op het moment dat er vertraging is op jou aangegeven route je van te voren een notificatie op je telefoon zult ontvangen met het aantal minuten vertraging. Wil je toch geen nieuwe route toevoegen, dan is de mogelijkheid er om terug te keren naar Dashboard.

Lijnen geven aan op welke schermen je kan komen.

Registreren

Mijn Routes

Inloggen

Dashboard

15

over smaak valt wel te twisten

16

11 Haukes Een klein klusje waren de eerste woorden die er op mij afgevuurd werden op het moment dat ik de opdracht ontving.

Maak een ontwerp voor Haukes, een bedrijf die zich ontfermt over ‘onze’ bodem. Nederlandse grond. Zij controleren, formuleren en inspecteren bij verschillende bedrijven door heel Nederland. En om het de heren van Haukes wat gemakkelijker en mooier te maken mag ik een app ontwerpen. Een app, in de vorm van een invulformulier.

De heren van Haukes nemen een tablet mee op locatie en vullen ter plaatse het formulier in.

Nadat dit formulier ingevuld is kan deze gelijk worden verstuurd om verwerkt te worden.

De opmaak bestaat uit verschillende schermen, om te beginnen met het start scherm.

Hier staan verschillende rapporten aangegeven met bijbehorend nummer. Vanuit het startscherm kun je een nieuw rapport opmaken of een bestaand rapport verzenden, openen (en bewerken) of verwijderen.

Als je een nieuw rapport opent, kom je op een nieuw scherm. Bovenin het scherm is een slider gemaakt, waar de verschillende onderwerpen/hoofdstukken staan. Er zijn verschillende invul mogelijkheden per onderwerp. Zo kan het zijn dat er zelf wat ingevuld moet worden, soms moet er een vraag beantwoord worden met ‘ja/nee/n.v.t.’ of er word gebruikt gemaakt van dropdown met verschillende keuzes. Bij ieder hoofdstuk is het mogelijk om foto’s bij te voegen.

Aan het einde van het rapport is het mogelijk om nog een notitie toe te voegen om vervolgens het rapport direct te versturen. Mocht er geen internet verbinding zijn dan kan dit alsnog later.

Ik heb rekening gehouden met de huisstijl van de klant en heb mij hier ook eerst in verdiept.

Voorafgaand van mijn ontwerp heb ik de site bekeken en bijvoorbeeld de kleuren genoteerd.

Een belangrijk aspect vond ik de gebruiksvriendelijkheid, het gaat immers om een product die gebruikt gaat worden tijdens werkzaamheden. Het stukje gebruiksvriendelijkheid heb ik opgelost doormiddel van grote duidelijk knoppen met gemakkelijke iconen die vaker terug komen in de app. En door het scherm zo rustig mogelijk te houden. Geen poespas.

Nadat de verschillende pagina’s waren opgemaakt en de klant de app had goed gekeurd heb ik de app in ‘stukjes geknipt’ door middel van Photoshop. Deze losse stukjes werden gebruikt door de programmeur, zodat de app opgebouwd kon worden.

Stukje bij stukje werd er leven in de app geblazen.

Leermomenten Ik heb geleerd in wat voor een formaat ik mijn ontwerp moest opmaken. Ik heb handigheid gekregen om met Photoshop een opmaak te maken. Daarbij zijn er op internet vele sites te vinden met iconen in alle soorten en maten, waarvan je gratis gebruik mag maken.

Waar ik eerder een incon zelf zou maken in Illustrator, werd ik op verschillende sites gewezen waar ik snel en gemakkelijk icons vandaan kan halen voor de app.

Door het ontwerpen van deze app, heb ik wat handigheid gekregen in Photoshop. Dingen als toetsencobinaties.

17

van cmyk naar rgb van 300 dpi naar 72 dpi

18

12 Leerdoelen

Van grafisch ontwerper naar webdesigner.

Ik ben en blijf een ontwerper. Ik zou nooit een programmeur worden. Het is misschien wat spijtig om te zeggen, maar zeker waar.

Wat ik graag zou willen leren is om wat meer te begrijpen van de ‘webkant’. En daarmee doel ik niet alleen op het ontwerpen, maar ook de ‘achterkant’. En met achterkant bedoel ik een stukje programmeren. Een belangrijke eis die ik aan mijzelf stel is dat ik aan het einde van mijn stage een prima werkende website wil hebben, zelf gemaakt. Dit is direct een prima maatstaaf.

Dingen die ik in praktijk heb geleerd op stage, kan ik gelijk toepassen op mijn eigen site.

Mijn eigen wordpress theme Op velen verzoek heb ik ook maar wordpress op mijn site gezet, maar misschien komt het omdat ik een verwend ontwerpertje ben. Maar ik krijg het maar niet voor elkaar om een lekker passende theme te vinden die past bij mijn huisstijl. Dat moet toch anders kunnen?

Viola! Een leerdoel.

Toepassen van php Op school hebben in een beknopte versie de toepassingen van php gekregen. Wat mij snel duidelijk werd is dat het veel vaker toegepast word dan waar ik op dit moment erg in heb. Het enige wat ik wist, maar niet kon maken waren invulformulieren.

Graag zou ik bijvoorbeeld een formulier werkend willen krijgen op mijn eigen site. Zelf geschreven en niet peehappee-klaar.

Marris.nl website Na drie jaar word het eigenlijk wel tijd om mijn portfolio online te zetten. Inmiddels heb ik al wat gedaan in Wordpress, maar het is nog redelijk onduidelijk voor mij.

Een perfecte test of ik daadwerkelijk mijn geleerde kennis kan toepassen. Mijn doel is dus, om aan het einde van mijn stage een gelikte website online te hebben staan.

19

/* Theme Name: LeeO Theme Vul hier jou thema-naam in Theme URI: http://www.leeo.eu Naam van de site Description: Frontpage van LeeO eu wordpress thema Theme naam Author: Dreamix Studio Maker, voor eventuele vragen Author URI: http://www.dreamix-studio.com Idem Version: 1.0 Tags: LeeO EU Vindbaar op License: License URI: General comments (optional). */

<?php query_posts( array( ‘post_type’ => ‘frontpage’, ‘showposts’ => 3) ); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class=”row featurette”> <h2 class=”featurette-heading”><?php the_title(); ?></h2>

<?php the_content(); ?>

</div>

<?php endwhile; endif; wp_reset_query(); ?>

20

13

work in process

LeeO website

Om te starten had ik een aantal pagina’s klaar gemaakt in html. Deze pagina’s werden gelijk uit elkaar gehaald om zo een header en een footer te maken.

Deze pagina’s werden gelijk op de ftp van LeeO geplaatst. Daarbij staat er in deze map van LeeO een style. css deze blijft leeg, de css word aangepast in een css map. Hierin vind je een bootstrap.css, deze word ook niet aangepast. En een leeo.css, deze css overschrijft de bootstrap css. Alles wat er aangepast moet worden, verander je in deze css.

Ik kom nog even terug op style.css, een (bijna) lege css.

Hier verander je niets. En je gebruikt deze css (nog) niet. (info op linker pagina) Index.php Bij een index vraag je als eerste de header aan <?php get_header(); ?>. Uit mijn html voorbeeld kwam er vervolgens een jumbotron bij, met hierin een titel, een subtitle, een invulveld en een button. Dit kon eenvoudig over genomen worden uit het html bestand.

Vervolgens moeten er posts zichtbaar worden, die door de klant aangepast kunnen worden. Deze posts worden opgeroepen door een query. (linker pagina) Deze post worden gelezen door wordpress doormiddel van een query in functios.php. In de wordpress omgeving is een apart tab te vinden onder de naam voorpagina. De post die hier aangemaakt worden, komen uiteindelijk alleen op de frontpage.

Als laatste word de footer aangeroepen <?php include (‘footer.php’) ?>.

Footer.php In deze footer staat vrij weinig. Er is een titel, met eronder een invuld formulier. Hiermee kan je je aanmelden voor een nieuwsbrief. Verder staat er nog een logo in en een copyright.

Header.php Dit is een redelijke copypaste van een andere website.

Wat er vervolgens aangepast is, is het volgende; De css opvragen dit zijn bootstrap (uit je css map). En je leeO css, te vinden in dezelfde map.

Om de pagina responsive te krijgen voor mobiel is het logo aan gepast. Hij word getoond wanneer je de site opent of schaal als klein scherm, je ziet dan een logo zonder tekst. Het normale logo is te zien met tekst.

21

Route du Dreamix is

Thu

ar

sp Ca

rt tion oo Sta lperp Ve

ve atie te n r rou Alte

r Hie t glas lig n

atio

kst Tan

Fijn pad iets

f

ute

o re r elle

eg

Sn

Fiets route

o

Sim

Alternatieve routeâ&#x20AC;&#x2122;s wegwerkzaamheden

kilometer: 3,8 minuten: 16

22

inw tev S n

27

14 JSON get Apps opdracht

JSON staat voor JavaScript Object Notation. Het is een standaard om informatie gestructureerd op te slaan en uit te wisselen, vergelijkbaar met XML. JSON wordt veel gebruikt in dynamische websites en webapplicaties om interactieve gebruikersinterfaces te creëren. Het JSON-formaat leent zich uitstekend om met behulp van JavaScript achteraf informatie in te laden in de browser, een techniek die ook wel AJAX wordt genoemd.

JSON maakt gebruik van de standaardnotatie voor objecten in JavaScript. Dit maakt het eenvoudiger om informatie in te lezen en te verwerken. Het formaat bevat meer informatie (zoals data-types), is flexibeler en kent minder overhead. Ook in andere programmeertalen zoals PHP is JSON een populair dataformaat.

Opdracht: ‘Wat we willen is dat je een REST functie gaat schrijven om posts van Wordpress in een JSON object om te zetten. Een groot deel is al geautomatiseerd, maar je moet in getNews.php een query schrijven die hier aan voldoet. Het bestand vind je in jouw map op de FTP (details komen hieronder te staan) en is nog leeg. Je kan getNews.php straks gewoon in een browser gebruiken om een tekst te zien met de posts (zodra je klaar bent).’

Uiteindelijk heb ik een zelfde stukje code herschreven samen met Jesse om Apps uit de database te lezen, met verschillende extra’s zoals tumbnails, datum van plaatsen. .

23

Leerprocessen.

Ondanks dat ik, al zeg ik het zelf, mij aardig uit de voeten kan met illustrator. Was het maken van glas nieuw voor mij. Daarbij moest het niet ‘flat’ worden, ook niet te realistisch, maar wel een illustratie. Ik heb verschillende tutorials gevolgd voor het maken van een (wijn)glas, flessen, cocktail en neonletters.

Ik maakte al veel gebruik van gradients, maar ik heb door de verschillende tutorials geleerd dat er extra opties zijn.

Dat je bijvoorbeeld overlay gebruikt, hierdoor pakt Illustrator de kleuren uit de lagen eronder en krijg je een realistische doorschijning. Dit geld niet voor alle kleuren overigens. Als jij geel boven een blauwe laag legt, word het een vies groen en zul je voor een andere optie moeten kiezen.

Om zo een realistisch glas te krijgen.

Voor een rietje kun je een brush gebruiken, dit wist ik niet.

Maar hierdoor kun je makkelijker en sneller streepjes op een rietje creëren. Het enige wat je nodig hebt is een klein blokje in een gewenste kleur. Dit blokje voeg je toe in bij je brushes en voila.. Het rietje heeft streepjes.

Bronnen: http://www.tutorialstag.com/create-a-cocktail-glass-in-adobe-illustrator.html http://design.tutsplus.com/tutorials/quick-tip-how-to-create-colorful-neon-text-with-adobe-illustrator--vector-4630 http://www.vectordiary.com/illustrator/how-to-make-an-icy-cocktail-tutorial/

24

15

work in process

Dreamix App

Ter ondersteuning tijdens een klanten gesprek neemt Stefan zijn tablet mee. Want zeg nou zelf een bedrijf die apps maken hebben een mooie presentatie app.

Alleen is deze er nog niet. Aan de slag dus!

Tijdens zijn praatje bij een klant, kan hij diverse functies toevoegen die de klant uiteindelijk nodig gaat hebben voor zijn nieuwe app. Uiteindelijk moet er een eindresultaat te zien zijn op het scherm, met de toegevoegde functies en of de nieuwe app voor bijvoorbeeld andriod en/of voor apple is, of deze voor telefoon, tablet of beide is.

Een tijd geleden heb ik hiervoor legoblokken ontworpen in verschillende kleuren en maten.

Hierbij stonden de functies voorop de legosteen.

Deze legostenen zouden dan uiteindelijk op een groot legoveld geplaatst kunnen worden en ook worden gestapeld. Toen ik uiteindelijk de stenen en het veld had gemaakt doormiddel van Photoshop en Illustrator bleek dat dit niet werkte. Doordat er 3D zou ontstaan en de stenen dit nou eenmaal niet zijn.

Tijd voor een nieuw idee.

Heel voorzichtig heb ik gevraagd of ik van het idee ‘lego’ mocht afstappen. En na een kleine brainstormsessie, droeg ik het idee aan om een cocktail bar te maken. Je stopt verschillende flessen/drankjes (de functies) in een cocktailshaker en je krijgt uiteindelijk je eigen Dreamix cocktail. Een Dreammixje.

Tijdens het ontwerpen zijn we van het idee ‘een bar’ afgestapt. Dit is ontstaan nadat ik bezig was met het opmaken van verschillende pagina’s in Photoshop. Het start scherm gaf ik een halve boog en dit voerde ik door in de volgende pagina’s. Hierdoor kwam ik op het idee om de flessen boven de halve boog te plaatsen op een witte achtergrond. Veel chiquer, moderner en minder rommelig. De neonletter komen te vervallen, evenals de houten bar. Het glas en de shaker zouden blijven staan.

Hier heb ik wat highlights en schaduwen aan toegevoegd om diepte te creëren, waardoor het niet meer in een ruimte zweeft.

In ontwikkeling.

Momenteel ben ik bezig met het verder ontwikkelen van deze app. Er moet nog een nieuw scherm bij komen met het eindresultaat, een goed gevulde cocktail.

Daarbij moeten de flessen er piekfijn uitzien, hier komen nog wat welbekende puntjes op de i.

25

Ze. Ook deze ochtend stapte ze ietwat gehaast de kou in. Ze draaide zich nog eenmaal om, stak een sleutel in de oude groene deur en controleerde of deze echt dicht was.

Een oude grijze gazelle omafiets stond klaar om haar door de stad te vervoeren, het roestige slot sprong moeizaam omhoog. Ze rommelde nog wat in haar jaszakken, pakte een sigaret en stak deze op. Om haar handen tegen de winterkou te beschermen haalde ze haar bruin leren handschoenen uit haar tas. Ze wurmde haar handen erin en stapte op haar fiets. Ondanks dat het schemerde deed ze de verlichting van haar fiets niet aan, maar zoefde weg naar de drukte van de Hommelseweg. Haar blonde haren wapperden van onder haar donkere wollen muts, die bijna over haar ogen gleed. Door het zwart gehaakte bolletje leek ze wel een pion die zich een weg baande over een schaakveld van verkeer. Haar gazelle, haar benen namen haar mee door het Spijkerkwartier. De schemer, de wollen muts voor haar ogen, een slag in haar wiel, de drukte op straat… Het deerde haar niet.

Zo nu en dan nam ze een flinke hijs van haar sigaret en nadat ze deze bijna in haar handschoen liet branden gooide ze de peuk van zich af.

Warm van fietsen en met rode wangen liep ze het grote grijze kantoorpand in, nam de trap omhoog in plaats van de oude lift. Op de tweede verdieping liep ze willekeurig een houten deur door. “Goede morgen” zei ze tegen haar collega’s, die haar hetzelfde wensten. Ze deed snel haar jas uit, gooide haar blauwe of was het toch paarse shawl op de kapstok en klapte ondertussen de grijze MacBook open die op het bureau naast de deur stond. Haar wijsvinger drukte op een knopje en het scherm begon licht te geven.

Alsof het een dagelijkse routine was liep ze in een streep door naar het koffiezetapparaat in de hoek en zette er twee kopjes onder. Met de slaap nog niet volledig uit de ogen staarde ze naar de kopjes die langzaam gevuld werden met hete koffie. Of er nog iemand zin had in koffie vroeg ze loom, twee van haar collega’s antwoorden met een blijde “Ja, lekker.” en ze zette een derde kopje bij het apparaat.

De andere drie bureaus waren nog leeg. “Ach, het is nog maar vijf voor negen” dacht ze “zij zullen zo wel komen”. Het apparaat was klaar met pruttelen en knarsen. Ze pakte de twee kopjes en zette deze bij haar collega’s op het bureau. Ze liep nog een keer terug naar het apparaat en pakte haar eigen kopje gevuld met sterke koffie, zette deze op haar eigen bureau en plofte langzaam neer op haar stoel. Haar computer stond gereed voor de strijd.

Wat gaan we vandaag doen?

26

16 Reflectie

Na tien weken kan ik duidelijk vooruitgang zien, ik heb vele dingen geleerd. Ik kan best zeggen dat ik met 0,0 kennis binnen kwam.

De laatste tijd heb ik veel met Bootstrap gewerkt, dit was volkomen een nieuwe wereld voor mij. Hier ga ik meer over vertellen in mijn eindverslag. Daarbij was php behoorlijk onbekend voor mij, hierin heb ik inmiddels al een aantal dingen mee gemaakt. Het lezen en schrijven hiervan gaat gelukkig nu met veel meer gemak.

Mijn opgeschreven leerdoelen wil ik zeker behalen en ik denk dat er misschien wel nieuwe bijkomen.

Verder heb ik het na mijn zin op stage, er is altijd wel iets te doen voor mij. In mijn eindverslag zal ik ook beeldend werk laten zien, de eindresultaten.

27