How else does Adobe help in HTML5 development?

35
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. How else does Adobe help with HTML5 development? Bhakti Pingale | Platform Evangelist, Adobe

description

This is Bhakti Pingale's session at the HTML5 Camp London on 8th Sept 2011

Transcript of How else does Adobe help in HTML5 development?

Page 1: How else does Adobe help in HTML5 development?

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

How else does Adobe help with HTML5 development? Bhakti Pingale | Platform Evangelist, Adobe

Page 2: How else does Adobe help in HTML5 development?

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

Agenda

Page 3: How else does Adobe help in HTML5 development?

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

Page 4: How else does Adobe help in HTML5 development?

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

Adobe Muse

Why?

Dreamweaver is God sent

No replacement

But….

Design and Publish HTML websites without writing code

Page 5: How else does Adobe help in HTML5 development?

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

So Adobe Muse is about…

Plan

Design

Publish

Page 6: How else does Adobe help in HTML5 development?

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

Plan

Sitemaps

Master Pages

Site-wide properties

Page 7: How else does Adobe help in HTML5 development?

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

Design

Familiar Adobe tools

Dynamic page resizing

Image optimization

Round-trip editing

Pin to browser

Web Safe fonts

Asset Management

CSS styles generated by Muse

Page 8: How else does Adobe help in HTML5 development?

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

Design

Auto-generated navigation

Defined object states

Embedded HTML and Anchor links

SlideShows

Tabbed and accordion panels and LightBoxes

Trigger and target - Hotspot

Page 9: How else does Adobe help in HTML5 development?

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

Adobe Business Catalyst

Adobe Business Catalyst is the hosting and publishing platform for trials created in Muse

$9/month

Reliable, high performance hosting

Flexible billing options

Page 10: How else does Adobe help in HTML5 development?

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

Publish

Trial sites for testing

Adobe hosting - Reduce time from design to deployment

Publish and update your website from within Muse

Browser compatibility

Export to a provider

Page 11: How else does Adobe help in HTML5 development?

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

Muse Showcases

Page 12: How else does Adobe help in HTML5 development?

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

Upcoming Events

Muse Jam Session: Adding Dynamic Content with Arbitrary HTML – Sep 7

Muse Jam Session: Configuring and Styling Muse Widgets – Sep 14

http://muse.adobe.com

Page 13: How else does Adobe help in HTML5 development?

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

Story

Page 14: How else does Adobe help in HTML5 development?

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

Page 15: How else does Adobe help in HTML5 development?

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

Wallaby

Adobe AIR based tool

FLA HTML5

Creates corresponding JS and CSS

Art work and Animations contained in FLA is converted to SVG and CSS-3 based Animation

Page 16: How else does Adobe help in HTML5 development?

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

Limitations

Filters except for alpha

Blending

Dynamic masks

Some TLF texts

3D Transforms and tweens

Audio – Video

Actionscript

Armatures

Page 17: How else does Adobe help in HTML5 development?

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

Support

All types of vector art and images

Classic text

Instance name

Full movie clip and graphics support

Full support for graphic and motion tweens including guide layers

Shape tweens

Buttons with roll over and down states

Page 18: How else does Adobe help in HTML5 development?

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

Best practices

Do not Mix Symbol instances, images and graphics in the same layer

Do not rely on frame by frame animation

Try to use tweens as much as possible

Minimize the use of Shape tweening and armatures

Keeping masking to the minimum

Avoid animated scaling when targeting Chrome

Page 19: How else does Adobe help in HTML5 development?

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

Wallaby generated HTML content structure

<head>

<meta charset="utf-8"></meta>

<link href="candle.css" type="text/css" rel="stylesheet"></link>

<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript" src="candle.js"></script>

</head>

Page 20: How else does Adobe help in HTML5 development?

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

Major classes in Wallaby generated CSS

Wlby_movie: the stage, defines the drawing area

Wlby sprite: corresponds to a layer, resets its elements once it times out

Wlby_graphic: for layers that don’t repeat

Wlby_fs: corresponds to a keyframe. When it times out, it will hide itself and make the next sibling active

Wlby_button: surrounds graphical elements for a button

Page 21: How else does Adobe help in HTML5 development?

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

http://labs.adobe.com/technologies/wallaby/

Page 22: How else does Adobe help in HTML5 development?

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

Page 23: How else does Adobe help in HTML5 development?

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

CSS 3 Regions

Web – a rich repository

Proposals to W3C CSS working group

Created Prototype Implementation using WebKit

Disclaimer

Page 24: How else does Adobe help in HTML5 development?

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

Extensions

Threading content: Content that flows from one area to another.

Arbitrarily shaped containers: Text displayed in non-rectangular areas.

Arbitrarily shaped exclusions: Text can wrap around arbitrary shapes.

Region styling: Styling content depending on the area in which it flows.

Page 25: How else does Adobe help in HTML5 development?

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

Content Flow

CSS #source { flow: "main-thread"; } .region { content: from(main-thread); background: #C5DFF0; }

HTML <div id="source"> <p>Lorem ipsum dolor [...]</p> </div> <div id="region1" class="region"></div> <div id="region2" class="region"></div> <div id="region3" class="region"></div>

Page 26: How else does Adobe help in HTML5 development?

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

Arbitrary Shape Containers

CSS .circle{ /* shape the element as a circle */ wrap-shape: polygon(0px, 150px /* ...more points */); wrap-shape-mode: content; } .heart{ /* shape the element as a heart */ wrap-shape: polygon(150px, 32px /* ...more points */); wrap-shape-mode: content; }

HTML <div class="circle"></div> <div class="heart"></div> * webkit-render-wrap-shape: auto;

Page 27: How else does Adobe help in HTML5 development?

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

Arbitrary Shape Exclusions

CSS .exclusion{ /* flow text around this element */ wrap-shape-mode: around; } HTML <div class="exclusion circle"> <p>Lorem ipsum dolor [...]</p> </div>

Page 28: How else does Adobe help in HTML5 development?

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

Region Styling

CSS

p {

color: gray;}

@region-style #region_1 {

p {

color: #0C3D5F; }

}

HTML <div id="article"> <h1>Introduction</h1> <p>This is an example [...]</p> </div> <div id="region_1"></div> <div id="region_2"></div> <div id="region_3"></div> <div id="region_4"></div>

Region styling is not yet implemented in the WebKit prototype that is currently available on Adobe Labs

Page 29: How else does Adobe help in HTML5 development?

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

Page 30: How else does Adobe help in HTML5 development?

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

Page 31: How else does Adobe help in HTML5 development?

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

Page 32: How else does Adobe help in HTML5 development?

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

Page 33: How else does Adobe help in HTML5 development?

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

Page 34: How else does Adobe help in HTML5 development?

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

http://labs.adobe.com/technologies/cssregions/

Page 35: How else does Adobe help in HTML5 development?

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

Thank you! [email protected]

@bhaktipingale

http://pingtalks.com