HTML5 - Amazon Web Services

Document Sample
HTML5 - Amazon Web Services Powered By Docstoc
					  HTML5
Where have you been?
           whoami

Saul Mora (@casademora)

Founding Panda, Magical Panda Software,
LLC

iPhone development
           Agenda

New Tags

New Features

New Apis

(Some) [Live] Demos
         That’s all?



Document focused -> Application Focused
        New Doctype


<!DOCTYPE html>

That’s it!
            New Tags
<section>                 <output>
             <audio>
<header>                  <progress>
             <video>
<footer>                  <details>
             <canvas>
<nav>
                          <eventsource
             <datagrid>
<aside>                   >
<article>    <datalist>
                          <figure>
<source>     <time>
                          <menu>
         Video tag



http://www.youtube.com/html5
Audio Tag
             Canvas

Basics:

Declare the element

In javascript, get the drawing context

use drawing API methods
       Canvas Tag



http://html5demos.com/canvas
          New Apis

Geolocation

Local Storage

Drag-n-Drop

Client Side Database
        Geolocation

navigator.geolocation.getPosition(success
Callback, errorCallback, options)

var watchId =
navigator.geolocation.watchPosition
(callback)

navigator.geolocation.clearWatch
(watchId)
      Local Storage


sessionStorage

localStorage
Client Side Database


Sqlite Relational database

use normal SQL commands

Transactions supported!
 if (window.openDatabase) {
     var name = "ToDo";
     var version = "1.0";
     var displayName = "My ToDo List";
     var expectedSize = 2500000;

    var todoDatabase = openDatabase(name, version, displayName, expectedSize);

 }
 else {
    // fallback code
 }




function createTables() {
   todoDatabase.transaction(
      function (tx) {
         var SQL = "CREATE TABLE ShoppingList (id INTEGER, item TEXT, location TEXT)";
         tx.executeSql(SQL);
      }
   );
}
        Web Workers


Heavy

 High startup cost, high memory cost

Intended to be long-lived
              Canvas


What can you draw?

...anything
            Offline Site Access
 CACHE MANIFEST
 # lines that begin with a pound sign are comments and are ignored
 http://www.myweatherapp.com/index.html
 scripts/weather.js
 images/shining-sun.png

 CACHE:
 # this is the default, try the cache first for these items
 images/rainy.png

 NETWORK:
 # always fetch items listed here from the network, never the cache
 http://www.myweatherapp.com/todays-forecast-frame.html
 7day-forecast-frame.html



<html manifest="OfflineWeather.manifest">
    Further Reading
http://orderedlist.com/articles/structural-
tags-in-html5

http://annevankesteren.nl/2008/fronteers-
html5-video

https://developer.mozilla.org/En/Media_for
mats_supported_by_the_audio_and_video
_elements

http://dev.w3.org/geo/api/spec-source.html
   Further Listening


History and Future of Web Standards -
HanselMinutes Episode 200

http://hanselminutes.com/default.aspx?sho
wID=200
            ZaiJian

CSS3 Introduction/Overview - next!

Developer Ignite, November 11, 2009

 Gilbert Community Center

 follow @intelevents, @casademora

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:9
posted:9/26/2011
language:English
pages:21