Infotech 2013: HTML5 Deep Dive

Presentation discussing features of HTML5 and a number of resources.

Transcript

2. Dustin Tauer Developer (12 years) Instructor (8 years) Web :: Mobile :: eLearning http://codepen.io/dtauer http://twitter.com/dtauer http://speakerdeck.com/dtauer
3. Easel Solutions • Training – Design, Web, Mobile, eLearning, Strategy, Social, etc. • Customized Training • Consulting • Adobe Connect We like finding solutions
4. <HTML4 /> <h2>Hello World!</h2> <p><strong>I must</strong>include a <em>hello world</em> example.</p>
5. <HTML5 /> <h2>Hello World!</h2> <p><strong>I must</strong>include a <em>hello world</em> example.</p>
6. <HTML5 /> HTML5 = HTML + CSS + JS http://html5test.com/
7. Topics • HTML5 Features & Examples • The Real World – Feature Testing – Fallback • Resources
8. Too many features to cover http://html5readiness.com/
9. Semantics
10. DOCTYPE <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml 1/ DTD/xhtml1-transitional.dtd">
11. DOCTYPE <!DOCTYPE html>
12. http://alistapart.com Web design before HTML5
13. http://alistapart.com Web design after HTML5
14. Semantic Distinctions <section /> clarifies <div /> <article /> replaces <div id=“content”> <aside /> replaces <div id=“sidebar”>
15. Custom Data Attribute <div data-value=“100”></div>
16. Examples • Custom Data Attribute • Forms
17. Offline & Storage
18. Local storage • Client-side database – Key-value notation (JSON) • Stored in users browsers – 5 MB (per domain) • The data persists – After the browser is shutdown or session is closed window.localStorage.setItem('value', someValue);
19. Session storage • Just like Local storage but data expires once browser window is closed – Still client-side
20. IndexedDB • WebSQL is deprecated. • IndexedDB is an object store var idbRequest = window.indexedDB.open('Database Name'); idbRequest.onsuccess = function(event) { var db = event.srcElement.result; var transaction = db.transaction([], IDBTransaction.READ_ONLY); var curRequest = transaction.objectStore('ObjectStore Name').openCursor(); curRequest.onsuccess = ...; }; http://www.html5rocks.com/en/tutorials/indexeddb/todo/
21. Application Cache (offline apps) • Offline First • Cache manifest (*.appcache => file) • Load from local cache (HTML, CSS, JS and images) • mimetype: text/cache-manifest • 5MB (chrome = unlimited storage) • window.applicationCache http://proofwhisky.com/
22. Performance
23. Webworkers (multi-threading) App.js: var worker = new Worker(“Thread.js”); worker.onmessage = function(event) { alert(event.data); }; worker.postMessage('data'); Thread.js: self.onmessage = function(event) { // Do some work. self.postMessage("recv'd:"+event.data); };
24. HTML5 Audio/Video
25. Video <video controls width="500"> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <embed src="your_flash_file" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed> </video>
26. Graphics & 3D
27. Graphics & 3D • SVG – Resolution • Canvas Element – Graphics created with JavaScript • WebGL – http://helloracer.com/webgl/ – http://flashvhtml.com
28. Many More • File Access • Sockets • Connectivity • Device Access – Geo-location, Camera/Micorphone, Contacts/Events, Orientation, Notifications, etc…
29. CSS3 • Transitions • Animations • Transforms • Gradients • Rounded corners • Flexible Box Model • Multi-column • Webfonts • Text wrapping • Columns • Opacity • Backgrounds • CSS selectors • Shadows
30. The Real World
31. Don’t: Detect browsers <script type="text/javascript"> if ( navigator.userAgent.indexOf("MSIE")>0 ) { // Run custom code for Internet Explorer. } </script>
32. Do: Detect feature support http://modernizr.com/ Modernizr
33. Modernizr: CSS http://modernizr.com/ Chrome: <html class="js opacity cssanimations csscolumns …"> IE 7: <html class="js no-opacity no-cssanimations …"> .opacity .button { background:#000; opacity: 0.75; } .no-opacity .button { background: #444; }
34. Modernizr: JavaScript http://modernizr.com/ if (Modernizr.canvas){ // Create canvas object and get drawing } else { // No canvas support. } ------------------------- Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js‘ });
35. Shiv or Shim • Recognize the capabilities of your users – http://caniuse.com • Fallback support for unsupported features – http://html5please.com Shivs and Shims are the same thing!
36. Resources • All your HTML5 needs – http://w3schools.com/html/html5_intro.asp – http://html5rocks.com/en/ • jQuery: HTML5 now! – http://jquery.com • Need animation? – Designers: Adobe Edge Animate – Developers: http://greensock.com
37. Resources • PhoneGap – Compile HTML/CSS/JavaScript to native mobile applications – iOS, Android, Windows Phone, Blackberry, etc • PhoneGap Build: – Hosted, 10MB limit http://www.phonegap.com
38. Resources • Don’t forget about architecture – TODO MVC – http://todomvc.com
39. Thank you! Dustin Tauer :: Easel Solutions dustin@easelsolutions.com