Badges/Web-2: verschil tussen versies

Uit basis
Naar navigatie springen Naar zoeken springen
Geen bewerkingssamenvatting
Geen bewerkingssamenvatting
Regel 5: Regel 5:
}}
}}
{{Zijbalk Badges}}
{{Zijbalk Badges}}
== Badge HTML-1 ==
== Badge HTML-1: dynamische webpagina's ==


Deze badge geeft aan dat je enkele geavanceerde aspecten van HTML beheerst:
Je kunt een eenvoudige dynamische webpagina maken, met behulp van server-side scripting (bijv. in Python).


* HTML tabellen
=== Evidence ===
* HTML formulieren, interactie met de server
* 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
* 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
* interactie met de server via JavaScript (AJAX)


=== Module ===
Een zelfgemaakte eenvoudige website met dynamische webpagina's, met sessies en gebruikers. Deze website moet gevalideerd zijn. Je kunt uitleggen hoe deze website werkt.


[[Modules/HTML-1]]
De website moet gepubliceerd zijn op het web.


=== Algemene concepten ===
=== Voorkennis ===
 
Python-1 (tekst); HTML-0; Web-0
 
== Inhoud ==


* boom-structuur
Je kent de volgende begrippen, en kunt deze toepassen in een eenvoudige website:
** relaties tussen knopen (elementen) in book: ouders (parents), kinderen (children)
** navigeren
** veranderen (manipulatie) van boom


=== Hulpmiddelen ===
'''HTML'''
* formulieren (forms)
* input-elementen
* formulier-actie (GET, POST)
* submit (-button)


* developer-tools in de browser
'''HTTP'''
* GET, POST request; idempotentie van GET
* request-parameters


== Evidence ==
'''Server-side scripting''':
* templates en parameter-substitutie
*  database voor persistentie van data; database-queries
* sessions: cookies; headers
* gebruikers: identificatie en authenticatie


Maken en publiceren van een meer uitgebreide persoonlijke webpagina, met daarin onder meer:
Je kunt de interactie tussen de client (browser) en de server beschrijven, bij de afhandeling van een html-formulier.
* gebruik van CSS (in head, of in apart bestand) voor opmaak van enkele elementen;
* gebruik van enkele input-elementen met daaraan gekoppeld een handler in JS.


HTML, CSS en JS mogen in één bestand gecombineerd worden. In dat geval:
=== Algemene concepten ===
* CSS in head
* JS aan het eind van de body
* koppeling tussen HTML, CSS, en JS via id's, class en eventueel andere css-selectoren.
(Je kunt een dergelijke pagina eventueel maken via Thimble, of JSBin, JS Fiddle, enz.)


Bij het demonstreren van de webpagina hoort ook het tonen van de webpagina en de gebruiker-interactie via de developer-tools van de browser.
* templates, tekst-substitutie
* persistentie van data, databases
* stateful en stateless interacties
* idempotentie van operaties


== Voorkennis ==
=== Hulpmiddelen ===


* Web-0
* server-side scripting: testen, gebruik van logfiles
* HTML-0
* CSS-0
* Javascript-0

Versie van 15 mrt 2016 10:05

Badge-status: In bewerking
Module: HTML-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 HTML-1: dynamische webpagina's

Je kunt een eenvoudige dynamische webpagina maken, met behulp van server-side scripting (bijv. in Python).

Evidence

Een zelfgemaakte eenvoudige website met dynamische webpagina's, met sessies en gebruikers. Deze website moet gevalideerd zijn. Je kunt uitleggen hoe deze website werkt.

De website moet gepubliceerd zijn op het web.

Voorkennis

Python-1 (tekst); HTML-0; Web-0

Inhoud

Je kent de volgende begrippen, en kunt deze toepassen in een eenvoudige website:

HTML

  • formulieren (forms)
  • input-elementen
  • formulier-actie (GET, POST)
  • submit (-button)

HTTP

  • GET, POST request; idempotentie van GET
  • request-parameters

Server-side scripting:

  • templates en parameter-substitutie
  • database voor persistentie van data; database-queries
  • sessions: cookies; headers
  • gebruikers: identificatie en authenticatie

Je kunt de interactie tussen de client (browser) en de server beschrijven, bij de afhandeling van een html-formulier.

Algemene concepten

  • templates, tekst-substitutie
  • persistentie van data, databases
  • stateful en stateless interacties
  • idempotentie van operaties

Hulpmiddelen

  • server-side scripting: testen, gebruik van logfiles