Badges/Web-2 - Bewerkingsoverzicht

Eelco op 18 mrt 2016 om 08:41

2016-03-18T08:41:36Z

← Oudere versie		Versie van 18 mrt 2016 10:41
Regel 2:		Regel 2:
	\|status=In bewerking		\|status=In bewerking
	\|auteur= [[Gebruiker:Eelco\|Eelco Dijkstra]]		\|auteur= [[Gebruiker:Eelco\|Eelco Dijkstra]]
	\|module=[[Modules/~~HTML~~-1\|~~HTML~~-1]]		\|module=[[Modules/Web-2\|Web-2]]
	}}		}}
	{{Zijbalk Badges}}		{{Zijbalk Badges}}

Eelco: /* Badge HTML-1: dynamische webpagina's */

2016-03-18T08:39:34Z

Badge HTML-1: dynamische webpagina's

← Oudere versie		Versie van 18 mrt 2016 10:39
Regel 5:		Regel 5:
	}}		}}
	{{Zijbalk Badges}}		{{Zijbalk Badges}}
	== Badge ~~HTML~~-1: dynamische webpagina's ==		== Badge Web-2: dynamische webpagina's ==

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

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

	== Inhoud ==		== Inhoud ==

Eelco: Eelco heeft de pagina Badges/Web-1 hernoemd naar Badges/Web-2 zonder een doorverwijzing achter te laten

2016-03-18T08:39:05Z

Eelco heeft de pagina Badges/Web-1 hernoemd naar Badges/Web-2 zonder een doorverwijzing achter te laten

← Oudere versie	Versie van 18 mrt 2016 10:39
(geen verschil)

Eelco: Eelco heeft de pagina Badges/HTML-1 hernoemd naar Badges/Web-1 zonder een doorverwijzing achter te laten

2016-03-18T08:38:45Z

Eelco heeft de pagina Badges/HTML-1 hernoemd naar Badges/Web-1 zonder een doorverwijzing achter te laten

← Oudere versie	Versie van 18 mrt 2016 10:38
(geen verschil)

Eelco op 15 mrt 2016 om 08:05

2016-03-15T08:05:08Z

← Oudere versie		Versie van 15 mrt 2016 10:05
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

Eelco op 11 mrt 2016 om 10:06

2016-03-11T10:06:31Z

← Oudere versie		Versie van 11 mrt 2016 12:06
Regel 1:		Regel 1:
			{{Badge-status
			\|status=In bewerking
			\|auteur= [[Gebruiker:Eelco\|Eelco Dijkstra]]
			\|module=[[Modules/HTML-1\|HTML-1]]
			}}
	{{Zijbalk Badges}}		{{Zijbalk Badges}}
	== Badge HTML-1 ==		== Badge HTML-1 ==

Eelco: 1 versie geïmporteerd

2015-08-16T16:45:50Z

1 versie geïmporteerd

← Oudere versie	Versie van 16 aug 2015 18:45
(geen verschil)

Eelco: /* Badge HTML-1 */

2015-01-26T09:11:46Z

Badge HTML-1

Nieuwe pagina

{{Zijbalk Badges}}
== Badge HTML-1 ==

Deze badge geeft aan dat je enkele geavanceerde aspecten van HTML beheerst:

* HTML tabellen
* 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 ===

[[Modules/HTML-1]]

=== Algemene concepten ===

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

=== Hulpmiddelen ===

* developer-tools in de browser

== Evidence ==

Maken en publiceren van een meer uitgebreide persoonlijke webpagina, met daarin onder meer:
* 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:
* 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.

== Voorkennis ==

* Web-0
* HTML-0
* CSS-0
* Javascript-0