twintig weken stage verslag
Renske Marris | webdesigner Allyourmedia
september januari
2
01 Intro Met dit verslag laat ik zien waar ik nu sta, waar ik naar toe wil werken en hoe ik dit wil gaan bereiken. Er zijn nu tien weken verstreken en hierdoor zit ik nu op de helft van mijn stage. De nieuwigheid is eraf, ik begin mijn collega’s beter te kennen en zij mij. Ik weet inmiddels wat er van mij verwacht wordt en probeer mij hier zo goed mogelijk aan te houden. De eerste projecten zijn voorbij gevlogen en er zijn er inmiddels ook een aantal afgesloten. Met een grote glimlach op mijn snoet kijk ik naar de afgelopen weken, deze waren leerzaam, interessant en vooral erg leuk. Met een nieuwsgierig gevoel kijk ik naar de aankomende weken, ik heb er zin in. Met een ambitieuze PvA/POP ga ik de laatste weken in. Echter maakt dit mij ook nerveus, ik heb een flinke waslijst welke punt voor punt allemaal afgerond moeten worden. Met een strakke planning en met wat minder feestjes moet dit toch zeker wel haalbaar zijn. Ik ga ervoor met de volle 110%. Het einde is in zicht, dat klinkt lekker negatief. En dat is alles wat mijn stage niet was. Ik heb een fijne stage gehad, dat klinkt dan weer wat corny. Ach hoe je het ook wend of keert, ik kijk met een tevreden gevoel terug naar deze periode. De tijd is voorbij gevlogen en daarbij heb ik dingen geleerd. Een dikke plus. Er zijn mooie dingen gerealiseerd en samen werken met dit team was prettig. De sfeer was informeel, iets wat mij goed past. In mijn verslag benoem ik projecten waar ik aan gewerkt heb, mijn bevindingen en artikelen gedurende mijn stage. Thnx boys voor de top tijd!
3
03 Leerdoelen Los van mijn PvA benoem ik in dit document leerdoelen. Mijn leerdoelen staan in principe los van mijn PvA, wel sluiten ze eventueel aan of gaan er verder op in. Om te beginnen… Meegenomen van mijn vorige stage: Ik moet eerder mijn grenzen aangeven. Van mijzelf weet ik dat ik gevoelig ben, dingen anders kan interpreteren en wanneer dit vaker voorvalt kan het zijn dat dit een vervelend gevoel bij mij achterlaat. Tijdens mijn vorige stage zijn er een aantal dingen voorgevallen. Achteraf gezien had ik eerder moeten aangeven dat ik hier moeite mee had, daarbij had ik er zeker verstandig aan gedaan mijn stagebegeleiders van school en mijn stagebedrijf hierover te informeren. En deze personen op de hoogte te stellen van de situatie, zoals ik deze ervoer. Ik zal in een korte uiteenzetting benoemen wat mijn leerdoelen zijn voor mijn huidige stage. Van schets naar eindproduct Het lijkt mij een mooie uitdaging om vanaf het prille begin te beginnen. Daarbij wil ik aantonen dat ik mij kan houden aan planning(en) en schema’s. Ik wil starten vanaf een schets, gemaakt met bijvoorbeeld Photoshop. En eindigen met een eindproduct. Voorafgaand doe ik onderzoek door middel van een technisch- functioneel en een grafisch- ontwerp. Wanneer dit tijdens de stage niet aan bod komt, maak ik dit voor mijzelf een stageverslag in de vorm van een media uiting. Basis Adobe, HTML, CSS, JavaScript, PHP, Jquery en AJAX. Overal eis ik van mijzelf dat ik na de stage hier mee uit de voeten kan, minimaal basis. Voor Adobe, HTML en CSS ligt de lat hoger dan basis. Hierin zal ik voor mijzelf mij meer moeten verdiepen en mijn kennis verbreden. Door onder andere blogartikelen zal ik mijn kennis delen, voorafgaand moet ik mij verdiepen in de hiervoor opgegeven onderwerpen. Zodoende kan ik een duidelijk en helder artikel schrijven. Schrijven Bij het boven genoemde leerdoel heb ik het over blogartikelen, ik vind het belangrijk hoe de schrijfstijl hiervan is. Daarbij moet ik fouten sneller herkennen en zins op bouw soepeler laten verlopen. De teksten moeten boeiend blijven en niet slaap verwekkend. Herschrijven is hiervoor belangrijk. Ik moet leren om een artikel volledig te herschrijven en niet alleen enkel zinnen. Verder vind ik het belangrijk om mijzelf te verdiepen in SEO-teksten. Hoe werkt dit, hoe wordt dit opgebouwd en waar moet er rekening mee gehouden worden? Is zich bewust van werkzaamheden Tijdens mijn stage lijkt het mij verstandig om uit te zoeken wat mijn werkzaamheden zouden kunnen worden in de toekomst. Wat zijn functie eisen en vereiste vaardigheden webdesigner/ webdeveloper. Wanneer ik deze weet, kan ik mij instellen op mijn zwakkere punten. Wat kan beter, hoe ga ik mij verbeteren en wat moet ik hiervoor doen? Tijdens mijn werkzaamheden zoek ik dus actief naar mijn ontwikkelpunten, zodat ik deze doelgerichter kan ontwikkelen. Afwisseling Ik weet dat mijn sterkere punt bij design ligt, dit is hierdoor een ‘veilige thuishaven’ geworden. Ik vind het prettig om tijdens een proces her en der wat ontwerpen te maken. Wanneer iets ontworpen moet worden is er direct resultaat, wanneer er gewerkt word met code is dit niet altijd het geval. Ik weet dat ik er soms moeite mee heb dat wanneer ik programmeer niet direct resultaat zie. Ik denk dat ik moet leren dit om te zetten, dit af te wisselen of er mee moet leren omgaan door ervaring en dus snelheid.
6
Snelheid Een struikelblok, waar ik geregeld tegenaan loop is snelheid. Ik vind mijzelf te langzaam in zowel design als programmeren. Ik wil mij duidelijk houden aan schema’s en planningen. En kijken of ik hierdoor mijn snelheid kan verbeteren. Daarbij moet ik nog flink bijspijkeren qua programmeren, wanneer hier een basis in gelegd is zal ik naar alle waarschijnlijkheid ook sneller zijn. Wanneer ik andere mogelijkheden vind of kan vinden zal ik deze benoemen in mijn reflectie. Basis PHP Doormiddel van Codecademy wil ik mijn diepgevroren PHP-skill upgraden. Omdat ik niet of nauwelijk werk met PHP, heb ik voor mijzelf de minimale eis neergelegd om de basis te beheersen. Ik zal hierdoor de cursus volgen via Codecademy, mij verdiepen in tutorials en lezen op zowel internet als in boeken. Basis JavaScript Hiervoor geld vrijwel hetzelfde als voor PHP, echter is dit een moeilijkere cursus en ook langer van Codecademy. Hier staat acht uur voor, al denk ik dat ik er langer over zal doen. Ook voor dit onderdeel zal ik mij inlezen en verdiepen. En voor zowel het onderdeel PHP als JavaScript zal ik een reflectie schrijven en hierin beschrijven wat ik geleerd heb en waar ik het denk te gaan toepassen of wanneer aan de orde waar ik heb toegepast heb.
7
04 Plan van aanpak Aan de hand van eerder gestelde punten van Berry en Herm-Jan maak ik mijn plan van aanpak. Door middel van mijn PvA wil ik aantonen waar mijn doelen liggen. Ik laat zien waar ik de aankomende tijd aan ga werken en stel deadlines in wanneer nodig. Overigens wil ik hiermee ook laten zien wat de competenties zijn, hoe ik deze ga aanpakken en wanneer ik deze ga afronden. Leerdoelen Voorafgaand van deze stage is het belangrijk om inzicht te krijgen van je leerdoelen. Daarbij kan ik eerder niet gehaalde leerdoelen van de vorige stage meenemen in naar deze stage. Echter is het ook mogelijk dat ik nieuwe leerdoelen stel in het verloop van deze stage. Blogposts Allyourmedia heeft voor mij een briefing gemaakt, met punten waaraan ik uiteindelijk aan moet voldoen als ik mijzelf webdeveloper wil gaan noemen. Er zijn afspraken gemaakt dat ik wekelijks een blogartikel schrijf, deze artikelen zouden eventueel voor de website gebruikt kunnen worden of als documentatie voor aankomende stagiairs. Tevens is het leerzaam voor mij, ik moet uitzoeken wat de onderwerpen betekenen en/of hoe deze werken en/of toegepast kunnen worden. Daarbij moet ik vervolgens benoemen wanneer ik deze informatie kan toepassen of al eerder toegepast heb. Wekelijks worden deze artikelen bekeken en eventueel krijg ik hier punten van kritiek op, waarna ik het artikel kan herschrijven. Uren Niet alleen voor school, maar ook voor Allyourmedia wordt er van mij verwacht dat ik mijn uren met werkzaamheden bij houd. Aan de hand van een excel document wordt er van mij geacht dat ik dagelijks mijn uren noteer. Hieruit kan worden opgemaakt wat mijn werkzaamheden zijn en welke eventueel gefactureerd kunnen worden. Voor school communiceer ik deze twee wekelijks, met daarbij gevoegd een zelfreflectie. Ik gebruik hiervoor het uur overzicht van Allyourmedia. Agenda bijhouden Wanneer nodig, kan ik opdrachten inplannen. Hiervoor maakt Allyourmedia gebruik van een gezamenlijke agenda. Hierin kan ik mijn eigen geplande werkzaamheden en/of deadlines noteren. Maar ook geeft het een overzichtelijk beeld van de werkzaamheden van de werknemers Aan de hand van de agendapunten kan ik inzien waar mijn collega’s mee bezig zijn. Zo kan het zijn dat iemand bezig is om een deadline te halen, op die momenten weet ik dat ik er verstandig aan doe om vragen even voor mij te houden.
Competenties In overleg met mijn stagebegeleider van school zijn er verschillende punten naar voren gekomen waarvan ik moet aan moet tonen dat ik deze beheers, begrijp en er mee kan werken. Deze competenties zijn opgesteld, zodat ik na het behalen van deze competenties voorgedragen kan worden een examencommissie. FOnt - Aan de hand van een Use-case overview en Use-case detailontwerp beschrijf ik de nog te realiseren functionaliteiten. IAWD – Aan de hand van een grafisch/interactie ontwerp laat ik zien kennis te hebben genomen van de volgende onderwerpen. - Poka Yoke - Gestaltheorie - Workflow vs data georiënteerd TOnt - Ik maak een of meerdere technische ontwerpen. Hierbij is het noodzakelijk dat de beschreven requirements realiseer uit het grafisch- en functioneel ontwerp. Ik maak keuzes en beschrijf deze. Daarbij werk ik elk technisch probleem in detail uit. Om te beginnen maak ik een technisch ontwerp voor Fysiosites. Uiteindelijk wil ik deze stage, wanneer mogelijk 3 á 4 technische ontwerpen uitschrijven. DBA3 – Ik moet aantonen dat ik competent genoeg ben om een goede ERD tot stand te laten komen. Realisatiefase – Ik moet aan kunnen tonen dat ik complexere stukken programmacode zelfstandig kan realiseren. Een belangrijk punt die hierin naar voren moet komen is dat ik in staat ben SQL-Queries te maken. TST – Dit bestaat uit twee onderdelen. 1. Maak een testset, bijvoorbeeld een set van testspecificaties gebaseerd op de in het ontwerp beschreven software requirements. 2. Voer de beschreven testen uit. Op basis van de resultaten classificeer je de defecten (Critical, Major, minor ) en rapporteer je over de kwaliteit en geef je (na overleg) aan wat er moet gebeuren (rework, bugfixing, rapporteren van fouten naar de klant, etc). Het proces en reflectie hierop beschrijf je weer in verslag.
van cmyk naar rgb van 300 dpi naar 72 dpi
14
05 Competenties webdesigner, opgesteld door Allyourmedia Kennis van webgerelateerde standaarden. Onder deze standaarden eis ik van mijzelf dat ik aan kan tonen dat ik HTML5 en CSS3 uitstekend begrijp, kan lezen en schrijven. Daarbij moet een eventueel volgende developer gemakkelijk met mijn geschreven werk uit de voeten kunnen. Tevens moet ik een website zo kunnen maken dat de klant zelf gemakkelijk content, in welke vorm dan ook, toe kan voegen. Dit mag geen moeilijkheden geven bij de klant en ook mag het niet zo zijn dat de klant grove aanpassingen kan maken die niets te maken hebben met content. Maar met opbouw van de website. Hierdoor zou eerder gemaakt werk immers verloren kunnen gaan. Ervaring met en kennis van AJAX en JavaScript libraries. Waarna ik mijn kennis van HTML5, CSS3 en PHP aan de norm van Allyourmedia heb voldaan, geld voor mij dat ik mij verder verdiep in AJAX en JavaScript. Ik moet aan kunnen tonen in bijvoorbeeld een project of opdracht met daarnaast een verslag waar ik dingen heb toegepast, hoe ik dit heb gedaan. Ik beschrijf wat ik geleerd heb en wat ik anders zou doen in de toekomst. Photoshop en Illustrator ervaring. Aan de hand van projecten laat ik zien dat ik meer dan uitstekend de programma’s Illustrator en Photoshop beheers. In het geval van Illustrator; wil ik een onderzoek op mijzelf richten. In de vorm van een verslag, uiteraard geïllustreerd. Wil ik kijken welke punten in Illustrator ik (nog) niet beheers. Welke nieuw voor mij zijn. Of welke ik kan verbeteren. Voor Photoshop wil ik aantonen dat ik, als toekomstig webdesigner, in staat ben om een duidelijke schets te maken van een website. Aan de hand van deze schets zou een developer een website moeten kunnen maken. Goede kennis van Usability. Ik test voordat een opdracht opgeleverd gaat worden uitvoerig de website, hierbij hou ik rekening met gebruiksvriendelijkheid. Ik verplaats mij als gebruiker en los vervolgens eventuele problemen op. Ik hou rekening met leesbaarheid, interactie en routes op de website. In projecten hou ik hier rekening mee en ik schrijf hierover een kort artikel in mijn stageverslag. Hierin benoem ik wanneer ik het duidelijk heb toegepast, tevens sluit dit stukje goed aan bij TST. Alle bovengenoemde onderwerpen dien ik goed uit te kunnen voeren aan het einde van mijn stage.
15
20
06 Project Fysiosites Als fysiotherapeut ben je bezig met patiënten. Bezig met stramme spieren weer mooi soepel te krijgen en wervels weer op hun plek te kraken. Niet met het beheer en onderhoud van je website, jij als fysiotherapeut zou het wel graag zelf willen beheren. Maar dit lijkt zowat onmogelijk, lastige onbegrijpelijke code of een torenhoge rekening van een reclamebureau. Terwijl het als fysiotherapeut zeker niet gemakkelijk is om je hoofd boven water te houden. Fysiosites bied de uitkomst. Een gemakkelijk te beheren website, zonder ansjovis. En mooier nog dit kan gewoon geheel gratis, of nog mooier tegen een kleine maandelijkse vergoeding kan je zelfs geld verdienen met je eigen webshop. Die kosten die je er dus inpompt worden er zonder er maar iets voor hoeven te doen uitgehaald. Fluitje van een cent. Opdracht: Maak van de huidige fysiosites een volledig draaiende website. Via een eenvoudig aanmeldproces kan er een gratis website verkregen worden. Houd rekening met de huidige doorgevoerde huisstijl. Ontwerp, waar nodig, iconen of illustraties bij teksten om deze te versterken of te verduidelijken. Houd rekening met gebruiksvriendelijk. Creëer testplannen en maak een technisch ontwerp. Probeer met deze opdracht waar mogelijk competenties te halen van school. Doel van de opdracht: Een goed draaiende website, met daar achter vele websites voor fysiotherapeuten. Deze kunnen met een eenvoudig beheerpanel een eigen website creëren. Door gebruik van reclame in het geval van de gratis versie en de betaalde versie zal er maandelijks een ‘inkomen’ gegenereerd worden. Benodigde software: Photoshop, Illustrator, Javascript, een ge-update browser, een FTPprogramma, een code-formatter en Wordpress. Contactpersonen: Herm-Jan - als eigenaar van het project. Koen - voor technische vragen. Stefan - samenwerking. Resultaat: Work in proces. Dit project moet eind januari volledig draaien.
21
22
07 Project Clean Valley Een schoonmaakbedrijf met een missie, een schone Gelderse Vallei, Clean Valley. Dit nieuwe bedrijf uit Bennekom gaat zich onderscheiden met een verfrissende huisstijl en hierop aan sluit natuurlijk een website. Opdracht: Ontwerp van verschillende icons, deze zijn duidelijk en komen terug op vele plekken binnen de huisstijl. Huisstijl ontwerp, het vormgeven van bedrijfkleding, bestikkering van bedrijfsauto, visitekaartjes enz. Maken van een responsive website, waarbij de klant zelfstandig content kan wijzigen. Doel van de opdracht: Na aanleiding van het ontworpen logo, word de volledige huisstijl ontwikkeld. Deze moet zich onderscheiden van andere schoonmaakbedrijven en herkenbaar zijn. De website dient simpel en gebruiksvriendelijk te zijn voor zowel gebruiker als beheerder (de klant). Benodigde software: Photshop, Illustrator, InDesign, Javascript, een ge-update browser, een  FTP-programma, een code-formatter en Wordpress. Contactpersonen: Franc Sletterink - eigenaar van Clean Valley. Vincent Markestijn -  voor vragen op zowel design als development vlakken. Herm-Jan - voor vragen qua design, klantcontact en eindresultaten. Resultaat: Clean Valley, heeft een duidelijk eigen huisstijl gekregen. De kleuren zijn herkenbaar bij het bedrijf en zijn terug te vinden in zowel drukwerk als de website. De ontworpen iconen komen terug waar mogelijk. En deze vertegewoordigen de verschillende diensten van Clean Valley. Mijn tweede wordpress website bij dit stagebedrijf. Het ontwerp, aangeleverd door HJ, heb ik omgezet naar een prima werkende wordpress website. Ik heb meegedacht bij de duidelijke iconen. De klant kan zelf teksten wijzigen. Er zijn verschillende funties in PHP gebruikt om, posts, pages en thumbnails (in dit geval de icons) weer te geven op bijvoorbeeld de frontpage. Uiteindelijk is er een complete huisstijl ontworpen, aan de hand van schetsen van HJ. Het uitvoerende werk heb ik op mij genomen. Denk hierbij aan ontwerpen van het visitekaartje, een flyer, belettering bus en een advertentie. Tijdens deze processen heb ik veelvuldig contact gehad over de gang van zaken. De klant liet mij beslissingen maken over de ontwerpen.
23
24
08 Project vandermostmodern.com Gijs van der Most is een fotograaf, woonachtig in New York en met een passie voor vintage meubelen. Deze verzamelde meubelen wil hij gaan verkopen door middel van een door Studio Hands ontworpen website. Het moet overigens geen webshop worden waarbij je gebruik maakt van een shoppingbasket. Een koper dient contact op te nemen en kan op deze wijze een exclusief meubel aanschaffen. Opdracht: Uitvoering van een website aan de hand van een ontwerp van Studio Hands, rekening houdende met de daarin opgegeven huisstijl. Doel van de opdracht: De eigenaar (Gijs van der Most) van de webwinkel, kan zelf eenvoudig producten toevoegen. Hierbij kan een omschrijving toegevoegd worden door middel van customfields, ook kunnen er foto’s toegevoegd worden. Deze foto’s van producten zullen een collage vormen op de homepage. Wanneer een product verkocht is kan de Gijs of een andere beheerder dit aangeven in een productpagina door een customfield SOLD aan te vinken. Het product zal dan op de homepage weergegeven worden met de tekst SOLD over de afbeelding. Elk product is te vinden op de homepage, in volgorde van toegevoegd product. Wanneer er naar beneden wordt gescrold zullen er nieuwe producten ingeladen worden. Verder is het van groot belang dat de website responsive werkt, op zowel kleinere schermen, tablet en telefoon. Wanneer nodig zullen er beslissingen gemaakt worden of er dingen niet meer getoond, of anders getoond moeten worden op deze kleinere schermen. Resultaat: Een net uitgewerkte, gebruiksvriendelijke website voor zowel beheerder al bezoeker. De website maakt gebruik van Wordpress, hierdoor kan er gewerkt worden met een gebruiksvriendelijke CMS. Benodigde software: Javascript, ge-update browser, FTP-programma, code-formatter Contactpersonen: Vincent Markestijn, Herm-Jan Klein Velderman, Studio Hands - Hilmer
25
09 Blogartikelen Waterval vs Scrum Om een digitaal product te creëren worden er vaak twee verschillende projectmethodes toegepast; de watervalmethode en Scrum. Beide methodes hebben bewezen dat ze voor een goed eindresultaat kunnen zorgen. Echter, de verschillen zijn groot. Een watervalmethode bestaat uit fases die elkaar opvolgen. Een fase dient eerst afgesloten te worden, voordat er met een volgende fase gestart kan worden. Zoals er niet tegen een waterval in gezwommen kan worden, is het ook niet mogelijk om in een eerder afgesloten fase veranderingen aan te brengen. Voorafgaand wordt er met de opdrachtgever besproken hoe het eindproduct er uit gaat zien. In het proces wordt er niet of nauwelijks meer afgeweken van de wensen of eisen. De watervalmethode kan zeer succesvol zijn, wanneer er een duidelijk beeld geschetst is van het eindproduct. Een andere projectmethode is Scrum en werkt totaal anders dan een watervalmethode. Bij Scrum kan het goed zijn dat de opdrachtgever een idee heeft, maar nog niet zo goed weet hoe het eindresultaat er uit moet zien. Scrum maakt gebruik van Agile, afgeleid van agility. Behendig en vlug werken. Daarbij is Agile een Italiaanse satelliet, maar daar gaan we het nu niet over hebben. Agile is ontwikkeld door softwareontwikkelaars, als antwoord op de watervalmethode. Wat Agile in korte lijnen inhoudt; klanttevredenheid, door snelle, continue levering van bruikbare software. Latere veranderingen zijn mogelijk. Persoonlijke communicatie, in levenden lijve wel te verstaan. Als Agile wordt toegepast, werken er meerdere mensen simultaan aan het project. Er bestaan drie verschillende rollen binnen Scrum: De opdrachtgever, diegene geeft de opdracht en bepaalt hoe het uiteindelijke product eruit moet gaan zien; De Scrummaster, hij begeleidt het Scrumteam; Het Scrumteam voert de verschillende ‘sprints’ uit. Sprints zijn vaste blokken van een aantal weken. Van de vastgestelde duur van een sprint wordt niet afgeweken. Aan het eind van een sprint wordt er gekeken door de opdrachtgever waar er verbeterpunten zijn, waarna deze verwerkt kunnen worden in de increment, een lijst van alle gerealiseerde verbeteringen en/of veranderingen. Waarna er gewerkt kan worden aan de volgende sprint tot er een eindproduct is. Dagelijks wordt er bekeken welke volgende punten in een sprint gedaan kunnen worden. In deze ‘daily scrum meetings’ komen de volgende drie vragen naar voren: Wat heb ik gedaan? Wat ga ik doen? En wat zijn de problemen/uitdagingen? Op deze manier kan er nauwkeurig aan het product gewerkt worden en is het team op de hoogte waar ieder teamlid mee bezig is. Deze meetings mogen maximaal vijftien minuten duren, grotere problemen worden buiten deze vergadering besproken. Beide manieren hebben verschillende voor- en nadelen. Het is verstandig om een watervalmethode toe te passen wanneer de opdrachtgever een duidelijke opdracht geeft. Dan kunnen er afspraken gemaakt worden over het uiteindelijke product. Wanneer dit nog niet helemaal vastgesteld is en als uit vooronderzoek blijkt dat er waarschijnlijk wijzigingen komen in de loop van het project, is het verstandig om Scrum toe te passen.
26
HTML5 HTML is altijd beperkt geweest in zijn mogelijkheden. Webdevelopers liepen veelvuldig tegen beperkingen aan. Ondertussen wil de gebruiker maximaal gebruik maken van tablet en smartphones. Met HTML4 werd dit vrijwel onmogelijk. Met de komst van HTML5, een uitbreiding op HTML4, is er veel veranderd. Ondanks dat HTML4 niet echt als term gebruikt werd, benoem ik het hier als HTML4. HTML5 is een verzamelnaam voor een uitbreiding op de (X)HTMLstandaard, CSS en nieuwe API’s voor en versies van Javascript. HTML5 moet het ontwikkelen van webapplicaties vereenvoudigen en brengt de webapplicatie veel dichter bij het klassieke computerprogramma. Vernieuwing Waar er in HTML4 geen mogelijkheden zijn op multimedia-gebied, kon men gebruik maken van Flash. Flash kan onder andere animatie, geluid en video tonen. Echter is Flash een plug-in met alle nadelen van dien. De plug-in gebruikt een hoop rekenkracht, veel Flash op de webpagina maakt de website traag. Wanneer een webpagina volledig of bijna volledig opgebouwd is in Flash, is het vrijwel onbruikbaar voor zoekmachines. Daarbij is er nog een nadeel aan Flash; het is geen tekst. HTML is opgebouwd met verschillende tags bestaande uit tekst, hierdoor ontstaat er semantische HTML. Dit zorgt ervoor dat zowel de gebruiker, developer, als browser de pagina snel kan lezen. Semantische HTML betreft geen nieuwe HTML-versie, maar het is een manier waarop HTML eigenlijk toegepast kan en zou moeten worden. De voordelen ervan zijn; websites laden sneller, het is flexibeler om mee te werken en het is toegankelijker voor de meeste browsers. Apple Steve Jobs vond in 2010 dat Flash niet langer noodzakelijk moest zijn om video’s af te spelen en sloot Flash uit als onderdeel van Apples mobiele IOS besturingssystemen. In 2012 werd HTML5 gelanceerd, wat Flash grotendeels overbodig maakt. Websites worden sneller geladen in je browser, zowel op je computer als op mobiel en tablet. HTML5 introduceert nieuwe tags die ervoor zorgen dat er meer structuur in het document komt. Waar het eerder onmogelijk was om een video af te spelen zonder Flash Player-plugin, kan er nu voor de tag <video> worden gekozen. Elementen en attributen Wanneer je gaat beginnen aan je website is het handig om te weten dat een website in HTML5 een vaste structuur heeft. Zo start je je pagina met <!DOCTYPE html>, hierdoor weet de browser aan de hand van het doctype welke tags er allemaal kunnen volgen in je broncode. De semantische HTML is aan de hand van <head> <body> <header> <nav> <footer>, gemakkelijk in te delen en ook gemakkelijk te volgen voor de volgende developer die eventueel aan het document werkt. Hierdoor is het niet meer nodig om <div> na <div> langs te lopen wat elk element exact doet. Wat er ook vernieuwend is aan HTML5 zijn de <header> <nav> <footer> tags. Naast de tags die gebruikt worden om de basisstructuur van een HTML-pagina te definiëren, zijn er nog heel wat andere HTML-tags die je gebruikt om je webpagina vorm te geven. Deze tags worden binnen <body></body> gebruikt. Er kunnen attributen meegegeven worden bij deze tags, waarmee je elementen kunt stijlen. Deze stijlen (class) van elementen zet je over het algemeen niet in je HTML-bestand, maar in een CSS-bestand (Cascading Style Sheets). Zo kun je met een class gemakkelijk (dezelfde) opties en stijlen meegeven aan verschillende tags. Volg je het nog?
27
Nu alles op een rijtje; Tags worden gebruikt om je pagina in te delen. (zie afbeelding rechts) Elementen worden binnen in de tag <body> gebruikt. Bijvoorbeeld <img> voor een afbeelding of <h1> voor een titel. Attributen bieden extra informatie over de inhoud van een element. Data-attributen geven extra informatie aan een element. Dit kan vervolgens uitgelezen worden door bijvoorbeeld  Javascript of CSS. Video en audio HTML5 introduceerde ook <video> en <audio> tags, hierdoor is het kinderlijk eenvoudig een video te plaatsen op een website. Plaats hierbij controls in je openingstag, dit zorgt ervoor dat er een play-, pauze- en volumeknop bij de video zitten. Daarbij doe je er verstandig aan om de hoogte en breedte mee te geven in je tag. Al deze opties zijn ook mogelijk bij het plaatsten van audio. Voor developers is HTML5 een grote vooruitgang. Er zit nu meer structuur in een website. En een website kan sneller worden geladen, doordat HTML5 functies uit Flash kan overnemen. Ikzelf heb de vernieuwing van HTML5 niet meegekregen. Ervaringen over deze vernieuwingen kan ik hierdoor niet delen. Wel kan ik mij voorstellen dat HTML5 voor developers een prettigere manier van werken opgeleverd heeft. Dit doordat de opbouw helder en duidelijker is geworden. Zodoende is het gemakkelijker geworden, ook voor mij, om te werken met bestanden die door andere developers gecodeerd zijn. Wanneer er een aanpassing van toepassing is kan ik deze gemakkelijk terug vinden door de semantische HTML.
CSS3 Naast HTML kan er gebruik gemaakt worden van stylesheets, hierin worden stijlen aangegeven die worden gebruikt bij de opmaak van een HTML-document. Aangemaakte stijlen kunnen herhaaldelijk worden gebruikt worden, tenzij ze uniek zijn(een ID). Dit word aangegeven met een #. Wanneer er gewerkt word met stijlen, is het noodzakelijk om dit in verband te brengen met het HTML-document. Een stylesheet, ook wel CSS, wordt aangeroepen in de <head>. Tussen de aanhalingstekens van href word weergegeven waar het CSS-bestand gevonden kan worden, waarna deze ingeladen word. CSS is opgebouwd in een paar stappen, zo moet er aan gegeven worden in het HTML-bestand waar er CSS gebruikt moet worden. Dit kan in een class of wanneer er overal dezelfde stijlen gebruikt worden, in de <body>, <h1> of <p>. Wanneer er CSS toegepast wordt is het van belang dat de juiste selectoren gebruikt worden en deze duidelijke namen hebben. Zodat een ieder er mee kan werken. Selectoren: geven aan op welke elementen de regel van toepassing is. Dezelfde regel kan op meer dan een element worden toegepast als elementnamen met komma’s gescheiden worden. Declaraties: geven aan hoe de elementen waarna de selector verwijst moet worden vormgegeven. Declaraties zijn uit twee delen opgebouwd (een eigenschap en een waarde), gescheiden door dubbele punt. Webfonts Fontface is voor het gebruiken van eigen aangepaste lettertypes, in plaats van de standaard webfonts die een browser gebruikt. Ondanks dat de gebruiker deze niet op zijn computer hoeft hebben te staan. Zo is het mogelijk gebruik te maken van Google Fonts, hierbij kun een link in <head> zetten, waarna er in de stylesheet dit lettertype kan gebruiken. Google geeft een gemakkelijke staps-gewijze uitleg op de website. Een andere manier om fonts te gebruiken kan @font-face zijn, het is dan mogelijk om eigen fonts te gebruiken. Let hier dan wel op dat de font omgezet is naar WOFF, web open font format. De afbeelding hiernaast geeft weer hoe je woff kan gebruiken in een stylesheet. Het voorbeeld heeft ook ttf, dit voor het gebruik in oudere browsers. Fonticons Een Icon font is een set pictogrammen/icoontjes verpakt in een lettertype (in diverse web formaten: .ttf, .eot, .svg en .woff) dat later kan worden ingelezen op een website middels @ font-face. Er zijn vele voordelen voor het gebruik van een icon font om iconen tonen op een website. Websafe fonts, dit zijn lettertypes die op ieder type computer en elke browser geladen kan worden. Shapes Met CSS is het kinderlijk eenvoudig om shapes te creeren, echter is het met de komst van CSS3 er nog leuker op geworden, zo is het nu bijvoorbeeld mogelijk om een schaduw onder je object te maken doormiddel van CSS, eerder was het genoodzaakt om een afbeelding te uploaden. Vectoren Wanneer er een vector toegepast moet worden op een website, dit kan erg mooi werken wanneer de website responsive moet werken. Startende bij Illustrator. Wanneer de vector gereed is, moet deze opgeslagen worden als SVG. Voordat het bestand opgeslagen dient te worden
kan je de CSS code weergeven en kopiëren. Een andere optie is, om het SVG bestand in je map images te uploaden. En deze doormiddel van <img> te tonen. LESS en SASS LESS en SASS zijn beide CSS preprocessors, dit houdt in dat het mogelijk is om CSS te schrijven op een gestructureerde manier. Hierdoor is het mogelijk om met minder code, waardoor er dus sneller gewerkt kan worden, er hetzelfde resultaat behaald kan worden. Een CSS preprocessor is eigenlijk een applicatie, deze leest bronbestanden in, parsed deze en slaat dan de uiteindelijke CSS bestanden op die op hun beurt direct naar de browser gestuurd worden. Een CSS preprocessor maakt het mogelijk snel ‘schone’ CSS code te schrijven en gebruik te maken van mogelijkheden die normaal gesproken veel tijd in beslag nemen. Twee grote preprocessors zijn LESS en SASS. Op internet kun je vele artikelen vinden waarin LESS en SASS worden vergeleken. In het kort komt het er op neer dat LESS eenvoudiger is om te installeren en minder tools vereist om te werken. SASS is robuster en heeft uitbreidingen. SASS kan in combinatie gebruikt worden met de extentie Compass, dit biedt een aantal handige tools en uitbreidingen op SASS. tutorial SASS kan een ‘minified CSS’ produceren, dit houdt in dat er een zeer compacte CSS wordt aangemaakt. Dankzij Compass kan er gebruik gemaakt worden van kant-en-klare mixins voor bijvoorbeeld ronde hoeken. Animeren Met CSS3 is het mogelijk om te animeren, denk hierbij aan voorwerpen van kleur te laten veranderen, te laten bewegen enzevoorts. Echter zijn er wel verschillende factoren waar je rekening mee moet houden. Zo moet er rekening gehouden worden met verschillende browsers en ook met het feit dat oudere browsers geen animatie tonen. Transition Met CSS3 kan je een effect toevoegen waardoor je stijl kan veranderen in een andere stijl, dit wordt toegepast bij bijvoorbeeld een hover. Mogelijkheden zijn; het veranderen van kleuren, faden(fade-in/out), naar link/recht/boven/beneden verplaatsen. Verder is het mogelijk om de tijd te bepalen van je transition stijl, in seconden (bijvoorbeeld 1s) of miliseconden (500ms). In dit voorbeeld is een hover toegepast met transition, hierbij veranderd de background van de div en word deze doorzichtig. @media Met een @media is het mogelijk om CSS te overschrijven voor verschillende media types, denk hierbij aan mobiel en/of tablet. Wanneer een website responsive moet werken, is dit toepasbaar. Het is mogelijk om een max-width en een min-width te gebruiken. hidden-md (toegepast bij vandermostmodern.com), hierbij is een nav toegepast, wanneer het browser groote tussen de 750px en 1199px is zal je element niet meer getoond worden. Dit voorbeel is toegepast op de mobile-nav.
Javascript Validatie Er zijn verschillende soorten van validatie, zoals verplichte velden, het juiste formaat en beveiligingsvelden. Een veelvuldig voorkomende validatie is vereiste informatie in bijvoorbeeld een verlicht veld. Hierbij word je als gebruiker gevraagd om het veld, vaak gemarkeerd met een sterretje, in te vullen. Met het juiste formaat word bedoeld dat het veld bijvoorbeeld alleen uit cijfers mag bestaan, wanneer er om een telefoonnummer gevraagd word. Beveiligingsvelden worden bijvoorbeeld gebruikt bij het aanmaken van wachtwoorden, vaak is het genoodzaakt om ditzelfde wachtwoord te herhalen in een volgend veld ter controle. De validatie kan niet succesvol worden voltooid, wanneer er vereiste informatie niet volledig ingevuld is. Client-side Client-side is gebaseerd/maakt gebruik van JavaScript, wanneer een validatie mislukt zal de validatie worden afgehandeld in JavaScript. Waarna de gebruiker een melding krijgt dat de validatie is mislukt. Een belangrijk nadeel van client-side is dat het is gebaseerd op JavaScript, wanneer de gebruiker JavaScript heeft uitgeschakeld kan er gemakkelijk ontweken worden van verplichte validatie. Zo kan de gebruiker een bijvoorbeeld bestaande gebruikersnaam invullen, waarna redundantie ontstaat in de database. Ook kan de gebruiker verplichte velden ontwijken. Om dit te voorkomen kan er een combinatie gebruikt worden van Client-side en Server-side. In de server-side validatie word informatie verzonden naar de server en gevalideerd met behulp van server-side talen. Wanneer de validatie mislukt, zal dit terug gecommuniceerd worden naar de gebruiker. Dit is een veiligere manier dan client-side, omdat de validatie zal werken. Ook als de gebruiker JavaScript heeft uitstaan. Ajax Echter is het ook mogelijk om Ajax toe te passen voor validatie, hierbij stuurt Ajax direct gegevens naar de server terwijl er getypt word. Hierdoor kan er gebruik gemaakt worden van een directe terugkoppeling naar de gebruiker. Iedereen kent het wel dat je je als nieuwe gebruiker wil aanmelden maar dat de gekozen gebruikersnaam niet meer beschikbaar is. Ajax kan terug koppelen koppelen naar de gebruiker welke gebruikersnamen nog beschikbaar zijn en op het ingevulde resultaat lijken. JQuery JQuery is een Javascript-bestand dat in een webpagina bijgevoegd kan worden. Het vind elementen met behulp van CSS-selecors om vervolgens ‘iets’ te doen met de elementen te doen met behulp van JQuery methoden. Een jQuery object heeft vele methoden die gebruikt kunnen worden om ‘samen te werken’ met de elementen die geselecteerd zijn. De methoden vertegenwoordigen taken die je regelmatig nodig voor uitvoering in samenwerking met elementen. JQuery doet niet alles wat je kan bereiken met alleen JavaScript. Het is gewoon een JavaScript-bestand, maar schattingen hebben laten zien dat het gebruikt wordt voor meer dan een kwart van de websites. Dit omdat het coderen eenvoudiger maakt. Debugging Je kan fouten of bugs vinden in je console(logboek). Er kunnen ook berichten gestuurd worden naar deze console, dit kan doormiddel van een console.log(). Een console.log() laat alles zien (log) wat tussen haakjes staat, op het scherm (console). Het wordt ook vaak printing out genoemd.
10 Conclusie leerdoelen Van schets naar eindproduct Ik benoem in mijn PvA dat ik graag een product zou willen afleveren, waaraan ik vanaf het prille begin tot eindproduct aan heb gewerkt. Ik doel er niet op dat ik alleen aan iets wil werken. Vanuit mijn vorige opleiding heb ik meegekregen dat er met meerdere mensen mooiere resultaten gerealiseerd kunnen worden. Dit omdat je elkaars krachten kan bundelen of een ander jou wijst op punten welke jezelf over het hoofd zag. Echter zijn er geen opdrachten voorbij gekomen waarbij dit mogelijk was. Dan lijkt het mij alsnog niet echt een probleem. Ik weet dat ik het in mijn mars heb om zoiets te realiseren. En ik ben er van overtuigd dat er vanzelf zoiets passeert. Basis Ik leg de lat hoog bij mijzelf. Al vind ik wel dat ik tijdens deze stage een mooie stijgende lijn is ontstaan. Qua Adobe, dat was al prima in orde door mijn vorige opleiding. Verder vind ik dat ik HTML/CSS nu prima beheers; ik kan het lezen en schrijven. En als ik iets nodig heb weet ik dit gemakkelijk te vinden. Wel vind ik mijn snelheid nog matig, maar naar mate tijd verstrijkt zal dit vast vloeiender gaan. JavaScript en PHP, zijn een nog wat ingewikkelder voor mij. Maar ook hier ben ik van nul af aan gestart. Tijdens de stage heb ik mij hierin verdiept en er ook mee gewerkt. Hierin zelf iets schrijven vind ik lastig, ik mis nog wat hou vast. Ondanks dat, kan ik het wel prima lezen of code oppassen en deze zo omtunen zodat ik het zelf kan gebruiken/toepassen. Ajax, hier ben ik niet aan toe gekomen. Ergens stoort mij dit niet. Schrijven Doordat ik wekelijks bezig was met verschillende blogartikelen schrijven, heb ik mij op zekere mate zeker doorontwikkeld qua schrijven. Ik overzie mijn eigen fouten sneller en maak niet meer zulke belachelijke dyslectische zinnen. Ook zorg ik ervoor dat teksten door blijven lopen en dat jij als lezer blijft lezen. (tenminste dat hoop ik maar) Een aantal artikelen heb ik meerdere malen herschreven. Dit was erg leerzaam, omdat je betere woordkeuzes gaat maken en ervoor zorgt dat je sommige woorden schrapt of vervangt. Wat ik veelal zag was dat ik dezelfde woorden meerdere malen herhaalde in teksten waardoor deze erg saai werden. Ik benoem ook SEO-teksten, zelf heb ik geen tekst op deze wijze geschreven. Wel heb ik een blogartikel hierover gemaakt. Voordat ik aan dit artikel begon wist ik totaal niets van SEO-teksten een leerzaam punt dus. Ik heb artikelen van andere bloggers gelezen over de wijze die zij toepassen. Door mijn eigen geschreven artikel weet ik nu waar ik rekening mee moet houden. En als het in de toekomst nodig zal zijn om een SEO-tekst te moeten schrijven, zal ik zeker eerst mijn blogartikel bij de hand nemen en doorlezen. Is zich bewust van werkzaamheden Mijn werkzaamheden zijn denk ik een combinatie van taken van een webdesigner en een grafisch ontwerper. Ik heb naast webgerelateerde opdrachten ook grafische opdrachten voltooid. Zelf vind ik dit een prima combinatie. Beide dingen ervaar ik als leuk. En voor de toekomst zie ik graag een baan voor mij waar ik ook ongeveer zulke opdrachten krijg. In mijn PvA benoem ik competenties waaraan een webdesigner moet voldoen volgens de Allyourmedia norm. Ik wil niet benoemen dat ik aan alle voorwaarden voldoe, dat is nog te pril in mijn ogen. Wel heb ik door deze stage al een goede start gemaakt. Afwisseling Mooi om terug te lezen wat ik als eerste schreefâ&#x20AC;Ś Wat ik van te voren al een beetje verwacht had, is ook wel uitgekomen. Na mate mijn stage verder is gevorderd word ik steeds meer ingezet voor designklussen. Iets wat ik stiekem wel toejuich. Ik merk (en ik weet het ook) dat ik dit het liefste doe. Ook denk ik dat het stukje design een sterk punt van mij is, waar Allyourmedia dankbaar gebruik van heeft gemaakt. Zelf heb ik met grote plezier mijn bijdrage onderan-
dere geleverd voor de realisatie van de nieuwe website van Allyourmedia, deze is momenteel nog in ontwikkeling. Niet dat ik andere werkzaamheden met tegenzin doe, in tegendeel. Mijn ervaringen is wel dat ik het erg leuk en prettig vind om nieuwe dingen te leren en uitdagingen aan te gaan. Hier moet echt nog meer tekst bij, want is nog te weinig onderbouwingâ&#x20AC;Ś Snelheid In een reflectieverslag noem ik dit puntje ook. Ik weet eigenlijk niet of ik daadwerkelijk traag ben of dat ik te perfectionistisch ben. Daarbij ervaar ik het als wisselend, soms is een opdracht snel afgerond. Maar een andere keer duurt het wat langer, doordat de opdracht groter is, ik mij meer moet verdiepen of omdat ik soms simpelweg wat minder inspriratie heb. Basis PHP/JavaScript Door mij een tijd te verdiepen in Codecademy, is voor mij het lezen en begrijpen van PHP vooruit gegaan. Zoals ik al eerder benoem, schrijf ikzelf nauwelijks iets in PHP/JavaScript. Ik weet ook dat mijn interesse niet verder is dan wat er voor school noodzakelijk is. Wanneer ik het moet toepassen in wat voor een vorm dan ook, dan moet ik wel bekennen dat ik het leuk vind om uit te zoeken hoe dingen werken en/of gemaakt zijn. Er is een breed scala te vinden online, dit is waar ik grotendeels mijn noodzakelijke informatie vandaan haal Ondanks dat er hier en daar wat negatieve randjes aan zitten in deze conclusie, wil ik zeker niet negatief overkomen over deze stage. Critisch dat wel. Als zeer onervaren stapte ik deze stage in en dankzij Allyourmedia heb ik een kijkje mogen nemen in de keuken van een succesvol reclame-, webbureau. En het bleef niet alleen bij een kijkje, ik heb de kans gekregen om mee te werken met projecten, mijn mening werd gevraagd en boven alles was er blijk van waardering. Ik heb mij ten alle tijden een werknemer gevoeld, geen stagiair. Ook ben ik alle dagen met vol enthousiasme naar mijn stage gegaan. En in mijn vrije tijd vertel ik vol trots over mijn stageplek, de collegaâ&#x20AC;&#x2122;s en mijn werkzaamheden. Met een grote glimlach op mijn smoeltje kijk ik terug naar deze onvergetelijke tijd. Thnx.
11 Dankwoord Uit het veld geslagen begon ik mijn eerste werkweek bij Allyourmedia. Mijn vorige stage was een flinke tegenslag en ik had alles nog niet verwerkt en geplaatst. Toch heb ik snel de draad opgepakt en ben ik met volle moed en vol energie naar mijn nieuwe stage gegaan. Twee dagen duurde het... Een brok in mijn keel, ik voelde mijn hoofd rood worden en welja, daar stroomden de eerste tranen over mijn stomme gezicht. Dit was alles wat ik niet wilde, maar na weken jezelf sterk houden brak er iets. Waar mijn vorige stagebegeleiders mij veelvuldig links lieten liggen en alleen maar met zichzelf bezig waren, waren de jongens van Allyourmedia oprecht geïnteresseerd. Ze wilden weten wie Renske is. Verschrikkelijk om je zelf zo kwetsbaar op te stellen, te midden van mensen die je nog niet kent. Ik schaamde mij dood. Echter ben ik zo snel mogelijk vanaf gestapt. Doorgaan was het motto. En dat heb ik gedaan, het duurde dan ook niet lang voordat ik mij op mijn gemak voelde. Eerste opdrachten volgden snel, er werd gepeild wat ik kon en waar ik stond. Aan de hand hiervan en in combinatie met de competenties van school is er een lijst opgesteld waar ik wekelijks een artikel over schrijf. Na een korte aarzeling werd ik zo af en toe ingezet voor een aanpassing in Illustrator. Dit is uitgegroeid tot het ontwerpen van illustraties welke aansluiten bij teksten en het ontwerpen van logo’s/huisstijlen. Mijn sterkste punt werd snel opgenomen in het bedrijf. Maar ondanks dat was er altijd ruimte voor mijn school en de daarbij behorende werkzaamheden of opdrachten. Ik ben Allyourmedia en Herm-Jan in het bijzonder erg dankbaar. Voor alle tijd en ruimte die ik gekregen heb. Dat er rekening gehouden wordt met ideeën, wensen of suggesties. Dankbaar voor de kansen die ik gekregen heb en de kansen die ik krijg in de toekomst.
Thnx boys. Renske