Les 7 — Wireframes naar Website, media queries en fonts en animaties

Voorbereiding

• Theorie
• Beantwoord de vragen:
• 👷🏼 Opdracht 1: Transities / Animaties (~30 min.)
• 👷🏼 Opdracht 2: Uitwerking media queries (~30 min.)

Theorie

In deze les behandelen we onderdelen die terug te lezen zijn:

• In het boek:
  • H. 11
    • Lettertypen downloaden (dit onderwerp is in les 3 als optionele opdracht voorbij gekomen)
    • Eigenschappen voor lettertype: font
    • Eigenschappen voor tekst
  • H. 12
    • Kleurwaarden
    • Afgeronde hoeken
  • H. 13
    • Animatie
• Of op MDN:
  • CSS: Color
  • CSS: Border Radius
  • CSS: Styling Text
  • Using CSS Transitions
  • Web Fonts
  • CSS: Animations
• 👩🏻‍💻 📖 Bekijk de voorbeelden in: Enhancing User Experience With CSS Animations. Lees in ieder geval tot en met: Animations grab user’s attention
• 👩🏻‍💻 📖 Lees Hyperlinks vormgeven.

Beantwoord de vragen:

1. Hoe voeg je een extern lettertype toe?
2. Met welke CSS-broncode verander je de tekst in dikgedrukte tekst?
3. Hoe zorg je ervoor dat de tekst onderlijnd wordt?
4. Leg in eigen woorden uit wat keyframes zijn.
5. Wat voor animaties zouden zinnig zijn voor een gebruiker?

👷🏼 Opdracht 1: Transities / Animaties (~30 min.)

Animaties kunnen heel grappig zijn, maar ook veel toevoegen aan de gebruikerservaring. Denk bijvoorbeeld aan:

• Een beweging om de aandacht te trekken op een <input> die verkeerd is ingevuld.
• Een film die groter wordt als je eroverheen hovert.

Kies één van tweeën om uit te voeren.

Dit type animaties worden vaak afgehandeld met transition. Bedenk zelf nog een toepassing voor een animatie aan de hand van het artikel uit de voorbereiding (deze)

👷🏼 Opdracht 2: Uitwerking media queries (~30 min.)

Omdat een pagina niet altijd in dezelfde resolutie wordt bekeken, moeten sommige dingen anders werken voor verschillende type devices (form-factors).

• Zoek op in het boek hoe een media query werkt.
• Pas een media query toe op je menubalk.
• Loop ook na of je recepten overzicht (als je daar gridlay-out hebt gebruikt) goed mee verandert, of dat daar ook wijzigingen voor moeten komen.

Lesprogramma

• Doelen
• Theorie
• Demo "Van wireframe naar implementatie" (~60 min.)
• Wireframes checken

Doelen

Je leert:

• media queries gebruiken om een navigatiebalk te wijzigen voor andere devices;
• Tekst opmaken in CSS;
• Animaties (zinvol) gebruiken.

Theorie

Beantwoord de vragen uit de voorbereiding. Bekijk elkaars uitwerkingen samen van Media query's en animaties.

Demo "Van wireframe naar implementatie" (~60 min.)

De docent geeft een demonstratie van hoe je nu met behulp van de behandelde CSS-technieken van een wireframe naar een in HTML en CSS gerealiseerde layout kunt komen. De demonstratie bevat onderwerpen als:

• Analyse van de wireframe
  • Benoemen van de hoofdonderdelen
  • Benoemen van de onderdelen binnen die hoofdonderdelen
• Het kiezen van een geschikte CSS-techniek voor
  • De hoofdlayout
  • De layout van de hoofdonderdelen
  • De onderdelen op lagere niveau's

Wireframes checken

In de vorige les heb je de wireframes al laten testen door een collega. Laat deze wireframes nu nog checken bij de docent voor een Go/No-Go.