Transcript Site Development Foundations

Site Development
Foundations
© 2004 ProsoftTraining
All rights reserved
Lesson 1:
Introduction to
Web Site Development
Objectives





Distinguish between using a text editor and using
a GUI markup language editor
Identify Web page design issues
Identify the standards organization that controls
markup languages
Identify front-end and back-end Web issues
Define the concepts of creative design and
branding standards, and demonstrate their
importance to business
Creating Web Pages


The need for skills in Web-based technologies:
• Contribute to team projects
• Create Web pages
• Create résumés
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
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)
• Server-Side JavaScript (SSJS)
• ColdFusion
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)
HTML 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:
• Macromedia DreamWeaver
• Microsoft FrontPage
• Mozilla/Netscape Composer
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:
• Provide a distinct message
• 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
Disabilities Acts


The 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 nontext content (e.g., Java applets and Flash
presentations)
 Providing easy-to-read forms
Additional disabilities acts and initiatives:
• Canada’s Common Look and Feel 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 Act Text
www.copacommission.org/commission
/original.shtml
Verifying Web Page
Accessibility


Many tools available, including:
• Bobby (www.cast.org/bobby)
• STEP508 (www.section508.gov)
• RetroAccess (www.retroaccess.com)
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


Design and branding standards – topics for
meetings include:
• Target markets
• Market messages
• Media choices
• Color combinations
• Sales strategies
• Technologies to use
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 act as a centralized access
point for additional Web sites
• Portal types:
 Vertical
 Horizontal
Portal benefits:
• Direct users to the best sites
• Attract users to products
• Improve 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_Pa
ge)
• MemoryAlpha
(http://en.wikipedia.org/wiki/Memory_Alpha
)
Wiki software purveyors
• Open Wiki (www.openwiki.com)
• JSP Wiki (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
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
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