GEBRUIKERSINTERFACES - WEBAPPS
HOOFDSTUK 1: HTML 5
OPFRISSING HTML5 (HERHALING VORIG JAAR)
• Vorm van de tekst
Benadrukken woord (vet) <strong> … </strong>
Benadrukken woord (schuin) <i>…</i>
Hoofdingen <h1>…</h1>
Paragraaf <p>…</p>
Afbeelding <img alt = “titel” src =”link.be”
Height= “5” width=”8” title=”t”
src=”http://www.google.com...”>
(title als je hovert met muis)
Link <a href = “link”>tekst</a>
• Begin van HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dit is de titel</title>
</head>
<body>
</body>
</html>
• Afbeelding: mogelijke src
o Relatief pad: bestand afbeelding in zelfde map webpagina
<img alt=”tekst” src = “tekst.png”>
<img alt=”tekst” src = “algemeenMapje/tekst.png”>
o Absoluut pad: bestand afbeelding op zelfde server als webpagina, ≠ map
<img alt=”tekst/nog” src = “/sites/default/files/tekst.png”>
o Absolute URL
<img alt=”tekst” src = “http://www.google.com/afbeelding.png”>
1
,• Hyperlink: href waarden
o Relatief pad
<a href =”faq”>tekst</a>
<img alt=”tekst” src = “algemeenMapje/tekst.png”>
o Absoluut pad
<a href =”/faq”>tekst</a>
o Absolute URL
<a href =”http://inwe.hogent.be/”>tekst</a>
• Lijsten
o Niet-genummerd (unordered): stipjes
<ul>
<li>bolleke1</li>
<li>bolleke2</li>
</ul>
o Genummerd (ordered)
<ol>
<li>cijfer1</li>
<li>cijfer2</li>
</ol>
o Definitie (definition): begrip (definition term) + uitleg (definition description)
<dl>
<dt>begrip1</dt><dd>uitleg1</dd>
<dt>begrip2</dt><dd>uitleg2</dd>
</dl>
o Geneste lijsten
• Tabellen
Table row <tr>…</tr>
Table data <td>…</td>
Hoofding <thead><tr><th>…</th></tr></thead>
Cellen samenvoegen <colspan = “2”> of <rowspan=”2”>
Afsluiting <tfoot>…</tfoot>
2
, <table>
<thead>
<tr><th colspan = "2">Industrieel ingenieur</th></tr>
<tr><th>Opleidingsonderdeel</th> <th>Studiepunten</th></tr>
</thead>
<tbody>
<tr><td>Wiskunde</td><td>6</td></tr>
<tr><td>Chemie</td><td>6</td></tr>
<tr><td>Materialen</td><td>3</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2"> Meer info op de website </td></tr>
</tfoot>
</table>
• Formulier
<form> … </form>
o Methodes: hoe gelinkt met server
§ Get
- Info ophalen (vb telefoonboek)
- Antwoord wordt gecashed (onthouden)
® Resultaten bewaard en hergebruikt bij volgende opzoeking
- Inhoud moet worden teruggestuurd door server
- Geen verandering op de webserver
® GET-aanvragen mogen beantwoord worden door
proxyservers die corresponderende gegevens hebben
gecached
- Gegevens formulier aan einde van de URL geplakt
® http://www.ugent.be/nl/search?voornaam=Veerle
&familienaam=Ongena
§ Post
- Doorsturen naar server: verandering (vb tickets; aantal moet
veranderen)
® Niet gecached
- Bij reload moet formulier opnieuw worden ingevuld
- Gegevens op webserver aanpassen (niet toegevoegd aan URL)
® http://www.ugent.be/nl/searc
Action URL waarnaar de gegevens moeten worden verstuurd
Method HTTP-aanvraagmethode: get of post
3
,<form action="http://www.ugent.be/nl/search"method="GET">
<label for="vnaam">Voornaam</label><input id="vnaam"name="voornaam"type="text" />
<label for="fnaam">Familienaam</label><input id="fnaam"name="familienaam"type="text" />
<input type="submit"value="Zoeken" />
</form>
o Formulier-onderdelen
§ Input = tekstvak
- Type: geeft soort GUI-element (knop, tekstveld, email, keuzelijst)
- Id: unieke identificatie van het element
- Name: naam van invoerelement
- Value: initiële waarde van het element
§ Label = tekst voor invoerelement (tekstvak, keuzerondje,…)
- For: koppeling tussen label en invoerelement
® Verwijst naar unieke identificatie van invoerelement = id
§ In plaats van input: andere tag
- Textarea: tekstgebied in formulier
- Keuzelijst: <select> en <option>
® <multiple>: meer dan 1 element
® <size>: max # elementen tegelijk afgebeeld
® <selected>: per default geselecteerd
<form>
<textarea name="adresinfo"rows="5"cols="40">N VN Straat 9000GENT</textarea>
Kies een fruit<br>
<select name="fruit" size="1" multiple>
<option value="A">Appel</option>
<option value="P">Peer</option>
<option value="S" selected>Sinaasappel</option>
<option value="K">Kokosnoot</option></select>
</form>
o Structuur geven aan formulier
§ Fieldset: kader rond een aantal formulier-elementen
§ Legend: geeft een naam aan de kader
<fieldset><legend>Kader</legend>
4
,o GUI-elementen
Type=”submit” Submitknop: inhoud omsluitende formulier wordt verstuurd naar
URL uit action-attribuut van het formulier. Value-attribuut verschijnt
als opschrift op de knop
Type=”image” Eigen afbeelding als knop
- Name-attribuut
- Type-attribuut
- Src-attribuut (URL afbeelding)
Volledige inhoud van formulier doorgestuurd zodra op afbeelding
geklikt wordt
Type=”reset” Resetknop: alle onderdelen formulier teruggezet op initiële waarden
(info niet doorgestuurd)
- Value-attribuut: opschrift knop
Type=”text” Tekstveld van 1 lijn
- Value-attribuut: initiële inhoud
- Placeholder-attribuut: suggestietekst
- Size: zichtbare breedte (in lettertekens)
- Maxchars: max aantal karakters (indien groter dan breedte,
wordt veld links/rechts verschoven)
Type=”password” Zelfde attributen als tekstveld en gelijkaardig. Ingetikte lettertekens
worden sterretjes/bolletjes. Let op: wachtwoorden onversleuteld
over net verstuurd
Type=”email” Tekstveld met email-adres. Tekst wordt gecontroleerd of het een
email voorstelt, anders foutbericht.
Type=”url” Tekstveld met URL.
Type=”tel” Tekstveld met telefoonnummer. Hier wordt structuur niet
gecontroleerd door browser.
Type=”checkbox” Element dat aan- of uitgevinkt kan worden. Enkel aangevinkte vakjes
worden doorgestuurd naar webserver.
- Value: default = on
Type=”radio” Radioknop: ~ checkbox maar slechts 1 tegelijkertijd
- Name: indien zelfde naam, behoren ze tot een zelfde groep
- Value
Type=”number” Invoerveld voor getal
- Min
- Max
- Step: getal uit een reeks mogelijke waarden
Type=”time” Invoerveld voor tijdstip: met pijltjes tijd verhogen/verlagen
Type=”date” Invoerveld voor datum: met pijltjes datum aanpassen
Type=”color” Kleur selecteren in popup-venster
5
, <form method="POST"action="http://..."><input type="checkbox"name="veg"> Vegetarisch <br>
<input type="checkbox"name="nrok"checked> Niet-roker <br> <br>
<input type="radio"name="kamer"value="2"checked> 2-persoonskamer <br>
<input type="radio"name="kamer"value="2bad"> 2-persoonskamer met bad<br>
<input type="radio"name="kamer"value="1"> 1-persoonskamer <br>
<br>
<input name="schoenmaat"type="number" min="29" max="50" step="1">
</form>
• Structuur-elementen HTML
<article> Deel van webpagina die afzonderlijke teksteenheid vormt:
nieuwsbericht, artikel, blogpost,…
- Headings
- Alinea’s
<aside> Aanvullende inhoud: citaat
<figcaption> Bijtekst voor figure-element
<figure> Afbeeldingen, video’s, code, songteksten,… aanduiden
<footer> en <header> Voet-/koptekst voor webpagina
<hgroup> Meerdere heading-elementen + ev. andere elementen
<mark> Markeert deel vd tekst
<nav> Menu voor webpagina: meerdere hyperlinks naar andere delen van
webpagina of andere pagina’s
<section> Groeperen
<time> Datum/tijdstip
- Datetime: YYYY-MM-DD (+tijd)
WAT IS HTML5?
• Doel
o Verbeteren HTML-taal
o Ondersteuning multimedia zonder plugin
o Voor webbrowsers en mobiele apps (cross platform)
• Bestaat uit: HTML, XHTML, DOM
• Verwerkingsmodellen
o Interoperabiliteit
o Browsers handelen fouten op zelfde wijze af
• API: complexe webapps
6
HOOFDSTUK 1: HTML 5
OPFRISSING HTML5 (HERHALING VORIG JAAR)
• Vorm van de tekst
Benadrukken woord (vet) <strong> … </strong>
Benadrukken woord (schuin) <i>…</i>
Hoofdingen <h1>…</h1>
Paragraaf <p>…</p>
Afbeelding <img alt = “titel” src =”link.be”
Height= “5” width=”8” title=”t”
src=”http://www.google.com...”>
(title als je hovert met muis)
Link <a href = “link”>tekst</a>
• Begin van HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dit is de titel</title>
</head>
<body>
</body>
</html>
• Afbeelding: mogelijke src
o Relatief pad: bestand afbeelding in zelfde map webpagina
<img alt=”tekst” src = “tekst.png”>
<img alt=”tekst” src = “algemeenMapje/tekst.png”>
o Absoluut pad: bestand afbeelding op zelfde server als webpagina, ≠ map
<img alt=”tekst/nog” src = “/sites/default/files/tekst.png”>
o Absolute URL
<img alt=”tekst” src = “http://www.google.com/afbeelding.png”>
1
,• Hyperlink: href waarden
o Relatief pad
<a href =”faq”>tekst</a>
<img alt=”tekst” src = “algemeenMapje/tekst.png”>
o Absoluut pad
<a href =”/faq”>tekst</a>
o Absolute URL
<a href =”http://inwe.hogent.be/”>tekst</a>
• Lijsten
o Niet-genummerd (unordered): stipjes
<ul>
<li>bolleke1</li>
<li>bolleke2</li>
</ul>
o Genummerd (ordered)
<ol>
<li>cijfer1</li>
<li>cijfer2</li>
</ol>
o Definitie (definition): begrip (definition term) + uitleg (definition description)
<dl>
<dt>begrip1</dt><dd>uitleg1</dd>
<dt>begrip2</dt><dd>uitleg2</dd>
</dl>
o Geneste lijsten
• Tabellen
Table row <tr>…</tr>
Table data <td>…</td>
Hoofding <thead><tr><th>…</th></tr></thead>
Cellen samenvoegen <colspan = “2”> of <rowspan=”2”>
Afsluiting <tfoot>…</tfoot>
2
, <table>
<thead>
<tr><th colspan = "2">Industrieel ingenieur</th></tr>
<tr><th>Opleidingsonderdeel</th> <th>Studiepunten</th></tr>
</thead>
<tbody>
<tr><td>Wiskunde</td><td>6</td></tr>
<tr><td>Chemie</td><td>6</td></tr>
<tr><td>Materialen</td><td>3</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2"> Meer info op de website </td></tr>
</tfoot>
</table>
• Formulier
<form> … </form>
o Methodes: hoe gelinkt met server
§ Get
- Info ophalen (vb telefoonboek)
- Antwoord wordt gecashed (onthouden)
® Resultaten bewaard en hergebruikt bij volgende opzoeking
- Inhoud moet worden teruggestuurd door server
- Geen verandering op de webserver
® GET-aanvragen mogen beantwoord worden door
proxyservers die corresponderende gegevens hebben
gecached
- Gegevens formulier aan einde van de URL geplakt
® http://www.ugent.be/nl/search?voornaam=Veerle
&familienaam=Ongena
§ Post
- Doorsturen naar server: verandering (vb tickets; aantal moet
veranderen)
® Niet gecached
- Bij reload moet formulier opnieuw worden ingevuld
- Gegevens op webserver aanpassen (niet toegevoegd aan URL)
® http://www.ugent.be/nl/searc
Action URL waarnaar de gegevens moeten worden verstuurd
Method HTTP-aanvraagmethode: get of post
3
,<form action="http://www.ugent.be/nl/search"method="GET">
<label for="vnaam">Voornaam</label><input id="vnaam"name="voornaam"type="text" />
<label for="fnaam">Familienaam</label><input id="fnaam"name="familienaam"type="text" />
<input type="submit"value="Zoeken" />
</form>
o Formulier-onderdelen
§ Input = tekstvak
- Type: geeft soort GUI-element (knop, tekstveld, email, keuzelijst)
- Id: unieke identificatie van het element
- Name: naam van invoerelement
- Value: initiële waarde van het element
§ Label = tekst voor invoerelement (tekstvak, keuzerondje,…)
- For: koppeling tussen label en invoerelement
® Verwijst naar unieke identificatie van invoerelement = id
§ In plaats van input: andere tag
- Textarea: tekstgebied in formulier
- Keuzelijst: <select> en <option>
® <multiple>: meer dan 1 element
® <size>: max # elementen tegelijk afgebeeld
® <selected>: per default geselecteerd
<form>
<textarea name="adresinfo"rows="5"cols="40">N VN Straat 9000GENT</textarea>
Kies een fruit<br>
<select name="fruit" size="1" multiple>
<option value="A">Appel</option>
<option value="P">Peer</option>
<option value="S" selected>Sinaasappel</option>
<option value="K">Kokosnoot</option></select>
</form>
o Structuur geven aan formulier
§ Fieldset: kader rond een aantal formulier-elementen
§ Legend: geeft een naam aan de kader
<fieldset><legend>Kader</legend>
4
,o GUI-elementen
Type=”submit” Submitknop: inhoud omsluitende formulier wordt verstuurd naar
URL uit action-attribuut van het formulier. Value-attribuut verschijnt
als opschrift op de knop
Type=”image” Eigen afbeelding als knop
- Name-attribuut
- Type-attribuut
- Src-attribuut (URL afbeelding)
Volledige inhoud van formulier doorgestuurd zodra op afbeelding
geklikt wordt
Type=”reset” Resetknop: alle onderdelen formulier teruggezet op initiële waarden
(info niet doorgestuurd)
- Value-attribuut: opschrift knop
Type=”text” Tekstveld van 1 lijn
- Value-attribuut: initiële inhoud
- Placeholder-attribuut: suggestietekst
- Size: zichtbare breedte (in lettertekens)
- Maxchars: max aantal karakters (indien groter dan breedte,
wordt veld links/rechts verschoven)
Type=”password” Zelfde attributen als tekstveld en gelijkaardig. Ingetikte lettertekens
worden sterretjes/bolletjes. Let op: wachtwoorden onversleuteld
over net verstuurd
Type=”email” Tekstveld met email-adres. Tekst wordt gecontroleerd of het een
email voorstelt, anders foutbericht.
Type=”url” Tekstveld met URL.
Type=”tel” Tekstveld met telefoonnummer. Hier wordt structuur niet
gecontroleerd door browser.
Type=”checkbox” Element dat aan- of uitgevinkt kan worden. Enkel aangevinkte vakjes
worden doorgestuurd naar webserver.
- Value: default = on
Type=”radio” Radioknop: ~ checkbox maar slechts 1 tegelijkertijd
- Name: indien zelfde naam, behoren ze tot een zelfde groep
- Value
Type=”number” Invoerveld voor getal
- Min
- Max
- Step: getal uit een reeks mogelijke waarden
Type=”time” Invoerveld voor tijdstip: met pijltjes tijd verhogen/verlagen
Type=”date” Invoerveld voor datum: met pijltjes datum aanpassen
Type=”color” Kleur selecteren in popup-venster
5
, <form method="POST"action="http://..."><input type="checkbox"name="veg"> Vegetarisch <br>
<input type="checkbox"name="nrok"checked> Niet-roker <br> <br>
<input type="radio"name="kamer"value="2"checked> 2-persoonskamer <br>
<input type="radio"name="kamer"value="2bad"> 2-persoonskamer met bad<br>
<input type="radio"name="kamer"value="1"> 1-persoonskamer <br>
<br>
<input name="schoenmaat"type="number" min="29" max="50" step="1">
</form>
• Structuur-elementen HTML
<article> Deel van webpagina die afzonderlijke teksteenheid vormt:
nieuwsbericht, artikel, blogpost,…
- Headings
- Alinea’s
<aside> Aanvullende inhoud: citaat
<figcaption> Bijtekst voor figure-element
<figure> Afbeeldingen, video’s, code, songteksten,… aanduiden
<footer> en <header> Voet-/koptekst voor webpagina
<hgroup> Meerdere heading-elementen + ev. andere elementen
<mark> Markeert deel vd tekst
<nav> Menu voor webpagina: meerdere hyperlinks naar andere delen van
webpagina of andere pagina’s
<section> Groeperen
<time> Datum/tijdstip
- Datetime: YYYY-MM-DD (+tijd)
WAT IS HTML5?
• Doel
o Verbeteren HTML-taal
o Ondersteuning multimedia zonder plugin
o Voor webbrowsers en mobiele apps (cross platform)
• Bestaat uit: HTML, XHTML, DOM
• Verwerkingsmodellen
o Interoperabiliteit
o Browsers handelen fouten op zelfde wijze af
• API: complexe webapps
6
