| the edge newsletter | May 1, 2003 |
| 01 |
Behind the Scenes: Reinventing Macromedia.com Al Ramadan |
|
|
| 02 |
The Rise of Net Seminars Lauren Gibbons Paul |
|
|
| 03 |
DRK: The Secrets of Developing Components Linda Jacobson |
|
|
| 04 |
Deconstructing the Edge Julie Campagna |
|
|
| 05 |
Designing Dreamweaver Sites for Contribute Users Joseph Lowery |
|
|
| 06 |
Experience of the Month |
|
|
| 07 |
Top Picks From DevNet |
|
|
| 08 |
Sites That Inspire |
|
| 01 Behind the Scenes: Reinventing Macromedia.com | Return to Table of Contents |
Macromedia puts a great deal of emphasis on the developer community that has grown around our products. For all our products, we have advisory boards where developers help us steer product direction, and it is always great to hear the passion of our developer community.
When we launched the new macromedia.com, the reaction from the community was mixed. A lot of developers who live and breathe our products were able to immediately see how much work had gone into the site. The site was ambitious, but sometimes at the expense of overall performance.
Rather than immediately roll back the site and work on it behind closed doors, we decided to soldier on with it and involve our developer community at an entirely new level. Nearly each week since our launch, we have put out reports that detail everything, from our server cluster configuration and internal performance metrics to the site satisfaction percentages. Developers are continually helping us increase the responsiveness and effectiveness of the site and sometimes see their suggestions go live within the week.
This open design process was an experiment, and an entirely successful one. The new macromedia.com is an important project for the company, as it was developed from the ground up using our own products. We also conducted countless rounds of guerilla usability testing, as well as formal usability testing with the likes of Jakob Nielsen and other usability experts. Even before the site had launched, many of our customers provided us with input.
In fact, when we launched beta 1 in early March, we relied on our customers to give us input and help us create a new experience that combined the best of content and Rich Internet Applications. According our customers, we got a lot of things right and some things wrong, and there are areas that need to improve in the coming weeks and months. We are determined to make macromedia.com the best Internet experience possible, and we continue to rely on customer feedback.
What We Learned
The home page was a problem... When customers first started giving us feedback on the new site, most of it centered on the home page. Internally, there was a lot of debate about the beta 1 home page, which was not as successful as we had hoped. It was, in fact, an application that should have had more content. The 'tray navigation' was a deep applet that allowed one-click navigation. The 'product and solutions pickers' were applications that allowed you to drill down a couple of levels into the site without leaving the home page, and without experiencing annoying page refreshes along the way. Neither worked as well as intended.
But even with that negative perception, the 'Experience Matters' promotion that launched with beta 1 had a click-through rate of more than 3%, which is above average for us, and 10 times what static promotional elements obtain industry wide. So, from a business point of view, it was very successful. But some users saw the promotion as intrusive; so we took this into consideration with beta 2.
Performance was mixed... We tested the beta 1 site using a 56K modem, and set targets based in industry comparables. One thing that surprised us with beta 1 was that connection speed seemed to have no impact on customer satisfaction, with 56K modem users actually more satisfied (only by 0.9%) than users on T1 lines. The Internet sites we used for our tests included Adobe, Amazon, Apple, eBay, Microsoft, news.com, Oracle, Sun, and Yahoo. We measured performance using three key metrics:
With beta 2, we achieved our initial performance goals, but we continued to optimize performance, and based on this feedback, we now track against five performance metrics:
For the beta 4 release, we focused on optimizing the Rich Internet Application areas of the site, both to reduce file size and the number of file downloads required for each application, and to increase the amount of data cached in the browser so that applications load more quickly on subsequent visits. With beta 4, we reaped significant performance improvements. (See Under the Hood: Improving Performance on macromedia.com, by Jonathan Snyder.)
All browsers matter... When we designed the site, we reviewed the logs of our 'classic site' (our current site at the time) and found that 91% of our customers used Internet Explorer or Netscape. We tested the site on both the Windows and Mac platforms using these browsers, and things looked good.
Apple announced Safari, a new browser, at Macworld in early January. It was released as a beta; so we tested Macromedia Flash applications with it and found a number of problems. We worked with Apple on these issues, and Apple released a second beta of the browser, which addressed the issues with our site. Because of the beta status of Safari, we expected some problems, but were surprised by the volume of comments we received. Even though Mac users represented only 11% of all users who accessed the site, more than 41% of the survey respondents were Mac users. During beta 2, we released new style sheets that addressed rendering issues we were having with Safari.
We have also been working with the Opera engineering team, and we are certain that Opera users will gain access to the applications on macromedia.com in the near future. We are committed to delivering a site that works well across all browsers. So please let us know if there are any issues with any other browsers.
What's Working
Rich Internet Applications: In the first week of deployment, we experienced great success with our Rich Internet Applications. As opposed to static content pages, these areas on macromedia.com allow users to find and download product extensions, register the product they just purchased, download a trial version of a product, and become a member of the Macromedia community.
Macromedia Exchange: The Macromedia Exchange saw a 93% increase in extension downloads. Said another way, the number of downloads almost doubled with the new exchange application.
Membership: Membership was up more than 300% during the first week of beta 1. We should note that part of this increase was due to a change in registration processes. Membership continues to be strong through beta 5.
Trial Downloads and Product Registrations: The trial download application allows users to download trial versions of our software. The Registration application allows users to register their Macromedia products. We have seen very little change in these RIAs compared with previous periods.
Business Metrics Look Good
Like many sites, we track a number of core metrics. Change is something
that always causes stress; so we tracked our key variables on an hourly, then
daily basis. We were pleased to report that our core metrics remained steady,
with perhaps a little up tick.
Here is the data on the core traffic metrics:
Under the Hood
Behind the scenes, the new macromedia.com system architecture is very straightforward and scalable. We are using Apache as our web server, handling all content and Macromedia Flash requests.
Apache is running on a cluster of 10 Sun E420s, all with four CPUs and 4GB RAM. The application servers are running ColdFusion MX for J2EE on JRun, a cluster of three Sun E4500s, all with eight CPUs and 8GB RAM. Our Oracle database supporting all the new applications is running on two mirrored E4500s, again with eight CPUs and 8GB RAM.
So far, this configuration has worked flawlessly0% downtime. In addition, we have hit only 40% capacity during peak hours, which is good.
Since all our servers and application servers are clones, we can quickly add new machines into the cluster when we need to expand capacity in the future.
From inception, we've basically used every Macromedia product at one phase or another. Architecture diagrams and prototypes were built using Fireworks and FreeHand. We quickly moved into Macromedia Flash and used Dreamweaver to create HTML prototypes. Finally, the real development was done using ColdFusion, JRun, Macromedia Flash Remoting, Macromedia Flash, and Dreamweaver.
As a result of using our own products to develop and deploy the new macromedia.com site, we have become our own most demanding customer. We are now pushing our products further than ever before. We are delighted with the site and the continued performance improvements we have made, but the real measure of success is whether the customer experience on the site has improved.
Feedback Makes a Big Difference
In early April, we introduced a pop-up survey on macromedia.com, and more than 5,000 customers participated. As we sifted through the comments, one pattern we identified was the need for us to increase information density and reduce 'advertising space' on the home page.
As a result, for beta 3 we introduced a new home page with a smaller messaging area and information links to the right of it. The information links are a balance of marketing messages, useful content, and other popular site items, such as product announcements and updates. Like many companies, we strive to balance key company messages with fast access to the wealth of content on our site. I think this is a huge challenge for most businesses on the web.
The survey also brought good news: Website satisfaction at macromedia.com had risen to 76%. We are setting a high bar to position macromedia.com favorably with leaders like Amazon.com, which scored of 88 out of 100 on the American Customer Satisfaction Index. While our internal survey numbers can't be directly compared with those of other industry leaders, they certainly show that great experiences do indeed build great businesses.
Beta 5 and Beyond
As we discovered, delivering great experiences across a diverse range of platforms and networks is an awesome challenge. The digital world is indeed diverse! Now on beta 5, we continue to make improvements to the site, and performance remains our No. 1 priority.
We continue to receive invaluable feedback from our customers about the site. Thank you to everyone who is helping us make the new macromedia.com the best Internet experience possible.
Al Ramadan is executive vice president of marketing at Macromedia.
More articles on the new macromedia.com:
Under the Hood:
Applications on Macromedia.com
by Sean Corfield
Under the Hood:
Improving Performance on Macromedia.com
by Jonathan Snyder
Under the Hood: Real-Time Load Testing on Macromedia.com
by Brandon Purcell
Measuring Web Interactions on Macromedia.com
by Matt Belkin (Breeze presentation)
Macromedia.com Global Navigation Overview
by Tony Lopez (Breeze Presentation)
| 02 The Rise of Net Seminars | Return to Table of Contents |
Net seminars, webinars, web presentations whatever the term more and more companies are embracing the power of presenting information online. Businesses small and large use web seminars not only to promote their products, but also to communicate with investors, educate customers, train and disseminate information to employeesthe possibilities are endless.
However, until recently, there was no easy and affordable way to deliver available content, such as PowerPoint slides and archived video presentations, to customers across the web.
Bill Barron has experienced this challenge firsthand. From his vantage point as vice president of webcasting at Manhasset, New York-based CMP Media, Barron sees demand for web seminars growing exponentially. Barron offers live and on-demand seminar services to his company's 20-plus high-tech industry trade publications and their advertisers.
With the bleakest advertising market since World War II, companies are anxious to target messages to a self-selected group of seminar attendeesunlike many traditional forms of advertising, web seminars offer measurable returns on investment.
"No one is going to sit through these events unless they're keenly interested in the subject matter," says Barron.
But even with hard ROI, cost is always an issue. Barron's clients would love to use Macromedia Flash to enliven their web presentations, but many balk at the added cost of converting existing PowerPoint presentations to Macromedia Flash. Still, demand for Macromedia Flash-based multimedia presentations is growing faster than ever.
According to David Thompson, chief marketing officer at WebEx, companies that use the web to communicate externally have a pressing need for Macromedia Flash in their presentations. Demand for Flash is huge. One of the most important benefits of using Flash is its rich, interactive nature," says Thompson. That makes Macromedia Flash a natural for communicating on the web for training, live meetings, conferences, and presentations.
"Our customers need to share anything they have at their fingertips, whether that be Flash presentations, PowerPoint slides, video clips, or documents, says Thompson. The greater the variety in the type of communication, the better. "The richness of the experience is what's important, both to the presenter and the participants."
WebEx's proprietary platform, MediaTone, allows presenters to share Macromedia Flash files as easily as PowerPoint slides. "We've embedded the capability to share Flash through the basic WebEx interface, just as easily as you would any other type of file. We're so reliant on Flash for our own content, we needed to find a way to share it spontaneously," says Thompson.
Like WebEx, web presentation service provider Presenter created its own technology to enable customers to use Macromedia Flash seamlessly in their presentations.
"We built our own converter that will take PowerPoint presentations and convert them into Flash," says Doug Erickson, vice president of sales at Presenter in San Jose, California.
Presenter created this capability a year and a half ago so that its clients would be able to leverage Macromedia Flash and its ability to generate sophisticated special effects, such as animation, video clips, and a wide range of fonts and graphics.
According to Erickson, it takes approximately 10 minutes to convert 10 PowerPoint slides on the Presenter server. "It's rare that we find someone who doesn't want to use Flash in their presentation," says Erickson.
Macromedia is addressing this need as well. The company recently announced Breeze, a new product family that gives business users a quick and easy way to transform PowerPoint slideshows into interactive, audio-enabled, web-based presentations.
With the Breeze Presentation server, users can package PowerPoint files so that they can be viewed via the Macromedia Flash Player. Users can spice up their old PowerPoint slides by recording voice-over narration and importing video clips. Breeze Training adds course management, enrollment, deployment, and tracking features so that users can track and measure individual responses to quizzes and surveys.
Already, Macromedia product managers, business analysts, and producers are using Breeze, both internally and externally, to train and present. Internally, the human resources group used Breeze to create a Macromedia Flash presentation on the 401K program, and the facilities team created a Breeze presentation on security.
The Director MX product team recently stitched together a PowerPoint slideshow to deliver a series of five-minute Breeze presentations for the public on how to make Director MX content accessible, and how to integrate Macromedia Flash and Director.
"We wanted people to have a quick, informative experience that would hold the developer's attention and teach them something in a sort of lean-back experience. They don't have to read through reams of text. They don't have to download files. They just sit there and watch and listen. It was an effective means to present content," says Director MX Product Manager Miriam Geller, who has four more Breeze presentations in the works.
A Web Seminar Near You
More and more companies are offering training online, and Macromedia is no exception. Macromedia will soon unveil its On Demand seminars, a series of free multimedia online presentations and demos designed to help customers get up to speed quickly on Macromedia products.
To access an On Demand seminar, customers will log in to macromedia.com, click on a seminar name, andboomthey're in 'the room.' The seminars combine Macromedia Flash video clips, native Macromedia Flash animation, and Flash-enabled PowerPoint presentations, and are available 24/7 for viewing. Not to be confused with Breeze presentations, the Macromedia On Demand Seminars employ several Macromedia tools and server solutions, including Macromedia Flash MX, ColdFusion MX, Flash Remoting, and Macromedia Flash Communication Server. The multimedia marketing team recently started using Breeze to author portions of the On Demand content.
Whether you want to attend an online seminar or create one yourself, the technology and experience is getting better and better.
Lauren Gibbons Paul, a writer in Waban, Massachusetts, writes frequently about rich media and mobile computing.
| 03 DRK: The Secrets of Developing Components | Return to Table of Contents |
First, the good news. Macromedia Flash, Dreamweaver, and ColdFusion are eminently extensible, which means that a slew of creative components can help you increase product functionality and expand the ways you develop web applications. Now, the bad news. With so many third-party components and extensions, it's hard to separate the good from the buggy.
Back to the good news. With the DevNet Resource Kit, you can rest assured knowing that you have the most useful, relevant, and rigorously tested components and extensions. The DevNet Resource Kits (DRKs) include Macromedia Flash MX components, Dreamweaver MX extensions, and enhanced MX learning resources for ColdFusion, Dreamweaver, and Macromedia Flash.
Macromedia Flash MX ships with pre-built components. "Since the introduction of Flash MX, I haven't done any project without using components," says Edoardo Zubler, who created and currently nurtures the excellent Faeries Garden and Aftershape.com websites. "Flash Components enabled me to build my personal website during a single weekend. I just put components together as if they are Lego blocks."
While it's possible to exchange perfectly sweet third-party extensions and components with fellow developers, Macromedia ensures the functionality, integrity, and completeness of the DRK offerings. All are tested and documented.
Quality is Paramount
We asked Greg Burch, who created Macromedia Flash UI components for the DRKs, how he helps ensure the superiority of those components. He explains the phases of development:
"In the initial spec, I define the component's functionality, intended use, and API. Other important aspects are documentation and samples for almost every method and usage of every component. In the spec review step, I sit down with others to catch issues and implement features needed prior to the development cycle. My favorite step is development. I go through the spec, method by method and property by property, and write the stub code. This helps make sure that methods have the right signature before development starts. After I have written the stubbed code, I triple-check that it is correct. After that, I start developing the component, piece by piece.
"In the quality assurance phase," Burch continues, "the code is passed off to professional QA engineers. QA finds the bugs, and the developer fixes them. Finally, during beta testing, you find bugs that may have not been found in the QA process, and may find a component behaving differently than expected.
Why Reinvent the Wheel?
Why write a bunch of code to do something that an existing component already does, asks Burch. For component development, Burch decides what components to create by tracking the developer mailing lists and message boards and by analyzing other development tools. "When people ask if a particular component exists, and it doesn't, it gets on my list of potential components. Components such as the Editable ComboBox or Advanced Calendar [both on DRK2] were created out of the need for components to have new, specialized abilities."
Favorite Flavors
With so many handy components, what ranks at the top? "My favorite is definitely the TextField component," muses multimedia Renaissance man Edo Zubler, who worked on the Flash UI Component Set 5, Bevel Components, and MM Validation Library. Zubler likens the TextField component to "having the regular text field on steroids." He quips, "I think I'll never click on the Text Tool icon again."
Developer Peter Hall concurs. "The TextField has great features, which makes it ideal for building forms, particularly in combination with the Data Validation Library. As well as all the form-related features, it is a platform to extend the built-in TextField object in ways that would be long-winded without it."
Hall also admires the DRK3 Flash component Accordion Pane, because "it supports components as content, resizing them automaticallythis means I can stick in a listbox or a calendar and it works fine." His other favorites on DRK3 include the WeekView calendar component, which "takes up less screen space than a monthly calendar and is more responsive to user interaction because it has a simpler construction," and the Bevel Components, which "provide a quick, easy way of skinning a component from scratch in an OS-style." Each independently supports Style Formats, "which makes them ideal for dividing forms into panels," he says.
Serving ColdFusion Components
The latest ColdFusion MX components enable web application design that's more object-oriented in approach.
"Traditionally, ColdFusion developers created a series of pages that executed from top to bottom, generating HTML along the way. Any data processing, database access, or business logic your application needed had to be mixed in with your ColdFusion pages," explains Macromedia's server community manager, Christian Cantrell.
"Now developers can move that code out of their ColdFusion pages and organize it into components; so that an application's presentation layer (ColdFusion pages) can be separate from its business logic (components)," says Cantrel. "Separating presentation from business logic and other types of functionality makes application code simpler, easier to maintain, and more stable."
Using a well-written component is almost like using any other ColdFusion tag or function– it has a simple, straightforward API, which makes it quick and easy to learn and apply.
To create basic, solid ColdFusion components, you just learn the small number of tags needed to create and call the components. Creating reusable, extensible components takes more practice and experience. Java-savvy developers will quickly pick up the development skills needed to create their own ColdFusion components.
Included on DRK3, the CFunit component framework lets you easily write components alongside your application components. CFunit will test them for you, generating a colorful HTML table indicating which functions returned correct results and which have bugs. Another ColdFusion goodie on DRK3 is the Calendar component, which creates a model of a calendar page for a given month and year that can be used to easily generate dynamic calendars in HTML.
More Good News
DRK 3 is now available to DevNet subscribers (and in a few months, DRK 3 will be available to the general public).
Subscribe to DevNet, and get early access to DRK 3, 4, 5, and 6.
DRK 1 and 2 are currently available for $99 each.
Learn more.
Linda Jacobson helped launch Wired magazine, performed with D'Cuckoo, evangelized for SGI, and now leads Glass House Studio, LLC.
| 04 Deconstructing the Edge | Return to Table of Contents |
As managing editor of the Edge, I receive a ton of feedback from subscribers. Many of you have asked, 'How do you create a newsletter like this,' wanting to know how to design, develop, and even send a Macromedia Flash-based newsletter like the Edge.
Until now, I was hesitant to explain the production process, because it was embarrassingly inefficient from a production standpoint. In fact, it took more time to pour and format an Edge article in the Macromedia Flash authoring environment than it did to write the article. And I am talking about textnot animation, not graphics, not embedded videojust text.
Something Needed to Change
We needed a system that would reduce my dependency on the Flash designer/Edge producer, Stephen. I wanted to be able to update text and make those last-minute changes myself, and he wanted to be free to work on design.
A couple of web producers suggested that we use XML to separate content from presentation. XML sounded like a great solution, but there were challenges. Namely, if we used XML, how would we make the articles flow properly? And how could we accommodate various layouts that required moreor lessspace for graphics, video, callout text, and captions?
Macromedia Flash developer Derek Lu, who is on a different team but sits in the cube next to me, often overheard me bellyaching about the production process, and one day stepped up to the challenge. Derek said he could build a system, complete with a browser-based admin console, using XML, Macromedia Flash, and ColdFusion, in only a few weeks.
In January, Derek began rebuilding the Edge back end. We wrote the specs for creating a browser-based admin tool that would allow me (or any non-technical person) to copy articles from a text document and paste them into the tool. The system would also facilitate our plans to localize and deliver the Edge newsletter on devices in the future.
Just three weeks later, I began pouring and formatting stories, uploading SWF and JPG files, and even generating an issue and e-mailing it in a ZIP file to Stephen to post on the live siteall from within the Edge admin tool.
A Short Lesson: Anatomy of the Edge
From a subscriber perspective, the Edge primarily consists of two elements: an HTML page that contains a Macromedia Flash movie.
That Macromedia Flash movie, which we refer to as 'the shell,' is completely dynamic. Driven by XML, the shell contains all the logic (ActionScript) that pulls text, SWF, and JPG files together. Now we'll talk about what it takes to create the shell.
Behind the Firewall
The Edge admin tool is 100% Macromedia Flash on the front end and ColdFusion on the back end. Derek used many Macromedia Flash UI components, including the Rich Text Editor and ListBox, to build the application's UI, plus several custom ColdFusion functions on the server side.
On the server, a ColdFusion Component (CFC) is used to handle transactions with the database and for file system changes, such as HTML page generation and file uploads. Derek also used Macromedia Flash Remoting to optimize the connection between the admin tool and ColdFusion server. Just as important, Flash Remoting sped up the development time by easing debugging and facilitating an approachable formatting of data exchange.
We use ColdFusion server to send and retrieve data from the admin tool. All the information about an article or edition of the newsletter is stored in a databasewe use a CFC to communicate with the database and Flash Remoting to optimize the data transfer. Flash Remoting communicates using a binary message format that's optimized for ActionScript. Basically, it offers a better connection between the server and the Macromedia Flash Player. In addition, Remoting handles a lot of the data transformations, which makes it easier for developers to build data-driven Macromedia Flash applications. This all might sound fairly technical for those without database and server-side scripting skills, but the nature of ColdFusion makes it very intuitive and approachable, with Flash Remoting further simplifying development.
So, instead of modifying a FLA and publishing a new SWF every time I update the issue on our staging server, I simply update the database and re-generate the issue with the click of a button.
When the Edge is ready for QA, I click the Generate Issue button, and ColdFusion takes all the data and generates the necessary files, including an XML file, for the selected issue. The XML file contains information such as article text, file names, and links. Once the XML is generated, a free custom ColdFusion function called HTMLCompressFormat removes the 'white space' from the XML file, which reduces the file size and increases performance (using this function, we shave 25% off the file size).
Next, we use a ColdFusion tag called CFSCHEDULE to create a static HTML page for each article and for the issue as a whole. To create the HTML pages, we use the same CFC function, getArticleDetail(), that is used in the admin console to display article detail (a great example of how CFCs can be reused for multiple purposes).
Finally, once ColdFusion has generated the XML and HTML files, we use another custom function, ZipFileNew, to zip the HTML, SWF and JPG files, and the XML file. (HTMLCompressFormat and ZipFileNew are free and available at www.cflib.org.) We were able to use these functions as-is, with no modifications. Once the files are zipped, the CFMAIL tag is used to e-mail the ZIP file from the admin tool to Stephen for posting on our web server.
In short, when I set up a new issue using the Edge admin tool, I enter informationmostly textinto the admin console. Text and information about the issue is stored in the database until an issue is generated, at which time an XML file is created. That's it!
Scalability and Reusability
Beyond the great advantage of allowing me to produce an entire issue without hassling Stephen, our content management and publishing system provides us with a number of other benefits.
We've always wanted to localize the Edge for our global customer base, but with the content stored in the FLA, it would have been a production nightmare. Since many of the third-party translation companies that work with Macromedia accept XML files for translation, we can now pass the XML file off to them for this purpose. When they are done, they can simply send it back to us, and we'll replace the English XML file with the localized version.
We also plan to make the Edge available on devices. To deliver Edge content on devices, we only have to create a new shell, basically by resizing the current shell for device displays. Again, we will use the same admin tool, database, server, and custom functions as is. Create once, deploy everywhere.
More Time, More Freedom
The Flash designer, Stephen, used to spend about 40 hours pouring and formatting all the articles in Macromedia Flash. Now it takes me (non-technical editor) only about two hours to pour all those articlesand during that time, I can format, tweak, and rewrite each article to my heart's content.
Stephen now has a lot more time to design graphics, animation, and interactivity for the Edge (among his other projects). At the same time, I have more freedom to extend deadlines, accept feedback, and edit and rewrite articles late in the production processand now we all get along so much better.
As for the future, with the content management and publishing system, we can embark upon plans that once seemed too daunting, like localization, developing for devices, web services, and embedded video. Stay tuned!
Julie Campagna manages (and now produces) the Edge newsletter.
Postscript: The Back/Forward Button
Since the Edge was being rebuilt from the ground up, we thought it made sense to add back/forward browser functionality to the newsletter, since users often navigate between the pages of regular articles done in HTML. Enabling back/forward browser button functionality takes advantage of the fact that the browser will remember the URL variables when navigating from page to page.
To enable this functionality, Derek used a hidden frame and the LocalConnection object. The hidden frame is used to load a SWF called history.swf. The hidden frame and SWF are loaded each time an event marked as a history event is fired off from the shell. Each time history.swf loads, it passes variables through the URLwhich contains the article number index and the page number indexinto the SWF. Next, history.swf 'talks' to the shell and sends the shell the article number index and the page number index.
Since history.swf will load when a user triggers a history event or when a user clicks the back/forward button, logic was also put into the shell so that it can determine whether or not to navigate to a particular page. If the shell determines that a particular article and page number was triggered by the back/forward button, it then goes to the article and page number to which it should navigate.
Julie Campagna manages (and now produces) the Edge newsletter.
| 05 Designing Dreamweaver Sites for Contribute Users | Return to Table of Contents |
Talk about a 'win-win' situation. With Dreamweaver and Contribute, you can now spend more time developing and designing great website experiences while safely delegating content updates to non-technical content contributors.
However, to achieve maximum Dreamweaver and Contribute compatibility, planning is key. Not only should you map out the navigational flow of the site, but also you must plan the architecture of the pages from the ground up. In this article, I'll discuss an overall approach to site creation that allows for optimal Dreamweaver and Contribute integration.
Targeting the Site
Before we can start honing our site pages for Contribute use, let's be clear on what Contribute can and can't do. Contribute is designed to work with static HTML websites, or more specifically, the static portion of web pages. With Contribute, you cannot modify data-driven content.
With this restriction in mind, we can quickly identify areas where the tool is extremely beneficial. For example, a company's public website may be 100% data-driven (and therefore not a good candidate for Contribute), but its intranet may be 100% static HTML. Put Contribute in the hands of the human resources department or the folks responsible for maintaining intranet content, and everyone is happier. The HR people can update the site on their own (without waiting for the web developer), and the web developer is free to focus on what he or she does bestweb design.
Overall Site Controls
First things first. When planning a site map, structure the site with access in mind. Start exercising control over a website by restricting access to specific site areas for separate groups.
Through the administrative options (accessible via the Contribute category of Dreamweaver's Site Definition dialog), you can create any number of groups: administrators, human_resources, public_relations, and so on. Each group can be limited to one or more folders. It's important to realize that the folder limitation also includes any subfolders; so create the site structure accordingly. For example, you wouldn't want to put the press release folder in the human resources folderunless you want the HR group to be able to modify press releases.
You should also decide exactly what you want Contribute users to be able to change. The administrative options offer control over HTML and CSS styling, new page creation, and template use. In addition, you canand shouldset the size for images. While digital cameras are a tremendous boon for getting photographs on the web, they can be a download nightmare if file sizes are left unrestricted. Set the desired limit (in kilobytes) in the New Images category of the Permission Group dialog.
Using SSIs to Lock Page Areas
When designing sites in Dreamweaver for Contribute users, a shift in perception is required. No longer are you designing sites that you or someone in your inner circle can easily modifyknowing what not to change. Your sites must be usable from the contributor's viewpoint as well as the visitor's. This means separating editable from locked areas to achieve the proper balance of flexibility and control. There are two key methods in Dreamweaver to delineate user-modifiable content from areas you don't want the user to be able to change: server-side includes and templates.
A server-side include (SSI) is a terrific way to maintain consistent page elements such as navigation, headers, and footers. In most cases, the content contained in an SSI is not intended to be edited by a content provider, and Contribute will not allow SSI material to be modified inline. The determined user can, however, locate the server-side include file from the Choose File on Website dialog, if they know its name and path. But, if you avoid naming your SSI with an .inc extension, the file cannot be edited in Contribute. By default, Contribute can open the files with the following extensions: .htm, .html, .shtm, .shtml, .asp, .aspx, .ascx, .cfm, .cfml, .php, .php3, .php4, .phtml, .jsp, and .inc.
Files with common system extensions, like .txt or .doc, can be opened with their associated editor. If you choose an extension for your include file that does not fall into either of these categories, such as .ssi, the file is effectively locked from editing in Contribute.
To be effective in Contribute, server-side includes must hew to a particular format. Contribute requires that SSIs not contain any of an HTML page's structural tags, including the HTML, HEAD, and BODY tags. An SSI used in Contribute must consist only of the material found within either the HEAD or BODY tags.
Specifying Template Structures
The other alternative for separating editable from non-editable content in Contribute is to base your pages on Dreamweaver templates. With the release of Dreamweaver MX, templates offer a wide range of designer control. Not only can you make one area editable while locking others, but also you can allow the user to change a single attribute of a tag within an otherwise protected area. Additional abilities include optional content and repeating regions.
The key to designing with Dreamweaver templates for Contribute is to be precise. Where once it was acceptable for a designer to designate an entire section of a page as an editable region, that's really giving the Contribute user too much power. A far better strategy is to use multiple discrete editable regions. Let's look at an example contrasting the two different techniques.
Figure 1 shows a page with a single editable region. While this page still locks the navigation and other consistent areas, the single editable region provides much more latitude than is needed or desired. In Figure 2, you can see the same page with numerous editable regions applied. Notice that there are separate editable regions for both headings and body text; moreover, when a specific format is neededas in the 'Selected Headlines: March 1, 2003' headingonly the part that is to be changed is in an editable region.
When marking a body text area as an editable region, it's important to include at least one tag in the marked region. An included tag allows the contributor to add more paragraphs as needed. When defining an editable area for a headline, it's equally important to select only the contents of the heading, rather than the entire tag. If the entire tag were selected, the user could change an tag to a with no difficulty whatsoever. When you save your template, Dreamweaver warns you that you have an editable region without a tag, but in this case, that's what you want.
Looking closer at Figure 2, you might also notice an optional region that defines a second heading on the bottom of the page. By using this Dreamweaver MX feature, the designer can leave the door open for additional content while maintaining a structured design. The bulleted items on the right side of the page use another advanced template feature: repeating regions. Note that the repeating region is applied to only the final row of the bulleted list. Some designers make the mistake of applying it to the first row, which makes it possible for the content contributor to accidentally remove all the headings by selecting the Remove symbol one too many times.
In Conclusion
Although it may take more planning and work to carry out a Contribute-oriented design, the benefits are definitely worth the effort. The designer is no longer hassled to make relatively minor updates; the contributors are able to more completely take control of their own material, and the design itself maintains its integritya winning scenario for all concerned.
Joseph Lowery is the author of the Dreamweaver MX Bible and the Fireworks MX Bible series, as well as Joseph Lowery's Beyond Dreamweaver. His books are international best-sellers, having sold over 300,000 copies worldwide in nine different languages.
| 06 Experience of the Month | Return to Table of Contents |
Experience of the Month
The Bluegreen Vacation Rentals site is a paradise for bargain-hunting vacation shoppers. Visitors can drill down into interactive information on individual resorts to see photos, read property and area descriptions, and even check the weather for the locale.
Powered by Macromedia Flash MX and ColdFusion, the site integrates with the iHotelier OneScreen reservation system, which means users can make reservations online without clicking through a bunch of screens.
Developed by:
Webvertising
| 07 Top Picks From DevNet | Return to Table of Contents |
Skinning Macromedia Flash Components
Macromedia Flash components may have a clean look and feel, but their design may not be consistent with your application's theme. Learn how to skin Macromedia Flash components to improve the end user experience and complement the design of your application.
read the articleMacromedia Central Development Center (Beta)
Get into the business of building and distributing your applications. Macromedia Central provides an ideal Internet application environment for rich, customized, occasionally connected apps. Learn how you can improve the effectiveness and availability of your applications with Central.
learn moreUsing the Dreamweaver ASP.NET Calendar Control
Learn how to create data-driven calendars on your .NET pages with Dreamweaver MX. Use a simple database to hold event data, and then use the ASP.NET calendar control to display that event data in a dynamically generated calendar. Application developer Joel Martinez explains.
read the article
| 08 Sites That Inspire | Return to Table of Contents |
CBC Home Delivery
The Canadian Broadcasting Corporation's Home Delivery is a full-screen multimedia magazine that combines radio-, TV-, and print-style articles in a uniquely engaging viewing experience. Featured content includes the best stories from CBC's radio and TV programs, such as The Fifth Estate, Foreign Assignment, Dispatches, The World This Weekend, and Outfront. Macromedia Flash Communication Server MX puts the viewer in control of a media experience unlike any other. Posted monthly, Home Delivery showcases a wide array of investigative pieces, short documentaries, and first-person radio narratives.
visit the siteDreamcatcher
To spark interest in its new film, Dreamcatcher, Warner Bros. created a website that blends Macromedia Flash MX animation and video integration for an unforgettable viewer experience. Developed by Genex Interactive with Macromedia Flash MX, the site immerses its users in Dreamcatcher, which is based on Stephen King's best-selling book.
visit the siteRobbie Williams
Recording artist Robbie Williams entices fans and promotes his new album, Escapology, with a video-laden website created with Macromedia Flash MX. Viewers choose from an ever-changing array of clips from music videos and interviews with the star and his production team.
visit the sitePixeltees
Pixeltees uses the power of Macromedia Director to let users create their own pixelated T-shirts on its inimitable T-Shirt Machine. Macromedia Shockwave Player guides creators through the fun and creative process. Customers can then elect to open their own T-shirt shop right on the Pixeltees site.
visit the site