Create beautiful, immersive content and applications with HTML5 ...

4 downloads 30 Views 2MB Size Report
Provide detail about what exactly are HTML5 & CSS3 ... Not technically part of HTML5, but denitely useful in building HTML5 experiences. ▫ Tools. ▫ Modernizr.
Create beautiful, immersive content and applications with HTML5 and CSS3 Andrew Trice | Technical Evangelist

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Welcome!

Welcome to Adobe MAX 2011! © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

2

About the Presenter        

Andrew Trice Technical Evangelist, Adobe Blog: www.tricedesigns.com Twitter: @andytrice

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

3

About This Lab

Provide detail about what exactly are HTML5 & CSS3   Hands-on usage of HTML5, CSS3, & associated APIs   Not a graphic design course  

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

4

HTML5 – What is it?  

Generic term generally referring to rich web experiences, based on “standards compliant” HTML without plugins.

 

More specifically, HTML language version 5, CSS version 3, and associated JavaScript libraries

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

5

HTML5

New version of HTML language   Everything in HTML4, plus   Simplified doctype   Semantic tags
,
, , ,
, etc…   Multimedia and   Programmatic drawing   SVG support  

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

6

CSS3  

Everything in CSS2, plus:   Rounded corners   Drop shadows   RGBA & HSLA colors   CSS Media Queries   Pseudo-class selectors   Web fonts   Rich formatting and multi-column layouts

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

7

JavaScript  

 

 

New APIs  

Geolocation

 

Client side storage

 

Multimedia APIs

Frameworks  

jQuery (jQuery UI, jQuery Mobile), MooTools, Sencha, etc…

 

Not technically part of HTML5, but definitely useful in building HTML5 experiences

Tools  

Modernizr

 

HTML5boilerplate

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

8

HTML5/CSS3 Support  

 

 

The latest version of most desktop browsers support *most* HTML5 & CSS3 features   Safari, Chrome, Firefox, IE(9+), Opera The latest smartphone/mobile devices support *most* HTML5 & CSS3 features   iOS, Android*, BlackBerry 6+ However, it is NOT supported everywhere. You must test in target browsers, and can also use feature detection libraries like Modernizr to have graceful degradation of features.

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

9

HTML5 Usage Considerations      

 

Who is your target audience? Do their browsers support HTML5? Does your application even need HTML5? HTML5 “apps” are not as simple as and “HTML page”   Simple inclusion of or is one thing, stateful client-side application is another   Rich client side interaction requires development effort   Rich client side interaction requires UI designers & developers

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

10

Enough slides

Let’s start building HTML5 experiences! © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

11

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

12

Suggest Documents