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

Click here to load reader

  • date post

    28-Sep-2020
  • Category

    Documents

  • view

    6
  • download

    0

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

  • pinboard.in #tag

    pinboard.in/u:jasonclark/t:lita-html5/

  • twitter #hashtag

    #litahtml5

  • 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

    Minify http://www.minifyjavascript.com/

    Optimize http://www.jslint.com/

  • Selector APIs

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

    querySelector() ! querySelectorAll()!

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

  • Geolocation

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

    navigator.geolocation.getCurrentPosition();!

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

    getUserMedia()!

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

  • html5-demos.appspot.com/static/getusermedia/photobooth.html

  • Demos

    •  Other possible examples: o geolocation o  localStorage o  IndexedDB

  • Resources

    •  WHATWG HTML5 for Developers o http://developers.whatwg.org/

    •  HTML5: Mozilla Developer Network o  https://developer.mozilla.org/en-US/docs/HTML/HTML5

    •  Dive into HTML5 o http://diveintohtml5.info/

  • Assignment 3

    •  Take your HTML5 Javascript template •  http://www.lib.montana.edu/~jason/files/html5-mobile-

    feed/template.js

    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?

    twitter.com/jaclark www.lib.montana.edu/~jason/talks.php

  • http://www.gesteves.com/experiments/starwars.html