1 / 25

HTML5 and Designing a Rich Internet Experience

HTML5 and Designing a Rich Internet Experience. Garth Colasurdo HSLIC Web and Applications Group gcolasurdo@salud.unm.edu. In This Presentation. HTML5 ≈ HTML 5 + CSS 3 + JavaScript Rich Internet Applications (RIA) HTML5 x 5 Caution and Progress Example and Reference Sites.

morley
Download Presentation

HTML5 and Designing a Rich Internet Experience

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. HTML5 and Designing a Rich Internet Experience Garth Colasurdo HSLIC Web and Applications Group gcolasurdo@salud.unm.edu

  2. In This Presentation • HTML5 ≈ HTML 5 + CSS 3 + JavaScript • Rich Internet Applications (RIA) • HTML5 x 5 • Caution and Progress • Example and Reference Sites

  3. HTML5 ≈ HTML 5 + CSS 3 + JavaScript • HTML5 is a suite of tools for: • Markup (HTML 5) • Presentation (CSS 3) • Interaction (DOM, Ajax, APIs) • Brought on by the evolving use of the web http://slides.html5rocks.com/

  4. A Rough History of Web Standards HTML 5 CSS

  5. Rich Internet Applications (RIA) • Space between the internet and the desktop • Apps that look good and behave well • Adobe Air/Flash, Java, Silverlight, Gears • Availability • Anywhere a web browser is available • As a desktop widget or application • Part of a mobile application store

  6. RIA Examples

  7. 5 HTML Enhancements • HTML • Forms • CSS • Offline applications • Local storage

  8. HTML Extended • Document Flow: div, section, article, nav, aside, header, footer • Audio, Video and Embed • Canvas: paths, gradients, image manipulation, events • Microdata for semantics and enhanced search engine results (Google Rich Snippets)

  9. HTML Header Figure Navigation Image, Video, Quote, Table, etc… Aside Section Article Footer Article Footer Article Footer Legend Footer

  10. Canvas <canvas id=“canvas” width=“150” height=“150”> </canvas> function draw() { var canvas = document.getElementById(“canvas”); if (canvas.getContext) { varctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10,10,55,50); ctx.fillStyle = “rgb(0,0,200)”; ctx.fillRect (30,30,55,50); } }

  11. Form Enhancements • Placeholder text • Specific text input: email, URL, number, search • Slider • Date picker • User Agent validation

  12. CSS Effects • Rounded corners • Gradients • Box and text shadows • Fonts • Transparencies • Multiple background images and border images • Multiple columns and grid layout • Box sizing • Stroke and outlines • Animation, movement and rotation • Improved selectors

  13. CSS Effect Example .amazing { border: 1px solid blue; color: red; background-color: gold; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; -webkit-box-shadow: 8px 8px 6px #474747; -moz-box-shadow: 8px 8px 6px #474747; box-shadow: 8px 8px 6px #474747; text-shadow: 8px 8px 2px #595959; filter: dropshadow(color=#595959, offx=8, offy=8); } Amazing CSS Effects http://css3generator.com/

  14. CSS Timelines http://mattbango.com/notebook/web-development/pure-css-timeline/

  15. Programmer Tools • Offline Applications • Storage • Communication • Web Workers • Web Sockets • Desktop experience • Drag and Drop • Notifications • Geolocation

  16. Offline Applications <html mainfest=“http://m.health.unm.edu/someapp.manifest”> … </html> CACHE MANIFEST #v1.01 #Explicitly cached files CACHE: index.html Stylesheet.css Images/logo.png NETWORK: Search.cfm Login.cfm /dynamicpages FALLBACK: /dynamicpage.cfm /static.html someapp.manifest http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

  17. Local Storage • Beyond cookies- local storage • Manipulated by JavaScript • Persistent • 5MB storage per “origin” • Secure (no communication out of the browser) • Session storage • Lasts as long as the browser is open • Each page and tab is a new session • Browser based SQLite or IndexedDB

  18. Local Storage • Web storagewindow.localStorage[‘value’] = ‘Save this!’; • Session storagesessionStorage.useLater(‘fullname’, ‘Garth Colasurdo’);alert(“Hello ” + sessionStorage.fullname); • Database storagevar database = openDatabase(“Database Name”, “Database Version”);database.executeSql(“SELECT * FROM test”, function(result1) { …}); http://dev.w3.org/html5/webstorage/

  19. User Agent Storage

  20. Cautions • Browser implementation is fragmented • Standards are in development • HTML Candidate Recommendation is scheduled for 2012 • CSS3 is in multiple drafts and proposals • ECMA-262 (edition 3) (or JavaScript 1.5) • New markup and architecture design

  21. Progress • Multiple support levels • HTML editors • CSS editors and frameworks • JavaScript libraries and frameworks • Astounding user agent development • JavaScript engines • Rendering engines • Device awareness • Widget adoption • Robust vendor competition and cooperation • Continue with progressive enhancement/graceful failure methods

  22. Advocacy Sites • Total clearing house of HTML5 (start with the presentation)http://html5rocks.com • HTML5 Watch is a list of interesting RIA advanceshttp://html5watch.tumblr.com • CSS3 Bloghttp://www.css3.info

  23. Demos and Experiments • Chrome Experimentshttp://www.chromeexperiments.com • Apple HTML5 Showcase http://www.apple.com/html5/ • Canvas Demoshttp://www.canvasdemos.com • RIA Demos with browser support listedhttp://html5demos.com • Our Solar Systemhttp://neography.com/experiment/circles/solarsystem/ • Pure CSS3 Animated AT-AT Walker from Star Wars http://blog.optimum7.com/anthony/website-design/pure-css3-animated-at-at-walker-from-star-wars-2.html

  24. Developer Reference Sites • W3Chttp://dev.w3.org/html5/html-author/http://w3.org/TR/css3-roadmap/ • W3Schools HTML 5 Referencehttp://www.w3schools.com/html5/ • Dive Into HTML 5 (prerelease site for an O’Reilly book)http://diveintohtml5.org • WebKit (Safari and Chromium)http://developer.apple.com/safari/library/navigation/http://www.chromium/home/ • Mozillahttp://developer.mozilla.org/en/html/html5/ • IE 8 & 9http://msdn.microsoft.com/en-us/library/aa737439.aspxhttp://ie.microsoft.com/testdrive/

More Related