12.1 Optimalisatie / Validatie / Fonts

WEB
Webdevelopment-II
Les 4 / Week 12
Optimalisatie, validatie en fonts
1 / 16
volgende
Slide 1: Tekstslide
Software Developer [WEB_A]MBOStudiejaar 1

In deze les zitten 16 slides, met tekstslides.

time-iconLesduur is: 180 min

Onderdelen in deze les

WEB
Webdevelopment-II
Les 4 / Week 12
Optimalisatie, validatie en fonts

Slide 1 - Tekstslide

Week 12 // WEB



Optimalisatie / validatie / fonts

Slide 2 - Tekstslide

Optimalisatie
  • Grote foto-bestanden nemen veel ruimte in. 
  • Laden duurt erg lang
  • Verbetering voor zoekopties bij zoekmachines (snel laden)
  • Comprimeren voor het web, om ruimte op je hosting te besparen

Slide 3 - Tekstslide

Tinypng.com

Slide 4 - Tekstslide

Validator
  • Al over gehad tijdens PRA - A1
  • HTML validator: https://validator.w3.org 'By file upload' - 'choose file'
  • CSS validator: https://jigsaw.w3.org/css-validator/

Slide 5 - Tekstslide

Fonts
  • Het lettertype van teksten binnen een element. 
  • font-size: lettergrootte (pixels, punten, percentages, relatief)
  • font-weight: (normal, bold, bolder, lighter)
  • font-style: italic (schuingedrukt)
  • box-shadow: schaduw om element heen

Check https://www.w3schools.com/cssref/pr_font_font.asp voor font properties.

Slide 6 - Tekstslide

Wat is een webfont
  • TTF/OTF: standaard font for windows en mac, grotere filesize
  • WOFF/WOFF2: ttf/otf maar dan gecomprimeerd
  • OET: webfont voor internet explorer. ie8 of ouder kan geen woff aan
  • SVG: oude font voor IOS devices. ios versie van safari 4.1 of ouder gebruiken deze font

Slide 7 - Tekstslide

webfont converteren
ttf/otf converteren naar woff/woff2
hier zijn verschillende tools voor, bijv:


Slide 8 - Tekstslide

Webfont toevoegen
  • Een specifiek font toevoegen aan onze website
  • Toevoegen bovenaan onze style.css

Slide 9 - Tekstslide

Gezamenlijk een font toevoegen
Opdracht 12.1 - WDV-II, pag. 25 
We voegen nu gezamenlijk het font 'League Mono' toe aan onze website. 
  • Eerst zetten we het font om in het gewenste resultaat.
  • Daarna laden we het in onze style.css.
  • Tot slot passen we het toe op het gewenste element.

Slide 10 - Tekstslide

Google Fonts
Font gebruiken wat op de lijst van fonts.google.com staat. 
We kunnen het font nu letterlijk van google laden in onze pagina. 

Slide 11 - Tekstslide

Opdracht 12.2
Maak opdracht 12.2 uit het moduleboekje WDV-II

Slide 12 - Tekstslide

Font Awesome
Icoontjes die je kunt gebruiken in je webpagina.
www.fontawesome.com

Slide 13 - Tekstslide

Font Awesome toevoegen

Slide 14 - Tekstslide

Opdracht 12.3
Maak met behulp van https://fontawesome.com/ de quickview van nu.nl na.

Slide 15 - Tekstslide

Inleveropdracht 12
Maak nu uit het moduleboekje WDV-II inleveropdracht 12 (pagina 28).
Je optimaliseert je portfolio-website en voorziet hem van mooie fonts: zie stappen.

Slide 16 - Tekstslide