Toronto HTML5 User Group Meet Up #2's presentation deck revolving around Application Development with HTML5. This deck gives an overview and analysis of various HTML5 elements and some real-world application examples. Additionally, we examine CSS3 and where it is today.

1. TORONTO HTML5 USER GROUP
Meet up #2 – Application Development with HTML 5

2. Company Overview
Digiflare is a full service digital agency that successfully integrates creative
ideas with new technology. We help brands discover new opportunities that
enhance and expand their businesses through interactive experiences on the
web, mobile devices and emerging digital platforms.
Strategy Creative Technology
› Social Media › Brand Strategy & Activation › Mobile & Slate Apps
› Competitive Analysis › Information Architecture › HTML5 Development
› Persona Development › Usability Studies › Web Development
› Website Analytics › Interaction Design › SharePoint Development
› Search Engine Optimization › Web Design › Facebook & Twitter

3. User Experience Form Factors
Desktop / Tablet Web Mobile
We define UX by: › Easy to use
› Engage the audience
› Empower the user
› Emotional connection

4. Award Winning Digital Marketing Practice
› Gold Competency for Digital Marketing with
Microsoft
› BlackBerry Alliance Select Tier Partner
› Virtual Technical Roles
› Brand & Advertising
› Digital Marketing
› Most Valuable Professional
› SharePoint
› Preferred Small Agency of Record for Microsoft

5. Our Clients

6. About Us
› www.digiflare.com
› chris.ching@digiflare.com
› nathaniel.bagnell@digiflare.com
› We are web and mobile developers
› HTML5 demos by Brandon Satrom at
userinexperience.com

7. Agenda
› Defining HTML5
› Utilizing HTML5 Technologies
› Don’t Forget The Older Browsers!
› Spicing It Up With CSS3
› Make Your Life Easier With Tools
› HTML5 and Beyond
› Getting Started

8. Defining HTML5

9. Defining HTML5
› What do people think when they hear
“HTML5”?
› A set of specifications
› A goal toward a more open web
› What is an “HTML5” application?

10. HTML5 Applications

11. HTML5 Technology Areas
Performance Semantics Styling Multimedia
3D Effects Offline & Storage Connectivity Device Access

12. CSS3
› Border Radius
› Border Images
› Box and Drop Shadow
› Multi-Column Layout
› Selectors
› @Font-Face
› …& more

13. JavaScript APIs
› Canvas
› Video & Audio
› Drag & Drop
› Geolocation
› Local Storage
› Offline Apps
› …& more

14. Utilizing HTML5 Technologies

15. HTML5 Technologies
› Provide rich app capability without
proprietary plugins
› Semantic elements
› Canvas
› Geolocation
› Local storage
› Video & audio

16. Semantic Elements
› More descriptive markup
› Allows programs to extract data
› Header
› Article
› Time
› Nav
› Footer
› … & more

17. Demo
Semantic Markup

18. Canvas
› A drawable surface to render
graphs, images, shapes dynamically via
JavaScript
› Described by 2-d coordinate system
› Paths
› fillRect
› fillText
› createLinearGradient
› drawImage

19. Canvas
<canvas id=“canvasArea” height=“300” width=“400”>
</canvas>
var context = document.getElementById("canvasArea").getContext("2d");
context.beginPath();
context.moveTo(width/2, 0);
context.lineTo(width, height);
context.lineTo(0, height);
context.closePath();
context.fillStyle = "#ffc821";
context.fill();

20. Canvas

21. SVG

22. Demo
Canvas & SVG

23. Geolocation
› The user’s location is available via
JavaScript API
› Geolocation is opt-in
› The browser asks for permission

24. Geolocation

25. Demo
Geolocation

26. Local Storage
› Key/Value store
› Up to 5mb
› No expiration
› Store string data
› Offline support for applications

27. Local Storage

28. Demo
Local Storage

29. Video & Audio
› Video and audio elements in markup
› Can be styled via CSS and controls
accessible through JavaScript
› Specify fallbacks for compatibility

30. Video & Audio

31. Demo
Video & Audio

32. Don’t Forget The Older Browsers!

33. Modernizr
› http://www.modernizr.com/
› JavaScript library that helps identify
supported features in the user’s browser
› Allows graceful degradation

34. Spicing It Up With CSS3

35. CSS3
› Quick CSS Primer
› CSS Specifications
› Milestones in CSS
› CSS3 In Depth
› Quick jQuery Primer
› Demos and Examples

36. Quick CSS Primer
› CSS stands for
Cascading Style
Sheets
› CSS is used to apply
styling to mark-up
elements
› With presentation
separate from
content, the pages
become more flexible

37. CSS Specification Stages
› The CSS specification goes through “stages”
from the W3C.
› CSS3’s module’s stages varies significantly
› The only modules to have recommendation
stage are Selectors Level 3, Colour, and
Namespaces.
› Progress is relatively quick; a little over a
year ago there was no modules at the
Recommendation stage; only Selectors Level
3 was a Proposed Recommendation

38. Milestones in CSS: CSS1
› The CSS1 specification
became a W3C
Recommendation in
December 1996
› In the year 2000, Internet
Explorer 5.0 for Mac was the
first browser to fully support
the CSS1 specification
› CSS1 brought fourth
primitive design attributes
such as controlling
fonts, colouring, aligning of
text and
elements, margins, borders,
and padding

39. Milestones in CSS: CSS2
› The CSS2 specification became a W3C
recommendation in May 1998
› CSS2 brought fourth improved printing
abilities, Aural CSS (to assist visually disabled
users by applying style sheets to oral
presentations), and position attributes

40. Milestones in CSS: CSS2.1
› CSS 2.1 built upon CSS2; with its main goal being to
correct a few errors found in CSS2
› CSS 2.1 reflected and focused on features that were
widely implemented for both HTML and XML.
› CSS 2.1 just became a Recommendation in June of
2011

41. Milestones in CSS: CSS3
› CSS3 brings forth a lot of exciting new features, in a
different approach than previous iterations.
› Like 2.0 to 2.1, CSS3 builds on top of 2.1
› Let’s examine CSS3 in depth…

42. CSS3 In Depth: What It Has To Offer
› CSS3 contains vast array of new and improved
capabilities, most which go beyond just simple aesthetics.
› New changes have been implemented across almost every
aspect of webpage styling scenarios, from fonts to media
queries to animations and transitions
› Instead of having one monolithic release, CSS3 features have
been broken down into modules.

43. CSS3 In Depth: Why Modules?
› CSS3 is being released in
modules, instead of one
monolithic release
› W3C can bring modules up to the
Recommendation Level (REC) at
different times, based on their
priority
› Browser developers can
implement CSS3 piece by
piece, this helps speed up the
overall implementation process

44. CSS3 In Depth: Why Modules?
› Some technologies and browsers do not need to support the
full CSS3 specification.
› Text-reader only browsers do not need to wait and support
background and borders to be CSS3 compatible, just as a
visual-only browser does not need to support aural
properties.
› Developers have the option of creating tailored subsets of
CSS3 by selecting which modules they want to fully support.

45. CSS Modules
› Currently 52 modules, though this can change as the
specification matures
› There are three priorities of completion; high, medium, and
low
› Priorities are set based on community input and real-world
application
› Each module is logically organized. i.e. anything to do with
selectors is in the Selectors module

46. CSS3 In Depth: Current Support
IE9: A- FF 6.0.2 A- V. 14 - A V. 11.51: B+ V 5.1 - A
V8:D V5: B+ V13: A- V10: B- V4:B
V7:D- V4: B+ V12: A- V9: C
V6:F V3.6: B V11: A- V8: C
Based off historical support on a per-property basis; calculated to present then categorized by a standard grade letter.
So, how can we do CSS3 stuff now, and have all users experience it?...

47. Implementing CSS3 Today
› Build your site with the bare minimums first
› All required functionality should be there
› Required structural and visual elements implemented
› Add on visual value afterward with Progressive Enhancement
› Alternatively, you can do it in reverse – graceful degradation
› What if I need near consistent experience across the majority
of browsers?

48. Implementing CSS3 Today
› Browser Fallbacks
› Implement required functionally natively first
› Provide “fallbacks” to browsers that do not support the
functionality natively
› Fallbacks can be done with
› JavaScript alternatives
› Proprietary functionality (i.e. IE’s “Filter”)
› Conditional statements (and comments for IE!)
› Pseudo effects (i.e. extra markup, images, etc.)

49. Quick jQuery Primer
› We will use jQuery and several plug-ins to replicate CSS3
features that may not be supported in some of your target
browsers.
› jQuery is a JavaScript library that allows you to quickly develop
JavaScript based solutions
› It has great cross browser support including IE6+, FF2+, Safari
3+, and Opera 9+. So, let’s get in to some demos!

50. Demo
CSS3

51. CSS3 Closing Statements
› CSS3 will bring fourth a wealth of features that will make web
development easier and more efficient
› I estimate it will be three years until you can safely use CSS3 without fall-
backs, taking into consideration user adoption of modern day browsers
› Until then, use alternatives such as the jQuery examples shown here to
have a consistent user experience, or have the site enhance
progressively/degrade gracefully
› Don’t wait for CSS3 to become a full recommendation, at the
least, experiment with CSS3 today in subtle ways, i.e. text-shadows

52. Making Your Life Easier With Tools

53. Tools
› HTML5test.com
› HTML5 Boilerplate
› HTML5 Animations Tools
› CSS3 Generators
› Visual Studio, Expression
› Adobe Tools (Existing and Upcoming)
› Modernizr
› … increasingly more support for HTML5 in
existing toolsets

54. HTML5 And Beyond

55. Future of HTML5
› With each new browser release, support
for the HTML5 specification is growing
› A work in progress:
First Published Candidate
Working Draft Last Call Recommendation
Working Draft Recommendation

56. Prototyping Emerging Standards

57. Multi-Platform/Screen Support
› Increasing support for JavaScript and HTML5
as a multi-platform technology
› Develop rich applications for
Mobile, Tablet, Desktop screens with
frameworks
› Sencha Touch
› jQuery

58. Getting Started

59. Next Steps
› Implement some of the features we talked
about today on your own
› Continue learning more about HTML5 and
then expand your knowledge on JavaScript
and jQuery
› Identify opportunities around you to utilize
HTML5 technologies

60. Resources
› Diveintohtml5.org
› Initializr.com
› Html5boilerplate.com
› Css3please.com
› Caniuse.com
(A great resource for any web dev)
› Modernizr.com
› Html5labs.com
› http://labs.adobe.com/technologies/edge/
(Upcoming IDE to build HTML5, CSS3, and JS Web Content)
› chris.ching@digiflare.com and
nathaniel.bagnell@digiflare.com
› Twitter: nathaniel401, chriswching

61. Thank you!
› Stay tuned to the Toronto HTML5 User Group page for dates on our
upcoming sessions.
› Questions or comments?
› chris.ching@digiflare.com and
nathaniel.bagnell@digiflare.com
› Twitter: nathaniel401, chriswching