Your SlideShare is downloading. ×
0
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
HTML5 and CSS3 Unit A
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 and CSS3 Unit A

2,056

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,056
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
94
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 and CSS3 Illustrated Unit A:Preparing to Create a Web Site
  • 2. Objectives Assemble a project plan Create a storyboard Implement Web accessibility standards Evaluate Web site usability Manage Web browser compatibility issuesHTML 5 and CSS 3 - Illustrated Complete 2
  • 3. Objectives (continued) Practice good file management Configure your FTP client Upload Web site filesHTML 5 and CSS 3 - Illustrated Complete 3
  • 4. Assembling a Project Plan Project plan: document that identifies aspects of the project Identify goals and objectives of the project  Ask questions to find out customer’s expectations and goalsHTML 5 and CSS 3 - Illustrated Complete 4
  • 5. Assembling a Project Plan (continued) Identify the target audience  User information: age range, gender  Technical information: OS, screen resolution  User’s needs: reason for visiting Web site Identify the type of Web site  Determine main function of the Web site  Identify what the Web site should and should not includeHTML 5 and CSS 3 - Illustrated Complete 5
  • 6. Assembling a Project Plan (continued) Develop a budget  Budget should be included in the project plan Create a timeline  Define timeline for completion of the project and completion of major milestones along the way  Identify who is responsible for each task in the timelineHTML 5 and CSS 3 - Illustrated Complete 6
  • 7. Creating a Storyboard Storyboard: sketch that outlines Web page components and links between Web pages Identify components to include  Use project plan as basic list  Add essential design elements suitable for Web site functionality and target audienceHTML 5 and CSS 3 - Illustrated Complete 7
  • 8. Creating a Storyboard (continued) Sketch layout  Place Web page elements in a functional and usable layout  Progressive design – select one of multiple layouts or fine tune a theme  Simple Web sites – a single layout  Complex Web sites – multiple layouts suitable for specific pagesHTML 5 and CSS 3 - Illustrated Complete 8
  • 9. Creating a Storyboard (continued) Sketch for a main Web pageHTML 5 and CSS 3 - Illustrated Complete 9
  • 10. Creating a Storyboard (continued) Map relationship between Web pages  Crucial when creating navigation system for the Web site  Include links between pages in the Web site as well as external linksHTML 5 and CSS 3 - Illustrated Complete 10
  • 11. Creating a Storyboard (continued) Relationship sketchHTML 5 and CSS 3 - Illustrated Complete 11
  • 12. Implementing Web Accessibility Standards User Agents: programs and devices that interpret Web documents  Different users use different user agents to access the Web Implementing Web accessibility standards makes a Web page adaptable to capabilities of different user agentsHTML 5 and CSS 3 - Illustrated Complete 12
  • 13. Implementing Web Accessibility Standards (continued) Web sites should strive to meet accessibility goals:  Perceivable: contents of Web page should be accessible in whatever format a user is accessing it  Operable: • Allows interfacing with the Web page in different ways • Allows users to view Web page at their own pace • Clearly indicated navigation systemHTML 5 and CSS 3 - Illustrated Complete 13
  • 14. Implementing Web Accessibility Standards (continued) Web sites should strive to meet accessibility goals (continued):  Understandable: • Language in which page is written is clearly indicated, explain specialized vocabulary • No unexpected changes to the way pages are displayed when following links • Forms should identify user errors and allow users to correct them  Robust: coded according to Web standardsHTML 5 and CSS 3 - Illustrated Complete 14
  • 15. Implementing Web Accessibility Standards (continued) Web page before and after accessibility redesignHTML 5 and CSS 3 - Illustrated Complete 15
  • 16. Evaluating Web Site Usability Usability: Web site’s ease of use  Varies between Web sites, even ones relating to similar topics or actions  Important in making sure users return to site  Designing usable site is easier than changing existing site to be more usableHTML 5 and CSS 3 - Illustrated Complete 16
  • 17. Evaluating Web Site Usability (continued) Usable Web sites share the following attributes:  Consistent and cohesive • All pages are visually similar • Page elements appear consistent • Use elements that are standard in other Web sites  Navigable • Clear how to accomplish desired task • Page includes links that clearly indicate how to move to other areas of the Web siteHTML 5 and CSS 3 - Illustrated Complete 17
  • 18. Evaluating Web Site Usability (continued) Usable Web sites share the following attributes (continued):  Understandable • Simple and straightforward text • Avoid technical jargon when not suitable to target audience • Limit design to necessary elements – do not overload the pageHTML 5 and CSS 3 - Illustrated Complete 18
  • 19. Managing Web Browser Compatibility Issues Use of different browsers, devices and browser versions can affect the way a Web page is displayed Web designer can take steps to ensure Web site looks as close as possible to the original design  Practice good coding habits  Test Web site with different user agents  Validate HTML and CSS codeHTML 5 and CSS 3 - Illustrated Complete 19
  • 20. Practicing Good File Management Keep all files for a Web site in a common location  As Web site and number of files grows, keep them organized Local Root Folder: main directory where you save files for your Web site  To avoid errors, use this folder only for files ready to be publishedHTML 5 and CSS 3 - Illustrated Complete 20
  • 21. Configuring Your FTP Client Files are stored in a Web server to be accessible on the Web File Transport Protocol (FTP)  Method for transferring files between two networked computers FTP client: dedicated FTP program Configure FTP client by providing connection name, FTP address, username, and passwordHTML 5 and CSS 3 - Illustrated Complete 21
  • 22. Uploading Web Site Files Files for Web site are uploaded to Web server once FTP client is configured Using FTP client, local directory tree is on left hand side and remote directory tree is on right hand side Through the FTP client, you can make changes to remote directory tree just like you would to local directory treeHTML 5 and CSS 3 - Illustrated Complete 22
  • 23. Summary Prior planning is a crucial component in designing a good Web site When planning a Web site, the designer must consider the uses of the site and the target audience When planning a Web site, steps can be taken to make the site more accessible, more usable, and functional using different user agentsHTML 5 and CSS 3 - Illustrated Complete 23
  • 24. Summary (continued) Web documents are developed in a local computer and are transferred to a Web server for publication Proper file management is key in preventing erroneous publication of Web pages Documents can be transferred from the local computer to the Web server using FTP and FTP clientsHTML 5 and CSS 3 - Illustrated Complete 24

×