Transcript web(intro)
OBJECTIVES Learn file names, formats, and applications Discuss tools used in designing Web sites Identify 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 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 WEB DESIGN SKILLS Copywriter Graphics designer Structural architect (site hierarchy) Technology (HTML, CSS) Creativity (interactive site, good user experience, good first impression) 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 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 Taiwan HongKong 1.5Mbps China ACCESS FROM HOME TO ISP Telcom Companies Dial up (56Kbps) DSL (256Kbps) Wireless (9.6Kbps) Korea 1.5Mbps Broadcast Companies Cable Internet (8Mbps) 6Mbps E1 (2Mbps) Thailand 4Mbps Malaysia Infocom 64Kbps Philippines Internet eXchange, or PhIX A - BONE (Japan) 51Mbps 4Mbps E1 (2Mbps) Moscom Pacific Singapore 2Mbps Indonesia T3 (45Mbps) ASIA INTERNET BACKBONE 1.7Gbps Satellite USA INTERNET BACKBONE AOL MICROSOFT EARTHLINK ISP INTERNET BACKBONE AT&T SPRINT UUNET INTERNET ACCESS Computer 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 Language Language used to create Web pages Written in plain English Tags, 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 sites Learn the concept of Cascading Style Sheets 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 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 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 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 FLASH Developed by Macromedia Used to create animations and special effects Works 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 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 WEEK 8 Overview of graphic file formats How to get graphic images Demonstration of a software used in creating graphic images GRAPHIC FILE FORMATS Bitmap JPEG GIF PNG 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 Scanning Digital cameras Photo CD Graphic designer Download or buy from Web sites Create your own graphics 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 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 Informative Up to date information Up to date information Search capability Email service Easy to navigate Search capability Email service Freeware and downloads Fast response time Good quality graphics Information well organized Information well organized Freeware and downloads Easy to navigate Links to other Web sites Fast response time ANALYSIS OTHERS Show word document on Internet survey Show Web sites of companies that offer Web templates Discuss home based Internet business 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 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-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) 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 COMPATIBILITY Design for all types of Web browsers Design for different screen resolutions Use standard HTML as defined in www.w3c.org 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 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 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 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 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 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 TEXT Separate links from paragraphs Use headings and headlines Left justify paragraphs Avoid ALL CAPITALS Short, concise, complete Use 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 Yahoo Submit to Google.com PROMOTIONAL TIPS Join Web rings Submit Web site to as many search engines as possible, both global and local Put domain name on calling cards, stickers, cars, etc. Cross promote with other Web sites Teach Web Page Management