Inloggen bij een webshop: sociale login of blijf je liever te gast?
I: Client side technology II: Het mobiele web en de toekomst 15-16/materiaal/colleges... ·...
76
I: Client side technology II: Het mobiele web en de toekomst Hoorcollege IUW Thema Web 26 november 2015 Christof van Nimwegen
Transcript of I: Client side technology II: Het mobiele web en de toekomst 15-16/materiaal/colleges... ·...
I: Client side technology
II: Het mobiele web en de toekomst
Hoorcollege IUW
Thema Web
26 november 2015
Christof van Nimwegen
Opdracht Trust: Shopsec!
Niet “from scratch”, te ver qua coderen, te lang, te moeilijk
Nadelen remote hosting, CMS (mijnwinkel.nl, wordpress):
Rechtsreeks aanpassen van code lastig of onmogelijk
men kan winkel sluiten of weghalen: minder controle
Hierom: Dummy webwinkel die jullie gaan vormgeven en
invullen. Niet alles is tweakable: demonstreer (trust) idee
Hosting: op www-ruimte UU-server, alleen jullie kunnen
erbij
Controle over alles, de code is daar.
Beperkingen: Login/registratie. Betalen, Bevestigingsmails
Download zipfile (morgen beschikbaar)
2
Opdracht Trust: Shopsec
1. Admin (CMS)
2. Editor (naar keuze)
4
5
JavaScript
WWW was geheel statisch
Javascript: binnen webpagina
Betrekkelijk eenvoudige scripting taal
syntax lijkt op veel andere talen
Net als PHP geïnterpreteerd, niet gecompileerd
Aanvankelijk vaak niet-functioneel ingezet
Ga zelf met JavaScript aan de slag!
W3Schools tutorial (http://www.w3schools.com/)
Veel handige resources (voorbeelden, naslag)
5
6
JS vandaag: In Web API, Mashup, AJAX
AJAX: Asynchronous JAvaScript and XML
Paginas hoeven niet geheel ververst te worden: een applicatie die in pagina draait
(Web) API (application programming interface): Definitie van hoe een webapplicatie door andere partijen benaderd kan worden
Mashup: Combineren van allerlei bronnen (bv. API’s) in een webpagina
Javascript: wat kan het?
Client side (van oudsher): Reageren op Events
Event voorbeelden: Pagina klaar met laden, Clicks,
mouseovers, mousedowns, onsubmit, etc., Data validatie
Reageren:
Content veranderen, verangen (tekst, afbeeldingen,
tabellen, etc.)
Geluid spelen, popups, dialogen
Systeem informatie tonen (bv. tijd), rekenen
Nog veel meer!.............…….
Javascript werd pas echt interessant toen DOM wijder
verbreid werd
7
8
Wat zit er in JavaScript
Variabelen en expressies typen: Number, String, Array (index, length), Object etc.
booleans: true/false
operaties op variabelen
assignment: toekenning waarde aan variabele
Statements conditional statement (if)
loop (while, for)
Functies en objecten: bewerkingen
Ingebouwd in JavaScript, bv.:
alert() - laat alertbox zien
Number() – converteert string naar number (zien we in vb. later)
zelfgedefinieerd
Commenting: essentieel voor begrijpen door anderen (en jezelf)
9
Waar laten we het?
In principe overal in HTML toegestaan
Goede oplossing: in aparte file
Script wordt uitgevoerd zodra browser script element tegenkomt
Niet zo elegant
Als het moet…
Beter
Timeout: Nu even opzij naar DOM
12
HTML DOM (Document Object Model) definieert de
objecten en eigenschappen van alle HTML elementen,
en de methoden om toegang tot ze te krijgen
DOM: Document Object Model
Kwam een paar jaar na JavaScript, wordt erg
veel gebruikt meestal, in combinatie met
JavaScript
Vooral veel gebruikt in, en sinds Web 2.0
De manier waarop HTML elementen in een
pagina zich tot elkaar, en tot het document zelf
verhouden
Zorgt dat programmas en scripts op dynamische
wijze toegang krijgen om inhoud, structuur of
style van een document te veranderen
Platform onafhankelijk
13
14
Objecten
Voorbeeld
een kat is een object
kleur is een property (eigenschap) die katten hebben met in dit geval een waarde (grijs)
eten is een methode die de kat gebruikt
Eigenschappen en acties van objecten worden altijd aangeroepen met een punt. Stel o is een object, dan:
is o.p de waarde van de property p
voer je de methode m uit met de aanroep o.m()
voorbeeld
kat.kleur heeft waarde ‘grijs’
kat.eten(): de kat voert de bewerking ‘eten’ uit
kat.eten(‘muis’)
14
DOM boom
Dit was de HTML boom tot nu toe
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p> <b>…</b> </p>
<p>
<a>…</a>
</p>
</body>
</html>
html
head body
title h1 p
a b
p
DOM eigenlijk…:
html
head body
title h1 p
a b
p
text text
text text
attr text text text text
DOM definieert deze uitgebreider dan voorheen
DOM Nodes: knopen
In een “node tree” wordt de hoogste node de “root” genoemd
Elke knoop heeft precies 1 “parent” (behalve de bovenste dus)
Een knoop kan meerdere “children” hebben
Een node zonder children is een “leaf”
Nodes met dezelfde parent zijn “siblings”
17
18
Vb. DOM/Javascript: getElementById
Stel dit is de tabel (mijntable) waarmee JS iets mee moet gaan
doen via een functie, bv. “change” :
In JS maak ik de functie “change”.
Ik maak variabele “table”: JS benadert via getElementById “mijntable”:
Ik definieer de opdracht: wat gaat er gebeuren met de table?
18
19
HTML attributes: van event naar actie
HTML events, bv.: load: pagina geheel geladen
click: muisklik op element
mouseover: muis beweegt over element
submit: formulier gesubmit
……
HTML attributen “on” + eventnaam waarde: functie (scriptcomponent) die uitgevoerd wordt bij event voorbeeld:
<input type="submit" onclick="change();" value="Extra rij“>
bij klikken op deze button wordt functie “change” uitgevoerd
19
Belangrijke
DOM
methoden en
properties
21
Chapman & Chapman, tabel 7.1
HTML events
22
23
Javascript: Simpele rekenmachine
simplecalculator.html
Kort programma
Weinig nodig qua
DOM
Illustreert aantal
belangrijke begrippen
uit JavaScript
24
Javascript + HTML: Simpele rekenmachine
Input via knoppen met onclick attribuut
Roepen functies aan
appendToNumber()
add()
total()
clear()
Resultaat wordt getoond in <p id=“result”>
25
Bottom-up
Ontwerp HTML speciaal: welke id en class waarden heb je nodig, op
welk elementen
Maak CSS
Laatste stap: JavaScript plan welke functie(s) je nodig hebt
bouw ze stapsgewijs op
zorg altijd dat je code werkt voor je verder gaat
Professioneel scripten is een vak op zich rekening houden met allerlei browsers, versies etc.
kennis libraries, toolboxen, frameworks…
meer hierover bij vak Webtechnologie
Responsive
26
Responsive
27
Responsive
28
Maar…responsive…wat is het nu?
29
De tags:
In HTML
<meta name="viewport" content="width=device-
width; initial-scale=1.0”>
In CSS
@media only screen and (min-width : 120px) and
(max-width : 360px) {
{ background-color: green; color: yellow; font-
family: Arial,Helvetica; }
}
30
Zoek het op!
31
Bv. Bootstrap (developped @ Twitter)
Is een keuze, er is ook
Skeleton, Foundation,
Goldilocks, etc.
Mobile first
Frontend!!
Client side
32
Dreamweaver
33
Deel II:
Het mobiele web
en de toekomst
Hoorcollege IUW
Thema Webdesign
19 november 2014
Christof van Nimwegen
Mobiel web: Smaller display’s- Google Glass
35
36
Het mobiele web: Volop in ontwikkeling
WWW: web browsing anno nu
“We don't go online anymore. We're
already there”
Overal: mobility!
Meer tablets dan phones
Meer en meer: geo, social
Ondanks de apps: webbrowsen blijft de
populairste manier om content te bekijken
Dus er zullen websites zijn!
37
Het mobiele web
Sinds een paar jaar kopen we meer smartphones dan
computers/laptops
(nog) het meeste gebruikt door jonge mensen
De spelers
Android
iOS
Windows Phone
Blackberry
ach….
38
Het mobiele web
Mobiel?
Wifi
Mobiel netwerk
Browsen of apps?
Apps worden meer gebruikt
Maar vaak voor 1e entry mobile browser, men wil niet voor
alles, of eenmalige zaken een app installeren
We hebben het hier dus over web pages in browsers
Niet voor alles is een app, en ook niet voor elk OS
39
Het mobiele web: app vs. webpagina
APP
WEB
40
Het mobiele web: voordelen browser
Voordelen
Werkt op alle mobiele apparaten
Minder opslagruimte nodig om iets te bekijken/gebruiken
OS onafhankelijk (let wel op browsers)
Geen gedoe met updates
Geen publish kosten
Goedkoper om te maken / te onderhouden
Verzamelt minder informatie over JOU
Nadelen
Browser verschillen (uiteraard)
Iets langere weg (url typen, bookmark opzoeken)
Toch minder mogelijk, met name hardware
41
Het mobiele web: fysieke factoren
Daglicht, spiegeling
Beweging
Afmeting
Klein toetsenbord, grote vingers,
denk aan grote buttons, selectors, typen
Tekst grootte
Geluid anders gebruiken (omgeving)
Input: touch
Vaak in verloren momenten: weinig tijd, dus Usability
NOG belangrijker
……
42
Mobiele web: nieuwe dingen exploiteerbaar!
Smartphone heeft (vaak):
Camera(‘s)
GPS
Touch
Bewegings sensors
RFID
NFC
…
Vanuit webpagina’s nog beperkt mogelijk, maar dat zal
veranderen
43
Het mobiele web: software/netwerk factoren
Laadtijd door tragere connectie: zo klein mogelijke
images
Browser verschillen
Responsive design, verschillende devices (altijd weer)
“Selectie” tools: pas ermee op
Geen Flash
Orientatie, meer verticale menus
Geen tabbed browsing (niet echt)
Geen popups
m-dot websites: waarschijnlijk aan het eindigen
…….
44
Het mobiele web: hoe “touchen” we?
45
Het mobiele web: hoe “touchen” we?
46
Het mobiele web: richtlijnen Ontwerp voor minder data
Liever tekst-links
Geen Flash, Java, Frames and Pop Ups
Geef toch ook toegang aan gehele site
Zet zelden gebruikte buttons ver weg van
de rest (touch gaat vaak fout)
Vaak gebruikte knoppen en actie knopen moeten
makkelijker te bedienen zijn
Android: pas op met buttons in de
buurt van phone buttons
Denk aan batterylife
Emulators!!!
47
Het mobiele web: image afmetingen
Beter geen images dan te kleine images
48
Het mobiele web: minder tekst
49
Het mobiele web: minder tekst
50
Het mobiele web: we swipen!
Maar scroll bars
willen we niet. Geef
affordance over
swipen, bv. Door
indicatie dat er links
of rechts nog meer is
51
Het mobiele web: Stijl van elementen
Nog belangrijker dan op
“gewoon” web:
Interactieve elementen
andere stijl dan
informatie elementen
52
FOUT !
Het mobiele web: kleurcontrast
Ook weer meer dan
op het gewone web:
zorg voor goede
kleurcontrasten
53
FOUT !
Het mobiele web: button-look
Laat zaken die
GEEN button zijn
er ook niet zo uitzien
54
Het mobiele web: Respecteer conventies
Tussen platforms:
55
Het mobiele web: Nog meer CSS3!
Bv.: ronde hoeken (kan in
CSS3) geven een “knop”
gevoel, zonder dat je lastige
achtergrond images nodig
hebt
Drop shadows (ook CSS3)
helpt voor button gevoel
56
Het mobiele web: inklappen/uitklappen
57
Het wordt anders (duh..)
WEB niet genoeg als term?
Internet of Things (IOT)?
58
Het wordt anders
59
Zoiets?
60
“A radically open, egalitarian and decentralised platform, it is changing the world, and we are still only scratching the
surface of what it can do.”
The man himself…..
“Very soon, millions more sensors, appliances and other devices large and small will take the web to new places. The potential
excites me and concerns me at the same time”
61
WEB evolutie
Web 1.0: documenten
Web 2.0: mensen
Web 3.0: Kennis, betekenis
van data
Semantic Web
Cloud, big data
Internet of things
62
Toekomst WWW? In elk geval….. Nog:
groter
meer responsiveness
meer “immersion”
nog meer “ubiquitous”
mobieler
onzichtbaarder
socialer
sneller
meer interactie modaliteiten
…..
63
Toekomst WWW, enkele issues…..
Misbruik overheden
Criminele acticiviteiten
Privacy
Pas op voor meer lostness
Wat doet de snelheid?
Effecten van zoveeeeeeeeel multimedia?
…..?
64
Technologie verandert, design dan ook
65
Nieuwe Technologie: electronic paper
66
Nieuwe Technologie: electronic paper
Hoe ontwerpen we hiervoor?
67
Of dit?
68
Nieuwe Technologie: Small display- Vorm?
69
Nieuwe Technologie: Large displays
70
Nieuwe Technologie: Transparente displays
71
Nieuwe Technologie: Holografisch
72
Nieuwe Technologie: olfactoy displays
73
Nieuwe technologie: Andere input
Spraak
Haptics (gebaren)
Brain (gedachten)
3D touch
Biofeedback
….?
75
Vragen?
76
