Stageverslag 2

Zeo

Nick Swaerdens

3IV2

10 / 06 / 2015

Inleiding

Ik zit nu in het derde jaar van de opleiding interactieve vormgeving op het Grafisch Lyceum Utrecht. In de 2e helft van het 3e jaar wordt er een stage bedrijf voor ons gezocht door het BBC. Nadat het BBC een stage bedrijf heeft gevonden zijn we verplicht om bij het aangewezen bedrijf te solliciteren. Mijn eerste sollicitatie ging goed. Na het eerste gesprek kreeg ik te horen dat ik een test moest doen zodat ze konden kijken wat ik allemaal kan. Deze test hield in dat ik een website moest coderen. Een week na de test kreeg ik te horen dat ik mijn stage bij hen mocht komen doen.

Dit verslag gaat over mijn tweede stage periode bij Zeo. Hier loop ik stage over de periode van 2 februari t/m 3 juli. Dit verslag zal uitgebreid informatie geven over de werkzaamheden die ik heb verricht, wat ik heb geleerd en wat ik anders had kunnen doen.

Tijdens mijn stage ben ik van plan om beter te worden in de ontwikkeling van een concept. Daarnaast wil ik beter leren vormgeven en programmeren voor zowel de desktop als voor touch devices. Ik wil ook leren werken met WordPress en Magento omdat deze content management systemen veel gebruikt worden. Als ik tijd over heb en er geen werk is wil ik ook graag jQuery leren en leren werken met web technieken zoals SVG en CSS filters.

Deze doelen zal ik bereiken door vooral veel te doen en hulp/uitleg te vragen als ik ergens niet uit kom. Dit is de enige manier waarop je deze doelen goed kan leren. De web technieken zal ik leren door veel onderzoek te doen, voorbeelden te gebruiken om uit te zoeken hoe ze werken en zelf steeds nieuwe dingen uit te proberen.

Mijn eerste stageperiode bij Zeo vond ik zelf goed gaan. Ik heb veel geleerd en hoop dit ook in de tweede stageperiode te doen. Het eerste verslag kan hier worden bekeken.

∇

Over de website

Voor de website wilde ik dit keer iets proberen dat ik nog niet gedaan heb. Als de gebruiker aan het eind van een sectie naar beneden of boven scrolt zal de website automatisch naar die sectie scrollen. Op de begin pagina kan naar boven worden gescrold om naar de laatste sectie te gaan. Het is ook mogelijk om de pijltjes / spatiebalk te gebruiken op het toetsenbord om naar de vorige of volgende sectie te gaan.

Vormgeving

Dit keer wilde ik meer plaatjes in het verslag doen, dit was een verbeterpunt van mijn vorige verslag. Daarom heb ik ervoor gekozen om 2 blokken te maken. Één blok met een plaatjes en één blok met de tekst. De tekst scrolt zodat het plaatje altijd op dezelfde plek te zien blijft. Ik heb CSS3 animaties gebruikt om de website wat levendiger te maken.

Development

De website van dit verslag was een stuk ingewikkelder dan die van mijn vorige stageverslag. Dit kwam vooral door de hoeveelheid HTML en CSS die het javascript toevoegde. Toch heb ik wel het gevoel dat de development van dit verslag sneller ging dan dat van mijn eerste verslag door de kennis die ik heb opgedaan tijdens mijn eerste stage periode. Het grootste probleem waar ik tegen aan liep was de overgang naar responsive design omdat ik een manier moest vinden om het javascript uit te schakelen voor schermen onder de 950px.

Responsive

De website is volledig responsive. Als de browser breedte onder de 950px komt zal het javascript de automatische scroll verwijderen zodat de browser als een normale website scrolt.

De website krijgt ook een normale navigatie balk aan de bovenkant als de breedte van de browser 950px of kleiner is. Dit menu werkt hetzelfde als het menu van het eerste stageverslag maar de code is veel korter en er is een animatie aan de button toegevoegd.

Er komt meer ruimte tussen de navigatie bolletjes als de website op een touch device word bekeken. Dit zorgt ervoor dat het makkelijker is om op het juiste bolletjes te tikken.

Probleem

Tijdens het programmeren van de website liep ik tegen een aantal problemen aan. Al deze problemen had ik vrij snel opgelost op één na. Het javascript dat gebruikt is om automatisch naar een sectie te scrollen maakte de scrol op touch devices kapot. Ik heb veel verschillende oplossingen geprobeerd zoals het javascript uitschakelen als de scherm breedte kleiner werd dan 950px. Dit zorgde ervoor dat het scrol probleem opgelost was maar zette ook het javascript uit. Dit betekend dat als een Ipad werd gedraaid de website kapot ging (Ipad verticaal is kleiner dan 950px en horizontaal groter dan 950px). Om dit op te lossen had ik een code geschreven die gelezen werd als het scherm werd geschaald. Dit zorgde ervoor dat de plug-in meerdere keren werd gelezen waardoor er steeds meer navigatie bolletjes kwamen en de site uiteindelijk stuk ging.

Na 8 uur verschillende oplossingen geprobeerd te hebben kwam ik uit op een stuk code dat meerdere keren controleerde op verschillende condities. De code werd gelezen als de site geladen of geschaald werd. Na het laden roept de code de javascript plug-in en een variable op die false heeft. Daarna wordt er gecontroleerd of de website 950px of kleiner is, zo ja dan wordt de plugin vernietigden krijgt de variable false, zo niet dan wordt de plugin opnieuw opgebouwd. Daarna wordt de oplossing voor het navigatie probleem gelezen. De code controleert of de navigatie div bestaat, als de navigatie bestaat word er niets gedaan. Als de navigatie niet bestaat dan word er gekeken of de variable op true staat. Als de variable op true staat word de navigatie toegevoegd.

∇

Rolbanner & Advertentie

Zeo had een rolbanner en een advertentie nodig voor zowel online als offline marketing.

De opdracht die ze mij gegeven hadden was om een Rolbanner en advertentie te maken. Het idee hadden ze al geschetst en ik moest deze uitwerken in Photoshop. Hier had ik 5 uur voor ingepland, dit werd uiteindelijk 7:30 uur omdat ze de rolbanner en advertentie toch iets anders wilde dan dat ze hadden geschetst.

Wat ik van deze opdracht heb geleerd is het beter uitlijnen van elementen. Om het zo meer een geheel te maken.

∇

Geanimeerde banners

Adblock moet uit staan om het voorbeeld te kunnen zien. De banner werkt niet op IE9 of lager omdat het HTML5 animaties heeft.

Geanimeerde banners zijn erg populair bij de klanten. Omdat de banner zo populair zijn heb ik het meeste tijd besteed aan het maken van banners in Flash en Google Web Designer. De banners worden het meest gebruikt in adwords display campagnes. Als de banner set klaar is wordt deze geüpload naar Google en hun zorgen ervoor dat het over het web wordt verspreid.

Een banner set bestaat uit de volgende resoluties (breedte x hoogte):

120x600
160x600
200x200
250x250
300x250
336x280
468x60
728x90

Over het algemeen moeten er 3 designs gemaakt worden. Eén design voor de hoge smalle banners, één design voor de vierkante banners en één design voor de liggende banners. Tijdens het maken van de designs moet er worden gedacht aan de specificaties van de banners, zo mag een banner maar 30 seconden duren en mag het eind bestand niet groter zijn dan 150kb.

Nadat de designs zijn gemaakt moet elk element dat geanimeerd moet worden apart worden opgeslagen als PNG met de volledige hoogte en breedte van het document. Als alle elementen zijn opgeslagen worden deze in Flash geanimeerd. Als de eerste banner af is (meestal 336x280) wordt deze naar de klant gestuurd voor goedkeuring. Nadat de banner is goedgekeurd wordt de hele set uitgewerkt.

Google Web Designer

Google web designer is een programma dat wordt gebruikt om HTML5 animaties te maken. Het programma is op dit moment in de BETA en zal dus nog veel verbeteringen krijgen. Ik heb twee banner sets in dit programma gemaakt zodat ik leerde werken met een nieuw programma.

Flash vs Google Web Designer

Flash en Google Web Designer worden beide gebruikt voor het maken van banners. De reden waarom de overstap naar Google Web Designer zo belangrijk is, is omdat de banners in HTML5 worden gemaakt. Dit betekend dat ze op touch devices kunnen worden laten zien. Het swf bestand van flash kan dit niet. Aangezien de meeste mensen het web surfen via hun mobieltjes is het dus zeer belangrijk om HTML5 banners te maken in plaats van swf. Een ander voordeel van Google Web Designer is dat de banners meer dan 24 FPS (maximale van flash) mogen hebben waardoor de animatie veel zachter en soepeler word. Daarnaast werkt Google Web Designer ook een stuk makkelijker en sneller. Het enige nadeel dat Google Web Designer heeft is dat HTML5 banners niet kunnen worden bekeken door gebruikers die Internet Explorer 9 of lager gebruiken, dit kan flash dan weer wel.

Bekijk de Google Web Designer handleiding die ik heb geschreven.

∇

Utrecht Verrast

Utrecht Verrast is een team van stadsgidsen en workshopleiders die dagjes uit in Utrecht regelen.

De opdracht was om een Wordpress website op te bouwen en vervolgens responsive te maken. Hiervoor had ik 16 uur ingepland. Hier ben ik uiteindelijk overheen gegaan omdat later bekent werd dat de website ook responsive moest worden. Ik ben tegen bijna geen problemen aangelopen. Het enigste probleem waar ik zelf niet uitkwam was welke plug-in ik moest gebruiken voor de sidebar.

Wat ik van deze opdracht heb geleerd is het installeren en opbouwen van een Wordpress website. Omdat ik in mijn eerste stageperiode bij Zeo al een Wordpress website heb moeten opbouwen ging Utrecht Verrast veel gemakkelijker.

∇

Tectrade

Tectrade is een team van experts die hun klanten wereldwijd ondersteunen op het gebied van Hybride Cloud, Data Infrastructuren, Security & Analytics.

De opdracht die ik kreeg was hun Wordpress website responsive maken. Omdat het alleen om het responsive maken ging had ik hier 4 uur voor ingepland. Dit is uiteindelijk 5 uur geworden. Ik ben niet tegen problemen aangelopen.

Deze opdracht heeft mijn vaardigheden met media queries verbeterd.

∇

Zelf kennis opgedaan

Doordat er momenteel een hoge werkdruk is bij de webstudio en er een aantal veranderingen in de processen worden doorgevoerd is er niet altijd tijd geweest om mij nieuwe opdrachten uit te leggen. Daarom had ik besloten om zelf kennis op te doen zoals jQuery, (rails) Ruby, Python, PHP, AngularJS en normale Javascript. De kennis heb ik opgedaan met hulp van Codecademy. In totaal heb ik 18 uur Codecademy gedaan. Als ik tegen een probleem aanliep was deze gemakkelijk op te lossen. Op de Codecademy forums staat vaak het antwoord met uitleg wat de code doet.

Wat ik vooral van deze opdrachten heb geleerd is het gebruik van variabelen, strings en if/else statements. De talen die ik door wil gaan leren zijn PHP, AngularJS en jQuery.

PHP is een server scripttaal en een krachtig hulpmiddel voor het maken van dynamische webpagina's. Dit wil ik graag leren omdat dit nog steeds erg veel gebruikt wordt om informatie op te slaan of uit een database te halen.

AngularJS is een opensource web application framework onderhouden door Google en door een gemeenschap van individuele ontwikkelaars en corporaties om veel van de uitdagingen in het ontwikkelen van one-page applicaties aan te pakken. Dit wil ik graag leren omdat het meer dynamische, interactieve en design mogelijkheden biedt.

jQuery is een cross-platform JavaScript-bibliotheek ontworpen om de client- side scripting van HTML te vereenvoudigen. jQuery is de meest populaire JavaScript-bibliotheek in gebruik. Dit wil ik graag leren omdat het veel meer interactieve mogelijkheden biedt dan alleen HTML en CSS.

∇

Zelfreflectie

Voor de tweede periode van mijn stage bij Zeo heb ik de volgende doelen gesteld:

Concept:

Het bedenken van een concept vind ik altijd belangrijk maar ook lastig. Daarom is dit nog steeds een doel dat ik wil verbeteren in deze periode. Dit verbeterd vanzelf met elke opdracht die ik begin.

Design

Design is iets dat ik altijd wil blijven verbeteren. Daarom heb ik dit ook weer als doel gesteld. Mijn doel met design is om zelfstandig ontwerpen te kunnen maken die gelijk naar de klant gestuurd kunnen worden. Design ga ik verbeteren door feedback te vragen en ervaring op te doen.

Wordpress

Een doel dat ik heb meegenomen van de vorige stageperiode was het leren van Wordpress. Door de kennis die ik heb opgedaan in de eerste periode heb ik mijn tweede Wordpress website sneller afgerond met minder problemen. Het enige probleem waar ik tegen aan liep deze periode waren de verschillende plug-ins die gebruikt werden in verschillende situaties. Na een duwtje in de goede richting heb ik zelfstandig een Wordpress website kunnen bouwen.

jQuery

Een nieuw doel dat ik mezelf gesteld had was het leren van jQuery. jQuery wordt gebruikt om interactieve websites te maken. Dit vond ik belangrijk omdat jQuery veel meer mogelijkheden bied dan alleen HTML en CSS. Ik wilde dit doel leren door zelf onderzoek naar jQuery te doen en dit ook in mijn stageverslag te gebruiken. Daarnaast heb ik in mijn vrije tijd jQuery lessen gevolgd op Codecademy. Mijn niveau met jQuery is nog steeds laag maar ik kan het nu goed lezen en soms ook zelf toepassen.

Ik ben gedeeltelijk tevreden over de doelen die ik deze periode behaald heb. Alle doelen zijn verbeterd en ik begin jQuery nu meer te gebruiken maar deze periode heb ik vaak geanimeerde banners moeten maken, iets waar ik niet veel van leer. Ik ben dus wel tevreden over de verbetering maar vind ook dat ik meer had kunnen leren.

Wat ik volgende keer beter kan doen is het beter inplannen van opdrachten omdat ik nog steeds opdrachten onderschat. Hierdoor blijven er opdrachten bij komen en moet er steeds meer opschuiven.

♦

Beoordeling praktijkopleider

Nick heeft in zijn tweede periode van deze stage een aantal stappen gemaakt in verhouding tot zijn eerste periode. Je merkt dat hij iets meer aanwezig is en eerder durft te vragen. Maar dit zijn punten die altijd nog beter kunnen. Door zich iets meer te mengen in de communicatie tussen collega’s en zich meer te laten gelden in de organisatie val je ook beter in een groep.

Ook in de verschillende werkzaamheden die Nick heeft uitgevoerd zit vooruitgang. Hij is veel bezig geweest met banners en heeft daar ons een dienst in kunnen bewijzen door het uitzoeken van Google Web Designer. Een programma wat ons in de toekomst zeker van pas gaat komen. Nick heeft daarnaast zijn tweede WordPress website ontwikkeld en dat verliep soepeltjes.

Nick moet nog wel proberen efficiënter en overzichtelijker te werken. Dit maakt het voor hem zelf makkelijker en is er minder kans op foutjes of dat er dingen vergeten worden. Hier is hij ook al mee bezig door punten op te schrijven als een opdracht met hem besproken wordt. Dit belooft voor de toekomst alleen maar verbetering.

∇