APM Welcome, APM North West Network Conference, Synergies Across Sectors
Understanding the web design and development
1. Understanding the Web Design and Development G.H.D. Chinthaka Sanjeewa Web Master / Multimedia Specialist Ministry of Higher Education Principles of Web Design Chinthaka@NODES
2. Principles of Web Design, Third Edition 2 Objectives Describe the current state of HTML Describe browser compatibility issues Consider connection speed differences Code for multiple screen resolutions Address operating system issues Chinthaka@NODES
3. Principles of Web Design, Third Edition 3 Cascading Style Sheets (CSS) is a powerful display language for HTML CSS lets you state style rules in an external style sheet that is linked to every page on a Web site CSS lets you easily control the display characteristics of your Web site Newer browsers offer more complete CSS support The Need for Style Sheets Chinthaka@NODES
4. Principles of Web Design, Third Edition 4 Variables in the Web Design Environment Browser compatibility Connection speed Screen resolution Operating system Chinthaka@NODES
5. Principles of Web Design, Third Edition 5 Testing for Download Times Test your site at different connection speeds Test your site as if you were a user visiting for the first time. This is when users experience the greatest download times. Clear your cache of the files and images that the browser has stored Chinthaka@NODES
6. Principles of Web Design, Third Edition 6 Coding for Multiple Screen Resolutions A computer monitor’s screen resolution is the horizontal and vertical width and height of the computer screen in pixels The two most common screen resolutions (traditionally expressed as width x height) are 800 x 600 and 1024 x 768 Chinthaka@NODES
7. Principles of Web Design, Third Edition 7 Operating System Issues Monitors and display software Browser versions Font choices Chinthaka@NODES
8. Web Site Design Principles Principles of Web Design Chinthaka@NODES
9. 9 Objectives Design for the computer medium Design for the user Design for the screen Chinthaka@NODES
10. 10 Design for the Computer Medium Craft the look and feel Make your design portable Design for low bandwidth Plan for clear presentation and easy access to your information Chinthaka@NODES
11. 11 Design for Low Bandwidth Plan your pages so that they are accessible at a variety of connection speeds If your pages download slowly because they contain large, detailed graphics or complicated animations, your users will leave before they ever see your content Chinthaka@NODES
12. 12 Create a site Design Plan the site themes and structures Create smooth transitions Use active white space Chinthaka@NODES
13. 13 Design for the User Keep your design efforts centered solely around your user Design for interaction Design for location Guide the user’s eye Chinthaka@NODES
15. 15 Objectives Create a site specification Identify the content Analyze your audience Build a Web site development team Create a site storyboard Chinthaka@NODES
16. 16 Analyze Your Audience Produce an audience definition: What is it that users want when they come to your site? How can you attract them and entice them to return for repeat visits? What type of computer and connection speed does your typical visitor have? Chinthaka@NODES
17. 17 Create a Site Storyboard Plan your site by creating a flowchart that shows the structure and logic behind the content presentation and navigation choices This preliminary step is one of the most important that you take in planning your site Chinthaka@NODES
18. 18 Summary Start with pencil and paper. Write a site specification document. You’ll find it invaluable as a reference while building your site. Chinthaka@NODES
19. 19 Summary Plan for successful implementation of your site by creating portable file naming conventions. Use a pencil and paper to diagram your site. Even if the design changes, you’ll save a lot of time and effort by visually detailing the structure of your content. Chinthaka@NODES
21. 21 Objectives Create usable navigation Build text-based navigation Link with a text navigation bar Use graphics for navigation and linking Chinthaka@NODES
30. 30 Objectives Understand graphics file formats Choose a graphics tool Use the <img> element Control image properties with CSS Understand computer color basics Control color properties with CSS Work with images and color Control background images with CSS Chinthaka@NODES
31. 31 Understanding Graphic Files Formats You can currently use only three image file formats on the Web: GIF, JPG, and PNG. A new format, SVG, is not yet in common use. These formats all compress images to create smaller files. Knowing which file format to use for which type of image is important. If you choose the wrong file type, your image won’t compress or display properly Chinthaka@NODES
34. 34 Objectives Understand how forms work Understand form syntax Create input objects Build forms within tables Build and test a sample form Chinthaka@NODES
35. 35 Understanding How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The HTML form is the interface for the user to enter data Chinthaka@NODES