Site Development
Foundations
© 2009 Certification Partners, LLC
All rights reserved
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Lesson 1:
Introduction to
Web Site Development
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Lesson 1 Objectives
• Develop a business Web site
• Distinguish between using a text editor and
using a GUI markup language editor
• Identify Web page front-end design issues
• Identify Web page back-end resource issues
Developing a Business Web Site
• Web sites can serve as a business's primary
means of advertising and marketing
• Brand – a concept or collection of symbols
associated with a product, service or person
–
–
–
–
–
–
Should be simple
Should be different
Should be safe
Should make a promise
Should reflect the company's attributes
Should reflect the company's personality
Creating Web Pages
• Web page authoring is becoming a standard
skill set for many careers
• You must know at least the following
markup languages:
– Hypertext Markup Language (HTML)
– Extensible HTML (XHTML)
Additional Web Page Elements
• Web pages use more than HTML or XHTML
-- additional technologies include:
–
–
–
–
Flash
Java
ActiveX
Microsoft Silverlight
• You must also understand how Web pages
use:
– Databases
– Common Gateway Interface (CGI)
Databases and Web Pages
• Databases can store information about
company inventory
• Databases can store customer
information
Web Pages and CGI
•
•
CGI is used for many purposes:
– To help Web pages pass information to and from databases
– To provide active content (e.g., hit counters)
– To provide dynamic content
Examples of CGI technology include:
– Perl
– PHP Hypertext Preprocessor (PHP)
– Active Server Pages (ASP) and .NET
– JavaServer Pages (JSP)
– ColdFusion
– Python
– Django
– Ajax
– Ruby
Text Editors and
Markup Languages
• You do not need to use a special editor
application to create markup
– You can use a simple text editor (e.g.,
Notepad or Vi)
• When creating HTML or XHTML files, you
must:
– Save the text as plaintext
– Save the file using either the .html or .htm
file name extension
Graphical User Interface (GUI) Editors
• GUI HTML editors:
– Create HTML/XHTML code for you
• You type page text as you would with a standard
word processor
• You point and click with a mouse
• Popular GUI HTML editors include:
– Adobe Dreamweaver
– Microsoft Expression Web
– Mozilla SeaMonkey
– Adobe GoLive
– KompoZer
Why Learn
Markup Languages?
• GUI HTML editors do not keep pace with
the latest improvements in markup
language
• You can add features to pages not
supported by the editor
• You will not be limited by the GUI
editor’s capabilities
Front-End Issues
A Web page is an interface that should:
– Be accessible by all users
– Incorporate appealing images and graphical elements
– Include constantly updated hyperlinks
– Use tables wisely
– Present carefully designed Web forms
– Connect pages to databases securely
– Use the most current technologies appropriate
– Use images sparingly
– Be easily navigable and without dead ends
– Include alternative navigation
Web Page Accessibility
• An accessible Web page has:
– A user-friendly and accessible front end
– Back-end server resources that process and store user input
• The WC3 estimates that up to 10 percent of people have disabilities
that, if not accommodated by Web sites, can cause companies to lose
significant amounts of revenue
• Why adhere to accessibility standards?
– It makes your site available to all users
– You can be penalized for failing to provide accessibility, either by
losing customers or through government-imposed fines
Disabilities Acts
• Americans with Disabilities Act (ADA)
– Enforced by the U.S. Justice Department
– Requires Web designers to create "reasonable accommodations"
for disabled users:
• Ensuring that all images have text-based descriptions
• Providing text-based alternatives to all non-text content (e.g.,
Java applets and Flash presentations)
• Providing easy-to-read forms
• Additional disabilities acts and initiatives:
– Canada’s Common Look and Feel Standards for the Internet
– The Australian Government’s Guide to Minimum Web Site
Standards – Accessibility
– India’s Maharashtra Right to Information Act
Disabilities Acts (cont'd)
• Web Content Accessibility Guidelines (WCAG)
– Provided by the W3C Web Accessibility Initiative (WAI)
– A product of worldwide cooperation
– 14 WAI guidelines
• Rehabilitation Act: Electronic and Information Technology
Accessibility Standards, Section 508
– Known simply as Section 508
– All federal agencies must ensure that all electronic and
information technology developed, procured, maintained or
used by federal agencies be comparably accessible to users
with disabilities
– Based on the WCAG
Child Online
Protection Act (COPA)
• Designed to protect minors from harmful
material
– U.S. government law
– Penalties specified
– You can learn more about COPA at:
• The COPA Commission Home Page
www.copacommission.org
• The COPA original statute
www.copacommission.org/commission/original.
shtml
Verifying Web Page Accessibility
• Many tools available, including:
–
–
–
–
–
–
W3C Page Validator
Total Validator
Cynthia Says
STEP508
Vischeck
MAGpie
• One way you can help improve accessibility
is by adhering to the XHTML 1.0 standard
when you write Web page code
General Web Page
Accessibility Considerations
• Visual challenges
– Text readability
– Text support for images
– Screen reader support
• Audio challenges
– Alternative audio support
– Alternative speech input
– Text support for audio elements
• Cognitive and technical challenges
• Site maps can improve accessibility
• Change documentation can improve accessibility
Creative Design
and Branding Standards
• A Web page is often part of a larger
marketing and sales strategy
– Creating and ensuring brand recognition (name
recognition)
– Presenting a strong message
• A Web page allows you to develop:
– A market
– Mind share
– A brand
Creative Design
and Branding Standards (cont'd)
• Design and branding standards – topics for
meetings include:
– Target markets
– Market messages
– Media choices
– Color combinations
– Sales strategies
– Technologies to use
Creative Design
and Branding Standards (cont'd)
• Audience development techniques include:
– Flash, Java
– Company logos
– Strategies developed by sales and marketing
– Push and pull technologies
– Visitor tracking
Portals
• A Web site that acts as a centralized access
point for additional Web sites
– Portal types:
• Vertical
• Horizontal
• Portal benefits:
– Directs users to the best sites
– Attracts users to products
– Improves brand name
Wiki Site
• A Web site that allows all visitors to collaborate in its construction
– Wiki software is installed on a Web server
– You can lock down certain pages and leave others open to editing
• Wiki examples
– Wikipedia (www.wikipedia.org)
– LinuxQuestions.org
(http://wiki.linuxquestions.org/wiki/Main_Page)
– MemoryAlpha (http://en.wikipedia.org/wiki/Memory_Alpha)
• Wiki software purveyors
– WikiBase (http://c2.com/cgi/wiki?WikiBase)
– JSPWiki (www.jspwiki.org)
File Formats and Active Content
• Your pages will include various content formats,
including PDF documents, images and media
files
• Common file formats and MIME types
–
–
–
–
–
HTML: text/html
JPEG: image/jpeg
Cascading Style Sheets (CSS): text/css
MPEG: audio/mpeg
MP3: audio/mp3
• Evaluating proprietary formats
– Difficulty/inconvenience
– Cost
– Audience limitation
Back-End Issues
• Database connectivity
– Types of databases
– Web servers use relational databases to store data
• Relational databases
– Creating relational databases
– Relational database vendors
– Databases, Web servers and SQL
Relational Database Manipulation
Terminology
• Join – combining two database tables to create a new
table
• Table – a database topic that contains rows (records)
and columns (attributes or fields)
• Record – one row of a relational database table
• Field – one column of a relational database table
• Entity (i.e., record) – a person, place or thing
represented in a database table row
Relational Database Manipulation
Terminology (cont’d)
• Attribute – a category of information related to an
entity
• Linking attribute – common attribute between tables
that allows a join to occur
• Relation – a link generated between two entities
• Tuple – two or more entities currently linked by a
relation
• Query – searching a database
Types of
Database Table Joins
• Inner join
– Results in a new table in which the information
in one column of the first table is combined
with a column of the second table
– The most common type of join
• Outer join
– Used to combine tables when one column of a
table contains an empty, or null, value
– Less common
SQL Commands
• SELECT – requests data from a particular
table or table row
• FROM – delimits the beginning search point
in a table or table row
• WHERE – delimits the ending search point in
a table or table row
• JOIN – creates a new table from selected
data
• GROUP – organizes results by a parameter
• SUM – adds numerical information within
records
Accessing and Updating Databases
• Ways to access databases include:
– Locally
– Over the LAN from a share you establish
– Via the Web through a Web application
• Database connectivity methods
– Open Database Connectivity (ODBC)
– Java Database Connectivity (JDBC)
• Indexing and cataloging
Bandwidth and Download Time
• Download time
– Factor in all files
– Consider typical connection speeds
• Calculate download time for a Web page
– Check the size of the HTML file and all associated images, files or
programs
– Determine the speed of your network connection
– Convert the connection speed and file size to common units of
measure (e.g., bytes or bits)
– Divide file size by connection speed
Naming Web Page Files
• Web servers search for default page names
• Default page names include:
–
–
–
–
index.html
index.htm
default.htm
default.asp
• Default page names can change from server to
server
– Apache Server – usually index.html
– IIS – usually default.htm, default.html or index.html
HTTP 404 – File Not Found Error
• Indicates that a user has requested a file
that does not exist on the specified Web
server
– Generated by the server
– Can be customized
Habitat For Humanity
Web Site
• A not-for-profit, volunteer-driven organization that builds and
sells homes for families worldwide
• Has built more than 150,000 homes worldwide
• A Web site example in this course
• Like any Web site, it targets an audience
– The site is part of a concerted effort to bring in volunteers
– People with technical expertise must run the site
– More than technical expertise is required –
the Web design team must also understand the business
goals
Lesson 1 Summary
Develop a business Web site
Distinguish between using a text editor and
using a GUI markup language editor
Identify Web page front-end design issues
Identify Web page back-end resource issues