HTML5 in Real World Applications

1,222 views
1,030 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,222
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 in Real World Applications

  1. 1. HTML5 in Real World Applications#12NTChtml5 Frank Livaudais #franklivaudais
  2. 2. 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 Slide 1 #12NTChtml5
  3. 3. HTML5#franklivaudais Slide 2#12NTChtml5
  4. 4. Rough Timeline of Web Technologies CSS 1 + TablelessHTML JavaScript CSS 2 Web Design HTML 5 1994 1997 2000 20051991 1996 1998 2002 2009 HTML 2 HTML 4 XHTML 1 AJAX #franklivaudais Slide 3 #12NTChtml5
  5. 5. 1991 - HTMLFirst Web Page – Tim Berners-Lee -1991 #franklivaudais Slide 4 #12NTChtml5
  6. 6. 1994 – HTML2AOL -1994 Apple eWorld - 1994 Amazon-1994 #franklivaudais Slide 5 #12NTChtml5
  7. 7. 1996 – CSS, JavaScriptYahoo - 1996 AltaVista - 1996 #franklivaudais Slide 6 #12NTChtml5
  8. 8. 1998-2001 – HTML4, CSS2eBay- 1998 Wikipedia- 2001 #franklivaudais Slide 7 #12NTChtml5
  9. 9. 2000 – XHTMLNike - 2000 Yahoo - 2000 #franklivaudais Slide 8 #12NTChtml5
  10. 10. 2002-2003 – Tableless Design Microsoft - 2002 Dell- 2003 #franklivaudais Slide 9 #12NTChtml5
  11. 11. 2004-2005 – DHTMLMySpace 2004 Facebook 2005 #franklivaudais Slide 10 #12NTChtml5
  12. 12. 2006 - AJAXTwitter - 2006 iGoogle - 2006 #franklivaudais Slide 11 #12NTChtml5
  13. 13. 2009-Present – HTML5Blogger - 2009 Good Housekeeping - Today #franklivaudais Slide 12 #12NTChtml5
  14. 14. MobileESPN Today American Airlines #franklivaudais Slide 13 #12NTChtml5
  15. 15. What is HTML5?+ + = #franklivaudais Slide 14 #12NTChtml5
  16. 16. New APIs and Tags #franklivaudais Slide 15 #12NTChtml5
  17. 17. HTML5 APIs Messaging Server EventsGeolocation Local Storage History Offline Apps Canvas Drag & DropVideo & Audio Inline Editing Web Sockets Web Workers #franklivaudais Slide 16 #12NTChtml5
  18. 18. Geolocationif (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);} #franklivaudais Slide 17 #12NTChtml5
  19. 19. 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”/> #franklivaudais Slide 18 #12NTChtml5
  20. 20. Rich SnippetsSome supported formats:• Reviews • Recipes• People • Events• Products • Music• Business and organizations #franklivaudais Slide 19 #12NTChtml5
  21. 21. Rich Snippets<div>My name is Bob Smith but people call me Smithy. Here is my home page: <ahref="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> #franklivaudais Slide 20 #12NTChtml5
  22. 22. Rich Snippetshttp://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> #franklivaudais Slide 21 #12NTChtml5
  23. 23. New Form Types • email • tel • date • color • range • number • search<input type="text" required /><input type="email" value="some@email.com" /><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" /> #franklivaudais Slide 22 #12NTChtml5
  24. 24. Form Types on Mobiletype=“text” type=“number” type=“email” type=“tel” Android Android iPhone iPhone #franklivaudais Slide 23 #12NTChtml5
  25. 25. Canvas 2D Drawing #franklivaudais Slide 24 #12NTChtml5
  26. 26. 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); #franklivaudais Slide 25 #12NTChtml5
  27. 27. 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 #franklivaudais Slide 26 #12NTChtml5
  28. 28. 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> #franklivaudais Slide 27 #12NTChtml5
  29. 29. versus#franklivaudais Slide 28#12NTChtml5
  30. 30. Where is the traffic coming from?Side Door: Google, Facebook, Bing, TwitterDirect but intermittentDirect: Bookmark or URL Type of Traffic Technology to Use Side Door: Search/Social HTML5 Mobile Web Direct Native App 50/50 Both #franklivaudais Slide 29 #12NTChtml5
  31. 31. Native Apps: The GoodUser experience – Better swipe events – Multi-touch supportAccess to device hardware – GPS/Compass – Camera/Microphone – Accelerometer/GyroscopeBackground APIs – Audio/VOIP – Push notificationsHigh-performance 3D graphics (OpenGL)Webserver not required #franklivaudais Slide 30 #12NTChtml5
  32. 32. Native Apps: The BadRigid advertising model (iAds)Apple’s 30% in-app purchase taxApple doesn’t share subscriber dataApp Store approval process – Required for app updates – Rejection for non-complianceManaging deployment configurationsEsoteric tool set (Xcode/Objective-C)Content accessibility – Searchable on Google? – Can I share a link to your content? #franklivaudais Slide 31 #12NTChtml5
  33. 33. HTML5 Apps: The GoodApp update path: hit refreshSmall number of deployment configurationsDevelopment costs – Similar skill set as traditional site – Often only a “mobile skin” required – Many developer tools + resourcesWrite once, publish once, view anywhereContent accessibility – Indexed by Google – URLs may be shared #franklivaudais Slide 32 #12NTChtml5
  34. 34. HTML5 Apps: The BadInternet access is requiredPerformance can degrade quicklyConsistent cross-browser experience – Disparate Android resolutions – May require multiple stylesheets – Compatibility #1 source for bugsMinimal access to device hardwareRequires permission for Geo locationInconsistent adoption across devicesWebserver required #franklivaudais Slide 33 #12NTChtml5
  35. 35. ConsiderationsHTML5 offers APIs for offline storage, geolocation anddevice orientation. New multimedia features make it easyto include graphical content without proprietary plugins. <canvas> <audio> <video> #franklivaudais Slide 34 #12NTChtml5
  36. 36. Real World Applications #franklivaudais Slide 35 #12NTChtml5
  37. 37. Financial TimesMore than 700,000 people usethe Financial Times Web-basedmobile application to accessnews and other content, makingit more popular than the versionsold in Apples App Store.FT.com Managing Director RobGrimshaw, "People who are usingthe app are spending much moretime with the content," he said. "Theyare consuming about three times asmany pages through the app as theyare through the desktop in anaverage visit." #franklivaudais Slide 36 #12NTChtml5
  38. 38. Amazon Cloud Reader #franklivaudais Slide 37 #12NTChtml5
  39. 39. Angry Birds #franklivaudais Slide 38 #12NTChtml5
  40. 40. Next Steps #franklivaudais Slide 39 #12NTChtml5
  41. 41. ConsiderationsPhoneGap is an HTML5 app platform that allowsyou to author native applications with Webtechnologies and get access to APIs and appstores. #franklivaudais Slide 40 #12NTChtml5
  42. 42. ConsiderationsNimbleKit is an HTML5 app platform that allowsyou to author native applications with Webtechnologies and get access to APIs and appstores. #franklivaudais Slide 41 #12NTChtml5
  43. 43. ConsiderationsSencha Touch allows you to develop mobile Webapps that look and feel native on iPhone, Androidand BlackBerry touch devices. #franklivaudais Slide 42 #12NTChtml5
  44. 44. Questions Thanks Frank Livaudais #franklivaudais flivaudais@cds-global.comHTML5 in Real World Applications #12NTChtml5 #franklivaudais Slide 43 #12NTChtml5
  45. 45. 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 Slide 44 #12NTChtml5

×