Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gastcollege: Basis HTML, CSS en JavaScript

411 views

Published on

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

Published in: Technology
  • Be the first to comment

Gastcollege: Basis HTML, CSS en JavaScript

  1. 1. pixelpillow
  2. 2. De basis van HTML, CSS en JavaScript
  3. 3. Wat gaan we doen? » Structuur » Opmaak » Functionaliteit » Tools » Vragen
  4. 4. Stuctuur De basis van elke website Semantiek Tabellen Kopteksten Lopende tekst Afbeeldingen (alt en title attributen) Metatags Rich snippets
  5. 5. Semantiek De betekenis van het web
  6. 6. Niet semantisch Semantisch vs ‣ <div> ‣ <header> ‣ <span> ‣ <form> ‣ <i> ‣ <table> ‣ <b> ‣ <video>
  7. 7. HTML5 Een goede stap in de richting van het semantische web. Check: http://www.w3schools.com/html/html5_semantic_elements.asp
  8. 8. Icon Fonts Iconen die ook zichtbaar zijn voor robots. Check: http://icomoon.io/#demo
  9. 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. 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. 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. 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. 13. Metatags <title> en <meta  name=”description”> zijn belangrijk, <meta  name=”keywords”> niet meer
  14. 14. Rich snippets Zoekresultaten verrijken
  15. 15. Reviews Voeg sterretjes toe aan je zoekresultaat. Check: http://schema.org/Review
  16. 16. Recepten Nuttige informatie: review, bereidingstijd, etc. Check: http://schema.org/Recipe
  17. 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. 18. Opmaak Geef vorm aan je website Wat is CSS? Hoe te gebruiken Responsive (Media Queries)
  19. 19. Wat is CSS? 1. Cascading Style Sheets 2. Vorm van inhoud scheiden 3. Zonder CSS moet een website ook leesbaar zijn
  20. 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. 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. 22. Functionaliteit JavaScript AJAX Flash
  23. 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. 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. 25. Flash 1. Flash weinig meer gebruikt. Niet vindbaar in zoekmachines 2. Plug-in versus native 3. Animaties, effecten nu in CSS3 / JS
  26. 26. Tools Performance Editors
  27. 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. 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. 29. Vragen?

×