I: Client side technology II: Mobiele web en de toekomst Hoorcollege IUW Thema Web 15 December 2016 Christof van Nimwegen
Laatste college IUW voor de kerstvakantie Deeltoets < > Eindtoets 2
Huishoudelijk In online proeftentamen, vraag 19 hoort niet meer bij komende deeltoets maar bij eindtoets. Donderdag 15 december, dinsdag 20 december en donderdag 22 december is er geen begeleid werkcollege. Jullie kunnen wel gebruik maken van de werkcollegeruimtes in BBG. Vragen kunnen gesteld worden via de email aan de begeleiding. 3
Client side technology 4
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
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 6
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
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) 8
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 9
Simpel Javascript (nog geen DOM) Laat datum zien 10
Simpel Javascript (nog geen DOM) Laat alert box zien 11
Timeout: Nu even opzij naar DOM HTML DOM (Document Object Model) definieert de objecten en eigenschappen van alle HTML elementen, en de methoden om toegang tot ze te krijgen 12
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
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 body title h1 p p <html> <head> <title> </title> </head> <body> <h1> </h1> <p> <b> </b> </p> <p> <a> </a> </p> </body> </html> b a
DOM eigenlijk : DOM definieert deze uitgebreider dan voorheen html head body title h1 p p text text text b text text a attr text text text
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
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
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
DOM: Element (Tabel) veranderen Javascript HTML: Event 20
Belangrijke DOM methoden en properties Chapman & Chapman, tabel 7.1 21
HTML events 22
Javascript: Simpele rekenmachine simplecalculator.html Kort programma Weinig nodig qua DOM Illustreert aantal belangrijke begrippen uit JavaScript 23
Javascript + HTML: Simpele rekenmachine Input via knoppen met onclick attribuut Roepen functies aan appendtonumber() add() total() clear() Resultaat wordt getoond in <p id= result > 24
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 25
On the rise: Javascipt games 26
On the rise: Javascipt games 27
Deel II: Het mobiele web en de toekomst
Mobiel web: Smaller display s- Google Glass 29
Het mobiele web: Volop in ontwikkeling 30
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! 31
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. 32
Het mobiele web Mobiel? Wifi Mobiel netwerk Browsen of apps? Apps worden meer gebruikt Maar vaak voor 1 e 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 33
Het mobiele web: app vs. webpagina APP WEB 34
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 35
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 36
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 37
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. 38
Het mobiele web: hoe touchen we? 39
Het mobiele web: hoe touchen we? 40
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!!! 41
Het mobiele web: image afmetingen Beter geen images dan te kleine images 42
Het mobiele web: minder tekst 43
Het mobiele web: minder tekst 44
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 45
Het mobiele web: Stijl van elementen Nog belangrijker dan op gewoon web: Interactieve elementen andere stijl dan informatie elementen FOUT! 46
Het mobiele web: kleurcontrast Ook weer meer dan op het gewone web: zorg voor goede kleurcontrasten FOUT! 47
Het mobiele web: button-look Laat zaken die GEEN button zijn er ook niet zo uitzien 48
Het mobiele web: Respecteer conventies Tussen platforms: 49
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 50
Het mobiele web: inklappen/uitklappen 51
Het wordt anders (duh..) WEB niet genoeg als term? Internet of Things (IOT)? 52
Zoiets? 53
The man himself.. 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. 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 54
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 55
Toekomst WWW? In elk geval.. Nog: groter meer responsiveness meer immersion nog meer ubiquitous mobieler onzichtbaarder socialer sneller meer interactie modaliteiten.. 56
Toekomst WWW, enkele issues.. Misbruik overheden Criminele acticiviteiten Privacy Pas op voor meer lostness Wat doet de snelheid? Effecten van zoveeeeeeeeel multimedia?..? 57
Nieuwe technologie op WWW? Spraak Haptics (gebaren) Biofeedback Brain (gedachten) 3D touch, 3D browsing Augmented Reality (AR) Andere materialen Virtual reality (VR).? 58
Technologie verandert, design dan ook 59
Nieuwe Technologie: electronic paper 60
Nieuwe Technologie: electronic paper Hoe ontwerpen we hiervoor? 61
Of dit? 62
Nieuwe Technologie: Small display- Vorm? 63
Nieuwe Technologie: Large displays 64
Nieuwe Technologie: Transparente displays 65
Nieuwe Technologie: Holografisch 66
Nieuwe Technologie: olfactoy displays 67
Nieuwe Technologie: Conversational interfaces 68
Nieuwe Technologie: Conversational interfaces 69
Nieuwe Technologie: 3D Browsing? 70
Virtual reality > WebVR 71
WebVR http://tinyurl.com/hgwmucs 72
WebVR: Met smartphone 73
WebVR 74
Augmented reality (more of it?) 75
Veel succes met de tussentoets! Prettige kerstvakantie! 76