Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5 and Designing a Rich Internet Experience Garth Colasurdo HSLIC Web and Applications Group

Similar presentations

Presentation on theme: "HTML5 and Designing a Rich Internet Experience Garth Colasurdo HSLIC Web and Applications Group"— Presentation transcript:

1 HTML5 and Designing a Rich Internet Experience Garth Colasurdo HSLIC Web and Applications Group

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


4 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

5 A Rough History of Web Standards 91-9293-9495-9697-9899-0001-0203-0405-0607-0809-1011-1213-14 HTML 1HTML 2HTML 4XHTML 1 HTML 5 CSS 1CSS 2T-less DWeb 2.0CSS3 JSECMA, DOM DOM 2AjaxDOM, APIs 2004WHATWG started 2008W3C Working Draft 2012 (2010)W3C Candidate Rec 2022W3C Rec 1996 – CSS 1W3C Rec 1998 – CSS 2W3C Rec 1999 – CSS 3Proposed 2005 – CSS 2.1W3C Candidate Rec 2001 – CSS 3W3C Working Draft HTML 5CSS

6 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

7 RIA Examples

8 5 HTML Enhancements HTML Forms CSS Offline applications Local storage

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

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

11 Canvas function draw() { var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = 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); }

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

13 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

14 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

15 CSS Timelines

16 Programmer Tools Offline Applications Storage Communication – Web Workers – Web Sockets Desktop experience – Drag and Drop – Notifications Geolocation

17 Offline Applications … someapp.manifest 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

18 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

19 Local Storage Web storage window.localStorage[‘value’] = ‘Save this!’; Session storage sessionStorage.useLater(‘fullname’, ‘Garth Colasurdo’); alert(“Hello ” + sessionStorage.fullname); Database storage var database = openDatabase(“Database Name”, “Database Version”); database.executeSql(“SELECT * FROM test”, function(result1) { … });

20 User Agent Storage

21 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

22 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

23 Advocacy Sites Total clearing house of HTML5 (start with the presentation) HTML5 Watch is a list of interesting RIA advances CSS3 Blog

24 Demos and Experiments Chrome Experiments Apple HTML5 Showcase Canvas Demos RIA Demos with browser support listed Our Solar System Pure CSS3 Animated AT-AT Walker from Star Wars walker-from-star-wars-2.html walker-from-star-wars-2.html

25 Developer Reference Sites W3C W3Schools HTML 5 Reference Dive Into HTML 5 (prerelease site for an O’Reilly book) WebKit (Safari and Chromium) http://www.chromium/home/ http://www.chromium/home/ Mozilla IE 8 & 9

Download ppt "HTML5 and Designing a Rich Internet Experience Garth Colasurdo HSLIC Web and Applications Group"

Similar presentations

Ads by Google