Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
-
Upload
nathaniel-b -
Category
Technology
-
view
1.708 -
download
0
description
Transcript of Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
![Page 1: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/1.jpg)
TORONTO HTML5 USER GROUPMeet up #2 – Application Development with HTML 5
![Page 2: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/2.jpg)
Company Overview
Strategy› Social Media› Competitive Analysis› Persona Development› Website Analytics› Search Engine Optimization
Creative› Brand Strategy & Activation› Information Architecture› Usability Studies› Interaction Design› Web Design
Technology› Mobile & Slate Apps› HTML5 Development› Web Development› SharePoint Development› Facebook & Twitter
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.
![Page 3: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/3.jpg)
User Experience Form Factors
Desktop / Tablet Web Mobile
› Easy to use› Engage the audience› Empower the user› Emotional connection
We define UX by:
![Page 4: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/4.jpg)
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
![Page 6: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/6.jpg)
About Us
› www.digiflare.com› [email protected]› [email protected]› We are web and mobile developers› HTML5 demos by Brandon Satrom at
userinexperience.com
![Page 7: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/7.jpg)
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
![Page 8: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/8.jpg)
Defining HTML5
![Page 9: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/9.jpg)
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?
![Page 10: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/10.jpg)
HTML5 Applications
HTML JavaScript APIsCSS3
![Page 11: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/11.jpg)
HTML5 Technology Areas
Performance
3D Effects
Semantics
Offline & Storage
Styling
Connectivity
Multimedia
Device Access
![Page 12: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/12.jpg)
CSS3
› Border Radius› Border Images› Box and Drop Shadow› Multi-Column Layout› Selectors› @Font-Face› …& more
![Page 13: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/13.jpg)
JavaScript APIs
› Canvas› Video & Audio› Drag & Drop› Geolocation› Local Storage› Offline Apps› …& more
![Page 14: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/14.jpg)
Utilizing HTML5 Technologies
![Page 15: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/15.jpg)
HTML5 Technologies
› Provide rich app capability without proprietary plugins
› Semantic elements› Canvas› Geolocation› Local storage› Video & audio
![Page 16: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/16.jpg)
Semantic Elements
› More descriptive markup› Allows programs to extract data› Header› Article› Time› Nav› Footer› … & more
![Page 17: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/17.jpg)
DemoSemantic Markup
![Page 18: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/18.jpg)
Canvas
› A drawable surface to render graphs, images, shapes dynamically via JavaScript
› Described by 2-d coordinate system› Paths› fillRect› fillText› createLinearGradient› drawImage
![Page 19: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/19.jpg)
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();
![Page 20: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/20.jpg)
Canvas
![Page 21: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/21.jpg)
SVG
![Page 22: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/22.jpg)
DemoCanvas & SVG
![Page 23: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/23.jpg)
Geolocation
› The user’s location is available via JavaScript API
› Geolocation is opt-in› The browser asks for permission
![Page 24: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/24.jpg)
Geolocation
![Page 25: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/25.jpg)
DemoGeolocation
![Page 26: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/26.jpg)
Local Storage
› Key/Value store› Up to 5mb› No expiration› Store string data› Offline support for applications
![Page 27: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/27.jpg)
Local Storage
![Page 28: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/28.jpg)
DemoLocal Storage
![Page 29: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/29.jpg)
Video & Audio
› Video and audio elements in markup› Can be styled via CSS and controls
accessible through JavaScript› Specify fallbacks for compatibility
![Page 30: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/30.jpg)
Video & Audio
![Page 31: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/31.jpg)
DemoVideo & Audio
![Page 32: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/32.jpg)
Don’t Forget The Older Browsers!
![Page 33: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/33.jpg)
Modernizr
› http://www.modernizr.com/› JavaScript library that helps identify
supported features in the user’s browser› Allows graceful degradation
![Page 34: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/34.jpg)
Spicing It Up With CSS3
![Page 35: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/35.jpg)
CSS3
› Quick CSS Primer› CSS Specifications› Milestones in CSS› CSS3 In Depth› Quick jQuery Primer› Demos and Examples
![Page 36: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/36.jpg)
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
![Page 37: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/37.jpg)
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
Working Draft(WD)
Recommendation(REC)
![Page 38: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/38.jpg)
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
![Page 39: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/39.jpg)
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
![Page 40: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/40.jpg)
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
![Page 41: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/41.jpg)
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…
![Page 42: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/42.jpg)
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.
![Page 43: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/43.jpg)
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
![Page 44: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/44.jpg)
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.
![Page 45: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/45.jpg)
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
![Page 46: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/46.jpg)
CSS3 In Depth: Current Support
IE9: A- FF 6.0.2 A- V. 14 - A V. 11.51: B+ V 5.1 - A
V8:DV7:D-V6:F
V5: B+V4: B+V3.6: B
V13: A-V12: A-V11: A-
V10: B-V9: CV8: C
V4:B
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?...
![Page 47: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/47.jpg)
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?
![Page 48: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/48.jpg)
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.)
![Page 49: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/49.jpg)
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!
![Page 50: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/50.jpg)
DemoCSS3
![Page 51: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/51.jpg)
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
![Page 52: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/52.jpg)
Making Your Life Easier With Tools
![Page 53: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/53.jpg)
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
![Page 54: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/54.jpg)
HTML5 And Beyond
![Page 55: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/55.jpg)
Future of HTML5
› With each new browser release, support for the HTML5 specification is growing
› A work in progress:
First Published Working Draft Working Draft Last Call Candidate
Recommendation Recommendation
![Page 56: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/56.jpg)
Prototyping Emerging Standards
![Page 57: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/57.jpg)
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
![Page 58: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/58.jpg)
Getting Started
![Page 59: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/59.jpg)
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
![Page 60: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/60.jpg)
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)
› [email protected] and [email protected]
› Twitter: nathaniel401, chriswching
![Page 61: Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5](https://reader035.fdocuments.net/reader035/viewer/2022062418/55514f67b4c905bd1c8b561b/html5/thumbnails/61.jpg)
Thank you!› Stay tuned to the Toronto HTML5 User Group page for dates on our
upcoming sessions.
› Questions or comments?› [email protected] and
[email protected]› Twitter: nathaniel401, chriswching