The document discusses the choice between building apps with HTML5 versus native apps. It provides an overview of new features in HTML5, including semantic layout tags, custom data attributes, new UI elements, smarter forms, CSS3, canvas graphics, audio/video support, drag and drop, offline storage, geolocation, and responsive web design. HTML5 allows building responsive mobile web experiences through features like media queries and viewport meta tags.

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

3. HTML5
• The latest version of HTML today for
the Modern Web.
• First published by WHATWG (Web
Hypertext Application Technology
Working Group) in 2007.

4. 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.

5. So what are the new features of HTML5?

6. the semantic layout
custom data attributes
new UI tags
intelligent form inputs
CSS3
canvas graphics
audio and video
drag and drop events
offline storage
geolocation

7. 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.

8. 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.

9. <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.

10. 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.

11. 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.

12. 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.

13. 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.

14. 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.

15. 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

17. 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.

18. 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.

19. 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.

20. photos near you
using geo-location, and the Flickr and Google Maps APIs

21. 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.

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

25. responsive web
design
Responsive Web Design, uses liquid layouts and
CSS3 media queries to adapt the layout to the
viewing environment.

26. 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

27. .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;
}