Download presentation
Presentation is loading. Please wait.
1
HTML5 and Designing a Rich Internet Experience
4/5/2019 HTML5 and Designing a Rich Internet Experience Garth Colasurdo HSLIC Web and Applications Group
2
HTML5 and Designing a Rich Internet Experience
4/5/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/5/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/5/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 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); } Canvas
13
Form Enhancements Placeholder text
Specific text input: , URL, number, search Slider Date picker User Agent validation
14
CSS Effects Rounded corners Gradients Box and text shadows Fonts
4/5/2019 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 Last, first, odd, even, previous, first n, last n
15
CSS Effect Example Amazing CSS Effects
.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 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) { … });
![Local Storage Web storage window.localStorage[‘value’] = ‘Save this!’;](http://slideplayer.com/slide/16117621/95/images/20/Local+Storage+Web+storage+window.localStorage%5B%E2%80%98value%E2%80%99%5D+%3D+%E2%80%98Save+this%21%E2%80%99%3B.jpg "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/5/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
Similar presentations
