Slides over de basis van webtechniek (HTML, CSS en JavaScript).

1. pixelpillow

2. De basis van HTML, CSS en
JavaScript

3. Wat gaan we doen?
»
Structuur
»
Opmaak
»
Functionaliteit
»
Tools
»
Vragen

4. Stuctuur
De basis van elke website
Semantiek
Tabellen
Kopteksten
Lopende tekst
Afbeeldingen (alt en title attributen)
Metatags
Rich snippets

5. Semantiek
De betekenis van het web

6. Niet semantisch
Semantisch
vs
‣
<div>
‣
<header>
‣
<span>
‣
<form>
‣
<i>
‣
<table>
‣
<b>
‣
<video>

7. HTML5
Een goede stap in de richting
van het semantische web.
Check: http://www.w3schools.com/html/html5_semantic_elements.asp

8. Icon Fonts
Iconen die ook zichtbaar zijn
voor robots.
Check: http://icomoon.io/#demo

9. Tabellen
1. Gebruik voor tabulaire data
2. Niet gebruiken voor opmaak (want: niet responsive en misbruik semantiek)
3. Misbruik alleen geoorloofd bij nieuwsbrieven

10. Kopteksten
1. <h1>, <h2>, <h3>, etc.
2. Volgordelijk gebruiken
3. Hoe te gebruiken voor SEO (HTML5)
4. Homepage en vervolgpagina’s
5. Veelgestelde vraag: Gebruik meerdere <h1>’s toegestaan?

11. Lopende teksten
1. Gebruik altijd tekst, geen afbeeldingen
2. De juiste accenten aanbrengen met <strong> en <em>
3. Gebruik accenten met mate (denk aan verhoogd volume text-to-speach)

12. Aeeldingen
1. alt attribuut geeft een alternatieve tekst bij ontbreken afbeelding
2. title attribuut geeft een beschrijving van een element (tooltip)
3. Geef width en height attributen mee

13. Metatags
<title> en <meta
name=”description”> zijn belangrijk,
<meta
name=”keywords”> niet meer

14. Rich snippets
Zoekresultaten verrijken

15. Reviews
Voeg sterretjes toe aan je
zoekresultaat.
Check: http://schema.org/Review

16. Recepten
Nuttige informatie: review,
bereidingstijd, etc.
Check: http://schema.org/Recipe

17. en meer...
‣
Alle definities op Schema.org: http://www.schema.org/docs/schemas.html
‣
Google over rich snippets: https://support.google.com/webmasters/answer/99170?
hl=nl&ref_topic=1088472
‣
Test of je rich snippets werken: http://www.google.com/webmasters/tools/richsnippets

18. Opmaak
Geef vorm aan je website
Wat is CSS?
Hoe te gebruiken
Responsive (Media Queries)

19. Wat is CSS?
1. Cascading Style Sheets
2. Vorm van inhoud scheiden
3. Zonder CSS moet een website ook leesbaar zijn

20. Hoe te gebruiken
1. Niet inline (structuur en opmaak gescheiden)
2. Modulair (sneller)
3. Voor verschillende devices
<link
rel="stylesheet"
type="text/css"
media="all"
href="all.css"
/>
<link
rel="stylesheet"
type="text/css"
media="screen"
href="screen.css"
/>
<link
rel="stylesheet"
type="text/css"
media="print"
href="print.css"
/>
Check: http://www.w3schools.com/css/css_mediatypes.asp

21. Responsive (Media Queries)
1. Opmaak voor verschillende devices en resoluties
2. Onderscheid portrait en landscape
3. Minimale hoogte/breedte en maximale hoogte/breedte
Check: http://css-tricks.com/css-media-queries/

22. Functionaliteit
JavaScript
AJAX
Flash

23. JavaScript
1. Extra functionaliteit toevoegen aan pagina
2. JavaScript wordt vooral client-side gebruikt
3. <noscript> Voor mensen zonder JavaScript </noscript>
4. Bekende libraries: jQuery en Mootools
Check: http://nl.wikipedia.org/wiki/JavaScript

24. AJAX
1. Asynchronous JavaScript and XML
2. In het kort: Het uitwisselen van data met de
server en het updaten van delen van een pagina
zonder herladen van de hele pagina
3. Relatief gemakkelijk m.b.v. bijvoorbeeld jQuery
Check: http://www.w3schools.com/ajax/

25. Flash
1. Flash weinig meer gebruikt. Niet vindbaar in zoekmachines
2. Plug-in versus native
3. Animaties, effecten nu in CSS3 / JS

26. Tools
Performance
Editors

27. Performance
1. Pingdom: http://tools.pingdom.com/fpt/
2. Smush.it: http://www.smushit.com/ysmush.it/
3. GTmetrix: http://gtmetrix.com/
4. Browser extension: YSlow, PageSpeed

28. Editors
1. Espresso (Mac only): http://macrabbit.com/espresso/
2. Notepad++ (Windows only): http://notepad-plus-plus.org/
3. Brackets: http://download.brackets.io/

29. Vragen?