Inhoudsopgave. Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B

Transcriptie

1 Inhoudsopgave Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B

2 PORTFOLIO 1 - STAPPEN Stappen INTRODUCTIE Voordat ik over mijn stappen vertel, wil ik kort toelichten dat ik eerder een Wordpress site heb gemaakt (te vinden in de footer) en al vaak genoeg de elementen heb moeten inspecteren om te snappen wat er afspeelt in een website. Zelf heb ik nog nooit eerder een website van scratch gemaakt, maar ik heb een goed vermogen in logisch denken en dat was zeker handig bij deze opdracht. Het enige waar ik soms problemen mee heb, is een juiste opbouw maken van div blokken. STAP 1 De eerste stap was een wireframe maken. Deze wireframe heb ik geschetst in Photoshop, maar meteen ook snel uitgewerkt naar een flat design. Aangezien ik alles in een flat design wou, had ik meteen een overzicht van hoe het zou zijn. Het is net iets anders uitgekomen dan hoe ik het wou, zelfs mooier. Ik had meerdere wireframes willen maken, maar ik merkte dat dit simpel en krachtig was. Daarom ben ik bij mijn eerste keuze gebleven. STAP 2 De tweede stap was een index.html pagina maken en daar eerst de content in zetten. Ik wist toen nog niet zo goed hoe het zat met div id s en div classes. Toen had ik alles nog in de body met een <h> tag en een paragraaf <p>. Later kwam ik er achter dat ik veel meer met de opmaak kon doen als ik er een div class van maakte. STAP 3 Nadat ik ongeveer klaar was met de index.html heb ik een style.css gemaakt om aan de opmaak te werken. Ik merkte al snel dat ik vast liep met het centreren van de div blokken. Uiteindelijk ben ik daar ook uitgekomen en heb ik een div in een div gezet en had ik meer controle over de opmaak. Snel merkte ik dat de divs in de html niet goed waren geplaatst en ik de divs heen en weer moest schuiven voordat ik een juiste css opmaak had. STAP 4 Nadat ik klaar was met de index.html en style.css en die aan elkaar gekoppeld had, kon ik verder gaan aan een nieuwe pagina. Snel merkte ik dat ik de opmaak van de index.html kon pakken door dezelfde class te gebruiken. Voor nieuwe elementen heb ik nieuwe divs gemaakt en die in de css opgemaakt. STAP 5 Stapje voor stapje, heb ik gekregen wat ik wou. Ik heb alles op w3schools kunnen vinden, omdat ik al wel eens eerder daar heb gekeken voor uitleg. Page 1 PIOTR TEKIEN HKU GAME ART GAR-1B September 5, 2014

3 PORTFOLIO 1 - ERVARINGEN Ervaringen Het eerste wat me opviel was dat je snel je hele opmaak kan verprutsen door 1 div niet af te sluiten of een css blok niet af te sluiten. html & css is eigenlijk heel simpel als je rustig de tijd neemt om alles op te zoeken wat iets doet. De functie inspect element was zeer handig in Google Chrome. Ook natuurlijk de Apply Source Formatting om je code overzichtelijk te maken. De website moest werken in Chrome, Safari, Firefox, Internet Explorer en hij deed niet alles hetzelfde in alle browsers. Uiteindelijk is dit toch gelukt. Elke website is opgebouwd in blokken, om die blokken zo mooi mogelijk naast elkaar te rangschikken met een correcte margin/padding is niet altijd even makkelijk. De juiste technieken en waardes hiervoor vinden is soms verwarrend. Ik had gekozen voor een flat design, deze had ik eerst in plaatjes op mijn website gezet. Toen dacht ik, hey wacht! Dit kan allemaal in css. Dan is het sneller en minder zwaar om later een style-switch te maken (de style-switch hoorde ik van 2 e jaars). Toen was ik mijn website opnieuw gaan indelen in divs en css inkorten. Websites maken is interessant, ik zie mijzelf misschien wel coden later naast het zijn van een 3D Artist. C++ lijkt mij handig om te weten als 3D Artist. Tot slot ben ik zeer tevreden met het resultaat dat ik nu heb. Page 2 PIOTR TEKIEN HKU GAME ART GAR-1B September 5, 2014

4 PORTFOLIO 1 - WIREFRAMES Wireframes Page 3 PIOTR TEKIEN HKU GAME ART GAR-1B September 5, 2014

5 PORTFOLIO 1 - WIREFRAMES Page 4 PIOTR TEKIEN HKU GAME ART GAR-1B September 5, 2014