Studio 8: The Next Generation Part II : Dreamweaver, Fireworks and Contribute
by Judith Dinowitz
When Michael and I sat down for a briefing on the new Studio 8 in June, we were psyched. We had seen some of the features of the upcoming Flash release at Powered by Detroit, so we already had some clue of the new capabilities in Flash 8 (see Part I of this article.) But we hadn't seen Dreamweaver at all, and we weren't sure what to expect. In fact, a few minutes into the Dreamweaver part of the presentation, Michael told Jennifer Taylor, Product Manager for Dreamweaver, the reasons he had never been able to use Dreamweaver. Michael pointed out that many people have complained that Dreamweaver seemed to be both bulky and slow. This was specifically addressed when dealing with the issue of file uploading later on. He said that he has found that previous versions don't let him do all of the things he needs to do. In particular, Michael said, he has a problem with the design of the Dreamweaver User Interface. It's rounded, and he wants his squared off, like the UI in ColdFusion Studio, with plenty of space for him to work. "Designers like Californian; they like smooth and rounded and the fuzzy feel of the UI. Programmers like German, where everything is straight lines and there's no wasted space. Get us what we want, where we want it right now, and don't worry about the fuzz. Just skin Dreamweaver so you can take those rounded edges off, and it would be perfect." Taylor thought this was a good idea, and might be considered for a future release. She pointed out that some of the new features in Dreamweaver 8 did address the programmer's desires. [See the section below on Code View Innovations.] Taylor said that the Dreamweaver team spent a lot of time on the road working with over 60 customers, and three key themes emerged for Dreamweaver 8:- Integration - enabling people to integrate the latest technology from the Web
- Best Practices - enabling them to work with the best practices of the Web
- Efficiency - letting them get more done in less time.
Integration
Taylor felt that integration is an essential aspect of Dreamweaver. "Studio has five interactive tools, and Dreamweaver is the hub," said Taylor. "It's where the other assets (like Fireworks images) get married to HTML to create great experiences for the Web." Taylor demonstrated the new integration of Flash Video in Dreamweaver 8. Taylor said that Macromedia wanted to make it drop-dead simple to add Flash video into a web page. "You drop it into the Studio Flash Video encoder, encode it, and load it in your page using a simple dialog-driven approach," said Taylor. She showed us how to delete placeholder content and insert a Flash video file through the Insert menu option in Dreamweaver. She pointed to the FLV that came out of her encoder, picked a skin, saved it and previewed it in her browser. The Flash video was up and running in 3 seconds. Taylor also noted that this version of Dreamweaver has integration with Flashpaper, as well as updated support for ColdFusion MX 7 and PHP 5. Dreamweaver's new native ColdFusion MX 7 support includes code hinting, updated server behaviors, and the ability to filter your list of CFC's to only show those that are relevant to your site.Best Practices: Advanced CSS Support and XML-Based Data integration
Best Practices refer to the technologies and development methodologies that enable people to develop great looking, standards-compliant websites and applications quickly and efficiently. "Dreamweaver is a tool that can be used to educate," said Taylor, "introducing users to new technologies and teaching them how they work." Dreamweaver 8 now has support for two such technologies: advanced CSS and XML-based data integration. Dreamweaver's New CSS Features Taylor said that what's most exciting about Dreamweaver 8 is the expressiveness that the new CSS features allow. "The underlying technology of HTML hasn't change since the late 1990s, but as browsers have increased their support of CSS, it has opened up a whole new universe where people can go and unlock their creative potential." Macromedia wanted to help people move from just styling fonts with CSS to using divs as building blocks to structure their pages, but found that their users were visually challenged. "People had really come to rely on Dreamweaver's powerful table visualization features," said Taylor. "When they were doing tables, they could go to Design View and know exactly where they were and what to click on. In CSS, they were flying blind." Macromedia added CSS Layout Visualization (see Figure 1 below), a design time aid that colors each div a different color so you can see exactly where one div begins and another one ends. Also, it shows any special relationship between two divs (such as one nesting inside the other). If you click on a nested div, Dreamweaver's Tool Tips panel will show you the name of the div and its basic attributes, which makes it much easier to edit.
Figure 1: In CSS Layout View, the divs are clearly marked in different colors. The unified CSS panel in the upper right corner of the page contains the "All" and "Current" views. To make it easier on their CSS users, the Dreamweaver team created a new CSS panel that unified Dreamweaver's CSS functionality. The "All" view and the "Current" view in the panel serve two different functions. The All view shows all the styles that are defined in the stylesheet in a tree format. As the user clicks on the tree, the Properties grid on bottom shows the attributes that are defined in that style, giving the user a quick, visual way to edit or add properties. When you go to Current view and click on a specific element within the design, at the top, you'll see all of the attributes that have been applied to the specific CSS element. This is useful because the way a design displays in a browser is often the combination of multiple styles being applied at one time. When you click on a specific attribute, such as background color, Dreamweaver tells you where in the cascade that attribute is defined, and allows you to go in one simple movement to that place and to change the background color. Fireworks and CSS Taylor demonstrated the new capabilities for creating graphics using CSS in Fireworks 8. She created a simple CSS popup menu and then exported the image to Dreamweaver. (In the Advanced options, CSS was the default for Pop-up Menus.) When she deleted her Placeholder content and tried to insert the image, not only did Dreamweaver insert the image, but it automatically inserted the styles for the Pop-up menu into the CSS tree. Then she could was able to customize her CSS using the new unified CSS panel. XML Another Best Practice that's encouraged in Dreamweaver is the use of XML. "Whether they're syndicating New York Times content or Mike Chambers' blog, we wanted to be able to make it easy for any Dreamweaver user to syndicate and use XML content in their applications," said Taylor. Taylor gave a hypothetical example. A webmaster wants to post a list of the latest events on his website. He's getting the list of events from the RSS feed of an event planner's blog. As new events are posted on the blog, the webmaster goes out, retrieves the information, formats the feed, and updates his own page. Taylor showed us how she would use Dreamweaver to do this. First Taylor created an XSL fragment to format the XML feed that was gathered through JavaScript from the blog. She then designated the file to use for the XML. Dreamweaver lets you choose either a static file or an XML feed. For purposes of the demonstration and since she was not online at the time, she used a static file. Dreamweaver previews what the XML will look like on the Web page, parsing and formatting the elements of the feed. For each item in the feed, there was a title, a date and a description. Taylor was able to format the XML to make the content look similar to the rest of the content on her page. First, she linked the title to the link from the data feed, so that people could click through to the associated link and get more information. Then, she used a design time stylesheet to style the content. (Switching to Code View and viewing the XSL that Dreamweaver generates is another great way to learn about writing XSL.) At this point, Dreamweaver will generate the first item in the feed, but to get it to repeat for every new item in the feed, one has to use an XPATH expression and create a repeat region around the code. Taylor used Dreamweaver's new XPATH Expression Builder to do that in a matter of minutes. On the bottom, Dreamweaver shows what it's doing under the covers, another great way to learn how to use the technologies. Then Taylor went back to her ColdFusion page and deleted her placeholder content. In its place she chose the Insert Behavior option and pointed to her XML file. Dreamweaver inserted the JavaScript that grabs the XML, the XSL information and the XPATH expression that allows the JavaScript to loop through the information that was retrieved. When she had saved the file and viewed it in the browser, the up-to-date events from the blog were there in the web page. Theoretically, because there was no caching going on in Taylor's example, if she had been online and the page was running from a live feed, the JavaScript would retrieve the feed every time the page was loaded. There are two ways to do this sort of XML/XSL conversion:
- Static: having the browser do it (JavaScript or Flash).
- Server-side: having ColdFusion or some other server-side language do it.
AJAX
Michael Dinowitz asked whether Macromedia would consider putting features into Dreamweaver for AJAX. "We're continuing to watch Ajax very closely," said Taylor. "We're really excited to see how people are taking the existing technology and putting it to use. It's not something we're building on at this point ? We're trying to maintain a balance of the technologies that are needed today with a vision of the future. It's a delicate balance." Mike Downey, Flash Product Manager, pointed out that Mike Chambers had just released a Flash/JavaScript Integration Kit where he created a sample application with Flash and AJAX interoperating. (For more details, see our article LINK).Design View Control
Many users who were working with more complex applications and layouts were having trouble controlling the Design View. They found that the view was too large, and they couldn't achieve the fine pixel control that they had in programs like Fireworks and Photoshop. Macromedia realized that they needed to be able to zoom in on one particular area, and then to move back into the overall design view. Zooming ability has been added to Dreamweaver 8.Put Down Your Rulers!
To get pixel-level precision, people were holding rulers up to the screen to try to figure out what was going on! "So," said Taylor, "put down your rulers and take out your guides." Dreamweaver 8 has built-in guides that precisely measure distances on the screen.Code View Innovations
The Dreamweaver team was puzzled about the frequent requests by high-level coders for the addition of Code Tips to Dreamweaver. The Code Tips have been there for a while. The team realized that a lot of the coding functionality was tucked away in menus, and therefore, the coders didn't even know what was there. Most coders prefer a large, spacious screen with perhaps one menu running along the side. So this version of Dreamweaver is designed with a Code View that has much of the UI "garbage" removed and one Code toolbar running down the left side. While the toolbar is not directly customizable, it is extensible through XML files.
Figure 2: The Coding Toolbar gives programmers the spacious view they desire.
Figure 3: Code collapse lets a developer hide entire sections of code, narrowing his or her focus and enhancing his programming experience. Other, more accessible Dreamweaver features include snippets and the ability to add and remove comments. Taylor is understandably proud of Code Collapse (see Figure 3, above), which gives users the ability to collapse a selection of code, to make a selection and collapse everything outside of it, or to collapse via tag. As you mouse over the selection of collapsed code, it will tell you what's there so that you're not constantly collapsing and uncollapsing code. Perhaps one of the previous bright spots for Dreamweaver users were the long walks or coffee breaks they could take while Dreamweaver tied up their system with a large file transfer. Taylor is sorry to inform her customers that they'll now have to schedule their break times in other ways. Dreamweaver 8 takes care of its file transfers in the background, letting users get more of their development done in less time!
Contribute 3: Getting More Done in Less Time
Taylor said her team is very excited about Contribute 3 being in Studio. She loves the product for its:- Optimization: Contribute 3 was built on the same code base as Dreamweaver, so it generates good code and it's really been optimized for the business end-user.
- Tight Administrative control: Even when designers would allow their users to update their websites, they were always worried that somehow, the user would screw them up. Contribute has very strict role-based permissions.
Mobile Development in Studio
At this point, Mike Downey took over the presentation with a short piece on Flash Lite in Studio 8. He said that the biggest problem area in mobile development had been testing. There are many different devices out there, and each implementation of Flash on these devices is slightly different. You can use Flash on a phone to do a whole variety of things -- ringtones, wallpapers -- but every single handset will only use some of them. Downey said that to figure out which device allows for which capability, and then to test out a program on different devices, is quite difficult. When you're targeting the Flash Lite Player in Flash Professional 8, a Device Settings panel pops up. Macromedia took the different types of content that you can create with Flash, and categorized them all, and based on what you select, it filters the list and only shows you the devices that support that type of content. Macromedia has a link on their website that gives users the latest version of that list. Downey said that it would have been very difficult for Macromedia to put in an updater for the list of cellphones and features, which are constantly changing, directly into the product. Each individual device has a profile attached to it with all of the device's idiosyncrasies. So if there's a specific API that you use in Flash that doesn't work on a specific mobile deployment, Studio will throw an error message. Downey ended his demonstration by pulling up a Flash movie and testing it on the new Mobile Emulator that comes with Flash Professional 8. He tested several Nokia phones. The emulator is fully interactive. Every device has a skin that looks exactly like the phone it emulates, and the buttons on the phone correspond to the same key mappings. The phone can be rotated to simulate landscape view applications. "It's a very powerful feature. A lot of extensibility work went in under the hood for this, so that Macromedia can easily offer their customers new functionality or new updates, as they need them," said Downey.Availability and Pricing
At the end of the briefing, Jim Guerard, Macromedia's Vice President of Product Management and Product Marketing, did a recap of the basic themes of this release: Integration (that it's easy to shift between products and use the products together), Expressiveness (the new capabilities in all of the products, especially Flash), Best Practices (as shown in Dreamweaver, with its use of CSS and XML, and in Fireworks, with its ability to create CSS-based images), and Efficiency (the new streamlined workflows and the addition of Contribute 3 and Flashpaper 2 to Studio). Studio 8 was announced on August 8, and will be shipping some time in September. The pricing structure for the products is as follows:| Studio 8: | $999.00 |
| Flash Professional 8: | $699.00 |
| Flash Basic 8: | $399.00 (dropped from $499.00) |
| Dreamweaver 8: | $399.00 |
| Fireworks 8: | $299.00 |
| Contribute 3: | $149.00 |
| Flashpaper 2: | $79.00 |
Latest ColdFusion Jobs (CF-Jobs)
- ColdFusion Developer to help on Large/Print PDF generation on the fly
- Looking for FT/PT Telecommute Position
- Los Angeles developer looking for telecommute or freelance projects
- Austin area ColdFusion expert seeking full-time or telecommute work
- Mid-Senior ColdFusion Developer Needed in Columbia, MD area
- Ohio developer looking for local work
- Adobe Expert Seeking ColdFusion / Flex Dev or QA
- ColdFusion Developer Needed in Los Angeles/South Bay Area
- Serious About Your Solutions? Elite ColdFusion Developer Available in VA/DC/MD metro area
- Senior ColdFusion Developer- Edgw are, London £40,000 to 60,000 + Bens
Want a number like 800-ColdFusion?
My Toll Free 800 Number provides a vanity phone number service to clients who want more than just digits. How would you like 800-coldfusion?