-
Laad het font bestand in:
@font-face { font-family: "icons"; src: url("fonts/icons.eot"); src: url('fonts/icons.eot?#iefix') format('embedded-opentype'), url("fonts/icons.woff") format("woff"), url("fonts/icons.ttf") format("truetype"), url("fonts/icons.svg#icons") format("svg"); font-weight: normal; font-style: normal; } -
Selecteer het font als de klasse icon- bevat:
[class*="icon-"]::before { content: '+'; display: inline-block; font-family: "icons" !important; line-height: 1; position: relative; top: 2px; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }
-
Voor zoekmachines en screenreaders:
.hide { clip: rect(1px, 1px, 1px, 1px); height: 0; opacity: 0; position: absolute; visibility: hidden; width: 0; } -
Geef het karakter een zinvolle naam:
.icon-twitter::before { content: "t"; } -
Zo voegen we het pictogram toe:
<a href="http://www.twitter.com/" class="icon-twitter"> <li class="hide">Twitter</li> </a>
- Dyslectici gebruiken soms andere fonts
- Screenreaders kunnen geen pictogrammen voorlezen
- Een Wifi (WLAN) frame wordt omgezet in een ethernet frame in een router
- Met connection-keepalive wordt dezelfde tcp connectie gebruikt voor meerdere HTTP
- Matroesjka poppen
- Het websocket protocol is weer anders
- Details: http://web.deu.edu.tr/doc/oreily/networking/firewall/ch06_03.htm
- TCP is stream-georienteerd, dat mismatched met IP packets
- UDP is alternatief voor TCP, heeft geen handshake is meestal iets sneller, TCP is handiger 'als er veel connecties zijn'
- IPv6 is nieuwere variant van IPv4
- In de applicatie laag wordt naast HTTP ook bijv. MQTT (IoT), TLS/SSL, DNS en POP (email) gebruikt
- Link laag / Netwerk laag / Transport laag / Applicatie laag
- HTTPS wordt nog uitgebreid behandeld later, daarin wordt een TLS verbinding tot stand gebracht met daarop een HTTP
- Request methode en url
-
HTTP methoden: GET, POST, PUT, DELETE, HEAD, CONNECT, OPTIONS, ...
- GET hoort niets aan te passen serverside (waarom niet?)
- PUT en DELETE worden niet zoveel meer gebruikt
- CONNECT om te switchen naar HTTPS
- OPTIONS om CORS te gebruiken
- Request Headers
-
Body
- De
Content-Type bepaald hoe de body geinterpreteerd wordt, volgens de MIME standaard. Voorbeelden: json, xml,
- De
- Prefetch
- Bots
- Caching
Waarom?
- analytics
- logging
- bots
Gevaarlijk: zie dit. Oplossing:
- Referrer-Policy HTTP header
- referrer meta tag
- Referer had eigenlijk Referrer moeten zijn
- Ik heb de voorbereiding geheel gedaan
- Ik heb de voorbereiding gedeeltelijk gedaan
- Ik ben de voorbereiding niet begonnen
- bootstrap.min.js vs bootstrap.bundle.min.js
- CSS en JS
/bootstrap.min.js vshttps://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js
- Bootstrap hangt af van Popper en jQuery. jQuery zit niet in de bundel!
- Proxy = tussenpersoon, een CDN kan ook private zijn! CDN = geographisch gedistribueerd netwerk van proxy servers en data centers. Scripts/styles zijn statische content. Alles gaat om performance. Azure CDN / Google Cloud CDN / Amazon Cloudfront
- Wie kan de code op https://wpfw.imfast.io/vieropeenrij.html zo klein mogelijk maken?
- De werking van het programma is hetzelfde
- De grootte van het bestand wordt kleiner
- Soms: obfuscatie
- https://github.com/pocketjoso/sudokuJS
- https://jonassebastianohlsson.com/sudoku/
- online minifier: https://javascript-minifier.com/
- https://github.com/jed/140bytes/wiki/Byte-saving-techniques
- https://stackoverflow.com/questions/4292146/good-resources-for-extreme-minified-javascript-js1k-style
- source map
- zet hier de groottes bij in kb
- Elke browser/OS heeft haar eigen default, bekijk deze website.
- Deze defaults staan in de broncode van de browser.
-
Twee mogelijke oplossingen
- CSS Reset: voorbeeld.
- CSS Normalize: normalize.css of reboot (in Bootstrap).
- Bekijk normalize.scss in de website van de HHS.
Volgorde (cascading order):
- User Agent stylesheet
- Extern:
<link ...> of@import ... - Embedded:
<style>...</style> - Inline:
<p style="...">
Specificiteit:
- De selector met de meeste ID selectors gaat voor, bij gelijkspel:
- de selector met de meeste [(pseudo-)class selectors + attribuut selectors] gaat voor, bij gelijkspel:
- de selector met de meeste (pseudo-)element selectors gaat voor, bij gelijkspel:
- de laatst-gedefineerde stijl gaat voor.
Dit is een 'specificiteit calculator'.
Wat voor soort frameworks zijn er?
- Front-end en back-end is scheiding op basis van seperation of concerns
- Vooruitblik 3-lagen architectuur: presentatie laag, applicatie laag, database laag
- Client-side en server-side is fysieke scheiding. Server-side frameworks genereren HTML.
- Een puur CSS / CSS + JS / gedeeltelijk server-side framework.
Front-end frameworks/technologieen:
- Bootstrap: puur CSS of CSS + JS (+ jQuery!).
- Foundation: puur CSS of CSS + JS.
- Bulma: puur CSS
- Razor / Blazor
- React: slim
render() , zie JSX en babel. - Vue
- Angular
Waarom? Leesbare onderhoudbare code, responsiveness. Soms: herbruikbaarheid componenten.
- WPFW: FW = framework, normaal is de afkorting WF = web framework
- Misschien is dit nu hocus pocus, later bekijken we deze exacte slide nog een keer, maar dan in de les CSHTML of in de les architectuur
- Context: wat is er nog meer?
- Technologieen breeder dan framework
- Soms staat Bootstrap niet in het lijstje tussen de front-end frameworks, typ "back end frameworks" in Google in en krijg Bootstrap
- Zo min mogelijk DOM manipulaties
- Bootstrap door Twitter bedacht, React door Facebook. Geschreven in SASS (Syntactically Awesome Style Sheets)
- Bootstrap wordt gebruikt door een op de vijf webistes.
- Angular door Google
- Transpileren
- Vooral niet functionele systeemeisen.
Probleem:
Zie ook dit.
- Mobile-first
- HHS timetable
- 4K schermen
Oplossingen:
- CSS eenheden: absoluut (cm, in, px, pt) vs relatief (em, vw, %)
-
Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Flexbox
-
Media Queries: in CSS
@media only screen and (max-width: 600px) { body { background-color: lightblue; } } of bij het laden van CSS<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css"> Zie ooklight-level eninverted-colors enscripting . - Bootstrap, of een ander front-end framework
- Test verschillende groottes met de developer tools!
- Een responsive layout
- Extra voor-gedefinieerde componenten
- Syntactic sugar: korte namen
- Content: tabellen, code, figuren met onderschriften
- Layout vs design: een layout beschrijft hoe de onderdelen worden gepositioneerd
- navbars, modals
- Dit worden 'utitilies' genoemd in Bootstrap
We kennen al:
- de CSS stijl eigenschap
position - de CSS stijl eigenschap
display : grid, flexbox
In bootstrap:
- De
container zorgt voorpadding en voor een 'vaste' breedte, gecentered. - Het grid-systeem met
row encol-..-.
- Zie deze tabel.
- Voor een consistente layout is het wel handig overal Bootstrap te gebruiken.
Niet zelf het wiel opnieuw uitvinden!
- Alerts
- Jumbotron
- Navbar
- Carousel
- Button group
- Etc.
Houd continu rekening met slechtzienden:
- gebruik semantische HTML elementen
- gebruik headers
- aria-attributen
- alternatieven voor iconen/plaatjes
- met Javascript en setTimeout?
-
SMIL
-
Although Chrome 45 deprecated SMIL in favor of CSS animations and Web animations, the Chrome developers have since suspended that deprecation.
- Edge tot 2020 geen ondersteuning, nu gedeeltelijk
- Polyfillers als fakesmile.
-
welk attribuut is ingesteld voor child 3?
- padding: 10px;
- margin: 10px;
- border-width: 10px;
- margin: -10px;
welk attribuut is ingesteld voor child 2?
- padding: 10px;
- margin: 10px;
- border-width: 10px;
- margin: -10px;
Stel: tekst past niet in de ruimte die beschikbaar is voor een div. Hoe maak je div scrollable?
- border-width: 10px;
- margin: 10px;
- padding: 10px;
- overflow: auto;
Hoe wordt div met class parent op een telefoon met normale oriëntatie en 400px breed getoond?
- Met witte achtergrond.
- Met default achtergrond.
- Met blauwe achtergrond.
- Dat kan met deze gegevens niet worden bepaald.
Hoe wordt div met class parent op een gekantelde telefoon en 400px breed getoond?
- Met witte achtergrond.
- Met default achtergrond.
- Met blauwe achtergrond.
- Dat kan met deze gegevens niet worden bepaald.
Wat is het effect van het opnemen van een link in je HTML naar 'normalize.css'?
- HTML wordt in alle browsers op alle apparaten gelijk getoond
- Alle plaatjes worden even groot afgebeeld.
- De verhoudingen van plaatjes worden genormaliseerd.
- HTML wordt kleiner gemaakt, zodat het helemaal wordt getoond
Welke class in 12-koloms-framework (met col-1 t/m col-12 en row) is van toepassing op child 1?
- col-2
- col-8
- row
- col-12
Welke class in 12-koloms-framework is van toepassing op de parent van child 1 t/m 3?
- col-2
- col-8
- row
- col-12
Welke class in Bootstrap is op een normale telefoon toegepast op de parent van child 1 t/m 3?
- row
- col-md
- col-sm
- col-xs
Welke class in Bootstrap is op een normale telefoon toegepast op div met tekst child 1?
- col-xs-2
- col-md-2
- col-sm-2
- col-lg-2
Wat is het effect van het minimized opslaan van CSS of JavaScript?
- Dat het bestand wordt gezipped.
- Dat het veel moeilijker leesbaar wordt.
- Dat het bestand met CSS of JavaScript groter wordt.
- Dat file met CSS/JavaScript meer downloadtijd nodig heeft.
Hoe refereer je in HTML aan een minimized version van je CSS-file /css/boostrap.css?
- <link rel="stylesheet" href="/css/bootstrap.min.css">
- <link rel="minimized" href="/css/boostrap.css">
- <link rel="minimized" href="/css/bootstrap.min.css">
- <link rel="stylesheet" href="/css/minimized.css">
Wat ontbreekt er in de volgende code in de body (lees classes als verwijzing naar Bootstrap)?
- De verwijzing in <body> naar Bootstrap.
- <link rel="minimized" href="/css/boostrap.css">
- div met class 'container' (in de DOM direct onder <body>.
- <link rel="stylesheet" href="/css/minimized.css">
Hoe zorg ik dat plaatje hieronder zich m.b.v. Bootstrap responsive aanpast aan de breedte?
- Door aan <img...> 'style="max-width: 400px;"' toe te voegen.
- Door aan <img...> 'class="img-responsive"' toe te voegen.
- Door aan <img...> 'style="display: flex;"' toe te voegen.
- Door aan <img...> 'style="height: auto;" toe te voegen.
Hoe zorg ik dat alle tekst hieronder met één wijziging rechts wordt uitgelijnd?
- Door '<div class="col-md-6 text-right">' uit te breiden.
- Door '<h1 class="text-right">' uit te breiden.
- Door aan '<div...>' 'class="text-right"' toe te voegen.
- Door '<h3 class="text-right">' uit te breiden.
Als je div met class 'eigen-opmaak' op wilt maken, welk attribuut definieer je dan als eerste?
- background-color
- De volgorde van attributen maakt nauwelijks iets uit.
- margin en padding
- font styles
Wat is de achtergrondkleur van een div met class 'tweede'?
- black
- red
- yellow
- blue
Wat is de achtergrondkleur van een div met class 'tweede'?
- Dat kan op basis van deze code niet worden bepaald.
- white
- De default color.
- red
In welke file leg je opmaak van de div met class 'eigen-opmaak' vast (kies het beste antwoord)?
- In de file 'css/bootstrap.css'
- In de file 'css/bootstrap.min.css'.
- In een eigen file (bijv. 'style.css') in directory 'css'.
- in HTML-file in head met tussen tags voor '<style>'.
Als je Bootstrap-classes wilt overloaden in style.css. In welke volgorde neem je <link ...> op?
- <link href="style.css"> na <link href="bootstrap.css">.
- <link href="bootstrap.css"> na <link href="style.css">.
- De volgorde maakt niet uit.
- Je kunt classes in bootstrap.css niet overloaden.
Welke extra file heb je nodig om Modal Popup van Bootstrap te kunnen tonen?
- Bootstrap maakt daarvoor gebruik van jquery.min.js.
- De css van Bootstrap is noodzakelijk.
- Je moet zelf nog een regel code schrijven voor modal popup.
- Er zijn geen extra files nodig om deze popup te tonen.
De Webplanner van de Haagse Hogeschool is een goed voorbeeld van een erg slechte front-end. Herontwerp de website eerst in een wireframe, en daarna in Bootstrap.
Wat is er bijvoorbeeld allemaal mis?
- de website is nu niet responsive (ooit op je mobiel het rooster proberen te bekijken?). Gebruik de Chrome DevTools om de website te bekijken vanaf je mobiel.
- de website vrijwel onmogelijk met een screenreader te gebruiken.
- het stappenplan in de gele balk doet waar hij zin in heeft
- het ontwerp is onnodig ingewikkeld: waarom zit er onder de gele tips een slider waarmee je de grootte van de banner kunt aanpassen? Het aanmaken van een filter (groene knop naast "Geen filter toegepast") is onnodig ingewikkeld.
Gebruik namaak-data als voorbeeld in de website, dus je hoeft niet gebruik te maken van de API van WebPlanner. Maak gebruik van een container, rows met cols en zorg dat er van de volgende componenten tenminste 1 wordt gebruikt:
- ...
Uitdagende mogelijkheden tot uitbreiding...