gastcollege: basis html, css en javascript

pixelpillow

De basis van HTML, CSS en JavaScript

Wat gaan we doen?» Structuur

» Opmaak

» Functionaliteit

» Tools

» Vragen

StuctuurDe basis van elke website

Semantiek

Tabellen

Kopteksten

Lopende tekst

Afbeeldingen (alt en title attributen)

Metatags

Rich snippets

Semantiek

De betekenis van het web

‣ <div>

‣ <span>

‣ <i>

‣ <b>

Niet semantisch Semantischvs

‣ <header>

‣ <form>

‣ <table>

‣ <video>

Een goede stap in de richting van het semantische web.

Check: http://www.w3schools.com/html/html5_semantic_elements.asp

HTML5

Iconen die ook zichtbaar zijn voor robots.

Check: http://icomoon.io/#demo

Icon Fonts

Tabellen

1. Gebruik voor tabulaire data

2. Niet gebruiken voor opmaak (want: niet responsive en misbruik semantiek)

3. Misbruik alleen geoorloofd bij nieuwsbrieven

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?

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)

Aeeldingen

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

Metatags

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

Rich snippets

Zoekresultaten verrijken

Voeg sterretjes toe aan je zoekresultaat.

Check: http://schema.org/Review

Reviews

Nuttige informatie: review, bereidingstijd, etc.

Check: http://schema.org/Recipe

Recepten

‣ 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

en meer...

OpmaakGeef vorm aan je website

Wat is CSS?

Hoe te gebruiken

Responsive (Media Queries)

Wat is CSS?

1. Cascading Style Sheets

2. Vorm van inhoud scheiden

3. Zonder CSS moet een website ook leesbaar zijn

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

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/

Functionaliteit

JavaScript

AJAX

Flash

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

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/

Flash

1. Flash weinig meer gebruikt. Niet vindbaar in zoekmachines

2. Plug-in versus native

3. Animaties, effecten nu in CSS3 / JS

Tools

Performance

Editors

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

Editors

1. Espresso (Mac only): http://macrabbit.com/espresso/

2. Notepad++ (Windows only): http://notepad-plus-plus.org/

3. Brackets: http://download.brackets.io/

Vragen?