SED 618 Readings
-
Lynda Weinman: Designing Web Graphics
-
Donald Norman: Design of Everyday Things
-
Barbara Means: Technology and Education
-
New Media Literacy
Lynda Weinman: Designing Web Graphics
1. How important are graphics to webpages?
Images, aside from photographs, are a core concern for accessibility on web pages. Images are used as navigation instruments, logos, buttons, and even text. Information online is graphical and found in various forms from graphs to pie charts to schematics. Graphic techniques such as layout, composition, color, and tone are also important in organizing and presenting information. Good graphics are not just accessible, they are value-adding, and will engage the viewer's left and right brain functions for a deeper and fuller understanding. Information conveyed through images can not be fully understood if visitors to a web page can not view the graphics or if the browser can not display them.
2. What is different about web graphics?
The web is just another medium for media access. The principal difference in graphics for the web versus graphics for books, film, and television, is bit depth and resolution. In general, print graphics can vary from 200 dpi resolution to 1200 dpi and higher, whereas web graphics can only be displayed at 72 dpi. The wide variety of platforms, hardware, and browsers contribute to the overall complexity and challenge of delivering consistent and accessible graphics on the web. Unlike graphics for "old media," graphics for the web have limitations of color mode, bit depth, resolution, and file size for fast delivery and clarity. Successful graphics for the web in part depend on a good production workflow that enables a designer to work at the highest resolutions and greatest bit depths, but then be able to port the graphics to web appropriate formats. Using the right suite of programs will enable a designer to produce, format, and compress graphics in the right color mode, pixel dimension, and file size for the web.
3. What are the different formats of graphics? When should you use each?
High resolution formats for graphics include PICT, TIFF, EPS, PSD, PNG, and a variety of others depending on the application used. Graphic formats more commonly used for the web will include GIF and JPEG (although PNG can also be compressed to similar ratios while adding transparency). These formats can be optimized and compressed from their full resolution and higher bit depth parent images. Both of the former formats will introduce loss of information and artifacts to the image as a cost for smaller file size, faster download, and greater compatibility with various video hardware. In general, the JPEG format is best for photographs and images with continuous tone and little light changes but with up-to 24 bit depths and millions of colors. The GIF format will work best with line drawings, illustrations and images requiring 8 bit depth or less and up-to 256 colors (the PNG format can can have similar bit depths but unlike GIF which only supports one color for transparency, PNG can provide up-to 254).
4. What are the file types for Video? When are they used best?
Video on the web can occur in different formats and with different encoding/decoding for various platforms. Formats typically produced on PCs and MACs will include AVI and Quicktime with Cinepak, Indeo, or MPEG encoding with most machines now shipping with the appropriate players and plugins. Platform independent formats exist and are increasingly becoming more common such as the FLASH format seen on YouTube. Any video for the web should start out in one of several high quality, full framed formats, then compressed and encoded into to the target format to preserve the greatest image quality and action. Videos for the web will require compression and a reduction in size for fast viewing and clarity and thus result in some loss of the image information. Cinepak encoding is best used for animations and graphics with lots of solid colors, resulting in smooth playback but greater file size. Indeo encoding is best used for live action because of the better compression and playback rates with out the loss of image quality. Advances in MPEG encoding have delivered comparable results to both Indeo and Cinepak encoding formats while providing greater platform compatibility. As well, compression, file size, and platform independence in FLASH movies makes it an increasingly more desirable format for movies on the web.
5. What are the file types for audio? What factors do you need to be concerned with?
The most common file types for audio on the web include AIFF, WAVE, and MPEG, with the FLASH format also supporting sound encoding. Factors concerning audio include sampling rate- the range of the sound spectrum captured into the computer, and sampling resolution- the range the captured sound has in highs and lows. In recording and compressing audio audio it is important to consider the type of sound being recorder and the range of the aural spectrum needed to best convey the mood of the sound. Master sound files can start with a 44.1 khz sampling rate and a 16 bit sample resolution equal to that of standard commercial CD audio. The type of audio and the platform on which it will be heard will also determine what the final compression and format will be. Music can, generally speaking, be compressed into any of the above formats with an 8 bit depth resolution and a 22.050 khz sampling rate, whereas dialogue can be compressed down to 8 bit depth and 11 khz sampling rate.
Donald Norman: Design of Everyday Things
1. Define an Everyday thing and constraint. Provide several examples.
An everyday thing is part of our everyday experience without much thought given to it. We maneuver through our day operating, manipulating, and working with objects that provide us with a means to accomplish the array of tasks in everyday living. We use them in the ways that are suggested by the materials, size, shape of their appearance. Some faucet handles have the constraint of only turning left or right. When used, either hot or cold water is dispensed. A scale ruler is a standardized measurement tool. Markings along the ruler indicate subdivisions of a particular unit of measure. A protractor is a standardized measurement tool for angles. The markings indicate divisions of a circle in degrees, minutes, seconds.
2. Define an affordance and provide examples.
Affordance is the perceived and actual properties of a thing that determines how the thing could possibly be used. The affordance for a bench would be the concrete or wood used to make it act a strong and flat surface for support. A horizontal design would indicate it could be for sitting or lying down.
3. Explain what mapping is and give examples.
Mapping is the psychological aspect of design that clearly reveals the controls of an object and its intended method of use. Clearly defined controls also provide timely feedback to let the user know how an object is performing. An example of mapping is the temperature control of an auto AC unit. The knob can only be turned left or right, raising or lowering the temperature. As the knob is used the user will feel the temperature change. With such clearly defined controls and resulting action, very little is needed to remembered, making the object easier to use.
4. Describe a good design of computers according to affordances, mapping and constraints.
The computer of the future might have the following qualities. The output will be projection whether it be an LCD screen, flexible material, or a holographic image projected in front of the user. The graphic user interface will be scalable, multidimensional to allow for its operation on a palm, phone, desktop, or tabletop device. The input device will become touch sensitive with a graphic symbol language simplifying complex tasks. Users will be able to interact with their data by being able to grab and encircle selections, placing objects in bins designated for specific workflows. The internet will become navigable virtual space in which people and data can co-operate and co-create. The idea of the computer will become non-local, non-specific because a variety of devices will have microprocessors creating or tracking data and beaming the information wirelessly. Access to this information will no longer be limited to one computer or phone but to an array of networked secure devices. The critical factor will be the "computer's" ability to track and share the data and provide the user with tools appropriate to it current interface. Whereas computer users now travel around with user ids and logins from one location another, in the future, your disparate devices will integrate into one system of peripherals designed to access your unique nonlocal computer via the internet. Your computer can be your phone your blackberry or you laptop with syncing ensuring ubiquitous access to all your data all the time from anywhere.
Barbara Means: Technology and Education
1. According to Means, why is technology important in Education?
2. What are some of the reform efforts in education that technology might support?
3. Give some examples of authentic or contextual lessons?
4. What are some examples of top down reform?
New Media Literacy
1. What do they mean by New Media Literacy? Give several examples and why they are new.
2. How should new media be used by students?
3. How do teachers assess new media created by their students?
4. What are the authors bias?
5. What do they recommend?