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