Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5 and Designing a Rich Internet Experience

Published byよいかず さくいし Modified over 5 years ago

Similar presentations

Presentation on theme: "HTML5 and Designing a Rich Internet Experience"— Presentation transcript:

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

2 HTML5 and Designing a Rich Internet Experience
4/4/2019 HTML5 and Designing a Rich Internet Experience Garth Colasurdo HSLIC Web and Applications Group

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

4 4/4/2019 O’Reilly Media Web 2.0 in 2004

5 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

6 A Rough History of Web Standards
91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14 HTML 1 HTML 2 HTML 4 XHTML 1 HTML 5 CSS 1 CSS 2 T-less D Web 2.0 CSS3 JS ECMA, DOM DOM 2 Ajax DOM, APIs HTML 5 CSS 2004 WHATWG started 2008 W3C Working Draft 2012 (2010) W3C Candidate Rec 2022 W3C Rec 1996 – CSS 1 W3C Rec 1998 – CSS 2 1999 – CSS 3 Proposed 2005 – CSS 2.1 W3C Candidate Rec 2001 – CSS 3 W3C Working Draft

7 Rich Internet Applications (RIA)
4/4/2019 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 Coined in 2002 (Macromedia)

8 RIA Examples

9 5 HTML Enhancements HTML Forms CSS Offline applications Local storage

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

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

12 Canvas <canvas id=“canvas” width=“150” height=“150”> </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); }

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

14 CSS Effects 4/4/2019 Last, first, odd, even, previous, first n, last n
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 Last, first, odd, even, previous, first n, last n

15 CSS Effect Example Amazing CSS Effects http://css3generator.com/
.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

16 CSS Timelines

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

18 Offline Applications <html mainfest=“ … </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

19 Local Storage Beyond cookies- local storage Session 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

20 Local Storage http://dev.w3.org/html5/webstorage/
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) { … });

21 User Agent Storage

22 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

23 Progress Multiple support levels Astounding user agent development
4/4/2019 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 Java script- faster, Engines- faster, Device awareness in the general pop., Blue E != Internet, SproutCore, jQTouch, Sencha

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

25 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

26 Developer Reference Sites
W3C W3Schools HTML 5 Reference Dive Into HTML 5 (prerelease site for an O’Reilly book) WebKit (Safari and Chromium) Mozilla IE 8 & 9

27 HTML5 and Designing a Rich Internet Experience
4/4/2019 HTML5 and Designing a Rich Internet Experience Garth Colasurdo HSLIC Web and Applications Group

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

29 4/4/2019 O’Reilly Media Web 2.0 in 2004

30 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

31 A Rough History of Web Standards
91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14 HTML 1 HTML 2 HTML 4 XHTML 1 HTML 5 CSS 1 CSS 2 T-less D Web 2.0 CSS3 JS ECMA, DOM DOM 2 Ajax DOM, APIs HTML 5 CSS 2004 WHATWG started 2008 W3C Working Draft 2012 (2010) W3C Candidate Rec 2022 W3C Rec 1996 – CSS 1 W3C Rec 1998 – CSS 2 1999 – CSS 3 Proposed 2005 – CSS 2.1 W3C Candidate Rec 2001 – CSS 3 W3C Working Draft

32 Rich Internet Applications (RIA)
4/4/2019 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 Coined in 2002 (Macromedia)

33 RIA Examples

34 5 HTML Enhancements HTML Forms CSS Offline applications Local storage

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

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

37 Canvas <canvas id=“canvas” width=“150” height=“150”> </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); }

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

39 CSS Effects 4/4/2019 Last, first, odd, even, previous, first n, last n
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 Last, first, odd, even, previous, first n, last n

40 CSS Effect Example Amazing CSS Effects http://css3generator.com/
.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

41 CSS Timelines

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

43 Offline Applications <html mainfest=“ … </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

44 Local Storage Beyond cookies- local storage Session 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

45 Local Storage http://dev.w3.org/html5/webstorage/
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) { … });

46 User Agent Storage

47 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

48 Progress Multiple support levels Astounding user agent development
4/4/2019 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 Java script- faster, Engines- faster, Device awareness in the general pop., Blue E != Internet, SproutCore, jQTouch, Sencha

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

50 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

51 Developer Reference Sites
W3C W3Schools HTML 5 Reference Dive Into HTML 5 (prerelease site for an O’Reilly book) WebKit (Safari and Chromium) Mozilla IE 8 & 9

52

Download ppt "HTML5 and Designing a Rich Internet Experience"

Similar presentations

Build Amazing Apps with Web Standards Mobile HTML5 Applications In Hours, Not Days.

Build Amazing Apps with Web Standards Mobile HTML5 Applications In Hours, Not Days.
SD1230 Unit 10 Mobile Web.

SD1230 Unit 10 Mobile Web.
What is HTML5…?. ”…removes the need for plugins” ”…can handle multimedia directly” ”…enables rich, interactive clients” ”…enables advanced visual designs”

What is HTML5…?. ”…removes the need for plugins” ”…can handle multimedia directly” ”…enables rich, interactive clients” ”…enables advanced visual designs”
HTML5, OVERVIEW AND NEW FEATURES PowerPoint by Mason O’Mara.

HTML5, OVERVIEW AND NEW FEATURES PowerPoint by Mason O’Mara.
New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Corporation www.telerik.com.

New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Corporation
HTML 5. Emlékeztető A november 24.-ei előadás és gyakorlat elmarad December 1.-én pótoljuk az elmaradt előadást az A/1 228-as teremben 16-18-ig December.

HTML 5. Emlékeztető A november 24.-ei előadás és gyakorlat elmarad December 1.-én pótoljuk az elmaradt előadást az A/1 228-as teremben ig December.
HTML5 Haptics Standardization

HTML5 Haptics Standardization
Philly.NET Hands-On MVC Razor, HTML5, CSS3 Rob Keiser, Bill Wolff.

Philly.NET Hands-On MVC Razor, HTML5, CSS3 Rob Keiser, Bill Wolff.
HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed.

HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.
HTML5 and Designing a Rich Internet Experience

HTML5 and Designing a Rich Internet Experience
1990 2020 1992 1994 1996 1998 2000 2002 2004 20062010 20082012 2014 2016 2018 Tim Berners-Lee authors HTML in 1991, assisted by his colleagues at CERN,

Tim Berners-Lee authors HTML in 1991, assisted by his colleagues at CERN,
HTML 5 Tutorial Chapter 1 Introduction. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML.

HTML 5 Tutorial Chapter 1 Introduction. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML.
Transitioning to HTML5 and CSS3 Patrick Carey, Cengage Learning Author.

Transitioning to HTML5 and CSS3 Patrick Carey, Cengage Learning Author.
HTML 5 The next generation of web programming. WHERE IT ALL BEGAN.

HTML 5 The next generation of web programming. WHERE IT ALL BEGAN.
HTML Advanced: HTML 5. Welcome This slideshow presentation is designed to introduce you to HTML 5. It is the third of three HTML workshops available at.

HTML Advanced: HTML 5. Welcome This slideshow presentation is designed to introduce you to HTML 5. It is the third of three HTML workshops available at.
Bartosz Kowalski Software Developer CERN. Presentation outline -HTML : introduction and history -HTML5 : -History and philosophy -New features -Structure.

Bartosz Kowalski Software Developer CERN. Presentation outline -HTML : introduction and history -HTML5 : -History and philosophy -New features -Structure.
Lecture 18. HTML5 and JavaScript Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell 91.113 Exploring the Internet,

Lecture 18. HTML5 and JavaScript Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell Exploring the Internet,
Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML
Web Design Basic Concepts.

Web Design Basic Concepts.
Mark Branom, Continuing Studies.  HTML5 overview – what’s new?  New HTML5 elements  New HTML5 features  Guided Demonstrations  Forms  Video  Geolocation.

Mark Branom, Continuing Studies.  HTML5 overview – what’s new?  New HTML5 elements  New HTML5 features  Guided Demonstrations  Forms  Video  Geolocation.

Similar presentations

Ads by Google