1. OBJECTIVES • Learn file names, formats, and applications • Discuss tools used in designing Web sites • Identify 5 general skills in designing Web sites

2. FILE NAMES • Determines what type of application will be executed

3. TOOLS • Computer – 486 up to latest model • Modem – Internet access • Browser – Application to view Web sites • Notepad – Application to create plain text documents • FrontPage – Application designed to create Web sites • Photoshop – Application to create graphic images

4. WEB DESIGN SKILLS • Copywriter • Graphics designer • Structural architect (site hierarchy) • Technology (HTML, CSS) • Creativity (interactive site, good user experience, good first impression)

6. WEEK 2 • Identify common traits of good Web sites • Basic terminologies such as Web hosting and domain names • Basic HTML structure and code • Color scheme and hex representation

7. 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

9. 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

10. HTML • HTML – HyperText Markup Language • Language used to create Web pages • Written in plain English • Tags, elements, and attributes

11. HTML (Document Structure)

12. HTML (Line Structure)

13. COLORS • RGB – Red, Green, Blue

14. COLOR CHART

15. WEEK 5 • Basic discussion on advanced technologies such as CGI, ASP, Java, JavaScript, and Flash • Discuss static vs. dynamic Web sites • Learn the concept of Cascading Style Sheets

16. CGI • Common Gateway Interface • CGI scripts are used to make interactive Web sites such as forms • Scripts can be created using Visual basic, C, or Perl • Resource intensive, may overload Web servers

17. ASP • Active Server Pages • Alternative to CGI scripting without the performance degradation of CGI • ASP scripts are created using VBScript or Jscript, enclosed in <%…%> symbols • Allows Web sites to be dynamic • Works only on Microsoft’s IIS Web server software

18. JAVA • Developed by Sun Microsystems • Programs that are hardware and operating system independent • Web browsers download Java Applets and is processed by the PC • Clocks, calculators, and games can be inserted on a Web page

19. JAVASCRIPT • Developed by Netscape • Scripts are inserted into the HTML code • An interpreted language, executed line by line in real time • Detecting browser version, pop up windows, digital clock

20. FLASH • Developed by Macromedia • Used to create animations and special effects • Works only on browsers that are compatible with Flash

21. 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

22. CSS • Cascading Style Sheets • A Web standard that allows the separation of structure from visual presentation • HTML 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

23. WEEK 8 • Overview of graphic file formats • How to get graphic images • Demonstration of a software used in creating graphic images

24. GRAPHIC FILE FORMATS • Bitmap • JPEG • GIF • PNG

25. 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

26. 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

27. GRAPHIC FILE FORMATS 14,978 bytes 3,380 bytes 2,570 bytes

28. 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

29. GRAPHIC FILE FORMATS 302 bytes 416 bytes 419 bytes 302 bytes 473 bytes 608 bytes

30. 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

31. GETTING IMAGES • Scanning • Digital cameras • Photo CD • Graphic designer • Download or buy from Web sites • Create your own graphics

32. WEEK 9 • Discuss Mid Term results • Demo how to create animated GIF • Analyze results of homework 1 and 2 • Analyze visual and technical difference of Web award winners vs. popular Web sites • Analyze Internet surveys (population, screen resolution, browser types) • Companies that offer template based Web sites • Topic: Discussion on home based Internet business

33. 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

34. HOMEWORK 1

35. ANALYSIS

36. OTHERS • Show word document on Internet survey • Show Web sites of companies that offer Web templates • Discuss home based Internet business

37. PAGE LAYOUT • Position of logo • Position of navigation links • Visual impact (e.g. color scheme) • Screen setting of monitors (640x480, 800x600, 1024x768) • Screens of information • Typography • Page length

38. SCREEN SETTINGS

39. TYPOGRAPHY Serif fonts

40. TYPOGRAPHY Sans serif fonts

41. 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

42. WEEK 10 • How to put up an e-store • Web site testing procedures • Case study: webphil.com • Web design tips • Analyze promotional techniques • Software (browser sizer, HTML code checker) • Film clip (CNN documentary on the dot com era 1999 – 2001)

43. SPEED TIPS • Keep Web pages below 30KB • Include height and width attributes for images • Use only optimized JPEG or GIF, never BMP • Leave out unnecessary HTML attributes • Keep filenames short

44. COMPATIBILITY • Design for all types of Web browsers • Design for different screen resolutions • Use standard HTML as defined in www.w3c.org

45. COLORS • Limit color scheme to 3 to 4 different colors • Stick to the 216 Web safe colors • Define colors using the hex equivalent • Always define a background color, even if it is white

46. 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

47. GRAPHICS • Save images at 72dpi • Use alt text tag for images • Compress images to the limit of acceptable image quality • Define height and width attribute • Create images in the exact size to be used in a Web page • Graphics to display the exact font

48. HTML • Use HTML checker software to check for coding errors • Tables can be filled with colors • Use relative links • Remove unnecessary code • Use meta tags

49. PAGE DESIGN • Ensure sufficient contrast between text and background • Use grids and tables for page layout • Design within image safe areas • Avoid the need for scrolling

50. NAVIGATION • Use default colors for hyperlinks • Provide text hyperlinks • Consistency in placement • Provide links to the homepage on every page • Provide a cue as to where a user is in the Web site