SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

HTML5 Applications with ASP.NET Web Forms

baba avatar
baba
32 diapositives · 540 Views · Jul 12, 2014

HTML5 Applications with ASP.NET Web Forms. Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com. Agenda. What features matter for data-driven apps? WebSockets Web Workers Web Storage IndexedDB Offline Applications. HTML5 WebSockets – Overview .

HTML5 Applications with ASP.NET Web Forms - slide 1
01 / 32HTML5 Applications with ASP.NET Web Forms
1 / 17

Télécharger la présentation

HTML5 Applications with ASP.NET Web Forms
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  1. HTML5 Applications with ASP.NET Web Forms Stephen Walther Superexpert.com Stephen.Walther@Superexpert.com

  2. Agenda What features matter for data-driven apps? • WebSockets • Web Workers • Web Storage • IndexedDB • Offline Applications

  3. HTML5 WebSockets– Overview • Enables lightweight two-way communication over a TCP socket. • Long Polling, Slow Talking, Server Push, Comet • Stock Notifications, Chat, Games

  4. HTML5 WebSockets – Standards • Protocol – IETF April 2011 standard at: • http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-07 • JavaScript API – W3C June 2011 standard at: • http://dev.w3.org/html5/websockets/

  5. HTML5 WebSockets – Browser Support • Chrome • Chrome9+ • Safari • Safari5, iOS Safari • Firefox • Firefox4, Firefox6 • Internet Explorer • IE9 Web Socket support was removed from Firefox because of security issues

  6. HTML5 WebSockets – Server Support • IIS • Jetty • Node.js Microsoft HTML5 Labs WebSockets server: • http://html5labs.interoperabilitybridges.com/

  7. HTML5 WebSockets – API Create a new socket with window.WebSocket: varwebsocket= new WebSocket("ws://SomeSite.com/chat");

  8. HTML5 WebSockets – API 3 Methods: • send(DOMString) • send(ArrayBuffer) • send(Blob) 1 Property • readyState 4 Events: • onopen • onmessage • onclose • onerror

  9. HTML5 WebSockets – Demos Creating a super simple Chat Service…

  10. HTML5 WebSockets – Demos Creating a multiplayer online game… http://samples.superexpert.com/wsgame

  11. HTML5 Web Workers – Overview • Enables you to run a script in a background thread (run multi-threaded JavaScript). • Useful when you don’t want to block the UI thread when executing a long running script. • Standard located here: • http://www.whatwg.org/specs/web-workers/current-work/

  12. HTML5 Web Workers – Support • Firefox • Chrome • Safari • Opera • Internet Explorer

  13. HTML5 Web Workers – API Create a new worker with window.Worker: var worker = new window.Worker(“DoSomethingHard.js”);

  14. HTML5 Web Workers – API Methods: • importScripts() • postMessage() • close() • myWorker.terminate() Events: • myWorker.onmessage • myWorker.onerror

  15. HTML5 Client Data Overview • Web Storage – key/value storage on the browser. • IndexedDB – key/value storage on the browser with support for cursors and indices • Web SQL - relational database support in the browser (SqlLite).

  16. HTML5 Web Storage – Overview Web Storage (AKA DOM Storage): • Session Storage • Local Storage (Originally called Global Storage in Firefox) Standard at: http://www.w3.org/TR/2009/WD-webstorage-20090910/

  17. HTML5 Web Storage Browser Support: • Chrome5 (5 Megs) • Firefox2 (5 Megs) • Opera10 (5 Megs) • Safari4 (5Megs) • IE8 (10 Megs)

  18. HTML5 Web Storage sessionStorage: • length • key(index) • setItem(key, string) • getItem(key) • removeItem(key) • clear() Page specific and not session specific

  19. HTML5 Web Storage localStorage: • length • key(index) • setItem(key, string) • getItem(key) • removeItem(key) • clear()

  20. HTML5 Web Storage DataJS: Using DataJS to prefetch pages

  21. HTML5 IndexedDB – Overview • Not a relational database, key value database • Does not use SQL • Supports indices, constraints, transactions

  22. HTML5 IndexedDB Browser Support: • Firefox4 (mozIndexedDB) • Google Chrome 12 (webkitIndexedDB) • IE9 (HTML Labs plugin)

  23. HTML5 IndexedDB Firefox stores the IndexedDB database here: C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\shhxrq9s.default\indexedDB

  24. HTML5 Offline Web Applications Use a web application even when you are not connected to the Internet Standard located at: • http://www.w3.org/TR/html5/offline.html

  25. HTML5 Offline Web Applications Browser Support: • Chrome • Firefox • Safari • Opera • IE9

  26. HTML5 Offline Web Applications <html manifest=“manifest.ashx” /> Cache Manifest # version 2 # Content Images/karlsruhe.jpg Content/Site.css NETWORK: Services/SomeService.svc

  27. HTML5 Offline Web Applications window.applicationCache Properties: • status – UNCACHED, IDLE, CHECKING, DOWNLOADING, UPDATEREADY, OBSOLETE Methods: • update() • swapCache() Events: • onchecking, onerror, onupdate, ondownloading, onprogress, onupdateready, oncached, onobsolete

  28. HTML5 Offline Web Applications window.navigator.online: • true – browser might be online. • false – browser definitely offline.

  29. Big HTML5 Demo JavaScript Reference Application: • http://Samples.Superexpert.com/JavaScriptReference Demonstrates: • Web Storage • Offline Web Applications • Works with IE, Chrome, Firefox, Opera, Safari

  30. Download the Sample Code Visit Stephen Walther’s blog to download the sample code for this talk: • http://StephenWalther.com

  31. Website: http://Superexpert.com Email: Stephen.Walther@superexpert.com Phone: 800 691 - 7140

  32. Your Feedback is Important Please fill out a session evaluation form. Thank you!