Scribd Logo
Hochladen

Willkommen bei Scribd!

  • HTML5 and Designing A Rich Internet Experience

    Hochgeladen von

    Salem Ben Nasr
    31 Ansichten25 Seiten
    HTML5 that's all

    Originaltitel

    HTML5 and Designing a Rich Internet Experience

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    HTML5 that's all

    Copyright:

    © All Rights Reserved
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    31 Ansichten25 Seiten

    HTML5 and Designing A Rich Internet Experience

    Hochgeladen von

    Salem Ben Nasr
    HTML5 that's all

    Copyright:

    © All Rights Reserved
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 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
    9192
    HTML
    1

    9394

    9596

    HTML
    2

    2004
    2008

    9798
    HTML
    4

    CSS 1

    CSS 2

    JS

    ECMA,
    DOM

    9900

    0102

    0304

    0506

    XHTML
    1

    DOM 2

    HTML 5
    WHATWG started

    2012
    (2010)

    W3C Candidate
    Rec

    2022

    W3C Rec

    0910

    1112

    HTML
    5
    T-less
    D

    W3C Working
    Draft

    0708

    Web
    2.0

    CSS3
    Ajax

    DOM,
    APIs

    CSS
    1996 CSS
    W3C Rec
    1
    1998 CSS
    2

    W3C Rec

    1999 CSS
    3

    Proposed

    2005 CSS
    2.1

    W3C Candidate
    Rec

    2001 CSS

    W3C Working

    1314

    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

    Asid
    e

    Article

    Image, Video, Quote,


    Table, etc

    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;

    Amazing
    Amazing
    CSS
    CSS Effects
    Effects

    -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);
    }

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

    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-anima
    ted-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 OReilly 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/

    Das könnte Ihnen auch gefallen