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 3
Opdracht Trust: Shopsec 1. Admin (CMS) 2. Editor (naar keuze) 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
Responsive 26
Responsive 27
Responsive 28
Maar responsive wat is het nu? 29
De tags: In HTML <meta name="viewport" content="width=devicewidth; initial-scale=1.0 > In CSS @media only screen and (min-width : 120px) and (max-width : 360px) { { background-color: green; color: yellow; fontfamily: 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
Het mobiele web: Volop in ontwikkeling 36
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 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 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 FOUT! 52
Het mobiele web: kleurcontrast Ook weer meer dan op het gewone web: zorg voor goede kleurcontrasten FOUT! 53
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
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 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: 3D Browsing? 74
Nieuwe technologie: Andere input Spraak Haptics (gebaren) Brain (gedachten) 3D touch Biofeedback.? 75
Vragen? 76