Archive for V1

Eindopdracht Blok 1

Voor het vak interaction design heb ik een kleine interactieve productie gemaakt wat om het script van de film Office Space draait. Ik heb dan ook een foto van een bestaande “werkplek” genomen en hier kan via visuele links delen van het script worden gelezen. Verder zitten er een paar afbeeldingen van “Hoe” Office Space er ook uit had kunnen zien… Klik hier of op het plaatje hieronder om het eindresultaat te bekijken.

work-screen.png

 

Ik heb voor ik tot het eindresultaat kwam ook de feedback van medestudenten en mijn leraar verwerkt. De “Beta” versie heb ik ook online gezet om een kleine inzicht te geven van het process. Klik hier om de “Beta” versie te bekijken.

Office Space Screenshot compilation

Voor het vak Interaction Design heb ik deze week een samenvatting gemaakt van de film Office Space, door 20 van de belangrijkste momenten op 1 pagina te zetten. Persoonlijk vind ik hem wel aardig gelukt, hopenlijk is de beoordeling hier ook naar…

Office Space compilation

Office Space Lay-outs

Because I didn’t finish Interaction Design last year, I’m following the class this year. Our first assignment was to pick a movie we like and pick a piece of conversation and make 3 layouts of this for the screen and for print. I picked a personal favourite of mine “Office Space”, below you can look at my results…

Office Space Lay-out 3

Office Space Lay-out 2

Office Space Lay-out 1

Screen Lay-out 1

Screen Lay-out 2

Screen Lay-out 3

 

Claim het Vondelpark – 24/7 VondelSoundZ Benodigdheden

Op verzoek van onze leraar Niels Wolf hebben wij hieronder op de kaart aan gegeven waar onze presentatie van aankomende woensdag zich zal gaan plaats nemen. Wij zullen tijdens de presentatie gebruik gaan maken van een enkele Macbook of Macbook Pro samen met een stel computer boxjes om meer geluid te kunnen produceren dan dat eruit onze laptops komt.

We weten niet precies hoeveel Watt dit alles gaat trekken, maar als ik mij niet vergis trekt een standaard Macbook rond de 60 Watt. We kunnen hierdoor extrapolerend doorgaan dat de Pro niet meer dan 80 a 100 Watt zal trekken. De boxjes zijn klein en zullen per stuk zeker niet meer dan 50 Watt trekken waardoor dit totaal dus rond de 100 Watt zal komen te liggen. Al met al kunnen we er dus vanuit gaan dat wij tijdens de presentatie niet meer dan 200 Watt totaal zullen nodig hebben. Een stopcontact om dit alles in te stoppen is dus absoluut een vereiste, we zullen zelf een verdeeldoos mee nemen om aan een enkele outlett genoeg te hebben.

kaart-benodigdheden.jpg

Claim het Vondelpark – Leerdoelen

Voor de TDI case van blok 3 heb ik de volgende leerdoelen voor mezelf geformuleerd:

- Ik ben altijd al groot fan geweest van Flash en een tijdje geleden had ik te horen gekregen dat er door middel van actionscript in combinatie met een webcam motie detectie mogelijkheden waren in Flash. Hierdoorheb ik dan ook als eerste leerdoel voor mezelf gezet uit te zoeken wat de mogelijkheden zijn van het gebruik van de webcam in Flash.

- Doordat ik nog niet zo ver gevorderd ben met actionscripting wil ik mij in deze opdracht vooral conceptueel ontwikkelen. Het nadenken over de toepassingen geschikt voor een locatie, het verder ontwikkelen van een idee tot een werkend product en uiteraard de constante koerswijzigingen onderweg houden mij in dit project vooral bezig.

Claim het Vondelpark – Mindmap

Deze week ben ik aan de slag gegaan met het inkaart brengen van mijn associaties en ideeen bij mijn gekozen onderwerpen het openluchttheater en het informatiebord. Hieronder kan je het resultaat van beide mindmaps bekijken:

infbord.jpg

openltheater.jpg

Persoonlijk vind ik het openluchttheater het meeste potentie hebben of in ieder geval mijn ideeen om het geheel interactiever maken leuker. Mijn voorkeur gaat er dan ook naar uit om hiermee verder te gaan.

Claim het Vondelpark – Research

Het volgende blok is begonnen en ook ditmaal is er een leuke opdracht voor ons bedacht onder de naam “Claim the %^&# Park”. Het uitgangspunt is het creëren van een audiovisueel interactief concept gebaseerd op een locatie, namelijk het Vondelpark in Amsterdam. De uitdaging van dit project is om een audiovisuele – non lineaire – oplossing te bedenken voor een nader te definiëren specifieke groep gebruikers van het park (denk aan joggers, toeristen, voorbijgangers, fietsers of wandelaars). Hierbij kun je denken aan betere informatievoorziening in een ‘playfull way’, of het creëren van een experience voor de bezoekers, gebaseerd op de faciliteiten/omgeving van het park.

De afgelopen 2 weken heb ik me dan ook verdiept in het onderzoek naar de mogelijkheden die het park biedt om deze opdracht te volbrengen. In eerste instantie ben ik richting het Vondelpark gegaan om me eens te orienteren en mijn eerste indrukken vast te leggen met de camera. Uit deze verschillende foto’s heb ik vervolgens 6 objecten gekozen om mij op te richten, hieronder zijn de foto’s te bekijken:

openlucht-theater.jpgvertigo-vondelpark.jpgstandbeeld.jpg

vondelpark-muziekkapel-trouwplekje-04-04-2006.jpgspeeltuin.jpginformatie-bord.jpg

Van links naar rechts en van boven naar onder zijn dit: het openluchttheater, cafe Vertigo, standbeelden in het park, het muziektentje, de speeltuin en informatieborden.

Na deze eerste kennismaking met het park en het op een rijtje zetten van de interessantste objecten, ben ik gaan brainstormen over doelgroepen en mogelijke interactieve toepassingen van de objecten. Ik heb vervolgens mijn keuze laten vallen op het openluchttheater en de informatieborden. Hieronder heb ik deze 2 focuspunten van mij op de kaart van het Vondelpark aangegeven:

kaart.jpg

Openluchttheater:

Bij nader onderzoek bleek dat het openluchttheater in de warmere maanden veel gebruikt wordt om optredens en voorstellingen te geven. En zoals verwacht wordt hier door de bezoekers van het park van jong tot oud dankbaar gebruik van gemaakt. Op het moment dat ik in het park was regende het en zag alles en grauw en saai uit. Ondanks dit zag ik wel de potentie van het openluchttheater en ben ik verder gaan zoeken naar interactieve toepassingen die mogelijk ook hier op toegepast konden worden. Hier staan een aantal links waar ik mij door liet inspireren:

- Opera in het park

Deze pagina is een van de vele voorbeelden van optredens en voorstellingen in het openluchttheater.

- Dune 4.0, een kunstwerk van Daan Roosegaarde

Dit is een interactief landschap dat zich fysiek aanpast aan de aanwezigheid van een mens. De installatie reageert op beweging en geluid van de personen die er langs lopen. Binnenin zitten microfoons en bewegingssensoren die alles registeren

- Textile based sensing T-shirt maakt air-guitaar realistisch

Wetenschappers hebben een T-shirt ontworpen wat het mogelijk maakt om muziek te maken zonder gebruik te maken van een echte guitaar. Het T-shirt heeft bewegingssensoren in de ellebogen die de bewegingen waarnemen en deze draadloos doorsturen naar en computer die deze vertaalt naar guitaargeluid.

Dit gaf mij in ieder geval genoeg stof tot nadenken. Het lijkt me geweldig als we met deze nieuwe technieken een soort open podium zouden kunnen creeren die interactief reageert op het publiek. Op de beweging en ritme van de aanwezigen zou er muziek gegenereerd kunnen worden welke ondersteund zou kunnen worden met al bekende visuele oplossingen die nu bijvoorbeeld te zien zijn in windows mediaplayer.

Informatieborden: 

De informatieborden zijn uiteraard overduidelijk aan te passen om audiovisueel interactief te maken. Er kan op zo een manier een legio aan informatie op een enkel scherm komen te staan, denk hierbij aan openbaarvervoer, een programma voor het openluchttheater of de algemene regels van het park. Na een korte zoektocht voor meer inspiratie kwam ik op de volgende pagina terecht:

- GPS Touchscreens invade NYC cabs

Hier wordt verslag gedaan van de laatste ontwikkelingen van gebruiksvriendelijkheid van New Yorkse taxi’s. Door een touchscreen in de taxi’s te bouwen kunnen klanten hun reis digitaal bekijken, informatie opzoeken en digitaal betalen.

 

De Werkplaats – Eindverslag

Aan het begin van dit blok ben ik weer opzoek gegaan naar voorbeelden en tutorials, helaas kwam ik hier maar moeilijk uit zoals ik ook al merkte in blok 1. Vervolgens heb ik geprobeerd terug te grijpen op mijn lesboeken van vorig jaar, “spring in to PHP5” en “Learn SQL in 10 minutes”. Ik heb een paar kleine stappen kunnen maken aan de hand van de voorbeelden en de uitleg van de boeken, waardoor ik het voor elkaar kreeg om een stukje tekst uit een database te lezen en deze op het scherm te printen. Vervolgens heb ik af en toe een PHP functie opgezocht op www.php.net wat ik toch wel nuttig begon te vinden, de uitleg van de functies gecombineerd met een aantal veel voorkomende voorbeelden is erg prettig. En zo kreeg ik het, met alle verzamelde informatie, voor elkaar om de stuk tekst uit de database in een HTML form te printen om deze vervolgens aangepast terug te sturen richting de database. Dit was mijn zogenaamde ,“Eureka!” moment. Ik had dit, met hier en daar wat hulp van een klasgenoot, binnen 2 weken voor elkaar gekregen terwijl dit bijna mijn complete planning was voor het blok.

Ik ben uiteraard vanaf dit punt vol goede moed verder gegaan, maar ik wist dat de volgende stap erg lastig zou gaan worden. Ik wilde namelijk nu het porfolio onderdeel van mijn site omzetten zodat het via het CMS beheerbaar is. In had het idee om dit gedeelte op dezelfde manier aan te pakken zoals ik met mijn homepagina tekst had gedaan. In eerste instantie heb ik in de MySQL database een tabel voor de porfolio items aangemaakt, ik heb hier geen echte ERD van gemaakt maar dit zijn de onderdelen: id, project, datum, plaatje, omschrijving en leesMeer. Vervolgens heb ik een van mijn project items in de database ingevoerd om te proberen deze er weer uit te halen met PHP en SQL en in de webpagina te printen. Dit was met de voorbeelden die ik had, redelijk snel gedaan, waardoor ik verder ging met de item opgesplitst in een HTML form te printen.
Hier liep ik vervolgens muurvast, het opsplitsen van de uit de database opgehaalde items was een heel stuk moeilijker dan ik had gedacht. Ik heb vervolgens de hulp ingeroepen van een klasgenoot die het zo voor elkaar had, en het me versimpelt wist uit te leggen. Nadat ook dit onderdeel werkte werd de volgende stap de tekst aan passen op het scherm en weer terug sturen naar de database om vervolgens het bestaande item te overschrijven. Na wat gezoek en daarna gestoei met de juiste SQL statement, lukte ook deze stap me. Vervolgens wilde ik het ook voor elkaar krijgen om nieuwe portfolio items toe te voegen. Dit was redelijk snel voor elkaar aangezien er niet meer nodig was dan een HTML form en een SQL statement. Alles goed en wel tot nu toe maar er zijn altijd meerdere portfolio items aanwezig in de database dus ik wilde een manier hebben om de juiste item te selecteren en eventueel aangepast terug te sturen. Aangezien het id de primary key is heb ik deze gebruikt om mee te geven in een link, op het moment dat de database items worden geselecteerd. Ook wordt dit id mee gegeven in de SQL statements om op die manier de correcte project item aan te passen.

Dit alles was best lastig maar na wat stoeien met de code, was het eindelijk gelukt. Uiteindelijk begon de portfolio pagina zelf en de code van de pagina een grote bende te worden, dus om het overzicht terug te krijgen besloot ik om bepaalde dingen te scheiden. De portfolio pagina toont alleen nog de bestaande items waarbij de titel klikbaar is zodat het item in de edit pagina aan te passen is. De edit pagina toont een overzicht van de bestaande portfolio item titels en laadt de items in op ze aan te passen en terug te sturen. En de nieuwe item pagina is apart gezet en laat een HTML form zien waarmee de database gevuld kan worden. Op deze manier werd het allemaal weer een stuk overzichtelijker en werd het op de pagina zelf ook een stuk duidelijker wat er gebeurde. Dit was ook het laatste wat ik aan mijn project heb gedaan, ik ben een heel stuk verder gekomen dan ik had verwacht maar lang niet zover als ik had willen komen.

Mocht je na dit hele verhaal nog steeds niet zo een goed beeld hebben waar ik het nou over heb, volg dan de onderstaande link om even te kijken naar het eindresultaat:
http://oege.ie.hva.nl/~leegwa15/admin/index.php?p=home

Eindconclusie

Door de vele tegenslagen uit blok 1 had ik de lat iets lager gelegd, maar met hier en daar wat goede hulp van mijn klasgenoten ben ik een stuk verder gekomen dan verwacht. Ik heb dan ook behoorlijk wat nieuws geleerd over PHP en de dingen die al bekend waren weer eens flink opgefrist. Ik heb in het eerste blok veel te positief gedacht en verwacht dat het allemaal wel mee zou vallen. En in het tweede blok vind ik persoonlijk dat ik iets te terughoudend ben geweest met het opstellen van mijn planning. Ondanks dit vind ik dat ik een aardige middenweg heb weten te slaan tussen de 2 planningen, ik heb dan wel geen compleet CMS voor mijn portfolio site. Maar ik ben zoveel verder gekomen dan het enkel opslaan en aanpassen van een stukje tekst. Al met al was het geheel zoenzo zeer leerzaam te noemen.

Voortgang de werkplaats – IV

Ik ben in de kerstvakantie verder gegaan met mijn opdracht aangezien ik nog wel wat extra tijd voor mijn opdracht kon gebruiken. Aangezien ik vast zat zoals in de vorige berichten te lezen valt, heb ik de afgelopen periode terug gegrepen naar mijn leer boeken van vorig jaar. Ik heb weer een aantal hoofdstukken doorgelezen maar helaas kreeg ik het niet voor elkaar om veel verder te komen.

Ik heb het inmiddels voor elkaar gekregen om mijn CMS te scheiden van de site zelf, wat niet al teveel moeite koste. En heb het eindelijk voor elkaar om mijn portfolio items uit de database op te halen, aan te passen en vervolgens weer op te slaan. Ik moet er wel bij zeggen dat dit is gelukt met de hulp van een van mijn klasgenoten, namelijk Steijn van der Laan. Het probleem waar ik me op kapot staarde bleek doodsimpel opgelost te kunnen worden met de toevoeging van:

. ‘?’ . $_SERVER['QUERY_STRING']

Waardoor de totale action van het form er als volgt uit komt te zien:

action=”<?php echo($_SERVER['PHP_SELF'] . ‘?’ . $_SERVER['QUERY_STRING']);?>”

Hierdoor blijft de update actie op de juiste pagina en wordt de juiste SQL query verstuurd. Vervolgens heb ik het via de volgende SQL statement voor elkaar gekregen om mijn opgehaalde project item aangepast op te slaan:

$sqlInsert = “UPDATE `projectitems`
SET `project` = ‘”.$_POST['project'].”‘, `datum` = NOW(), `plaatje` = ‘”.$_POST['plaatje'].”‘, `omschrijving` = ‘”.$_POST['omschrijving'].”‘, `leesMeer` = ‘”.$_POST['leesMeer'].”‘ WHERE `id` =”.$_GET['id'].” LIMIT 1″;

Het project is zo wel weer op wielen maar ik heb zo een idee dat ik het niet voor elkaar zal krijgen om alles wat op mijn wens lijstje stond binnen dit blok af te krijgen. Aan de andere kant ben ik wel weer een stuk verder gekomen als ik zelf had verwacht. Met een beetje geluk valt het overige werk ook mee en lukt het me om nog een keer een grote sprong te maken. Hieronder heb ik nog een screenshot van mij project items in de database en mijn form met een ingeladen project item.

10-1-db-screen.jpg 10-1-site-screen.jpg

Voortgang de werkplaats – Mailtje op reactie Auke

Hoi Auke,

Bedankt voor je reactie op mijn blog. Helaas ben ik de afgelopen weken weinig aanwezig geweest in de lessen, waaronder ook vandaag. Ik zit inderdaad wat het project betreft een beetje met mijn handen in mijn haar. Een beetje mijn eigen schuld dus zou ik zeggen… Maar goed ik dacht ik ga toch in op je verzoek om je even te mailen en zal je het probleem, voorzover ik het kan, uitleggen.

Mijn eigen gekozen opdracht was het maken van een CMS voor mijn online portfolio. Ik ben ondertussen zover gekomen dat ik uit mijn database een stuk tekst kan halen en deze kan printen in een HTML form. Vervolgens is het mij ook gelukt om deze tekst aangepast terug op te slaan in de database waardoor ik deze ook aangepast op de website kan zien. Dit was mijn eureka moment zoals te lezen is op de blog. Hierna wou ik weer een stapje verder door ook mijn portfolio items in de database te stoppen. Hier wordt het dus iets lastiger, aangezien er meerdere portfolio items zijn met ieder hun unieke naam, datum, plaatje, tekst en leesMeer link. Ik moet dus een soort overzicht op het scherm zien te krijgen van alle items en deze vervolgens individueel kunnen aanpassen en opslaan. Ik krijg de informatie wel uit de database maar niet onderverdeeld in de eerder genoemde onderdelen. Daarnaast heb ik de database op het moment maar met 1 item gevuld en hoe ik met meerdere om zou moeten gaan…

Ik kan me voorstellen dat de uitleg niet helemaal begrijpelijk is, aangezien ik zelf niet helemaal begrijp wat ik wil vind ik het ook lastig om het te formuleren. De porfolio site waar ik mijn CMS voor maak is: www.sanderleegwater.nl . Ik heb mijn voorgang met het CMS niet online staan omdat ik graag PHP5 wilde gaan leren en ik geen servers heb die deze versie draait. Het gehele project heb ik online gezet op: http://oege.ie.hva.nl/~leegwa15/werkplaats/CMSpgng2portfolioSite.rar mocht je interesse hebben om deze in te zien. (In de map admin zijn de bestanden van het CMS, de rest is de portfolio site zelf.)

Ik heb geprobeerd er zelf uit te komen door voorbeelden te zoeken op het internet of bij klasgenoten. De zoekresultaten van het internet zijn chaotisch waardoor je door de bomen het bos niet meer ziet. De voorbeelden die ik heb kunnen verzamelen zijn over het algemeen ook niet echt doorzichtig te noemen waardoor ik niet echt weet waar ik zou moeten beginnen met het te begrijpen. Vervolgens heb ik geprobeerd terug te vallen op de leerboeken van vorige jaar, Spring in to PHP5 en teach yourself SQL in 10 minutes. Waar in hier weer tegen aanloop is dat ik niet echt weet waar ik naar op zoek ben.

Ik hoop dat ik je zo genoeg op de hoogte heb gebracht. Ik weet op het moment dus inderdaad niet zo goed hoe ik verder moet gaan, mocht je nog vragen, opmerkingen of eventuele oplossingen hebben hoor ik graag van je!

Mvg,

Sander Leegwater, 219109, TDI-3.

« Vorige ingaves
Follow

Get every new post delivered to your Inbox.