Download Work more than 14 days late may be submitted ONLY with the

Site Development
Foundations
© 2007 Prosoft Learning Corporation
All rights reserved
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Lesson 1:
Introduction to
Web Site Development
Copyright © 2004 ProsoftTraining, All Rights Reserved.
COURSE ESSENTIALS
Syllabus
Challenge Exam – Must be taken during drop/add period. Email your advisor
for details
Textbook – Site Development Foundations: Academic Student Guide
Software – Notepad (free text editor on Windows machine)
Textedit on a Mac
Latest Version of Explorer or Firefox
Contact Info
- Email: [email protected]
-AIM: ProfCThompson (Office Hours – Mon 9-10pm and Thursday 10 – 11am)
(though probably can catch me on AIM throughout the day or by email)
Seminar – 8-9pm ET each week unless otherwise note
Alternate Seminar Quiz
Copyright © 2004 ProsoftTraining, All Rights Reserved.
COURSE OUTCOMES
Examine Internet and World Wide Web technologies.
Describe basic concepts of web development and eCommerce.
Create web sites using web page building blocks.
Develop navigation systems for web sites.
Create cascading style sheets for Web sites.
Apply a professionally recognized method of formatting and documentation
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Breakdown of Course Grades:
Grading Criteria/Course Evaluation:
The course assignment weighting information is as follows.
Discussion
Flexible Learning Activity
(Seminar or Quiz)
Projects
9 x 30 points (270 points)
8 x 20 points (160 points)
9 x 50 points (450 points)
Final Project
120 points
Total Points:
1000 points
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Late Work Policy
Late Work Policy
The student will make arrangements in advance with the instructor to turn
work in late. A penalty may or may not be assigned, at the discretion of the
faculty member.
If a student does not make prior arrangements with the instructor and fails to
turn individual work in on time, the following penalties may be applied:
Work that is submitted 1 - 2 calendar days AFTER its due date may be graded
down a maximum of 5%.
Work that is submitted 3 - 6 calendar days AFTER its due date may be graded
down a maximum of 10%.
Work that is submitted 7 – 14 days AFTER its due date may be graded down a
maximum of 20%.
Work more than 14 days late may be submitted ONLY with the approval of
the Instructor. Instructors are not required to accept work which is more
than two weeks late.
Final course projects and end-of-term papers must be turned in no later than
the due date UNLESS an "Incomplete" grade has been arranged.
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Discussion Boards
Exception: Discussion Boards are designed for maximum student
participation and engagement. It is critical to the success of all courses that
students contribute to the Discussion Boards in a timely manner. Therefore,
no late postings to Discussion Boards will be accepted without prior
arrangement with the instructor.
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Unit 1
Unit 1 Project
For your first project, you will be accomplishing the following three goals:
1. Setting up your project folder on your computer
2. Setting up your Freewebs website
3. Creating, uploading and viewing a web page
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Copyright © 2004 ProsoftTraining, All Rights Reserved.
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 government-imposed 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