OBJECTIVES

Learn file names, formats, and applicationsDiscuss tools used in designing Web sitesIdentify 5 general skills in designing Web

sites

FILE NAMES

Determines what type of application will be executed

resume.doc word

resume.txt notepad

resume.htm IE, Netscape

resume.html IE, Netscape

TOOLS

Computer – 486 up to latest modelModem – Internet accessBrowser – Application to view Web sitesNotepad – Application to create plain text

documentsFrontPage – Application designed to create Web

sitesPhotoshop – Application to create graphic images

WEB DESIGN SKILLS

Copywriter Graphics designerStructural architect (site hierarchy)Technology (HTML, CSS)Creativity (interactive site, good user

experience, good first impression)

WEEK 2

Identify common traits of good Web sitesBasic terminologies such as Web hosting

and domain namesBasic HTML structure and codeColor scheme and hex representation

TERMINOLOGY

Internet – The physical infrastructure such as computers and telecom cables

Web – The information that flows on the Internet. Information can be found on Web sites connected to each other via hyperlinks

ISP – Internet Service Provider, companies that connects you to the Internet

INTERNET BACKBO NE

M ICRO SO FTAO L

EARTHLINK

AT&TUUNET

SPRINT

A - BO NE(Japan)

M oscom Pacific

In focom

Philipp ines InterneteXchange, or PhIX

64Kbps

ASIA INTERNET BACKBO NE

USA INTERNET BACKBO NE

ISP

Computer

ACCESS FRO M HOME T O ISPTelcom Com panies Dial up (56Kbps) DSL (256Kbps) W ireless (9.6Kbps)

Broadcast Com panies Cable Internet (8Mbps)

E1 (2Mbps)

Satellite

T3 (45Mbps)

1.7G bps

E1 (2Mbps)

China

Thailand

Malaysia

Singapore

Indonesia

6M bps

4M bps

51M bps

4M bps

2M bps

HongKong

TaiwanKorea

1.5Mbps1.5Mbps

IN TE R N E T A C C E S S

TERMINOLOGY

Web hosting – Servers on the Internet, whose purpose is to “serve” Web pages

Domain names – Words that are used in place of TCP/IP address– www.webphil.com– www.webphil.net– www.webphil.org– www.webphil.com.ph

HTML

HTML – HyperText Markup LanguageLanguage used to create Web pagesWritten in plain EnglishTags, elements, and attributes

HTML (Document Structure)

HTML (Line Structure)

COLORS

RGB – Red, Green, Blue

Red #FF0000

Green #00FF00

Blue #0000FF

White #FFFFFF

COLOR CHART

WEEK 5

Basic discussion on advanced technologies such as CGI, ASP, Java, JavaScript, and Flash

Discuss static vs. dynamic Web sitesLearn the concept of Cascading Style

Sheets

CGI

Common Gateway InterfaceCGI scripts are used to make interactive

Web sites such as formsScripts can be created using Visual basic,

C, or PerlResource intensive, may overload Web

servers

ASP

Active Server PagesAlternative to CGI scripting without the

performance degradation of CGIASP scripts are created using VBScript or

Jscript, enclosed in <%…%> symbolsAllows Web sites to be dynamicWorks only on Microsoft’s IIS Web server

software

JAVA

Developed by Sun MicrosystemsPrograms that are hardware and operating

system independentWeb browsers download Java Applets and

is processed by the PCClocks, calculators, and games can be

inserted on a Web page

JAVASCRIPT

Developed by NetscapeScripts are inserted into the HTML codeAn interpreted language, executed line by

line in real timeDetecting browser version, pop up

windows, digital clock

FLASH

Developed by MacromediaUsed to create animations and special

effectsWorks only on browsers that are

compatible with Flash

STATIC VS. DYNAMIC

Static Web sites display information that is hard coded into the HTML of a Web page

Dynamic Web sites display contents taken from a database

Different information can be displayed on a Web page without altering the HTML code

Microsoft’s Active Server Page

CSS

Cascading Style SheetsA Web standard that allows the separation

of structure from visual presentationHTML creates structured documents (e.g.

paragraphs, headings)CSS improves the visual presentation (e.g.

colors, font types, positioning)CSS adds “style” to an HTML document

WEEK 8

Overview of graphic file formatsHow to get graphic imagesDemonstration of a software used in

creating graphic images

GRAPHIC FILE FORMATS

BitmapJPEGGIFPNG

GRAPHIC FILE FORMATS

BITMAP– Covers the entire class of graphics that

stores image information as pixels in a grid.

– JPEG, GIF, and BMP are bitmaps

GRAPHIC FILE FORMATS

JPEG – Joint Photographic Experts Group– Compression scheme allows images to be

100 times smaller in file size– Higher the compression, the lower the

quality of the image– Generally used for photos

GRAPHIC FILE FORMATS

14,978 bytes 3,380 bytes 2,570 bytes

GRAPHIC FILE FORMATS

GIF– Graphic Interchange Format– Limited to 256 colors– Generally used for images that have

diagrams and text– Compression is achieved by reducing the

amount of colors in an image– Can have a transparent background

GRAPHIC FILE FORMATS

302 bytes 416 bytes 419 bytes

302 bytes 473 bytes 608 bytes

GRAPHIC FILE FORMATS

PNG– Portable Network Graphics– Developed to replace GIF– Generally smaller in file size– Not fully supported by browsers– Does not support animation

GETTING IMAGES

ScanningDigital camerasPhoto CDGraphic designerDownload or buy from Web sitesCreate your own graphics

WEEK 9

Discuss Mid Term resultsDemo how to create animated GIFAnalyze results of homework 1 and 2Analyze visual and technical difference of Web

award winners vs. popular Web sitesAnalyze Internet surveys (population, screen

resolution, browser types)Companies that offer template based Web sitesTopic: Discussion on home based Internet business

HOMEWORK 1

Content – informative, up to date information, email, downloads

Navigation – search capability, easy to navigate, information well organized

Visual design – high quality images, colorful Functional – loads quickly, browser

compatibility, live links

HOMEWORK 1

Males Females

Informative

Up to date information

Search capability

Easy to navigate

Email service

Fast response time

Information well organized

Freeware and downloads

Links to other Web sites

Informative

Up to date information

Email service

Search capability

Freeware and downloads

Good quality graphics

Information well organized

Easy to navigate

Fast response time

ANALYSIS

OTHERS

Show word document on Internet surveyShow Web sites of companies that offer

Web templatesDiscuss home based Internet business

PAGE LAYOUT

Position of logoPosition of navigation linksVisual impact (e.g. color scheme)Screen setting of monitors (640x480, 800x600,

1024x768)Screens of informationTypographyPage length

SCREEN SETTINGS

TYPOGRAPHY

Serif fonts

TYPOGRAPHY

Sans serif fonts

PAGE LENGTH

Short web pages– Homepage– Keep page size small– Content design to be read online

Long web pages– Easy maintenance– Easier to print and download content

WEEK 10

How to put up an e-storeWeb site testing proceduresCase study: webphil.comWeb design tipsAnalyze promotional techniquesSoftware (browser sizer, HTML code checker)Film clip (CNN documentary on the dot com era

1999 – 2001)

SPEED TIPS

Keep Web pages below 30KBInclude height and width attributes for

imagesUse only optimized JPEG or GIF, never

BMPLeave out unnecessary HTML attributesKeep filenames short

COMPATIBILITY

Design for all types of Web browsersDesign for different screen resolutionsUse standard HTML as defined in

www.w3c.org

COLORS

Limit color scheme to 3 to 4 different colors

Stick to the 216 Web safe colorsDefine colors using the hex equivalentAlways define a background color, even if

it is white

TYPE

Use easy to read fonts such as verdana and arial

Try not to define the font size, but if must– Arial at font size = 2– Verdana at font size = “8pt”

Limit the number of characters per line between 50 to 70

Specify font alternates

GRAPHICS

Save images at 72dpiUse alt text tag for imagesCompress images to the limit of acceptable

image qualityDefine height and width attributeCreate images in the exact size to be used

in a Web pageGraphics to display the exact font

HTML

Use HTML checker software to check for coding errors

Tables can be filled with colorsUse relative linksRemove unnecessary codeUse meta tags

PAGE DESIGN

Ensure sufficient contrast between text and background

Use grids and tables for page layoutDesign within image safe areasAvoid the need for scrolling

NAVIGATION

Use default colors for hyperlinksProvide text hyperlinksConsistency in placementProvide links to the homepage on every

pageProvide a cue as to where a user is in the

Web site

TEXT

Separate links from paragraphsUse headings and headlinesLeft justify paragraphsAvoid ALL CAPITALSShort, concise, completeUse bullet points

PROMOTIONAL TIPS

Use meta tags to improve rankings in search engines

Carefully choose words for the title and first few lines of the body

Choose a short and easy to remember domain name

Follow the rules of YahooSubmit to Google.com

PROMOTIONAL TIPS

Join Web ringsSubmit Web site to as many search engines

as possible, both global and localPut domain name on calling cards, stickers,

cars, etc.Cross promote with other Web sitesTeach Web Page Management