Toronto HTML5 User Group Meet Up #1 - Intro to HTML5

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
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
Technology
Creative
Social Media
Competitive Analysis
Persona Development
Website Analytics
Search Engine Optimization
Mobile & Slate Apps
HTML5 Development
Web Development
SharePoint Development
Facebook & Twitter
Brand Strategy & Activation
Information Architecture
Usability Studies
Interaction Design
Web Design

User Experience Form Factors
Mobile
Web
Desktop / Tablet
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

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 purpose
Vs
4.01 Logo by Chris Bishophttp://chrisbishop.com/forums/dribbble/

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

Things have become simpler!
Vs
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 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 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
73%
52%
78%
88%
76%
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

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

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

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

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

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

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

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 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 backwardcompatibility options

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

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
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
HTML5Shivhttp://code.google.com/p/html5shiv/
Modernizrhttp://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 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 @nathaniel401
We are on Facebook too. Like us!

Toronto HTML5 User Group Meet Up #1 - Intro to HTML5

by Nathaniel B on Jul 28, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4

Statistics

Toronto HTML5 User Group Meet Up #1 - Intro to HTML5 Presentation Transcript