HTML5 and CSS3 Illustrated           Unit A:Preparing to Create a Web Site
Objectives    Assemble a project plan    Create a storyboard    Implement Web accessibility    standards    Evaluate Web s...
Objectives (continued)    Practice good file management    Configure your FTP client    Upload Web site filesHTML 5 and CS...
Assembling a Project Plan     Project plan: document that identifies     aspects of the project     Identify goals and obj...
Assembling a Project Plan         (continued)    Identify the target audience       User information: age range, gender  ...
Assembling a Project Plan         (continued)    Develop a budget       Budget should be included in the project        p...
Creating a Storyboard    Storyboard: sketch that outlines Web    page components and links between    Web pages    Identif...
Creating a Storyboard                  (continued)    Sketch layout       Place Web page elements in a functional        ...
Creating a Storyboard                (continued)    Sketch for a main Web pageHTML 5 and CSS 3 - Illustrated Complete   9
Creating a Storyboard               (continued)    Map relationship between Web pages       Crucial when creating navigat...
Creating a Storyboard               (continued)     Relationship sketchHTML 5 and CSS 3 - Illustrated Complete   11
Implementing Web       Accessibility Standards    User Agents: programs and devices    that interpret Web documents      ...
Implementing Web Accessibility    Standards (continued)    Web sites should strive to meet    accessibility goals:       ...
Implementing Web Accessibility    Standards (continued)    Web sites should strive to meet    accessibility goals (continu...
Implementing Web Accessibility    Standards (continued)    Web page before and after    accessibility redesignHTML 5 and C...
Evaluating Web Site Usability    Usability: Web site’s ease of use       Varies between Web sites, even ones        relat...
Evaluating Web Site             Usability (continued)    Usable Web sites share the following    attributes:       Consis...
Evaluating Web Site                    Usability (continued)    Usable Web sites share the following    attributes (contin...
Managing Web Browser           Compatibility Issues    Use of different browsers, devices and    browser versions can affe...
Practicing Good File                    Management    Keep all files for a Web site in a    common location       As Web ...
Configuring Your FTP Client    Files are stored in a Web server to be    accessible on the Web    File Transport Protocol ...
Uploading Web Site Files    Files for Web site are uploaded to    Web server once FTP client is    configured    Using FTP...
Summary    Prior planning is a crucial component    in designing a good Web site    When planning a Web site, the    desig...
Summary (continued)    Web documents are developed in a    local computer and are transferred to    a Web server for publi...
Upcoming SlideShare
Loading in …5
×

HTML5 and CSS3 Unit A

2,397 views

Published on

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

No Downloads
Views
Total views
2,397
On SlideShare
0
From Embeds
0
Number of Embeds
519
Actions
Shares
0
Downloads
103
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 and CSS3 Unit A

  1. 1. HTML5 and CSS3 Illustrated Unit A:Preparing to Create a Web Site
  2. 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. 3. Objectives (continued) Practice good file management Configure your FTP client Upload Web site filesHTML 5 and CSS 3 - Illustrated Complete 3
  4. 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. 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. 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. 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. 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. 9. Creating a Storyboard (continued) Sketch for a main Web pageHTML 5 and CSS 3 - Illustrated Complete 9
  10. 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. 11. Creating a Storyboard (continued) Relationship sketchHTML 5 and CSS 3 - Illustrated Complete 11
  12. 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. 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. 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. 15. Implementing Web Accessibility Standards (continued) Web page before and after accessibility redesignHTML 5 and CSS 3 - Illustrated Complete 15
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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

×