Categorie: Niveau 2 – Basis

Website: Taste 4 U CSS

Je hebt je verdiept in de structuur van HTML5 door middel van de opdracht Taste 4 U. Nu staat er een kale website die wel wat aankleding kan gebruiken. Dit is deel twee van deze opdracht en hierin gaan we de website vormgeven met CSS.

De CSS die je tot nu toe al hebt verwerkt in je website kun je laten staan en aanvullen met de onderstaande opdracht. Voor deze opdracht gebruik je het lesmateriaal (video’s) van Gerhard. Deze zijn te vinden door de link onder benodigdheden te volgen.

Opdracht

  • Teken op een papiertje hoe je wilt dat de website er uit komt te zien
  • Maak de Taste 4 U website op met externe CSS
  • Pas de diverse stijlregels toe op alle tags, id’s en classes.

Benodigdheden

Inleveren

Website

  • Inleverdatum: 22 december
  • Bestandstype: online website
  • Locatie: in je 2e jaar container onder de naam “Taste 4U”

Beoordelingscriteria

De bedoeling is dat je hier onderstaande punten volgt. Wanneer je dit niet doet, bijvoorbeeld omdat je al een andere vormgevingskeuze hebt gemaakt, geef dan even in je CSS aan (met een comment) waarom je deze keuze hebt gemaakt.

  • Er is een wrapper waarin alle elementen zitten (<header>,<nav>,<article>, <section>, etc.)
  • De wrapper is gecentreerd in de browser
  • De CSS is extern en goed gekoppeld aan alle pagina’s
  • Er is een achtergrondplaatje in de body van de CSS geplaatst
  • Alle HTML5-tags zijn gestyled en gepositioneerd (width, height, float, etc.)
  • Alle (opmaak)tags zijn gestyled (lettertype, corps, regelafstand, uitlijning, etc.)
  • De navigatie ziet er uit als knopjes met ronde hoeken en hebben geen onderlijn
  • De hover ziet er anders uit dan de gewone navigatie en heeft geen onderlijn
  • De active link ziet er anders uit dan de gewone navigatie en heeft geen onderlijn
  • De link naar Smulweb ziet er anders uit dan de navigatie links
  • Er is minimaal gebruik gemaakt van 1 Google-font
  • Er zijn minimaal 2 classes toegepast waarin een uitzondering op de standaardopmaak is gemaakt
  • foutloze HTML-validatie
  • foutloze CSS-validatie
  • de verbeterde versie staat op ma-cloud in jouw 2e jaar container.

 

Bootstrap

Bootstrap is een CSS-framework gemaakt door Twitter waarmee je snel een responsive website kan maken die goed functioneert in alle moderne browsers, zowel op desktops als op mobiele apparaten. Bootstrap bevat CSS-stijlen voor allerlei user interface componenten, zoals buttons, labels, menu’s, meldingen en breadcrumbs. Met behulp van een fixed grid of een fluid grid kun je snel en eenvoudig responsive layouts maken.

Naast CSS bevat Bootstrap meer dan 10 custom jQuery plugins om bijvoorbeeld carousels, modals en dropdown menu’s te maken. Twitter Bootstrap stelt je in staat om snel en zonder al te veel kennis van HTML en CSS een mooie website te maken. Ook voor webdesigners met ervaring kan Bootstrap een waardevol instrument zijn, doordat het hun workflow aanzienlijk kan versnellen.

Bootstrap Thema’s en Templates

Vandaag de dag zijn er veel Bootstrap thema’s en templates beschikbaar. Van simpele html templates voor statische websites tot complete WordPress themes. Op de website van Bootstrap staan al een aantal voorbeelden die prima als template voor een eenvoudige website kunnen werken.

Lesstof op Lynda.com

Bootstrap 3 Essential Training (door Ray Villalobos)

  1. Getting Started
    1. Downloading and installing manually (belangrijk!)
  2. Working with the Bootstrap Grid
    1. Understanding Bootstrap (belangrijk!)
    2. Working with rows (belangrijk!)
    3. Creating columns (belangrijk!)
    4. Using multiple column classes (belangrijk!)

Woordenlijst

  • Framework
    Een (website)framework of raamwerk is een hulpmiddel om snel websites op te bouwen. Veel gebruikte taken worden geautomatiseerd en handige functies worden op voorhand gedefinieerd om te vermijden dat er veel code dikwijls opnieuw geschreven moet worden. Voorbeelden van frameworks voor Java zijn jQuery en MooTools.
  • User Interface
    De user interface (UI) is een grafisch vormgegeven schil waarmee gebruikers en apparaten met elkaar kunnen communiceren. Het doel van een user interface is tweeledig: de gebruiker in staat stellen het apparaat te bedienen en het systeem de mogelijkheid geven om informatie te presenteren aan de gebruiker.
  • Fixed grid & fluid grid
    De beste manier om dit uit te leggen is met de onderstaande voorbeelden:
    fluid non-responsive layout
    fluid responsive layout
    fixed non-responsive layout
    fixed responsive layout
  • Responsive
    Simpel gezegd passen responsive websites zich aan aan het scherm waarmee een bezoeker de website bekijkt. Of dit nu een desktop monitor is, een tablet, of een smartphone. Er is slechts één website, waarvan de layout zich aanpast aan de resolutie van het beeldscherm.
  • jQuery
    jQuery is een vrij JavaScript-framework voor dynamische en interactieve websites, onder andere voor het bewerken van het DOM en CSS en interactie met de webserver (ook bekend als AJAX). De ontwikkeling van jQuery is begonnen door de Amerikaan John Resig.

Opdracht

Tijdsduur: 4 uur school, 4 uur thuis.

Download het bestand met 4 pagina-layouts (zie Benodigdheden). In deze PDF staan vier pagina’s die ieder verschillend zijn opgemaakt. Maak deze pagina’s na, let goed op de padding en margin die in de vlakken gebruikt worden.

Pagina 1, 2 en 3 zijn verplicht voor een 7, pagina 4 is “The Challenge” en kan als beoordeling een 9 geven als deze perfect is uitgevoerd.

Het onderwerp van deze Bootstrap website ben jij, in combinatie met jouw favoriete bezigheid. In het onderdeel ‘eigen menu’ plaats je vijf favoriete websites in een unordered list. De slider is voor een hogere beoordeling.

TIP: Download de zipfile “bsyourself quickstart” en pak deze uit op je computer. Hierin staat een opzetje voor het eerste template voor je klaar.

Benodigdheden

Inleveren

  • Inleverdatum:
    • MV2A: 8 juni
  • Bestandstype: html/css
  • Locatie:
    • MV2A: online, via een link in je 2e jaars container

Beoordelingscriteria

  • Pagina 1 t/m 3 zijn perfect nagemaakt met het Bootstrap 3 frame. Let goed op paddings en headings.
  • De website werkt goed voor de Desktop, Tablet en Smartphone.
  • Er zijn vlakken weggelaten in het Smartphone formaat, die wel zichtbaar zijn in het Desktop formaat.
  • Gebruikte afbeeldingen zijn juist gecomprimeerd, in proportie en hebben de juiste extensies (JPG, GIF of PNG).
  • Vijf favoriete websites staan in het vlak ‘eigen menu’ in een unordered list.
  • Alle pagina’s hebben een unieke relevante title.
  • De content van de websites is relevant en geen Lorem Ipsum.
  • Alle afbeeldingen en links werken.
  • Alle pagina’s zijn foutloos (HTML-validatie).
  • De site staat online in je 2e jaar container.

Extra punten “The Challenge”:

  • Alle bovenstaande onderdelen zijn perfect uitgevoerd.
  • Pagina 4 is nagemaakt.
  • Bootstrap slider is toegevoegd.
  • Afbeeldingen in pagina 1 en 2 staan tegen elkaar aan, dus geen gutter.

Kleurruimten & Drukplaten

Wat is kleur eigenlijk? En hoe wordt kleur gezien en nagemaakt? Er zijn veel stappen in het ontwerp proces waar kleuren worden vertaald van het ene apparaat naar het andere, bijvoorbeeld van je beeldscherm naar de printer. We gaan onderzoeken hoe de techniek van deze apparaten van invloed is op het ontwerpproces.

Lees verder “Kleurruimten & Drukplaten”

Feedback/Beoordeling

talking-pairs1In de praktijk controleren collega’s het werk van elkaar. Dit is nodig om fouten te voorkomen en kosten te besparen. Als een fout niet wordt opgemerkt en deze productie op de drukpers belandt dan is dit een enorme schadepost voor een ontwerpbureau of voor jou zelf. Om dit te voorkomen wordt er intern gecontroleerd.

Doel voor de feedbackgever: Leren feedback geven aan de hand van exacte criteria. Doel voor de beoordeelde klasgenoot: Ontdekken welke aanpassingen je nog kunt doen aan jouw product. Leren van je klasgenoten. De eindbeoordeling wordt gedaan door je docent. Jouw gegeven feedback is een onderdeel van de eindbeoordeling.

STAP 1

  • Je krijgt van je docent een naam van een klasgenoot (zie de link hieronder).
  • Je opent het feedback checklist bestand in Acrobat.
  • Bewaar de PDF als: Klas_Achternaam_Voornaam_poster-feedback.pdf
  • Je zet bij ‘Naam feedback ontvanger’ je eigen naam.
  • Je zet bij ‘Naam feedback gever’ de naam van de klasgenoot die jouw feedback gaat geven.
  • Bij elk werkproces zie je gele vlakken. Hierin kun je een korte toelichting schrijven aan de feedbackgever wanneer:
    • je product afwijkt van de criteria
    • je twijfelt of het goed is wat je hebt gedaan
    • je een vraag of opmerking hebt aan de feedbackgever
    • er uitleg nodig is bij je werk
  • Plaats je Indesign pakket en dit feedback formulier in de uitwisselmap. Je klasgenoot die jou feedback gaat geven kan dit vanuit de uitwisselmap kopieren.

STAP 2

  • Je zoekt het digitaal ingeleverde werk van je klasgenoot in de uitwisselmap op de ‘K-schijf’.
  • Je kopieert het pakket naar je eigen computer.
  • Je geeft feedback met behulp van de input op bladzijde 2, 3, 4, en 5.
  • Heb je het feedback formulier ingevuld voor je klasgenoot, dan mail je dit naar hem toe.

STAP 3

  • Je ontvangt via de mail je eigen feedback retour.
  • Je leest deze feedback door. Stelt vragen aan je klasgenoot bij onduidelijkheden.
  • Je verbetert je eigen werk waar nodig.

Jij blijft natuurlijk zelf verantwoordelijk voor je eigen werk en keuzes die je maakt. De kans dat jij met je werk een voldoende scoort is nu veel groter.

Benodigdheden

Inleveren

  • Inleverdatum: einde van de les
  • Bestandstype: Eén PDF met het feedback formulier dat je hebt ontvangen
  • Locatie: Upload naar Dropbox

Beoordelingscriteria

  • De manier waarop jij feedback geeft op het werk van je klasgenoot wordt meegenomen bij de eindbeoordeling.
  • Heb je alles vóór het einde van deze les ingeleverd?

Peer feedback

talking-pairs1‘Peer feedback’ betekent dat je aan elkaar feedback geeft over de vorderingen in het project. Het voordeel hiervan is dat je een indruk krijgt van waar je klasgenoten aan werken, maar ook dat je ziet waar iedereen is binnen het proces. En natuurlijk of je zelf een beetje lekker gaat, of dat je juist achter loopt.

Je ontvangt een formulier in drievoud dat je gebruikt om feedback te geven (zie ook de link hieronder). Je hebt aan het einde van deze les drie andere studenten feedback gegeven. Jij zelf ontvangt dus ook feedback door drie anderen en deze formulieren verzamel je en scan je in. Je maakt hiervan één PDF die je vervolgens inlevert bij je docent (zie hieronder).

TIP: Hoe combineer je losse bestanden in één PDF?
Open Acrobat. Kies File > Create > Combine files into a single PDF. Klik vervolgens de knop Add Files en kies de bestanden uit.

Je begint eerst met het bedenken van 2 vragen over je eigen werk die je van de andere studenten wilt weten. Denk bijvoorbeeld aan uitleg over iets dat je niet begrijpt, of hulp bij iets waarover je twijfelt. Neem hiervoor maximaal 10 minuten de tijd.

TIP: Stel open vragen! Je wilt namelijk geen ja/nee (of A/B) antwoorden, daar heb je niks aan. Een gesloten vraag is bijvoorbeeld “Wat heb je liever, zon of sneeuw?”. Een open vraag is “Welk type weer hou je van?”

Vervolgens ga je samen met 3 andere studenten in een groepje van vier zitten. Als je elkaar feedback gaat geven let je op de volgende punten:

  • Beantwoordt eerst de vragen die de student zelf heeft bedacht.
  • Probeer opbouwende kritieken te geven (dus als je iets niet goed vindt, geef dan ook aan wat er aan kan worden gedaan om te verbeteren).
  • Als je iets mist in de onderzoeken, geef dan ook aan waarom dit er volgens jou in moet.

Neem de tijd om je feedback op te schrijven en te bespreken met de student. Daarna herhaal je dit met de andere studenten uit je groepje. Als je iedereen hebt gehad, heb je ook zelf drie keer feedback gekregen. Deze formulieren scan je in en voeg je samen in een PDF die je inlevert.

Wanneer je klaar bent kun je verder met de opdrachten die je nog hebt openstaan (zie de voortgangspagina van je klas) en het project.

Benodigdheden

Inleveren

  • Inleverdatum: einde van de les
  • Bestandstype: Eén PDF met daarin drie gescande feedback formulieren
  • Locatie: Upload naar Dropbox

Beoordelingscriteria

  • Heb je alles vóór het einde van deze les ingeleverd?
  • Je inzet in de les