1 / 23

Rich Internet Applications

Rich Internet Applications. 9. HTML 5 and RIAs. HTML 5. Standard currently under development by W3C Aims to improve the language with support for the latest multimedia Keeping it easily readable by humans Consistently understood by computers and devices

donagh
Télécharger la présentation

Rich Internet Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Rich Internet Applications 9. HTML 5 and RIAs

  2. HTML 5 • Standard currently under development by W3C • Aims to improve the language with support for the latest multimedia • Keeping it easily readable by humans • Consistently understood by computers and devices • Adds many new elements and capabilities to HTML Rich Internet Applications 9. HTML 5 and RIAs #2

  3. HTML 5 RIA-friendly features • Include: • Video/Audio • Offline • Application cache • Local storage • Geolocation • Canvas • Drag and drop • Native browser support for capabilities previously only available with plug-ins Rich Internet Applications 6. Ajax functionality #3

  4. Demos • Some demos in code download • Others at http://html5demos.com Rich Internet Applications 6. Ajax functionality #4

  5. Browser support • Evolving • Test your browser at http://html5test.com/ • Gives compatibility score • Chrome current has highest score • IE9 scores very low • Use Modernizr.js to test feature compatibility in client code Rich Internet Applications 6. Ajax functionality #5

  6. Video • Supported formats • H.264/MPEG4 (.mp4) • Theora (.ogv) • WebM • Place video on page with <video> element • Browser provides controls for play/pause, volume, etc. • Configure server for appropriate mime types (can’t test withASP.NET dev server) Rich Internet Applications 6. Ajax functionality #6

  7. Offline applications • Offline application availability particularly important on occasionally connected devices • Aspects: • Ability to detect in client code when online/offline • Ability to control the way the browser caches the application pages and resources • Local storage, possibly synchronise with server when next online Rich Internet Applications 6. Ajax functionality #7

  8. Offline • navigator.online property • boolean • false if user selects, for example, Work Offline in Firefox or Airplane mode on mobile device • window.online and window.offline events • http://html5demos.com/offline Rich Internet Applications 6. Ajax functionality #8

  9. Application cache • Browsers have caching mechanisms but these are generally unreliable • The Application Cache allows a developer to specify which files the browser should cache and make available to offline users. • Application will load and work correctly, even if the user presses the refresh button while offline Rich Internet Applications 6. Ajax functionality #9

  10. Cache manifest • Simple text file that lists the resources the browser should cache for offline access • Referenced in html element • Need to configure mime type ext/cache-manifest on server <html manifest="example.appcache"> ... </html> Rich Internet Applications 6. Ajax functionality #10

  11. Cache manifest sections • CACHE: • default section for entries • files will be explicitly cached after they're downloaded for the first time • NETWORK: • resources that require a connection to the server • requests to these resources bypass the cache, even if the user is offline • FALLBACK: • fallback pages if a resource is inaccessible. Rich Internet Applications 6. Ajax functionality #11

  12. Cache status • window.applicationCache.status • Values: • UNCACHED = 0 • IDLE = 1 • CHECKING = 2 • DOWNLOADING = 3 • UPDATEREADY = 4 • OBSOLETE = 5 Rich Internet Applications 6. Ajax functionality #12

  13. Cache events • cached, checking, downloading, error, noupdate, obsolete, progress, updateReady • Attach handlers to window.applicationcache.event • For example window.applicationCache.addEventListener( 'checking', handleCacheEvent, false); Rich Internet Applications 6. Ajax functionality #13

  14. Using the application cache • Use manifest to tell browser what should be cached • Use events and status to detect changes to cache • Note that change a resource on the server is not enough for the browser to know about it – the cache manifest itself may change • Common to use comment with version number to provide a safe way of refreshing manifest Rich Internet Applications 6. Ajax functionality #14

  15. Application cache demo • Html5Demo > Manifest • Note that developer tools in Chrome show cache Rich Internet Applications 6. Ajax functionality #15

  16. Web storage • Local storage • Per domain, available to all scripts in domain that stored data • Persists after browser closed • Session storage • Per page per window • Removed when window closed • Both store simple key-value pairs Rich Internet Applications 6. Ajax functionality #16

  17. Web storage vs cookies • Capacity • Depends on browser, but typically (5MB) much greater than cookies (4kB) • Web storage is accessible from client only, not sent to server • not part of conversation between browser and server Rich Internet Applications 6. Ajax functionality #17

  18. Using local storage • Html5Demo > LocalStorage and LocalStorageOther • Store and retrieve with localStorage.getItem and localStorage.setItem • Storage events • window.addEventListener("storage", handle_storage, false); • only fire on windows other than the one which performed the storage action which caused the event Rich Internet Applications 6. Ajax functionality #18

  19. Using local storage • Chrome allows you to view and edit local storage Rich Internet Applications 6. Ajax functionality #19

  20. Geolocation • Opt-in service • Uses GPS, cell tower triangulation or possibly other techniques • Accuracy will depend on device • Work on desktop browser but may be very inaccurate • navigator.geolocation.getCurrentPosition • Demo http://html5demos.com/geo Rich Internet Applications 6. Ajax functionality #20

  21. Canvas • Allows drawing within browser window • Demos • http://html5demos.com/canvas • http://html5demos.com/canvas-grad Rich Internet Applications 6. Ajax functionality #21

  22. Drag and drop • Drag and drop elements within page • Drag and drop files for viewing or XHR upload • Use JavaScript File API • FileReader object provides read access to local files • Demos • http://html5demos.com/drag • http://html5demos.com/dnd-upload • http://www.html5rocks.com/en/tutorials/file/dndfiles/ Rich Internet Applications 6. Ajax functionality #22

  23. What’s next? • The exam! Rich Internet Applications 6. Ajax functionality #23

More Related