Orion Project ProposalOrion Project Proposal

HTML Tutorial WebsiteHTML Tutorial Website

DefineDefine

Needs AnalysisNeeds Analysis HTML Tutorial sites vary in design, delivery, and HTML Tutorial sites vary in design, delivery, and

breadth. There are sites for the beginning breadth. There are sites for the beginning business professional, the amateur coder, the business professional, the amateur coder, the nonchalant web browser. There are very few nonchalant web browser. There are very few sites that cater to every individual.sites that cater to every individual.

Tutorial sites are often bogged down with excess Tutorial sites are often bogged down with excess advertisements and solicitations for services.advertisements and solicitations for services.

Despite the call for “good” web design, many Despite the call for “good” web design, many tutorial sites are difficult to navigate or are tutorial sites are difficult to navigate or are plagued with very difficult instructions.plagued with very difficult instructions.

HTML is an evolving language. Many tutorial HTML is an evolving language. Many tutorial sites are already out-of-date.sites are already out-of-date.

Problem StatementProblem Statement

The ORION HTML Tutorial Site will feature The ORION HTML Tutorial Site will feature clear navigation, an up-to-date HTML clear navigation, an up-to-date HTML technique and tag library, a clean, technique and tag library, a clean, advertisement-free layout, and available advertisement-free layout, and available resources for further study, while targeting resources for further study, while targeting the novice HTML developer.the novice HTML developer.

AudienceAudience Team Orion understands that the novice HTML user can Team Orion understands that the novice HTML user can

be anyone: casual browser, student, business be anyone: casual browser, student, business professional, or doctorate holder. Therefore, the ORION professional, or doctorate holder. Therefore, the ORION HTML Tutorial Site targets a broad and vast audience, HTML Tutorial Site targets a broad and vast audience, featuring content that has not been over-specialized to featuring content that has not been over-specialized to one particular group. Anyone who wants to learn HTML one particular group. Anyone who wants to learn HTML coding should visit.coding should visit.

While it is the hope of Team Orion’s to provide useful While it is the hope of Team Orion’s to provide useful and practical applications of HTML, the sample code will and practical applications of HTML, the sample code will be provided in a generalized format, rendering it useful be provided in a generalized format, rendering it useful to a vast audience. This general approach allows the to a vast audience. This general approach allows the visitor and end-user to customize the HTML to suit visitor and end-user to customize the HTML to suit his/her needs.his/her needs.

TasksTasks

Identify ObjectivesIdentify ObjectivesOutline ContentOutline ContentOutline NavigationOutline NavigationStoryboard SiteStoryboard SiteDevelop SiteDevelop SiteTest SiteTest SiteModify Site (if needed)Modify Site (if needed)Publish SitePublish Site

ResponsibilitiesResponsibilities Identify Objectives – as a group, objectives of the site are Identify Objectives – as a group, objectives of the site are

to be drawn up after extensive research into existing sites to be drawn up after extensive research into existing sites and the goals of the ORION HTML Tutorial Site.and the goals of the ORION HTML Tutorial Site.

Outline Content – first draft Brandi, revision Diane, group Outline Content – first draft Brandi, revision Diane, group revision.revision.

Outline Navigation - first draft Brandi, revision Diane, Outline Navigation - first draft Brandi, revision Diane, group revision.group revision.

Storyboard Site – group brainstorm, best designer or Storyboard Site – group brainstorm, best designer or designer of winning layout storyboards the site, group designer of winning layout storyboards the site, group revision.revision.

Develop Site – group development.Develop Site – group development. Test Site – input from class, group revision.Test Site – input from class, group revision. Modify Site (if needed) – group revision.Modify Site (if needed) – group revision. Publish Site – group publish.Publish Site – group publish.

TimelineTimelineTimeline from July 18, 2004 (proposal due date).Timeline from July 18, 2004 (proposal due date). Identify Objectives – August 1 (2 weeks)Identify Objectives – August 1 (2 weeks) Outline ContentOutline Content

General outline – August 8 (3 weeks)General outline – August 8 (3 weeks) Content written – August 22 (5 weeks)Content written – August 22 (5 weeks) Content revised and final – September Content revised and final – September

5 (7 weeks)5 (7 weeks) Outline NavigationOutline Navigation

General outline – August 22 (5 weeks)General outline – August 22 (5 weeks) Navigation mapped – August 29 (6 Navigation mapped – August 29 (6

weeks)weeks) Navigation revised and final – Navigation revised and final –

September 8 (7 ½ weeks)September 8 (7 ½ weeks) Storyboard SiteStoryboard Site

First storyboard session – September First storyboard session – September 6 (7 weeks+)6 (7 weeks+)

Rough storyboards due – September Rough storyboards due – September 12 (8 weeks)12 (8 weeks)

Storyboard revision session – Storyboard revision session – September 13 (8 weeks+)September 13 (8 weeks+)

Final storyboards due – September 19 Final storyboards due – September 19 (9(9 weeks)weeks)

Develop SiteDevelop Site First development session – First development session –

September 20 (9 weeks+)September 20 (9 weeks+) Last development session – October Last development session – October

10 (12 weeks)10 (12 weeks) Test SiteTest Site

Internal tests performed – October 11 Internal tests performed – October 11 (12 weeks+)(12 weeks+)

External tests performed – October 19 External tests performed – October 19 (13 weeks+)(13 weeks+)

Modify Site (if needed)Modify Site (if needed) Ongoing modifications as tests Ongoing modifications as tests

indicate.indicate. Final modifications done – October 31 Final modifications done – October 31

(15 weeks)(15 weeks) Publish Site – November 1 (15 weeks)Publish Site – November 1 (15 weeks)

Total time from proposal due date to site Total time from proposal due date to site publication: 15 weekspublication: 15 weeks

DesignDesign

ObjectivesObjectives1.1. HTML OverviewHTML Overview2.2. HTML BasicsHTML Basics3.3. Getting StartedGetting Started4.4. Customizing the Basic PageCustomizing the Basic Page5.5. HyperlinksHyperlinks6.6. TablesTables7.7. FormsForms8.8. MultimediaMultimedia9.9. FramesFrames10.10. CSSCSS11.11. JavaScript and JavaJavaScript and Java12.12. AppendicesAppendices13.13. Tag ReferencesTag References14.14. Additional ResourcesAdditional Resources

ContentContent1.1. HTML OverviewHTML Overview

What is it, what is it used for, what can a novice expect in attempting to learn it.What is it, what is it used for, what can a novice expect in attempting to learn it.2.2. HTML BasicsHTML Basics

What code looks like, rules of coding, good coding principles.What code looks like, rules of coding, good coding principles.3.3. Getting StartedGetting Started

The basic tags of an HTML document (<html> <head> <title> <body>), provide The basic tags of an HTML document (<html> <head> <title> <body>), provide descriptions of tags, show where and how to layout tags, and provide sample code.descriptions of tags, show where and how to layout tags, and provide sample code.

4.4. Customizing the Basic PageCustomizing the Basic PageMore basic tags (<font> <img>), introduce the concept of attributes and the available More basic tags (<font> <img>), introduce the concept of attributes and the available attributes for the tags introduced so far (<bgcolor> <font face size color> <img width attributes for the tags introduced so far (<bgcolor> <font face size color> <img width height>, show how to layout tags, and provide sample code.height>, show how to layout tags, and provide sample code.

5.5. HyperlinksHyperlinksIntroduce the concept of hyperlinks, how they work (provide visual examples of links), Introduce the concept of hyperlinks, how they work (provide visual examples of links), and introduce the <a href> tag. Discuss the attributes of the tag <a href src target>, show and introduce the <a href> tag. Discuss the attributes of the tag <a href src target>, show how to layout and provide sample code with visual examples of hyperlinks. Show how to layout and provide sample code with visual examples of hyperlinks. Show additional attributes <link alink vlink> and discuss the idea of customizing links for a additional attributes <link alink vlink> and discuss the idea of customizing links for a particular page.particular page.

6.6. TablesTablesIntroduce the concept of tables, providing examples of BOTH data tables and then layout Introduce the concept of tables, providing examples of BOTH data tables and then layout tables, introduce the <table> tag and its attributes, show how to layout code to maximize tables, introduce the <table> tag and its attributes, show how to layout code to maximize organization when hand coding, and provide sample code of both tabular tables and organization when hand coding, and provide sample code of both tabular tables and layout tables. STAY AWAY from specialized examples for a particular group (like layout tables. STAY AWAY from specialized examples for a particular group (like teachers, excel users, sales professionals). Provide techniques on how to achieve a teachers, excel users, sales professionals). Provide techniques on how to achieve a specialized table using attributes, and offer a links to additional, perhaps more specialized table using attributes, and offer a links to additional, perhaps more specialized, resources.specialized, resources.

Content (continued)Content (continued)7.7. FormsForms

Introduce the concept of forms, what forms look like in an online format, the different Introduce the concept of forms, what forms look like in an online format, the different options for gathering information, how to decide upon a particular option, introduce the options for gathering information, how to decide upon a particular option, introduce the tags and attributes <form action> <input value name>, show how to layout form in plain tags and attributes <form action> <input value name>, show how to layout form in plain html, show how to layout form using a table, and provide sample code. Again, stay away html, show how to layout form using a table, and provide sample code. Again, stay away from specialized examples.from specialized examples.

8.8. MultimediaMultimediaIntroduce the concept of multimedia (what it is and what it looks like on a web page), Introduce the concept of multimedia (what it is and what it looks like on a web page), illustrate the different types of multimedia (sound, video, outside elements [flash, illustrate the different types of multimedia (sound, video, outside elements [flash, JavaScript and java]), introduce the different methods of including multimedia a and the JavaScript and java]), introduce the different methods of including multimedia a and the tags to do so <embed> <bgsound> <a href>, note the different file formats and the tags to do so <embed> <bgsound> <a href>, note the different file formats and the standards on including extension and plug-in download links, show attributes, show how standards on including extension and plug-in download links, show attributes, show how to layout using plain html and tables, provide sample code.to layout using plain html and tables, provide sample code.

9.9. FramesFramesIntroduce the concept of frames, show examples of pages using frames, illustrate some Introduce the concept of frames, show examples of pages using frames, illustrate some of the problems in usability and accessibility when using frames, provide overview of tags of the problems in usability and accessibility when using frames, provide overview of tags and attributes <frameset> <frame>, show how to layout using visual examples (like the and attributes <frameset> <frame>, show how to layout using visual examples (like the links page) and provide sample code.links page) and provide sample code.

10.10. CSSCSSIntroduce the concept of CSS and the uses and benefits, explain the differences Introduce the concept of CSS and the uses and benefits, explain the differences (generally) between CSS and plain html, show examples visually (perhaps using external (generally) between CSS and plain html, show examples visually (perhaps using external sources), show how to layout and provide sample code.sources), show how to layout and provide sample code.

Content (continued)Content (continued)11.11. JavaScript and JavaJavaScript and Java

Introduce the concept of JavaScript and Java as programming languages, Introduce the concept of JavaScript and Java as programming languages, clearly explain the differences between html and a programming language, clearly explain the differences between html and a programming language, show examples visually or explain what JavaScript and Java can accomplish, show examples visually or explain what JavaScript and Java can accomplish, explain plug-ins, provide resources for finding outside applets, show how to explain plug-ins, provide resources for finding outside applets, show how to incorporate applets into page’s code, show how to layout and provide sample incorporate applets into page’s code, show how to layout and provide sample code. Do not get into specifics about Java programming.code. Do not get into specifics about Java programming.

12.12. AppendicesAppendicesInclude appendices for user’s reference of additional tags and attributes, web Include appendices for user’s reference of additional tags and attributes, web safe colors, special characters, an overview of how to FTP a site in order to safe colors, special characters, an overview of how to FTP a site in order to publish it, a CSS reference, and additional JavaScript and Java references.publish it, a CSS reference, and additional JavaScript and Java references.

13.13. Tag ReferencesTag ReferencesInclude a detailed tag reference of both tags introduced and their attributes, Include a detailed tag reference of both tags introduced and their attributes, tags not included or referenced in the tutorials, and the descriptions of those tags not included or referenced in the tutorials, and the descriptions of those tags and what they might be used for.tags and what they might be used for.

14.14. Additional ResourcesAdditional ResourcesAn appendix of additional resources for CSS, JavaScript and Java, Forms, An appendix of additional resources for CSS, JavaScript and Java, Forms, etc. This would be the appropriate place to reference resources available to etc. This would be the appropriate place to reference resources available to specialized audiences.specialized audiences.

NavigationNavigation Main PageMain Page

OverviewOverview HTML TutorialsHTML Tutorials

BasicsBasics Getting StartedGetting Started Customizing CodeCustomizing Code HyperlinksHyperlinks TablesTables FormsForms MultimediaMultimedia FramesFrames CSSCSS JavaScript and JavaJavaScript and Java

AppendicesAppendices TablesTables FormsForms MultimediaMultimedia FramesFrames CSSCSS JavaScript and JavaJavaScript and Java FTP ReferenceFTP Reference

ResourcesResources Additional Resources listed by Additional Resources listed by

categorycategory Specialized Resources listed by Specialized Resources listed by

specializationspecialization User ForumsUser Forums

Message boards, contact forms Message boards, contact forms for user questions, concerns, or for user questions, concerns, or tutorial requeststutorial requests

StoryboardStoryboard

ExecuteExecute

DemoDemo

CreditsCredits

Authors:Authors:• Brandi PisenoBrandi Piseno• Diane ZimmermannDiane Zimmermann

Demo Template courtesy of:Demo Template courtesy of:

The Template StoreThe Template Store

http://www.thetemplatestore.comhttp://www.thetemplatestore.com