Your SlideShare is downloading. ×
0
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Gastcollege: Basis HTML, CSS en JavaScript

146

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
146
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?

×