Familiar Tools, New Possibilities:  Leveraging the Power of theAdobe Web Publishing System<br />John Hartley, ACES Webmast...
Distributed Web PublishingContribute, Dreamweaver,& Contribute Publishing Server<br />
Mobile<br />
Not to be confused with Mobile, AL<br />
We’re Goin’ Mobile!<br />ePubs, Apps, & Mobile Websites! Oh, my!<br />
Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013<br />
Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013<br />It‘s estimated that the combi...
2009 App Ecosystem <br />Dominated by iPhone<br />
2010 App Ecosystem <br />More info: MobiForge<br />
2010 Q4 Smartphone Sales<br />More info: Wikipedia<br />
Apps vs. Mobile Web Development<br />Pros & Cons to both depending on needs:<br /><ul><li> Necessity of Web/Database  conn...
 Ease and speed of development and maintenance may require a site
Marketing & monetization considerations of app store/market
 Buzzword political considerations</li></ul>More info: Wikipedia<br />
Native Apps vs. Mobile Web  Apps<br />"If we, the Web's users, allow these (app development) and other trends to proceed u...
Ultimately, It’s Your Decision!<br />Either way you go, the tools in the new version of Adobe Creative Suite 5.5 will help...
Ultimately, It’s Your Decision!<br />Either way you go, the tools in the new version of Adobe Creative Suite 5.5 will help...
Which one isright for yourneeds?<br />
What are Adobe CS Liveonline services? <br />“Adobe® CS Live online services integrate with Adobe Creative Suite® software...
More Info: Adobe.com<br />
Dreamweaver CS 5.5What’s new?<br />New in CS 5:<br /><ul><li>Multiscreen Preview panel
 CSS3 UI enhancements
 Simple site setup
Multiscreen interfaces with CSS3
 PHP custom-class code hinting
 Adobe BrowserLab integration</li></ul>New in CS 5.5:<br /><ul><li> Enhanced jQuery support
PhoneGap integration
 FTPS and FTPES support
 W3C validation
Upcoming SlideShare
Loading in …5
×

Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Publishing System

1,688 views

Published on

From the 2011 ACE/NETC Conference in Denver, CO

This presentation focuses on utilizing technologies such as jQuery, CSS, Ajax/Spry, Wordpress, and other tools to extend the capabilities of the Adobe web publishing system. The Adobe web publishing system is primarily composed of Dreamweaver, Contribute, and the Contribute Publishing Server. Dreamweaver is used by web designers and developers to create websites. Contribute is used by the non-technical subject matter experts to edit the content of the websites through a simple graphic user interface similar to Microsoft Word. The Contribute Publishing Server controls the file permissions and other administrative settings of the websites. These programs also integrate with other Adobe products including Flash/Flex, Acrobat, InDesign, Photoshop, and other familiar programs. Technologies, such as the ones that will be discussed, are extremely useful in constructing interactive site navigation, in tailoring mobile sites, or in utilizing blogs and RSS integration. However, there are simple strategies to allow for easy editing of the content of the sites through Contribute without interfering with the scripting these utilize. The presenters will endeavor to give a general overview of some of the tools and technologies involved, as well as showcase a few examples of specific tricks that web designers and developers should find very useful.

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

  • Be the first to like this

No Downloads
Views
Total views
1,688
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Good Morning!How many of you are IT folks? How many of you are Communications folks?How many of you consider yourselves to be a little of both?I believe that we all need to really be a little of both or at least enough to understand each other’s perspective, understand what each other need in the development process, and be able to work together as a team. Now more than ever. My bias. Graphic Design background, have worked in print, television, and web development. For the last 14 years I’ve been the webmaster for ACES as well as an IT Spec. for AU supporting CoAg &amp; AAES. Also Adobe User Group Manager. Past rivalry, rival media (web vs. print), now convergence with a focus on mobile portability (epubs, apps, mobile sites). To accomplish this effectively and to have a good product at the end, we need each other. The tools of the Adobe Creative Suite that we are already familiar with both in the print world and web development have been expanded and a lot has been done to integrate them into each other to foster and streamline collaboration.
  • Past attendees may remember presentations I’ve done on Adobe before focusing on using Dreamweaver with Contribute and the Contribute Publishing Server for allowing distributed web development and maintenance by content providers without needing web development skills.Wordpress Troy couldn’t make it but I’ll try to answer any questions at the end. I’m not an expert on WP or MU the way Troy is. I’d be happy to put you in contac t with Troy. hahntro@auburn.eduWYSIWYG editing, secure AD/LDAP user authentication, assign users to roles with different access capabilities, uses DW Templates, tie user options to predefined stylesheet, users can send for review, or publish depending on configuration, integrated image editing tools, rich media support and html snippet insertion for YouTube, etc., Blog (WordPress, MoveableType, etc.) integration.We are still using this model and there have been many improvements over the past couple of years with more granularity in flow process, sunrise/set dates for documents, HTML snippet insertion for such things as embedding YouTube, Photobucket, Flickr, etc. Requires training behyond how to use the program.This system has worked very well for us and I’d be glad to talk about it in more detail later but I’d like to jump past it quickly today to focus more on Mobile.
  • Site definitions mixup
  • 2009 we were focused on web development for desktops and possibly notebook or netbooks. Publications were primarily still distributed in PDF format or some HTML. eReader devices were around but not that big of a deal yet. Apps for iphone were the buzzword of the day and you heard stories of kids making $$ building and selling iphone apps. Google introduced their first Android phone, T-mobile G1 in
  • Apple introduced the ipad, iphone 4, new ipods, Samsung has launched its new badasmartphone OS; Microsoft&apos;s new smartphone OS, Windows Phone 7Android maid gains on iPhone and it became obvious that Android would pass iphones in the near future. So you have to ask, do you want that on Android too? Android should arguably be the primary choice since it&apos;ll soon be the biggest platform. What about iPad and Windows Phone 7? And maybe Nokia too? At the very least you&apos;ll now need two apps where one might have been considered sufficient before, and possibly as many as 4 or 5 if you want to cover Windows, Symbian, Blackberry and Bada.Developers looked to software solutions to streamline the process. Adobe had plans to deliver this at the time but Apple’s refusal to support Flash threw a wrench in things. Plus other barriers coding, app store access, etc. Meanwhile Android worked to add Flash support, open market for apps, open source OS gets distributed on more and more different devices from multiple brands, reduces cost and becomes more pervasive.
  • 2010 Apple introduced the ipad, iphone 4, new ipods, Samsung has launched its new badasmartphone OS; Microsoft&apos;s new smartphone OS, Windows Phone 72010 saw the rapid rise of the Google Android operating system from 4 percent of new deployments in 2009 to 33 percent at the beginning of 2011 making it share the top position with the since long dominating Symbian OS. The smaller rivals include US popular Blackberry OS, the trendsetting iOS, Samsung&apos;s recently introduced bada, HP&apos;s heir of Palm PilotwebOS and the Microsoft Windows Phone OS seeing a possible revival through an alliance with Nokia.
  • 2010 Apple introduced the ipad, iphone 4, new ipods, Samsung has launched its new badasmartphone OS; Microsoft&apos;s new smartphone OS, Windows Phone 72010 saw the rapid rise of the Google Android operating system from 4 percent of new deployments in 2009 to 33 percent at the beginning of 2011 making it share the top position with the since long dominating Symbian OS. The smaller rivals include US popular Blackberry OS, the trendsetting iOS, Samsung&apos;s recently introduced bada, HP&apos;s heir of Palm PilotwebOS and the Microsoft Windows Phone OS seeing a possible revival through an alliance with Nokia.
  • Native phone apps cause fragmentation of the web. You loose the common interface.
  • Native phone apps cause fragmentation of the web. You loose the common interface.
  • Native phone apps cause fragmentation of the web. You loose the common interface.
  • Look at which applications are in which bundle.
  • What are Adobe CS Live online services?
  • Most useful IMHO: Browser Lab for testing. Both stand alone and integrated into DW.CS Review for online collaboration, marking and tracking changes, etc.Acrobat.com – Primarily Acrobat Connect videoconferenceingStory – Storyboarding and script development for videoSite Catalyst – internet trends and tracking
  • Great new features!
  • Great new features!
  • smartphones, tablets, and personal computers with the Multiscreen Preview panel
  • Media queries are part of the CSS specification, and as such can be used in much the same way as any other CSS property.
  • Media queries are part of the CSS specification, and as such can be used in much the same way as any other CSS property. Media queries are used to specify different style sheets for different devices.
  • CSS 3 widgets built and code hinting for Opacity, Rounded Corners, Transform, etc.
  • The biggest deal! jQuery Mobile for mobile app development
  • The biggest deal! jQuery Mobile for mobile app development
  • The biggest deal! jQuery Mobile for mobile app development
  • The biggest deal! jQuery Mobile for mobile app development
  • The biggest deal! jQuery Mobile for mobile app development
  • Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Publishing System

    1. 1. Familiar Tools, New Possibilities: Leveraging the Power of theAdobe Web Publishing System<br />John Hartley, ACES Webmaster<br />hartley@aces.edu<br />
    2. 2. Distributed Web PublishingContribute, Dreamweaver,& Contribute Publishing Server<br />
    3. 3. Mobile<br />
    4. 4. Not to be confused with Mobile, AL<br />
    5. 5. We’re Goin’ Mobile!<br />ePubs, Apps, & Mobile Websites! Oh, my!<br />
    6. 6. Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013<br />
    7. 7. Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013<br />It‘s estimated that the combined installed base of smartphones and browser-equipped enhanced phones will surpass 1.82 billion units by 2013, eclipsing the total of 1.78 billion PCs by then. (Gartner)<br />
    8. 8. 2009 App Ecosystem <br />Dominated by iPhone<br />
    9. 9. 2010 App Ecosystem <br />More info: MobiForge<br />
    10. 10. 2010 Q4 Smartphone Sales<br />More info: Wikipedia<br />
    11. 11. Apps vs. Mobile Web Development<br />Pros & Cons to both depending on needs:<br /><ul><li> Necessity of Web/Database connectivity may require an app
    12. 12. Ease and speed of development and maintenance may require a site
    13. 13. Marketing & monetization considerations of app store/market
    14. 14. Buzzword political considerations</li></ul>More info: Wikipedia<br />
    15. 15. Native Apps vs. Mobile Web Apps<br />"If we, the Web's users, allow these (app development) and other trends to proceed unchecked, the Web could be broken into fragmented islands. We could lose the freedom to connect with whichever Web sites we want." Tim Berners-Lee, father of the Web<br />More info: mobiForge<br />
    16. 16. Ultimately, It’s Your Decision!<br />Either way you go, the tools in the new version of Adobe Creative Suite 5.5 will help you get there. <br />
    17. 17. Ultimately, It’s Your Decision!<br />Either way you go, the tools in the new version of Adobe Creative Suite 5.5 will help you get there.<br />But which one is right for your needs? <br />
    18. 18. Which one isright for yourneeds?<br />
    19. 19. What are Adobe CS Liveonline services? <br />“Adobe® CS Live online services integrate with Adobe Creative Suite® software to help accelerate your workflow. Accurately test web content, initiate and manage reviews, create blueprints for video projects, and easily share information.”<br />
    20. 20. More Info: Adobe.com<br />
    21. 21. Dreamweaver CS 5.5What’s new?<br />New in CS 5:<br /><ul><li>Multiscreen Preview panel
    22. 22. CSS3 UI enhancements
    23. 23. Simple site setup
    24. 24. Multiscreen interfaces with CSS3
    25. 25. PHP custom-class code hinting
    26. 26. Adobe BrowserLab integration</li></ul>New in CS 5.5:<br /><ul><li> Enhanced jQuery support
    27. 27. PhoneGap integration
    28. 28. FTPS and FTPES support
    29. 29. W3C validation
    30. 30. Mobile UI widgets </li></ul>More Info: Adobe.com<br />
    31. 31. Dreamweaver CS 5.5What’s new?<br />New in CS 5:<br /><ul><li>Multiscreen Preview panel
    32. 32. CSS3 UI enhancements
    33. 33. Simple site setup
    34. 34. Multiscreen interfaces with CSS3
    35. 35. PHP custom-class code hinting
    36. 36. Adobe BrowserLab integration</li></ul>New in CS 5.5:<br /><ul><li> Enhanced jQuery support
    37. 37. PhoneGap integration
    38. 38. FTPS and FTPES support
    39. 39. W3C validation
    40. 40. Mobile UI widgets </li></ul>More Info: Adobe.com<br />
    41. 41. Dreamweaver CS 5.5What’s new?<br />New in CS 5.5:<br /><ul><li> Enhanced jQuery support
    42. 42. PhoneGap integration
    43. 43. FTPS and FTPES support
    44. 44. W3C validation
    45. 45. Mobile UI widgets
    46. 46. Multiscreen Preview panel - Design for smartphones, tablets, and </li></ul> personal computers with the Multiscreen Preview panel. With <br /> media query support, developers can style and visualize rendering<br /> for a range of devices in a single panel. Plus, CSS3 Media Queries <br /> allow us to target a stylesheet to specific screen resolutions. <br /> (more) (video)<br />More Info: Adobe.com<br />
    47. 47. Dreamweaver CS 5.5What’s new?<br />Example: <br /><link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 649px)" ><br />Media queries are part of the CSS specification, and as such can be used in much the same way as any other CSS property. For example, you can specify media queries at the rule level, within a style sheet:<br />@media screen and (max-width:480px) { #navbar { float: none; width: 480px; } } <br />New in CS 5.5:<br /><ul><li> Enhanced jQuery support
    48. 48. PhoneGap integration
    49. 49. FTPS and FTPES support
    50. 50. W3C validation
    51. 51. Mobile UI widgets </li></ul>More Info: Adobe.com<br />
    52. 52. Dreamweaver CS 5.5What’s new?<br />New in CS 5.5:<br /><ul><li> Enhanced jQuery support
    53. 53. PhoneGap integration
    54. 54. FTPS and FTPES support
    55. 55. W3C validation
    56. 56. Mobile UI widgets </li></ul>Media queries are used to specify different style sheets for different devices. The most common way of using media queries, however, is to create external style sheets and target them for separate devices, or a class of devices. The following example shows multiple style sheets linked at the top of a web document. <br /><link href="css/main.css" rel="stylesheet" type="text/css"> <br /><link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 649px)" > <link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 650px) and (max-width: 800px)" ><br />More Info: Adobe.com<br />
    57. 57. Dreamweaver CS 5.5What’s new?<br />Other CSS3 capabilities:<br />Opacity - rgba (255,255,255,1) opaque; rgba(255,255,255,.5) for 50% a for alpha or opacity, apply to background color of a class or ID to be applied to a div, webkit in live view allows you to see thisRounded corners – border radius, defined for all or each, cross browser support for IE9 (work arounds for older IE such as curvycorners), vendor specific prefixes are a way to add CSS3 properties to browsers that have not updated their specs to support the W3C standards or for (some) older browsers Also, transform: rotate, etc. <br />New in CS 5.5:<br /><ul><li> Enhanced jQuery support
    58. 58. PhoneGap integration
    59. 59. FTPS and FTPES support
    60. 60. W3C validation
    61. 61. Mobile UI widgets </li></ul>More Info: Adobe.com<br />
    62. 62. Dreamweaver CS 5.5What’s new?<br />jQuery Mobile for mobile app development, user interface widjets, webkit integration in live view, can be used to create either an app (through Air) or run through a web browser on a mobile device with very similar features. However, easier to code and maintain. <br />Inside of the HEAD element you will want to reference the jQuery Mobile CSS and JavaScript files:<br /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <br /><script src="http://code.jquery.com/jquery-1.5.min.js"></script> <br /><script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile- <br /> 1.0a4.1.min.js"></script> <br />New in CS 5.5:<br /><ul><li> Enhanced jQuery support
    63. 63. PhoneGap integration
    64. 64. FTPS and FTPES support
    65. 65. W3C validation
    66. 66. Mobile UI widgets </li></ul>More Info: Adobe.com<br />
    67. 67. Dreamweaver CS 5.5What’s new?<br />HTML 5 Canvas animation in Dreamweaver, similar to the old timeline in dhtml, uses Wallaby to transform Falsh animation (.fla) to HTML 5 Canvas animation (video)<br />What is Canvas?<br />The canvas element is part of HTML5 and allows for dynamic,<br />scriptable rendering of 2D shapes and bitmap images.<br />What is Wallaby?<br />"Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (.FLA) files into HTML.<br />& lots more…<br />New in CS 5.5:<br /><ul><li> Enhanced jQuery support
    68. 68. PhoneGap integration
    69. 69. FTPS and FTPES support
    70. 70. W3C validation
    71. 71. Mobile UI widgets </li></ul>More Info: Adobe.com<br />
    72. 72. Dreamweaver CS 5.5What’s new?<br />PhoneGapintegration: HTML 5 + Css 3 + Javascript (jQuery)<br />What is PhoneGap?<br />The only Open Source Mobile framework that supports six <br />platforms. PhoneGap is an HTML 5 app platform that allows you <br />to author native applications with web technologies and get access <br />to APIs and app stores. PhoneGap leverages the technologies that developers already know best… HTML and Javascript.<br />(More Info)<br />& lots more…<br />New in CS 5.5:<br /><ul><li> Enhanced jQuery support
    73. 73. PhoneGap integration
    74. 74. FTPS and FTPES support
    75. 75. W3C validation
    76. 76. Mobile UI widgets </li></ul>More Info: Adobe.com<br />
    77. 77. InDesign CS 5.5What’s new?<br />There were many new features in InDesign CS 5 & CS 5.5:<br />Folio Producer tools <br />Overlay creator panel        <br /> Content viewer for desktop        <br />Access to Adobe Digital Publishing Suite<br /> Folio builder panel        <br />eBook creation <br /> EPUB export enhancements        <br /> Articles panel        <br /> Timing panel      <br />  Dynamic image resizing        <br /> Styles mapped to tags        <br />Rich interactive documents         <br /> Media panel      <br />  Animation panel      <br />  Timing panel   <br /> Object states panel     <br />Rich Interactive documents (continued)    <br />  Preview panel      <br />  Motion presets      <br />  FLV/F4V video import      <br />  MP3 audio import      <br /> Layout productivity tools        <br /> Linked text        <br /> Dragging and dropping of anchored objects        <br /> Multiple page sizes in a single InDesign file      <br /> Live distribute      <br />  Super step and repeat      <br />  Layers panel similar to panel in Adobe Illustrator®      <br />  Gap tool      <br />  Live Corner effects      <br />  Instant crop previews      <br />  Transformation of multiple selected items      <br />  Simplified object selection and editing      <br />  Swatches in Control panel      <br />  Live Captions    <br />  Tool Hints panel      <br />  Grid place<br />More Info: Adobe.com<br />
    78. 78. InDesign CS 5.5What’s new?<br /><ul><li> Export to ePub format
    79. 79. Converter to .mobi for Kindle
    80. 80. Interactive PDF with audio, video, and/or animation
    81. 81. Export to Flash (.fla)</li></ul>This last feature can be combined with Wallaby, as we mentioned earlier, to convert from Flash (.fla, not .swf) to HTML 5 so it can run on iOS(Video)<br />
    82. 82. InDesign CS 5.5What’s new?<br />Additional Resources:<br /><ul><li> Adobe Developer Center
    83. 83. Dreamweaver Developer Center
    84. 84. HTML 5 Developer Center
    85. 85. CSS 3
    86. 86. Adobe Browser Lab (Web browser testing. Both stand alone service and integrated into Dreamweaver “Adobe® BrowserLab is an online service that helps ensure your web content displays as intended. Accurately preview web pages across multiple browsers and operating systems, navigate links, and use diagnostic tools to optimize websites efficiently.” (video)
    87. 87. Lynda.com (video training site)</li></ul>John Hartley, ACES Webmaster<br />Email: hartley@aces.edu<br />LinkedIn: www.linkedin.com/in/jdhartley<br />Twitter: @yeltrah<br />Google: jdhartley<br />

    ×