html5 in real world applications
DESCRIPTION
TRANSCRIPT
![Page 1: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/1.jpg)
HTML5 in Real World Applications #12NTChtml5
Frank Livaudais #franklivaudais
![Page 2: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/2.jpg)
#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
#franklivaudais #12NTChtml5
![Page 3: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/3.jpg)
#franklivaudais #12NTChtml5
Slide 2
HTML5
![Page 4: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/4.jpg)
#franklivaudais #12NTChtml5
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
![Page 5: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/5.jpg)
#franklivaudais #12NTChtml5
Slide 4
1991 - HTML
First Web Page – Tim Berners-Lee -1991
![Page 6: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/6.jpg)
#franklivaudais #12NTChtml5
Slide 5
1994 – HTML2
Apple eWorld - 1994 AOL -1994 Amazon-1994
![Page 7: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/7.jpg)
#franklivaudais #12NTChtml5
Slide 6
1996 – CSS, JavaScript
Yahoo - 1996 AltaVista - 1996
![Page 8: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/8.jpg)
#franklivaudais #12NTChtml5
Slide 7
1998-2001 – HTML4, CSS2
eBay- 1998 Wikipedia- 2001
![Page 9: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/9.jpg)
#franklivaudais #12NTChtml5
Slide 8
2000 – XHTML
Nike - 2000 Yahoo - 2000
![Page 10: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/10.jpg)
#franklivaudais #12NTChtml5
Slide 9
2002-2003 – Tableless Design
Microsoft - 2002 Dell- 2003
![Page 11: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/11.jpg)
#franklivaudais #12NTChtml5
Slide 10
2004-2005 – DHTML
MySpace 2004 Facebook 2005
![Page 12: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/12.jpg)
#franklivaudais #12NTChtml5
Slide 11
2006 - AJAX
Twitter - 2006 iGoogle - 2006
![Page 13: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/13.jpg)
#franklivaudais #12NTChtml5
Slide 12
2009-Present – HTML5
Blogger - 2009 Good Housekeeping - Today
![Page 14: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/14.jpg)
#franklivaudais #12NTChtml5
Slide 13
Mobile
ESPN
American Airlines
Today
![Page 15: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/15.jpg)
#franklivaudais #12NTChtml5
Slide 14
What is HTML5?
This would be nice to have more visual/graphic
vs. text. I defer to your awesomeness ;)
+ + =
![Page 16: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/16.jpg)
#franklivaudais #12NTChtml5
Slide 15
New APIs and Tags
![Page 17: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/17.jpg)
#franklivaudais #12NTChtml5
Slide 16
HTML5 APIs
Drag & Drop
Inline Editing
Web Sockets
Web Workers
Local Storage
Offline Apps
Messaging
Server Events
Canvas
Video & Audio
Geolocation
History
![Page 18: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/18.jpg)
#franklivaudais #12NTChtml5
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);
}
![Page 19: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/19.jpg)
#franklivaudais #12NTChtml5
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" />
<option value="1000" />
<option value="10000" />
</datalist>
Animated Progress bar:
<progress>working...</progress>
Donation Goal tracking:
<progress value="75" max="100”/>
![Page 20: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/20.jpg)
#franklivaudais #12NTChtml5
Slide 19
Rich Snippets
Some supported formats:
• Reviews
• People
• Products
• Business and organizations
• Recipes
• Events
• Music
![Page 21: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/21.jpg)
#franklivaudais #12NTChtml5
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>
![Page 22: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/22.jpg)
#franklivaudais #12NTChtml5
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>
![Page 23: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/23.jpg)
#franklivaudais #12NTChtml5
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
![Page 24: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/24.jpg)
#franklivaudais #12NTChtml5
Slide 23
Form Types on Mobile
type=“text” type=“number” type=“email” type=“tel”
Android Android iPhone iPhone
![Page 25: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/25.jpg)
#franklivaudais #12NTChtml5
Slide 24
Canvas 2D Drawing
![Page 26: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/26.jpg)
#franklivaudais #12NTChtml5
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);
![Page 27: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/27.jpg)
#franklivaudais #12NTChtml5
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
![Page 28: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/28.jpg)
#franklivaudais #12NTChtml5
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>
![Page 29: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/29.jpg)
#franklivaudais #12NTChtml5
Slide 28
versus
![Page 30: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/30.jpg)
#franklivaudais #12NTChtml5
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
![Page 31: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/31.jpg)
#franklivaudais #12NTChtml5
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
![Page 32: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/32.jpg)
#franklivaudais #12NTChtml5
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?
![Page 33: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/33.jpg)
#franklivaudais #12NTChtml5
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
![Page 34: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/34.jpg)
#franklivaudais #12NTChtml5
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
![Page 35: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/35.jpg)
#franklivaudais #12NTChtml5
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>
![Page 36: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/36.jpg)
#franklivaudais #12NTChtml5
Slide 35
Real World Applications
![Page 37: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/37.jpg)
#franklivaudais #12NTChtml5
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."
![Page 38: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/38.jpg)
#franklivaudais #12NTChtml5
Slide 37
Amazon Cloud Reader
![Page 39: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/39.jpg)
#franklivaudais #12NTChtml5
Slide 38
Angry Birds
![Page 40: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/40.jpg)
#franklivaudais #12NTChtml5
Slide 39
Next Steps
![Page 41: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/41.jpg)
#franklivaudais #12NTChtml5
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.
![Page 42: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/42.jpg)
#franklivaudais #12NTChtml5
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.
![Page 43: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/43.jpg)
#franklivaudais #12NTChtml5
Slide 42
Considerations
Sencha Touch allows you to develop mobile Web
apps that look and feel native on iPhone, Android
and BlackBerry touch devices.
![Page 44: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/44.jpg)
#franklivaudais #12NTChtml5
Slide 43
Thanks
Frank Livaudais
#franklivaudais
HTML5 in Real World Applications
#12NTChtml5
Questions
![Page 45: HTML5 in Real World Applications](https://reader033.vdocuments.us/reader033/viewer/2022051108/545b2344b1af9fba5d8b5818/html5/thumbnails/45.jpg)
#franklivaudais #12NTChtml5
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