Einde schooljaar is in zicht, je gaat op stage. Om het mogelijk te maken om jou te introduceren bij een stagebedrijf en het bedrijf de gelegenheid te geven om jouw competenties en vaardigheden te beoordelen is een portfolio essentieel.
Het portfolio bestaat uit drie onderdelen; introductiedeel, bewijsdeel en een show case. Jij gaat de komende tijd van start met het maken van de intro- en het bewijsdeel.
Taak 1 Instructie Portfolio
Deze taak heeft als doel dat jij:
- Weet wat een portfolio is
- Weet hoe een portfolio is samengesteld
- Weet voor wie jij een portfolio maakt
Opdrachten:
4 timebox
- maak een Word template/sjabloon volgens de spelregels zoals die in de sectie Beoordeling documentatie zijn beschreven(bijvoorbeeld voorblad, inhoudsopgave, inleiding etc)
- onderzoek en maak een overzicht en omschrijving van de doelgroepen voor jouw portfolio site
- beschrijf wat elke doelgroep graag zou willen zien aan informatie
- maak een overzicht van de informatie die jij op jouw portfolio wil/moet tonen
4 timebox
- onderzoek welke portfolio onderdelen (about, contact, work etc.) veel worden gebruikt, kijk hiervoor op de voorbeeld portfolio’s van http://www.awwwards.com/websites/portfolio/
- stel en logboek samen volgens het voorbeeld en werk deze vanaf nu elke les bij
Wat je nodig hebt
- Een medestudent…
- Een voorbeeld logboek zie documentatie bij elk project
- Voorbeeld portfolio’s van http://www.awwwards.com/websites/portfolio/
- Voorbeeld vacatures van http://www.indeed.nl/
- Voorbeeld stagevacatures van https://stageplaza.nl/
Op te leveren producten
Een document met daarin:
- Overzicht van de doelgroepen
- Overzicht van de eisen en verwachtingen van de doelgroepen
- Minimaal 10 veelgebruikte portfolio onderdelen
En een bijgewerkte logboek
Taak 2 Ontwerp van het portfolio en opzet ontwikkelomgeving
Deze taak heeft als doel dat jij:
- Weet welke informatie je gaat opnemen in jouw portfolio
- Weet hoe je jouw portfolio gaat indelen
- Weet hoe jij de gebruiker door de informatie heen gaat leiden
- Weet wat met de term “mobile first design” wordt bedoeld
- Weet hoe een beschrijving van een ontwikkelomgeving wordt gemaakt
Wireframing is een belangrijke stap in elk ontwerpproces. In de eerste plaats is het bedoeld om de informatie hiërarchie van uw ontwerp te definiëren, waardoor het makkelijker is om de indeling(layout) te maken op basis van hoe jij wil dat de gebruiker de informatie verwerkt.
Opdrachten:
4 timebox
- Maak een overzicht van de data(informatie) die jij in jouw portfolio gaat opnemen
- Maak wireframes van de verschillende views/secties/pagina’s
4 timebox
- Maak een sitemap met behulp van Gliffy, een voorbeeld kan je hier vinden.
- Maak een scenario hoe jij wil dat een personeelsmedewerker van een toekomstige stagebedrijf door jouw portfolio heen gaat
- Maak een beschrijving van jouw ontwikkelomgeving aan de hand van de productieomgeving(shared-hosting)
Wat je nodig hebt
Een wireframing tool:
Een diagram tool:
Een responsive CSS Grid of Flexbox Layout en webfonts:
Proef teksten en afbeeldingen
- Goede algemene proef-teksten zijn te vinden op Lipsum en Slipsum 😉
- Placeholders zie PlaceHold
- Afbeeldingen zie Unsplash
Informatie over projectdocumentatie ontwikkelomgeving
Op te leveren producten
- Overzicht van de te gebruiken data
- Wireframes van alle views op basis van een (responsive) grid of flexbox layout
- Korte scenario van een bezoeker die jou wil gaan uitnodigen voor een stage sollicitatie gesprek
- Beschrijving van jouw ontwikkelomgeving
Taak 3 Realisatie van het grid/flexboxes en vlakken-indeling
Deze taak heeft als doel dat jij:
- Weet wat een grid is
- Weet wat een flexbox layout is
- Weet wat responsive- en adaptivewebdesign is
- Weet hoe jij de gebruiker door de data heen wil leiden
- Weet hoe jij een vlakken-indeling kan maken
Het wordt nu tijd dat jij jouw wireframes gaat omzetten naar daadwerkelijk HTML/CSS. Begin met het scripten van hoekige vlakken op het grid/flexbox. Denk na over de flow oftwel volgorde van de informatie die jij de bezoekers wil presenteren, van boven naar beneden is de gemakkelijkste, gevolgd door van links naar rechts. Zorg er voor dat de manier waarop gebruikers dingen doen op verschillende views/sectie’s/pagina’s niet veranderen oftwel zorg voor “consistency“. Het zal in sommige gevallen erin resulteren dat jij jouw wireframes moet aanpassen om die consistentie van header, navigatie, content, footer, sidebars, subnavigatie en kleuren te bereiken.
Hieronder is een voorbeeld van een wireframe die een lay-out gebruikt die tegenwoordig vaak voorkomt.
Opdrachten:
4 timebox
- Onderzoek veelgebruikte portfolio layouts(vlakken-indelingen) bijvoorbeeld met de hulp van Wirify
- Maak een indeling in grid/flexboxes, gebruik hiervoor de instructies op w3schools Grid of w3schools Flexbox
- Maak jouw grid/flexboxes responsive, gebruik ook hier de instructies van w3schools Mediaqueries
4 timebox
- Maak HTML/CSS layouts van al jouw views/secties/pagina’s op basis van jouw in taak 2 gemaakte wireframes
- Voorzie al jouw views/secties/pagina’s van proef content
Wat je nodig hebt
Proef content zoals teksten, afbeeldingen en iconen
- Goede algemene proef-teksten zijn te vinden op Lipsum en Slipsum 😉
- Wireframe Afbeeldingen zie PlaceHold
- Mockup Afbeeldingen zie LoremPixel
- Iconen zie FreeIconShop
- Voor toekomstige lessen Random User Generator en JSONPlaceHolder
Een responsive Grid of Flex layout:
- w3schools Flexbox
- w3schools Grid
- w3schools Mediaqueries
- Gebruik de Mobile first methode en maak gebruik van onderstaande breakpoints:
/* Small Devices, Tablets */ @media only screen and (min-width : 768px) { } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { }
Bronnen
- Opzet van een HTML5 boilerplate
- Responsive vs Adaptive
- Voorbeelden van Responsive vs Adaptive
- De standaardwaarden van CSS vind je op Default CSS.
Op te leveren producten
- Een responsive grid/flexbox layout
- Doordachte HTML/CSS layouts gevuld met proef content
Taak 4 Realisatie van de navigatie
Deze taak heeft als doel dat jij:
- Weet wat Ajax is
- Weet wat de HTML DOM is
Het is nu tijd om jouw views/secties/pagina’s zichtbaar te maken door gebruik te maken van navigatie-elementen. We gaan gebruik maken van AJAX, AJAX maakt webpagina’s asynchroon dit houdt in dat deze worden bijgewerkt door het achter de schermen uitwisselen van gegevens met een web-server. Hierdoor is het mogelijk is om delen van een webpagina te veranderen zonder dat de hele pagina wordt herladen. Om dynamisch de inhoud, structuur en stijl van een pagina te kunnen veranderen moet je weten dat er zoiets is als de DOM.
Opdrachten:
4 timebox
- Stel vast welk vlakken in jouw layout niet veranderen zoals de sidebar, header en footer.
- Maak jouw navigatie-elementen(links/buttons) in het daarvoor bedoelde vlak in jouw layout.
- Stel vast in welk vlak(DOM element) in jouw layout de content moet veranderen.
- Script in JS een AJAX functie die het mogelijk maakt om achter de schermen HTML content te laden.
4 timebox
- Voorzie elke link/button van een onclick event die de AJAX functie called en aangeeft welk vlak(DOM element) moet veranderen.
- Controleer jouw HTML en CSS met de beschikbare validators.
- Test de koppelingen naar jouw views/secties/pagina’s. Als het goed is bevatten deze nu nog uitsluitend proef content. In de volgende taak gaan wij alle views/secties/pagina’s vullen met content.
Wat je nodig hebt
- Crossbrowser functionalities zie http://caniuse.com/
- Validators zoals HTML validator, CSS validator, JSON Lint en JS Lint
- Instructie over Javascript en de DOM.
- Instructie en een voorbeeld van een responsive menu
- Instructie over het Javascript XMLHttpRequest en het gebruik daarvan
Op te leveren producten
- Javascript: een AJAX functie om HTML pagina’s op te halen
- HTML: Navigatie koppelingen naar alle views/secties/pagina’s vlakkenindeling
Taak 5 Realisatie, invoegen van de content en werkend maken van de navigatie
Deze taak heeft als doel dat jij:
- De te gebruiken content zoals projecten, opdrachten en experimenten verzameld
- Content netjes structureerd en opmaakt
- Content views/secties/pagina’s realiseerd
- Koppelen van de navigatie aan de diverse views/secties/pagina’s
Nu is het moment dat jij jouw content gaat verwerken, dit houdt in dat jij het werk dat je inmiddels voor school hebt gemaakt verzameld en opmaakt. Zoals jij in de vorige taak hebt gedaan weet jij hoe jij jouw navigatie koppeld aan proefcontent, nu ga jij jouw echte content koppelen/ontsluiten.
Opdrachten:
4 timebox
- Verzamel alle content die jij op jouw portfolio wil tonen, denk naast alle schoolopdrachten en projecten ook aan thuisexperimenten.
- Maak screenshots van jouw content en zorg voor een korte tekstuele omschrijving, voorzie elke stukje content van bijvoorbeeld een link naar GIThub, teamgrootte, jouw rol binnen het team, gebruikte technieken, datum van uitvoer…etc.
- Elk stukje content is een article bestaande uit bijvoorbeeld een header, footer, title, subtitle etc.
- Realiseer nu daadwerkelijk jouw content views/secties/pagina’s zorg voor een duidelijke opmaak uiteraard gebaseerd op jouw grid/flexboxes.
4 timebox
- Zorg nu voor koppelingen vanuit jouw navigatie naar al jouw content. Zorg er ook voor dat links naar bijvoorbeeld GIThub die in de content zitten ook echt werken.
- Zorg er voor dat waar nodig interne links in de views/secties/pagina’s ook werken. Bijvoorbeeld…op de opdrachten pagina een link naar opdracht 7.
- Controleer of jouw views/secties/pagina’s wel een duidelijke outline hebben met een online outline service. Pas deze waar nodig aan.
- Controleer de optimalisatie van jouw website met behulp van Google Pagespeed, mik op een score van minimaal 70. Volg waar nodig de adviezen op.
Wat je nodig hebt
- Een outline service om de semantische opzet van jouw webpagina’s te bekijken
- Google PageSpeed Insights
Op te leveren producten
- Een volledig geoptimaliseerde werkende portfolio in een lokale testomgeving.