how else does adobe help in html5 development?
DESCRIPTION
This is Bhakti Pingale's session at the HTML5 Camp London on 8th Sept 2011TRANSCRIPT
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
How else does Adobe help with HTML5 development? Bhakti Pingale | Platform Evangelist, Adobe
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Agenda
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
So Adobe Muse is about…
Plan
Design
Publish
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Plan
Sitemaps
Master Pages
Site-wide properties
© 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
© 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
© 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
© 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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Muse Showcases
© 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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Story
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 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
© 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
© 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
© 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
© 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>
© 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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
http://labs.adobe.com/technologies/wallaby/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 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
© 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.
© 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>
© 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;
© 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>
© 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
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
http://labs.adobe.com/technologies/cssregions/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Thank you! [email protected]
@bhaktipingale
http://pingtalks.com