objectives learn file names, formats, and applications discuss tools used in designing web sites ...
TRANSCRIPT
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
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
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
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
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
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
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