How else does Adobe help in HTML5 development?

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

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

Agenda


Adobe Muse

 Why?
 Dreamweaver is God sent
 No replacement
 But….

Design and Publish HTML websites
without writing code


So Adobe Muse is about…

 Plan
 Design
 Publish


Plan

 Sitemaps
 Master Pages
 Site-wide properties


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


Design

 Auto-generated navigation
 Defined object states
 Embedded HTML and Anchor links
 SlideShows
 Tabbed and accordion panels and LightBoxes
 Trigger and target - Hotspot


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


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


Muse Showcases


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


Story


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


Limitations

 Filters except for alpha
 Blending
 Dynamic masks
 Some TLF texts
 3D Transforms and tweens
 Audio – Video
 Actionscript
 Armatures


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


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


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>


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


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


CSS 3 Regions

 Web – a rich repository
 Proposals to W3C CSS working group
 Created Prototype Implementation using WebKit
 Disclaimer


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.


Content Flow

CSS HTML
#source { <div id="source">
flow: "main-thread"; <p>Lorem ipsum dolor [...]</p>
} </div>
.region {
content: from(main-thread); <div id="region1" class="region"></div>
background: #C5DFF0; <div id="region2" class="region"></div>
} <div id="region3" class="region"></div>


Arbitrary Shape Containers

CSS HTML
.circle{ <div class="circle"></div>
/* shape the element as a circle */
wrap-shape: polygon(0px, 150px /* ...more points */); <div class="heart"></div>
wrap-shape-mode: content; }

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

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>

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>
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Region styling is not yet implemented in the WebKit prototype that is
currently available on Adobe Labs

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


Thank you!
bhakti@adobe.com
@bhaktipingale
http://pingtalks.com


How else does Adobe help in HTML5 development?

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Destacado

Destacado (9)

Similar a How else does Adobe help in HTML5 development?

Similar a How else does Adobe help in HTML5 development? (20)

Último

Último (20)

How else does Adobe help in HTML5 development?