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

  • 1,202 views
Uploaded on

From the 2011 ACE/NETC Conference in Denver, CO …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,202
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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 & 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'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'll soon be the biggest platform. What about iPad and Windows Phone 7? And maybe Nokia too? At the very least you'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'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's recently introduced bada, HP'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'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's recently introduced bada, HP'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

Transcript

  • 1. Familiar Tools, New Possibilities: Leveraging the Power of theAdobe Web Publishing System
    John Hartley, ACES Webmaster
    hartley@aces.edu
  • 2. Distributed Web PublishingContribute, Dreamweaver,& Contribute Publishing Server
  • 3. Mobile
  • 4. Not to be confused with Mobile, AL
  • 5. We’re Goin’ Mobile!
    ePubs, Apps, & Mobile Websites! Oh, my!
  • 6. Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013
  • 7. Mobile phones will overtake PCs as the most common web-access devices worldwide by 2013
    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)
  • 8. 2009 App Ecosystem
    Dominated by iPhone
  • 9. 2010 App Ecosystem
    More info: MobiForge
  • 10. 2010 Q4 Smartphone Sales
    More info: Wikipedia
  • 11. Apps vs. Mobile Web Development
    Pros & Cons to both depending on needs:
    • Necessity of Web/Database connectivity may require an app
    • 12. Ease and speed of development and maintenance may require a site
    • 13. Marketing & monetization considerations of app store/market
    • 14. Buzzword political considerations
    More info: Wikipedia
  • 15. Native Apps vs. Mobile Web Apps
    "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
    More info: mobiForge
  • 16. Ultimately, It’s Your Decision!
    Either way you go, the tools in the new version of Adobe Creative Suite 5.5 will help you get there.
  • 17. Ultimately, It’s Your Decision!
    Either way you go, the tools in the new version of Adobe Creative Suite 5.5 will help you get there.
    But which one is right for your needs?
  • 18. Which one isright for yourneeds?
  • 19. What are Adobe CS Liveonline services?
    “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.”
  • 20. More Info: Adobe.com
  • 21. Dreamweaver CS 5.5What’s new?
    New in CS 5:
    • Multiscreen Preview panel
    • 22. CSS3 UI enhancements
    • 23. Simple site setup
    • 24. Multiscreen interfaces with CSS3
    • 25. PHP custom-class code hinting
    • 26. Adobe BrowserLab integration
    New in CS 5.5:
    • Enhanced jQuery support
    • 27. PhoneGap integration
    • 28. FTPS and FTPES support
    • 29. W3C validation
    • 30. Mobile UI widgets
    More Info: Adobe.com
  • 31. Dreamweaver CS 5.5What’s new?
    New in CS 5:
    • Multiscreen Preview panel
    • 32. CSS3 UI enhancements
    • 33. Simple site setup
    • 34. Multiscreen interfaces with CSS3
    • 35. PHP custom-class code hinting
    • 36. Adobe BrowserLab integration
    New in CS 5.5:
    • Enhanced jQuery support
    • 37. PhoneGap integration
    • 38. FTPS and FTPES support
    • 39. W3C validation
    • 40. Mobile UI widgets
    More Info: Adobe.com
  • 41. Dreamweaver CS 5.5What’s new?
    New in CS 5.5:
    • Enhanced jQuery support
    • 42. PhoneGap integration
    • 43. FTPS and FTPES support
    • 44. W3C validation
    • 45. Mobile UI widgets
    • 46. Multiscreen Preview panel - Design for smartphones, tablets, and
    personal computers with the Multiscreen Preview panel. With
    media query support, developers can style and visualize rendering
    for a range of devices in a single panel. Plus, CSS3 Media Queries
    allow us to target a stylesheet to specific screen resolutions.
    (more) (video)
    More Info: Adobe.com
  • 47. Dreamweaver CS 5.5What’s new?
    Example:
    <link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 649px)" >
    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:
    @media screen and (max-width:480px) { #navbar { float: none; width: 480px; } }
    New in CS 5.5:
    • Enhanced jQuery support
    • 48. PhoneGap integration
    • 49. FTPS and FTPES support
    • 50. W3C validation
    • 51. Mobile UI widgets
    More Info: Adobe.com
  • 52. Dreamweaver CS 5.5What’s new?
    New in CS 5.5:
    • Enhanced jQuery support
    • 53. PhoneGap integration
    • 54. FTPS and FTPES support
    • 55. W3C validation
    • 56. Mobile UI widgets
    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.
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <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)" >
    More Info: Adobe.com
  • 57. Dreamweaver CS 5.5What’s new?
    Other CSS3 capabilities:
    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.
    New in CS 5.5:
    • Enhanced jQuery support
    • 58. PhoneGap integration
    • 59. FTPS and FTPES support
    • 60. W3C validation
    • 61. Mobile UI widgets
    More Info: Adobe.com
  • 62. Dreamweaver CS 5.5What’s new?
    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.
    Inside of the HEAD element you will want to reference the jQuery Mobile CSS and JavaScript files:
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-
    1.0a4.1.min.js"></script>
    New in CS 5.5:
    • Enhanced jQuery support
    • 63. PhoneGap integration
    • 64. FTPS and FTPES support
    • 65. W3C validation
    • 66. Mobile UI widgets
    More Info: Adobe.com
  • 67. Dreamweaver CS 5.5What’s new?
    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)
    What is Canvas?
    The canvas element is part of HTML5 and allows for dynamic,
    scriptable rendering of 2D shapes and bitmap images.
    What is Wallaby?
    "Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (.FLA) files into HTML.
    & lots more…
    New in CS 5.5:
    • Enhanced jQuery support
    • 68. PhoneGap integration
    • 69. FTPS and FTPES support
    • 70. W3C validation
    • 71. Mobile UI widgets
    More Info: Adobe.com
  • 72. Dreamweaver CS 5.5What’s new?
    PhoneGapintegration: HTML 5 + Css 3 + Javascript (jQuery)
    What is PhoneGap?
    The only Open Source Mobile framework that supports six
    platforms. PhoneGap is an HTML 5 app platform that allows you
    to author native applications with web technologies and get access
    to APIs and app stores. PhoneGap leverages the technologies that developers already know best… HTML and Javascript.
    (More Info)
    & lots more…
    New in CS 5.5:
    • Enhanced jQuery support
    • 73. PhoneGap integration
    • 74. FTPS and FTPES support
    • 75. W3C validation
    • 76. Mobile UI widgets
    More Info: Adobe.com
  • 77. InDesign CS 5.5What’s new?
    There were many new features in InDesign CS 5 & CS 5.5:
    Folio Producer tools
    Overlay creator panel        
    Content viewer for desktop        
    Access to Adobe Digital Publishing Suite
    Folio builder panel        
    eBook creation
    EPUB export enhancements        
    Articles panel        
    Timing panel      
      Dynamic image resizing        
    Styles mapped to tags        
    Rich interactive documents        
    Media panel      
      Animation panel      
      Timing panel  
    Object states panel    
    Rich Interactive documents (continued)    
      Preview panel      
      Motion presets      
      FLV/F4V video import      
      MP3 audio import      
     Layout productivity tools        
    Linked text        
    Dragging and dropping of anchored objects        
    Multiple page sizes in a single InDesign file      
    Live distribute      
      Super step and repeat      
      Layers panel similar to panel in Adobe Illustrator®      
      Gap tool      
      Live Corner effects      
      Instant crop previews      
      Transformation of multiple selected items      
     Simplified object selection and editing      
      Swatches in Control panel      
      Live Captions    
      Tool Hints panel      
      Grid place
    More Info: Adobe.com
  • 78. InDesign CS 5.5What’s new?
    • Export to ePub format
    • 79. Converter to .mobi for Kindle
    • 80. Interactive PDF with audio, video, and/or animation
    • 81. Export to Flash (.fla)
    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)
  • 82. InDesign CS 5.5What’s new?
    Additional Resources:
    • Adobe Developer Center
    • 83. Dreamweaver Developer Center
    • 84. HTML 5 Developer Center
    • 85. CSS 3
    • 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. Lynda.com (video training site)
    John Hartley, ACES Webmaster
    Email: hartley@aces.edu
    LinkedIn: www.linkedin.com/in/jdhartley
    Twitter: @yeltrah
    Google: jdhartley