Voorwoord
In dit verslag beschrijf ik de voortgang van mijn ontwikkeling aan de hand van de beroepscompetenties. Ik beschrijf hoe ik bepaalde competenties ontwikkel, welke problemen ik tegen gekomen ben, hoe ik de problemen heb ingeschat en welke oplossingen ik heb bedacht.
Het doel van dit verslag is om mijn voortgang en ontwikkeling duidelijk in beeld te brengen d.m.v. tekst en beeld. Een geheel nieuw webontwerp sluit hierbij aan en bepaalde competenties zullen hierbij toegepast worden.
Adviseren
C01. De opdrachtgever adviseren
Het kwam soms voor dat ik vrij was om de opdracht uit te voeren. Zo heb ik bijvoorbeeld een banner ontwikkeld voor Pouw waarbij de Volkswagen Bedrijfswagens afgebeeld werden met de boodschap dat de Volkswagens Bedrijfswagens tot de top 3 zijn verkozen.
Hierbij heb ik geadviseerd naar de opdrachtgever om de top 3 bestelwagens in podium idee af te beelden in een frisse lay-out. Door een frisse en lichtdynamische achtergrond te gebruiken, kwam de boodschap sterk naar voren. Dit concept werd goed gekeurd en is uitgevoerd.
Klik op de afbeelding om de banner in de website te tonen
Bij opdrachten waarbij ik het niet eens was met de vormgeving, stelde ik een passend advies voor. Dit ging dan vooral over het kleurgebruik, lay-out, positionering, usability, afbeeldingkeuze of interactie.
Eenmaal heb ik een briefing van een klant bijgewoond (www.caravanstallen.nl) in de vergaderzaal waarbij de wensen voor een nieuwe website werden gecommuniceerd. Ik als vormgever/uitvoerder van deze opdracht schreef de punten op waar ik me aan moet houden bij het ontwerpen van de nieuwe website. Bij sommige punten kon ik inspringen om de wensen bij de tijd te houden, zoals kleurgebruik en afbeelding gebruik. Zij wilden bijvoorbeeld het logo als achtergrond op de website hebben, maar dit raadde ik af. Grote achtergrondlogo’s en watermerken zijn niet meer van deze tijd.
PvA en concept
C02. Een plan van aanpak maken
In de afgelopen periode heb ik vele opdrachten gekregen die ik zelfstandig moest uitvoeren. De opdrachten werden vaak aangeleverd en uitgelegd door de managers. In overleg met de opdrachtgevers maakte ik een plan van aanpak voor de uitvoering van de media-uiting. Hierin bespraken wij de lay-out, vormgeving, positionering etc.
C03. Een concept ontwikkelen
Bij de opdracht om een actiepagina te ontwikkelen voor Sanato Autogroep moest er een concept ontwikkeld worden waarmee de verkoop van de Golf 5 moest worden gestimuleerd. Hiervoor was de slogan “Ready to go!” al verzonnen. Dit moest nog in beeld gebracht worden. Hiervoor heb ik een afbeelding bewerkt en gebruikt om de slogan, afbeelding en een call-to-action tot 1 geheel te vormen. De afbeelding spreekt voor de Golf 5 die rijklaar staat voor de geïnteresseerde. De knoppen staan duidelijk in beeld en brengen een duidelijke call-to-action over naar de kijker om te kiezen uit de diesel modellen of de benzine modellen.
Bij het ontwikkelen van dit concept heb ik gelet op de doelgroep, de boodschap, het thema en het onderwerp.
Klik op de afbeelding om de lay-out te tonen
Media-uiting
C04. Een goed ontwerp maken voor een media-uiting
Bij het maken van een goed ontwerp let ik op vele belangrijke punten die moeten worden meegenomen bij het ontwerpen van een media-uiting. Dit zijn punten als; kleurgebruik, usability (positionering van de navigatie, top, content, etc.), uitstraling, doelgroep, boodschap en concept.
Bij het maken van het ontwerp gebruik ik het programma Adobe Photoshop om het vooraf geschetste ontwerp in beeld te creëren.
Voor Autodrome Coolen heb ik de opdracht gehad om een portal te re-designen. Het eerste ontwerp was niet goed gekeurd door de klant. De uitstraling was te druk en de kleuren overheerste teveel. In mijn ontwerp heb ik meer donkergrijs gebruikt om rust in het ontwerp te brengen. Ook heb ik de vormgeving aangepast van rond naar strak. De klant was hierover te spreken en het ontwerp is gebruikt en staat online. Zie de link: www.autodromecoolen.nl.
Klik op de afbeelding om de lay-out te tonen
C05. Een media-uiting te presenteren
Wanneer de eerste versie van het ontwerp af is, presenteer ik deze aan de opdrachtgever. Zij geven dan feedback op het ontwerp en geven eventuele correcties of aanpassingen door. Meestal is dit het geval, omdat in 1x goed ontwerpen zelden voor komt. Wel is dit me 1 keer gelukt met het ontwerp voor de pagina “http://www.werkenbijsanato.nl”. Deze vacaturepagina heb ik ontworpen voor Sanato Autogroep. Op zaterdag 20-12-2008 werd in de Telegraaf een advertentie getoond van Sanato met de vacatures en een verwijzing naar de webpagina. Op de webpagina kunnen sollicitanten de advertentie opnieuw downloaden en zich aanmelden voor de vacature.
Nadat de pagina gebouwd en gepresenteerd was, ging de webpagina online.
Wanneer de opdrachtgever een wijziging wilden in het ontwerp waar ik het niet mee eens was, verantwoorde ik mijn keuze om dit tegen te gaan. Vaak bleef dat onderdeel dan staan zoals ik als vormgever dat wilde hebben.
Klik op de afbeelding om de lay-out te tonen
Realisatie
C06. De realisatie voor te bereiden
Bij de voorbereiding van de realisatie kwam vooral het uitsnijden van ontwerpen te pas. Hierbij lette ik op de formaten voor beeldschermen, de grootte van de afbeeldingen (zo minimaal mogelijk zonder dat het zichtbaar is) om de laadtijd te verkorten en de indeling van de wireframe. Vaak bestaat dit uit een top of header, left, content, right en footer.
De afbeeldingen werden dan opgeslagen in een mapstructuur die hier in Cartel wordt gehanteerd. In de HTML hoofdmap zitten de mappen css, images, downloads, js, en pdf.
De pagina’s staan dan in de root van de map HTML. Bij de realisatie van de opdrachten die ik heb uitgevoerd ben ik geen problemen tegen gekomen.
C07. De media-uiting te maken
Bij het realiseren van een webontwerp komt veel kijken. Bij het bouwen van de website dient de code “schoon” te zijn. De code moet strikt voldoen aan de W3C-normen. Na het bouwen van de website wordt de pagina door de W3C-validator gecontroleerd. Een voorbeeld van een pagina zonder fouten is www.sanato.nl/readytogo.
Voor de Opeldealer Van Mill heb ik een flashbanner ontwikkeld voor de promotie van de nieuwe Opel Insignia. Hierbij heb ik van een aangeleverd videobestand een compacte flashbanner gemaakt dat van een afbeelding overloopt naar een video. Dit gebeurd heel subtiel doordat de afbeelding en het eerste frame exact op gelijke positie staan.
Door de cursor over de banner heen te schuiven wordt het videobestand gestart.
Het is echter niet altijd gelukt om een pagina volledig W3C-valid te maken. Op www.werkenbijsanato.nl bijvoorbeeld. Op deze pagina staan 2 formulieren waarbij de label voor elke input als dubbel wordt gezien. Hierdoor geeft de validator aan dat het een fout is. Soms kreeg ik de fouten er niet uit door de validator te gebruiken. Intern vroeg ik hulp aan Mathijs, de html en css expert in het bedrijf. Hij wist de fout dan snel op te sporen en op te lossen.
Klik op de afbeelding om de lay-out te tonen
Beheren
C08. Uitbestedingen te begeleiden
In het begin van mij stageperiode hoefde ik nog geen uitbestedingen te begeleiden. De opdrachten werden toen aangeleverd wanneer de laatste opdracht was afgerond. Naarmate ik langer in het bedrijf actief was, werd ik zelfstandiger en kon ik meer opdrachten in behandeling nemen en ze zelf inplannen. Wanneer ik op een dag meer opdrachten in behandeling heb dan ik die dag aan kan, verdeel ik mijn werkzaamheden met mijn collega’s. Hierbij formuleer ik de opdracht en leg ik uit wat er precies moet gebeuren. Achteraf controleer ik nog even of de opdracht daadwerkelijk naar wens is uitgevoerd en goed is afgerond. Dit wordt daarna terug gecommuniceerd naar de opdrachtgever.
C09. De database te beheren
Bij aanpassingen van websites worden teksten of bijlagen vaak via het CMS bewerkt. Vaak ging het ook fout en zag het op de front-end er niet goed uit. Een voorbeeld van zo’n fout is het vanuit Word plakken in het CMS. Word geeft een bepaalde taalset met opmaak mee aan de tekst, waardoor het er niet juist uit ziet op de front-end.
Als oplossing kon ik de tekst aanpassen in de database. Ik kon dan de “harde” code direct aanpassen. Ongewenste opmaak kon ik dan verwijderen en weer goed zetten. Ook heb ik structuren, velden en tabellen moeten aanpassen. In het begin van de periode was het even wennen aan het programma PHP-MyAdmin. Met de database in combinatie met PHP heb ik vele malen mee gewerkt en kan er nu goed mee overweg.
C10. Zijn hard- en software te beheren
Zorg voor de hard- en software is altijd van belang geweest. Het beveiligen van de computer gaat d.m.v. een goed anti-virusprogramma. Aan het einde van de dag wordt de computer netjes afgesloten en laat ik mijn werkplek netjes achter. Dit is ook makkelijk voor de schoonmaakster om dit wekelijks schoon te houden.
Bestanden die ik bewerk staan op een kantoorserver dat aangesloten staan op het netwerk. Hier werk ik vanuit en slaat ook de bestanden correct op in de juiste mappen, zodat deze voor mijn collega’s weer snel te vinden zijn. Soms ging dat wel eens fout doordat de structuur niet duidelijk was, maar een kleine aanpassing aan de structuur bood de oplossing.
Projectmatig werken
C11. Projectmatig te werken
De projecten die ik uitvoer, volg ik volgens plan van aanpak die hiervoor is opgesteld. De richtlijnen worden doorgeven door de opdrachtgevers. Projectmatig werken is voor mijn geen probleem geweest tijdens de stage. Dit komt doordat ik op school iedere periode projectmatig te werk ga. Een project dat ik grotendeels heb uitgevoerd is www.carretail.nl. Hierbij heb ik voor de schets, lay-out, ontwerp, uitstraling, realisatie en het live zetten gezorgd.
Bij nodige overleg voor wijzigingen of onduidelijkheden neem ik contact op met de opdrachtgever via de mail of loop ik even naar de manager die hierover gaat. Mijn urenverantwoordingen voor de werkzaamheden schrijf ik nauwkeurig per kwartier op en voer ik aan het einde van de dag in het interne systeem van Cartel in. Ook wordt de urenverantwoording in het stageboek bijgehouden.
Klik op de afbeelding om de lay-out te tonen
C12. Te communiceren tijdens het werkproces
De communicatie verliep in het begin van de stageperiode niet altijd goed. Soms vergat ik iets terug te communiceren naar de opdrachtgever als het afgerond was. Het was even wennen aan de werkwijze van het bedrijf. Bij onduidelijkheden kon ik altijd terecht bij mijn collega’s en opdrachtgever. Zij legden de opdracht/onduidelijkheden duidelijk uit. Later in mijn stageperiode ging het steeds vlotter met de communicatie tijdens het werkproces. Het werd voor mij steeds duidelijker bij wie ik terecht kon voor welke vragen, doordat ik mijn collega’s steeds beter leerde kennen.
C13. Samen te werken
Wanneer ik opdrachten krijg van de opdrachtgever, komt het soms voor dat ik het samen moet uitvoeren met Jeffrey (stagiair). We analyseren samen de opdracht en verdelen de taken. De communicatie tijdens het werkproces verloopt soepel, doordat we onze bureau’s tegen elkaar staan. Elkaar om feedback vragen gebeurd dan ook vaak.
Ontwikkeling en kwaliteit
C14. Beroepscompetenties te ontwikkelen
Aan het begin van de stageperiode had ik vooral een oriënterende houding. Ik stond open voor nieuwe dingen wilde veel leren. Ik streefde ernaar om aan het einde van de stageperiode in staat te zijn om als volledige kracht mee te kunnen draaien in de functie waar mijn interesses liggen. In het begin had ik nog wat begeleiding nodig, maar naarmate ik langer in dit bedrijf actief was, kon ik zelfstandig opdrachten uitvoeren en afhandelen uit de supportbox.
Wat ik halverwege mijn stageperiode merkte was dat de communicatie tijdens de werkproces wat beter kon. Bij onduidelijkheden diende ik sneller vragen te stellen aan mijn collega’s of opdrachtgever. Dit ging later zoals gewild. Wanneer er tijd over is, werk ik aan mijn ontwikkeling van programmeren in de taal CSS en HTML. Aan het begin van mijn stage was mijn kennis van HTML en CSS minimaal. Dit kwam doordat er op het Grafisch Lyceum te weinig les in werd gegeven. Door vele werkzaamheden in Cartel heb ik veel geleerd in HTML en CSS en ben nu in staat om zelfstandig een website in elkaar te scripten met HTML en CSS. PHP kan nog beter, maar met wat hulp en veel zoeken op internet moet het ook lukken ermee om te kunnen gaan. Tijdens mijn hele stageperiode ben ik altijd gemotiveerd gebleven. Dit kwam vooral door mijn leergierigheid en de werkzaamheden die Cartel uitvoert. De werkplek is uitstekend en de sfeer is ook naar wens.
C15. Zorg te dragen voor kwaliteit
Bij het uitvoeren van de opdrachten streef ik ernaar om kwaliteit hoog te houden. Ik let vooral op de kwaliteit dat de opdrachtgever verlangt en de kwaliteitseisen van het bedrijf. Wanneer ik tevreden ben met de kwaliteit van het product als het af is, verantwoord ik het product aan de opdrachtgever/leidinggevende.
Conclusie
Ook dit keer ben ik van mening erin geslaagd te zijn om mijn voortgang en ontwikkeling duidelijk in beeld te brengen. De doelen die ik aan het begin van het schrijven van dit verslag heb gesteld heb ik naar mijn mening bereikt. Dit keer ben heb ik het volledige webproduct zelfstandig ontworpen en in elkaar gezet. De uitstraling van de website is strak, fris, modern en zeker van deze tijd. De codering komt er volledig zonder fouten doorheen en is hierdoor W3C-valid gekeurd.
Mijn voortang over het algemeen over de gehele stageperiode is in grote stappen vooruit gegaan op het gebied van webdesign en webbouw. Bij aanvang van mijn stage scoorde ik voor mijn competenties niet altijd een 5 (op de schaal van 1-5). In de 5 maanden dat ik in Cartel heb meegedraaid heb ik voor iedere beroepscompetentie een opdracht uit kunnen voeren. Eenmaal aangekomen aan het einde van mij differentiatiestage ben ik van mening mijn hoofddoel te hebben bereikt die bij aanvang van mijn stage heb gesteld.
“Aan het einde van mijn stage over de capaciteit en ervaring te beschikken om volledig mee te kunnen draaien als een beginnend/volwaardig medewerker binnen een webbedrijf”.
Neo Cheung
Bijlagen
De afbeeldingen van ontwerpen en banners zijn in de pagina’s verwerkt. Met een klik op een uitsnede van de afbeelding wordt de volledige afbeelding getoond met een “lightbox”.
Alle bijlagen worden nogmaals hieronder getoond:
Volkswagen Bedrijfswagens banner
Sanato Readytogo
Autodrome Coolen portal
Werken bij Sanato
Carretail
Formaat
De website is gebouwd voor beeldschermen met een resolutie vanaf 1024x768 pixels.
De CD-Rom bevat bestanden in de formaat: .html, .js, .css, .gif en .jpg.
Vormgeving
Concept
Persoonlijke tint in een professionele, schone en frisse uitstraling in een jasje van deze tijd.
Waarom zo bedacht
Met het bouwen van deze website bereid ik me voor om zelfstandig websites te bouwen op een professionele niveau van deze tijd. Het is daarom belangrijk voor mij om deze website zo te bouwen, dat een zakelijk bedrijf deze website structuur/uitstraling kan gebruiken.
Formaatkeuze
De website zal geoptimaliseerd gebouwd worden voor een schermresolutie van 1024 x 768 pixels. Dit namelijk een minimale beeldschermresolutie dat vele bedrijven dezer dagen gebruiken. Thuisgebruikers hebben tegenwoordig vaker een beeldscherm met een hogere resolutie van 1680 x 1050 pixels. Ook voor deze schermen zal de weergave van de website geoptimaliseerd worden.
Typografie
De lettertypes die ik zal gebruiken zullen goed leesbaar moeten zijn en goed bij de website moeten passen.
Een duidelijk leesbare lettertype is Arial. Dit lettertype is speciaal ontworpen voor het web. De lettergrootte zal 11 pixels groot zijn. De letterkleur zal donker grijs (#666666) zijn.
Als head zal ik Arial gebruiken. De lettergrootte zal 14 pt groot zijn. De letterkleur zal geel (#DBB210) zijn.
Mediakeuze
De reden waarom de tweede verslag ook weer in website-vorm gemaakt is, is omdat mijn werkzaamheden constant met websites te maken hebben. Ook streef ik ernaar om websites zelfstandig te bouwen, vandaar deze keuze.
Indeling
De indeling zal een goed en duidelijk structuur hebben. Een header, menu met dropdowns, contentvlak en een footer. Het menu heeft 9 hoofd-items waarbij de conclusie 5 sub-items hebben. Zo blijft het menu duidelijk en zijn de onderdelen goed onderverdeeld. Aangezien dit verslag op cd geleverd gaat worden, kan er geen PHP gebruikt worden. Dat zou nodig geweest zijn voor het erin laden van de header en footer. In laats van PHP gebruik ik nu een Javascript om de content er gemakkelijk in te laden. Zo kan ik de menu bij bepaalde items een “active” geven.
Keuze fotografie
Als beeldmateriaal zal ik frisse en dynamische afbeeldingen gebruiken dat aansluit bij het ontwerp. Ook zullen er afbeeldingen te zien zijn van mijn ontwerpen in mijn tweede stageperiode.
Beoordeling
Neo is een goede collega gebleken die snel en secuur werkt.
Gedurende zijn stage is hij ontzettend gegroeid in zijn aangegeven leerdoelen.
Uit zijn stageverslag blijkt dit eveneens. In zijn teksten geeft hij dit zelf ook aan.
Wij zijn uitermate tevreden over zijn ontwikkeling.
Wat betreft zijn stageverslag is te zien dat Neo weet hoe hij moet communiceren, waarbij een professionele weergave van belang is. Zijn indeling is helder en overzichtelijk, waarbij de behandelde competenties overeenkomen met onze persoonlijke constateringen.
Wij zien Neo dan ook niet meer als een beginnend medewerker, maar een volwaardig medewerker die niet zou misstaan binnen ons webbedrijf.
Olav van der Borg
Stagebegeleider
Cartel Internetservices