a brief introduction on html5 and responsive layouts

http://www.smh.com.au/it-pro/business-it/html5-or-native-app-that-is-the-question-for-app-owners-20120907-25ig4.html

HTML5

• The latest version of HTML today for the Modern Web.

• First published by WHATWG (Web Hypertext Application Technology Working Group) in 2007.

a living standard• HTML5 is considered to be a living

standard.

• This is because WHATWG is a community driven body, and the process of defining that standard is open.

• Some features, such as the <canvas> tag, were introduced by vendors, than adopted as part of the standard.

So what are the new features of HTML5?

the semantic layoutcustom data attributesnew UI tagsintelligent form inputsCSS3canvas graphicsaudio and videodrag and drop eventsoffline storagegeolocation

the semantic layout• A new group of HTML tags allows you

to build your Web page using a semantic layout.

• This means that logically grouped sections have equally logical tags.

• e.g. Headers and footers are wrapped in <header> and <footer> tags. Sections and contents can be enclosed in <section> and <article> tags.

custom data attributes

• Custom data attributes allow you to store custom, arbitrary data inside your HTML elements.

• This is incredibly useful if you need data to be stored statefully within your elements.

<img data-flickr-photo-id="7953435190" alt="Tacoma Hipsters" src="http://farm4.staticflickr.com/3173/2768042395_5208451c4e_o.jpg" />

• alt : Alternate, placeholder text of the image.

• src : The URL of the image.

• data-flickr-photo-id : The data attribute of the element, indicating the Flickr ID of the image.

new UI tags• HTML5 also introduces a few new user

interface (UI) tags.

• e.g., the <mark> tag for highlighting text, <figure> and <figcaption> for providing new details to images, <meter> and <progress> to display static meters and progress bars.

smarter forms• Form inputs allow your users to

‘submit’ data to your site and post it back to the server.

• HTML5 allows much more intelligent form fields that restrict date entry to specific input formats.

• For example, you can enforce numbers, number ranges, dates, e-mail addresses and URLs within form fields.

CSS3

• New styles such as gradients, box shadows etc. without the use of images.

• Also a much more powerful way of selecting individual attributes.

• You can also create transformations, transitions and animations.

canvas graphics

• The <canvas> element, and the Canvas API, can be used to dynamically create graphics within the browser.

• Originally designed to compete directly with Adobe Flash.

• HTML5 also has an experimental specification called WebGL, that allows for 3D graphics within the Web browser.

audio and video support

• Via the use of the <audio> and <video> tags, allowing for media playback within the browser without the use of Flash.

drag and drop events• The ability to respond to drag and drop

events in JavaScript allows for the creation of desktop-like experiences : “Web Apps” within the browser.

• e.g. In Vimeo, you can upload videos by dragging files into the browser from your desktop

offline storage• For many years, cookies have been

used as a way to store information within a user’s Web Browser.

• The Web Storage API is the HTML5 version of this, being simpler and more powerful.

• WebSQL and IndexedDB allow for database-style storage within the browser.

offline detection / synchronisation

• HTML5 allows for your website / Web App to work offline.

• It does this by creating an offline copy of your site and syncing it with the online copy there’s an Internet connection.

• Creates the illusion that your Web App is always available.

geolocation

• You can use the browser’s geolocation API to provide information and guidance about a user’s physical location.

• These can be tied into other services, such as Google Maps, to provide location-based Web content to you.

photos near youusing geo-location, and the Flickr and Google Maps APIs

web workers• A way of providing multithreading

support in JavaScript.

• For example, a CPU intensive Web Worker (such as one that applies graphics filters and effects to images) can be spawned, allowing the main thread that controls the UI to be free and responsive.

“HTML5 or native app?”an examination of semantic elements

responsive web design

Responsive Web Design, uses liquid layouts and CSS3 media queries to adapt the layout to the

viewing environment.

This stylesheet gets ‘activated’ when the screen size is below a certain width<head> <meta charset="utf-8"> <title>HTML5 or Native App?</title> <link rel="stylesheet" media="all" href="styles.css" type="text/css" /> <link rel="stylesheet" media="screen and (max-width: 500px)" href="mobile.css" type="text/css" /> <meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head>

Add a new stylesheet, mobile.css

.wrap { margin: 5px; width: 100%;}

hgroup { padding-bottom: 20px; border-bottom: 1px dotted #aaa; margin-bottom: 20px;}

hgroup h1 { font-size: 32px;}

hgroup h2 { display: none;}

aside { display: none;}

figure { float: none; margin-left: auto; margin-right: auto;}