Your SlideShare is downloading. ×
0
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
HTML5 in Real World Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 in Real World Applications

837

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
837
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 in Real World Applications#12NTChtml5 Frank Livaudais #franklivaudais
  • 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. HTML5#franklivaudais Slide 2#12NTChtml5
  • 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. 1991 - HTMLFirst Web Page – Tim Berners-Lee -1991 #franklivaudais Slide 4 #12NTChtml5
  • 6. 1994 – HTML2AOL -1994 Apple eWorld - 1994 Amazon-1994 #franklivaudais Slide 5 #12NTChtml5
  • 7. 1996 – CSS, JavaScriptYahoo - 1996 AltaVista - 1996 #franklivaudais Slide 6 #12NTChtml5
  • 8. 1998-2001 – HTML4, CSS2eBay- 1998 Wikipedia- 2001 #franklivaudais Slide 7 #12NTChtml5
  • 9. 2000 – XHTMLNike - 2000 Yahoo - 2000 #franklivaudais Slide 8 #12NTChtml5
  • 10. 2002-2003 – Tableless Design Microsoft - 2002 Dell- 2003 #franklivaudais Slide 9 #12NTChtml5
  • 11. 2004-2005 – DHTMLMySpace 2004 Facebook 2005 #franklivaudais Slide 10 #12NTChtml5
  • 12. 2006 - AJAXTwitter - 2006 iGoogle - 2006 #franklivaudais Slide 11 #12NTChtml5
  • 13. 2009-Present – HTML5Blogger - 2009 Good Housekeeping - Today #franklivaudais Slide 12 #12NTChtml5
  • 14. MobileESPN Today American Airlines #franklivaudais Slide 13 #12NTChtml5
  • 15. What is HTML5?+ + = #franklivaudais Slide 14 #12NTChtml5
  • 16. New APIs and Tags #franklivaudais Slide 15 #12NTChtml5
  • 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. 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. 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. Rich SnippetsSome supported formats:• Reviews • Recipes• People • Events• Products • Music• Business and organizations #franklivaudais Slide 19 #12NTChtml5
  • 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. 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. 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. Form Types on Mobiletype=“text” type=“number” type=“email” type=“tel” Android Android iPhone iPhone #franklivaudais Slide 23 #12NTChtml5
  • 25. Canvas 2D Drawing #franklivaudais Slide 24 #12NTChtml5
  • 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. 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. 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. versus#franklivaudais Slide 28#12NTChtml5
  • 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. 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. 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. 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. 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. 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. Real World Applications #franklivaudais Slide 35 #12NTChtml5
  • 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. Amazon Cloud Reader #franklivaudais Slide 37 #12NTChtml5
  • 39. Angry Birds #franklivaudais Slide 38 #12NTChtml5
  • 40. Next Steps #franklivaudais Slide 39 #12NTChtml5
  • 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. 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. ConsiderationsSencha Touch allows you to develop mobile Webapps that look and feel native on iPhone, Androidand BlackBerry touch devices. #franklivaudais Slide 42 #12NTChtml5
  • 44. Questions Thanks Frank Livaudais #franklivaudais flivaudais@cds-global.comHTML5 in Real World Applications #12NTChtml5 #franklivaudais Slide 43 #12NTChtml5
  • 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

×