Voorlopig stageverslag

Pagina 1 Stageverslag - Admium

Inhoudsopgave Inhoudsopgave.........................................................................................................................1 Inleiding ....................................................................................................................................2 Het bedrijf .................................................................................................................................3

Organogram..........................................................................................................................3 Leerdoel ...................................................................................................................................4 Concepten en diensten ............................................................................................................4

Kroegenweb..........................................................................................................................4 Admium Horeca CMS ...........................................................................................................4 Contact Cliënt .......................................................................................................................4 Zoekmachinemarketing ........................................................................................................4

Projecten ..................................................................................................................................5 JJ’s Amersfoort .....................................................................................................................5

Reflectie ............................................................................................................................5 Details ...............................................................................................................................5

Estate of the Art ....................................................................................................................5 Reflectie ............................................................................................................................6 Details ...............................................................................................................................6

Hotel Villa Ruimzicht.............................................................................................................6 Reflectie ............................................................................................................................6 Details ...............................................................................................................................7

Novella Holding.....................................................................................................................7 Reflectie ............................................................................................................................7 Details ...............................................................................................................................7

Allure Harderwijk...................................................................................................................7 Reflectie ............................................................................................................................8 Details ...............................................................................................................................8

Curtis Café ...............................................................................................................................8 Reflectie ............................................................................................................................8 Details ...............................................................................................................................8

Brandslang Heuvelland ............................................................................................................9 Reflectie ............................................................................................................................9 Details ...............................................................................................................................9

Technieken en talen ...............................................................................................................10 CSS ....................................................................................................................................10 Javascript............................................................................................................................10 PHP ....................................................................................................................................10 HTML..................................................................................................................................11


Inleiding Dit is het stageverslag over mijn stage van 9 februari tot 1 juli 2009. Deze stage liep ik als onderdeel van mijn opleiding tot ICT-beheerder. Omdat mijn voorkeur binnen de ICT uitgaat naar het werk als (web)programmeur, besloot ik opzoek te gaan naar een stageplek bij een webdesign-bedrijf. Deze plek vond ik bij het Amersfoortse Admium. Vanuit school werd hier met enige tegenzin op gereageerd. Er moest onderzocht worden of ik mijn stage mocht lopen bij een bedrijf dat niet ecabo-gecertificeerd is voor de opleiding tot ICT-beheerder. Uiteindelijk kreeg ik ‘groen licht’ vanuit school omdat programmeren één van de vier kerntaken is binnen mijn opleiding. Aangezien ik een afwijkende stage liep in vergelijking tot de mijn meeste klasgenoten, kon ik geen gebruik maken van de algemene blokboeken die gebruikt worden voor de ICT-beheerstages. Ik kreeg voor mijn stage een tweetal projectwijzers overhandigd. Deze heb ik gebruikt als houvast bij het maken van dit stagedossier. Dit stageverslag heb ik ingedeeld in enkele delen:

• Het bedrijf hierin geef ik weer bij welk bedrijf ik gewerkt heb • Projecten hierin toon ik enkele projecten waar ik aan bezig geweest ben • Technieken hierin schrijf ik over de technieken die ik geleerd of waar ik mijn

kennis over verbeterd heb. •


Het bedrijf Ik heb deze stage gelopen bij Admium. Dit bedrijf in online marketing is in 1999 opgericht door Peter Ros en Jan-henk Bouman. Tegenwoordig houdt het bedrijf zich bezig met full-service dienstverlening op gebied van webdesign en andere digitale communicatie. Vanuit het kantoor in een modern pand in Amersfoort, werken dagelijks circa twintig medewerkers en stagiairs aan websites, reclame-uitingen en communicatieprojecten. Het bedrijf is verdeeld in enkele zogenoemde ‘focusgroepen’. Elk van deze focusgroepen houdt zich bezig met een bepaalde taak en kent per focusgroep één verantwoordelijke. Zo zijn er de volgende focusgroepen:

• SEO Houdt zich bezig met zoekmachineoptimalisatie • Grafisch Houdt zich bezig met grafische vormgeving • Productie Houdt zich bezig met realisatie van sites en systemen • Innovatie Houdt zich bezig met nieuwe concepten en technieken • Horeca Houdt zich bezig met alle horecagerelateerde zaken

Organogram In het volgende organogram is de organisatorische bedrijfsstructuur van Admium weergegeven.

DirectiePeter Ros

Jan-henk Bouman

Vormgeving Techniek

Maarten (projectbegeleider)

Stagiairs

Mark Bodenstaff

René

Mark Bos

Karel

Boban

Rick

Marieke (projectmanager)

Ester (Administratie)

Stefan, Lodewijk & Christel (SEO)

James (Buitendienst medew.)

Erik


Leerdoel Ik had voor mijzelf aan het begin van mijn stage het volgende leerdoel vastgesteld: “ik wil binnen deze stageperiode het de programmeermethode OOP snappen, kunnen lezen en kunnen aanpassen”. Gedurende mijn stage heb ik diverse opdrachten gehad waarmee ik mijn leerdoel kon volbrengen. Ik heb vooral veel geleerd over deze manier van programmeren tijdens het project ‘Novella Holding’ maar ook tijdens kleinere projecten.

Concepten en diensten Admium biedt niet één enkel product aan. Het bedrijf heeft meerdere concepten en diensten welke allemaal naadloos op elkaar aan kunnen sluiten indien de klant dat wenst. Omdat Admium over een groot aantal verschillende diensten en concepten beschikt, heb ik besloten om enkele belangrijke uit te lichten.

Kroegenweb Kroegenweb is sinds 2001 het grootste concept van Admium. Honderden kroegen hebben zich aangemeld op deze website. Ga je een avondje uit? Kijk even op kroegenweb.nl wat er bij jou in de buurt te doen is. Kroegeigenaren kunnen zich aanmelden met hun café. Hierdoor krijgt het café een account waar de eigenaar de agendapunten, foto’s, nieuws en nog veel meer op kan plaatsen.

Admium Horeca CMS Met dit CMS kunnen klanten en gebruikers van kroegenweb.nl de informatie over hun café aanpassen. Wanneer een kroeg ook een website bij Admium laat bouwen, krijgt hij een zogenoemde kroegensite. De informatie die hij op zijn website zet met het Admium Horeca CMS, zal ook getoond worden op kroegenweb.nl. Hierdoor hoeft een eigenaar of medewerker niet op meerdere plekken de agenda bij te werken of foto’s te uploaden. Filmpjes die een medewerker op het account van het café op youtube plaatst, zullen weergegeven worden op hun website.

Contact Cliënt Deze online ‘software’ maakt het mogelijk om als bedrijf een nieuwsbrief of SMS naar alle klanten (of naar de bezoekers voor een kroeg) te sturen. Deze nieuwsbrief kan worden vormgegeven naar de huisstijl van de klant. In enkele simpele stappen kan een gebruiker een nieuwsbrief, uitnodiging of persbericht naar individuele personen of groepen versturen.

Zoekmachinemarketing Bij Admium zijn er medewerkers die enkel bezig zijn met SEO (zoekmachineoptimalisatie). Hun doel is het zorgen dat de website van een klant beter gevonden wordt in zoekmachines. Door gebruik te maken van steekwoorden, omschrijvingen en vooral handig gebruik te maken van HTML, maken zij het mogelijk om een website op de eerste pagina met zoekresultaten weer te geven.


Projecten Tijdens mijn stage heb ik meegewerkt aan diverse projecten. Hieronder heb ik enkele projecten opgesomd en verder uitgelicht.

JJ’s Amersfoort In Amersfoort werd een nieuwe kroeg geopend; JJ’s. De eigenaar van deze nieuwe trendy kroeg had besloten om zijn website te laten bouwen bij Admium. Dit was mijn eerste grote project bij Admium. Ik kreeg van een vormgever een ontwerp aangeleverd. Op basis van een JPG afbeelding en een bronbestand in Photoshop moest ik de website eerst omzetten van een afbeelding naar gangbare HTML-codes. Hierna moest het kroegenweb-systeem achter deze site

gebouwd worden. Het aanmaken van de pagina’s was niet heel erg lastig. Doordat bij het ontwerpen van kroegenweb, gebruik gemaakt werd van objectgeoriënteerde PHP, was het mogelijk om een volledige pagina te vullen door één simpel commando aan te roepen. Zo’n commando haalt namelijk de gegevens van de server van kroegenweb en laad deze in de pagina. Door gebruik te maken van de css-classes die al in de code verwerkt zat, kon ik gemakkelijk de pagina’s vormgeven in een losstaand CSS-stijlbestand.

Reflectie Doordat dit mijn eerste project betrof, was ik niet op de hoogte van de manier van programmeren en de werking van kroegenweb. Toen ik ter controle de website toonde bij de vormgever, wist hij een grote lijst te maken met punten dat niet netjes genoeg of niet volgens het ontwerp was nagebouwd.

Details Soort project: kroegenwebsite Doel: functionele en technische realisatie Mijn rol: gehele website opzetten (html, css en php) Online: nog niet

Estate of the Art In het oude gebouw van de KRO in Hilversum worden 46 koop en huurappartementen gerealiseerd. Dit project, ‘estate of the art’ genoemd, verdiende een grote website waar potentiële kopers en huurders hun informatie over de (nog te realiseren) woningen konden vergaren. Ditmaal kreeg ik geen vormgeving van een vormgever aangeleverd, maar van een


extern grafisch bureau. De website stond voor een deel al online met algemene informatie over het nieuwbouwproject. Het was mijn taak om deze website uit te breiden met een verhaal en downloadbare plattegronden per appartement. In totaal betrof het project dus het vormgeven en aanmaken van 23 appartementpagina’s (per gebouw een andere vormgeving) en per gebouw nog een introductiepagina.

Reflectie Het bleek achteraf een veel groter project waar veel meer werk in is gaan zitten. Ik ben achteraf ruim drie weken met dit project bezig geweest. Er was hier veel minder tijd voor ingepland door mijn stagebegeleider. Ik merkte bij dit project goed dat ik sterker was in het programmeren dan in het vormgeven met CSS. Er kwam bij deze site nauwelijks programmeerwerk kijken. Er zat enorm veel HTML en CSS werk bij. Dit op een veel hoger niveau dan dat ik was gewend. Ook had ik tijdens dit project veel last van de problemen die om de hoek kwamen kijken doordat de site in meerdere browsers er exact gelijk uit moest zien. Daar waar je bij sommige websites nog wel een klein beetje kan smokkelen met pixels moesten alle onderdelen van deze site op de pixel goed staan. Ik heb bij dit project veel geleerd over browsercompatibiliteit, CSS en javascript.

Details Soort project: uitbreiding van een bestaande site Doel: website uitbreiden volgens de aangeleverde documenten. Mijn rol: uitbreiding uitvoeren (html, css en javascript) Online: www.estateoftheart.nl

Hotel Villa Ruimzicht Voor deze hotelvilla in Doetinchem heeft Admium ook een website ontworpen. Deze meertalige website was voor een deel al gebouwd door stagiairs die voor mij stage hadden gelopen bij Admium. Toch waren er nog een aantal punten die verder gebouwd moesten worden. Er moesten pagina’s aangemaakt worden, menuknoppen verwijderd, de homepagina moest veranderd worden. Wanneer dit aangepast was, had de klant weer nieuwe vragen en punten welke verholpen moesten worden.

Reflectie Doordat de site voor een deel was opgezet door een stagiair kwam ik terecht in een situatie waarin ik me eerst moest oriënteren op die programmeermethode van mijn voorganger. Er doken grote problemen op toen bleek dat de virtuele rondleidingen niet geplaatst konden worden op de website. Hiervoor heb ik contact gehad met een extern bedrijf dat zorg droeg voor deze virtuele rondleidingen. Aan dit project hebben veel medewerkers tegelijk gewerkt waarin iedereen zijn eigen deel van de site had. Een collega ontwierp een ‘programma’ waarmee een klant zijn vergadering kan inplannen en reserveren terwijl ik de virtuele rondleidingen op de website plaatste. Door goed te overleggen en duidelijke afspraken te maken zijn hier geen grote problemen uit voortgekomen en konden alle problemen opgelost worden.


Details Soort project: uitbreiding van een bestaande site Doel: website uitbreiden en aanpassen Mijn rol: uitbreiding uitvoeren (html, css en php) Online: www.hotelvillaruimzicht.nl

Novella Holding Dit is een grootschalige website van een bureau dat zakelijke bijeenkomsten (zoals congressen en relatiedagenorganiseert). Deze bestaande site moest geoptimaliseerd worden voor zoekmachines. De eigenaar van de site moest via het CMS sleutelwoorden en een omschrijving per pagina kunnen opgeven. Deze functionaliteit moest ik bouwen.

Reflectie Het vernieuwende aan dit project was dat

dit het CMS waar ik enkele aanpassingen in moest aanbrengen, objectgeoriënteerd geprogrammeerd was. De lay-out van de pagina’s stond in losse templatebestanden, de grote lappen code stonden in losse bestanden met classes en het geheel werd aangeroepen vanuit kleinere, losse php-bestanden. Hierdoor werd het aanpassen een redelijke opgave. Ik vond het lastig om direct een inzicht te krijgen in de structuur van bestanden maar toen ik eenmaal bezig was, met dat wat een collega mij had voorgedaan, begon ik het steeds meer te begrijpen en kon ik zeggen dat ik objectgeoriënteerd geprogrammeerd had.

Details Soort project: uitbreiding van het Admium CMS Doel: SEO mogelijkheid in het CMS inbouwen Mijn rol: uitbreiding uitvoeren (OOP php) Online: www.novella.nl (login vereist)

Allure Harderwijk In Harderwijk hebben de eigenaren van restaurant Zeezicht besloten om het roer om te gooien. Ze verbouwden de tent en noemde het ‘Allure’. De eigenaar van de site had bij een chinees restaurant in Harderwijk een website gevonden welke hij zo mooi vond dat hij de nieuwe site er ook zo uit wilde laten zien. Dit was weer een nieuwe uitdaging; een website met een flash-achtergrond en transparante onderdelen welke allemaal mee moesten groeien met het

browservenster. Wanneer een bezoeker zijn venster verkleind, moeten de blokken op de website netjes verkleinen zodat er geen vreemde overlappende blokken zichtbaar zijn.


Reflectie Ik ontving van mijn stagebegeleider een ontwerp dat gebouwd zou moeten worden. Niet veel later ontving ik van de vormgever die verantwoordelijk was voor dat ontwerp, een nieuw ontwerp dat er in grote lijnen hetzelfde uitzag als het eerste ontwerp, maar op detailniveau toch erg verschilde. In de vorige projecten was de vormgever de persoon die de lay-out bepaalde dus ik begon met het bouwen van de nieuwe lay-out. Na enkele dagen kreeg ik van een buitendienstmedewerker te horen dat toch de eerste lay-out gebouwd moest worden. Hier baalde ik natuurlijk erg van. Ik had een aantal uren voor niets zitten ploeteren. Toen ik de site werkend had, was het aan mijn collega de taak om de flash achtergrond werkend te krijgen. Dit viel buiten mijn taakgebied.

Details Soort project: nieuwe site Doel: website opbouwen tot een werkend geheel Mijn rol: website opzetten (css, html, javascript en php) Online: nog niet

Curtis Café Inmiddels kwam het eind van mijn stage in zicht. Ik kreeg opnieuw van de vormgever een lay-out aangeleverd van de nieuwe website van een café in Amersfoort. Een stagiair-vormgever had hiervoor een lay-out ontworpen. Dit project kwam mijn mailbox binnenvallen met als status ‘spoed’. Dit moest net als JJ’s een grote kroegenwebsite worden; opgebouwd uit losse onderdelen en beheerbaar via het Admium Horeca CMS.

Reflectie Toen ik met de website bij de vormgever aankwam was deze al snel tevreden. Op twee kleine punten na had ik mijn werk goed gedaan. Dit die ik zelf als een grote verbetering ten opzichte van het resultaat bij mijn eerste projecten. Een kleine tegenvaller was het moment dat mij verteld werd dat een manier die ik gebruikte om elementen op de voorpagina weer te geven, verouderd zou zijn. Er werd mij wel een nieuwe manier aangeboden waarmee ik met een beetje programmeerwerk de klus geklaard heb.

Details Soort project: nieuwe site Doel: website opbouwen tot een werkend geheel Mijn rol: website opzetten (css, html, javascript en php) Online: nog niet


Brandslang Heuvelland De brandslangsites zijn zogenoemde portal websites waarop cafés met brandbier getoond worden uit een bepaalde omgeving. Admium heeft voor Heineken al een BrandslangAmsterdam.nl en BrandslangSittart.nl gerealiseerd. Hier moest nu een BrandslangHeuvelland.nl aan toegevoegd worden. Doordat BrandslangHeuvelland.nl cafés uit Limburg bevat, moest deze website ook Duitstalig uitgevoerd worden. BrandslangAmsterdam.nl was al een

tweetalige brandslangsite maar hoe de techniek achter de website werkte (meertalige ondersteuning, koppeling tussen de cafés) was nergens gedocumenteerd.

Reflectie Doordat de techniek niet gedocumenteerd was, moest ik zelf uitzoeken hoe ik de meertalige koppeling tussen de cafés werkend zou kunnen krijgen. Door goed te kijken naar de codes van Brandslang Amsterdam heb ik de structuur ontdekt en de nieuwe cafés aan elkaar weten te koppelen. Een ander knelpunt was de duitse vertaling. Binnen Admium waren er geen medewerkers die goed op de hoogte waren van de duitse taal. Gelukkig waren de teksten die bij de kroegen geplaatst moesten worden al vertaald door Heineken. Ik moest enkel de site (menu, pagina’s en alle andere tekstelementen op de site vertalen. Dit lijkt een relatief kleine opdracht maar de online vertaalmachines zijn niet bijzonder slim waardoor er zichtbare fouten ontstonden in de vertalingen. Gelukkig heb ik met behulp van enkele collega’s de site volledig werkend gekregen zodat deze opgeleverd kon worden naar de klant.

Details Soort project: nieuwe site (kopie van een bestaande site) Doel: website opbouwen, vertalen en invullen Mijn rol: website realiseren (css, html, javascript en php) Online: nog niet


Technieken en talen Tijdens mijn stage heb ik te maken gehad met meerdere programmeertalen en webtechnieken. Hieronder heb ik enkele uitgelicht.

CSS Aan het begin van mijn stage dacht ik CSS redelijk te beheersen. Al bij de eerste projecten bleek dat mijn CSS-skills toch niet zo sterk waren als ik had verwacht. Het grootste probleem waren (en zijn) de verschillende manieren waarop browsers de CSS inlezen en uitvoeren. In Firefox ziet een standaard regel code er namelijk anders uit dan diezelfde regel in Internet Explorer 6. Ook Internet Explorer 7 en 8 hebben weer een andere manier van weergeven.

Om een website in alle websites er het zelfde uit te laten zien moet je dus gebruik maken van trucjes. Tijdens mijn stage heb ik veel van deze trucjes geleerd en vind ik het veel makkelijker om websites geschikt te maken voor alle browsers. Vooral tijdens het project ‘estate of the art’ heb ik erg veel met CSS gewerkt en hier veel van geleerd.

Javascript Enkele jaren geleden heb ik een boekje opengeslagen over javascript. Ik vond het altijd maar een doelloze scripttaal; je kan je bezoeker om input vragen waarna je dit op je pagina kan weergeven. Je kon ermee controleren of een veld was ingevuld en daar bleef het voor mij dan ook bij. Bij Admium heb ik geleerd dat Javascript een geweldig krachtige scripttaal is welke in de meeste browsers ook vlekkeloos werkt. Ik heb de taal vooral gebruikt om de opmaak van de website te manipuleren. Wanneer iemand

op ‘lees meer’ klikt, wil je dat een tekst zichtbaar wordt en dat de ‘lees meer’-knop weer verdwijnt. Dit kan mooi met javascript. Ook heb ik kennis gemaakt met mootools en jQuery, twee Javascript frameworks waarmee je enorm veel mogelijkheden hebt. Deze frameworks zijn te vergelijken met een gigantisch softwarepakket. Met een klein stukje javascript (om de acties aan te roepen) en een beetje CSS (voor de opmaak) is het mogelijk om bewegende elementen, kalenders, fotoboeken en menu’s te bouwen. Ik heb tijdens het project ‘Allure Harderwijk’ veel gebruik gemaakt van javascript. Het blok met tekst (en zo ook de javascript scrollbalk) moest namelijk meegroeien met het browservenster. Dit heeft heel wat tijd en puzzelwerk gekost, maar ik heb wel ontdekt wat javascript in zijn mars heeft.

PHP De werking van PHP was mij aan het begin van mijn stage al bekend. Ik had mijzelf als leerdoel voorgenomen om objectgeoriënteerd te leren programmeren. Deze manier van programmeren wordt veel gebuikt in grote projecten. In een ‘klasse’ stop je een aantal zelfgeschreven functies welke je vanuit je pagina’s kan aanroepen. Wanneer je bijvoorbeeld met een fotoboek bezig bent waarin je op meerdere manieren een lijst met albums

moet kunnen laden vanuit de database (alle albums in één keer, de eerste 10 albums of albums op basis van een zoekquery) zou het veel (en onoverzichtelijk) werk worden om dit een aantal keer voluit te programmeren. Door van deze ‘functie’ (want dat is het laden van een albumlijst namelijk) een functie te schrijven in een klasse, welke je dynamisch kan aanroepen (door parameters mee te geven)


heb je in feite maar één keer de functie uitgeschreven en kun je hem op verschillende manieren kan gebruiken. Admium maakt gebruik van deze programmeermethoden in haar eigen CMS. De vormgeving van het CMS is gescheiden van de codes, welke objectgeoriënteerde zijn geprogrammeerd in losse bestanden. Hier heb ik veel over geleerd in het project ‘Novella’.

HTML Deze opmaaktaal had ik aan het begin van mijn stage al goed onder de knieën. Toch heb ik gemerkt dat mijn manier van het opmaken van codes redelijk slordig is. Ik gebruikte opmaak en tags tegelijk en maakte gebruik van verouderde tags. Inmiddels heb ik daar hard aan kunnen werken. Ik kan nu met HTML en CSS een volledige website vormgeven. Ook heb ik veel nieuwe dingen geleerd over zoekmachineoptimalisatie.

Daarvoor is het noodzakelijk gebruik te maken van de zogenoemde meta-tags. Hierin is het onderwerp in steekwoorden en een omschrijving van de pagina opgeslagen. Zoekmachines maken gebruik van deze informatie om een website te indexeren.

Conclusie Ik heb tijdens mijn stageperiode veel nieuwe dingen geleerd. Zoals hierboven staat iser een wereld voor mij opengegaan met javascript. Ook is mijn php-kennis voor een groot deel uitgebreid. Ik heb zo onder andere geleerd om objectgeoriënteerd te programmeren. Ik kan geprogrammeerde codes lezen, verklaren en zelfs bestaande codes aanpassen of zelf nieuwe scripts schrijven. Een bewijsstuk hiervan is te vinden op school.stphn.nl.

Voorlopig stageverslag

Documents

Transcript of Voorlopig stageverslag