Building Web Applications with HTML5, CSS3, and Javascript...

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Building Web Applications with HTML5, CSS3, and Javascript...

  • Building Web Applications with HTML5, CSS3, and Javascript: An Introduction to HTML5

    Jason Clark Head of Digital Access & Web Services Montana State University Libraries

  • #tag

  • twitter #hashtag


  • Overview

    •  New Features and Functions •  Demos •  Getting Started • Questions

  • Javascript APIs

    Desktop programming for the web

  • Minification + Optimization

    •  Removing unnecessary characters and spacing from code to reduce size, and optimizing the code to improve load times



  • Selector APIs

    •  Find elements by matching against a group of selectors (tags or attributes in DOM).

    querySelector() ! querySelectorAll()!

    var list = document.querySelectorAll ('li.old,');!

  • Geolocation

    •  w3c API •  accurate •  supported in Firefox 3.6, Safari 4


  • File API, Drag & Drop API

    •  Creating, reading, & uploading of files •  Drag & drop API in combination with a

    draggable attribute

  • History API

    •  Preserve the state of the page •  Enabling back button in client-side scripts

  • Fullscreen API

    •  Remove browser chrome •  “Turn off the lights”

    function launchFullScreen(element) {! if(element.requestFullScreen) {! element.requestFullScreen();! }! }!

    Go Fullscreen!

  • Device APIs

    •  Allows access to video and audio input, e.g., from a webcam or microphone.


  • Page Visibility API

    •  Check the active state of the page •  React to changes in use of a page

    •  Stop polling for data •  Pause a video

    document.hidden! document.visibilityState! visibilitychange Event!

  • Notifications API

    •  Display notifications to the user for given event or interactions

    •  New emails, tweets or calendar events…

    if (window.webkitNotifications)!

  • Storage APIs

    •  Keep files •  Store keys/values •  Local databases

  • sessionStorage

    •  mega COOKIE •  Stores key/value pairs while page is open

  • localStorage

    •  mega COOKIE •  Stores key/value pairs that persist after

    page and browser are closed

  • Offline Storage – Cache Manifest

    •  Work without a connection 1.  Create cache manifest file 2.  Set server to allow for manifest file type 3.  Link to manifest file in HTML

    CACHE MANIFEST! #store the files below ! index.html! styles.css! images/logo.png! Scripts/global.js!

  • Offline Storage - IndexedDB

    My browser can haz database!

    •  Simple key/value store within browser •  Up to 5 MB of data storage

    •  W3C discontinued Web SQL Database spec

  • Demos & Examples

    It's your call....


  • Demos

    •  Other possible examples: o geolocation o  localStorage o  IndexedDB

  • Resources

    •  WHATWG HTML5 for Developers o

    •  HTML5: Mozilla Developer Network o

    •  Dive into HTML5 o

  • Assignment 3

    •  Take your HTML5 Javascript template •


    1.  Add section page views 2.  Add feed parse/display for second page

    view 3.  Add geolocation showing coordinates on

    one of the other page views

  • Questions?