HTML5/CSS3

Welcome to the semantic and media rich web.

About me

Ryan Dy

Developer at Pivotal

What is it?

A specification that brings together new javascript APIs, HTML and CSS to allow for much richer content for the websites/applications.

How do you start using it?

<!DOCTYPE html>

Backwards compatible today across the major browsers
Switches the browser into standards mode.

Why should I use it?

What parts are ready?

How can we use it today?

Browser support for html5?

You can check that here

http://html5test.com/

Or for an interesting visualization

http://html5readiness.com/

DOM

Put data in the DOM with data attributes

<div data-money="10"></div>
<div data-love="5"></div>

Very useful for UJS, don't need to use rel or rev attributes.
Is the DOM the appropriate place to store your object data?

There are many new semantic tags to use to describe your markup

<header></header>
<footer></footer>
<section></section>
<article></article>
<aside></aside>
<nav></nav>

Some new media content types

<video></video>
<audio></audio>
<canvas></canvas>

Old style way of embedding media with flash

<object codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" height="27" width="400" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
    <param name="_cx" value="10583"><param name="_cy" value="714"><param name="FlashVars" value="">
    <param name="Movie" value="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://full/path/to/music.mp3">
    <param name="Src" value="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://full/path/to/music.mp3">
    <param name="WMode" value="Window"><param name="Play" value="0">

    <param name="Loop" value="-1">
    <param name="Quality" value="High">
    <param name="SAlign" value="LT">
    <param name="Menu" value="-1">
    <param name="Base" value="">
    <param name="AllowScriptAccess" value="never">
    <param name="Scale" value="NoScale">
    <param name="DeviceFont" value="0">
    <param name="EmbedMovie" value="0">

    <param name="BGColor" value="">
    <param name="SWRemote" value="">
    <param name="MovieData" value="">
    <param name="SeamlessTabbing" value="1">
    <param name="Profile" value="0">
    <param name="ProfileAddress" value="">
    <param name="ProfilePort" value="0">
    <param name="AllowNetworking" value="all">
    <param name="AllowFullScreen" value="false">

    <embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://full/path/to/music.mp3" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" pluginspage="http://www.macromedia.com/go/getflashplayer" height="27" width="400" />
</object>

New style with HTML5

<audio controls>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
</audio>

Some issues with support of codecs

Competing video standards

VP8/Theora/h.264
Ogg Vorbis/mp3
HTML 5 spec doesn’t recommend any encoder over another.
IE9 will support the VP8 codec with a plugin

What to do about video/audio codecs?

Transcode video/audio in multiple formats and store both versions.

Fallback to flash if you don't have support

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback/

New attributes and types for

<input/>

min
max
autofocus
placeholder
support for regular expressions.
new types for url, email, date and time.

Want to use it today?

http://code.google.com/p/webforms2/

Drawing

SVG
canvas

SVG has the concept of a scene graph

If an attribute for an object changes the SVG can re-render the scene automatically.
SVG DOM can be represented in XML.

All major modern web browsers except IE support and render SVG markup directly. IE9 will support and render SVG directly.

For static drawing today use SVG. Support for animation is coming with SMIL (Synchronized Multimedia Integration Language) for Chrome and Firefox. This is also known as SVG+time.

Canvas is a new element for rendering bitmaps

<canvas></canvas>

scriptable rendering of shapes and bitmaps
rasterizes to a bitmap

It is manipulated with a javascript API that acts on the canvas element.

http://developer.mozilla.org/en/Canvas_tutorial

Currently canvas describes a 2D API but 3D API might be supported as WebGL (using OpenGL ES 2.0)

Performance of canvas vs SVG

canvas is lower level and generally faster
SVG could be implemented with canvas
SVG better with large static content
Scene graph can optimize drawing over a large viewport

"Whether or not you use Canvas or SVG mostly depends on your specific application. A graphics-intensive game, where many objects are redrawn all the time is probably best implemented in Canvas. On the other hand, applications like map viewers may involve large rendering areas and might lend themselves better to SVG."

http://www.borismus.com/canvas-vs-svg-performance/

Other interesting libraries for drawing today

Support for SVG 1.1 and SMIL using Flash for IE http://code.google.com/p/svgweb/
SVG support and VML for IE http://raphaeljs.com/
Image/Animation library build on Canvas, no built-in support for IE (excanvas through VML) http://processingjs.org/
Canvas support using VML for IE http://excanvas.sourceforge.net/

Javascript

Drag and Drop

dragstart
drag
dragenter
dragover
dragleave
drop
dragend
http://decafbad.com/blog/2009/07/15/html5-drag-and-drop

Application Store

<html manifest="cache-manifest">

<script type="text/javascript">
  window.applicationCache
  .addEventListener(
    'checking',
    updateCacheStatus, 
    false
  );
</script>

Data Store

key/value storage for your site
web sql db
Firefox 4 and Native JSON Store

Geolocation

Simple API, easy integration point with existing JS map libraries.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    alert([position.coords.latitude, position.coords.longitude].join(' '));
  });
}

http://maxheapsize.com/static/html5geolocationdemo.html

Webworkers

Similar to gears workers
http://www.whatwg.org/specs/web-workers/current-work/

Websockets

bi-directional, full-duplex communications channels
over a single TCP socket
Not officially part of the HTML5 spec anymore but still interesting.
http://www.w3.org/TR/websockets/
Coming in Firefox 3.7

An example of websockets and other fun HTML5 goodies from google.

http://www.youtube.com/watch?v=XhMN0wlITLk

CSS3

@fontface

@font-face {
    font-family: Delicious;
    src: url('Delicious-Roman.otf');
}

h3 { font-family: Delicious, sans-serif; }

Check out typekit or google webfonts

http://typekit.com/
http://code.google.com/webfonts

Selectors

nth-child
[type="text"]
:not()
:first-child, :last-child

Display

inline-block

Borders

border-image: url(border.png) 27 27 27 27 round round;
border-radius: 5px;
box-shadow: 10px 10px 5px #888;

Backgrounds

background: url(body-top.gif) top left no-repeat,
  url(banner_fresco.jpg)  top 11px no-repeat,
  url(body-bottom.gif) bottom left no-repeat,
  url(body-middle.gif) left repeat-y;

Color and Opacity

hsl(0, 50%, 100%)
rgba(255, 0, 0, 1)
opacity: 0.2;

User-interface

box-sizing: padding-box;
resize: both;
outline: 1px solid #AAA;

Text effects

text-shadow: #6374AB 20px -12px 2px;
text-overflow: ellipsis;
word-wrap: break-word;

Transforms

transform: rotate(9deg);
transform: translate(-30px,10px);
transform: scale(2);
transform: translate3d(0, 0, 90deg);
transform: perspective(500px);

Transitions

transition: opacity 1s linear;
transition-property: opacity, left;
transition-duration: 2s, 4s;

Animation

#example-6:hover {
  -webkit-animation: 'wobble' 2s;
}
@keyframes 'wobble' {
  0 {
    margin-left: 0;
  }
  40% {
    margin-left: 15px;
  }
  60% {
    margin-left: 75px;
  }
  100% {
    margin-left: 100px;
  }
}

space, →	next slide
←	previous slide
d	debug mode
## <ret>	go to slide #
c	table of contents (vi)
f	toggle footer
r	reload slides
z	toggle help (this)

HTML5/CSS3

Welcome to the semantic and media rich web.

About me

Ryan Dy

Developer at Pivotal

What is it?

How do you start using it?

Why should I use it?

What parts are ready?

How can we use it today?

Browser support for html5?

You can check that here

http://html5test.com/

Or for an interesting visualization

http://html5readiness.com/

DOM

Put data in the DOM with data attributes

There are many new semantic tags to use to describe your markup

Some new media content types

Old style way of embedding media with flash

New style with HTML5

Some issues with support of codecs

Competing video standards

What to do about video/audio codecs?

Fallback to flash if you don't have support

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback/

New attributes and types for

Want to use it today?

http://code.google.com/p/webforms2/

Drawing

SVG has the concept of a scene graph

All major modern web browsers except IE support and render SVG markup directly. IE9 will support and render SVG directly.

For static drawing today use SVG. Support for animation is coming with SMIL (Synchronized Multimedia Integration Language) for Chrome and Firefox. This is also known as SVG+time.

Canvas is a new element for rendering bitmaps

It is manipulated with a javascript API that acts on the canvas element.

http://developer.mozilla.org/en/Canvas_tutorial

Currently canvas describes a 2D API but 3D API might be supported as WebGL (using OpenGL ES 2.0)

Performance of canvas vs SVG

http://www.borismus.com/canvas-vs-svg-performance/

Other interesting libraries for drawing today

Javascript

Drag and Drop

http://decafbad.com/blog/2009/07/15/html5-drag-and-drop

Application Store

Data Store

Geolocation

Simple API, easy integration point with existing JS map libraries.

http://maxheapsize.com/static/html5geolocationdemo.html

Webworkers

Websockets

An example of websockets and other fun HTML5 goodies from google.

http://www.youtube.com/watch?v=XhMN0wlITLk

CSS3

@fontface

Check out typekit or google webfonts

Selectors

Display

Borders

Backgrounds

Color and Opacity

User-interface

Text effects

Transforms

Transitions

Animation

Awesome demos of CSS animations

http://www.tylergaw.com/lab/themanfromhollywood/

http://webkit.org/blog-files/3d-transforms/morphing-cubes.html

See http://www.css3.info

Problems With HTML5

Where HTML5/CSS3 most appropriate

Degrade everything for best user experience cross browser

What about more complex features?

Questions?