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:

4hr4 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

4hr4 timebox

Wat je nodig hebt

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:

4hr4 timebox

  • Maak een overzicht van de data(informatie) die jij in jouw portfolio gaat opnemen
  • Maak wireframes van de verschillende views/secties/pagina’s

4hr4 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


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:

4hr4 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

4hr4 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

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

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:

4hr4 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.

4hr4 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

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:

4hr4 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.

4hr4 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

Op te leveren producten

  • Een volledig geoptimaliseerde werkende portfolio in een lokale testomgeving.