For widget-enabled themes only.

1. Add the Text widget to the sidebar of your choice.
   • Edit the Text widget.
   • Copy the iframe text provided by Google into the editing box. For example:

     • <iframe
       width="425" height="350"
       frameborder="0"
       scrolling="no"
       marginheight="0" marginwidth="0"
       src="http://maps.google.com/maps..."></iframe>
       <br /><small>
       <a href="http://maps.google.com/maps..."
       style="color:#0000FF;text-align:left">View Larger Map</a>
       </small>

   • Click the Done button.
   • Click Save Changes in the widget area.
     • The iframe tag stays intact if you copy the code into a Text widget.
2. View Site to ensure you see what you expected.

Add any location map iframe tag to a Post or Page.

1. Copy the iframe code provided by Google.
2. Add New Page or Post.
   • Paste the iframe code into the editing box.
   • Click Save.
   • Click the HTML tab to view the code.
     • You should see the googlemaps tag genereated by WordPress. It replaces the code you copied into the box.
     • WordPress Support provides a visual tutorial.
   • Click Publish.
3. View the Post to ensure you see what you expected.

Make maps

Make your own annotated multimedia Google map

Here is an example of the embed code and URL provided by YouTube:

The embed code and URL provided by YouTube

Copy the URL from the embed code provided, up to the first ampersand (&):

Copy the URL up to the ampersand

Add the following code to your post, to use as a template:

<object
width="400" height="300"
data="http://www.youtube.com/v/Mt_E6RjH0CY"
type="application/x-shockwave-flash">
<param name="src" value="http://www.youtube.com/v/Mt_E6RjH0CY" />
</object>

Modifying the code for your hosted video

1. Put the URL you just copied into the <object> tag, in the data parameter.
2. Copy the URL provided by the host (not the URL from the embed code provided by the host), and update:
   • the VALUE parameter
   • any citations
3. Add a citation:
   • Movie Title
   • Author
4. Also include:
   • Media Type
   • Duration
   • Any Plug-ins Needed
5. Make sure the width and height of the movie are correct.

In IE6, you have to use both <object> tags and <embed> tags to add hosted movies to your site. This does not result in compliant code.

The finished result:

© Karin Jurick 2008. Painting a Scene of a New York City Street by Karin Jurick by Karin Jurick. 9:59. Flash.

Readings

Social Bookmarking

Wikipedia.org, the modern encyclopedia, describes and models social bookmarking technology.

Folksonomy

Wikipedia.org, the modern encyclopedia, compares taxonomy and folksonomy.

Examples

Scuttle

Host your own social tagging site.

Delicious

Add links to your own tagging site hosted by del.icio.us then "include" as many as you like on your own servers’s pages.

A newish form of bookmarking web sites for future reference is a technology called Collaborative Tagging or Semantic Web.

While keeping track of personal favorite links can be done with a browser’s toolbar, or bookmark list, tagging allows you to share your favorites with others browsing the Web.

Blog applications generally provide a way to track and display links but social bookmarking sites focus just on links.

Most of the bookmarking/tagging applications allow you to add links from the browser toolbar and many business/hobby sites provide a tool icon to add the link to your tagging site.

This cloud list of links comes from del.icio.us/gendertechnology:

Readings

What are RSS: and Feed: Links?

Short and sweet article by brindys.

soderlind.no Simple Aggregator

Uses the lastRSS library to
aggregate RSS feeds in WordPress.

Advanced RSS Ticker

Download the scripts and read the directions online.

Examples

Real Estate News

For the demo site built for CS 295 Winter 2005. Uses Moreover.com’s xml feed page.

Do you want to list news headlines from other sources in your site? Try these steps:

For WordPress

1. Find a feed page from your favorite online news site.
   • I’ll be an .xml file and often has a feed, xml, or rss icon to click. Your browser may not render this info, but you can copy the link to the file.
2. Download the scripts from soderlind.no.
   • Follow the instructions for making directories and setting permissions.
3. In the .php file is the updated code to copy and paste into your web page where you want the aggregated news to be listed.
   • Put the script between <?php and ?>.
   • Replace the soderlink.no link to the .xml link you copied in step one. Save.
   • Upload and test.

For General Web Pages

1. Find a feed page from your favorite online news site.
   • It’ll be an .xml file and often has a feed, xml, or rss icon to click. Your browser may not render this info, but you can copy the link to the file.
2. Choose a script to display a RSS feed:
   • Advanced RSS Ticker – Cycles through RSS feed with fading animation.
   • gAjax RSS Feeds Displayer – Displays part or all of an RSS feed.
3. Follow the directions for using the script online.
4. Modify the RSS style sheet to match your style guide.
5. Fix any code that is not xhtml complaint.

Readings

How E-commerce Works

Marshall Brain. How Stuff Works.

Six Principles of Good Commerce Design

Shayne Bowman, Chris Willis. Sample Chapter Peachpit Press. Jul 11, 2003.

PayPal’s Security Center

Excellent example of the kind of security page your site could have.

How to Create an E-Commerce Web Site

(269k .pdf) Verisign. 2003.

Ecommerce is the exchange of goods and services between producers, sellers, and buyers, online. It allows anyone with something to sell, a way to a make a buck, or make a living, and reach a world-wide audience. Established businesses have expanded their reach by selling online to clients who may never visit their storefront.

Storefronts generally have a merchant account with their bank to make credit card transactions, a fairly spendy option when you total the cost of leasing, setup, monthly statements, transaction fees, additional card companies, real-time online online processing, inventory systems.

Small shops who provide goods and or services need not go that route to partake in online transacting–as there are many other options available (in order of complexity and cost):

• Online brochure with mail-in form
• PayPal buttons and account
• Affiliate/Associate programs
• Auctions
• PayPal professional accounts with credit card processing
• Online hosting service (uses advertising)
• Merchant Account (ability to take credit cards)

The table below provides examples of some simple to complex solutions:

Readings

How to Choose a Web Host

Christopher Heng, thesitewizard.com. 2003

Hosting Your Site

Lynda Weinman. New Riders. Feb 28, 2003.

Avoid Hidden Web Hosting Costs

Carrie Bickner. New Riders. Oct 10, 2003.

Assess your needs before choosing a site host. Consider:

• Budget
  • What can you afford each month/year?
• Server size
  • How big is your site? 50k? 1Mb? 10Gb?
• Bandwidth
  • How much traffic will hit your site daily, sporadically?
  • What kind of speed will your site require?
  • Will you need streaming media?
• Tech support
  • Will you need personal contact with technicians and programmers 24/7?
• Domains
  • How many domain names will you be maintaining?
• Email services
  • Does your company require one or more email address per employee?
  • How many domains will be used?
  • What email client will they be using?
  • Will they need web mail?
• Web Applications
  • Will the site require custom web applications and databases?

This list goes on. When you can answer these questions, then search for local or national hosts that can meet your criteria. You may be able to negotiate the monthly/annual fee.

In some cases, it may not be necessary to purchase a domain and server space, but to buy just a page on a directory’s site. For example, some artists only display their work on a special section of their representative gallery’s site. If the gallery doesn’t want them selling through other galleries, then they may host the artist’s work online. Advantages of this method or promtion include:

• Potentially lower cost
• Less maintanence
• Promotions are done by the gallery