Introduction to Dual Design
Home   Intro   Submit
What is 'Dual Design'?

Dual Design is a convenient way to maintain a simple, accessible, animated webpage. You describe the content of your page in a file written in a language called XML, and submit that file to the parser. The parser will pick through your description and write an HTML file that displays one of two versions of your page, one animated in flash and the other in plain HTML, depending on the browser you use to view it. Finally, it returns everything you need to view and post your webpages.

System Requirements
Make a Sample Dual Design Page
To create a webpage using Dual Design, you first have to tell the parser what you want on it. You do this by uploading a file formatted in XML.
  1. Download a sample XML file, sample-content.xml. (In Windows, right click and select "Save Link As...". On a Mac, hold ctrl and click, then select "Download Linked File".) If you like, open it in a text editor and check out what's in there. Don't change any of it yet!
  2. Go to the parser's submission page here and enter the sample-content.xml file you just downloaded.
  3. Your browser will download a zip file containing four documents - one HTML file, another copy of sample-content.xml, main.swf, and swfobject.js. These four files together form (most of) the single webpage you just made with Dual Design! (Your sample webpage requires two pictures to successfully display, ken-goldberg.jpg and memento.jpg. Put them in the same directory as the other files.)
  4. Check out what the webpage looks like by double clicking the .html file. Whether you choose to keep your webpage on your computer or post it online, make sure that all six of the files are always in the same directory or your browser won't be able to find stuff.
    You might be wondering where the other version of your page went. Pages created by Dual Design use a script to automatically determine which version to display depending on your browser's capabilities. You can force your browser to display the different versions of your page by clicking the "html version" or "flash version" links.
Customize Your Sample Page
You just created a webpage using Dual Design and an XML file, but you weren't told how to author the content of that webpage. Here you get a chance to do just that, by creating a homepage of your favorite links.
  1. Make a copy of the sample-content.xml file that you downloaded earlier. Name it whatever you want and open it in a text editor.
  2. Notice the top line under the comment - on the right it's labeled line A. It marks the beginning of the page, and it sets the title. You're going to make this your page, so replace Prof. Goldberg's name with a title you like and delete the two lines labeled DELETE ME. These lines tell the parser to include Prof. Goldberg's picture, which, unless you're a huge fan, probably wouldn't be on your webpage. You may also choose to delete the lines labeled OTHER VERSION - these tell Dual Design to include links from one version of the page to the other.
  3. Now for a frivolous step: way down at the bottom you'll see a line labeled line B. Delete the part that says owner="html" and replace the url value with http://ieor.berkeley.edu/~goldberg/. The first change will cause the image to appear in both the flash and html versions, and the second will cause the image to send your browser to Prof. Goldberg's home page when it is clicked.
  4. Now let's redo some of the colors of your page. Go back up to line A and write in bgcolor="9400D3" link="0000FF" between the rightmost " and the >. (Make sure there's a space between the " and the new text!) This will change the background color of the page to a dark purple, and the colors of the links to pure blue.
  5. Now for the categories and links to put on your page. To rename a panel you simply replace the text in its name attribute. To change the visible text of a line, you replace the value of its text attribute, and to make it link to a particular URL you simply enter the target URL as the value of the url attribute.
    • You take classes of course, so go ahead and rename the first panel from "Background" to "Classes". This panel could be filled with all sorts of links to your class websites.
    • The second, instead of "Current Projects", would probably be more useful to you as "Reference". The links inside are up to you, but personally I'd make sure to have Google, Wikipedia, Reference.com, and the weather forecast in there.
    • Finally, rename "Artwork" to "Fun Stuff"; because it isn't like your homepage has to be boring. The links inside are really up to you, but there are a few tried and true favorites.
  6. Once you've deleted all the lines you didn't use, you're done! All you have left to do now is submit your new XML file and download your polished web page. Assuming you followed step 3 - or at least left line B in - you will need to put memento.jpg in with the other files of your webpage once you've submitted it, just like before. Click here to see an example of a finished XML file.
    You will see some advanced tricks used in the finished example that we did not cover, such as url's that begin with a % sign and lines that are children of lines. You can go ahead and ignore them. If you're really interested in learning all about them, check out the Further Reading section.
Further Reading
Known Issues
Legal

This work is the copyright of Guy Boo and Ken Goldberg at the University of California at Berkeley, and is licensed under a Creative Commons Attribution-ShareAlike 2.5 License, viewable at http://creativecommons.org/licenses/by-sa/2.5/.

Due to time constraints, we are not able to provide help with debugging nor are we able to implement additional functionality. We do, however, welcome others to modify/improve Dual Design provided that the above copyright and license appear in all derivative works.

SWFObject.js, the flash detection script used by Dual Design, is Copyright © 2006 Geoff Stearns, and is subject to the following license:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.