Tuesday, December 4, 2012

web graphics UNIT -I notes

7:03 AM    No comments

 

 

    UNIT -I

HTML TAGS

BASIC ELEMENTS

 

Document Type

<HTML></HTML>

(beginning and end of file)

 

Title

<TITLE></TITLE>

(must be in header)

 

Header

<HEAD></HEAD>

(descriptive info, such as title)

 

Body

<BODY></BODY>

(bulk of the page)

 

STRUCTURAL DEFINITION

 

Heading

<H?></H?>

(the spec. defines 6 levels)

 

Align Heading

<H? ALIGN=LEFT|CENTER|RIGHT></H?>

 

 

Division

<DIV></DIV>

 

 

Align Division

<DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

4.0

Defined Content

<SPAN></SPAN>

 

 

Block Quote

<BLOCKQUOTE></BLOCKQUOTE>

(usually indented)

4.0

Quote

<Q></Q>

(for short quotations)

4.0

Citation

<Q CITE="URL"></Q>

 

 

Emphasis

<EM></EM>

(usually displayed as italic)

 

Strong Emphasis

<STRONG></STRONG>

(usually displayed as bold)

 

Citation

<CITE></CITE>

(usually italics)

 

Code

<CODE></CODE>

(for source code listings)

 

Sample Output

<SAMP></SAMP>

 

 

Keyboard Input

<KBD></KBD>

 

 

Variable

<VAR></VAR>

 

 

Definition

<DFN></DFN>

(not widely implemented)

 

Author's Address

<ADDRESS></ADDRESS>

 

 

Large Font Size

<BIG></BIG>

 

 

Small Font Size

<SMALL></SMALL>

 

4.0

Insert

<INS></INS>

(marks additions in a new version)

4.0

Time of Change

<INS DATETIME=":::"></INS>

 

4.0

Comments

<INS CITE="URL"></INS>

 

4.0

Delete

<DEL></DEL>

(marks deletions in a new version)

4.0

Time of Change

<DEL DATETIME=":::"></DEL>

 

4.0

Comments

<DEL CITE="URL"></DEL>

 

4.0

Acronym

<ACRONYM></ACRONYM>

 

4.0

Abbreviation

<ABBR></ABBR>

 

 

PRESENTATION FORMATTING

 

Bold

<B></B>

 

 

Italic

<I></I>

 

4.0*

Underline

<U></U>

(not widely implemented)

 

Strikeout

<STRIKE></STRIKE>

(not widely implemented)

4.0*

Strikeout

<S></S>

(not widely implemented)

 

Subscript

<SUB></SUB>

 

 

Superscript

<SUP></SUP>

 

 

Typewriter

<TT></TT>

(displays in a monospaced font)

 

Preformatted

<PRE></PRE>

(display text spacing as-is)

 

Width

<PRE WIDTH=?></PRE>

(in characters)

 

Center

<CENTER></CENTER>

(for both text and images)

N1

Blinking

<BLINK></BLINK>

(the most derided tag ever)

 

Font Size

<FONT SIZE=?></FONT>

(ranges from 1-7)

 

Change Font Size

<FONT SIZE="+|-?"></FONT>

 

 

Font Color

<FONT COLOR="#$$$$$$"></FONT>

 

4.0*

Select Font

<FONT FACE="***"></FONT>

 

N4

Point size

<FONT POINT-SIZE=?></FONT>

 

N4

Weight

<FONT WEIGHT=?></FONT>

 

4.0*

Base Font Size

<BASEFONT SIZE=?>

(from 1-7; default is 3)

MS

Marquee

<MARQUEE></MARQUEE>

 

 

POSITIONING

N3

Multi-Column

<MULTICOL COLS=?></MULTICOL>

 

N3

Column Gutter

<MULTICOL GUTTER=?></MULTICOL>

 

N3

Column Width

<MULTICOL WIDTH=?></MULTICOL>

 

N3

Spacer

<SPACER>

 

N3

Spacer Type

<SPACER TYPE=HORIZONTAL|VERTICAL|BLOCK>

 

N3

Size

<SPACER SIZE=?>

 

N3

Dimensions

<SPACER WIDTH=? HEIGHT=?>

 

N3

Alignment

<SPACER ALIGN=LEFT|RIGHT|CENTER>

 

N4

Layer

<LAYER></LAYER>

 

N4

Name

<LAYER ID="***"></LAYER>

 

N4

Location

<LAYER LEFT=? TOP=?></LAYER>

 

N4

Rel. Position

<LAYER PAGEX=? PAGEY=?></LAYER>

 

N4

Source File

<LAYER SRC="***"></LAYER>

 

N4

Stacking

<LAYER Z-INDEX=?></LAYER>

 

N4

Stack Position

<LAYER ABOVE="***" BELOW="***"></LAYER>

 

N4

Dimensions

<LAYER HEIGHT=? WIDTH=?></LAYER>

 

N4

Clipping Path

<LAYER CLIP=,,,></LAYER>

 

N4

Visible?

<LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER>

N4

Background

<LAYER BACKGROUND="$$$$$$"></LAYER>

 

N4

Color

<LAYER BGCOLOR="$$$$$$"></LAYER>

 

N4

Inline Layer

<ILAYER></ILAYER>

(takes same attributes as LAYER)

N4

Alt. Content

<NOLAYER></NOLAYER>

 

 

LINKS, GRAPHICS, AND SOUNDS

 

Link Something

<A HREF="URL"></A>

 

 

Link to Location

<A HREF="URL#***"></A>

(if in another document)

 

 

<A HREF="#***"></A>

(if in current document)

4.0*

Target Window

<A HREF="URL" TARGET="***"></A>

 

4.0*

Action on Click

<A HREF="URL" ONCLICK="***"></A>

(Javascript)

4.0*

Mouseover Action

<A HREF="URL" ONMOUSEOVER="***"></A>

(Javascript)

4.0*

Mouse out Action

<A HREF="URL" ONMOUSEOUT="***"></A>

(Javascript)

 

Link to Email

<A HREF="mailto:@"></A>

 

N, MS

Specify Subject

<A HREF="mailto:@?SUBJECT=***"></A>

(use a real question mark)

 

Define Location

<A NAME="***"></A>

 

 

Display Image

<IMG SRC="URL">

 

 

Alignment

<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

N1

Alignment

<IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>

 

Alternate

<IMG SRC="URL" ALT="***">

(if image not displayed)

 

Dimensions

<IMG SRC="URL" WIDTH=? HEIGHT=?>

(in pixels)

 

 

<IMG SRC="URL" WIDTH=% HEIGHT=%>

(as percentage of page width/height)

 

Border

<IMG SRC="URL" BORDER=?>

(in pixels)

 

Runaround Space

<IMG SRC="URL" HSPACE=? VSPACE=?>

(in pixels)

N1

Low-Res Proxy

<IMG SRC="URL" LOWSRC="URL">

 

 

Imagemap

<IMG SRC="URL" ISMAP>

(requires a script)

 

Imagemap

<IMG SRC="URL" USEMAP="URL">

 

MS

Movie Clip

<IMG DYNSRC="***" START="***" LOOP=?>

 

MS

Background Sound

<BGSOUND SRC="***" LOOP=?|INFINITE>

 

 

Client-Side Map

<MAP NAME="***"></MAP>

(describes the map)

 

Map Section

<AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF>

N1

Client Pull

<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">

N2

Embed Object

<EMBED SRC="URL">

(insert object into page)

N2

Object Size

<EMBED SRC="URL" WIDTH=? HEIGHT=?>

 

4.0

Object

<OBJECT></OBJECT>

 

4.0

Parameters

<PARAM>

 

 

DIVIDERS

 

Paragraph

<P></P>

(closing tag often unnecessary)

 

Align Text

<P ALIGN=LEFT|CENTER|RIGHT></P>

 

N

Justify Text

<P ALIGN=JUSTIFY></P>

 

 

Line Break

<BR>

(a single carriage return)

 

Clear Textwrap

<BR CLEAR=LEFT|RIGHT|ALL>

 

 

Horizontal Rule

<HR>

 

 

Alignment

<HR ALIGN=LEFT|RIGHT|CENTER>

 

 

Thickness

<HR SIZE=?>

(in pixels)

 

Width

<HR WIDTH=?>

(in pixels)

 

Width Percent

<HR WIDTH="%">

(as a percentage of page width)

 

Solid Line

<HR NOSHADE>

(without the 3D cutout look)

N1

No Break

<NOBR></NOBR>

(prevents line breaks)

N1

Word Break

<WBR>

(where to break a line if needed)

 

LISTS

 

Unordered List

<UL><LI></UL>

(before each list item)

 

Compact

<UL COMPACT></UL>

 

 

Bullet Type

<UL TYPE=DISC|CIRCLE|SQUARE>

(for the whole list)

 

Bullet Type

<LI TYPE=DISC|CIRCLE|SQUARE>

(this & subsequent)

 

Ordered List

<OL><LI></OL>

(before each list item)

 

Compact

<OL COMPACT></OL>

 

 

Numbering Type

<OL TYPE=A|a|I|i|1>

(for the whole list)

 

Numbering Type

<LI TYPE=A|a|I|i|1>

(this & subsequent)

 

Starting Number

<OL START=?>

(for the whole list)

 

Starting Number

<LI VALUE=?>

(this & subsequent)

 

Definition List

<DL><DT><DD></DL>

(<DT>=term, <DD>=definition)

 

Compact

<DL COMPACT></DL>

 

 

Menu List

<MENU><LI></MENU>

(before each list item)

 

Compact

<MENU COMPACT></MENU>

 

 

Directory List

<DIR><LI></DIR>

(before each list item)

 

Compact

<DIR COMPACT></DIR>

 

 

BACKGROUNDS AND COLORS

 

 

Tiled Bkground

<BODY BACKGROUND="URL">

 

 

MS

Watermark

<BODY BGPROPERTIES="FIXED">

 

 

 

Bkground Color

<BODY BGCOLOR="#$$$$$$">

(order is red/green/blue)

 

 

Text Color

<BODY TEXT="#$$$$$$">

 

 

 

Link Color

<BODY LINK="#$$$$$$">

 

 

 

Visited Link

<BODY VLINK="#$$$$$$">

 

 

 

Active Link

<BODY ALINK="#$$$$$$">

 

 

 

(More info at http://werbach.com/web/wwwhelp.html#color)

 

SPECIAL CHARACTERS

 

 

Special Character

&#?;

(where ? is the ISO 8859-1 code)

 

 

<

&lt;

 

 

 

>

&gt;

 

 

 

&

&amp;

 

 

 

"

&quot;

 

 

 

Registered TM

&#174;

 

 

 

Registered TM

&reg;

 

 

 

Copyright

&#169;

 

 

 

Copyright

&copy;

 

 

 

Non-Breaking Space

&nbsp;

 

 

 

(Complete list at http://www.htmlhelp.com/reference/charset)

 

FORMS

 

Define Form

<FORM ACTION="URL" METHOD=GET|POST></FORM>

 

4.0*

File Upload

<FORM ENCTYPE="multipart/form-data"></FORM>

 

Input Field

<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET">

 

Field Name

<INPUT NAME="***">

 

 

Field Value

<INPUT VALUE="***">

 

 

Checked?

<INPUT CHECKED>

(checkboxes and radio boxes)

 

Field Size

<INPUT SIZE=?>

(in characters)

 

Max Length

<INPUT MAXLENGTH=?>

(in characters)

4.0

Button

<BUTTON></BUTTON>

 

4.0

Button Name

<BUTTON NAME="***"></BUTTON>

 

4.0

Button Type

<BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON>

4.0

Default Value

<BUTTON VALUE="***"></BUTTON>

 

4.0

Label

<LABEL></LABEL>

 

4.0

Item Labelled

<LABEL FOR="***"></LABEL>

 

 

Selection List

<SELECT></SELECT>

 

 

Name of List

<SELECT NAME="***"></SELECT>

 

 

# of Options

<SELECT SIZE=?></SELECT>

 

 

Multiple Choice

<SELECT MULTIPLE>

(can select more than one)

 

Option

<OPTION>

(items that can be selected)

 

Default Option

<OPTION SELECTED>

 

 

Option Value

<OPTION VALUE="***">

 

4.0

Option Group

<OPTGROUP LABEL="***"></OPTGROUP>

 

 

Input Box Size

<TEXTAREA ROWS=? COLS=?></TEXTAREA>

 

 

Name of Box

<TEXTAREA NAME="***"></TEXTAREA>

 

N2

Wrap Text

<TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA>

4.0

Group elements

<FIELDSET></FIELDSET>

 

4.0

Legend

<LEGEND></LEGEND>

(caption for fieldsets)

4.0

Alignment

<LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND>

 

TABLES

 

Define Table

<TABLE></TABLE>

 

4.0*

Table Alignment

<TABLE ALIGN=LEFT|RIGHT|CENTER>

 

 

Table Border

<TABLE BORDER></TABLE>

(either on or off)

 

Table Border

<TABLE BORDER=?></TABLE>

(you can set the value)

 

Cell Spacing

<TABLE CELLSPACING=?>

 

 

Cell Padding

<TABLE CELLPADDING=?>

 

 

Desired Width

<TABLE WIDTH=?>

(in pixels)

 

Width Percent

<TABLE WIDTH=%>

(percentage of page)

4.0*

Table Color

<TABLE BGCOLOR="$$$$$$"></TABLE>

 

4.0

Table Frame

<TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS|
VSIDES|BOX|BORDER></TABLE>

4.0

Table Rules

<TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE>

MS

Border Color

<TABLE BORDERCOLOR="$$$$$$"></TABLE>

 

MS

Dark Border

<TABLE BORDERCOLORDARK="$$$$$$"></TABLE>

 

MS

Light Border

<TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE>

 

 

Table Row

<TR></TR>

 

 

Alignment

<TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

 

Table Cell

<TD></TD>

(must appear within table rows)

 

Alignment

<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

 

No linebreaks

<TD NOWRAP>

 

 

Columns to Span

<TD COLSPAN=?>

 

 

Rows to Span

<TD ROWSPAN=?>

 

4.0*

Desired Width

<TD WIDTH=?>

(in pixels)

N3

Width Percent

<TD WIDTH="%">

(percentage of table)

4.0*

Cell Color

<TD BGCOLOR="#$$$$$$">

 

 

Header Cell

<TH></TH>

(same as data, except bold centered)

 

Alignment

<TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

 

No Linebreaks

<TH NOWRAP>

 

 

Columns to Span

<TH COLSPAN=?>

 

 

Rows to Span

<TH ROWSPAN=?>

 

4.0*

Desired Width

<TH WIDTH=?>

(in pixels)

N3

Width Percent

<TH WIDTH="%">

(percentage of table)

4.0*

Cell Color

<TH BGCOLOR="#$$$$$$">

 

4.0

Table Body

<TBODY>

 

4.0

Table Footer

<TFOOT></TFOOT>

(must come before THEAD>

4.0

Table Header

<THEAD></THEAD>

 

 

Table Caption

<CAPTION></CAPTION>

 

 

Alignment

<CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT>

 

4.0

Column

<COL></COL>

(groups column attributes)

4.0

Columns Spanned

<COL SPAN=?></COL>

 

4.0

Column Width

<COL WIDTH=?></COL>

 

4.0

Width Percent

<COL WIDTH="%"></COL>

 

4.0

Group columns

<COLGROUP></COLGROUP>

(groups column structure)

4.0

Columns Spanned

<COLGROUP SPAN=?></COLGROUP>

 

4.0

Group Width

<COLGROUP WIDTH=?></COLGROUP>

 

4.0

Width Percent

<COLGROUP WIDTH="%"></COLGROUP>

 

 

FRAMES

4.0*

Frame Document

<FRAMESET></FRAMESET>

(instead of <BODY>)

4.0*

Row Heights

<FRAMESET ROWS=,,,></FRAMESET>

(pixels or %)

4.0*

Row Heights

<FRAMESET ROWS=*></FRAMESET>

(* = relative size)

4.0*

Column Widths

<FRAMESET COLS=,,,></FRAMESET>

(pixels or %)

4.0*

Column Widths

<FRAMESET COLS=*></FRAMESET>

(* = relative size)

4.0*

Borders

<FRAMESET FRAMEBORDER="yes|no"></FRAMESET>

4.0*

Border Width

<FRAMESET BORDER=?></FRAMESET>

 

4.0*

Border Color

<FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET>

N3

Frame Spacing

<FRAMESET FRAMESPACING=?></FRAMESET>

 

4.0*

Define Frame

<FRAME>

(contents of an individual frame)

4.0*

Display Document

<FRAME SRC="URL">

 

4.0*

Frame Name

<FRAME NAME="***"|_blank|_self|_parent|_top>

4.0*

Margin Width

<FRAME MARGINWIDTH=?>

(left and right margins)

4.0*

Margin Height

<FRAME MARGINHEIGHT=?>

(top and bottom margins)

4.0*

Scrollbar?

<FRAME SCROLLING="YES|NO|AUTO">

 

4.0*

Not Resizable

<FRAME NORESIZE>

 

4.0*

Borders

<FRAME FRAMEBORDER="yes|no">

 

4.0*

Border Color

<FRAME BORDERCOLOR="#$$$$$$">

 

4.0*

Unframed Content

<NOFRAMES></NOFRAMES>

(for non-frames browsers)

4.0

Inline Frame

<IFRAME></IFRAME>

(takes same attributes as FRAME)

4.0

Dimensions

<IFRAME WIDTH=? HEIGHT=?></IFRAME>

 

4.0

Dimensions

<IFRAME WIDTH="%" HEIGHT="%"></IFRAME>

 

 

SCRIPTS AND JAVA

 

Script

<SCRIPT></SCRIPT>

 

 

Location

<SCRIPT SRC="URL"></SCRIPT>

 

 

Type

<SCRIPT TYPE="***"></SCRIPT>

 

 

Language

<SCRIPT LANGUAGE="***"></SCRIPT>

 

4.0*

Other Content

<NOSCRIPT></NOSCRIPT>

(if scripts not supported)

 

Applet

<APPLET></APPLET>

 

 

File Name

<APPLET CODE="***">

 

 

Parameters

<APPLET PARAM NAME="***">

 

 

Location

<APPLET CODEBASE="URL">

 

 

Identifier

<APPLET NAME="***">

(for references)

 

Alt Text

<APPLET ALT="***">

(for non-Java browsers)

 

Alignment

<APPLET ALIGN="LEFT|RIGHT|CENTER">

 

 

Size

<APPLET WIDTH=? HEIGHT=?>

(in pixels)

 

Spacing

<APPLET HSPACE=? VSPACE=?>

(in pixels)

N4

Server Script

<SERVER></SERVER>

 

 

MISCELLANEOUS

 

Comment

<!-- *** -->

(not displayed by the browser)

 

Prologue

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

 

Searchable

<ISINDEX>

(indicates a searchable index)

 

Prompt

<ISINDEX PROMPT="***">

(text to prompt input)

 

Send Search

<A HREF="URL?***"></a>

(use a real question mark)

 

URL of This File

<BASE HREF="URL">

(must be in header)

4.0*

Base Window Name

<BASE TARGET="***">

(must be in header)

 

Relationship

<LINK REV="***" REL="***" HREF="URL">

(in header)

N4

Linked File

<LINK TYPE="***" SRC="***"></LINK>

 

 

Meta Information

<META>

(must be in header)

 

Style Sheets

<STYLE></STYLE>

(implementations vary)

4.0

Bidirect Off

<BDO DIR=LTR|RTL></BDO>

(for certain character sets)

 

______________________________________________________________________

 

Basic Web Graphics

by are visual presentations on some surface, such as a wall, canvas, computer screen, paper, or stone to brand, inform, illustrate, or entertain. Examples are photographs, drawings, Line Art, graphs, diagrams, typography, numbers, symbols, geometric designs, maps, engineering drawings, or other images. Graphics often combine text, illustration, and color. Graphic design may consist of the deliberate selection, creation, or arrangement of typography alone, as in a brochure, flier, poster, web site, or book without any other element. Clarity or effective communication may be the objective, association with other cultural elements may be sought, or merely, the creation of a distinctive style.

Graphics can be functional or artistic. Graphics can be imaginary or represent something in the real world. The latter can be a recorded, such as a photograph, or an interpretation a highlight essential features, or an artist, in which case the distinction with imaginary graphics may become blurred.

HISTORY

 

The earliest graphics known to anthropologists studying prehistoric periods are cave paintings and markings on boulders, bone, ivory, and antlers, which were created during the Upper Palaeolithic period from 40,000 - 10,000 B.C. or earlier. Many of these were found to record astronomical, seasonal, and chronological details. Some of the earliest graphics and drawings known to the modern world, from almost 6,000 years ago, are that of engraved stone tablets and ceramic cylinder seals, marking the beginning of the historic periods and the keeping of records for accounting and inventory purposes. Records from Egypt predate these and papyrus was used by the Egyptians as a material on which to plan the building of pyramids; they also used slabs of limestone and wood. From 600-250 BC, the Greeks played a major role in geometry. They used graphics to represent their mathematical theories such as the Circle Theorem and the Pythagorean theorem.

Drawing

 

Drawing generally involves making marks on a surface by applying pressure from a tool, or moving a tool across a surface. Common tools are graphite pencils, pen and ink, inked brushes, wax color pencils, crayons, charcoals, pastels, and markers. Digital tools which simulate the effects of these are also used. The main techniques used in drawing are line drawing, hatching, crosshatching, random hatching, scribbling, stippling, blending, and shading.

Drawing is generally considered distinct from painting, in which colored pigments are suspended in a liquid medium and are usually applied with a brush. Notable great drawers include Sir Michael Ash and Leonardo da Vinci.

PAINTING

 

In the Middle Ages, paintings were very distorted; for example, people on a castle wall appeared disproportionately large because they were the painting's focus. Later, realism and perspective became more important, characterized by the technique of looking through a wire mesh to precisely copy dimensions onto a corresponding grid drawn on canvas. During the Renaissance, artists took a non-mathematical approach to drawing. Giotto di Bondone and Duccio di Buoninsegna made great advancements in perspective drawing, using symmetry, converging lines and foreshortening. Many renaissance painters also used fresco - painting directly onto walls - a technique which finds its prototype in cave and rock art. Graphics of this kind, from 30-40,000 years ago, have survived in Australia and France. A modern day equivalent is the mural.

PRINTMAKING

 

Printmaking originated in China after paper was invented (about A.D. 105). Relief printing first flourished in Europe in the 15th century, when the process of papermaking was imported from the East. Since that time, relief printing has been augmented by the various techniques described earlier, and printmaking has continued to be practiced as one of the fine arts.

LINE ART

 

Line art is any image that consists of distinct straight and curved lines placed against a (usually plain) background, without gradations in shade (darkness) or hue (color) to represent two-dimensional or three-dimensional objects. Line art is usually monochromatic, although lines may be of different colors.

 

ETCHING

is an intaglio method of printmaking in which the image is incised into the surface of a metal plate using an acid. The acid eats the metal, leaving behind roughened areas, or, if the surface exposed to the acid is very thin, burning a line into the plate. The process is believed to have been invented by Daniel Hopfer (circa 1470-1536) of Augsburg, Germany, who decorated armour in this way, and applied the method to printmaking.

Etching is also a preliminary step in lithography. The Dutch artist M.C. Escher mastered the technique to perfection, specialising in etchings of impossible structures and oriental interlocking designs.

Etching is also used in the manufacturing of printed circuit boards and semiconductor devices.

Illustration

 

An illustration of a character from a story; also, an illustration of illustrationsAn illustration is a visualisation such as a drawing, painting, photograph or other work of art that stresses subject more than form. The aim of an illustration is to elucidate or decorate a story, poem or piece of textual information (such as a newspaper article), traditionally by providing a visual representation of something described in the text. The editorial cartoon, also known as a political cartoon, is an illustration containing a political or social message. Illustrations can be used to display a wide range of subject matter and serve a variety of functions, such as:

  • giving faces to characters in a story
  • displaying a number of examples of an item described in an academic textbook (e.g. A Typology)
  • visualising step-wise sets of instructions in a technical manual
  • communicating subtle thematic tone in a narrative
  • linking brands to the ideas of human expression, individuality and creativity
  • making a reader laugh or smile
  • for fun (to make laugh) funny

Graphs

 

A graph or chart is a type of information graphic that represents tabular, numeric data. Charts are often used to make it easier to understand large quantities of data and the relationships between different parts of the data.

Diagrams:- A diagram is a simplified and structured visual representation of concepts, ideas, constructions, relations, statistical data, etc, used to visualize and clarify the topic.

Symbols

A symbol, in its basic sense, is a conventional representation of a concept or quantity; i.e., an idea, object, concept, quality, etc. In more psychological and philosophical terms, all concepts are symbolic in nature, and representations for these concepts are simply token artifacts that are allegorical to (but do not directly codify) a symbolic meaning, or symbolism.

                                                Geometric design

Maps

A map is a simplified depiction of a space, a navigational aid which highlights relations between objects within that space. Usually, a map is a two-dimensional, geometrically accurate representation of a three-dimensional space. One of the first 'modern' maps was made by Waldseemüller.

Photography

One difference between photography and other forms of graphics is that a photographer, in principle, just records a single moment in reality, with seemingly no interpretation. However, a photographer can choose the field of view and angle, and may also use other techniques, such as various lenses to distort the view or filters to change the colours. In recent times, digital photography has opened the way to an infinite number of fast, but strong, manipulations. Even in the early days of photography, there was controversy over photographs of enacted scenes that were presented as 'real life' (especially in war photography, where it can be very difficult to record the original events). Shifting the viewer's eyes ever so slightly with simple pinpricks in the negative could have a dramatic effect.

The choice of the field of view can have a strong effect, effectively 'censoring out' other parts of the scene, accomplished by cropping them out or simply not including them in the photograph. This even touches on the philosophical question of what reality is. The human brain processes information based on previous experience, making us see what we want to see or what we were taught to see. Photography does the same, although the photographer interprets the scene for their viewer.

Engineering drawings

 

An engineering drawing is a type of drawing that is technical in nature, used to fully and clearly define requirements for engineered items. It is usually created in accordance with standardized conventions for layout, nomenclature, interpretation, appearance (such as typefaces and line styles), size, etc.

Computer graphics

 

A graphic from the video game OpenArena.Main article: Computer graphics

            There are two types of computer graphics: raster graphics, where each pixel is separately defined (as in a digital photograph), and vector graphics, where mathematical formulas are used to draw lines and shapes, which are then interpreted at the viewer's end to produce the graphic. Using vectors results in infinitely sharp graphics and often smaller files, but, when complex, vectors take time to render and may have larger filesizes than a raster equivalent.

            In 1950, the first computer-driven display was attached to MIT's Whirlwind I computer to generate simple pictures. This was followed by MIT's TX-0 and TX-2, interactive computing which increased interest in computer graphics during the late 1950s. In 1962, Ivan Sutherland invented Sketchpad, an innovative program that influenced alternative forms of interaction with computers.

            In the mid-1960s, large computer graphics research projects were begun at MIT, General Motors, Bell Labs, and Lockheed Corporation. D. T. Ross of MIT developed an advanced compiler language for graphics programming. S.A.Coons, also at MIT, and J. C. Ferguson at Boeing, began work in sculptured surfaces. GM developed their DAC-1 system, and other companies, such as Douglas, Lockheed, and McDonnell, also made significant developments. In 1968, ray tracing was invented by Appel.

During the late 1970s, personal computers became more powerful, capable of drawing both basic and complex shapes and designs. In the 1980s, artists and graphic designers began to see the personal computer, particularly the Commodore Amiga and Macintosh, as a serious design tool, one that could save time and draw more accurately than other methods. 3D computer graphics became possible in the late 1980s with the powerful SGI computers, which were later used to create some of the first fully computer-generated short films at Pixar. The Macintosh remains one of the most popular tools for computer graphics in graphic design studios and businesses.

            Modern computer systems, dating from the 1980s and onwards, often use a graphical user interface (GUI) to present data and information with symbols, icons and pictures, rather than text. Graphics are one of the five key elements of multimedia technology.

            3D graphics became more popular in the 1990s in gaming, multimedia and animation. In 1996, Quake, one of the first fully 3D games, was released. In 1995, Toy Story, the first full-length computer-generated animation film, was released in cinemas worldwide. Since then, computer graphics have become more accurate and detailed, due to more advanced computers and better 3D modelling software applications, such as Cinema 4D.

            Another use of computer graphics is screensavers, originally intended to preventing the layout of much-used GUIs from 'burning into' the computer screen. They have since evolved into true pieces of art, their practical purpose obsolete; modern screens are not susceptible to such 'burning'.

Web graphics

In the 1990s, Internet speeds increased, and Internet browsers capable of viewing images were released, the first being Mosaic. Websites began to use the GIF format to display small graphics, such as banners, advertisements and navigation buttons, on web pages. Modern web browsers can now display JPEG, PNG and increasingly, SVG images in addition to GIFs on web pages. Plugins expand the web browser functions to display animated, interactive and 3-D graphics contained within file formats such as SWF and X3D.

            Most modern web graphics are made with either Adobe Photoshop, the GIMP, or Corel Paint Shop Pro. However, users of Microsoft Windows mostly have MS Paint, which many find to be lacking in features.

            Numerous websites have been created to host communities for web graphics artists. A growing number of people use Photoshop, GIMP and Paint Shop Pro to create internet forum signatures - generally appearing after a user's post - and other digital artwork, such as photo manipulations and large graphics.

Use

            Graphics are visual elements often used to point readers and viewers to particular information. They are also used to supplement text in an effort to aid readers in their understanding of a particular concept or make the concept more clear or interesting. Popular magazines, such as TIME, Wired and Newsweek, usually contain graphic material in abundance to attract readers, unlike the majority of scholarly journals. In computing, they are used to create a graphical interface for the user; and graphics are one of the five key elements of multimedia technology. Graphics are among the primary ways of advertising the sale of goods or services.

Business

            Graphics are commonly used in business and economics to create financial charts and tables. The term Business Graphics came into use in the late 1970s, when personal computers became capable of drawing graphs and charts instead of using a tabular format. Business Graphics can be used to highlight changes over a period of time.

Advertising

            Advertising is one of the most profitable uses of graphics; artists often do advertising work or take advertising potential into account when creating art, to increase the chances of selling the artwork.

Political

            The use of graphics for overtly political purposes - cartoons, graffiti, poster art, flag design, etc - is a centuries old practice which thrives today in every part of the world. The Northern Irish murals are one such example.

Education

            Graphics are heavily used in textbooks, especially those concerning subjects such as geography, science and math, in order to illustrate theories and concepts, such as the human anatomy. Diagrams are also used to label photographs and pictures.

            Educational animation is an important emerging field of graphics. Animated graphics have obvious advantages over static graphics when explaining subject matter that changes over time.

            The Oxford Illustrated Dictionary uses graphics and technical illustrations to make reading material more interesting and easier to understand. In an encyclopedia, graphics are used to illustrate concepts and show examples of the particular topic being discussed.

            In order for a graphic to function effectively as an educational aid, the learner must be able to interpret it successfully. This interpretative capacity is one aspect of graphicacy.

Film and animation

            Computer graphics are often used in the majority of new feature films, especially those with a large budget. Films that heavily use computer graphics include the Harry Potter films, Spider-Man and War of the Worlds.

Graphics education

            The majority of schools, colleges and universities around the world educate students on the subject of graphics and art.

            The subject is taught in a broad variety of ways, each course teaching its own distinctive balance of craft skills and intellectual response to the client's needs.

            Some graphics courses prioritize traditional craft skills - drawing, printmaking and typography - over modern craft skills. Other courses may place an emphasis on teaching digital craft skills. Stilllother courses may downplay the crafts entirely, concentrating on training students to generate novel intellectual responses that engage with the brief. Despite these apparent differences in training and curriculum, the staff and students on any of these courses will generally consider themselves to be graphic designers.

            The typical pedagogy of a graphic design (or graphic communication, visual communication, graphic arts or any number of synonymous course titles) will be broadly based on the teaching models developed in the Bauhaus school in Germany or VKhUTEMAS in Soviet Russia. The teaching model will tend to expose students to a variety of craft skills (currently everything from drawing to motion capture), combined with an effort to engage the student with the world of visual culture.

            Web design is a process of conceptualization, planning, modeling, and execution of electronic media delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface (GUI).

            The intent of web design is to create a web site -- a collection of electronic files that reside on a web server/servers and present content and interactive features/interfaces to the end user in form of Web pages once requested. Such elements as text, bit-mapped images (GIFs, JPEGs, PNGs), forms can be placed on the page using HTML/XHTML/XML tags. Displaying more complex media (vector graphics, animations, videos, sounds) requires plug-ins such as Flash, QuickTime, Java run-time environment, etc. Plug-ins are also embedded into web page by using HTML/XHTML tags.

            Improvements in browsers' compliance with W3C standards prompted a widespread acceptance and usage of XHTML/XML in conjunction with Cascading Style Sheets (CSS) to position and manipulate web page elements and objects. Latest standards and proposals aim at leading to browsers' ability to deliver a wide variety of media and accessibility options to the client possibly without employing plug-ins.

            Typically web pages are classified as static or dynamic. Static pages don’t change content and layout with every request unless a human (web master/programmer) manually updates the page.

            Dynamic pages adapt their content and/or appearance depending on end-user’s input/interaction or changes in the computing environment (user, time, database modifications, etc.) Content can be changed on the client side (end-user's computer) by using client-side scripting languages (JavaScript, JScript, Actionscript, etc.) to alter DOM elements (DHTML). Dynamic content is often compiled on the server utilizing server-side scripting languages (Perl, PHP, ASP, JSP, ColdFusion, etc.). Both approaches are usually used in complex applications.

 

WEB SITE DESIGN

A Web site is a collection of information about a particular topic or subject. Designing a website is defined as the arrangement and creation of Web pages that in turn make up a website. A Web page consists of information for which the Web site is developed. A website might be compared to a book, where each page of the book is a web page.

            There are many aspects (design concerns) in this process, and due to the rapid development of the Internet, new aspects may emerge. For typical commercial Web sites, the basic aspects of design are:

            The content: The substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with.

The usability: The site should be user-friendly, with the interface and navigation simple and reliable.

            The appearance: The graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant.

            The visibility: The site must also be easy to find via most, if not all, major search engines and advertisement media.

A Web site typically consists of text and images. The first page of a website is known as the Home page or Index. Some websites use what is commonly called a Splash Page. Splash pages might include a welcome message, language/region selection, or disclaimer. Each web page within a Web site is an HTML file which has its own URL. After each Web page is created, they are typically linked together using a navigation menu composed of hyperlinks. Faster browsing speeds have led to shorter attention spans and more demanding online visitors and this has resulted in less use of Splash Pages, particularly where commercial websites are concerned.

            Once a Web site is completed, it must be published or uploaded in order to be viewable to the public over the internet. This may be done using an FTP client. Once published, the Web master may use a variety of techniques to increase the traffic, or hits, that the website receives. This may include submitting the Web site to a search engine such as Google or Yahoo, exchanging links with other Web sites, creating affiliations with similar Web sites, etc.

Multidisciplinary requirements

 

Web site design crosses multiple disciplines of information systems, information technology and communication design. The website is an information system whose components are sometimes classified as front-end and back-end. The observable content (e.g page layout, user interface, graphics, text, audio) is known as the front-end. The back-end comprises the organization and efficiency of the source code, invisible scripted functions, and the server-side components that process the output from the front-end. Depending on the size of a Web development project, it may be carried out by a multi-skilled individual (sometimes called a web master), or a project manager may oversee collaborative design between group members with specialized skills.

Issues

            As in most collaborative designs, there are conflicts between differing goals and methods of web site designs. These are a few of the ongoing ones.

Lack of collaboration in design

            In the early stages of the web, there wasn't as much collaboration between web designs and larger advertising campaigns, customer transactions, social networking, intranets and extranets as there is now. Web pages were mainly static online brochures disconnected from the larger projects.

            Many web pages are still disconnected from larger projects. Special design considerations are necessary for use within these larger projects. These design considerations are often overlooked, especially in cases where there is a lack of leadership, understanding or concern for the larger project to facilitate collaboration. This often results in unhealthy competition or compromise between departments, and less than optimal use of web pages.

 

Liquid versus fixed layouts

            On the web the designer has no control over several factors, including the size of the browser window, the web browser used, the input devices used (mouse, touch screen, voice command, text, cell phone number pad, etc.) and the size and characteristics of available fonts.

            Some designers choose to control the appearance of the elements on the screen by using specific width designations. This control may be achieved through the use of a HTML table-based design, or through the use of CSS. Whenever the text, images, and layout of a design do not change as the browser changes, this is referred to as a fixed width design. Proponents of fixed width design prefer the control over the look and feel of the site and the precision placement of objects on the page. Other designers choose a liquid design. A liquid design is one, like Wikipedia, where the design moves to flow content into the whole screen, or a portion of the screen, no matter what the size of the browser window.

            Proponents of liquid design prefer to use all the screen space available. Liquid design can be achieved through the use of CSS, by avoiding styling the page altogether, or by using HTML tables set to a percentage of the page. Both liquid and fixed design developers must make decisions about how the design should degrade on higher and lower screen resolutions. Sometimes the pragmatic choice is made to flow the design between a minimum and a maximum width. This allows the designer to avoid coding for the browser choices making up the long tail, while still using all available screen space.

            Similar to liquid layout is the optional fit to window feature with Adobe Flash content. This is a fixed layout that optimally scales the content of the page without changing the arrangement or text wrapping when the browser is resized.

 

Flash

Adobe Flash (formerly Macromedia Flash) is a proprietary, robust graphics animation/application development program used to create and deliver dynamic content, media (such as sound and video), and interactive applications over the web via the browser.

            Flash is not a standard produced by a vendor-neutral standards organization like most of the core protocols and formats on the Internet. Flash is much more restrictive than the open HTML format, though, requiring a proprietary plugin to be seen, and it does not integrate with most web browser UI features like the "Back" button unless a hyperlink is programmed to link a new html page from the Flash file, in which case the animation of the previous page would reset. However, those restrictions may be irrelevant depending on the goals of the web site design.

            According to a study [2], 98% of US Web users have the Flash Player installed [3], with 45%-56%[4] (depending on region) having the latest version. Numbers vary depending on the detection scheme and research demographics[5].

            Many graphic artists use Flash because it gives them exact control over every part of the design, and anything can be animated and generally "jazzed up". Some application designers enjoy Flash because it lets them create applications that don't have to be refreshed or go to a new web page every time an action occurs. Flash can use embedded fonts instead of the standard fonts installed on most computers. There are many sites which forego HTML entirely for Flash. Other sites may use Flash content combined with HTML as conservatively as gifs or jpegs would be used, but with smaller vector file sizes and the option of faster loading animations. Flash may also be used to protect content from unauthorized duplication or searching.

            Flash detractors claim that Flash websites tend to be poorly designed, and often use confusing and non-standard user-interfaces. Up until recently, search engines have been unable to index Flash objects, which has prevented sites from having their contents easily found. This is because many search engine crawlers rely on text to index websites. It is possible to specify alternate content to be displayed for browsers that do not support Flash. Using alternate content also helps search engines to understand the page, and can result in much better visibility for the page. However, the vast majority of Flash websites are not disability accessible, or Section 508 compliant. An additional issue is that sites which commonly use alternate content for search engines to their human visitors are usually judged to be spamming search engines and are automatically banned.

            The most recent incarnation of Flash's scripting language (called "ActionScript", which is an ECMA language similar to JavaScript) incorporates long-awaited usability features, such as respecting the browser's font size and allowing blind users to use screen readers. Actionscript 2.0 is an Object-Oriented language, allowing the use of CSS, XML, and the design of class-based web applications.

CSS versus tables

            For more details on this topic, see Tableless web design. Back when Netscape Navigator 4 dominated the browser market, the popular solution available for designers to lay out a Web page was by using tables. Often even simple designs for a page would require dozens of tables nested in each other. Many web templates in Dreamweaver and other WYSIWYG editors still use this technique today. Navigator 4 didn't support CSS to a useful degree, so it simply wasn't used.

            After the browser wars were over, and Internet Explorer dominated the market, designers started turning toward CSS as an alternate means of laying out their pages. CSS proponents say that tables should be used only for tabular data, not for layout. Using CSS instead of tables also returns HTML to a semantic markup, which helps bots and search engines understand what's going on in a web page. All modern Web browsers support CSS with different degrees of limitations.

            However, one of the main points against CSS is that by relying on it exclusively, control is essentially relinquished as each browser has its own quirks which result in a slightly different page display. This is especially a problem as not every browser supports the same subset of CSS rules. For designers who are used to table-based layouts, developing Web sites in CSS often becomes a matter of trying to replicate what can be done with tables, leading some to find CSS design rather cumbersome due to lack of familiarity. For example, at one time it was rather difficult to produce certain design elements, such as vertical positioning, and full-length footers in a design using absolute positions. With the abundance of CSS resources available online today, though, designing with reasonable adherence to standards involves little more than applying CSS 2.1 or CSS 3 to properly structured markup.

            These days most modern browsers have solved most of these quirks in CSS rendering and this has made many different CSS layouts possible. However, some people continue to use old browsers, and designers need to keep this in mind, and allow for graceful degrading of pages in older browsers. Most notable among these old browsers are Internet Explorer 5 and 5.5, which, according to some web designers, are becoming the new Netscape Navigator 4 — a block that holds the World Wide Web back from converting to CSS design. However, the W3 Consortium has made CSS in combination with XHTML the standard for web design.

How it Looks vs. How it Works

Some web developers have a graphic arts background and may pay more attention to how a page looks than considering other issues such as how visitors are going to find the page via a search engine. Some might rely more on advertising than search engines to attract visitors to the site. On the other side of the issue, search engine optimization consultants (SEOs) obsess about how well a web site works technically and textually: how much traffic it generates via search engines, and how many sales it makes, assuming looks don't contribute to the sales. As a result, the designers and SEOs often end up in disputes where the designer wants more 'pretty' graphics, and the SEO wants lots of 'ugly' keyword-rich text, bullet lists, and text links. One could argue that this is a false dichotomy due to the possibility that a web design may integrate the two disciplines for a collaborative and synergistic solution. Because some graphics serve communication purposes in addition to aesthetics, how well a site works may depend on the graphic designer's visual communication ideas as well as the SEO considerations.

            Another problem when using lots of graphics on a page is that download times can be greatly lengthened, often irritating the user. This has become less of a problem as the internet has evolved with high-speed internet and the use of vector graphics. This is an engineering challenge to increase bandwidth in addition to an artistic challenge to minimize graphics and graphic file sizes. This is an on-going challenge as increased bandwidth invites increased amounts of content.

 

ACCESSIBLE WEB DESIGN

Accessible Web design is the art of creating webpages that are accessible to everyone, using any device. It is especially important so that people with disabilities - whether due to accident, disease or old age - can access the information in Web pages and be able to navigate through the website.

            To be accessible, web pages and sites must conform to certain accessibility principles. These can be grouped into the following main areas:

  • use semantic markup that provides a meaningful structure to the document (i.e. web page)
  • Semantic markup also refers to semantically organizing the web page structure and publishing web services description accordingly so that they can be recognized by other web services on different web pages. Standards for semantic web are set by IEEE
  • use a valid markup language that conforms to a published DTD or Schema
  • provide text equivalents for any non-text components (e.g. images, multimedia)
  • use hyperlinks that make sense when read out of context. (e.g. avoid "Click Here.")
  • don't use frames
  • use CSS rather than HTML Tables for layout.
  • author the page so that when the source code is read line-by-line by user agents (such as a screen readers) it remains intelligible. (Using tables for design will often result in information that is not.)

However, W3C permits an exception where tables for layout either make sense when linearized or an alternate version (perhaps linearized) is made available.

Website Planning

Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will be developed are extremely important.

 

Purpose

It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed. Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place. Also, goal-setting practices and measurable objectives should be identified to track the progress of the site and determine success.

 

Audience

Defining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website – the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do/feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need/use the content, a list of characteristics common to the users such as:

Audience Characteristics

Information Preferences

Computer Specifications

Web Experience

 

Content

Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience's needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed.

It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step is to organize the basic information structure by categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site's content ensures that the wants/needs of the target audience and the purpose of the site will be fulfilled.

 

Compatibility and restrictions

Because of the market share of modern browsers (depending on your target market), the compatibility of your website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be limited to the use of valid XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024x768 display resolution. This is because Internet Explorer is not fully W3C standards compliant with the modularity of XHTML 1.1 and the majority of CSS beyond 1. A target market of more alternative browser (e.g. Firefox and Opera) users allow for more W3C compliance and thus a greater range of options for a web designer.

 

Another restriction on webpage design is the use of different Image file formats. The majority of users can support GIF, JPEG, and PNG (with restrictions). Again Internet Explorer is the major restriction here, not fully supporting PNG's advanced transparency features, resulting in the GIF format still being the most widely used graphic file format for transparent images.

            Many website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain a website will work on a particular platform is to test it on that platform.

 

Planning documentation

Documentation is used to visually plan the site while taking into account the purpose, audience and content, to design the site structure, content and interactions that are most suitable for the website. Documentation may be considered a prototype for the website – a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website.

            First, the content is categorized and the information structure is formulated. The information structure is used to develop a document or visual diagram called a site map. This creates a visual of how the web pages will be interconnected, which helps in deciding what content will be placed on what pages. There are three main ways of diagramming the website structure:

 

Linear Website Diagrams will allow the users to move in a predetermined sequence;

Hierarchical structures (of Tree Design Website Diagrams) provide more than one path for users to take to their destination;

Branch Design Website Diagrams allow for many interconnections between web pages such as hyperlinks within sentences.

            In addition to planning the structure, the layout and interface of individual pages may be planned using a storyboard. In the process of storyboarding, a record is made of the description, purpose and title of each page in the site, and they are linked together according to the most effective and logical diagram type. Depending on the number of pages required for the website, documentation methods may include using pieces of paper and drawing lines to connect them, or creating the storyboard using computer software.

            Some or all of the individual pages may be designed in greater detail as a website wireframe, a mock up model or comprehensive layout of what the page will actually look like. This is often done in a graphic program, or layout design program. The wireframe has no working functionality, only planning.

 

IMAGE MAPS

In HTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

 

Implementation of image maps

It is possible to create image maps by hand, using a text editor, however doing so requires that the web designer knows how to code HTML and also requires them to know the coordinates of the areas that they wish to place over the image. As a result, most image maps coded by hand are simple polygons.

  • Because creating image maps in a text editor requires much time and effort, there are many applications that allow the web designer to quickly and easily create image maps much like they would create shapes in a Vector graphics editor. Examples of these are Adobe’s Dreamweaver and KImageMapEditor (for KDE).
  • Rollover effects

Image maps can be implemented so that the user is given a visual indication of what can be clicked on. This can be an indication of the position of all the hot spots, or can be a rollover indication of the currently active hot spot. This functionality cannot be implemented using pure HTML, but can be implemented when a Clickable image is built using a programming environment such as XHTML with Cascading Style Sheets, Javascript and Java.

Rollover effects can be implemented by writing Javascript code to swap out the entire image with one that has that particular area highlighted, but this technique uses a considerable amount of bandwidth.

When using Photoshop areas can be made clickable by layering them via a copy. You can then select the original background layer and drop the brightness down to make the clickable areas stand out. Alternately, you can break the image itself into separate images with their own events.

Examples

•           Use of CSS and Javascript

•           Use of XHTML and CSS

•           Use of XHTML and CSS to display additional data

•           Use of Javascript onMouseOver

•           Use of Java Applet

•           Use of map file called from HTML

•           Use of Javascript onMouseOver image swaps

There are two types of image maps:

•           Client-side. When a user activates a region of a client-side image map with a mouse, the pixel coordinates are interpreted by the user agent. The user agent selects a link that was specified for the activated region and follows it.

•           Server-side. When a user activates a region of a server-side image map with a mouse, the pixel coordinates of the click are sent to the server-side agent specified by the href attribute of the A element. The server-side agent interprets the coordinates and performs some action.

Client-side image maps are preferred over server-side image maps for at least two reasons: they are accessible to people browsing with non-graphical user agents and they offer immediate feedback as to whether or not the pointer is over an active region.

 

Client-side image map examples

In the following example, we create a client-side image map for the OBJECT element. We do not want to render the image map's contents when the OBJECT is rendered, so we "hide" the MAP element within the OBJECT element's content. Consequently, the MAP element's contents will only be rendered if the OBJECT cannot be rendered.

<HTML>

   <HEAD>

      <TITLE>The cool site!</TITLE>

   </HEAD>

   <BODY>

     <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">

     <MAP name="map1">

      <P>Navigate the site:

       <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |

       <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |

       <A href="search.html" shape="circle" coords="184,200,60">Search</A> |

       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>

     </MAP>

     </OBJECT>

   </BODY>

</HTML>

 

Server-side image maps

Server-side image maps may be interesting in cases where the image map is too complicated for a client-side image map.

It is only possible to define a server-side image map for the IMG and INPUT elements. In the case of IMG, the IMG must be inside an A element and the boolean attribute ismap ([CI]) must be set. In the case of INPUT, the INPUT must be of type "image".

When the user activates the link by clicking on the image, the screen coordinates are sent directly to the server where the document resides. Screen coordinates are expressed as screen pixel values relative to the image. For normative information about the definition of a pixel and how to scale it, please consult [CSS1].

In the following example, the active region defines a server-side link. Thus, a click anywhere on the image will cause the click's coordinates to be sent to the server.

<P><A href="http://www.acme.com/cgi-bin/competition">

        <IMG src="game.gif" ismap alt="target"></A>

 

 

Multimedia

Multimedia presentations may be viewed in person on stage, projected, transmitted, or played locally with a media player. A broadcast may be a live or recorded multimedia presentation. Broadcasts and recordings can be either analog or digital electronic media technology. Digital online multimedia may be downloaded or streamed. Streaming multimedia may be live or on-demand.

Multimedia games and simulations may be used in a physical environment with special effects, with multiple users in an online network, or locally with an offline computer, game system, or simulator.

The various formats of technological or digital multimedia may be intended to enhance the users experience, for example to make it easier and faster to convey information. Or in entertainment or art, to transcend everyday experience.

A lasershow is a live multimedia performance.

Enhanced levels of interactivity are made possible by combining multiple forms of media content. Online multimedia is increasingly becoming object-oriented and data-driven, enabling applications with collaborative end-user innovation and personalization on multiple forms of content over time. Examples of these range from multiple forms of content on web sites like photo galleries with both images (pictures) and title (text) user-updated, to simulations whose co-efficients, events, illustrations, animations or videos are modifiable, allowing the multimedia "experience" to be altered without reprogramming. In addition to seeing and hearing, Haptic technology enables virtual objects to be felt. Emerging technology involving illusions of taste and smell may also enhance the multimedia experience.

 

Usage

VVO Multimedia-Terminal in Dresden WTC (Germany)

A presentation using Powerpoint. Corporate presentations may combine all forms of media

Virtual reality uses multimedia content. Applications and delivery platforms of multimedia are virtually limitless.

Multimedia finds its application in various areas including, but not limited to, advertisements, art, education, entertainment, engineering, medicine, mathematics, business, scientific research and spatial temporal applications. Below are the several examples as follows:

 

Professional

Creative industries

            Creative industries use multimedia for a variety of purposes ranging from fine arts, to entertainment, to commercial art, to journalism, to media and software services provided for any of the industries listed below. An individual multimedia designer may cover the spectrum throughout their career. Request for their skills range from technical, to analytical, to creative.

Commercial

            Much of the electronic old and new media utilized by commercial artists is multimedia. Exciting presentations are used to grab and keep attention in advertising. Industrial, business to business, and interoffice communications are often developed by creative services firms for advanced multimedia presentations beyond simple slide shows to sell ideas or liven-up training. Commercial multimedia developers may be hired to design for governmental services and nonprofit services applications as well.

Entertainment and fine arts

            In addition, multimedia is heavily used in the entertainment industry, especially to develop special effects in movies and animations. Multimedia games are a popular pastime and are software programs available either as CD-ROMs or online. Some video games also use multimedia features.

Multimedia applications that allow users to actively participate instead of just sitting by as passive recipients of information are called Interactive Multimedia.

In the Arts there are multimedia artists, whose minds are able to blend techniques using different media that in some way incorporates interaction with the viewer. One of the most relevant could be Peter Greenaway who is melding Cinema with Opera and all sorts of digital media. Another approach entails the creation of multimedia that can be displayed in a traditional fine arts arena, such as an art gallery. For the most part these artists are using materials that will not hold up over time.

Education

            In Education, multimedia is used to produce computer-based training courses (popularly called CBTs) and reference books like encyclopaedia and almanacs. A CBT lets the user go through a series of presentations, text about a particular topic, and associated illustrations in various information formats. Edutainment is an informal term used to describe combining education with entertainment, especially multimedia entertainment.

Engineering

            Software engineers may use multimedia in Computer Simulations for anything from entertainment to training such as military or industrial training. Multimedia for software interfaces are often done as a collaboration between creative professionals and software engineers.

Industry

            In the Industrial sector, multimedia is used as a way to help present information to shareholders, superiors and coworkers. Multimedia is also helpful for providing employee training, advertising and selling products all over the world via virtually unlimited web-based technologies.

Mathematical and Scientific Research

            In Mathematical and Scientific Research, multimedia are mainly used for modelling and simulation. For example, a scientist can look at a molecular model of a particular substance and manipulate it to arrive at a new substance. Representative research can be found in journals such as the Journal of Multimedia.

Medicine

            In Medicine, doctors can get trained by looking at a virtual surgery or they can simulate how the human body is affected by diseases spread by viruses and bacteria and then develop techniques to prevent it.

Miscellaneous

            In Europe, the reference organization for Multimedia industry is the European Multimedia Associations Convention (EMMAC).

An observatory for jobs in the multimedia industry provides surveys and analysis about multimedia and ITC jobs.

 

 

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)