home | homework | links | glossary | sitemap | contact
Week 7 - Homework
What connection does the company Compuserve have with GIF´s?
In 1987, CompuServe Corporation created the GIF (Graphical Interchange Format) file format to be used for the storage and on-line retrieval of bitmapped graphical data. GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality. This compression technique was patented in 1985. Controversy over the licensing agreement between the patent holder, Unisys, and CompuServe in 1994 inspired the development of the Portable Network Graphics (PNG) standard; since then all the relevant patents have expired.
Please explain image optimization for the Web?
Image optimization is basically the process by which image sizes are made smaller without significant loss to the picture quality in order to speed up the loading time of web pages. Though there is a certain degree of loss of picture quality, you can make this minimal with the use of proper software. More than 50% of the loading time of a web page is spent on pictures and thus, it is essential to cut down on the picture size to make a web page look attractive, as well as offering surfers with faster loading times.
First and foremost, the picture to be used should be brought down to the resolution offered by the monitor. Computer monitors display images at 72 dots per inch or dpi in short. Even if the picture that you want to use is large, there’s no need to press the panic button. The picture can be divided into smaller parts and uploaded separately after making the necessary changes and they can be later joined on the webpage itself. This process might take a bit of time but it offers much faster load times.
There are two other methods of speeding up load times as well. One of them is the removal of color palette information. Images generally contain color palette information, which is more or less unnecessary. Certain graphic editing software have the option ‘Save For The Web’. This option ends up removing a lot of unnecessary information and thus reduces the file size. Another method for optimizing load times is the usage of JPEG progressive or GIF or PNG interlaced property. This method can be seen in many web pages. It basically loads a blurry version of the image first but slowly allows the same to become crisper and clearer.
If you are wondering about how many images should be used while designing your web page, you would do well to know that there is no exact answer to this question. Though the usage of fewer images results in faster load times, including many pictures can often make a site look very enticing. Selection of the number of images to be used is dependent completely on the web page designer, keeping in mind the type of web page that is to be designed and your objective behind the same.
Image quality is also to be kept in mind. Usage of photo editors is recommended for removing noise from the picture. Programs like Photoshop give the designer the freedom of doing almost anything with the picture. Even thumbnails can be used on web pages as a link to a higher resolution version of the image.
So, don’t test the patience of your site visitors by using heavy image files. Rather, use photo optimization to speed up the loading time of your web pages, which in turn will hold the attention of your visitors and entice them to dig deeper.
Also, it is very important to specify the width and the height of your images in your HTML code. Since the text of your page usually loads faster, if you don't specify the width and the height of your images the browser will have to reposition the text once the pictures load, consuming more time. If you take the time to specify the width and heigth of your images, the browser will lay out the text where it should go from the beginning, even before it loads the images, saving time.
There are a lot of useful image optimization tools which can help us to optimize and reduce the file size of the images. These applications are available as both web-based and desktop-based applications:
-
Smush.it is a popular image optimization tool that able to reduce the image file size but retain the quality, which is what we called “lossless” image optimization!
-
The Online Image Optimizer lets you optimize different image file formats such as GIF, JPG and PNG. You can either upload the image from your local machine or paste the URL of an image. This tool able to optimize and convert your image to different file format.
-
PunyPNG uses several optimization techniques. It will first check your images and then determine which technique is the best for that particular image.
-
SiteReportCard Image Optimization Tool support GIF, JPG and PNG formats.
-
RIOT able to read and optimize different image formats by reading the magic number. So, it is able to optimize images with uncommon extensions, which makes it unique compare with other image optimization tools. RIOT will display the original and output images side-by-side, so that you can compare the quality of them easily.
-
TweakPNG is a low level tool for optimizing PNG files.
-
JPG & PNG Stripper able to remove unnecessary metadata from the image files. It supports JPG, JFIF and PNG file formats.
-
PNGGauntlet is a .NET application that use the PNGOUT to optimize PNG files. It is able to convert JPG, GIF, TGA, PCX and BMP files to PNG.
-
PNGOUT is a command line application which has a lot of different options. It supports PNG, GIF, BMP, JPG, TGA and PCX formats.
-
ImageOptim is a front end tool for a set of image optimization tools. ImageOptim uses AdvPNG from AdvanceCOMP, OptiPNG, PngCrush, JpegOptim, jpegtran from libjpeg, Gifsicle and optionally PNGOUT.
-
OptiPNG is an advanced PNG Optimizer, which will convert various file formats into optimized PNG.
-
Shrink O’Matic is an AIR based application which is able to rize image on the fly by drag and drop images onto it. You can choose options like the output formats, output name or the output sizes.
How does screen resolution affect a website?
Different Internet users have different computer screens and different computer screens have different resolutions. Unfortunately, your website will never look perfect on everyone’s screen. However, there are a few things you should consider to ensure your website looks good on the majority of screens.
The first thing to remember is that currently 1024×768 is the most common screen resolution. This means you should optimise your design for 1024×768. However, note that I said optimise; you still need to consider how your website will look on other resolutions!
Secondly, think about how your information is being presented to your audience. Too much information on a page can blow the page out of proportion. You may want to consider splitting your information (be it products, blogs or something else) into categories and subcategories.
Thirdly, consider a liquid layout (or hybrid fixed-liquid layouts), which uses percentages to define containers, and will therefore stay in proportion on different sized screens. If you do choose a fixed-width layout, centre your table and use an appropriate width.
Finally, test your website in different browsers with different resolutions. Remember not to stress if it isn’t perfect in every resolution – it never will be!
What does it mean to be Section 508 compliant?
Section 508, an amendment to the United States Workforce Rehabilitation Act of 1973, is a federal law mandating that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities. Technology is deemed to be "accessible" if it can be used as effectively by people with disabilities as by those without. To demonstate that a product or Web service is in compliance with Section 508, the creator completes a Voluntary Product Accessibility Template (VPAT), an "informational tool" that describes exactly how the product or service does or does not meet Section 508 standards. The completed VPAT gets posted on the creator's Web site to provide government officials and consumers with access to the information.
Demonstrate your understanding of image maps.
Demonstrate your understanding of disjointed rollover images.
Find at least 2 or 3 web design jobs you like. Provide the link to those job postings. What skills within the position requirements do you have? What are some of the most common skill requirements you found in your search? What would be your plan to get missing qualified requirements? How long do you think it would take you to get there?
Intermediate to expert level skills in graphic design software required, including web and multimedia design with experience in using programs such as: Dreamweaver, Freehand, Flash, Adobe In-Design, Adobe Illustrator, Adobe PageMaker, Adobe Photoshop, Acrobat, QuarkXpress, Microsoft Office Suite, HTML, CSS. Thorough knowledge of visual design principals; graphic design, layout, typography, color, icon development, corporate identity and branding.
Required skills: UX Design, Web Design, HTML, (X)HTML, CSS, image processing tools, Dreamweaver, Adobe Creative Suite products. Must be proficient with Photoshop and other design software and have some experience with JavaScript, Flash, ActionScripting, Adobe Acrobat.
Required skills: HTML, CSS, JavaScript and Flash experience preferred as well as working knowledge of Adobe Creative Suite. Print design skills with InDesign, Photoshop and Illustrator. Candidate should have 1-5 years design experience. College degree preferred but not required.
Until today I took only Photoshop and Dreamweaver classes at UCLA extension. To get these jobs I have to acquire knowledge of Adobe Creative Suite (Flash, Illustrator, InDesign, Fireworks, PageMaker) and scripting language such as JavaScript. Thanks to Dreamweaver class I have basic knowledge of CSS and HTML, but I need to improve them. If I take 2 classes a quarter at DCA extension program it will take me almost 2 years to have the required knowledge.