| 1.1 |
Safety Rules: Accurately read, interpret, and demonstrate adherence to safety rules, including rules published by the (1) National Science Teachers Association (NSTA), (2) rules pertaining to electrical safety, (3) Internet safety, (4) Occupational Safety and Health Administration (OSHA) guidelines, and (5) state and national code requirements. Be able to distinguish between rules and explain why certain rules apply. |
Lessons
|
| 2.1 |
Artificial Intelligence (AI) Enhanced Client Interactions: Introduce the use of AI tools for gathering and analyzing client requirements and feedback more efficiently. Discuss how AI can help predict client needs based on data. |
Lessons
|
| 2.2 |
Client Interview: Create a questionnaire and conduct an interview with a client to gather specific information to guide the web development project. Develop interview questions that will determine the purpose; target audience; branding and perception goals; content sources; and any factors that will affect the project schedule. |
Lessons
|
| 2.3 |
Project Brief: Using the information gathered from the client interview, write a project brief that identifies the goals, audience profile, audience perception, primary message of the website, and the competitive advantage of the client. Allow the client to review the project brief and make corrections based on client feedback. |
Lessons
|
| 2.4 |
Website Specifications: Research the specifications that will be required to produce a website that meets the needs of the project brief. Using the findings, produce technical specifications for the website. For example, the specifications should consider the screen resolution, browser compatibility, download time for the website, and accessibility. |
Lessons
|
| 2.5 |
Maintenance Requirements: Demonstrate an understanding of maintenance
requirements for a website that is aligned with the project brief. Develop a plan that
thoroughly describes how the site will be consistently updated and reviewed. Write a text
explaining the maintenance requirements and plan to a client. For example, a website
maintenance plan should include, but is not limited to, any automated processes for
changing content, required training for content contributors, and assignments for specific
updates (e.g., keyword, search engine, Metadata, and graphics). |
Lessons
|
| 3.1 |
Content Outline: Conduct a brainstorming session to solicit a client’s feedback on website content. Create an outline that organizes the content into categories. Ensure that the outline is aligned with the project brief and that there is space for future expansion. Present the outline to the client for review and approval. For example, use a mind mapping process to capture all the ideas and topics for a website development project. |
Lessons
|
| 3.2 |
Site Map: Applying the content outline, develop a diagram that visually represents the website structure. The site map (or website wireframe) should show the interconnection of features such as the homepage, links, and content for each link. For example, use software like Google Drawings, Microsoft Visio, OmniGiraffe, Adobe Illustrator, or Microsoft Office to create a website wireframe. |
Lessons
|
| 3.3 |
Wireframe: Convert the website wireframes to individual web page wireframes. A wireframe should consider each element (e.g., navigation, images, content, functionality, and footer) and group the information of its corresponding page. |
Lessons
|
| 4.2 |
Licensing: Compare and contrast royalty-free and rights-managed licensing and explain how each licensing affects the use of images. Research and describe the process to obtain permission to use copyrighted photography. |
Lessons
|
| 4.3 |
Photo sharing: Investigate multiple photo-sharing services and how they embed
metadata within images to assist in keyword searches. As a class, create a photosharing system (class use only) for student-created images that include embedded
metadata. |
Lessons
|
| 5.1 |
Digital Images: Demonstrate an understanding of how specific characteristics affect the
quality and size of a digital image. Define the following terminology and explain their
effects on digital images:
a. pixels,
b. color depth,
c. resolution,
d. palettes, and
e. dithering. |
Lessons
|
| 5.2 |
Types of Graphics: Compare and contrast raster and vector graphics and provide
scenarios when it is best to use each format. Further, explore their applications to vector-based drawing and paint programs. Describe the advantages and disadvantages of
using each program type. |
Lessons
|
| 5.3 |
AI-Enhanced Imagery in Web Design: Utilize AI technologies to generate and enhance
images for web design, ensuring visually compelling and optimized content for diverse
user interfaces. Apply AI tools for image creation, enhancement, and optimization, aligning
with web standards for speed, accessibility, and aesthetic appeal. |
Lessons
|
| 5.4 |
File Format: Research and identify the extensions of various image file formats like
Bitmap, Tagged Image File Format, Windows Metafile, Joint Photographic Experts Group,
Portable Network Graphics, and Graphics Interchange Format. Describe which file formats
are supported by all browsers and which formats require special software or a plug-in to
view an image. Explain when it is most appropriate to apply specific image file formats. |
Lessons
|
| 5.5 |
Image Optimization: In teams, investigate image optimization and its importance.
Describe how file formats influence image optimization and identify optimization guidelines
and sources to apply to web graphics. |
Lessons
|
| 5.6 |
Composition: Explain the graphic design concept of composition. Include various
applications like visual hierarchy, grouping, visual cues, and integration of elements. |
Lessons
|
| 5.7 |
Grid-Based Layout: Explore the use of grid-based layout and why it is used to create
coherent, organized web pages. Give examples of when it is suitable to use one-, two-, and
three-column layouts to display content. For example, research and discuss how the golden
ratio (golden mean) is used to create a design grid. |
Lessons
|
| 5.8 |
Typography: Drawing on multiple resources, demonstrate an understanding of
typography, including related definitions like measure and lead. Explain a designer’s
application of the following typography characteristics to create balance and relationship
between elements on a web page.
a. Legibility
b. Typeface
c. Case
d. Emphasis
e. Type size and accessibility |
Lessons
|
| 6.1 |
Color Perceptions: Conduct research to determine how various colors are perceived by
specific audiences and cultures. Citing evidence from research findings, explain the
following concepts:
a. symbols, objects, and images that attract or repel audiences;
b. color combinations that complement each other; and
c. smooth color transitions and the effects on download time.
For example, create a class demonstration showing which colors are most complementary
and how many colors define a color scheme. |
Lessons
|
| 6.2 |
Pixels and Display Color: Demonstrate an understanding of the relationship between
pixels and display color. Explain how black and white are each created using color
schemes CMYK (cyan, magenta, yellow, and black) and RGB (red, green, blue) respectively.
Furthermore, describe the differences between subtractive and additive colors and how
they are applied to print media versus a computer monitor display. |
Lessons
|
| 6.3 |
Standardized Numeric Formats: Consider the two standardized numeric formats for color on the computer screen—RGB values and Hexadecimal code. Compare and contrast the format of values for each and briefly explain how they are applied to represent color. |
Lessons
|
| 7.1 |
Writing Styles: In teams, research writing styles on various websites including sites of
well-known organizations and companies. Identify characteristics that are consistently
used and include examples of what made the text memorable and easy to scan. Use the
research findings to create guidelines for the class to apply to upcoming web design and
development projects. During the survey of writing styles on the web, take notice of the
following:
a. location of important information on the page,
b. use of bulleted lists and tables,
c. length and simplicity of paragraphs,
d. headlines and introduction sentences,
e. tone and voice used, and
f. accuracy of information (current or outdated). |
Lessons
|
| 7.2 |
Writing Guidelines: Given a specific topic from a web development project, write content
for a web page and apply the class writing guidelines. Proofread and rewrite the
content to align with the class guidelines. Give the writing assignment to multiple
classmates for review. Revise the content based on reviewer feedback. Follow this multistep
process until the written product is appropriate for publication on a website. |
Lessons
|
| 8.1 |
Logos: Research various logos of well-known companies and organizations on the web.
Identify shapes and colors that are consistently used, and include examples of what
made the logos unique, attractive, and memorable. |
Lessons
|
| 8.2 |
Brand Management: Drawing from various resources, identify several ways that a web
designer can apply and strengthen brand management and identity. Consider the
concepts of consistent color and logo placement and explain the application of each. |
Lessons
|
| 8.3 |
eCommerce: Investigate how to set up and implement a secure e-commerce site. Citing
evidence from reliable resources, describe 1) measures to prevent shopping cart
vulnerabilities, 2) pre-built shopping software, and 3) hosting options for shopping cart
software. |
Lessons
|
| 8.4 |
Marketing: In teams, examine how demographics, psychographics, and audience data
are used to market a product or service online. Using this information, create a
questionnaire to survey people about a product or service. For example, the questionnaire
could survey alternative promotion methods, market growth drivers, and barriers. |
Lessons
|
| 8.5 |
Marketing Plan: As a team, use the survey results and develop a marketing plan that
identifies the following for a web development project.
a. Promotions for both global (mass) and niche (micro) markets
b. Web marketing strategies and goals
c. Market growth drivers and barriers
d. Product distribution and availability
e. Product or service pricing
f. Advertising options to be used (e.g., links, banner ads, viral marketing, social media) |
Lessons
|
| 8.6 |
AI and XR in Branding and Marketing: Integrate AI tools for market analysis, customer
behavior prediction, and personalization strategies. Explore the potential of extended
reality (XR) in creating immersive brand experiences. |
Lessons
|
| 9.1 |
Markup Language: Research the history of markup languages; briefly describe the function of markup languages and why they are different from programming languages. |
Lessons
|
| 9.2 |
HTML: Explore the origin of the HTML standard and the creation of the World Wide
Web Consortium (W3C). Discuss the six versions of the HTML standard and how each
differs from the other. Explain the role of standardization and provide examples of how it
promotes universality for all web users. |
Lessons
|
| 9.3 |
HTML Tags: Define HTML tags distinguishing between empty tags and container tags.
Explain their application to web development, why Hypertext Markup Language (HTML)
evolved, and provide examples of tags frequently used. Create a simple web page that
consists of paragraph text, text hyperlinks, tables, and elements in frames. |
Lessons
|
| 9.4 |
Cascading Style Sheets: Demonstrate understanding of Cascading Style Sheets (CSS). Investigate and report how CSS separates formatting elements from HTML and solves a number of design limitations, such as the following: a. proprietary HTML extensions, b. text-to-image conversion to retain fonts, c. page layout using tables, and d. images controlling white space. |
Lessons
|
| 9.5 |
Use of Cascading Style Sheets: Explore the use of Cascading Style Sheets (CSS) for page
layout and cite evidence as to why CSS provides more flexible and precise layout
capabilities than tables and frames. Explain and demonstrate coding for the following
elements of CSS page layout.
a. CSS box model (e.g., inline, block) b. Document flow and positioning (e.g., static, relative, absolute, fixed, float, z-index)
c. CSS positioning schemes (e.g., two-column layout, three-column layout) |
Lessons
|
| 10.1 |
Effective use of File/Folder Management: As a class, define the guidelines for effective use
of file and folder management techniques to maintain directory structure for
forthcoming website class projects. The guidelines should address efficient methods for
maintaining site root and subfolders for assets (e.g., images, templates, CSS), as well as the
correct way to use file paths for relative, site root relative, and absolute links. |
Lessons
|
| 11.1 |
Troubleshooting and Problem Solving: Troubleshooting and formal testing is a
systematic quality assurance process and should be routinely completed throughout
the life cycle of a website. There are various multistep testing procedures for a website.
The following recommendations provide a general approach to testing:
a. review the content for accuracy, spelling, and grammar;
b. review site for broken links;
c. test the functionality of the website as defined by the project specifications;
d. validate the HTML and CSS coding;
e. check the accessibility using automated tools;
f. test site on various browsers that the target audience uses;
g. analyze the connection speed and size of web pages;
h. conduct usability testing with the target audience;
i. work with the server administrator to conduct load testing; and
j. conduct authentication testing and review file authorizations.
As a class, develop a quality assurance plan that incorporates the above testing procedures,
as well as outlines how the testing will be managed, how the issues will be prioritized, and
how problems will be solved. |
Lessons
|
| 12.1 |
Team Project with Data Analysis: As a team, identify a problem related to the program of
study as a whole. Research and utilize the Engineering Design Process to design a
solution. Document the following steps in an engineering design notebook for inclusion in
the program portfolio. When possible, connect the problem to an existing CTSO event.
a. Problem Identification: Brainstorm specific problems and challenges within the
program of study. Conduct basic research to understand the scope and implications
of the identified problem. Identify one problem as a focus area.
b. Research and Analysis: Conduct in-depth research on chosen topics related to the
problem. Locate and analyze a dataset related to the problem.
c. Review the Stages of the Engineering Design Process: Define the problem,
research, brainstorm solutions, develop prototypes, test and evaluate, and iterate.
Consider constraints such as cost, efficiency, and environmental impact during the
design process.
d. Project Implementation: Assign specific roles within the design teams (e.g., project
manager, researcher, designer, tester). Design a solution tailored to address the identified problem or scenario. Document progress through design journals,
sketches, diagrams, and digital presentations. (Note: Prototype is optional in the
Level II course.)
e. Presentation and Reflection: Showcase the problem and solution to the class.
Share the data that was analyzed and how it affected the solution. Discuss the design
process and challenges. As a class, critically evaluate the effectiveness and feasibility
of the solutions and propose potential improvements. |
Lessons
|
| 4.1 |
Stock Images: Explore the use of stock images and demonstrate an understanding of the various types of stock images like stock photography, microstock photography, and free (e.g., open source) images. Identify the advantages and disadvantages of using these images. |
Lessons
|
