Estelle Weyl · Standardista.com · @estellevw ·Press key to advance. ·Press 2 for notes.

HTML5 & CSS3:
the Good Enough Parts

Estelle Weyl HTML5 & CSS3 for the Real World Mobile HTML5: Using the Latest Today by Estelle Weyl and Maximiliano Firtman

www.standardista.com
@estellevw

Part 1: CSS3 Snow

Part 2: CSS3 Other features

Part 3: HTML5

→Part 4: APIs←

CSS

  • @font-face Web fonts
  • calc() in CSS
  • Generated content
  • Gradients
  • display values
  • Mulitiple backgrounds
  • background image properties
  • Border images
  • Border-radius
  • Box-shadow
  • Box-sizing
  • New Colors
  • Alphatransparency
  • Media Queries
  • Multiple column layout
  • object-fit/object-position
  • Opacity
  • CSS3 selectors
  • Text-shadow
  • Transforms
  • Transitions
  • 3D Transforms
  • Animation
  • Word-wrap
  • Flexible Box Layout Module
  • Grid Layout
  • rem (root em) units
  • Masks
  • Reflections
  • text-stroke
  • Text-overflow

HTML5

  • Semantic elements
  • Audio element
  • Canvas
  • contenteditable attribute
  • dataset & data-* attributes
  • Details & Summary elements
  • Drag and Drop
  • HTML5 form features
  • Form validation
  • Datalist element
  • Progress & Meter
  • New semantic elements
  • Offline web applications
  • Ruby annotation
  • Session history management
  • Text API for Canvas
  • Toolbar/context menu
  • Video element
  • WebGL - 3D Canvas graphics

JS API

  • Cross-document messaging
  • Cross-Origin Resource Sharing
  • File API
  • Geolocation
  • Hashchange event
  • IndexedDB
  • JSON parsing
  • Server-sent DOM events
  • Web Notifications
  • Web Sockets
  • Web Storage
  • Web Workers
  • Stream API
  • Web SQL Database
  • SVG

Other

  • classList (DOMTokenList )
  • Data URLs
  • getElementsByClassName
  • MathML
  • MPEG-4/H.264/WebM/VP8/Ogg/Theora video formats
  • querySelector/querySelectorAll
  • Touch events
  • WAI-ARIA Accessibility features
  • Font Formats
  • XHTML served as application/xhtml+xml
  • XMLHttpRequest 2
  • XHTML+SMIL animation

Part 4:
JavaScript APIs

JavaScript APIs

  • Offline web apps
  • Web Storage
  • Indexed dataBase
  • Geolocation
  • Session history
  • Drag and Drop
  • JSON parsing
  • File API
  • Web Workers
  • Web Sockets
  • Server events
  • Web Notifications
  • getElementsByClassName
  • classList (DOMTokenList)
  • querySelector/querySelectorAll
  • Hashchange event
  • Cross-document messaging
  • Cross-Origin Resource Sharing
  • Touch events
  • Toolbar/context menu

Offline Web Applications

<!doctype HTML>
<html manifest="cache.manifest">
<meta charset="utf-8"/>
<title>...
CACHE MANIFEST
#version01

#files that explicitly cached
CACHE:
index.html
css/styles.css
scripts/application.js

#Resources requiring connectivity
NETWORK:
signin.php
dosomething.cgi
  • Chrome 8
  • Safari 5.1
  • Firefox 4
  • Opera 12?
  • IE 10
  • Require hardware

ApplicationCache

Add to .htaccess file

AddType text/cache-manifest manifest
if(window.applicationCache){
 var appCache = window.applicationCache; 
 appCache.update();
 if (appCache.status == appCache.UPDATEREADY ){ 
      appCache.swapCache();
 }
}

localStorage

 
saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', textarea.value);
}, false);
textarea.value = window.localStorage.getItem('value');

Save text value on the client side (crash-safe)

	var el = document.querySelector('#myID');
	// place content from local storage on load if there is one
	el.innerHTML = window.localStorage.getItem('value');

Session Storage

  • use localStorage for persistent storage
  • use sessionStorage for per tab storage

Chrome: view storage: Inspector > Local Storage

  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE 8
  • Well Supported!

Web SQL

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); 
  db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [ ], successCallback, errorCallback);
});

ChromeView your database: Inspector > Resources > Databases

    • Chrome
    • Safari
    • Firefox
    • Opera
    • IE 8
    • Well Supported!

    Index dB

    var indexDatabase = window.indexedDB.open('Database Name');
    indexDatabase.onsuccess = function(event) {
      var db = event.srcElement.result;
      var transaction = db.transaction([], IDBTransaction.READ_ONLY);
      var currRequest = transaction.objectStore('ObjectStore Name').openCursor();
      currRequest.onsuccess = ...;
    };
    
    
    • Chrome 11
    • Safari
    • Firefox 4
    • Opera
    • IE 10

    Another plug....

    Workshop: HTML5 Overview
    Tomorrow, 9:00 am
    Atlantic I
    Brian Sletten

    Geolocation

    function getLocation(){
      if (navigator.geolocation) {
      	  navigator.geolocation.getCurrentPosition(success, error);
    	  console.log('got position');
    	} else {
    	  error('not supported');
    	}
    }
    function error(text){
    	text = text || 'failed';
    	console.log(text); 
     }
    function success(location){
    	 var lat = location.coords.latitude;
    	 var long = location.coords.longitude;
    	 var url = "http://maps.google.com/maps?q="+ lat+","+long; 
    }
    • Chrome 4
    • Safari 5
    • Firefox 3.5
    • Opera 10.6
    • IE 9

    History API

    Load data & change browser address bar (without reloading)

    window.history.pushState(data, title, url) 
    /* Pushes data into history, with title, and, if provided, the URL.*/
    window.history.replaceState(data, title, url) /* Updates current history entry to given data, with title, and, if provided, URL */
    window.history.length /* number of entries in session history */
    
    window.history.state /* current state */
    
    window.history.go( Δ ) /*  back or forward Δ steps */
    
    window.history.back() /* Goes back one step Δ== -1*/
    
    window.history.forward() /* Goes forward one step Δ = 1*/

    Drag and Drop

    document.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text', 'Customized text');
    event.dataTransfer.effectAllowed = 'copy';
    }, false);
    
    • HTML5 & CSS3 for the Real World
    • Drag this text or the image above to the right. You can even change this text.

    Drop Area
    • Chrome 8
    • Safari
    • Firefox 3.5
    • Opera 12?
    • IE
    • mobile: only Android

    File API

    • Import from the filesystem or the web.
    • Create new files from scratch.
    • Manipulate existing file data.
    • Store file data on the client.
    • Publish files back to the web.
    • Chrome 6
    • Safari
    • Firefox 3.6
    • Opera 11.1
    • IE 10
    • mobile: only Android

    Tutorial: Talk from Google I/O

    File API

     <input type="file" id="files" accept="image/*" multiple>
    document.querySelector('#files').onchange = function(e) {
    var files = e.target.files; // FileList of File objects.
    for (var i = 0, f; f = files[i]; ++i) {
    console.log(f.name, f.type, f.size,
    f.lastModifiedDate.toLocaleDateString());
    }
    }; 

    Web Workers

    Create additional javascript threads to run scripts in the background.

    • No access to DOM
    • Allows UI thread to continue

    Web Sockets

    • Full-duplex, bi-directional communication.
    • Both server and client can send data at any time or same time
    • Only data is sent, without HTTP headers (reduces bandwidth.

    JS Events and Methods

    var elements = document.getElementsByClassName(className)
    • Chrome 6
    • Safari
    • Firefox 3
    • Opera
    • IE 9
    • mobile: all
    var element = document.querySelector(selectors);
    var element = $(selectors)[0];
    var elements = document.querySelectorAll(selectors);
    var elements = $(selectors);

    Where 'selectors' is a comma separated list of CSS selectors

    • Chrome 6
    • Safari
    • Firefox 3
    • Opera
    • IE 8
    • mobile: all

    classList

    <article id="main" class="blogpost popup"></article>
    var el = document.getElementById('main').classList;
    var el = document.querySelector('#main').classList;
    el.add('bgimage');
    el.remove('blogpost'); el.toggle('popup'); console.log(el.contains('popup')); // false console.log(el.contains('blogpost')); // false console.log(el.classList.toString() == el.className); // true

    Result:

    <article id="main" class="bgimage"></article>
    • Chrome
    • Safari 5.1
    • Firefox
    • Opera
    • IE 10
    • mobile: Android 3, Opera 11.1

    Notifications

    if (window.webkitNotifications.checkPermission() == 0) {
      window.webkitNotifications.createNotification(picture, title,
          content).show();
    } else {
      window.webkitNotifications.requestPermission();
    }

    Scene 5:
    The End

    Thank you

    Estelle Weyl HTML5 & CSS3 for the Real World Mobile HTML5: Using the Latest Today by Estelle Weyl and Maximiliano Firtman

    www.standardista.com

    @estellevw