Download Web pages use more than HTML or XHTML

Lesson 1:
Introduction to
Web Site Development
© 2007 Prosoft Learning Corporation
All rights reserved
ITD 110 Web Page Design
Copyright © 2004 ProsoftTraining, All Rights Reserved.
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:
– Adobe Dreamweaver
– Microsoft FrontPage
– SeaMonkey 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 through governmentimposed fines
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 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 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:
– WebXACT (http://webxact.watchfire.com/ )
– 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_Page)
– MemoryAlpha
(http://en.wikipedia.org/wiki/Memory_Alpha)
• Wiki software purveyors
– WikiBase (http://c2.com/cgi/wiki?WikiBase)
– 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
Lesson 1 Summary
• Lesson 1 Introduction to Web Site
Development
• See Skills Review