gastcollege: basis html, css en javascript
DESCRIPTION
Slides over de basis van webtechniek (HTML, CSS en JavaScript).TRANSCRIPT
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?