Disney.com Chrome v3.0

  1. Go Network logo
  2. Join Now - link to Disney.com Registration
  3. Free E-mail - link to GO.com Registration
  4. Search - link to Disney.com Search Home page
  5. Disney.com Logo - link to disney.com home page
  6. LEVEL ONE Breadcrumb navigation
  7. LEVEL TWO Breadcrumb navigation
  8. LEVEL THREE Breadcrumb navigation
  9. Pull-down Menu - links to disney.com channels and GO Network Centers

Applying Chrome v3.0 to Disney.com Web Sites

Overview

Before applying the new Chrome to a site, you must use the Chrome Configuration Tool to configure the Chrome. This means setting the color-scheme and breadcrumb navigation for your site. The tool is a web-based application that lets you, the integrator, set chrome properties to an entire directory (or single file) without having to call an engineer.

Below are instructions on how to go about applying the Chrome and how to use the Chrome Configuration Tool.


The Process

  1. Decide on a color scheme(s) (link to Color Guidelines)
  2. Decide on BreadCrumb Navigation Scheme (BreadCrumb Guidelines)
  3. Enter information into Chrome Configuration Tool
  4. Apply to pages using Chromer v3.0


Using Chrome Configuration Tool

Step One: Log-in to MOTHER

  1. go to: foobar.online.disney.com
  2. click on Mother99
  3. username: guest
  4. password: (leave blank)
  5. After page loads, click on GO button

Step Two: Setting Chrome Properties

Chrome properties include, width, background and text color. Properties can be applied to entire directories or a single html file. Files in sub-directories will inherent parent directory's chrome properties.

  1. Click on Create a New Entry
  2. Set directory path
    e.g. /pool/content/disney/disneychannel/zoog/
    /pool/content/disney/disneyworld/index2.html
  3. Set a WITDH
    This value depends on the page width of your content. Some sites are 600px wide, while others can be 640px.
    If you are placing the chrome in a table, then set it to 100% for best results; have the chrome inherit the parent table width.
  4. Setting COLOR
    a. Select a top and bottom bgcolor. if you are applying one color scheme to an entire site, make sure the color will work on all pages. Remember that you can set chrome properties to individual pages or sub-sections within your site.
    b. Set font/text color. There are two options, white or black. Select the one that best contrasts with the colors you have chosen.
  5. Preview
  6. Save
  7. Move on to BreadCrumbing

Step Three: Setting BreadCrumb Navigation

If you don't know what BreadCrumbing is, here it is in a nutshell. Breadcrumb links are navigation links aimed at letting the user know "where" they are on the site. There are 3 levels of navigation. It can be applied to entire directories or a single html file. Files in sub-directories will inherent parent directory's chrome breadcrumb navigation.
Click here for Guidelines

  1. Set a directory path
    e.g. /pool/content/disney/disneychannel/zoog/
    /pool/content/disney/disneyworld/index2.html
  2. Enter text and URLs for Levels 1-3 navigational links.
    Sample navigation schemes:
    Disney.com > Disney World > Disney MGM Studios > Rides
    Disney.com > Vacations > Walt Disney World > Disney MGM Studios
    • You don't have to use all three levels of navigation, however, you must have at least one level present.
    • Do not use relative URLs
    • DO NOT ESCAPE URLs, tool will do it for you
  3. Preview breadcrumb links Do the links fit inside the Chrome specified?
  4. Save Settings

Chroming Your Site

This part is easy.
  1. Generate or use an existing filelist.
  2. Chrome site using Chromer v3.0 Click here.
  3. Before chroming a site, you must set the Chrome properties and BreadCrumb Navigation. Only then, will you be able to run a filelist thorugh Chromer v3.0.

Breadcrumb Navigation Guidelines

Below are three examples that show how to breadcrumb a web-site. Use them as a guideline when creating your navigation scheme. In most cases, use one of the 12 channels as Level One navigation. This will help drive traffic back to your channel.

Example #1: Disneyland
Like all web sites, Disneyland has a home page and various sub-sections. Below are examples of possible navigation schemes:

  Level 1 Level 2 Level 3
Disney.com > Vacations > Disneyland  
Disney.com > Vacations > Disneyland > Main St. U.S.A.
Disney.com > Vacations > Disneyland > Tomorrowland
Disney.com > Vacations > Disneyland > Entertainment
Disney.com > Vacations > Disneyland > Plan Your Visit
Disney.com > Vacations > Disneyland > Resort Hotels
Disney.com > Vacations > Disneyland > Business & Education

In the example above, all the files under the Business directory would share the same navigation links.

Example #2: Disney's One Saturday Morning
Dilemma: You want to chrome the Many Adventures of Winnie the Pooh. And not only does this show have an extremely long name, but so does its parent Business Unit, Disney's One Saturday Morning. Throw in the Disney.com channel association (Television), and you're left with a whole lotta link. What you do do? Will all these links fit in the Chrome?

Option 1
  Level 1 Level 2 Level 3
Disney.com > Television > Disney's One Saturday Morining > New Adventures of Winnie the Pooh

Option 2
  Level 1 Level 2 Level 3
Disney.com > Disney's One Saturday Morining > New Adventures of Winnie the Pooh  

Option 3
  Level 1 Level 2 Level 3
Disney.com > Television > New Adventures of Winnie the Pooh  

Option 4
  Level 1 Level 2 Level 3
Disney.com > Television > Disney's One Saturday Morining  

Ask questions like "Where do I want the user to go?" Is it more important for them to go back to the Pooh home page, Disney's 1SM home page, or television channel? Also keep in mind that most pages have their own left-side navigation. On this page, there is a link back to Pooh's home.

Example #3: Club Blast
In the examples below, notice how Levels 2 and 3 do not have URLs. This is because there is no aggregate page for action games. The idea is to get them back to the Club home page, but still give them an idea of where they are.

Option 1
  Level 1 Level 2 Level 3
Disney.com > Club Blast Home > Action Games Mickey NASCAR Racing

Option 2
  Level 1 Level 2 Level 3
Disney.com > Club Blast Home > Action Games  


Color Guidelines

In order to give producers and business units more flexibility with chrome integration, the new chrome tool allows integrators to specify color schemes based on the entire 216 web color hex table. �

Steps for choosing colors:

a. Artists should work with producers to decide color scheme (or at least have input).
b. Integrators will implement color choices. �

Color variables are:

  1. Black or white html chrome text (dependent on background color choices)
  2. Black or white Go logo (dependent on background color choices)
  3. Black or white Disney logo (dependent on background color choices)
  4. Top bar background color
  5. Bottom bar background color �

These choices are available from the chrome tool.
View some examples �

Questions or concerns can be directed to Chris Thomes at extension 3706.