How else does Adobe help with HTML5 development?      Bhakti Pingale | Platform Evangelist, Adobe© 2011 Adobe Systems Inco...
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...
So Adobe Muse is about…       Plan       Design       Publish© 2011 Adobe Systems Incorporated. All Rights Reserved. Ad...
Plan       Sitemaps       Master Pages       Site-wide properties© 2011 Adobe Systems Incorporated. All Rights Reserved...
Design       Familiar Adobe tools       Dynamic page resizing       Image optimization       Round-trip editing      ...
Design       Auto-generated navigation       Defined object states       Embedded HTML and Anchor links       SlideSho...
Adobe Business Catalyst       Adobe Business Catalyst is the hosting and publishing        platform for trials created in...
Publish       Trial sites for testing       Adobe hosting - Reduce time from design to        deployment       Publish ...
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: Confi...
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...
Limitations       Filters except for alpha       Blending       Dynamic masks       Some TLF texts       3D Transform...
Support       All types of vector art and images       Classic text       Instance name       Full movie clip and grap...
Best practices       Do not Mix Symbol instances, images and graphics in        the same layer       Do not rely on fram...
Wallaby generated HTML content structure  <head>         <meta charset="utf-8"></meta>         <link href="candle.css" typ...
Major classes in Wallaby generated CSS       Wlby_movie: the stage, defines the drawing area       Wlby sprite: correspo...
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 Implementa...
Extensions       Threading content: Content that flows from one area        to another.       Arbitrarily shaped contain...
Content Flow  CSS                                                                         HTML  #source {                 ...
Arbitrary Shape Containers    CSS                                                                       HTML    .circle{  ...
Arbitrary Shape Exclusions                                                                              CSS               ...
Region Styling  CSS  p{        color: gray;}  @region-style #region_1 {       p{              color: #0C3D5F; }  }  HTML  ...
© 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                  ...
Upcoming SlideShare
Loading in …5
×

How else does Adobe help in HTML5 development?

896
-1

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
896
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How else does Adobe help in HTML5 development?

  1. 1. How else does Adobe help with HTML5 development? Bhakti Pingale | Platform Evangelist, Adobe© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2. Agenda© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  3. 3. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  4. 4. 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.
  5. 5. So Adobe Muse is about…  Plan  Design  Publish© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  6. 6. Plan  Sitemaps  Master Pages  Site-wide properties© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  7. 7. 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.
  8. 8. 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.
  9. 9. 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.
  10. 10. 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.
  11. 11. Muse Showcases© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  12. 12. 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.
  13. 13. Story© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  14. 14. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  15. 15. 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.
  16. 16. 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.
  17. 17. 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.
  18. 18. 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.
  19. 19. 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.
  20. 20. 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.
  21. 21. http://labs.adobe.com/technologies/wallaby/© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  22. 22. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  23. 23. 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.
  24. 24. 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.
  25. 25. 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.
  26. 26. 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.
  27. 27. 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.
  28. 28. 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
  29. 29. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  30. 30. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  31. 31. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  32. 32. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  33. 33. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  34. 34. http://labs.adobe.com/technologies/cssregions/© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  35. 35. Thank you! bhakti@adobe.com @bhaktipingale http://pingtalks.com© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×