Standards Based Web Site Development


 

Objectives and Standards:

 

Course Description:

This self-paced course is designed to provide the necessary skills and training for an entry-level position in the field of WEB Design for a Business and Administrative Services Cluster. This class will focus on web page planning, basic design, layout, and construction, effective and ineffective, setup and maintenance of a web site, HTML, DHTML, Java Script and various web page and image creation tools. This course is taught in a PC environment, but all the skills are transferable to the MAC.

 

Course Goals:

The goal of the program is to develop the student’s marketable skills, abilities, attitudes, and work habits so that the student will be prepared to do one or more of the following:

  1. Secure employment
  2. Upgrade present skills
  3. Enter advanced vocational training
  4. Pursue college related courses

 

Student Performance Objectives:

Upon successful completion of the course, the student will be able to:

  1. Define terms associated with the World Wide Web and the hypertext markup language.
  2. Demonstrate an advanced knowledge of the Internet and the various tools utilized including: Browsers, email clients, FTP clients, compression utilizes, newsreaders and search utilities.
  3. Demonstrate an understanding of basic WEB page design principles
  4. Demonstrate awareness of design considerations that affect WEB page construction including audience, browser version, and cross platform issues.
  5. Demonstrate knowledge of how to design and create effective and structured web pages using HTML and DHTML.

 

Recommended Prerequisites:

  1. Typing 25 wpm, Windows 95/98, knowledge of word processing, Word or Word Perfect, and the internet knowledge
  2. Must be 16 years old or a junior or senior in high school, an out of school youth or an adult.

 

Career preparation Standards

    1. Understand how personal skill development; including positive attitude, honesty, self-confidence, time management, and other positive traits that affect employability.
    2. Demonstrate an understanding of classroom policies and procedures.
    3. Discuss importance of the following personal skills in the business environment. As;

                                                               i.      Positive attitude

                                                             ii.      Self confidence

                                                            iii.      Honesty

                                                           iv.      Perseverance

                                                             v.      Self management and work ethic

                                                           vi.      Pride in product work

                                                          vii.      Dependability

    1. Identify acceptable business attire
    2. Establish goals for self improvement and further education and training
    3. Priories tasks and meet deadlines.
    4. Understand the importance of initiative and leadership [
    5. Understand the importance of lifelong learning in a world of consistently changing technology

 

Understand principles of effective interpersonal skills, including group dynamics, conflict resolution and negotiation.

 

    1. Identify and discuss behaviors of an effective team
    2. Explain the central importance of mutual respect in workplace relations
    3. Discuss and demonstrate strategies for conflict resolution and negotiation, and explain their importance within the business environment
    4. Understand laws that apply to sexual harassment in the workplace, and identify tactics for handling harassment situations
    5. Work cooperatively working relationships and proper etiquette across gender and cultural groups

 

Understand the importance of good academic skills, critical thinking, and problem solving skills in the workplace

 

A.     Recognize the importance of good academic skills in information technology and implement a plan for self-improvement as needed.

  1. Exhibit critical and creative thinking skills and logical reasoning skills, and employ these skills for problem solving.
    1. Work as a team member in solving problems
    2. Diagnose the problem, its urgency, and its courses
    3. Identify alternatives and their consequences
    4. Explore possible solutions
    5. Compare and contrast the advantage and disadvantages of alternative
    6. Determine appropriate actions.
    7. Evaluate results of actions taken

 

Understand principles of effective communication.

1.      Use communication concepts in application of skills, techniques, and operations

2.      Prepare written material

3.      Analyze written material

4.      Understand and implement written instructions, from technical manuals, written communications and reference books.

5.      Present a positive image through verbal and non-verbal communication and understand the power of body language in communication.

6.      Demonstrate active listening through oral and written feedback

7.      Give and receive feedback

8.      Demonstrate assertive communications

9.      Demonstrate proper etiquette in business communications, including an awareness of requisites for international communications, language, customs, time zones, currency and exchange rates.

10.  Demonstrate writing and editing skills as follows:

1.      Write, proofread, and edit business correspondence

2.      Use correct grammar, punctuation, capitalization, vocabulary and spelling.

3.      Select and use appropriate forms of technology for communication

11.  Exhibit a proficiency in the use of reference books

12.  Research, compose and orally present information for a variety of business situations utilizing appropriate technology

 

Understand career paths and strategies for obtaining employment

1.      Develop a career portfolio, including the following documents

a.       Job applications

b.      Resume

c.       Appropriate cover and follow up correspondence

2.      Identify and demonstrate effective interviewing techniques.

 

Understand and adapt to changing technology

 

  1. Identify and explain how people, information, tools, machines, energy, capital, physical space, and time influence the selection and use of networking technologies.
  2. Demonstrate the ability to use personal computers for loading and retrieving data, information gathering, measurements, and writing about and explaining computer networking.
  3. Identify the characteristics and explain the importance of adapting to changes, being flexible, and evaluating goals when working in the computer networking industry.
  4. Understand the importance of life-long learning to changing technology.

 

Understand the importance of ethics in information technology skills and fields

 

  1. Discuss social and ethical responsibilities attached to access to information
  2. Discuss rights to privacy of individuals with regard to information
  3. Understand that copyright violations are theft
  4. Discuss copyright laws and distinguish copyright violations in a variety of situations
  5. Demonstrate ethical choices in workplace situations.
  6. Distinguish between first amendment freedoms and access to information

 

Instructional Units:

 

    1. Orientation and Procedures

                                                               i.      Safety Unit

                                                             ii.      Classroom policies

                                                            iii.      Overview of equipment

                                                           iv.      Expectations and evaluations

                                                             v.      Skill assessment

    1. Introduction to the internet

                                                               i.      Internet service Providers, ISP’s, connecting to the internet

                                                             ii.      Software tools, Browsers, E-Mail, FTP clients, compression utilities, telnet, security, PGP, SSL

                                                            iii.      Internet WEB addresses, URL, domain name, e-mail address

                                                           iv.      Searching the Internet

1.      Directory Search

2.      Boolean Search

    1. Principles of WEB Design

                                                               i.      Print verses WEB and How it affects design

1.      Color

2.      Updates

3.      Distribution

4.      File Size

5.      Multimedia

6.      Accessibility

    1.  Design Principles

a.       Alignment

b.      Updates

c.       Distribution

d.      Repetition and consistency

e.       Contrast

f.        Spelling and proofreading

    1. Navigational System and Interface Design

                                                               i.      Horizontal format

                                                             ii.      Navigational design

                                                            iii.      Frames

                                                           iv.      Repeating themes

                                                             v.      Multiple Navigational M Methods

                                                           vi.      Site Maps

                                                          vii.      Linking

                                                        viii.      Cross Platform issues

                                                           ix.      Content placement

                                                             x.      Depth of site

                                                           xi.      Usability tests

  1. Color
    1. CMYK Color
    2. RGB Color
    3. HSL
    4. Indexed color
    5. Bit Depth
    6. Monitor resolution
    7. Image resolution
    8. Browser safe colors
  2. Production to Imaging
    1. GIF file format
    2. Interfaced verses non interlaced
    3. Transparency
    4. 256 color limitations
    5. JPEG file
    6. PNG files
    7. What format is best for different types of images
    8. Anti aliening
    9. File size
    10. Compression utilizes
    11. Image maps
    12. Dicing images
    13. Alternate text
    14. Thumbnails
    15. Preload graphics
    16. Acquiring artwork for WEB sites
    17. Image sites on the WEB
    18. Scanning images
    19. Digital Cameras
    20. Creating your own image
  3. Web sites and Typography
    1. Readability verses legibility
    2. Font support
    3. Text colors
    4. Font styles on the WEB
    5. Style sheets
    6. Dynamic Fonts
  4. Site Maintenance
    1. Site software
    2. Files names
    3. Folders
    4. Browsers checks
    5. Updates frequency
    6. Uploading
    7. Site maps
    8. Information architecture
    9. Site registration
    10. Meta tags
    11. Submission services
    12. Link exchange banner services
    13. Advertising
    14. Email
    15. Lead tracking
    16. Site statistics
  5. HTML- using Notepad
    1. Planning the site
    2. Test editor verses HTML
    3. Four basic Tags
    4. Linking HTML documents
    5. Print HTML documents
  6. Formatting an HTML Document
    1. Ordered, unordered
    2. Formatting text
    3. Adding line breaks
    4. Preformatted text
    5. Address tags
    6. Organizing your code

 

           

 

 

 

 

Students will:

1.      Demonstrate and develop their teamwork, research, production and evaluation skills.

2.      Research corporate and e-business sites for consistent page design, branding presentation, image, and web programming code reuse.

3.      Develop Personal WEB pages for students that showcase their skills and goals. Design each page with informative information.

2.0 Reading Comprehension (Focus on Informational Materials)

Structural Features of Informational Materials

2.1 Analyze the structure and format of functional workplace documents, including the graphics and headers, and explain how authors use the features to achieve their Purposes.

2.2 Prepare a bibliography of reference materials for a report using a variety of consumer, Workplace, and public documents.

4.      Develop informative and understandable WEB pages for business and the high school.

Reading

1.0 Word Analysis, Fluency, and Systematic Vocabulary Development

Students apply their knowledge of word origins to determine the meaning of new words

Encountered in reading materials and use those words accurately.

Vocabulary and Concept Development

1.1 Identify and use the literal and figurative meanings of words and understand word

Derivations.

1.2. Distinguish between the denotative and connotative meanings of words and interpret the connotative power of words.

Comprehension and Analysis of Grade-Level-Appropriate Text

2.6 Demonstrate use of sophisticated learning tools by following technical directions

(E.g., those found with graphic calculators and specialized software programs and

In access guides to World Wide Web sites on the Internet).

 

5.      Research effective navigation, presentation and communication of ideas and knowledge as it applies to the web media, incorporate various methods for writing and designing WEB pages. Each WEB page is a writing magnet. Where students were not stimulated to write previously, a students writing skills soar when a WEB page development and completion is the reason for writing

Writing Standards

1.0 Writing Strategies

Students write coherent and focused essays that convey a well-defined perspective

and tightly reasoned argument. The writing demonstrates students’ awareness of the audience and purpose. Student’s progress through the stages of the writing process as needed. A WEB page development and continuous re-writing will complete this.

Organization and Focus

1.1 Establish a controlling impression or coherent thesis that conveys a clear and distinctive perspective on the subject and maintain a consistent tone and focus throughout the piece of writing. Each WEB page has it’s own theme from Sports themes to current events.

1.2 Use precise language, action verbs, sensory details, appropriate modifiers, and the active rather than the passive voice. This is extremely important that each student write in precise language.

Research and Technology

1.3 Use clear research questions and suitable research methods (e.g., library, electronic media, personal interview) to elicit and present evidence from primary and secondary sources.

1.4 Develop the main ideas within the body of the composition through supporting evidence (e.g., scenarios, commonly held beliefs, hypotheses, definitions).

1.5 Synthesize information from multiple sources and identify complexities and discrepancies in the information and the different perspectives found in each medium

(E.g., almanacs, microfiche, news sources, in-depth field studies, speeches, journals,

 

6.      Create Rubrics that judge the navigability, communication effectiveness and reusability of web page templates.

1.      Benefits for Students:

A.     Interpersonal, teamwork, and leadership skills necessary to function in multi cultural business settings.

B.     Select and apply the tools of technology as they relate to personal and business decision-making.

C.     Career awareness and related skills to enable students to make viable career choices and become employable in a variety of business careers.

D.    Communicate effectively as writers, listeners, and speakers in social and business settings.

E.     Become entrepreneurs by drawing from their general understanding of all aspects of business.

F.      Ability to participate in business transactions in both the domestic and international arenas.

G.    Create Web Page Templates for hypothetical and real world clients given the clients content and audience needs.

 

7.      Develop pages with HTML’s, JAVA, and FlASH. Students will use these programs and programming language after methods of WEB page development has been established with WORD or other programs that simplify the process.

 

Mathematical Analysis Standards

This discipline combines many of the trigonometric, geometric, and algebraic techniques

Needed to prepare students for the study of calculus and strengthens their

Conceptual understanding of problems and mathematical reasoning in solving problems. The introduction of programming to our curriculum could be used to stimulate our mathematical standards

 

These standards take a functional point of view toward those topics. The most significant new concept would be the various programming methods to develop WEB pages but with “advance” mathematical skills we will also incorporate programmable skills with the use of WORD, PowerPoint, Flash, and other “canned” programs.

 

GRADES EIGHT THROUGH TWELVE—ADVANCED PLACEMENT PROBABILITY AND STATISTICS

10.0 Students know the definitions of the mean, median, and mode of distribution of data

and can compute each of them in particular situations.

14.0 Students organize and describe distributions of data by using a number of different

Methods, including frequency tables, histograms, standard line graphs and bar graphs, stem-and-leaf displays, scatter plots, and box-and-whisker plots

 

Teachers will:

1.      Explain the overwhelming need for and provide activities supporting team building in business and the classroom.

2.      Provide students with WEB site and strategy research, areas of web design to focus on, and handouts of good web design.

3.      Lead in the creation of working rubrics for evaluation of web page templates.

4.      Create and assign hypothetical clients and promote real world clients in order for student project teams to interview and create templates.

 

Abstract of Plan/Project:

1.      Student teams research and develop standard web page templates that emphasize ease of navigation, clarity of communication, and reusability of programming code in this new medium. Students develop teamwork, project organization and programming skills as they develop template pages for real clients.

2.      The BATA WEB Team is using school/business collaborations that address the vocational training and basic academic, stimulate continuation of learning skills and social needs of educationally disadvantaged youth who are deemed to be at risk of not graduating from high school and prepares them for a wide range of job opportunities. The program makes the educational experience of students meaningful by linking academic course work with vocational education and employment opportunities in local businesses. We offer a course of study that integrates the core academic program (English, math, and social studies) with technical courses in computer and business technology. Students in the program have frequent contact with industry through field trips, guest speakers, and perhaps, individual mentors. Classes are smaller and individual attention is emphasized. Networked computers and multimedia technology have allowed teachers to show dramatic results in accelerating students’ mastery of basic skills and improving their critical thinking and problem solving skills. Our students will be developing WEB pages in a state of the art format with 11th grade, and 12th graders who are receiving work experience positions during their last semester before graduation.

3.      The computerized curriculum accommodates many different learning styles and permits the students to learn new material in small steps. It also involves students on a multi-sensory level. Exciting multimedia technologies including graphics, audio, and animation capture the attention of learners, motivating them to learn by making learning fun and rewarding. The curriculum instructs and motivates through its practical application to real-life situations and strengthens the higher order thinking skills needed for the future.

Resources Needed:

At WHS we have all the programs we need except for Dream Weaver but do have FrontPage. We also have some licenses for Photoshop 5 and have access to DRAW. But here is additional information for other programs.

1.      Access to computers connected to the web on a daily basis.

2.      A WYSIWYG web editor. The Composer in Netscape is sufficient, but a CTAP license for Front Page is very cost effective. My personal recommendation is DREAMWEAVER at a $99 academic discount.

3.      A text editor. WordPad or Simple Text editors are sufficient, but any word processor will work, or the HTML editor in Dream weaver.

4.      A Paint program. This may need to be purchased separately unless an effective program is bundled with your computer, scanner or camera. The ability to load and save in GIF or JPEG formats is the minimum requirement. I recommend purchasing PHOTOSHOP as soon as possible, an academic upgrade is $199, purchase is $279.

5.      A scanner or digital camera. The price for scanners is at an all time low, and most do include a rudimentary Paint program. A high-resolution camera is not necessary for web page production. We already have some on campus and perhaps, two other higher-level scanners would be useful.

6.      We have been contacting and promote clients such as fellow teachers, other classes, extracurricular programs, school and district programs, and local volunteer, and non-profit programs. We would like to sell our Virtue Yearbook Concept!

 

Evaluation/Assessment Measures Used:

 

In BATA we have developed a business plan for the Virtual Yearbook. Each JUNIOR in BATA has developed their own WEB page, thus, the marketing tool for other student sales.

1.      A business model must be emphasized to prepare students for the world of work. Enthusiasm, attendance and time on task must be evaluated with daily points assigned by the instructor.

2.      Team members based on their evaluation of each persons contribution must allocate team points.

3.      A rubric that scores from 1 to 4 in several categories will also be used as a whole class exercise and those points added to the team score.

4.      Clients (Students), Private businesses and Teachers must also evaluate the templates and assign points using the same rubrics.


Additional Resources:

1.      A Generic GIF of a sample template based web page site design.

2.      A Generic page with source code and without images that may be copied and reused by teachers. The layout is based on the GIF sample shown in #1.

3.      How Users Read on the Web article.

4.      The accompanying chart for how Users read...

5.      The top Web Page Tools for your consideration.

6.      Some of the best URLs for web design research.

 

Conclusion:

 

We feel it important that students develop our WEB pages and teachers become part of the process.