Front-end: HTML, CSS, Javascript

WPFW:

Voor het hoorcollege: doe de voorbereiding.
Tijdens het hoorcollege: achterover zitten.
Tijdens het werkcollege: oefenen (met hulp).
Einde van de dag: inleveren opdracht.
Instructiecollege: opdracht bespreken.

WDPSPR:

Project begint over twee weken

Student, docent, student, samen
Uitzondering: over twee en drie weken is er twee keer per week les
Twee toetsen, eentje halverwege

Waarom zijn er wireframes/mockups?

Communicatie tussen design team en programmeer team

In de juiste volgorde:

Site-map
Wireframe
Mockup
- Mockup is gedetaileerder: kleuren, fonts, text (Lorem ipsum), plaatjes, logos, exacte groottes

Een voorbeeld van een eenvoudige wireframe

https://drive.google.com/file/d/0B-KlAmwJnwOBTnVwLUprVW91d3c/view Lorem ipsum https://www.gloomaps.com/

Doosjes!

Wat doet een programmeur als kennis/ervaring tekort schiet?

de documentatie
- Java: Oracle's JDK documentatie
- C#, ASP.NET Core: Microsoft Docs, vroeger Microsoft Developer Network (MSDN)
- HTML, CSS, Javascript: Mozilla Developer Network, W3Schools, of https://stackoverflow.com/questions/823718/what-are-some-of-the-best-reference-sites-for-html-and-javascript-programming
Google of een Q&A (bijv. Stackoverflow). Kijk naar:
- likes, datum, bron, andere antwoorden, auteur
- datum: Google op link underline color and text color remains en kom hier, of hier of hier.
- auteur: auteur is professor/medeontwikkelaar (soms om reclame te maken, soms partijdig)
de specificatie: vaak enorm gedetaileerd, ingewikkeld en lang.

(note: I am a maintainer of Browserify): https://stackoverflow.com/questions/36224511/requirejs-vs-browserify-vs-webpack-for-js-loading-order-am-i-just-moving-the-si
als een link het niet meer doet: gebruik web.archive
er zijn twee versies van Java, eentje is open-source (OpenJDK) en gratis en de ander (Oracle JDK) niet (maar heeft langere support)
kijk verder dan je neus lang is
jhon skeet googlen kan grappig zijn
specificaties zijn soms honderden paginas lang
q&a kan je ook een betere programmeur maken door te antwoorden
wat is deprecation? waarom? vervangen door iets nieuws, security problemen, andere naam gekregen
https://jsfiddle.net/

Is HTML een programmeertaal? Quizje!

Escape karakters! Code injectie?

Meestal: <tag attribuut1="">...</tag>
Wat betekent UTF-8?
Head: imports en meta-data

Meer dan 95% van de websites gebruikt UTF-8, Unicode Consortium
Doctype is optioneel, wel nodig voor XHTML

Voorbeelden HTML elementen:

Anchor: <a href="https://www.google.com">Klik hier</a>
Tabel: <table> <tr> <th>Fruit</th> <th>Vet</th> <th>KCal</th> </tr> <tr> <td>Appel</td> <td>0.2g</td> <td>52</td> </tr> <tr> <td>Banaan</td> <td>0.3g</td> <td>89</td> </tr> </table>
Plaatje: <img src="plaatje.png" alt="" />. Wat is alt?
Een heleboel...

Categoriseren kan
Trend naar meer semantiek in HTML, en stijl in CSS
- <strong> vs <b>, <emphasis> vs <i>
- <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
- Geen tabel voor layout gebruiken
- Semantic web
Voordelen: vermindering van code-duplicatie, cachen van CSS.

Zie ook opmaak Word: header
Semantiek vs. syntax.
Emmet div#page>div.logo+ul#navigation>li*5>a

Vendor prefixen (zie hier):
```
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 
```
Tegenwoordig zijn experimentele features vaak in te stellen met flags in de instellingen van een browser.
HTML is/was geen XML
Backwards compatibility
Invalide HTML code toegestaan (Robustheidsprincipe).
This specification does not define how conforming user agents handle general error conditions [...] If a user agent encounters an element/attribute/attriute value it does not recognize, it should try to render/ignore/use [...]
— B.1 Notes on invalid documents, HTML 4.01 Specification

Zie 12.2.2 Parse errors in de HTML5 specificatie.

1986: SGML
1993: HTML
1994: World Wide Web Consortium
1998: XML
2000: XHTML
2001: SVG
2014: HTML5

XHTML: een **striktere** vorm van HTML. Hoofdletter-gevoelig, closing-tags, whitespace. Alle XHTML5 is ook valide HTML5. SGML: heel los gedefinieerd, makkelijker om met de hand te typen Polyglot Markup: HTML en XHTML

Een open standaard (HTML, ODT, Unicode) ≈

vastgesteld op basis van een open beslissingsprocedure
beheert door een non-profit organisatie
gepubliceerd en goedkoop
...

vs. een bedrijfseigen (proprietary) standaard (DOC, MP3):

(dure) licentie overeenkomst nodig met bedrijf X
bedrijf X mag alles veranderen in een update
mogelijk niet openbaar gepubliceerd

De facto standaard vs de jure (officieel goedgekeurd door bijvoorbeeld ISO of IEEE) standaard.

Zie Wikipedia voor een lijst met verschillende definities. Andere voorbeelden: PDF recentelijk open standaard. Vaak begint een standaard de facto en daarna de jure (zoals HTML) DOCX: controversieel, 6 duizend pagina's

Steeds meer open standaarden:

De Nederlandse overheid verplicht zichzelf: zie de verplichte lijst en de controle daarop.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe Working draft / Recommendation / Living Standard / Candidate Recommendation Browser compatibility Detecting option support: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support

https://stackoverflow.com/questions/24433640/svg-icons-vs-png-icons-in-modern-web-sites

er is ook hardware acceleration voor svg in chrome

PNG	SVG

Performance: het renderen gaat erg snel, grafische kaart	Performance: het renderen duurt lang, eerst parsen en daarna tekenen. Er zijn trucjes om snelheidswinst te behalen.
Bestandsgrootte: 32kb. In JPG slechts 8kb, maar dat gaat ten koste van de kwaliteit:	Bestandsgrootte: 8kb. Na een minifier slechts 4kb.

Van hier

SVG performance, https://upload.wikimedia.org/wikipedia/commons/9/9e/Complex_sin_abs_01_Pengo.svg

block
none
hidden
inline
inline-block
flex
- flex-direction (row | row-reverse | column | column-reverse)
- flex-wrap (nowrap | wrap | wrap-reverse)
- justify-content (flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe)
- align-items (stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe)
- flex-grow en flex-shrink
- order
- ...
...

Als het goed is hebben jullie https://css-tricks.com/snippets/css/a-guide-to-flexbox/ gelezen

Zie ook W3 Schools, test hier uit, en bekijk de standaard.

Selector	Betekenis
`element`	elementen van naam `element`
`.class`	elementen van klasse `class`
`#id`	elementen met id `id`
`sel.class2`	elementen uit `sel` van klasse `class2`
`sel1 sel2`	elementen uit `sel2` met een ouder uit `sel2`
`sel1,sel2`	elementen uit `sel2` of uit `sel2`
`sel1+sel2`	elementen uit `sel2` direct na een element uit `sel2`
`sel1~sel2`	elementen uit `sel2` na een element uit `sel2`

Bekijk vooral deze oefeningen.

Selector	Betekenis
`[attribute]`	elementen met attribuut `attribute`
`[attribute = "value"]`	elementen waarbij `attribute` gelijk is aan `value`
`[attribute ~= "value"]`	elementen waarbij `value` in `attribute` bevat is als woord
`[attribute ^= "value"]`	elementen waarbij `attribute` begint met `value`
`[attribute \|= "value"]`	elementen waarbij `attribute` begint met `value-`
`[attribute $= "value"]`	elementen waarbij `attribute` eindigt met `value`
`[attribute *= "value"]`	elementen waarbij `value` in `attribute` bevat is
`:checked`	aangevinkte elementen (pseudo-klasse)
`::after`	voeg iets toe aan het einde van het element (pseudo-element), uitleg.

Een uitgebreide CSS taal transpileren naar CSS
, , , ...
Sass vs. scss: compatibiliteit met CSS
Extras:
- Variables
- Nesting
- Modules
- Mixins
- Inheritance
- Math

Transition: div { transition: background-color 0.5s ease; background-color: red; } div:hover { background-color: green; } Animaties: @keyframes bounce { 0%, 100% { font-size: 10px; } 50% { font-size: 12px; } } .box { animation-name: bounce; animation-duration: 4s; animation-iteration-count: 10; animation-direction: alternate; /* of: normal */ animation-timing-function: ease-out; /* of: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* of: backwards, both, none */ animation-delay: 2s; }

SCSS

@use 'base';
$primary-color: #333;
@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}
%givemeborder {
    border: 1px solid #ccc;
    padding: 10px;
}
nav {
    ul {
        @extend %givemeborder;
        color: $primary-color;
        width: 300px / 960px * 100%;
    }
    li {
        color: #000;
        @include transform(rotate(30deg));
    }
}

CSS

nav ul {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
    width: 31.25%;
}
nav li {
    color: #000;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

de <script>-tag: <html> <head> <title>Hello World</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> </head> <body> De melding is: <div id="melding"></div> <script type="text/javascript"> $("#melding").html("Hello World"); </script> </body> </html>
blokkeert de parser, gebruik dus defer of async
crossorigin voor CORS, om errors te ontvangen
integrity voor Subresource integrity (SRI)
nonce tegen XSS
referrerpolicy voor privacy and security
Javascript wordt soms ook in de backend gebruikt! (Node.JS)
Wat is een CDN?

Event-handlers:

Scheiden van GUI en de programmatuur:

<button onclick="f()">Geef de tijd!</button> <script> function f() { alert(Date()); } </script>

Er zijn heel veel events.

Voor <div id="infobox">: getElementById("infobox")
Voor <div class="large">: getElementsByClassName("large")
Voor <title">: getElementsByTagName("title")
Voor algemene CSS-selectors: querySelectorAll("...")
De DOM aanpassen met document.body.append

Sinds 2006
Van de 10 populairste websites, gebruikt 77% jQuery.
Het nut van jQuery wordt steeds kleiner, nu Javascript volwassener wordt
jQuery is nu vooral syntactic sugar:
- Korte namen en $. // met jQuery alert($(el).attr('tabindex')); alert($(el).height()); // zonder jQuery alert(el.getAttribute('tabindex')); alert(parseFloat(getComputedStyle(el, null).height.replace("px", "")));
- Chainable functies $('myDiv').removeClass('off').addClass('on');
Bootstrap tegenwoordig met vanilla JS
http://youmightnotneedjquery.com/

jQuery was er ooit om event handlers makkelijk toe te voegen, en om cross-browser inconsistenties te verminderen

Dit behandelen tegelijk met C# async.

F12 in chrome
CSS validation service
CrossBrowserTesting.com

Nadelen <script>:

De volgorde maakt uit
Twee dezelfde globale variabele namen geven problemen
Niet makkelijk een gedeelte van een bibliotheek te laden (jQuery gebruikt 'plugins')

Niet schaalbaar: voor grote Javascript projecten ontstonden module systemen.

CommonJS // bibliotheek.js const optellen = (x, y) => x + y const vermenigvuldigen = (x, y) => x * y module.exports = { optellen, vermenigvuldigen } // main.js const bibl = require('./bibliotheek.js') console.log(bibl.optellen(3, 4)) Nadeel: tree-shaking moeilijk bij dynamisch laden bibliotheken.
Asynchronous Module Definition (AMD)
Universal Module Definition (UMD)

Voor de client: module loaders (zoals Webpack). Tegenwoordig: ECMAScript Modules Syntax (ESM). // bibliotheek.js const optellen = (x, y) => x + y const vermenigvuldigen = (x, y) => x * y export { optellen, vermenigvuldigen } // main.js import * as bibl from './bibliotheek.js' console.log(bibl.optellen(3, 4))

Waarom zo gedetaileerd kijken naar modules in Javascript? Omdat we bij C# ook gaan kijken naar modules, omdat het heeeeel erg verwarrend kan zijn als je een library wilt importen
Javascript buiten de browser: Node.JS
2006: Node.js kon tienduizenden connecties aan, Apache HTTP Server niet
async vs defer: direct uitvoeren of wachten tot het parsen klaar is
ECMA (de standaard-organisatie voor de specificatie van javascript) kwam pas veel later
UMD is module lader agnostisch

Als je een webpagina vergelijkt met een huis, welke metafoor past dan het best bij HTML en CSS?

HTML als schroevendraaier en CSS als een muur.
CSS als de muren en HTML als bijv. de kleur van die muur.
HTML als de muren en CSS als bijv. de kleur van die muur.
HTML als de muren en CSS als een schroevendraaier.

Als je de structuur van een pagina in Chrome inspecteert, wat zie je dan?

Alle elementen in de structuur zijn zichtbaar op de pagina.
Alle elementen in de pagina blijken rechthoekig te zijn.
Niet alle tekst op pagina is terug te vinden in structuur.
Niet alle elementen in de pagina komen voor in de structuur.

Als je structuur bekijkt, welke uitspraak is dan het beste van toepassing op de geopende <td>?

<td ...> bestaat uit een <font ...>-element.
<td ...> bevat tekst.
<td ...> bestaat uit een <font ...>-element dat tekst bevat.
<td ...> is leeg.

Welke font-size van de links gemarkeerde tekst is van toepassing in CSS?

1
x-small
font-size is onbekend
$0

Welke uitspraak is het meest van toepassing op de geselecteerde regel in de HTML-boom?

De achtergrond is onbekend in class 'surprise' en dus groen.
#first in CSS is gelinkt aan class first in HTML.
- De achtergrond voor element met id 'first' is groen
De achtergrond is onbekend.

Welke uitspraak is het meest van toepassing op de geselecteerde regel in de HTML-boom?

Opmaak van 'div' met id 'first' staat in CSS onder #first.
De 'div' met id 'first' is vierkant.
Er is geen relatie tussen HTML en CSS.
De 'div' met class 'surprise' is vierkant.

Welke uitspraak is het meest van toepassing op de geselecteerde regel in de HTML-boom?

Opmaak van 'div' met class 'first' staat in CSS bij #first.
- De 'div' met id 'first' is vierkant.
Er is geen relatie tussen HTML en CSS.
De 'div' met class 'surprise' is rond.

Wat is het grootste probleem met deze HTML-structuur?

Er zijn geen betekenisvolle namen gebruikt.
Er zit een syntaxfout in de HTML.
De HTML bevat geen beschrijving van de opmaak van de pagina.
In de boom bevat een <div> een andere <div>.

Welke uitspraak is het meest van toepassing op deze HTML-structuur?

Opmaak van <div class="title"> staat in CSS onder .title {}.
Er zit een syntaxfout in de HTML.
Opmaak van <div class="title"> staat in CSS onder #title {}.
Een <div> mag geen andere <div> bevatten.

Welke css-code zorgt ervoor dat de tekst 'titel' rood wordt getoond in de browser?

#titel { color: red; }
.titel { color: red; }
#footer {color: red; }
.footer { color: red; }

Welke css-code zorgt ervoor dat de tekst 'footer' rood wordt getoond in de browser?

#titel { color: red; }
.titel { color: red; }
body {color: red; }
.footer { color: red; }

welke regel in de CSS zorgt ervoor dat alle div's er hetzelfde uitzien?

div {background: green;}
De div's zijn niet hetzelfde (letterkleur verschilt).
.titel {color: red;}
#footer {color: blue;}

Waarom zou je de tag 'div' in <div class="titel">titel</div> vervangen door de tag 'h1'?

Dat heeft geen enkel effect. Niet doen dus.
Zoekmachines gebruiken tags om pagina beter te doorzoeken.
Niet doen, want opmaak van je pagina verandert er niet door.
Niet doen, want zoekmachines hebben daar moeite mee.

Welke beschrijving past het beste bij het attribuut margin?

De ruimt tussen border van element en andere elementen.
De dikte van de rand om de content
De ruimte tussen content en border
De ruimte tussen content en andere elementen.

Welke beschrijving past het beste bij het attribuut padding?

De ruimt tussen border van element en andere elementen.
De dikte van de zichtbare rand om de content
De ruimte tussen content en border
De ruimte tussen content en andere elementen.

Welke beschrijving past het beste bij het attribuut border?

De ruimt tussen border van element en andere elementen.
De dikte van de rand om de content
De ruimte tussen content en border
De ruimte tussen content en andere elementen.

Wat is de breedte van de content (uitgedrukt in pixels)?

18px
5px
1798px
2px

Hoe dik wordt border afgebeeld (uitgedrukt in pixels)?

5px
15px
2px
1798px

Hoeveel ruimte neemt de padding (uitgedrukt in pixels) in beslag?

5px
15px
2px
1798px

Wat zegt deze CSS over een plaatje (img)?

Dat alleen plaatjes van 500px of kleiner worden getoond.
Dat elk plaatje 500px breed wordt getoond.
Dat een plaatje van 800px breed 500px breed wordt getoond.
Dat plaatje alleen wordt getoond als pagina 500px breed is.

Wat is het effect van onderstaande CSS?

Dat ruimte element inclusief padding/border wordt genomen.
Dat ruimte inclusief padding/border/margin wordt genomen.
Dat er een dikke rand om een element wordt getoond.
Dat een element binnen een ander element wordt getoond.

Hoe breed wordt een plaatje (img) van 800px getoond op basis van CSS hieronder?

De helft van de beschikbare ruimte breed (in pixels).
50px
400px
560px

Hoeveel breedte neemt een plaatje (img incl. margin) van 800px in beslag?

520px
560px
500px
540px

div met class 'parent' omvat div met class 'child'. Hoe wordt 'child' binnen 'parent' getoond?

Precies in het midden van div met class 'parent'.
Links in div met class 'parent'.
Bovenaan in het midden van div met class 'parent'.
Met een breedte van 300px.

div met class 'parent' omvat 3 div's met class 'child'. Hoe worden div's met '.child' getoond?

Op 500px brede pagina staan div's 300px breed naast elkaar.
Ze nemen nooit de hele ruimte in beslag.
Op 900px brede pagina zijn div's rechts uitgelijnd.
Op 500px brede pagina staan div's rechts tegen elkaar aan.

div met class 'parent' omvat 3 div's met class 'child'. Hoe worden div's met '.child' getoond?

Op 400px brede pagina worden div's onder elkaar getoond.
Deze div's staan altijd onder elkaar.
Op 900px brede pagina worden div's 300px breed getoond.
Op 400px brede pagina staan div's rechts tegen elkaar aan.

div met class 'parent' omvat 3 div's met class 'child'. Hoe worden div's met '.child' getoond?

Op een 500px brede pagina naast elkaar (in reverse order).
Op een 499px brede pagina naast elkaar.
Op een 500px brede pagina onder elkaar.
Op een 499px brede pagina onder elkaar (in reverse order).

Wat is het effect van de waarde van het attribuut 'alt' bij een image?

Onder het plaatje wordt "Screenshot" getoond.
alt is verplicht (om bij kapot plaatje te kunnen tonen).
alt is een vrijblijvend attribuut en mag weggelaten worden.
Boven het plaatje wordt "Screenshot" getoond.

De broncode van de quizjes-app staat hier.
In de map frontend staan de HTML bestanden.
Maak er wat moois van.
Fork de git repo en stuur de link op naar mij (of stuur een zipje met de nieuwe HTML bestanden).
De beste inzending zal ik als nieuwe front-end gebruiken voor de rest van WPFW.

Volgende week: Bootstrap