12.1 Optimalisatie / Validatie / Fonts

• Software Developer [WEB_A]
• MBO
• Studiejaar 1

WEB

Webdevelopment-II

Les 4 / Week 12

Optimalisatie, validatie en fonts

Week 12 // WEB

Optimalisatie / validatie / fonts

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

Tinypng.com

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/

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.

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

webfont converteren

ttf/otf converteren naar woff/woff2

hier zijn verschillende tools voor, bijv:

Webfont toevoegen

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

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.

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. 

Opdracht 12.2

Maak opdracht 12.2 uit het moduleboekje WDV-II

Font Awesome

Icoontjes die je kunt gebruiken in je webpagina.

www.fontawesome.com

Font Awesome toevoegen

Opdracht 12.3

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

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.