html5 and css3 unit a
DESCRIPTION
TRANSCRIPT
HTML5 and CSS3 IllustratedHTML5 and CSS3 Illustrated
Unit A: Unit A: Preparing to Create a Web SitePreparing to Create a Web Site
ObjectivesObjectives
Assemble a project planAssemble a project plan
Create a storyboardCreate a storyboard
Implement Web accessibility Implement Web accessibility standardsstandards
Evaluate Web site usabilityEvaluate Web site usability
Manage Web browser compatibility Manage Web browser compatibility issuesissues
HTML 5 and CSS 3 - Illustrated Complete 2
Objectives (continued)Objectives (continued)
Practice good file managementPractice good file management
Configure your FTP clientConfigure your FTP client
Upload Web site filesUpload Web site files
HTML 5 and CSS 3 - Illustrated Complete 3
Assembling a Project PlanAssembling a Project Plan
Project plan: document that identifies Project plan: document that identifies aspects of the projectaspects of the project
Identify goals and objectives of the Identify goals and objectives of the projectproject Ask questions to find out customer’s Ask questions to find out customer’s
expectations and goalsexpectations and goals
HTML 5 and CSS 3 - Illustrated Complete 4
Assembling a Project Plan Assembling a Project Plan (continued)(continued)
Identify the target audienceIdentify the target audience User information: age range, genderUser information: age range, gender Technical information: OS, screen Technical information: OS, screen
resolutionresolution User’s needs: reason for visiting Web User’s needs: reason for visiting Web
sitesite
Identify the type of Web siteIdentify the type of Web site Determine main function of the Web siteDetermine main function of the Web site Identify what the Web site should and Identify what the Web site should and
should not includeshould not includeHTML 5 and CSS 3 - Illustrated Complete 5
Assembling a Project Plan Assembling a Project Plan (continued)(continued)
Develop a budgetDevelop a budget Budget should be included in the project Budget should be included in the project
planplan
Create a timelineCreate a timeline Define timeline for completion of the Define timeline for completion of the
project and completion of major project and completion of major milestones along the waymilestones along the way
Identify who is responsible for each task Identify who is responsible for each task in the timelinein the timeline
HTML 5 and CSS 3 - Illustrated Complete 6
Creating a StoryboardCreating a Storyboard
StoryboardStoryboard: sketch that outlines Web : sketch that outlines Web page components and links between page components and links between Web pagesWeb pages
Identify components to includeIdentify components to include Use project plan as basic listUse project plan as basic list Add essential design elements suitable Add essential design elements suitable
for Web site functionality and target for Web site functionality and target audienceaudience
HTML 5 and CSS 3 - Illustrated Complete 7
Creating a Storyboard Creating a Storyboard (continued)(continued)
Sketch layoutSketch layout Place Web page elements in a functional Place Web page elements in a functional
and usable layoutand usable layout Progressive design – select one of Progressive design – select one of
multiple layouts or fine tune a thememultiple layouts or fine tune a theme Simple Web sites – a single layoutSimple Web sites – a single layout Complex Web sites – multiple layouts Complex Web sites – multiple layouts
suitable for specific pagessuitable for specific pages
HTML 5 and CSS 3 - Illustrated Complete 8
Creating a Storyboard Creating a Storyboard (continued)(continued)
Sketch for a main Web page Sketch for a main Web page
HTML 5 and CSS 3 - Illustrated Complete 9
Creating a Storyboard Creating a Storyboard (continued)(continued)
Map relationship between Web pagesMap relationship between Web pages Crucial when creating navigation system Crucial when creating navigation system
for the Web sitefor the Web site Include links between pages in the Web Include links between pages in the Web
site as well as external linkssite as well as external links
HTML 5 and CSS 3 - Illustrated Complete 10
Creating a Storyboard Creating a Storyboard (continued)(continued)
HTML 5 and CSS 3 - Illustrated Complete 11
Relationship sketchRelationship sketch
Implementing Web Implementing Web Accessibility StandardsAccessibility Standards
User Agents: programs and devices User Agents: programs and devices that interpret Web documentsthat interpret Web documents Different users use different user agents Different users use different user agents
to access the Webto access the Web
Implementing Web accessibility Implementing Web accessibility standards makes a Web page standards makes a Web page adaptable to capabilities of different adaptable to capabilities of different user agentsuser agents
HTML 5 and CSS 3 - Illustrated Complete 12
Implementing Web Accessibility Implementing Web Accessibility Standards (continued)Standards (continued)
Web sites should strive to meet Web sites should strive to meet accessibility goals:accessibility goals: Perceivable: contents of Web page Perceivable: contents of Web page
should be accessible in whatever format should be accessible in whatever format a user is accessing ita user is accessing it
Operable: Operable: • Allows interfacing with the Web page in Allows interfacing with the Web page in
different ways different ways • Allows users to view Web page at their own Allows users to view Web page at their own
pacepace• Clearly indicated navigation system Clearly indicated navigation system
HTML 5 and CSS 3 - Illustrated Complete 13
Implementing Web Accessibility Implementing Web Accessibility Standards (continued)Standards (continued)
Web sites should strive to meet Web sites should strive to meet accessibility goals (continued):accessibility goals (continued): Understandable:Understandable:
• Language in which page is written is clearly Language in which page is written is clearly indicated, explain specialized vocabularyindicated, explain specialized vocabulary
• No unexpected changes to the way pages No unexpected changes to the way pages are displayed when following linksare displayed when following links
• Forms should identify user errors and allow Forms should identify user errors and allow users to correct themusers to correct them
Robust: coded according to Web Robust: coded according to Web standardsstandards
HTML 5 and CSS 3 - Illustrated Complete 14
Implementing Web Accessibility Implementing Web Accessibility Standards (continued)Standards (continued)
HTML 5 and CSS 3 - Illustrated Complete 15
Web page before and after Web page before and after accessibility redesignaccessibility redesign
Evaluating Web Site UsabilityEvaluating Web Site Usability
Usability: Web site’s ease of useUsability: Web site’s ease of use Varies between Web sites, even ones Varies between Web sites, even ones
relating to similar topics or actionsrelating to similar topics or actions Important in making sure users return to Important in making sure users return to
sitesite Designing usable site is easier than Designing usable site is easier than
changing existing site to be more usablechanging existing site to be more usable
HTML 5 and CSS 3 - Illustrated Complete 16
Evaluating Web Site Evaluating Web Site Usability (continued)Usability (continued)
Usable Web sites share the following Usable Web sites share the following attributes:attributes: Consistent and cohesiveConsistent and cohesive
• All pages are visually similarAll pages are visually similar• Page elements appear consistentPage elements appear consistent• Use elements that are standard in other Web Use elements that are standard in other Web
sitessites
NavigableNavigable• Clear how to accomplish desired taskClear how to accomplish desired task• Page includes links that clearly indicate how Page includes links that clearly indicate how
to move to other areas of the Web siteto move to other areas of the Web siteHTML 5 and CSS 3 - Illustrated Complete 17
Evaluating Web Site Evaluating Web Site Usability (continued)Usability (continued)
Usable Web sites share the following Usable Web sites share the following attributes (continued):attributes (continued): UnderstandableUnderstandable
• Simple and straightforward text Simple and straightforward text • Avoid technical jargon when not suitable to Avoid technical jargon when not suitable to
target audiencetarget audience• Limit design to necessary elements – do not Limit design to necessary elements – do not
overload the pageoverload the page
HTML 5 and CSS 3 - Illustrated Complete 18
Managing Web Browser Managing Web Browser Compatibility IssuesCompatibility Issues
Use of different browsers, devices and Use of different browsers, devices and browser versions can affect the way a browser versions can affect the way a Web page is displayedWeb page is displayed
Web designer can take steps to Web designer can take steps to ensure Web site looks as close as ensure Web site looks as close as possible to the original designpossible to the original design Practice good coding habitsPractice good coding habits Test Web site with different user agentsTest Web site with different user agents Validate HTML and CSS codeValidate HTML and CSS code
HTML 5 and CSS 3 - Illustrated Complete 19
Practicing Good File Practicing Good File ManagementManagement
Keep all files for a Web site in a Keep all files for a Web site in a common locationcommon location As Web site and number of files grows, As Web site and number of files grows,
keep them organizedkeep them organized
Local Root Folder: main directory Local Root Folder: main directory where you save files for your Web sitewhere you save files for your Web site To avoid errors, use this folder only for To avoid errors, use this folder only for
files ready to be publishedfiles ready to be published
HTML 5 and CSS 3 - Illustrated Complete 20
Configuring Your FTP ClientConfiguring Your FTP Client
HTML 5 and CSS 3 - Illustrated Complete 21
Files are stored in a Web server to be Files are stored in a Web server to be accessible on the Webaccessible on the Web
File Transport Protocol (FTP) File Transport Protocol (FTP) Method for transferring files between two Method for transferring files between two
networked computersnetworked computers
FTP client: dedicated FTP programFTP client: dedicated FTP program
Configure FTP client by providing Configure FTP client by providing connection name, FTP address, connection name, FTP address, username, and passwordusername, and password
Uploading Web Site FilesUploading Web Site Files
HTML 5 and CSS 3 - Illustrated Complete 22
Files for Web site are uploaded to Files for Web site are uploaded to Web server once FTP client is Web server once FTP client is configuredconfigured
Using FTP client, local directory tree is Using FTP client, local directory tree is on left hand side and remote directory on left hand side and remote directory tree is on right hand sidetree is on right hand side
Through the FTP client, you can make Through the FTP client, you can make changes to remote directory tree just changes to remote directory tree just like you would to local directory treelike you would to local directory tree
SummarySummary
Prior planning is a crucial component Prior planning is a crucial component in designing a good Web sitein designing a good Web site
When planning a Web site, the When planning a Web site, the designer must consider the uses of the designer must consider the uses of the site and the target audiencesite and the target audience
When planning a Web site, steps can When planning a Web site, steps can be taken to make the site more be taken to make the site more accessible, more usable, and accessible, more usable, and functional using different user agentsfunctional using different user agents
HTML 5 and CSS 3 - Illustrated Complete 23
Summary (continued)Summary (continued)
Web documents are developed in a Web documents are developed in a local computer and are transferred to local computer and are transferred to a Web server for publicationa Web server for publication
Proper file management is key in Proper file management is key in preventing erroneous publication of preventing erroneous publication of Web pagesWeb pages
Documents can be transferred from Documents can be transferred from the local computer to the Web server the local computer to the Web server using FTP and FTP clients using FTP and FTP clients
HTML 5 and CSS 3 - Illustrated Complete 24