HTML5 and CSS3 Unit A

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


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


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


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


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



Sketch for a main Web page Sketch for a main Web page



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




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


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



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




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


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


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


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


Configuring Your FTP ClientConfiguring Your FTP Client


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


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


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


HTML5 and CSS3 Unit A

Technology

Transcript of HTML5 and CSS3 Unit A