Better UIs with HTML5 and CSS3

Victor Costan

Contents

  • Introduction
  • New Markup
  • APIs
  • CSS3
  • Wrap-Up

Introduction

Your Instructors

What is HTML5?

Depending on who you ask, any of the following:

Why Care

New Markup

Forms 2.0

Let’s improve this form.

<form action="/register">
  <dl>
    <dt><label for="email">Email</label></dt>
    <dd><input type="text" name="email" id="email" /></dd>
    <dt><label for="password">Password</label></dt>
    <dd><input type="password" name="password" id="password" /></dd>
    <dt><label for="confirm">Password Confirmation</label></dt>
    <dd><input type="password" name="confirm" id="confirm" /></dd>
  </dl>
  <p><input type="submit" value="Sign in" /></p>
</form>

code/register_plain.html

New Form Fields

What’s better about this version?

<form action="/register">
  <dl>
    <dt><label for="email">Email</label></dt>
    <dd><input type="email" name="email" id="email" /></dd>
    <dt><label for="password">Password</label></dt>
    <dd><input type="password" name="password" id="password" /></dd>
    <dt><label for="confirm">Password Confirmation</label></dt>
    <dd><input type="password" name="confirm" id="confirm" /></dd>
  </dl>
  <p><input type="submit" value="Sign in" /></p>
</form>

code/input_email.html

Hint: imagine using it on an iPhone.

New Form Fields

type="search"
type="number" min="0" max="10" step="2"
type="range" min="0" max="10" step="2"
type="tel"
type="url"
type="email"
type="date"
type="time"

New Form Attributes: placeholder

<form action="/register">
  <dl>
    <dt><label for="email">Email</label></dt>
    <dd><input type="email" name="email" id="email"
               placeholder="we won't spam you" /></dd>
    <dt><label for="password">Password</label></dt>
    <dd><input type="password" name="password" id="password"
               placeholder="be clever" /></dd>
    <dt><label for="confirm">Password Confirmation</label></dt>
    <dd><input type="password" name="confirm" id="confirm"
               placeholder="say that again?" /></dd>
  </dl>
  <p><input type="submit" value="Sign in" /></p>
</form>

code/placeholder.html

New Form Attributes: placeholder

New Form Attributes: autofocus

<form action="/register">
  <dl>
    <dt><label for="email">Email</label></dt>
    <dd><input type="email" name="email" id="email"
               placeholder="we won't spam you"
               autofocus="autofocus" /></dd>
    <dt><label for="password">Password</label></dt>
    <dd><input type="password" name="password" id="password"
               placeholder="be clever" /></dd>
    <dt><label for="confirm">Password Confirmation</label></dt>
    <dd><input type="password" name="confirm" id="confirm"
               placeholder="say that again?" /></dd>
  </dl>
  <p><input type="submit" value="Sign in" /></p>
</form>

code/autofocus.html

Form Validation: required

<form action="/register">
  <dl>
    <dt><label for="email">Email</label></dt>
    <dd><input type="email" name="email" id="email"
               placeholder="we won't spam you"
               autofocus="autofocus" required="required"/></dd>
    <dt><label for="password">Password</label></dt>
    <dd><input type="password" name="password" id="password"
               placeholder="be clever" required="required" />
    </dd>
    <dt><label for="confirm">Password Confirmation</label></dt>
    <dd><input type="password" name="confirm" id="confirm"
               placeholder="say that again?" required="required" />
    </dd>
  </dl>
  <p><input type="submit" value="Sign in" /></p>
</form>

code/required.html

Form Validation: pattern

<form action="/register">
  <dl>
    <dt><label for="email">Email</label></dt>
    <dd><input type="email" name="email" id="email" pattern=".+@.+\..+"
               placeholder="we won't spam you"
               autofocus="autofocus" required="required"/></dd>
    <dt><label for="password">Password</label></dt>
    <dd><input type="password" name="password" id="password"
               placeholder="be clever" required="required"/></dd>
    <dt><label for="confirm">Password Confirmation</label></dt>
    <dd><input type="password" name="confirm" id="confirm"
               placeholder="say that again?" required="required" />
    </dd>
  </dl>
  <p><input type="submit" value="Sign in" /></p>
</form>

code/pattern.html

pattern takes regular expressions.

Form Demos

Rich Text Editor

<p>This is a paragraph.</p>

<textarea name="email_body">
This is a lame text editor.
</textarea>

<p contentEditable="true" id="email_body">
  This is a rich text editor.
</p>

code/contenteditable.html

Rich Text Editor

Sadly, contentEditable="true" elements are not form fields.

Full demo at quirksmode

Semantic Tags

<div id="header">
  <div id="navigation">
     ...
  </div>
</div>
<div id="footer">
  ...
</div>

Semantic Tags

<header>
  <nav>
     ...
  </nav>
</header>
<footer>
  ...
</footer>

Semantic Tags

<article> <aside> <header>
<hgroup> <footer> <section>
<nav> <figure> <figcaption>
<mark> <summary>

Custom Attributes

<form action="/register" id="register_form" data-method="put">
<!-- truncated -->
</form>

<script type="text/javascript" src="data_attributes.js">
</script>

code/data_attributes.html

var methodValue =
    document.getElementById('register_form').dataset.method
console.log(methodValue);

code/data_attributes.js

APIs

Better DOM APIs

getComputedStyle(document.querySelector('body')).width

Local Storage

(function() {
  var counter = localStorage.getItem("visit-counter") || "0";
  counter = parseInt(counter) + 1;
  localStorage.setItem("visit-counter", counter);  
  document.getElementById("counter").innerHTML = counter;
})();

code/localstorage.js

Demo (only Chrome has local storage for files)

Geolocation

var onSuccess = function (position) {
  var coords = position.coords;
  var positionString = "at " + coords.latitude + ", " + coords.longitude;
  document.getElementById("location").innerHTML = positionString;   
}
var onError = function (error) { alert(error); }
navigator.geolocation.getCurrentPosition(onSuccess, onError);

code/geolocation.js

Demo, or see a fancier one at HTML5demos

Offline Access

<!DOCTYPE html>
<html manifest="/cache.manifest">
</html>

Serve the manifest as MIME type text/cache-manifest

CACHE MANIFEST
# version 1295004505.312194
NETWORK:
/tracking
FALLBACK:
/ /offline.html
CACHE:
/stylesheets/all.css
/javascripts/all.js

code/cache.manifest

Events on window.applicationCache

Many More

CSS3

Remember: Progressive Enhancement

Think elevators vs. escalators.

Which One Looks Better?

border-radius

Demo: CSS3 Controls

submission site :)

Demo: CSS3 Controls

.css3forms input[type=submit] {
	margin: 0;
	padding: 1px 6px;	
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: 0px 1px 3px #EABA99;
  -moz-box-shadow: 0px 1px 3px #EABA99;
  -webkit-box-shadow: 0px 1px 3px #EABA99;  
  background-color: #CA5200;
  border: 1px solid #983E00;
  color: #FFFFFF;
  font-size: 11pt;
  font-weight: bold;
}
.css3forms input[type=submit]:hover {
  color: #F4DCCC;
}
.css3forms input[type=submit]:active {
  background-color: #CA5200;
  box-shadow: inset 0px 2px 2px #983E00;
  -moz-box-shadow: inset 0px 2px 2px #983E00;
  -webkit-box-shadow: inset 0px 2px 2px #983E00;
}

code/controls.css

Demo: CSS3 Generator

css3generator.com

Demo: CSS3 Transformations

westciv.com/tools/transforms

Wrap-Up

Contact Information

Victor Costan

Demos

Presentation Resources

Slides and Code

References