Smart Solution

Multimedia is the presentation of audio, video, animation, simulation through computer technology. Rather than just static (non-moving) text or images, it provides a dynamic and changing scenario where one can gain a greater appreciation of the subject matter being presented. Unfortunately, a price has to be paid for this added sensation and that price is the processing of large data.

All data processed on a web page is digital and is characterized by "bytes" or million of bytes "megabytes" or "mbytes". Text is composed of pages, paragraphs, words and characters where each character represents one byte. A byte is made up of 8 bits where a bit is either 0 or 1. A picture is made up of a lot of dots or "pixels" where each pixel represents one, two or four bytes depending on the amount of color memory (8-bits per pixel is one byte, 24-bits per pixel is three bytes, etc.). A small picture, e.g., 100 x 100, contains 10,000 pixels and therefore requires 10,000 (10K), 20K or 40K to represent it, depending once again on the color depth (8-bits/pixel, etc.). A page of text, on the other hand, has about 600 characters or 600 bytes (less than 1K) and therefore much less than an image.

When you transfer text or images over the network, pictures or text or a combination are collected and packaged and submitted as bits or bytes or megabytes. The speed at which this data arrives is a function of the speed of all servers involved including the host (in this case LaxPower), the intermediate servers, and finally the receiver (that’s you), where you have a device, usually a modem, which transfers data from a telephone line into your computer memory or fast-memory (cache). A modem that is 28K transfers 28,000 bits per second. A modem that is 56K transfers at twice the rate and therefore downloads pages twice as fast. Systems that run at companies or at school usually run on high- speed "T-1" lines which is approximately 30 times faster than a 56K modem. So these privileged people get data very quickly.

Slower systems can handle text without too much problem. When you introduce graphics, then slower systems do not respond well, whereas faster systems do just fine, e.g., a wait of only a few seconds. Now when you start talking about audio and video, you’re talking large data of many megabytes which can take a long time, e.g., 5-10 seconds per mbyte on a T-1 and 1-5 minutes on a 28K-56K modem. A video is nothing more than digital data representing a collection of images (and sound), so if you have 24 frames/sec and 30 seconds of video, you’re talking 720 images * 20K (or 10K or 40K), which is many mbytes and which is impractical. This is why you don’t see a whole lot of videos on web pages.

For lacrosse, though, it’s important to try and get videos and/or sound because they provide a more meaningful experience of an event or happening. So how do we send you a 25 mbyte video that you can receive in seconds or a couple of minutes instead of a half hour which most people will not have the patience to wait for? We employ tricks and compromises!

Tricks and compromises to reduce data:

1. We employ a technique called data compression. Compression in very simplistic terms collects data that have the same characteristics and represents them only once and not multiple times. As an example, instead of collecting every pixel on an image and storing its value, why not just collect the first pixel and if its value does not change, just count the number of consecutive pixels and store that number? If an image contains mostly background (e.g., black), then it would be foolish to store thousands of bytes containing "0" when you could just represent this by just a few bytes. Also when storing video, why not subtract data from the next image instead of storing each pixel again? Compression can reduce images from 50 megabytes down to 1 or 2 megabytes. When you receive compressed data, the applications which run your program will be able to "decompress" this data on the fly and you will not know the difference.
2. We reduce the size of the images. It would be nice to run full-screen images of videos but the data size would be unmanageable. The smaller the size, the less the data. As an example, a 400 x 400 image contains 160,000 pixels, but a 200 x 200 image contains only 40,000 pixels or 1/4 the size. Thus if you are disappointed with the size, would you rather wait four times longer to download this large amount of data? Does your system have the memory capacity to handle that much data?
3. We reduce the number of colors or go monochromatic (grey scale) which could also reduce the file size to 1/2 or 1/4.
4. We use the lowest sound resolution which hopefully will not affect the quality of sound output. We may in some cases eliminate sound altogether.
5. We reduce the video frame rate (keeping the sound at its current rate). If you watch a video at 5, 10 or 15 frames, there is a loss in continuity for the 30 frames/sec that you are accustomed to, but sometimes it is perfectly acceptable, especially if it means viewing or not viewing the video. I have even run 2 minutes of video at one frame per second with the audio at 30 frames/sec and have found that I captured the essence of the event and reduced the data to the 1 megabyte range.
6. We crop or cut out the peripheral part of the scene that does not add significantly to the content.
7. We get a faster modem or faster servers which will be happening in the near future.

I have employed a number of tricks to get videos down to a reasonable size for your viewing pleasure. I cannot guarantee the quality in all cases but compromises have to be made.

We welcome any feedback on the following:

• Is the image/sound quality acceptable?
• How long did it take to download the video?
• Did you maximize to full screen? Was that better viewing?
• Did you automatically play the video from an application on your system or did you have to download a helper application from the web?
• What is your modem’s speed? 56K?
• Who is your server? AOL? School dormitory? etc.

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we’re left with web pages that frustratingly don’t properly print on to paper.

It’s remarkable that so few websites use print stylesheets as:

    * Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
    * They’re phenomenally quick and easy to set up

Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.
How to set up your print stylesheet

A print stylesheet works in much the same way as a regular stylesheet, except it only gets called up when the page is printed. To make it work, the following needs to be inserted into the top of every web page:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

The file, print.css is the print stylesheet, and the media="print" command means that this CSS file only gets called up when web pages are printed. (There are many different media you can use for stylesheets, such as for handheld, TV, projection etc. - see a full list of media types1 for more.)
What to put in your print stylesheet

The CSS commands in the print stylesheet essentially override the CSS commands in the main stylesheet. As such, the only commands you need to put in the print stylesheet are ones to override the CSS commands in the main stylesheet. This means you don’t need to repeat any colour or branding CSS commands as they’ll already be taken from the main stylesheet.

Generally speaking, you’ll want your print stylesheet to make the following happen when users hit that print button:
Remove unwanted items

Usually it’s just your organisation logo and page content that you’ll want to appear on the printed version of the web page. You’ll normally want to remove the header, left column and right column. You may also want to remove the footer (or some of it) from the printed version, unless it contains your contact details.

There may be certain isolated items you’d prefer weren’t printed so you can simply assign these class="noprint" in the HTML. To get rid of these items, along with the header and navigation (assuming these are assigned <div id="header"> and <div id="nav">) use the display: none command:

#header, #nav, .noprint {display: none;}

You may also want to remove certain images and adverts, especially animated images as these won’t make sense when printed.
Format the page

There’s nothing worse than printing off a web page to find the last few words of each line cut off. It’s also annoying (and a waste of paper) when the left and right columns are left in, leaving a very narrow space for the content so the web page prints on to 15 pieces of paper.

Generally speaking, the three CSS commands you’ll need are:

width: 100%; margin: 0; float: none;

These commands should be applied to any containing elements (<div>s for a CSS layout and <table>s for table layouts) to ensure the content spans the full width of the paper. So, the full CSS command would perhaps be something like:

#container, #container2, #content {width: 100%; margin: 0; float: none;}
Change the font?

Some print stylesheets do change the font size (often to 12pt) but this isn’t generally a very good idea. If users increase text size on the screen then the text will print in this larger font size… unless you specify a fixed font size in the print stylesheet.

Other print stylesheets change the font family to a serif font (such as Times New Roman) as this is slightly easier to read from print. Whether you choose to do this or not is up to you as users may be a bit surprised to see a different font printed out.

Do also bear in mind that background images and colours don’t print out by default. As such, you may wish to change the colour of text in a light colour so it has a reasonable colour contrast without its background.
Links

Print-outs are often in black and white so do make sure that links have a decent colour contrast. If not, assign links a slightly darker colour in the print out. For example:

a:link, a:visited {color: #781351}

For bonus usability you could include a footnote on the page listing all the URLs from that page, with each link referencing its URL underneath with a number. It’s otherwise impossible to know where a link is pointing to when reading a print out from a web page. See this working example2 and find out how to do this by reading this Improving link display for print3 article.
Making the print stylesheet

When making the print stylesheet place the print CSS commands into the bottom of your main CSS file. As you keep adding more commands check how your web pages look on the computer screen (don’t do this on a live website!). Keep adding commands until you’re happy with the appearance, then cut these commands out of the main CSS file and paste into the print stylesheet.

To summarise, your print stylesheet may look similar to this:

/* Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}

/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}

You’ve now got a print stylesheet! For something this quick and easy to set up that improves usability as much as it does, you’d be mad not to use one!

This article was written by Trenton Moss. Trenton’s crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy4 to help make the Internet a better place for everyone. He very good at running CSS training5 and spends much of his time working on the world’s most accessible CMS6.
What next?

    * Read more CSS articles7 on this website
    * Get a highly accessible CSS website through our accessible web design8 expertise
    * Optimise the accessibility of your website with our accessibility consulting9 services
    * Get our accessible and usable CMS6 so your site offers outstanding accessibility
    * Attend our interactive intermediate CSS training5 and advanced CSS training10 courses

Cascading Style Sheets offers much greater control over type characteristics than the <font> element.  You can use standard type conventions, such as point or pixel sizes, leading (the vertical space taken up by a line of type), indents, and alignment.  You gain more control but use much less code than was previously necessary.  Using the <font> element, you need the following shaded code for every instance of the <h1> element:

 

<h1 align=”center”><font color=”green”>the header</font>

</h1>

 

With Cascading Style Sheets you can express this style information once as a rule in a style sheet:

 

                h1 {color: green; text-align: center;}

 

CSS Basics

 

CSS is based on rules that select an HTML element and declare style characteristics for it.  You can state sets of rules, known as style sheets, in the head section of an HTML document or in a separate document known as an external style sheet.

 

Understanding Style Rules

 

Style sheet rules are easy to interpret.  The following style sheet shows a simple style rule for the <p> element.  Note that the style rules are contained in the <style> element in the document’s <head> section as the code on page 173 of the textbook illustrates. 

 

Style rules are composed of two parts: a selector and a declaration.  The selector determines the element to which the rule is applied.  The declaration details the exact property values. You must include all CSS rules within a <style> element or define them using a style attribute.  The <style> element always is contained in the <head> section.

 

Linking to an External Style Sheet

 

Placing style sheets in an external document lets you specify rules for different HTML documents.  This is an easy and powerful way to use style sheets.  An external style sheet is a text document with a .css extension that contains the style rules.  There is an example of a simple external style sheet named style sheet named style1.css as the code on page 174 of the textbook illustrates. 

 

Solving Problems with Style Sheets

 

The current browsers, including Netscape 6.0, Opera 5.0, and Internet Explorer 6.0, offer very good CSS support, albeit with some inconsistencies.  The main problem with style sheets is older browser support.  Finally, older browsers will not be able to interpret your CSS rules at all. 

 

CSS Selection Techniques

 

Your goal is to apply your style rules to the elements in your document.  You can choose from a variety of selection methods, including:

 

¨       Selecting multiple elements

¨       Selecting by context

¨       Selecting with the class attribute

 

More complex selection involves the creation of artificial divisions, using two elements designed expressly for CSS:

 

¨       <div> - Block Division

¨       <span> - Inline Division

 

Selecting Multiple Elements

 

Using multiple selectors lets you use less code to accomplish the same results.  For example, to make both <h1> and <h2> headings green.
 

Selecting by Context

 

A context-based selector lets you specify the exact context in which a style is applied.  To specify that <i> elements appear blue only within <p> elements.

 

Selecting with the class Attribute