Class 11

Topics: What is Social Media? Spry Menu and Spry Widgets
Working with team
Deliverables due: Schedule (All), Estimate by Task and Final Estimate (All), Wireframe (Information Architect) Design comps (Designer)

Reading for next week:
Just What is Social Media, Exactly?
10 Examples of Creative Twitter Uses
Twitter Nation: Microblogging is huge, but should anyone care?
Also, by next week, create a Twitter account for yourself for this class. (I will discuss in class.) The Twitter profile for this class is smc_grdes. Please follow this profile. We’ll be exploring the uses of micro-blogging over the next few weeks. Suggested user name for profile: “yourname_grdes.” If you already have a Twitter account I’d like you to create a new account for this class.

On Twitter, please follow these: @DesignerDepot @gracesmith @sitepointdotcom @brendandawes @kickerstudio @smashingmag Choose at least 3 more to follow before our next class. Also be sure to follow your fellow class mates’ Twitter profiles.

Reading completed for this week:
Discuss Slicing and Optimizing, Creating HTML templates and pages, Implementing Light Scripting, Creating and populating page, Web Standards, Integrating Backend Development (pages 157-166) from Web ReDesign 2.0

Questions to discuss :
What is a HTML template and how is it created?
How do the authors define “light scripting?”
What is the importance of “freezing content” during the page populating stage?

Final Project Schedule

Class 10 (May 6): Deliverables due: Defining Project & Audience (All)– use the Client Survey, Content Outline (Content Developer) Sitemap (Information Architect)

Class 11 (May 13): Deliverables due: Schedule (All), Estimate by Task and Final Estimate (All), Wireframe (Information Architect) Design comps (Designer)

Class 12 (May 20): Deliverables due: Final Content (Content Developer) Final Design (Designer)

Class 13 (May 27): Deliverables due: Home page & landing page (Technical Producer)

Class 14 (June 3) : Deliverable due: Mobile web prototype (Technical Producer)

Class 15 (June 10): Your final project presentations are Thursday, June 10. No late projects accepted.

What is Social Media?

The best way to understand a new media is to compare it to what’s come before? So, what kind of media do you have lying around your house? Probably these:

A box of photos.
Physical, paper mail and catalogs.
Yellow Pages.

What are some attributes of “social media” or “new media” that are different than any of the “old media” above?

  1. The media above cannot be changed. A newspaper can’t magically change its stories, even if society decides something in them is incorrect. A blog can be updated for all readers nearly instantly.
  2. You can interact with a blog. You can leave a comment. With the above you can’t interact at all.
  3. You can get some sense of the popularity of content in real time. How many comments does each post get? How many links does each post get? I can see in WordPress how much traffic each item gets. You can visit Digg to see voting on a blog’s items. Or, TechMeme to see which blog items got most links in the past few hours. None of the media above do you have a clue about the granular popularity of any of the items until much later after best seller lists are published.
  4. With the “new media” you can look archives and see all posts. Try doing that with a newspaper. Yeah, you can, if you pay the San Jose Mercury News a fee. But it’s not as easy as it is here.
  5. On a blog you can mix media. A post could contain text, audio, video, or photos. Not so on newspaper or magazines.
  6. On a blog you don’t need to convince a committee to publish. Not true with other media forms. Imagine you walked into CNN and said “hey, I have some cool video, can you publish it?”
  7. The new media is infinite. The media above all has limitations in terms of either length (a TV station only has 24 hours in a day — over on YouTube, I guarantee they publish a lot more than 24 hours of video in a day) or in quantity (try to convince USA Today to publish a 40,000 word article, or, 500 articles on the same topic).
  8. The new media is able to be syndicated and linkable and easily reused. you can link to your media here, for instance, a few seconds after you publish it. Try doing THAT with any of the above media. Not to mention, your words kick into an RSS feed which you can then republish using something like Google Reader, if you’d like, or you can copy a sentence out of a post, paste it into your own blog, and say something about what I just said.
  9. The new media can be mashed up with data from other services. Many people are putting widgets on their blogs that display various things from places they don’t control. That’s impossible in the older media above.

By “social media” or “new media” we’re talking about Internet media that has the ability to interact with it in some way.

Above material from What is social media?., Scobleizer 16 February 2007

Examples of social media software applications include:


  • Blogs: Blogger, LiveJournal, Open Diary, TypePad, WordPress, Vox, ExpressionEngine
  • Micro-blogging / Presence applications: Twitter, Plurk, Pownce, Jaiku
  • Social networking: Bebo, Facebook, LinkedIn, MySpace, Orkut, Skyrock, Hi5, Ning, Elgg
  • Social network aggregation: FriendFeed
  • Events: Upcoming, Eventful,


  • Wikis: Wikipedia, PBwiki, wetpaint
  • Social bookmarking (or Social tagging) (Golder & Huberman 2006): Delicious, StumbleUpon, Google Reader, CiteULike
  • Social news: Digg, Mixx, Reddit
  • Opinion sites: epinions, Yelp,


  • Photo sharing: Flickr, Zooomr, Photobucket, SmugMug
  • Video sharing: YouTube, Vimeo, sevenload
  • Livecasting:,, Stickam,
  • Audio and Music Sharing: imeem, The Hype Machine,, ccMixter

Reviews and Opinions

  • Product Reviews:,
  • Q&A: Yahoo! Answers, WikiAnswers
  • Employer Reviews,


  • Media & Entertainment Platforms: Cisco Eos
  • Virtual worlds: Second Life, The Sims Online, Forterra
  • Game sharing: Miniclip, Kongregate

Above material from Social Media, Wikipedia

What social media do you use?

Creating Pop up Menu using a Spry widget

The following definition and description about the Spry widget is from the Adobe web site:

“A Spry widget is a page element that combines HTML, CSS and JavaScript code to enable user interaction.

A Spry widget is made up of the following parts:

1. Widget structure:

An HTML code block that defines the structural composition of the widget.

2. Widget behavior:

JavaScript code that controls how the widget responds to user-initiated events.

3. Widget styling:

CSS code that specifies the appearance of the widget.

The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript code. You can easily insert these widgets—the code is HTML and CSS at its simplest—and then style the widget.

The behaviors in the framework include functionality that lets users show or hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more. Each widget in the Spry framework is associated with unique CSS and JavaScript files, available on Adobe Labs.

The CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality. The CSS and JavaScript files associated with a given widget are named after the widget, so it’s easy for you to know which files correspond to which widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js).”

Click here for an Example of Spry Menu Bar

Follow the steps below to add the menu like the one above:

Step 1: Make sure you have your site defined using the Site Definition box we’ve used when uploading our files. You need to go to SITE > NEW SITE and fill in the local information for your site. In this case for the field “Local root folder” you will choose your folder named final_lastname. You only need to fill in 2 fields: “Site name” and “Local root folder.”

Step 2: Make sure in the SITE > MANAGE SITE palette that you’ve selected the site you defined called final project. This will ensure that the Spry assets are copied to the correct folder.

Step 3: Now you are ready to insert the popup menu widget into your page. I recommend that you insert the pop up menu widget into a layer. Click inside the layer and go up to the Insert Window labeled “Spry” as shown below and click on the icon labeled “Spry Menu Bar.” This will insert the Spry Menu Bar into your page:

Step 4: Save your page and double check to make sure that the folder named “Spry Assets” is correctly linked in the head of your page and the folder is copied into your final_lastname folder. The folder named “Spry Assets” contains the Javascript and CSS files you will need to display the bar.

Step 5: You will be able to edit the Menu Bar using the WINDOWS > PROPERTIES Inspector. It looks like this:

Here you will be able to change the text for the navigation and add and delete second and third level navigation using the +/- signs. Here you can also create links for the navigation. If you would like to customize the widget (I have customized the rollover and hover states), you can click on “Customize this widget” and follow the directions given here.)

Video Demonstration

I demonstrate how to insert a spry menu into a web page. You can view the video demonstration in one of two ways.

1) You can download the entire demonstration in one QuickTime movie file (29MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

2) Or, you can view the 2 videos from the YouTube site. I have posted the two videos there also.

Additional Resources:

View Adobe video:
Creating Menus with Spry Widgets

Spry framework for Ajax

The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their site visitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements. The Spry framework is designed so that markup is simple and easy to use for those who have basic knowledge of HTML, CSS, and JavaScript.

Widgets and Menus

Spry widgets include menu bars, tabbed panels, accordion effects, and collapsible panels.

The Spry widgets can be edited in the Property inspector. For example, if you create a Menu Bar, you can assign text and links to menu options in the Property inspector. But, in general, you cannot do much, if any, formatting for Spry widgets in the Property inspector. Instead, you format Spry widgets by editing style sheets that get generated by Dreamweaver whenever you create a Spry widget

There are a few things to be aware of when you create Spry widgets:

  • Documents must be saved before you insert Spry widgets.
  • Spry widgets generate lots of CSS styles and JavaScript files, and these files are saved every time you save a page with a Spry widget.
  • You control basic features of the Spry widget, like text and links, in the Property inspector. But you format Spry widgets (elements like font, text color, background color, and so on) in the CSS Styles panel by editing the CSS style for the Spry widget.

Inserting a Tabbed Panel
Select Insert > Spry > Spry Tabbed Panels.

Note: You can also insert a Tabbed Panels widget by using the Spry category in the Insert bar.

Add a panel to a Tabbed Panels widget

  1. Select a Tabbed Panels widget in the Document window.
  2. Click the Panels plus button in the Property inspector (Window > Properties).
  3. (Optional) Change the tab name by selecting the tab’s text in Design view and altering it.

Delete a panel from a Tabbed Panels widget

  1. Select a Tabbed Panels widget in the Document window.
  2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to delete and click the minus button

Open a panel for editing

Do one of the following:

  1. Move the mouse pointer over the tab of the panel you want to open in Design view and click the eye icon that appears at the right of the tab.
  2. Select a Tabbed Panels widget in the Document window and click the name of the panel you want to edit in the Panels menu of the Property inspector (Window > Properties).

Change the order of panels

  1. Select a Tabbed Panels widget in the Document window.
  2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to move.
  3. Click the up or down arrows to move the panel up or down.

Set the default open panel

You can set which panel of the Tabbed Panels widget opens by default when the page opens in a browser.

  1. Select a Tabbed Panels widget in the Document window.
  2. In the Property inspector (Window > Properties), select the panel you want open by default from the Default panel pop-up menu.

Customize the Tabbed Panels widget

Although the Property inspector enables you to make simple edits to a Tabbed Panels widget, it does not support customized styling tasks. You can alter the CSS rules for the Tabbed Panels widget and create a widget that is styled to your liking. For a more advanced list of styling tasks, see

All CSS rules in the topics below refer to the default rules located in the SpryTabbedPanels.css file. Dreamweaver saves the SpryTabbedPanels.css file in the SpryAssets folder of your site whenever you create a Spry Tabbed Panels widget. This file also contains useful commented information about various styles that apply to the widget.

Note: Although you can easily edit rules for the Tabbed Panels widget directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.

Constrain the width of tabbed panels

By default, the Tabbed Panels widget expands to fill available space. To constrain the width of a Tabbed Panels widget, set a width property for the tabbed panel container.

Locate the TabbedPanels CSS rule in the SpryTabbedPanels.css file. This rule defines properties for the main container element of the Tabbed Panels widget.

Add a width property and value to the rule, for example width: 300px;.

Use the CSS Styles Panel to Format Tabbed Panels. You can change the background color of tabbed panel elements in the CSS Styles panel:

  • To change the background color for a hovered-over tab, choose the .Tabbed PanelsTabHover style in the CSS Styles panel, and choose a background color from the background-color property.
  • To change the background color for a selected tab, choose the .TabbedPanels TabSelected style in the CSS Styles panel, and choose a background color from the background-color property.
  • To change the background color for a tabbed content area, select that tab in the Document window, choose the .Tabbed PanelsContentGroup style in the CSS Styles panel, and choose a background color from the background-color property. Format the content of tabbed panels the same way as formatting text or images.

For more information:

I encourage you to go through the spry tutorials on this Adobe page. The tutorials will give you a better understanding about how the various sprys work.

Spry Effects

Effects animate your page and make page elements react to visitor actions by changing location or size or appearance. Editing effects requires some ability to work in the Behaviors panel.

Demonstration of Spry effects

Applying a Slide Up/Slide Down effect

Note: You can only use this effect with these HTML objects: blockquote, dd, div, form, or center. The slide effect requires a single <div> tag around the content that slides.

  1. (Optional) Select the content or layout object you want to apply the effect to.
  2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Slide from the menu.
  3. Select the object’s ID from the target element menu. If you have already selected an object, choose <Current Selection>.
  4. In the Effect Duration field, define the time it takes for the effect to occur, in milliseconds.
  5. Select the effect you want to apply: Slide Up or Slide Down.
  6. In the Slide Up From/Slide Down From box, define the sliding starting point as a percentage or as a pixel number.
  7. In the Slide Up To/Slide Down To box, define the sliding end point as a percentage or as a positive pixel amount.
  8. Select Toggle Effect if you want the effect to be reversible, sliding up and down with successive clicks.

Additional Spry Resources:

Additional Spry Demos:

Spry Widget videos:
Creating menus with Spry Widgets

Working with the Spry Accordian widget

Using the Spry framwork for Ajax

Adobe site: All things Spry:


Sorry, but comments are currently closed.

About Author


Instructor for Graphic Design 67