All versions of IE implement CSS slightly off-standard (although we are told that IE 8 will be a completely standards compliant browser). With luck, your design will be flexible enough to accomodate these variations, but in the case that it is not, you may need to write some rules specifically for IE.

There are several ways you can do this. Many developers prefer to create a completely separate stylesheet for various versions of IE. You do this by using a conditional comment in your html:

<!--[if IE ]>

Special instructions for IE 6 here
<![endif]-->

You can create one of these for each version of IE that you wish to target.

Here’s a good quick list of how to target or ignore various versions of IE this way:

Target IE only the CSS way

And here is a site that uses this method:

early-adopter.com

The second method of targeting IE is to use notation in your stylesheet for IE-only rules that is read by IE but ignored by standards-compliant browsers.

.box {
   background: #00f; /* all browsers including Mac IE */
   *background: #f00; /* IE 7 and below */
   _background: #f60; /* IE 6 and below */
   padding: 7px;
   color: #fff;
}

More about this here

And here’s a stylesheet that uses this method

So which of these methods should you use? There is a lot of disagreement about this. Some people think you shouldn’t use the second method because your CSS won’t validate, and in the future you will have to go and manual remove these extra styles when they are no longer necessary. Others think writing a number of extra stylesheets for IE browsers is overkill.

For the purposes of your final project, I expect your site to look and work well in the following browsers:

• Firefox 2.0 / 3.0 (Mac and PC)
• Safari 3 (Mac)
• Internet Explorer 7 (PC)

For your own purposes you may want to check IE6 as well, since there are still a significant number of people out there using it.

---

Final Project Presentations

Be prepared to present your full Web site next week. All major site pages should be finished, and you should have a minimum of 5 work samples in your portfolio section. All links should work, and your site should render consistently in the target browsers.

In case of network failure, please bring a copy of your site on your laptop, flash or other external drive that can be loaded locally.

Making a Fav icon for Your Site

The Fav or Favorite Icon is the small graphic that appears to the left of a Web sites URL in the location bar. You can easily create a custom fav icon for your own site.

Step 1: Get the .ico plug-in

The icon is a special file format, a windows icon (.ico), so the first thing you will need a plug-in for your graphics program to generate this kind of file:

Download an ico plug-in

If you are using Photoshop, this will go in the plug-ins folder within your application folder. Look for other file format plug-in files as a guide for where to put this. Once the plug-in is in the right place, you will need to restart your application to use it.

Step 2: Create the image

Icon files must by 16×16 in size. This doesn’t give you much to work with! Depending on the image you are trying to create, you may be able to reduce a larger image, but often you will find you need to create or edit these icons on a pixel by pixel basis. While you are editing, it helps to have the icon file open in two windows, one at 100% and one much larger so you can see the individual pixels.

Step 3: Save the image

Choose “Save” or “Save As” from the file menu. In the format options, choose “ICO (Windows Icon)”. If you want browsers to automatically recognize your icon, you must name it “favicon.ico”

Step 4: Upload the icon

For automatic detection of your icon, you must upload it to the root directory of your site, that is the same directory as your home page. It will then appear on any page at that level or below, on most browsers. It may take some time to see the icon in your browser, and you may need to clear your cache or restart to make this happen.

Resource: Favicon Generator

Step 5(optional): Modify your HTML

If for some reason you can’t or don’t want to put your icon file in the root directory, or you don’t want to apply it to all your pages, you can add code to the <head> section of your page using the <link> tag that will indicate the icon should be used:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

If you are using this method, you will need to add this code to every page where you want the icon to appear.

---

Search Engine Optimization

Search Engine Optimization (also known as SEO) refers to methods of making your site more easily and effectively indexed by search engines. Search engines generally utilize scripts called crawlers or spiders that catalog sites to build their directories. The precise algorithm that these engines use is a bit of a trade secret, to prevent unscrupulous stacking of the deck in search results, but there are a number of things you can do to make your pages more easily read by a crawler.

Meta Tags

The <meta> tag is used within the <head> section of your page, and can be used in a number of ways. The information contained in these tags is not displayed in the browser, but it is read by some crawlers. There are two uses of the meta tag that can are used by some search engines, although misuse of this has led to the meta data having less weight than other factors.

Keywords

Use this to provide a list of keywords associated with your site.

<meta name="keywords" content="art, design, portfolio, XML, XHTML, JavaScript, VBScript" />

Description

Use this to provide a short description of your site. Some engines display this in search results.

<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />

Good Markup Means Good Search Results

The best way to ensure that a crawler will index your site well is to use good practice when coding. A crawler reads your html the way a text-only browser does. It ignores images, multimedia, javascript and sound. So you need to make sure there is some text for the crawler to read, and leave other clues as well. Using “alt” attributes in your image tags and “title” attributes in your anchor tags will help in this.

Get Links from Other Sites

One way that search engines rank your site is by looking at how many pages link to it. This will also help the crawlers find your page.

Submit Your Site to Search Engines

Once you have your site in good shape, you can submit it to search engines. This doesn’t guarantee listing, but it may help the crawlers get to you faster. Here’s a few places where you can submit your site:

• Google
• Open Directory
• Yahoo
• Ask

---

Week 13 | Homework

1. Keep working on your site, due in two weeks!

PRESENT FINAL PROJECT:

DEC. 8^TH

Canale, Meghan E.

Kang, Hyung Min

Kwak, Ki Won

Murarka, Aradhana H.

Ibanez, Veronica

Parkin, Ashley K.

Tiismann, Emil A.

DEC. 15^TH

Im, Jun Hui

Kim, So Yoon

Stevens, Alice R.

Valencia, Stephanie J.

Brown, David

Bagwell-Green, Pierre M.

Beggs, Ashlee R.

Web browsers do not natively support the display of multimedia files such as QuickTime or Flash movies. All display of such content depends on 3rd party plug-ins invoked through special html tags that we will discuss below.

Today we are going to look at two of the most common multimedia file type in use on the web, Apple’s QuickTime and Adobe’s Flash Player.

Optimizing Multimedia Files

Like images, you must optimize your multimedia files before you post them online.

Flash publishes a proprietary file format with the extension .swf, which stands for Shockwave Flash. Flash will generate both an .swf file and an .html file with the code to display online, and recent versions of Flash also publish another .js file that is a workaround we will discuss more later. The Publish settings in Flash allow you to target the Flash player and ActionScript version and the image and audio quality.

The QuickTime player supports a wide range of video and audio formats. You can generate a QuickTime file from a number of applications, including QuickTime Pro, iMovie, and Final Cut. QuickTime movies usually have the extension .mov, sometimes .mp4. The latest and most effective format for online use is Apple’s h264, which gives you a small file size while maintaining good quality. However, users need QuickTime Player 7 or higher to view this format, so you may want to either provide multiple formats or a link to download the latest player for an optimum user experience.

Embed vs. Object

When including multimedia in your pages, you must consider the following:

• The user’s operating system
• The user’s browser and version
• Whether the user has the necessary third party plug-in installed, and what version

All of these factors contribute to whether your multimedia content displays, and displays correctly on the page.

Web browsers do not natively support the display of multimedia files such as QuickTime or Flash movies. All display of such content depends on 3rd party plug-ins invoked through special html tags. There are two tags that were developed for this usage: <object> and <embed>. These tags have the same purpose, but for different browsers. The <object> tag was developed for Internet Explorer, and the <embed> tag for Mozilla-based browsers, such as Netscape and Firefox. In the past, each browser only supported one tag, so it was necessary to use the embed tag nested inside an object tag in order to ensure that all browsers would display the content. The resulting code looked something like this:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align="">

<param name="movie" value="movie.swf">
<embed src="movie.swf" quality="high" width="400" height="300" name="movie" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

This is sometimes referred to as the “twice cooked” or “double-baked” method. It’s messy looking solution, but it works.

However, the <embed> tag is not part of the xHTML specification, and so is not considered standards-compliant. Currently, if you are only targeting the most popular, up-to-date browsers, it is no longer necessary to do this double-tag work around, because modern Mozilla browsers now support the <object> tag. So all our problems are solved, right?

Actually, they have only just begun. IE browsers implement media player plug-ins as ActiveX controls, a Microsoft standard. But Mozilla browsers only support ActiveX for the Windows Media Player plug-in. Otherwise they support the Netscape Plug-in architecture, which relies on the identification of MIME type. Now it turns out that IE browsers will also read MIME types, but the two types of browsers still don’t implement them in the same way. If you are really interested in all the reasons why, there is a full explanation here.

To further complicate things, in 2006 holders of a patent having to do with the concept of embedding multimedia in a Web page filed a lawsuit against Microsoft. Microsoft answered this by making the interaction of so-called “active content” or, any ActiveX component, subject to a user choice. What this means practically is that on an IE browser, a user has to click on the plug-in content before they can fully view or interact with it. This makes for a less than ideal user experience, so developers have come up with a number of workarounds.

Today I am going to show you the workarounds currently recommended by the makers of the Flash and QuickTime plugins. They are both still problematic, in that they use the deprecated, non-standards compliant <embed> tag. There are more current, but somewhat complicated methods also available, such as the Flash Satay method. This only works for Flash, and requires some changes in your Flash movie, so I’d only recommend it for more advanced students. However, it is more standards compliant than the methods I describe below.

The Twice-Baked + JavaScript Method

This approach uses the <object>/<embed> nesting solution, and uses JavaScript to hide the active content from the browser, which gets around the IE problem. Current versions of flash use a similar implementation of this as a publishing option, and will generate a file called AC_RunActiveContent.js, which is a JavaScript file.

QuickTime JavaScript workaround

This code was adapted from a tutorial on the Apple site: Including QuickTime In A Web Page. This page also lists all the parameters of the embed and object tags used in conjunction with QuickTime, so you can modify this code to suit your needs.

Step 1: Create a separate JavaScript (.js) file

Create a text file called InsertMovie.js. This file will contain all the information to embed the QuickTime file in your HTML. This method depends on the built-in JavaScript method called document.write. This method “writes” html to the browser. You can read more about its usage here.

function InsertMovie(movie)
{
document.write('<object classid = "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase=http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0 width="320" height="256" align="middle">\n');
document.write('<param name="src" value= "'+movie+'" />\n');
document.write('<param name= "autoplay" value= "false" />\n');
document.write('<embed src="'+movie+'" autoplay= "false" width= "320" height= "256" align= "middle" bgcolor="black" pluginspage="http://www.apple.com/quicktime/download/">\n');
document.write('</embed>\n');
document.write('</object>\n');
}

Be sure to to change the height and width attributes to match the dimensions of your movie (leave extra height for the movie controls, about 16 pixels). Because we are using the twice baked method, you will need to these parameters twice each in these files. Also, be sure that there are no line breaks in your document.write statements, this will cause the code to break!!!

What is happening here is that you are telling JavaScript, using the built-in document.write function, to write out the html necessary to display your Quicktime file.

Step 2: Include your JavaScript file in your HTML file

Add a JavaScript include statement that points to the JavaScript file from Step 1 to the <head> section of the web page that embeds the content. Remember, this is much the same as including an external stylesheet in your page, only this time you will use the <script> tag.

<script src="InsertObject.js" language="JavaScript" type="text/javascript"></script>

Step 3: Call the function from your HTML file

Add a function call to your HTML where you want the movie to appear, passing in the name of your movie as an argument between the parentheses:

<script language="JavaScript" type="text/javascript"> InsertMovie("yourmovie.mov"); </script>

Here’s an example of this method in action:

• Quicktime Example

Flash JavaScript workaround

All versions of the Flash IDE released after March 2006 include the Flash Active Content Update extension. If your version of Flash does not have this functionality, you can accomplish the same thing manually by following the instructions here:

Beginner’s guide to publishing active content

If you do have the Active Content extension, then you will be able to use the code that is generated by Flash when you publish your Flash movie. First, open the generated html file in your text editor, and copy and paste the following into your own html.

From the <head> section:

<script language="javascript">AC_FL_RunContent = 0;

<script> <script src="AC_RunActiveContent.js" language = "javascript"> </script>

From the <body> section:

Everything between the <script></script> tags, and everything between the <no script> </noscript> tags. Place this code in your html where you want the movie to appear.

Here’s a Flash movie embedded with this method:

Flash Movie Example

==========================================================================

Final Project Requirements

Documentation
• accurate sitemap
• revised wireframe

Content

•your homepage

•your artist statement
• your bio
• your portfolio
• your skills
• contact page
Information Architecture
• one section without subpages (like a homepage or contact page)
• one section with 2 to 3 subpages

Coding
• image rollover
• CSS link states

• 2 Link types (email, new window)
Images

• GIF
• JPG

Execution
• a live area that fits a browser set to (minimum) 800×600
• use of lists and divides
• effectively placed HTML text
(your whole site should not be all images)
Assignment:

---

Week 12 | Homework

1. Build the html for the second level pages of your site. That is, build at least one page for each major section of your site. At minimum, finish three pages for next week.

You will
need to create each of the pages outlined on your sitemap. Your site will
need to include the required content, pages, code and images.
1. Create a template page for the unique layouts outlined on your.
Then produce all of the pages required and represented on your
sitemap.
2. Make sure that your site meets all of the requirements for the final
project.
3. Run your code through the HTML and CSS Validater and go through
it correct as many errors as possible and to maintain Code Best
Practices.
4. Test your pages in Safari and Firefox.

Research: A lot has changed since you have updated your website.
Follow up on your latest work by validating your pages…
W3C – Markup Validation Service
http://validator.w3.org/
W3C – CSS Validation Service
http://jigsaw.w3.org/css-validator/