Categorie: Niveau 3 – Verdieping

Meisje aan het strand

Duur: 1 uur

Deze oefening laat zien wanneer maskers echt heel handig beginnen te worden. Bedenk je maar eens hoe je individuele wapperende haren zou selecteren, zonder de achtergrond? Geen van de selectie tools kan dit, maar met een masker lukt het wel.

Lees verder “Meisje aan het strand”

Bestand controleren

Duur: 45 min

Het komt in de praktijk veel voor dat je de opmaak van een collega moet controleren op fouten. Hiermee wordt voorkomen dat iets verkeerd in productie gaat en alles overnieuw moet.

De flyer hiernaast moet worden gecontroleerd. Bekijk hiervoor zowel het Indesign bestand als de PDF die in het aangeleverde pakket zitten.

Er zitten in totaal 10 fouten in de bestanden samen, probeer om er zo veel mogelijk te vinden. Je krijgt hiervoor twintig minuten de tijd. Daarna gaan we gezamenlijk doornemen welke fouten zijn gevonden.

Tijd: 45 min

Lees verder “Bestand controleren”

Website: Taste 4 U

html5_logo_5121De komende lessen ga je je meer verdiepen in HTML5. Je zal merken dat de structuur van een HTML5-document er anders uitziet dan de oudere HTML4. Waar je voor de navigatie in de oude stijl <div id=”nav”></div> gebruikt, zal je bijvoorbeeld bij HTML5 <nav></nav> gebruiken voor de navigatie. Beide manieren worden veel gebruikt online en kennis van beide manieren is dus belangrijk.

We gaan een kleine recepten-website opzetten in HTML5. Je mag deze website vormgeven zoals je zelf wilt. De website komt in je container te staan. Voor deze les heb je vier uur op school en vier uur thuis nodig.

Opdracht

  • Maak een mini-website van vier pagina’s in HTML5:
    1. Pagina 1: (index.html) voorgerecht
    2. Pagina 2: hoofdgerecht
    3. Pagina 3: nagerecht
    4. Pagina 4: contact
  • Gebruik de aangeleverde tekst met recepten. Kies hieruit één voorgerecht, één hoofdgerecht en één nagerecht.
  • Op elke recept-pagina komt een plaatje dat te maken heeft met het gerecht. Je zoekt dat plaatje op internet (denk aan het formaat en de proporties, je mag in Photoshop een uitsnede maken).
  • Op elke recept-pagina komt een advertentie van Smulweb.
  • Pagina 4 (contact) bevat een emaillink naar je eigen MA mail met als onderwerp: kom je bij mij eten? Plaats in deze pagina ook een Google-maps naar jouw huisadres en een link naar http://www.smulweb.nl/recepten welke opent in een nieuw tabblad.
  • Elke pagina bevat een navigatie menu in een ongeordende lijst.

Benodigdheden

Voor deze opdracht gebruiken we het lesmateriaal op Lynda.com. Je kunt hier veel informatie vinden over HTML 5. Let op: de filmpjes zijn Engels gesproken.

TIP: Inloggen op Lynda.com
Surf naar www.lynda.com. Klik rechtsboven op “Sign In”. In de volgende pagina klik je op “Sign in with your organization portal”. Daarna vul je in: “www.ma-web.nl” en klik op Continue. Klik op “Log in met je schoolaccount” en selecteer “Mediacollege Amsterdam”. Klik op Verder. Vul in de volgende pagina je (Ma) inloggegevens in. Hierna wordt je verder geleid naar Lynda.com en ben je ingelogd.

Bekijk/gebruik de volgende hoofdstukken:

  • Introduction
  • Hoofdstuk 1: HTML5 and Semantics
  • Hoofdstuk 2: Document Structure
    • Structuring HTML5 documents (belangrijk)
    • Defining HTML5 documents (belangrijk)
  • Hoofdstuk 3: Grouping content with HTML5
    • Working with figure and figcaption (belangrijk)
    • Grouping content with asides. (belangrijk)

Inleveren

Website

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

Beoordelingscriteria

Structuur

  • Alle pagina’s hebben een unieke en relevante title
  • Alle pagina’s hebben een unieke en relevante h1.
  • De menu items staan in een ongeordende lijst.
  • Er is op de juiste manier gebruik gemaakt van de HTML5-tags: <header>, <nav>, <main>, <article>, <section>, <aside><figure>
  • Alle links werken.

Content

  • Advertentie van Smulweb is aanwezig binnen de juiste HTML5 tag.
  • Alle plaatjes zijn relevant, in proportie, gecomprimeerd en hebben een juiste naam.
  • Alle (opmaak)tags zijn toegepast zoals aangegeven in de aangeleverde tekst.
  • In de contactpagina staat een emaillink naar jouw ma-mail met een onderwerp.
  • In de contactpagina staat een Google-maps van jouw huisadres.
  • In de contactpagina staat een link naar Smulweb, welke opent in een nieuw tabblad.

Organisatie

  • Alle pagina’s en bestanden hebben een relevante naam in onderkast zonder spaties.
  • Alle bestanden zitten in de juiste map en hebben de juiste extensies.
  • Alle pagina’s zijn foutloos (HTML-validatie).
  • De website staat in jouw 2e jaar container.