What is HTML5?

The evolution of HTML for rich web applications

HTML5 is more than just HTML

  • An update to the HTML markup language (elements and attributes added and removed)
  • Some web application APIs

Organisations and Standards

  • WHATWG defines "HTML: The Living Standard"
  • W3C defines HTML5
  • W3C forked from WHATWG at some point in the past

All you need is <!DOCTYPE html>

These slides are HTML5

New elements

Examples of new semantic/structural elements

  • <section> - indicates a section of the web page
  • <article> - indicates an independent piece of content
  • <header> - indicates header content - titles, etc.
  • <footer> - indicates content in the footer, e.g. copyright
  • <nav> - indicates navigational separation

Examples of other new elements

  • <video> - indicates a section of the web page
  • <audio> - indicates an independent piece of content
  • <canvas> - used to draw with Javascript

DOM Query Selector

Query Selectors

var elts = document.querySelectorAll('div');
var elt = document.querySelector('#elementId');
var elts = document.querySelectorAll('.elementClass');
var input = element.querySelector('input[type=file]');

New element: datalist

<input list="newElementTypes" />
<datalist id="newElementTypes">
  <option value="section"/>
  <option value="header"/>
  <option value="footer"/>
  <option value="progress"/>
</datalist>

Example

Start typing, it should autocomplete

New element: progress

<progress value="0" id="progressBar" max="100"></progress>
    
document.querySelector('#progressBar').value += 10;

Example

New element: canvas

<canvas id="canvas" width="320" height="240"></canvas>
    
var c = document.querySelector('#canvas');
var ctx = c.getContext('2d');
ctx.drawImage(someImage, 0, 0);

Example

To change the picture, load an image on slide 12

New features

We saw datalist, progress and canvas

There are many more, like

  • Data attributes: <div class="entry" data-entryId="1234">
  • Input element types: <input type="text|number|email|tel" />
  • Inline SVG: <svg>...</svg>

New API: Geolocation

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    successFunction, errorFunction, {timeout: 5000});
} else {
  console.log('Geolocation is not supported.');
}

Example

New API: Local Storage

if (window.localStorage) {
  window.localStorage.setItem('key', 'value');
  value = window.localStorage.getItem('key');
} else {
  console.log('Local storage is not supported.');
}

Example

New API: File

if (window.FileReader) {
  var reader = new FileReader();
  reader.readAsDataURL(document.getElementById('file').files[0]);
  reader.onload = function(event) {
    // do something with the content
  };
  reader.onerror = function() {
    // let the user know something went wrong
  };
} else {
  console.log('File API is not supported.');
}

Example

New features

We saw Geolocation, Local Storage and File API

There are many more, like

  • WebSockets: var socket = new WebSocket('ws://someUrl'); - connect to a WebSocket server
  • WebSQL: var db = window.openDatabase(name, version, description, size); - create or open an sql-like database client-side
  • Offline support: <html manifest="mymanifest"> - instructs what to cache

CSS3

Web Fonts

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), url(url_to_ttf_file) format('truetype');
}

OR

@import url(http://fonts.googleapis.com/css?family=Cinzel+Decorative);

THEN

p {
  font-family: "Droid Sans", Arial, sans-serif;
}

CSS3

Rounded corners

.roundedButton { 
  border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px solid #bbb;
  background: #c0c0c0;
}

CSS3

Transitions

#movingBox {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;

  background: red;
  height: 50px;
  width: 50px;
}
      
document.querySelector('#movingBox').style.background = 'blue';
document.querySelector('#movingBox').style.width = '100px';

 

CSS3

Transforms

#movingBox {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;

  background: red;
  height: 50px;
  width: 50px;
}
      
document.querySelector('#movingBox').style['-moz-transform'] = 'rotateX(45deg)';

 

New features

We saw Web Fonts, Rounded Corners, Transitions and Transforms

There are many more, like

  • Selectors: input[type="text"] - select input elements with the attribute type set to text
  • Selectors: tr:nth-child(even) - select even-numbered table rows
  • Selectors: div:not(.someClass) - select div elements with class other than someClass
  • Shadows: text-shadow and box-shadow - drop shadow for text and boxes

Responsive Design

The problem

  • Many devices, many screen sizes (the 4-screen world)
  • You want your site to display properly across devices

You have some options

  • Write a different site or sub-site for mobile
  • Write one site and adapt to the screen size

Adapting to the screen size

  • You could detect the dimensions of the screen and show/hide content
  • You could size things based on screen size
  • You could use media queries

Media Queries

@media only screen and (min-width: 320px) and (max-width: 479px) {
  /* Screen is 320-480px wide */
}
@media only screen and (min-width: 480px) {
  /* Screen is more than 480px wide */
}

You can apply style based on a number of criteria

  • min-resolution
  • orientation
  • min-device-pixel-ratio

Some pointers

  • Use relative sizes (% widths, font sizes in em)
  • Develop with the most constrained environment in-mind (mobile first)
  • Constrain the viewport (disable zooming) like this:
<meta name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1">
  • Commonly targeted sizes
    • 320px, 480px, 600px, 768px, 900px, 1200px
  • Make sure the browser supports a feature before using it

Summary

  • There's a lot of cool stuff now available without plugins
  • New HTML5 elements, new Javascript APIs and new CSS3 capabilities
  • This was an easy intro and small sample
  • Major caveat: browser support can differ

Useful links:

<Thank You!>