Stageverslag Bas Schl端ter
Kunst & Techniek 1 september 2008 / 30 januari 2009
Spider Spider Digital Media is gevestigd in Spinnerij Oosterveld, een bedrijfsverzamelpand in Enschede.
Stageverslag Spider Spider Digital Media Naam Bas Schlßter Plaats en afronding Enschede, 31 januari 2009 Bedrijf en afdeling Spider Spider Digital Media - productieteam Bedrijfsbegeleider Christian Fictoor Opleiding en begeleidend docent Kunst & Techniek – Harry Sanderink
I
Voorwoord Ik schrijf dit verslag naar aanleiding van mijn stageperiode bij Spider Spider Digital Media te Enschede, van 1 september 2008 t/m 30 januari 2009. Ik hoop dat dit verslag een duidelijk en informatief beeld zal scheppen over mijn stageperiode. Graag wil ik alle medewerkers binnen Multimedia House alsmede de MBO stagiaires, die in dezelfde periode ook stage hebben gelopen, heel erg bedanken voor de opgedane kennis, de ervaring, de prettige werksfeer en de vele contacten die ik heb gelegd. Christian Fictoor wil ik in het bijzonder bedanken voor zijn vertrouwen in mij en de basis die gelegd is voor een verdere samenwerking binnen Multimedia House. Enschede, Bas Schl端ter 30-01-2009
II
Inhoudsopgave 3. Projectmanagement 3.1 Ultimate Volleyball Xperience 3.2 Apollo Residence 3.3 Scheepmakerstoren 3.4 Hoornsemeer Concert 3.5 Partners & SAM! logo animatie
19 20 23 26 29 32
07 07 07 09
4. Conclusie & aanbevelingen
35
5. Evaluatie persoonlijke leerdoelen
39
2. Algemene stageopdracht
11
Bijlagen
2.1 Procedure en werkwijze 2.1.1 OriĂŤntatie 2.1.2 Grafisch ontwerp 2.1.3 Webbouw 2.1.4 Oplevering 2.1.5 Post-productie
11 11 12 16 16 16
2.2 Resultaten
17
Titelpagina Voorwoord
I II
Samenvatting Begrippenlijst Inleiding
01 03 05
1. Beschrijving van het bedrijf 1.1 Organisatie 1.2 Diensten & producten 1.3 Organigram
Spider Spider website concept Spider Spider site eerste ontwerp Google Documenten buglist
A B C
Samenvatting Van 1 september 2008 tot en met 30 januari 2009 heb ik stage gelopen bij Spider Spider Digital Media te Enschede. Als stageopdracht moest ik een compleet nieuwe website ontwikkelen voor Spider Spider Digital Media. Daarnaast zou ik als projectmanager de kleine projecten managen en medewerkers aansturen. Het opleveren van een compleet nieuwe website voor Spider Spider Digital Media en fungeren in een team als projectmanager is behaald door de vrijheid die ik kreeg van Christian Fictoor als projectmanager, zijn advies en de goede samenwerking met mijn collega’s. Het realiseren van de nieuwe website is goed gelukt omdat ik het gehele ontwikkelproces zelf mocht indelen en omdat ik hier ook een goede begeleiding in heb gekregen van Christian Fictoor.
01 Aanbevelingen aan het bedrijf zouden kunnen zijn dat er een stukje kwaliteitscontrole gedaan moet worden tijdens lopende projecten zodat de kwaliteit gewaarborgd blijft. Tevens zou het een goed idee zijn om gebruik te gaan maken van een projectmanagementsysteem zodat de productieprocessen in de toekomst overzichtelijker in kaart gebracht worden.
Spinnerij Oosterveld is een voormalige garenspinnerij uit 1911. Naast Spider Spider zijn hier nog tientallen andere bedrijven gevestigd.
Begrippenlijst Lijst van afkortingen ‘Animated GIF’ Zoals je waarschijnlijk al weet is een GIF gewoon een afbeelding met een .gif extensie. Een GIF animatie toont niet gewoon een afbeelding, maar bevat meerdere lagen afbeeldingen die na elkaar getoond worden. Je kunt zelf aangeven hoe lang een plaatje in beeld moet blijven voordat de andere plaatjes getoond worden (frame delay). Ook kun je aangeven of de hele serie herhaald moet worden (loop). Op deze manier creëer je een animatie. ‘Buglist’ Een overzichtelijke lijst met daarin de bugs (fouten) in een bepaald systeem. Per bug wordt aangegeven wat deze bug precies inhoudt, wanneer deze gespot is en wie er bezig is met het oplossen van de desbetreffende bug.
03 ‘Corporate identity’ De verzameling eigenschappen die een organisatie herkenbaar maakt en onderscheidt van andere organisaties. Door positieve eigenschappen van haar ‘persoonlijkheid’ zichtbaar tot uitdrukking te brengen, kan een organisatie zich profileren ten opzichte van anderen (vaak door middel van het gebruik van een herkenbaar logo en huisstijl). ‘CSS’ CSS staat voor Cascading Style Sheets. De informatie over de vormgeving wordt toegevoegd aan HTML of XHTML code. Het is gebruikelijk om alle informatie over de opmaak in een extern document te zetten; een stylesheet. ‘Embedded video’ Embedded video is een online video waarbij het videoscherm van de afzender via html-code is geïntegreerd in de webpagina. Embedded video blijkt een stuk effectiever dan de ‘normale’ manier van videovertoningen omdat de gebruiker geen aparte videoplayer nodig heeft om de video te bekijken.
04 ‘Organigram’ Een organigram (ook wel organogram genoemd) geeft in één keer een beeld van een bedrijfsstructuur. Wie moet je aanspreken voor bepaalde resultaten en welke werknemer valt onder welke afdelingschef? ‘PHP’ PHP staat voor PHP Hypertext Preprocessor. PHP is een serverside programmeertaal. Dit wil zeggen dat webpagina’s op de server opgebouwd (‘geparsed’) worden voor ze naar de browser verstuurd worden. Met PHP, in combinatie met MySQL, kunnen dynamische websites worden geprogrammeerd. ‘Rendering’ Een digitaliseerproces waarbij grote hoeveelheden data (geluids- of beeldinformatie) wordt vertaald naar een beperkte en tegelijk vast voorgeschreven aantal brokjes, de `digits` (dit wordt zo genoemd omdat zij in feite getallen vertegenwoordigen).
‘Use-case’ Een use-case stemt overeen met een bepaald scenario waarvoor je gebruik wil maken van de te bouwen (web)applicatie. Denk bijvoorbeeld aan het noteren van klantgegevens, het noteren van een bestelling, het factureren van een order en het innen van een betaling. ‘XHTML’ XHTML staat voor Extensible Hypertext Markup Language. Deze taal is een meer stricte variant van het vroeger populaire HTML. Doordat documenten stricter worden opgebouwd zijn ze beter leesbaar voor de browser, maar ook voor bijvoorbeeld zoekmachines.
Inleiding De aanleiding om stage te lopen bij Spider Spider Digital Media kwam door het contact dat ik heb met Martijn Jazet van Fitting Image te Hengelo. Ik ken Martijn via mijn moeder en heb al eens een website samen met Martijn ontwikkeld voor de buurman van Martijn. Toen ik voor school stage moest lopen heb ik met Martijn om de tafel gezeten om te kijken of een eventuele stageplek bij Fitting Image binnen de opleiding Kunst & Techniek paste. Martijn vertelde mij dat ze binnen Fitting Image aan het reorganiseren waren en dat ze zich als bedrijf meer gingen richten op het ontwikkelen van marketing en branding. Daar kwam veel minder grafisch ontwerp of conceptontwikkeling aan te pas dan voorheen. De uiteindelijke uitwerking van concepten worden dan ook uitbesteed bij Spider Spider Digital Media. Martijn heeft me dan
05 ook aanbevolen bij Spider Spider Digital Media omdat dat veel meer binnen mijn straatje van grafisch ontwerp, conceptontwerp en het werken in groepsverband lag. Zodoende kwam ik in contact met Christian Fictoor en hij vertelde mij in een oriĂŤnterend gesprek over de plannen die hij had met Multimedia House en welke rol ik daarin zou kunnen spelen. Vooral het hele concept van Multimedia House sprak me erg aan; dat door optelling van kennis, netwerken en ervaring, een nieuw multimediaal platform ontstaat. Hierover vertel ik in hoofdstuk 1 meer. Uiteindelijk kwamen we tot de conclusie dat ik dan stage zou gaan lopen bij een van de partners van Multimedia House; Spider Spider Digital Media. Christian Fictoor is tevens de eigenaar van dit bedrijf.
06 Stageopdracht Als stageopdracht moest ik een compleet nieuwe website ontwikkelen voor Spider Spider Digital Media (een partner binnen Multimedia House, hierover meer in hoofdstuk 1). Daarnaast zou ik als projectmanager de kleine projecten managen en medewerkers aansturen. Dat houdt in dat ik het gehele project zou managen, van begin tot eind en dat ik ook veel direct contact zou hebben met de klanten. Doelstelling Het opleveren van een compleet nieuwe website voor Spider Spider Digital Media en fungeren in een team als projectmanager. In de volgende hoofdstukken beschrijf ik het bedrijf, de bedrijfsprocessen, mijn stageopdracht en de opdrachten die ik daarnaast heb gemanaged als projectmanager. Aan het eind beschrijf ik mijn conclusies en eventuele aanbevelingen.
1. Beschrijving van het bedrijf 1.1 Organisatie
Multimedia House is een stichting. Binnen die stichting hebben zicht meerdere partners aangesloten. Concreet wordt dit vertaald in een intensieve samenwerking van ervaren bedrijven, instellingen, een onafhankelijk bestuur en externe partners in het pand Spinnerij Oosterveld te Enschede. Spider Spider Digital Media is een partner binnen Multimedia House. Het is een bedrijf dat zich vooral richt op webdesign en webdevelopement. Spider Spider bestaat uit een team van: consultants, projectmanagers, designers, interactiondesigners, programmeurs, techneuten, support en management ondersteuners. Daarnaast lopen hier per stageperiode gemiddeld 3 stagiaires stage. Het bedrijf heeft al sinds 1996 ruime ervaring op het gebied van internet en multimedia. Door die 13 jaar ervaring is Spider Spider Digital Media een specialist op zijn vakgebied.
07 1.2 Diensten en producten
Spider Spider Digital Media is actief in het ontwikkelen van websites en multimedia, daarnaast levert Spider Spider ook de volgende diensten en producten: â– Hosting In samenwerking met Hosting-Solutions biedt Spider Spider hostingpakketten aan, maar ook narrowcasting systemen, media hosting, webcast systemen, backup-oplossingen, etc. â– Multimedia producties Denk hierbij aan animaties, film, (interactieve) dvd-producties en touchscreen-systemen. â– Consultancy De consultants van Spider Spider kunnen adviseren over uiteenlopende zaken als: communicatie- en marketing advies (met de nadruk op online / multimedia), management advies (met de nadruk op automatisering van bedrijfsprocessen), e-commerce en onderwijs- & (semi)overheid automatisering & communicatie.
08 â– Content Het ontwerpen van huisstijlen, (3d) animaties & visuals, teksten & vertalingen, redactiewerk / redactievoering, fotografie (o.a. een eigen in-house studio), audio / muziek. â– Mobiele applicaties Het adviseren over de mogelijkheden die mobiele platformen kunnen bieden. Daarnaast ontwikkelt Spider Spider software voor mobiele platformen en kan het een website aanpassen voor optimaal gebruik op mobiele internet platforms. â– Marketing Spider Spider kan, in samenwerking met diverse partners, een heel marketing- en brandingtraject verzorgen vanaf analyse tot strategie (inclusief de uitvoering hiervan).
09 1.3 Organigram
Onderstaand het organigram van de bedrijfsstructuur van Spider Spider. Het management team bestaat uit dezelfde personen die ook het team van vaste medewerkers vormen.
De stagiaires bestaan uit studenten die een stageperiode (doorgaans van september tot en met januari en van februari tot en met juni) doorlopen. Het team van freelancers bestaat uit werknemers die op oproepbasis voor Spider Spider werken.
General Manager Christian Fictoor
Management team
Johan Meyer Externe adviseur Ellis Eggert Financien
Productie team
Rick ter Heide Techniek Bas Schluter Project management
Stagiaires
Freelancers
Vaste medewerkers
Ruimte 2.19, de ruimte waar Spider Spider Digital Media zich met een aantal andere partners van Multimedia House huisvest.
2. Algemene stageopdracht
11
Mijn stageopdracht hield in dat ik een concept voor de nieuwe website van Spider Spider moest bedenken en deze in zijn geheel moest uitwerken. De deadline voor de opdracht lag op 31 december 2008, aangezien we het nieuwe jaar in wilden gaan met een geheel nieuwe website en een e-card met een nieuwjaarsgroet zouden versturen naar alle klanten en partners.
De vorige stagiaire Brandon had al een ontwerp gemaakt voor een eventuele nieuwe website voor Spider Spider maar hier hoefde ik mij niet aan vast te houden. Wel heb ik even kort met Brandon (eigenaar van Brandon Media, een partner van Multimedia House) om tafel gezeten om samen wat ideeën op te doen en om te kijken welke elementen van zijn ontwerp in een ander jasje konden worden gestoken voor de nieuwe website.
2.1 Procedure en werkwijze
De 2 weken daarna ben ik me gaan oriënteren en heb ik gekeken hoe soortgelijke bedrijven zich profileren op het internet en hoe ik de website van Spider Spider zo goed mogelijk kon indelen.
2.1.1 Oriëntatie Op 8 september 2008 heb ik samen met Christian Fictoor gebrainstormed over het concept en de ideeen die hij had over de nieuwe website voor Spider Spider aangezien hij de eigenaar is en hij een idee heeft hoe hij zich aan de hand van een nieuwe website wil profileren als bedrijf. Aan de hand van mijn notities heb ik een document (zie bijlage I) opgesteld om een overzicht te creëren.
12 2.1.2 Grafisch ontwerp Van 6 tot en met 31 oktober ben ik bezig geweest met het design voor de website. Ik ben eerst begonnen met wat ruwe schetsen. Deze heb ik gemaakt aan de hand van de ideeën die ik heb opgedaan door het bestuderen van andere websites van bedrijven.
■ Corporate identity De website moet een bepaalde uitstraling krijgen door gebruik te maken van een herkenbaar logo en een passende huisstijl. Deze moet zakelijk zijn, maar niet te saai. Een combinatie van zakelijkheid en een tikkeltje speels moet goed naar voren komen.
Na het schetsen ben ik begonnen met het grafisch ontwerp in Adobe Photoshop. Ik heb hier rekening gehouden met de volgende punten:
■ Huisstijl en logo Spider Spider Digital Media beschikt over een reeds krachtig logo. De huisstijl bestaat voornamelijk uit wit, zwart en oranje. Deze kleuren moeten de website ook domineren voor de herkenbaarheid van het bedrijf. Daarnaast moet het logo altijd goed in beeld blijven staan.
■ Uitstralen waar je goed in bent Aangezien Spider Spider al vele jaren ervaring heeft met webdevelopment moet dit in de website natuurlijk goed naar voren komen. Je eigen website is natuurlijk één van dé visitekaartjes om te laten zien wat Spider Spider kan en waar ze goed in zijn.
14 ■ Schermresolutie De website moet het best te bekijken zijn op een resolutie van 1024x768 pixels omdat de meeste gebruikers van een webbrowser een minimale resolutie van 1024x768 pixels gebruiken. Een paar jaar geleden zou deze standaard nog op 800x600 pixels liggen, maar door het toenemende gebruik van LCD en TFT monitoren en de hoge resoluties die hier doorgaans op gedraaid worden is die standaard hoger komen te liggen. ■ Verschillende headers Om het niet tè corporate te houden heb ik er voor gekozen om bovenin een foto in de header te plaatsen. De foto’s in zwart/wit met een hoog contrast en oranje elementen conform de huisstijl. Deze (stock)foto’s zijn gerelateerd aan het onderwerp van de pagina.
■ ‘Laatst opgeleverde project’ en ‘coming soon’ Om meteen te laten zien wat Spider Spider aan producten levert kun je op de homepage zien welk project er als laatste is opgeleverd en welk product binnenkort opgeleverd gaat worden. Deze elementen worden ‘getriggerd’ als je er met je muis overheen gaat. In bijlagen a en b zie je 2 verschillende ontwerpen die ik gemaakt heb. 18 november 2008 heb ik deze ontwerpen voorgelegd aan Christian Fictoor. We hebben samen besproken wat de sterke en de zwakke punten aan de ontwerpen waren. Van die verschillende ontwerpen hebben we samen een selectie gemaakt van elementen en onderdelen die goed te gebruiken waren en die elementen en onderdelen heb ik gecombineerd in het uiteindelijke ontwerp dat op de volgende pagina te zien is.
Online te bekijken op www.spiderspider.nl
16 2.1.3 Webbouw Op 24 november 2008 ben ik begonnen met het bouwen van de website in XHTML/PHP en CSS. Mijn kennis van XHTML/CSS was al dusdanig dat ik bij het grafisch ontwerp rekening heb gehouden met de opbouw van de site. Daardoor kon ik gestructureerd en snel aan de slag om het grafisch ontwerp te vertalen in een werkende website. Ik heb gebruik gemaakt van CSS om het geheel zo overzichtelijk mogelijk te houden en om de stijl van bepaalde elementen snel aan te kunnen passen. De mappenstructuur heb ik zo gemaakt dat de meeste files makkelijk en logisch terug te vinden zijn. Stagiaire Jimmy heeft mij geleerd hoe je met PHP bepaalde elementen op een webpagina kan ‘includen’, waardoor je die code eenmalig uit een aparte PHP-file kunt inladen. Dit is vooral handig als bepaalde code op verschillende pagina’s vaak hetzelfde is of als er op het laatst toch nog iets veranderd moet worden (zoals in de navigatie, de footer of de header van een pagina).
Daarnaast heeft hij mij geleerd hoe je een contactformulier met PHP maakt zodat er een mail gestuurd kan worden naar een emailadres met een bericht en bepaalde gegevens van een persoon. Met Jimmy heb ik flash-animaties gemaakt voor ‘laatst opgeleverde project’ en voor ‘coming soon’. Deze animatie komt alleen tevoorschijn als je er met je muis overheen gaat, om de mensen te belonen voor het verkennen van de website en voor de ‘fun’ factor die het niet al te corporate maakt. 2.1.4 Oplevering 31 december 2008 is de site opgeleverd en online gegaan. Dit in combinatie met de e-card die stagiaire Melvin Winkeler heeft gemaakt, waarin alle medewerkers van Spider Spider de klanten en partners een gelukkig en gezond 2009 wensen. 2.1.5 Post-productie Na de oplevering heb ik nog veel tekstfouten aangepast. Daarnaast zijn er nog een paar kleine bugs uitgehaald die zich voordeden in verschillende webbrowsers.
17 2.2 Resultaten Door het bedenken en het bouwen van een compleet nieuwe website voor Spider Spider heb ik geleerd om overzichtelijk en stapsgewijs te werk te gaan. Van tevoren moet je duidelijk op papier krijgen wat de wensen van de klant (in dit geval Christian Fictoor, eigenaar van Spider Spider) zijn en deze uitvoerig en tot in detail bespreken. Pas dan heb je een goede basis van waaruit je verder kunt werken. De stijl van een website is erg belangrijk, het moet meteen een goede indruk wekken bij de gebruiker die de website voor het eerst opent. Ook moet het in één oogopslag een goed beeld scheppen van de kwaliteit die Spider Spider levert. Een bedrijf dat webdevelopment als product levert moet dit dus ook uitstralen in haar eigen website anders ben je niet geloofwaardig.
Daarnaast is het noodzakelijk dat bezoekers terug blijven komen om te kijken of de website nieuwe dingen bevat. In dit geval is het een noodzaak om vaak portfolio items toe te voegen of om te updaten. De ‘laatst opgeleverd project’ en ‘coming soon’ items spelen hierin een grote rol aangezien deze als eerste worden getoond wanneer men de homepage van de Spider Spider website bezoekt. Daarnaast ben ik goed geholpen door de stagiaires die ook stage liepen. Samen kwamen we vaak tot nieuwe ideeën of bedachten we punten die beter konden.
18 De reacties op de website waren overwegend positief. Ik heb ook goede feedback ontvangen van veel gebruikers die de website bezocht hebben. Zo kan ik de gehele website misschien nog iets interactiever maken door middel van video’s te gebruiken in de header van de website. Dit kan bijdragen aan het gevoel van digital media maar ook over welk onderwerp je de bezoeker tracht te informeren. Dit was in mijn oorspronkelijke concept ook al de bedoeling maar is door de gestelde deadline en de tijd die ik kwijt was aan het managen van andere projecten (nog) niet doorgevoerd. Van de feedback ga ik na mijn stage een overzicht maken en aan de hand daarvan een concept ontwerpen voor de 2e fase van de website.
3. Project Management Naast mijn algemene stageopdracht heb ik mijn gehele stage gefungeerd als projectmanager. Dit hield in dat ik de ‘kleinere projecten’ op mij nam, een team van werknemers (meestal stagiaires en freelancers) bij elkaar bracht, deze aanstuurde en zorgde dat projecten opgeleverd werden. Ik had dan ook erg veel contact met de klant en moest er voor zorgen dat de deadlines werden gehaald. In de volgende paragrafen vind je een korte opsomming van de projecten waar ik de leiding over had als projectmanager en per project zal ik wat algemene informatie geven. Tevens geef ik per project mijn gevonden resultaten.
19
3.1 Ultimate Volleyball Xperience NeVoBo www.uvx.nl
Omschrijving UVX staat voor Ultimate Volley Xperience, dit is een concept van de Nederlandse Volleybal Bond. UVX organiseert volleybalevents op rare locaties zoals op daken van winkels, op marktpleinen of in oude fabriekshallen. UVX heeft een webcommunity laten maken door Spider Spider. Deze communitywebsite is echter nooit helemaal afgerond. Er waren nog veel bugs en community-elementen die niet werkten. Mijn functie Zorgen dat de UVX communitywebsite zou gaan draaien zoals dat in eerste instantie ook was afgesproken en zoals het bedoeld was. Op 16 oktober 2008 hebben Christian Fictoor en ik een vergadering gehad met het UVX team van NeVoBo. In deze vergadering hebben we
20 alle punten besproken die nog opgelost moesten worden en hoe het vervolgtraject er uit ging zien. We kwamen er achter dat veel ideeën die UVX had bij de webcommunity niet goed waren gecommuniceerd met Spider Spider waardoor er dingen ontbraken aan de webcommunity die door UVX wel noodzakelijk werden geacht. We hebben samen met UVX een buglist opgesteld. Deze buglist (zie bijlage C) heb ik online gezet via Google docs zodat de medewerkers van UVX de status van deze lijst konden bijhouden en zien welke bugs al dan niet opgelost waren. De helft van de bugs waren codeer fouten in de PHP code van de website, dus daar heb ik één van de freelance programmeurs op gezet. De andere helft van de buglist waren CSS fouten. Deze fouten heb ik zelf allemaal opgelost.
21 Daarnaast hebben we op 11 november 2008 nog een vergadering gehad met UVX. Hierin hebben we gebrainstormed over de mogelijkheden die de communitywebsite nog meer te bieden heeft voor het UVX concept en met welke middelen er veel meer interactiviteit kon worden bereikt tussen de UVX events die gehouden worden en de communitywebsite. Christian Fictoor heeft aan de hand van die vergadering en mijn notulen een nieuwe use-case geschreven. Binnenkort gaan we aan de slag met deze use-case en zullen er veel dingen aan de communitysite aangepast worden.
Resultaten Het is noodzakelijk om met een klant die een webcommunity bij Spider Spider wil laten ontwikkelen om de tafel te gaan zitten en een duidelijke lijst te maken met de functies die de desbetreffende website volgens de klant zou moeten hebben. Aan de hand hiervan kan Spider Spider een use-case schrijven waarin duidelijk en stap voor stap op papier komt te staan wat het websysteem zou moeten doen. Daardoor krijg je achteraf nooit meer discussies of iets wel of niet in het systeem behoort te zitten.
Webcommunity van UVX
3.2 Apollo Residence Memid Investments BV. www.apollo-residence.nl
Omschrijving Memid Investments B.V. is een zelfstandig opererende projectontwikkelaar gevestigd in Mijdrecht. Memid ontwikkelt ondermeer winkels, kantoren, bedrijfsruimte, woningen en hotels. Een van die projecten is Apollo Residence, een appartementencomplex dat bestaat uit 74 luxe appartementen. Het gebouw ligt aan de oostzijde van Stadion Galgenwaard te Utrecht en maakt onderdeel uit van de totale herontwikkeling van het stadioncomplex. Voor Apollo Residence had Spider Spider al een website gemaakt. Deze website moest echter vernieuwd worden omdat het appartementencomplex de 2e fase was ingegaan en de appartementen verkocht konden worden.
23 Mijn functie Memid had ons een document gegeven met de aanpassingen die doorgevoerd moesten worden. Aangezien de website compleet bestond uit tabellen heb ik besloten om deze opnieuw te bouwen in XHTML/CSS. Zo is het ook makkelijker aan te passen mochten er in de toekomst nog andere dingen gewijzigd worden. Ik heb de stagiaire Marije geholpen met het opbouwen van de website in XHTML en CSS. Ik heb haar de basis daar van uitgelegd zodat ze dat een beetje onder de knie kreeg. Tevens hebben we de website een geheel andere kleurencombinatie gegeven. Het geheel was namelijk eerst grijs op wit, daar hebben we blauw op wit van gemaakt, aangezien dat veel beter pastte bij de kleur van het logo en de algemene huisstijl van Apollo Residence.
24 Resultaten Het bouwen van een simpele website in XHTML/CSS geeft enorm veel voordelen. Ten eerste ben je veel flexibeler als je snel meerdere aanpassingen tegelijk wilt doen omdat je gebruik maakt van stylesheets (CSS). Ten tweede wordt de structuur en de opbouw van de website veel duidelijker als je gebruik maakt van stylesheets omdat je deze naar eigen wens kan indelen. Ten derde ben je niet meer afhankelijk van de vele plaatjes die doorgaans in tabellen worden gegooid om zo een ‘layout’ te creëeren en heb je veel meer controle over de kleuren en de stijl van de website. Je hoeft dan ook veel minder gebruik te maken van software zoals Photoshop om telkens aanpassingen te doen.
Informatieve website voor Apollo Residence
3.3 Scheepmakerstoren Rotterdam Memid Investments BV.
26 konden gebruiken voor de website. Zo werd ook een duidelijk beeld en herkenbaar beeld gecreëerd van de Scheepmakerstoren.
Omschrijving Een ander project van Memid is de Scheepmakerstoren in Rotterdam. De Scheepmakerstoren telt 45 luxe hotelappartementen en is gelegen op het Wijnhaveneiland tussen het centrum van Rotterdam en de Maas. Voor dit appartementencomplex moest een informatieve website worden gebouwd. Mijn functie Mijn taak als projectmanager was om een website af te leveren die qua stijl erg leek op de luxe brochure die Memid al had laten maken voor de Scheepmakerstoren. Het moest er strak en luchtig uitzien daarom heb ik voor veel wit gekozen om het zo ‘clean’ mogelijk te houden. Daarnaast stonden er veel high-res foto’s in de folder die we prima
Samen met freelancer Marius heb ik de site opgebouwd in XHTML/CSS. Ik heb hem ook de basis van XHTML/CSS geleerd omdat hij er nog niet echt bekend mee was. Met Jimmy heb ik in Flash een plattegrond van het appartementencomplex gemaakt. Per verdieping kun je dan snel en overzichtelijk zien hoe de plattegrond van dat appartement er uit ziet. De bedoeling was dat we op den duur een interactieve website met video’s zouden gaan maken als de Scheepmakerstoren in de 2e fase van het bouwproject zou belanden. De plannen hiervoor waren al gemaakt en er was ook al een datum gepland om te filmen op locatie.
27 Dit is toendertijd niet doorgegaan omdat de klant toch ineens iets anders wilde en de hele huisstijl van de Scheepmakerstoren campagne heeft laten vernieuwen door een ander bedrijf. De website zelf is dus ook nooit online gegaan. In februari stel ik een nieuw team samen en dan beginnen we aan de 2e versie van de website die op den duur wel online zal gaan.
Resultaten Als de klant duidelijk is in zijn wensen voor een website is het niet al te moeilijk om een dergelijke website te realiseren. Maar er kunnen altijd onvoorziene dingen gebeuren waar je zelf geen zicht op hebt. Zo kan het dus voorkomen dat de klant besluit het roer compleet om te gooien en ineens een andere huisstijl voor een project gaat gebruiken. Het is jammer dat de website nooit online is geweest, maar aan de andere kant is het voor Spider Spider geen probleem, aangezien die website gewoon gefactureerd en betaald is door de klant. Daarnaast zullen we ook gewoon de nieuwe website gaan bouwen.
Informatieve website voor Scheepmakerstoren
3.4 Hoornsemeer Concert Stichting Hoornsemeer Concert www.hoornsemeerconcert.nl
Omschrijving Het Hoornse Meer Concert is een feestelijk en bijzonder concert van topniveau, uitgevoerd door jong talent op een drijvend podium in de kom van het Hoornse Meer, Groningen-Zuid. Het openluchtconcert is gratis toegankelijk. Voor dit concert moest een informatieve website worden gemaakt. Het ontwerp was er al en was gemaakt door Annemieke Fictoor, een tante van Christian Fictoor. Zij is grafisch ontwerpster en eigenaresse van Fictoor Vormgeving.
29 Mijn functie Ik moest zorgen dat de ontwerpen die Annemieke Fictoor had gemaakt 1 op 1 werden vertaald naar een website. Brandon was hier in zijn stageperiode bij Spider Spider al aan begonnen maar het was nooit echt afgemaakt. Zijn ‘vertaling’ van de schetsen van Annemieke Fictoor waren echter niet goedgekeurd door haar. Ik heb stagiaire Baran de website in XHTML/CSS laten maken, ook hem heb ik erg veel basiskennis van XHTML/CSS bijgebracht en gezorgd dat hij gestructureerder te werk zou gaan. Het is noodzakelijk dat hij zijn websitestructuur overzichtelijk zou indelen aangezien andere mensen ook nog moeten werken met zijn code en bestanden.
30 Resultaten Soms is het lastig als klanten een eigen ontwerp aanleveren. Vaak is dit ongebruikelijk en maak je zelf een ontwerp voor een website omdat je enige ervaring op dat gebied hebt en je de do’s en dont’s kent. Lastiger wordt het als je je strict moet houden aan een ontwerp dat geleverd wordt door een grafisch ontwerper die zich in feite niet richt op digitale media, maar doorgaans op printmedia. Dit was ook het geval met de website voor Hoornsemeer Concert. Het ontwerp van Annemieke Fictoor was grafisch erg miniem, en het was in feite meer een folder dan een echte website. Er zijn teveel vakken waar tekst in staat waardoor het geheel niet overzichtelijk oogt. [zie bijlage VI]. Daarnaast is de dubbele navigatiebalk erg klein en het is niet meteen duidelijk dat zich daar de navigatie van de site bevind.
Het was dan ook erg lastig om hier een redelijk werkende website van te maken die ook aan de wensen van de klant zou voldoen. Dit heeft dan ook geleid tot veel telefonisch contact met de klant om samen de website beetje voor beetje te doorlopen en op te schrijven hoe het er uit moest komen te zien en hoe het zou werken.
Informatieve website voor Hoornsemeer Concert
3.5 Partners & SAM! logo animatie Partners & SAM!
Omschrijving Partners in Travel en SAM! Destination & Event Management zijn een samenwerking aangegaan waaruit het nieuwe Partners & SAM! is ontstaan. Om deze samenwerking duidelijk te communiceren naar de klanten is er voor gekozen om beide logo’s van de bedrijven samen te voegen in een animatie, waaruit het nieuwe logo voor Partners & SAM! ontstaat. Deze logo-animatie zou in een mailing naar alle klanten worden verstuurd door in de mailing een ‘animated gif‘ van de animatie en een link naar een HTML pagina met een embedded video waarin de Flash-animatie te zien is te plaatsen.
32 Mijn functie Het storyboard voor deze animatie was al gemaakt voor Andras Fictoor, Art-director bij the Entertainment Group. Ik moest samen met Marius zorgen dat we ons zoveel mogelijk aan dit storyboard hielden bij het maken van de animatie in Adobe After Effects. Marius heeft mij veel basisfuncties in After Effects geleerd en samen hebben we de animatie gemaakt. De voice-over die onder de animatie kwam is ook verzorgd door Andras Fictoor. Samen met hem hebben wij eerst de animatie gemaakt en aan de hand van de uiteindelijke animatie heeft hij de audio ingesproken. Die audio heb ik daarna in de animatie geplaatst. Deze animatie heb ik als .SWF gerenderd [begrippenlijst] zodat deze als embedded video (in flash) kon worden bekeken in een HTML pagina.
33 Resultaten Het grote voordeel van een embedded Flashvideo is dat (zo goed als) iedereen deze direct in zijn browser kan bekijken. Er hoeft dus geen mediaspeler te worden opgestart en de video hoeft niet apart te worden gedownload. Door middel van de animated gif in de mailing hebben we de klanten laten zien dat de 2 bedrijven een samenwerking aan zijn gegaan en hierdoor worden ze getriggerd om de gehele animatie te bekijken in een aparte HTML pagina.
De HTML pagina met embedded-video
35
4. Conclusie & aanbevelingen Mijn doelstelling om te fungeren als projectmanager en een concept voor de nieuwe website van Spider Spider te bedenken en uit te werken heb ik behaald door de volgende punten: ■ Christian Fictoor heeft mij de vrijheid gegeven om als projectmanager meerdere projecten te managen. Daarin liet hij mij erg vrij, maar ondersteunde hij wel daar waar ik het nodig had. Zijn begeleiding heeft me al aardig gevormd tot de projectmanager die ik graag zou willen zijn; midden in een projectgroep staan, maar wanneer het nodig is toch boven het team staan om te zorgen dat projecten zo goed mogelijk opgeleverd worden.
Van andere medewerkers heb ik ook te horen gekregen dat de functie van projectmanager mij past en dat ik duidelijk en overzichtelijk te werk ga.
■ De vrijheid die Christian Fictoor mij gaf om een gehele nieuwe website te bouwen voor Spider Spider was erg fijn omdat ik zo van het begin tot het eind het ontwikkelproces mee kon maken en zelf kon invullen.
Ik heb geleerd dat als je een goede basis hebt, doordat je met de klant uitvoerig om de tafel gaat zitten, je een goed product kunt afleveren die voldoet aan de wensen van de klant.
■ Het werken in teamverband. Het is praktisch als je met meerdere medewerkers kritisch naar je eigen product kijkt waardoor je samen verbeterpunten ontdekt. Door samen te brainstormen krijg je veel meer en betere ideeën voor projecten.
36 Hieronder volgen de 2 aanbevelingen die ik aan Spider Spider mee wil geven naar aanleiding van mijn stageperiode: ■ Kwaliteitscontrole bij projecten en producten is noodzakelijk om te voldoen aan de wensen van de klant. Het komt nog te vaak voor dat producten afgeleverd worden die kleine fouten bevatten en die een slordige indruk achterlaten. Soms ziet de klant dit zelf niet maar kunnen andere potentiële klanten dit wel opmerken waardoor we eventueel werk mis zouden kunnen lopen. Zorgen dat iemand de kwaliteit bewaakt is dan ook mijn aanbeveling.
■ Het productieproces bij Spider Spider moet overzichtelijk zijn en moet ook gerapporteerd worden. Een projectmanagementsysteem is een optie om deze productieprocessen voor projectmanagers inzichtelijker te maken. Daarnaast zou het handig zijn om te werken met checklists en opleverprotocollen voor medewerkers. Aan de hand daarvan kunnen anderen zien wat de status is van een bepaald project. Beide aanbevelingen heb ik al besproken met Christian Fictoor en deze punten zullen we ook gaan oppakken als ik als part-timer ga werken bij Spider Spider Digital Media. We zijn daarnaast al bezig met kleine aanpassingen om het productieproces te verbeteren daar waar nodig.
37 De bedoeling is dat ik naast het werk als projectmanager ook kwaliteitschecks ga doen tijdens lopende projecten. Een projectmanagementsysteem wordt bij Spider Spider al getest en ik ga in de toekomst checklists en opleverprotocollen opstellen. De basis is gelegd voor een verdere samenwerking met Christian Fictoor, dat zegt genoeg over de indruk die ik heb achtergelaten met mijn werk. Ik blijf dan ook gemiddeld 2 dagen in de week werken bij Spider Spider als projectmanager. De mogelijkheid om bij Spider Spider mijn afstudeerstage te doorlopen is er ook en als het even meezit kan ik mijn onderzoeksfase ook combineren met een eventuele afstudeeropdracht bij Spider Spider.
Door mijn stageperiode bij Spider Spider Digital Media is de basis gelegd voor een verdere samenwerking.
5. Evaluatie persoonlijke leerdoelen De volgende leerdoelen voor mijn stageperiode heb ik van tevoren in mijn persoonlijk opleidings plan gezet: ■ Het uitwerken van (mediale en cross-mediale) concepten en/of het bedenken hiervan. ■ Het toepassen van verschillende media binnen een project (werken met multimedia) ■ Onwikkeling van mijn (DTP) kennis op het gebied van web- en printmedia. ■ Als projectmanager binnen een productieteam fungeren. In feite heb ik gedurende mijn stageperiode al deze leerdoelen behaald. Ik heb erg veel kennis opgedaan op het gebied van webdevelopment. Zo beheers ik nu XHTML/CSS erg goed en heb ik ook wat basiskennis van PHP opgedaan.
39 Vooral het leerdoel om als projectmanager te fungeren is behaald. Ik heb veel vrijheid gekregen om als projectmanager meerdere projecten te mogen managen en ook de begeleiding hierin was prima. Ook heb ik samen met het productieteam veel gebraindstormed over concepten voor bepaalde projecten en deze is teamverband uitgewerkt. De basis is gelegd voor een verdere samenwerking wat ik persoonlijk zie als een kans om mij nog meer te verbeteren als projectmanager binnen het bedrijf. De competenties van de stageperiode en de eindbeoordeling van het stageverslag door Christian Fictoor staan in de formulieren die bij dit stageverslag zijn bijgeleverd.
Bijlage A - Spider Spider site concept Globale website indeling Spider Spider Digital Media 08-09-2008 Homepage: - Laatste nieuws - Featured project - Opgeleverd - Verwacht - Webcam optie - Inleidende tekst - Kleine portfolio selectie (java/flash) Uitstraling: - Ervaren, al 12 jaar - Mixed media - Degelijk, maar wel een paar ‘wow’ effecten - Betrouwbaarheid - Corporate look Huisstijl: - Logo SpiderSpider - Oranje, blauw en lichtblauw Menu-structuur: - Home - Profiel - Werkwijze - Spider is uniek
- -
Diensten - Multimedia - Webdesign - Hosting - Content - Marketing - Consultancy - Development - Portfolio - Webdesign - Audio-visueel - Webcasting Contact - Contact formulier - Contactgegevens - Routebeschrijving (icm Google Maps/Live Earth)
Header: - Video/Flash/Foto’s - Tekst - Logo zoals ontwerp van Brandon (“Specialists in internet & multimedia since 1996”) Footer: - Disclaimer - Resellers - Team/client login
Bijlage B - Spider Spider site eerste ontwerp
Bijlage C - UVX buglist
Niets van dit verslag mag gekopieerd, ge-disassembleerd of gereproduceerd worden zonder uitdrukkelijke schriftelijke toestemming van Spider Spider Digital Media. Alle inhoud Š 2008-2009 Spider Spider Digital Media.