Scalable Vector Graphics (SVG) Server-Sent Events

HI1033

Den mobila webben Java Script, AJAX, HTML 5 and CSS3 BLE sensor server node.js server with a web server on port 8081 web socket servers to GW port 9090 and Front-end port 9091

Web Bluetooth to Crome Browser (GW) Front-end GW Roger McNamee TED talk

1. Windows is dying 2. Index search has peaked 3. Apps beat Web 4. HTML 5 change it all 5. Tablets win big 6. Social platforms set

”Highly differentiated content”

3 För länge sedan - web 2.0

• Paradigm skiftet - Ursprungligen ett “brainstorm”- O’Reilly – http://oreilly.com/web2/archive/what-is-web-20.html • Netscape vs Google – BitTorrent, Blogg, RSS • Webben som plattform – Ajax (Asyncronous Java Script and XML) • Data är det central t.ex. Youtube, Facebook …

4 Jonas Wåhslén, KTH STH Vad blev resultatet

• Webb-applikationer istället för webbsidor – Att utveckla en webb-applikation är som att utveckla en vanlig applikation • Idag gör man inte webbsidor – (sanning med modifikation) • Använder ’grafiska’ komponenter i form av JSF, Webforms eller liknade – Som vid vanlig applikationsutveckling – Dessa komponenter uppdateras när data uppdateras, inte en hel sida.

5 Jonas Wåhslén, KTH STH JavaScript

• JavaScript låter dig bädda in kommandon i en HTML-sidan som sedan körs av browsern. • JavaScript erbjuder möjligheten att skriva små skript som exekveras hos användarens browser istället för på servern • Ett annat exempel på skript som körs på klientsidan är ActiveX, Flash och JavaApplets

6 Jonas Wåhslén, KTH STH JavaScript i Body och Head

7 Jonas Wåhslén, KTH STH Ursprungligen för Validering

function checkFrom(formObj) { for (i = 0; 1 < formObj.lenght; i++) if (formObj.element[i].value == "" | formObj.element[i].value == "Invalid") { alert ("All field must be completed with valid" "information for submission!") formObj.elements[i].focus() return }

http://www.quakejs.com

8 Jonas Wåhslén, KTH STH Klass och inkappsling

En Kö

9 Jonas Wåhslén, KTH STH Arv

10 Jonas Wåhslén, KTH STH HTML 5

• Kompabilitet • Användbarhet • Interoperabilitet • Tillgänglighet

11 What is new

Canvas (2D and 3D) Cross-document messaging Web Workers

Audio and Video Geolocation Web origin concept Forms

MathML Microdata XMLHttpReques Level 2

Scalable Vector Graphics (SVG) Server-Sent events

Indexed database Web storage WebSocket API and protocol

Drag and Drop Application Cache (Offline Web Apps)

12 HTML5

• HTML4 -> XHTML men för komplext • HTML5 • API för : – Multimedia (Video och musik element) – Drag and drop (nya form element) – 2D Canvas – Web messaging (Websockets) – Kan spara filer lokalt

13 Anders Lindström, KTH STH Canvas and SVG

• Mac OS X WebKit ”dashboard widgets” • Bitmap Canvas • Inte del av DOM API

• Scalable Vector Graphics • Kan skala • Del av DOM

14 Canvas

• Dynamisk och interaktiv grafik • Rita bilder i 2D – Lines, curves, shapes, fills, etc. • Användbart för: – Grafer – Applikationer – Spel och Puzzel – … – WebGL HTML 5 – Canvas

16 Jonas Wåhslén, KTH STH postMessage API

• kan skicka meddelande mellan olika ”dokument” frames, tabs och windows chatFrame.contentWindow.postMessage(’Hello, world’, ’http://www.test.com/'); window.addEventListner(”message”, messageHandler,true); function messageHandler(e) { switch(e.origin){ case ”friend.test.com” processMessage(e.data) break; default: // message ignored } } 17 AJAX

• XHTML och CSS för presentation • DOM (Document Object Mode) i kombination med JavaScript för interaktion • XMLHTTPRequest för kommunikation • XML för att förmedla data

18 Jonas Wåhslén, KTH STH För och emot AJAX

+ Bandbreds utnyttjande + Interaktion + Användbarhet + Accesstid

- Access för sökmotorer

19 Jonas Wåhslén, KTH STH XMLHTTPRequest function gethttp(){ var xmlhttp; xmlhttp = XMLHTTPRequest(); return xmlhttp; } var http = gethttp(); http.open(‘post’, ‘server.aspx’); http.send(‘id=4&name=Jonas’);

20 Jonas Wåhslén, KTH STH XMLHttpRequest Level 2

• Part of HTML5 • Cross-origin XMLHttpRequest • Progress events • Binary Data

21 JSON

• JavaScrip Object Notation – Likt XML används för att spara och skicka data – Mindre, snabbare och ”enklare”

{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }

22 Jonas Wåhslén, KTH STH JSON

Name:
Age:
Address:
Phone:

23 Jonas Wåhslén, KTH STH Exempel

• www.w3schools.com/html5 • http://html5demos.com/ • http://games.cdn.famobi.com/html5games/f/ foot-chinko/v4

• http://paperjs.org - http://d3js.org

• http://dev.w3.org/html5/spec/

24 Anders Lindström, KTH STH