HTML5 in Real World Applications

HTML5 in Real World Applications #12NTChtml5

Frank Livaudais #franklivaudais

#franklivaudais #12NTChtml5

Slide 1

Evaluate This Session! Each entry is a chance to win an NTEN engraved iPad!

or Online using #12NTChtml5 at www.nten.org/ntc/eval


http://www.nten.org/ntc/eval


Slide 2

HTML5


Slide 3

Rough Timeline of Web Technologies

1991 1996 1998

2000 2005

2002

1994 1997

2009

HTML

HTML 2

CSS 1 + JavaScript

HTML 4

CSS 2

XHTML 1

Tableless Web Design

AJAX

HTML 5


Slide 4

1991 - HTML

First Web Page – Tim Berners-Lee -1991


Slide 5

1994 – HTML2

Apple eWorld - 1994 AOL -1994 Amazon-1994


Slide 6

1996 – CSS, JavaScript

Yahoo - 1996 AltaVista - 1996


Slide 7

1998-2001 – HTML4, CSS2

eBay- 1998 Wikipedia- 2001


Slide 8

2000 – XHTML

Nike - 2000 Yahoo - 2000


Slide 9

2002-2003 – Tableless Design

Microsoft - 2002 Dell- 2003


Slide 10

2004-2005 – DHTML

MySpace 2004 Facebook 2005


Slide 11

2006 - AJAX

Twitter - 2006 iGoogle - 2006


Slide 12

2009-Present – HTML5

Blogger - 2009 Good Housekeeping - Today


Slide 13

Mobile

ESPN

American Airlines

Today


Slide 14

What is HTML5?

This would be nice to have more visual/graphic

vs. text. I defer to your awesomeness ;)

+ + =


Slide 15

New APIs and Tags


Slide 16

HTML5 APIs

Drag & Drop

Inline Editing

Web Sockets

Web Workers

Local Storage

Offline Apps

Messaging

Server Events

Canvas

Video & Audio

Geolocation

History


Slide 17

Geolocation

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

var latLng = new google.maps.LatLng(

position.coords.latitude, position.coords.longitude);

var marker = new google.maps.Marker({position: latLng, map: map});

map.setCenter(latLng);

}, errorHandler);

}


Slide 18

Markup for Applications

<input id="donor-input" placeholder="You should see an autocomplete menu as you type"

list="amounts" />

<datalist id="amounts">

<option value="10" />

<option value=“100" />



</datalist>

Animated Progress bar:

<progress>working...</progress>

Donation Goal tracking:

<progress value="75" max="100”/>


Slide 19

Rich Snippets

Some supported formats:

• Reviews

• People

• Products

• Business and organizations

• Recipes

• Events

• Music


Slide 20

Rich Snippets

<div>

My name is Bob Smith but people call me Smithy. Here is my home page: <a

href="http://www.example.com">www.example.com</a>

I live in Albuquerque, NM and work as an engineer at ACME Corp.

</div>

<div itemscope itemtype="http://data-vocabulary.org/Person">

My name is <span itemprop="name">Bob Smith</span>

but people call me <span itemprop="nickname">Smithy</span>.

Here is my home page:

<a href="http://www.example.com" itemprop="url">www.example.com</a>

I live in

<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">

<span itemprop="locality">Albuquerque</span>,

<span itemprop="region">NM</span> </span>and work as an

<span itemprop="title">engineer</span> at

<span itemprop="affiliation">ACME Corp</span>.

</div>


Slide 21

Rich Snippets http://www.google.com/webmasters/tools/richsnippets

<div itemscope itemtype="http://schema.org/Movie">

<p>Movie Title: <span itemprop="name">Inception</span>.</p>

<p>Average Rating: <span itemprop=”rating">8.8</span>.</p>

<p># of Reviews: <span itemprop=”reviewCount">34,331</span>.</p>

</div>

http://www.google.com/webmasters/tools/richsnippets


Slide 22

New Form Types • email

• date

• range

• search

<input type="text" required />

<input type="email" value="[email protected]" />

<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>

<input type="range" min="0" max="50" value="10" />

<input type="search" results="10" placeholder="Search..." />

<input type="tel" placeholder="(555) 555-5555”

pattern="^$?\d{3}$?[-\s]\d{3}[-\s]\d{4}.*?$" />

<input type="color" placeholder="e.g. #bbbbbb" />

<input type="number" step="1" min="-5" max="10" value="0" />

• tel

• color

• number


Slide 23

Form Types on Mobile

type=“text” type=“number” type=“email” type=“tel”

Android Android iPhone iPhone


Slide 24

Canvas 2D Drawing


Slide 25

Offline Data • sessionStorage

• One session per tab/window

• Temporary key/value pairs

• Replaces cookies for session tracking

• Extensive javascript methods and events

• localStorage

• Global

• Persistent

sessionStorage.setItem(key, value);

sessionStorage.getItem(key);

localStorage.setItem(key, value);

localStorage.getItem(key);


Slide 26

Offline Data • Client Side Databases

• SQLite – structured / relational data

• Asynchronous / call back based

• Fast

• Application Cache

• Store whole app offline (HTML, CSS, JS)

• Atomic updating

• Manifest file


Slide 27

Video and Audio

• Standardized way of embedding media

• Fallback when not supported

• Multiple streams in one element

• Full JavaScript API: errors, network state, controls, readyState, events

• Attributes for controls, poster, autoplay

<video width="320" height="240" controls="controls">

<source src="movie.mp4" type="video/mp4" />

<source src="movie.ogg" type="video/ogg" />

Your browser does not support the video tag.

</video>


Slide 28

versus


Slide 29

Where is the traffic coming from?

Side Door: Google, Facebook, Bing, Twitter

Direct but intermittent

Direct: Bookmark or URL

Type of Traffic Technology to Use

Side Door: Search/Social HTML5 Mobile Web

Direct Native App

50/50 Both


Slide 30

Native Apps: The Good

User experience – Better swipe events

– Multi-touch support

Access to device hardware – GPS/Compass

– Camera/Microphone

– Accelerometer/Gyroscope

Background APIs – Audio/VOIP

– Push notifications

High-performance 3D graphics (OpenGL)

Webserver not required


Slide 31

Native Apps: The Bad

Rigid advertising model (iAds)

Apple’s 30% in-app purchase tax

Apple doesn’t share subscriber data

App Store approval process – Required for app updates

– Rejection for non-compliance

Managing deployment configurations

Esoteric tool set (Xcode/Objective-C)

Content accessibility – Searchable on Google?

– Can I share a link to your content?


Slide 32

HTML5 Apps: The Good

App update path: hit refresh

Small number of deployment configurations

Development costs – Similar skill set as traditional site

– Often only a “mobile skin” required

– Many developer tools + resources

Write once, publish once, view anywhere

Content accessibility – Indexed by Google

– URLs may be shared


Slide 33

HTML5 Apps: The Bad

Internet access is required

Performance can degrade quickly

Consistent cross-browser experience – Disparate Android resolutions

– May require multiple stylesheets

– Compatibility #1 source for bugs

Minimal access to device hardware

Requires permission for Geo location

Inconsistent adoption across devices

Webserver required


Slide 34

Considerations

HTML5 offers APIs for offline storage, geolocation and

device orientation. New multimedia features make it easy

to include graphical content without proprietary plugins.

<canvas> <audio> <video>


Slide 35

Real World Applications


Slide 36

Financial Times

More than 700,000 people use

the Financial Times' Web-based

mobile application to access

news and other content, making

it more popular than the version

sold in Apple's App Store.

FT.com Managing Director Rob

Grimshaw, "People who are using

the app are spending much more

time with the content," he said. "They

are consuming about three times as

many pages through the app as they

are through the desktop in an

average visit."


Slide 37

Amazon Cloud Reader


Slide 38

Angry Birds


Slide 39

Next Steps


Slide 40

Considerations

PhoneGap is an HTML5 app platform that allows

you to author native applications with Web

technologies and get access to APIs and app

stores.


Slide 41

Considerations

NimbleKit is an HTML5 app platform that allows

you to author native applications with Web

technologies and get access to APIs and app

stores.


Slide 42

Considerations

Sencha Touch allows you to develop mobile Web

apps that look and feel native on iPhone, Android

and BlackBerry touch devices.


Slide 43

Thanks

Frank Livaudais

#franklivaudais

[email protected]

HTML5 in Real World Applications

#12NTChtml5

Questions

mailto:[email protected]




Slide 44

Evaluate This Session! Each entry is a chance to win an NTEN engraved iPad!

or Online using #12NTChtml5 at www.nten.org/ntc/eval

http://www.nten.org/ntc/eval