All about HTML5

Press → key to advance.

Zoom in/out: Ctrl or Command + +/-

HTML5*

Web Development to the next level

*Including other next generation technologies of the Web Development stack

HTML5 ~= HTML + CSS + JS APIs

1. What can we do with HTML5* ?

2. Which HTML5* features can we use in MobileStorm ?

3. Which rules should we follow during MobileStorm development ?

*we will talk about Q1+Q2+Q3 together

HTML

Semantics (New tags, Link Relations, Microdata)
Accessibility (ARIA roles)
Web Forms 2.0 (Input Fields)
Multimedia (Audio Tag, Video Tag)
2D and 3D drawing (Canvas, WebGL, SVG)
Simple html code

HTML

New semantic tags

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>

  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <footer>
   Copyright © 2009.
   <time 
   datetime="2009-10-22T13:59:47-04:00" 
   pubdate>
   October 22, 2009 1:59pm EDT
   </time>
  </footer>
</body>

HTML

Example in MobileStorm

<body>
	<div id="header" class="area">
	    #parse("/WEB-INF/decorators/tiles/header.vm")
	</div>
	<div id="navigation" class="area">
	    #parse("/WEB-INF/decorators/tiles/navigation.vm")
	</div>
	<div id="workarea" class="area">
	    $body
	</div>
	<div id="footer" class="area">
	    #parse("/WEB-INF/decorators/tiles/footer.vm")
	</div>
</body>

<body>
	<header id="header" class="area">
	    #parse("/WEB-INF/decorators/tiles/header.vm")
	</header>
	<nav id="navigation" class="area">
	    #parse("/WEB-INF/decorators/tiles/navigation.vm")
	</nav>
	<section id="workarea" class="area">
	    $body
	</section>
	<footer id="footer" class="area">
	    #parse("/WEB-INF/decorators/tiles/footer.vm")
	</footer>
</body>

HTML

Rules we should follow

1. html5 css reset

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
	display:block;
}

2. HTML5 tag for IE

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

HTML

New link relations

<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<link rel='icon' href="/favicon.ico" />
<link rel='pingback' href="http://myblog.com/xmlrpc.php">
<link rel='prefetch' href="http://myblog.com/main.php">
...

<a rel='archives' href="http://myblog.com/archives">old posts</a>
<a rel='external' href="http://notmysite.com">tutorial</a>
<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>
<a rel='tag' href="http://myblog.com/category/games">games posts</a>
...

HTML

Rules we can follow

http://diveintohtml5.org/semantics.html#new-relations

HTML

Microdata

<div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop='name'>Neil</span>.</p>
 <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>
 <p>I am <span itemprop='nationality'>British</span>.</p>
</div>

HTML

New form field types

Implemented

Dedicated UI:
              
<input type='range' min='0' max='50' value='0' /> 
<input results='10' type='search' /> 
<input type='text' placeholder='Search inside' /> 

Input Validation:

<style> :invalid { background-color: red; } </style>
<input type='color' /> 
<input type='number' /> 
<input type='email' /> 
<input type='tel' /> 
etc...

Not yet

<meter>
<progress>
<output>
etc...

HTML

Audio + Video

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;

<video src='movie.mp4' autoplay controls></video>
document.getElementById("video").play();

HTML

Canvas

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);
  
  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

HTML

Canvas example

HTML

Canvas 3D (WebGL)

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var gl = document.getElementById("canvas").getContext("experimental-webgl");
  gl.viewport(0, 0, canvas.width, canvas.height);
  ...
</script>

HTML

SVG(Scalable Vector Graphics) in HTML5

<html>
  <svg>
    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" 
        fill="url(#myGradient)"
        onmousedown="alert('hello');"/>
  </svg>
</html>

HTML

SVG example

HTML

Simple html code

<!DOCTYPE html PUBLIC "-//W3C//DTD 
  XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/
  DTD/xhtml1-strict.dtd">

<html 
  xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" 
  content="text/html; charset=UTF-8" />

<style type="text/css">

<script type="text/javascript">



<!DOCTYPE html>




<html>


<meta charset="UTF-8" />

<style>

<script>

CSS

Selector, Pseudo
Typography
Visuals
Transitions, transforms and animations

CSS

CSS Selectors

Selectors

.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}

Row 1

Row 2

Row 3

Row 4

Image-like display

div {
  display: inline-block;
}

Specific attributes

input[type="text"] {
  background: #eee;
}

Negation

:not(.box) {
  color: #00c; 
}            
:not(span) {
  display: block; 
}

More specific targetting

h2:first-child { ... }

div.text > div { ... } 
h2 + header { ... }

Different browser support different font type

CSS

New font support

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

@font-face {
  font-family: 'Droid Sans';
  src: url(Droid_Sans.ttf);
}

header {
  font-family: 'LeagueGothic';
}

LeagueGothic font with no image replacement

Firefox don't support!! But even IE6 support it!! Not included in W3C css3 working draft...

CSS

Text wrapping

div {
  text-overflow: ellipsis;
}

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Play with the slider on this and further pages!

Webkit and Firefox Support. IE, even IE9 can't support. But we can use it as a progress enhancement.

CSS

Columns

-webkit-column-count: 2; 
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

In March 1936, an unusual confluence of forces occurred in Santa Clara County.

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

Then came the wind.

It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...

CSS

Text stroke

div {
	-webkit-text-fill-color: black;
	-webkit-text-stroke-color: red;
	-webkit-text-stroke-width: 0.00px; 
}

Text stroke example

IE9 will support it. IE6-8 can use filter

CSS

Opacity

  color: rgba(255, 0, 0, 0.75); 
  background: rgba(0, 0, 255, 0.75); 
  /*For IE*/
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorstr=#BF0000FF,endColorstr=#BF0000FF)"; /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#BF0000FF,endColorstr=#BF0000FF);   /* IE6 & 7 */
  zoom: 1;

Independent opacity

IE9 won't support it. We can use RGBA as a replacement

CSS

Hue/saturation/luminance color model

color: hsla(
  128, 
  75%, 
  33%, 
  1.00);

HSL example

IE9 will support it. We can use it as a progress enhancement

CSS

Rounded corners

  border-radius: 0px;

Example

We can use filter in IE to support linear gradient

IE don't support and we still need a background image for IE

CSS

Gradients

background: -webkit-gradient(linear, left top, left bottom, 
                             from(#00abeb), to(white), 
                             color-stop(0.5, white), color-stop(0.5, #66cc00))

background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))

Not sure IE9 will support it. We can use it as a progress enhancement

CSS

Shadows

text-shadow: 
  rgba(64, 64, 64, 0.5) 
  0px 
  0px 
  0px; 
box-shadow: 
  rgba(0, 0, 128, 0.25) 
  0px 
  0px 
  0px;

Shadows example

CSS

Instant Web 2.0 (just add sliders)

text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px; 

background: 
  -webkit-gradient(linear, left top, left bottom, 
                   from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));

border-radius: 0px; 

-webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom, 
                   from(transparent), to(rgba(255, 255, 255, 0)));

Web 2.0 Logo Creatr

CSS

Background enhancements

Background sizing

#logo {
  background: url(logo.gif) center center no-repeat;
  background-size: 
    ;
}

Resize me! »

Multiple backgrounds

div {
  background: url(src/zippy-plus.png) 10px center no-repeat, 
              url(src/gray_lines_bg.png) 10px center repeat-x;
}

Test

IE won't support it. FireFox4+ will support it. So we can still use javascript to do this effect.

CSS

Transitions

#box.left {
  margin-left: 0;
}
#box.right {
  margin-left: 1000px;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right';

#box {
  -webkit-transition: margin-left 1s ease-in-out;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right';

CSS

Transforms

Hover over me:

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)

#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}

Now press 3!

Firefox can't support. We can still use javascript

CSS

Animations

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

*Please make a better use of it. We don't want a new blink tag ;)

Pulse!

CSS

Others-Box Sizing

Allows you to change the way the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation.

#box-sizing {
	padding: 0 30px 0 30px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

CSS

Others-Border Image

Allows a repeating or stretched image to appear on the border of an element.

#border-image {
	border-width: 20px;
	-webkit-border-image: url(border-image.gif) 
	50 50 50 50 round round;
	-moz-border-image: url(border-image.gif) 
	50 50 50 50 round round;
	border-image: url(border-image.gif) 
	50 50 50 50 round round; /* for Opera */
}

Border Image

CSS

Others-::selection

Allows the ability to change text color or background color on selected text.

.example-textselect p::selection {
	background: #50bc6b; /* for WebKit & Opera */
}

.example-textselect p::-moz-selection {
	background: #50bc6b; /* for Firefox */
}

Border Image

IE9 won't support. But we can still use it to clear webkit browser default style for form element.

CSS

Others-outline

If an element has an outline property set, the outline can be offset by a specified number of pixels.(anchor, form element)

#offset {
	outline: solid 1px #fff;
	outline-offset: 5px;
}
#foc:focus {
	outline: none;
}

CSS

Rules we can follow

.some-element {
	border: 1px solid #FFF;
	width: 500px;	
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

JS APIs

Client Side Storage (Web SQL Database, App Cache, Web Storage)
Communication (Web Sockets, Worker Workers)
Desktop experience (Notifications, Drag and Drop API)
Geolocation

IE9 support. IE8 only can't support getElementsByClassName. But we are using JQuery!!

JS APIs

New Selectors

Finding elements by class (DOM API)

var el = document.getElementById('section1');
el.focus();

var els = document.getElementsByTagName('div');
els[0].focus();

var els = document.getElementsByClassName('section');
els[0].focus();

Finding elements by CSS syntax (Selectors API)

var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");

JS APIs

Web Storage

// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

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

JS APIs

Web SQL Database

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

See the generated database: Developer > Developer Tools > Storage

JS APIs

Application Cache

<html manifest="cache.manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);

CACHE MANIFEST

# version 1

CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

Turn off your internet connection and refresh!

JS APIs

Web Workers

main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function(event) { alert(event.data); };

extra_work.js:
  // do some work; when done post message.
  postMessage(some_data);

Loading Route...

Try to drag the map while calculating the complex route (you will only be allowed to do that if you use workers)

Another example

IE won't support it! Firefox4+ support it! Safari5+ support it and Chrome4+ support it

JS APIs

Web Sockets

var socket = new WebSocket(location);
socket.onopen = function(event) {
  socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

Bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket, designed to be implemented in web browsers and web servers.

JS APIs

Notifications

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title, 
      tweet.text).show();
} else {
  window.webkitNotifications.requestPermission();
}

Note: Use this button if you also want to reset the permissions

Enter your twitter user name to show your last tweet as a notification

IE won't support it. But we can use it on moblie phone browser and don't care IE

JS

Geolocation

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var options = { position: new google.maps.LatLng(lat, lng) }
    var marker = new google.maps.Marker(options);
    marker.setMap(map);
  });
}

JS APIs

Drag and drop

document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);

Select text and drag (original text will be dropped)
Select text and drag (dragged text data will be altered from original)

Source Data

Drop Area

IE won't support it. But we can use it as a progress enhancement.

JS APIs

Drag And Drop File Upload

Firefox 3.6+:

Firefox 4+:

Chrome & Safari:

Chrome Frame

Minimal effort for bringing IE6, 7 and 8 up to the latest HTML5 technologies
Two ways to get your websites ready for Chrome Frame:

Client side:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Server side:

X-UA-Compatible: chrome=1

Try to load this presentation in IE!

HTML5 ~= HTML + CSS + JS APIs

HTML5 = Next Generation Features for Modern Web Development