Scribd Logo
Upload

Welcome to Scribd!

  • HTML5 and Designing A Rich Internet Experience2

    Uploaded by

    Joel Hubahib
    9 views25 pages

    Original Title

    HTML5_and_Designing_a_rich_internet_Experience2.ppt

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views25 pages

    HTML5 and Designing A Rich Internet Experience2

    Uploaded by

    Joel Hubahib

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 25

    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
    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/
    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 HTML 5
    1
    CSS 1 CSS 2 T-less D Web 2.0 CSS3

    JS ECMA, DOM 2 Ajax DOM,


    DOM APIs

    HTML 5 CSS
    2004 WHATWG started 1996 – CSS 1 W3C Rec
    2008 W3C Working Draft 1998 – CSS 2 W3C Rec
    2012 (2010) W3C Candidate Rec 1999 – CSS 3 Proposed
    2022 W3C Rec 2005 – CSS 2.1 W3C Candidate Rec
    2001 – CSS 3 W3C Working Draft
    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
    RIA Examples
    5 HTML Enhancements
    • HTML
    • Forms
    • CSS
    • Offline applications
    • Local storage
    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)
    HTML
    Header Figure

    Navigation
    Section
    Article
    Footer
    Image, Video, Quote, Table,
    Article etc…
    Aside Footer

    Article
    Footer

    Legend
    Footer
    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);
    }
    }
    Form Enhancements
    • Placeholder text
    • Specific text input: email, URL, number, search
    • Slider
    • Date picker
    • User Agent validation
    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
    CSS Effect Example
    .amazing {
    border: 1px solid blue;
    color: red;
    background-color: gold;

    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;

    Amazing CSS border-radius: 40px;

    Effects -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);
    }
    http://css3generator.com/
    CSS Timelines

    http://mattbango.com/notebook/web-development/pure-css-timeline/
    Programmer Tools
    • Offline Applications
    • Storage
    • Communication
    – Web Workers
    – Web Sockets
    • Desktop experience
    – Drag and Drop
    – Notifications
    • Geolocation
    Offline Applications
    <html mainfest=“http://m.health.unm.edu/someapp.manifest”>
    …
    </html>
    CACHE MANIFEST
    someapp.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

    http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
    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
    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) {
    …
    });

    http://dev.w3.org/html5/webstorage/
    User Agent Storage
    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
    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
    Advocacy Sites
    • Total clearing house of HTML5
    (start with the presentation)
    http://html5rocks.com
    • HTML5 Watch is a list of interesting RIA
    advances
    http://html5watch.tumblr.com
    • CSS3 Blog
    http://www.css3.info
    Demos and Experiments
    • Chrome Experiments
    http://www.chromeexperiments.com
    • Apple HTML5 Showcase
    http://www.apple.com/html5/
    • Canvas Demos
    http://www.canvasdemos.com
    • RIA Demos with browser support listed
    http://html5demos.com

    • Our Solar System


    http://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
    Developer Reference Sites
    • W3C
    http://dev.w3.org/html5/html-author/
    http://w3.org/TR/css3-roadmap/
    • W3Schools HTML 5 Reference
    http://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/
    • Mozilla
    http://developer.mozilla.org/en/html/html5/
    • IE 8 & 9
    http://msdn.microsoft.com/en-us/library/aa737439.aspx
    http://ie.microsoft.com/testdrive/

    You might also like