Badges/Web-1: verschil tussen versies

Uit basis
Naar navigatie springen Naar zoeken springen
(Nieuwe pagina aangemaakt met '{{Zijbalk Badges}} == Badge HTML-2 == Deze badge geeft aan dat je enkele geavanceerde aspecten van HTML beheerst: '''HTML''' * HTML tabellen (of HTML-0?) * het do...')
 
 
(9 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 1: Regel 1:
{{Zijbalk Badges}}
{{Badge-status
== Badge HTML-2 ==
|status=In bewerking
|auteur= [[Gebruiker:Eelco|Eelco Dijkstra]]
|module=[[Modules/Web-1|Web-1]]
}}{{Zijbalk Badges}}
== Badge Web-1 ==


Deze badge geeft aan dat je enkele geavanceerde aspecten van HTML beheerst:
=== Samenvatting ===
 
Je kunt een website maken met interactie met de gebruiker, via JavaScript.
 
=== Evidence ===
 
Een eigen webpagina waarin je de verderop genoemde aspecten demonstreert, met:
* CSS in een apart bestand, voor de opmaak van enkele elementen;
* JavaScript in een apart bestand,
** voor de interactie met de gebruiker via enkele input-elementen;
** voor het aanpassen van de DOM op grond van deze interactie.
 
Je moet deze webpagina kunnen demonstreren en kunnen uitleggen. Bij het demonstreren van de webpagina hoort ook het tonen van de webpagina en de gebruikersinteractie via de developer-tools van de browser.
 
De website voldoet aan de volgende eisen:
* HTML, CSS en JavaScript in verschillende bestanden;
* HTML, CSS en JavaScript gevalideerd;
* HTML, CSS en JavaScript volgens de style-guides.
* gepubliceerd op het web (eventueel als statische website)
* broncode eenvoudig toegankelijk (bijv. Thimble, JSBin, GitHub)
 
=== Voorkennis ===
 
* Web-0
* HTML-0
* CSS-0
* Javascript-0
 
== Inhoud ==
 
=== HTML- en JavaScript-concepten ===
Je kent de volgende concepten en kunt deze toepassen in de website:


'''HTML'''
'''HTML'''
* HTML tabellen (of HTML-0?)
* het document object model (DOM)
* het document object model (DOM)
* attributen - als (naam, waarde) paren
* attributen - als (naam, waarde) paren
Regel 19: Regel 53:
** gebruik van css-selectoren (CSS, jQuery)
** gebruik van css-selectoren (CSS, jQuery)
** toevoegen en verwijderen van een element via de DOM
** toevoegen en verwijderen van een element via de DOM
* events, en de afhandeling daarvan in Javascript
* events, en de afhandeling daarvan in Javascript
* interactie met de gebruiker via input-elementen
* interactie met de gebruiker via input-elementen


'''JavaScript: interactie met de server'''
'''JavaScript: persistentie van data'''
* interactie met de server via JavaScript (AJAX)
* LocalStorage
* client-side rendering van templates
* JSON-representatie
* Eventueel: lokale database (IndexedDB)
** asynchrone queries
 
=== Optioneel ===
 
* rendering van lokale templates via JavaScript


=== Algemene concepten ===
=== Algemene concepten ===


* boom-structuur
* boomstructuur
** relaties tussen knopen (elementen) in book: ouders (parents), kinderen (children)
** relaties tussen knopen (elementen) in boom: ouders (parents), kinderen (children)
** navigeren
** navigeren in een boom
** veranderen (manipulatie) van boom
** veranderen (manipulatie) van een boom


=== Hulpmiddelen ===
=== Hulpmiddelen ===


Je beheerst de onderstaande hulpmiddelen voldoende om deze te gebruiken voor de website die je maakt als resultaat:
* developer-tools in de browser
* developer-tools in de browser
 
* validatie-tools
== Evidence ==
 
Maken en publiceren van een meer uitgebreide persoonlijke webpagina, met daarin onder meer:
* gebruik van CSS (in apart bestand) voor opmaak van enkele elementen;
* gebruik van enkele input-elementen met daaraan gekoppeld een handler in JS.
 
Bij het demonstreren van de webpagina hoort ook het tonen van de webpagina en de gebruikersinteractie via de developer-tools van de browser.
 
== Voorkennis ==
 
* Web-0
* HTML-1 (voor AJAX)
* CSS-0
* Javascript-0

Huidige versie van 18 mrt 2016 om 09:44

Badge-status: In bewerking
Module: Web-1
Badges
  1. Algoritmen en datastructuren-0
  2. Arduino-0
  3. Arduino-1
  4. Blender-0
  5. CSS-0
  6. CSS-1
  7. Databases-0
  8. Databases-1
  9. Excel-0
  10. Git-0
  11. Hardware-0
  12. Hardware-1
  13. HTML-0
  14. HTML-1
  15. ICT in de Wolken omgeving-0
  16. ICT in de Wolken omgeving-1
  17. Javascript voor games-0
  18. Linux-0
  19. Linux-1 (shell scripting)
  20. Netwerken-0
  21. Netwerken-1
  22. Ondernemen-0
  23. Photoshop-0
  24. PHP en MySQL-0
  25. Programmeren in JavaScript-0
  26. Programmeren in JavaScript-1
  27. Python-0
  28. Python-1
  29. Regexp-0
  30. Scrum-0
  31. Scrum-1
  32. Sketchup-0
  33. SQL-0
  34. Storyboard-0
  35. Unity-2D-0
  36. Unity-3D-0
  37. Video-0
  38. Web-0
  39. Web-1
  40. Web-2
  41. Web-3
Modules

Badge Web-1

Samenvatting

Je kunt een website maken met interactie met de gebruiker, via JavaScript.

Evidence

Een eigen webpagina waarin je de verderop genoemde aspecten demonstreert, met:

  • CSS in een apart bestand, voor de opmaak van enkele elementen;
  • JavaScript in een apart bestand,
    • voor de interactie met de gebruiker via enkele input-elementen;
    • voor het aanpassen van de DOM op grond van deze interactie.

Je moet deze webpagina kunnen demonstreren en kunnen uitleggen. Bij het demonstreren van de webpagina hoort ook het tonen van de webpagina en de gebruikersinteractie via de developer-tools van de browser.

De website voldoet aan de volgende eisen:

  • HTML, CSS en JavaScript in verschillende bestanden;
  • HTML, CSS en JavaScript gevalideerd;
  • HTML, CSS en JavaScript volgens de style-guides.
  • gepubliceerd op het web (eventueel als statische website)
  • broncode eenvoudig toegankelijk (bijv. Thimble, JSBin, GitHub)

Voorkennis

  • Web-0
  • HTML-0
  • CSS-0
  • Javascript-0

Inhoud

HTML- en JavaScript-concepten

Je kent de volgende concepten en kunt deze toepassen in de website:

HTML

  • het document object model (DOM)
  • attributen - als (naam, waarde) paren
  • attributen - voor identificatie van elementen
    • id (unieke identificatie van element in het document)
    • class (klasse van elementen)
  • CSS: koppelen van opmaak (style) door middel van CSS-selectoren

JavaScript: interactie met de gebruiker

  • JS: koppelen van acties aan events van elementen
    • verschillende manieren voor navigeren in de DOM:
    • benoemde elementen (id)
    • gebruik van css-selectoren (CSS, jQuery)
    • toevoegen en verwijderen van een element via de DOM
  • events, en de afhandeling daarvan in Javascript
  • interactie met de gebruiker via input-elementen

JavaScript: persistentie van data

  • LocalStorage
  • JSON-representatie
  • Eventueel: lokale database (IndexedDB)
    • asynchrone queries

Optioneel

  • rendering van lokale templates via JavaScript

Algemene concepten

  • boomstructuur
    • relaties tussen knopen (elementen) in boom: ouders (parents), kinderen (children)
    • navigeren in een boom
    • veranderen (manipulatie) van een boom

Hulpmiddelen

Je beheerst de onderstaande hulpmiddelen voldoende om deze te gebruiken voor de website die je maakt als resultaat:

  • developer-tools in de browser
  • validatie-tools
Overgenomen van "http:///basis/index.php?title=Badges/Web-1&oldid=504"