Deel I: Client side technology. Interactie via DOM. Hoorcollege IUW Thema Webdesign 19 november 2014 Christof van Nimwegen

Transcriptie

1 Deel I: Client side technology Interactie via DOM en JavaScript Hoorcollege IUW Thema Webdesign 19 november 2014 Christof van Nimwegen

2 Over laatste werkcollege en opdracht Error reporting van de server in het practicum, probeer de volgende workaround: plaats bestand met naam.htaccess in je www-directory met daarin tekst "php_flag display_errors on" Video probleem: alleen vanaf (deze) server wil Firefox het niet. We checken dit met Chrome of Opera 2

3 JavaScript WWW was geheel statisch, interactie was alleen volgen van link Javascript maakt interactie binnen webpagina mogelijk Javascript is quick and dirty ontstaan, steeds serieuzer geworden Betrekkelijk eenvoudige scripting taal syntaxis lijkt op veel andere talen pragmatisch, met beperkingen Net als PHP geïnterpreteerd, niet gecompileerd Aanvankelijk vaak niet-functioneel ingezet Javascript Is NIET Java Ga zelf met JavaScript aan de slag! W3Schools tutorial ( Veel handige resources (voorbeelden, naslag) 3

4 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 4

5 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 5

6 Wat zit er in JavaScript Variabelen en expressies typen: Number, String, Array (index, length), Object etc. booleans: true/false gebruikelijke operaties op constanten en 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 Commentaar essentieel voor begrijpen door anderen (en jezelf) 6

7 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 7

8 Simpel Javascript (nog geen DOM) Laat datum zien 8

9 Simpel Javascript (nog geen DOM) Laat alert box zien 9

10 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 10

11 DOM: Document Object Model Kwam een paar jaar na JavaScript, wordt erg veel gebruikt meestal, in combinatie met JavaScript 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 11

12 Document Object Model W3C standaard sinds 1998 (level 1) lijkt sterk op elementboom XML Vooral veel gebruikt in Web 2.0 DOM scripting is gebaseerd op interactie van objecten in principe bekend van imperatief programmeren Een DOM object heeft properties (eigenschappen met een bepaalde waarde) methoden (verzameling bewerkingen) 12

13 Objecten (geheugensteuntje) 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 van 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 ) kat.eten( blik ) 13

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

15 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

16 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 16

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 17

18 HTML atributes: van event naar actie HTML events load: pagina geheel geladen click: muisklik op element mouseover: muis beweegt over element submit: formulier gesubmit reset: formulier gereset 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 18

19 DOM: Element (Tabel) veranderen Javascript HTML: Event 19

20 Belangrijke DOM methoden en properties Chapman & Chapman, tabel

21 HTML events 21

22 Javascript: Simpele rekenmachine simplecalculator.html Kort programma Weinig nodig qua DOM Illustreert aantal belangrijke begrippen uit JavaScript 23

23 Javascript: Simpele rekenmachine - HTML Input via knoppen met onclick attribuut Roepen functies aan appendtonumber() add() total() clear() Resultaat wordt getoond in <p id= result > 24

24 Collapsible list turndown.html ook in zip file bron: Chapman & Chapman eenvoudig voorbeeld illustreert samenwerking HTML-CSS-JS Zelf mee experimenteren! 25

25 Bottom-up ontwerp HTML speciaal: welke id en class waarden heb je nodig, op welk elementen maak CSS speciaal: tonen/verbergen elementen laatste stap: JavaScript plan welke functie(s) je nodig hebt bouw ze stapsgewijs op zorg altijd dat je code werkt voor je verder gaat kom je in de problemen, dan is dat vaak een reden om het hoog-niveau ontwerp te herzien 26

26 Waarschuwingen JavaScript is een geïnterpreteerde programmeertaal maakt debugging lastig een script met fouten wordt niet uitgevoerd Firebug, andere tools Professioneel scripten is een vak op zich rekening houden met allerlei browsers, versies etc. kennis libraries, toolboxen, frameworks security meer hierover bij vak Webtechnologie 27

27 Responsive 28

28 The first. 29

29 Maar responsive wat is het nu? 30

30 Dus alles flexibel! 31

31 DE tags: In HTML <meta name="viewport" content="width=devicewidth; initial-scale=1.0 > In only screen and (min-width : 120px) and (max-width : 360px) { { background-color: green; color: yellow; fontfamily: Arial,Helvetica; } } 32

32 Zoek het op! 33

33 Bv. Bootstrap Twitter) Is een keuze, er is ook Skeleton, Foundation, Goldilocks, etc. Mobile first Frontend!! Client side 34

34 Dreamweaver 35

35 Wordpress 36

36 Deel II: Het mobiele web en de toekomst Hoorcollege IUW Thema Webdesign 19 november 2014 Christof van Nimwegen

37 Mobiel web: Smaller display s- Google Glass 38

38 Veel.. 39

39 Het mobiele web: Volop in ontwikkeling 40

40 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! 41

41 Het mobiele web Sinds een paar jaar kopen we meer smartphones dan computers/laptops (nog) het meeste gebruikt door jonge mensen De spelers ios Android Windows Phone Blackberry ach. 42

42 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 43

43 Het mobiele web: app vs. webpagina APP WEB 44

44 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 45

45 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 46

46 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 47

47 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. 48

48 Het mobiele web: hoe touchen we? 49

49 Het mobiele web: hoe touchen we? 50

50 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 Houd core content hetzelfde Denk aan batterylife Emulators!!! 51

51 Het mobiele web: image afmetingen Beter geen images dan te kleine images 52

52 Het mobiele web: minder tekst 53

53 Het mobiele web: minder tekst 54

54 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 55

55 Het mobiele web: Stijl van elementen Nog belangrijker dan op gewoon web: Interactieve elementen andere stijl dan informatie elementen FOUT! 56

56 Het mobiele web: kleurcontrast Ook weer meer dan op het gewone web: zorg voor goede kleurcontrasten FOUT! 57

57 Het mobiele web: button-look Laat zaken die GEEN button zijn er ook niet zo uitzien 58

58 Het mobiele web: Respecteer conventies Tussen platforms: 59

59 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 60

60 Het mobiele web: inklappen/uitklappen 61

61 Het wordt anders (duh..) WEB niet genoeg als term? Internet of Things (IOT)? 62

62 Zoeits? 63

63 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 64

64 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 65

65 WEB evolutie 66

66 Toekomst WWW? In elk geval.. Nog: groter meer responsiveness meer immersion nog meer ubiquitous mobieler onzichtbaarder socialer sneller meer interactie modaliteiten.. 67

67 Toekomst WWW, enkele issues.. Misbruik overheden Criminele acticiviteiten Privacy Pas op voor meer lostness Wat doet de snelheid? Effecten van zoveeeeeeeeel multimedia?..? 68