• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How else does Adobe help in HTML5 development?
 

How else does Adobe help in HTML5 development?

on

  • 903 views

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

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

Statistics

Views

Total Views
903
Views on SlideShare
903
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How else does Adobe help in HTML5 development? How else does Adobe help in HTML5 development? Presentation Transcript

    • 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 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>© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    • 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;© 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>© 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
    • © 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! bhakti@adobe.com @bhaktipingale http://pingtalks.com© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.