TORONTO HTML5 USER GROUPMeet up #1 – HTML 5 Basics, Tools & Resources, and

Demos

Agenda› Introduction› Digiflare Overview › Brief Introduction to HTML5

› Defining what HTML5 is› Comparing HTML5 to HTML 4.01› Separating HTML5 from other new technologies› Quick Rundown on a few Elements & Functionality of HTML5/Modern Web Stack

› HTML5 Browser Compatibility› Tools and Resources to Work With HTML5› What the Future Holds for HTML5› Questions› Project Highlights

› CBC’s HTML5 Federal Election iPad Map

› Questions?

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.

User Experience Form Factors

Desktop / Tablet Web Mobile

› Easy to use› Engage the audience› Empower the user› Emotional connection

We define UX by:

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

Our Clients

Defining what HTML5 is› HTML5 is simply most recent

iteration of HTML

› HTML5 is getting a lot of talk because of the new semantic and functional enhancements it brings forth

› HTML5 combined with other technologies like CSS3 and JavaScript create the modern web stack

What HTML5 is not

› HTML5 is sometimes used as a buzzword when talking about the next generation website, much like Web 2.0 was/is used

› HTML5 works in conjunction with other sets of specifications and technologies such as JavaScript & Browser APIs and CSS3

Comparing HTML5 to HTML 4.01› HTML5 has added over 25 new elements

› Several other elements have been un-depreciated from HTML 4.01, while others have had revisions to their purposeVs

4.01 Logo by Chris Bishophttp://chrisbishop.com/forums/dribbble/

Comparing HTML5 to HTML 4.01› HTML5 has over 38 new global attributes

› You can now define your own attributes, and still have your markup be valid!

› Syntactically, HTML5 and HTML4 are essentially the same

Vs

4.01 Logo by Chris Bishophttp://chrisbishop.com/forums/dribbble/

Comparing HTML5 to HTML 4.01› Things have become simpler!

Vs

4.01 Logo by Chris Bishophttp://chrisbishop.com/forums/dribbble/

To…

The Video Element› There ARE many video containers and codecs that can be used

to play video

› No single codec that will work across all browsers

› Need to encode your video in different formats

› There are a variety of new event handlers to work with video* elements, along with several attributes that would attach to the video** element

* All new event handlers will work with either the video or audio element.

** Many of the new attributes to the video element are the same for the audio element, such as preload and controls.

The Canvas Element› Draw-able region in HTML code, given width and height attributes

› Can be used as a basic shapes (lines, rectangles, arcs, Bezier & quadratic curves, images) display tool to full interactive graphics

› Can create scalable vectors through coordinate-point line drawings

› With JavaScript, animations can be applied on the graphics, or on top of user interactions

› HTML5 compatible browsers allow for hardware accelerated graphic support, making full use of a PC’s hardware

› Allows for scaling and rotation, combined with a physics engine for immersive graphics or games

HTML5 Geolocation

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

Image from diveintohtml5.org

HTML5 Offline Support

› Great for web applications where users go on to produce something

› Cache manifest file dictates what to cache for offline use

› Flag in DOM to indicate connection status, events fire for state changes

› You handle data changes/persisting data and synchronizing with server once online

HTML5 Browser Compatibility

› HTML5 support is fragmented between different browsers and versions

› There are multiple levels of fragmentation; there could be overall feature support or sub-feature support, i.e. the Video tag and the actual video’s encoding.

HTML5 Browser Compatibility

› HTML5 support is growing with each new release of the browsers, and we’re fortunately seeing shorter times in-between new releases for all vendors

Statistical Breakdown of the Latest Browser Versions’ Support

52%76%73%78%88%

Source: http://caniuse.com/#cats=HTML5

HTML5 Tools and Resources

› There are many tools/resources available to help aid in HTML5 development and the modern web stack in general

› There are tools/resources for:› Design and Development Software› HTML5 Boilerplate & CSS3 Generator› Compatibility and Testing

HTML5 Tools and Resources› Design and Development Software Resources

› Adobe Dreamweaver CS5 with the CS5 HTML5 Pack› The HTML5 Pack updates the Live View to an updated version of Webkit,

which is Dreamweaver’s Live View engine

• Considerable amount of built-in code-hinting for HTML5 markup and CSS3 support is available, along with vendor-specific prefixes for CSS3 rules

• JavaScript code hinting with custom object hinting is also supported

• Basic HTML5 starter templates are available to you

HTML5 Tools and Resources

› Design and Development Software Resources› Adobe Dreamweaver CS5 with the CS5 HTML5 Pack

› Media Query Window available for you to view how your site will look in various screen resolutions with the CSS defined for that resolution

• The Widget Browser contains HTML5 and other modern web stack widgets to use or build upon

HTML5 Tools and Resources

› Design and Development Software Resources› Adobe Dreamweaver CS5.5

› CS5.5 adds additional capabilities for developing next generation applications and mobile development

› jQuery code hinting support and jQuery Mobile Integration

› Video elements, and SVG elements are supported in Live View

HTML5 Tools and Resources

› Design and Development Software Resources› Adobe Dreamweaver CS5.5

› CSS3 is now supported in the CSS Panel

› Ability to publish Native Android and iOS apps using within Dreamweaver using PhoneGap

› Validator brought back using Live W3C Validation

HTML5 Tools and Resources

› Design and Development Software Resources› Microsoft Expression Web 4 w/ SP1

› Expression Web is Microsoft’s Answer to Adobe’s Dreamweaver

› Expression Web 4 with SP1 provides complete support for HTML5 and CSS3 in the code view, along with significant support in Design View

‒ Expression Web supports CSS3 rule parameter hints

HTML5 Tools and Resources

› Design and Development Software Resources› Microsoft Visual Studio 2010 with SP1

› Visual Studio 2010 w/ SP1 brings some HTML5 support to IntelliSense and markup validation, but it is limited.

› An extension is available from Microsoft Employees (it’s not an official Microsoft product) that adds:

‒ The missing HTML5 features in IntelliSense and Validation

‒ Browser APIs of GeoLocationand LocalStorage

‒ CSS3 rules with vendor specificextensions

HTML5 Tools and Resources› Design and Development Software Resources

› Adobe Illustrator› “Ai->Canvas” plug-in allows you to export AI vectors and bitmaps to an HTML5

canvas element‒ The plug-in provides drawing, animation, and coding options

› “Adobe Illustrator CS5 HTML5 Pack” provides inapplication capabilities to:

‒ Export art boards for unique screensizes using SVG and CSS3 media queries.

‒ Create web widgets by generating dynamic vector art for Data-Driven Web Workflows

‒ Generate interactive web contentwith SVG and CanvasMap Artwork Appearance attributes to CSS3 rules

HTML5 Tools and Resources

› HTML5 Boilerplate & CSS3 Generator› HTML5 Boilerplate

› A great resource available to anyone starting off with an HTML5 project

› Contains a tried-and-true foundational mark-up and file organization

› Customizable to suit your needs› Well documented to help learn from it› Actively developed› Already contains great backward

compatibility options

HTML5 Tools and Resources

› HTML5 Boilerplate & CSS3 Generator› CSS3 Generator

› If you don’t have/desire to use an IDE to code hint but you don’t want to remember everything, you can use a generator

› CSS3generator.com allows you to generate CSS3 rules with the parameters defined by preferences

› It will provide you with the CSS3 code you need to put in your CSS file, along with an indication of it’s browser support

HTML5 Tools and Resources

› Compatibility and Testing› Compatibility and Testing Resources

› CSS3 Selectors Test and Previewshttp://tools.css3.info/selectors-test/test.htmlhttp://www.css3.info/preview/

› HTML5 Demo and Exampleshttp://html5demos.com/http://wufoo.com/html5/

› In-Depth Compatibility Chartshttp://caniuse.com/

HTML5 Tools and Resources

› Compatibility and Testing› Backwards compatibility JS Solutions

› HTML5Shivhttp://code.google.com/p/html5shiv/

› Modernizrhttp://www.modernizr.com/

HTML5 Tools and Resources Links› Adobe Dreamweaver Related Links

› Dreamweaver Product Information:http://www.adobe.com/products/dreamweaver.html

› Adobe Widget Browser:http://labs.adobe.com/downloads/widgetbrowser.html› Dreamweaver CS5 Updater:

http://www.adobe.com/support/dreamweaver/downloads_updaters.html#dwcs51104› Dreamweaver CS3 and CS4 HTML5 and CSS3 Code Hinting Extension:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2188522

› Microsoft Visual Studio Related Links› Web Standards Update:

http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

› Adobe Illustrator Links:› Ai -> Canvas Plug-In:

http://visitmix.com/work/ai2canvas/› Adobe Illustrator CS5 HTML5 Packhttp://labs.adobe.com/technologies/illustrator_html5/

HTML5 Tools and Resources Links› Compatibility and Testing Resources

› CSS3 Selectors Test and Previewshttp://tools.css3.info/selectors-test/test.htmlhttp://www.css3.info/preview/

› HTML5 Demo and Exampleshttp://html5demos.com/http://wufoo.com/html5/

› In-Depth Compatibility Chartshttp://caniuse.com/

› Backwards compatibility JS Solutions› HTML5Shiv

http://code.google.com/p/html5shiv/› Modernizr

http://www.modernizr.com/

HTML5 Going Forward› With each new browser release, support for HTML5 is

growing

› The HTML5 community, interest and adoption is growing rapidly

› Is HTML5 going to replace other RIA technologies like Flash and Silverlight?

CBC News Federal Election Maps 2011HTML5 optimized for Blackberry Playbook and iPad Browsers

National Map View (iPad) Regional Map View (Playbook)

CBC News Federal Election Maps 2011

CBC News Federal Election Maps 2011

CBC News Federal Election Maps 2011 Architecture

› HTML5 Canvas, isolated storage› XML feeds, XML parsing› Jquery for animations, communication› Separate JS classes to manage each component

(map, results, riding info etc.)

CBC News Federal Election Maps 2011 Challenges

› Map data› Map rendering (SVG, drawing on canvas)› Map loading

Thank you!Stay tuned to the Toronto HTML5 User Group page for dates on our upcoming sessions:

› HTML5 on Mobile Form Factors› HTML5’s Canvas Element

Please visit our blog to download this presentation and get the links to the tools and resources!http://blog.digiflare.com

Follow us!@digiflare @nathaniel401We are on Facebook too. Like us!