sign in sign up
<<
Home , Web design, Web project

Student Learning Map Introduction to the Web I

Key Learning: Developing an understanding of the vast influence and impact the places on society and our daily lives.

Unit Essential Question:

How does the Internet work?

Concept: Concept: Concept: A brief history about the Internet Transferring information and the Current internet trends and how and what organizations "run" the basic languages and protocols of the web has changed the world internet. the web

Lesson Essential Questions: Lesson Essential Questions: Lesson Essential Questions:

• Who created the Internet? • How are , cables and • How has the Internet affected • How old is the Internet? other hardware used to transfer print media? • Who “runs” the Internet? information on the Internet? • How would you justify the use of • What information would you use • Why are web protocols in place? social media in the classroom? to support the need for • What is the purpose of the • How do you use the Internet in organizations to oversee the overall domain name system? your daily life? structure of the Internet? • Based on what you know, how would you explain HTML, XML, and PHP?

Vocabulary: Vocabulary: Vocabulary: File Transfer Protocol (FTP), host, server, Internet Protocols Mobile Internet, Multimedia, Internet Service Provider (ISP), (IPs), Domain Name System Online Media, Social Networks, search engine, IANA, ICANN, (DNS), extensions (.com, .org), WiFi IGF, W3C URL, HTML, XML, PHP, ASP,

, Flash, Network

Standards: PDE: Business, and Information Technology 15.4.12.B, D, ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students 1.d, 2.a, 2.d, 3.b, 3.d, 4.a, 5.a, 5.b, 5.c, 6.d National Business Education Standards Communication: I, IV, Information Technology: I, XVII

Revised January 19, 2014 Student Learning Map Web Design Basics Web Design I

Key Learning: Web design uses all the same elements as . Students will need to explore the and layout, handle fonts and colors, and put it all together in a format that gets the message across to the intended audience.

Unit Essential Question:

What way would you design a to meet the needs of its intended audience?

Concept: Concept: Concept: Elements of Good Design Fonts and How to Use Color

Lesson Essential Questions: Lesson Essential Questions: Lesson Essential Questions:

• What are the principles of • How is writing for the web • How would you determine what design? different than writing in print? to use for your • How do good lead the • How would you improve a Web website? eye through the design in a page’s appearance through the use • What can you do to synchronize deliberate so that the of fonts? your ? viewer sees what the • Why are em(s) or percentages a • Is a browser safe color palette wants? better choice to use on Web pages? really required?

Vocabulary: Vocabulary: Vocabulary: Lines and Linework, Shape, font, font family, serif, sans hexidecimal codes, color Texture, Color, Direction, serif, script, monospace, symbolism, trends, color wheel, Principles of Design, Balance, fantasy, font stack, font-family color theory, monochromatic, Contrast, Emphasis, Rhythm, style property, font size, font analogous, complementary, Unity, Alignment, Repetition, colors, leading, tracking, triadic Consistency, Contrast, White kearning, line-height, letter-

Space spacing property, background- color, font-weight, font-style, font-variant, relative font measures (px, em, %, ex)

Standards: PDE: Business, Computer and Information Technology Computer and Information Technologies - 15.4.12.A, D, G, ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students

Revised January 19, 2014 Student Learning Map Web Design Basics Web Design I

1.a, 1.b, 1.c, 2.a, 2.b, 2.c, 3.a, 3.b, 3.c, 4.a, 4.b, 5.b, 6.c, 6.d National Business Education Standards Information Technology - IV, V, VI, VII, XVI

Revised January 19, 2014 Student Learning Map Web Design Basics Web Design I

Concept: Concept: Concept: Concept: Concept: and Images Web Layout Basics Web Navigation Accessibility and Web Design

Lesson Essential Lesson Essential Lesson Essential Lesson Essential Lesson Essential Questions: Questions: Questions: Questions: Questions:

• What could be done to • What is the difference • Why is good navigation • What could be done to • How should you maximize the loading speed between padding and critical? maximize the accessibility evaluate web design of your pages? margins? • How do you determine of your Web page? software?

• How could you modify or • Why should use what should be included in • How can you make sure enhance an image create a white space? your navigation? your Web page is visual focal point for your • How does a designer • What do you think is following the Web page? determine the type of layout important to place on a recommended he/she should use? “Contact Us” page? guidelines?

Vocabulary: Vocabulary: Vocabulary: Vocabulary: Vocabulary: IMG (), GIF, PNG, JPG, headlines, navigation, information , accessibility, usability, HTML Editors, Adobe No Right-Click Script, images, textual content, organization, 404, search visually impaired, hearing Dreamweaver, Online Shrink Wrapping Images, points of interest, white impaired, physically Editors, WYSIWYG HTML

Watermarking, space, empty space, impaired, color blind, Editors, Text HTML Photoshop negative space, breathing design patterns, Editors, Free HTML room, text width, scan heuristics, W3C, Editors

length, padding, accessibility , alt

margins, fixed width txt layouts, liquid layouts,

lorem ipsum, place

Revised January 19, 2014 Student Learning Map Web Design Basics Web Design I

holder text, layout designs, layout templates, fold (above the fold)

Revised January 19, 2014 Student Learning Map Widgets Web Design I

Key Learning: Students will learn and understand how CSS is used to create consistency and allow for easy site-wide changes. The emphasis is on employing their understanding of design principles to inform the modifications and customizations they make to the widget’s Cascading Style Sheet.

Unit Essential Question:

What are the advantages to using CSS within web site designing?

Concept: Concept: Concept: How to analyze a widget How to analyze Wireframes, design comps, and customizing a widget

Lesson Essential Questions: Lesson Essential Questions: Lesson Essential Questions:

• What is the purpose of the • How does the • What font and color will you use widget? (balance, emphasis, color, tone, for titles or headings of your • What is its functionality? visual hierarchy, and so on) widget? • Who is the audience? communicate the content? • What font and color will you use • Who created the widget? • If there are images on the page, for descriptions of your widget? do they add value to the content, or • How will your navigation bar and are they for decoration and appeal? text navigation help visitors know If they add value, describe how. where they are? • How well does the layout of text • How can a wireframe aid in the help viewers understand the main design process? points of the site content?

Vocabulary: Vocabulary: Vocabulary: widget, accordions, tabbed Class, tag, ID, purpose, Phases of Web Project (Define, panels, buttons, dialog boxes, audience, design, visual layout, Structure, Design, Build and Test, pop-up windows, selection consistency structures, color Launch), design comp, boxes, toggle switches, slide scheme, visual hierarchy wireframe shows elements, content, bias, currency, source, ability to

corroborate information

Standards: PDE: Business, Computer and Information Technology Computer and Information Technologies - 15.4.12.A, D, G, K

Revised January 19, 2014 Student Learning Map Widgets Web Design I

ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students 1.a, 1.b, 2.a, 3.b, 4.b, 5.a, 6.a, 6.b National Business Education Standards Information Technology - IV, V, VI, VII, VIII, X, XI, XVI, XVII

Revised January 19, 2014 Student Learning Map Widgets Web Design I

Concept: Concept: Concept: Concept: Concept: Selecting and preparing Editing and customizing Adding a customized images CSS rules widget to a web page

Lesson Essential Lesson Essential Lesson Essential Lesson Essential Lesson Essential Questions: Questions: Questions: Questions: Questions:

• How can you produce • How do you change a CSS • How do you save and non-destructive editing of rule when editing a widget publish a customized widget images? in Dreamweaver? to your web page? • Compare and contrast how picture resolution on a computer screen is different than print resolution.

Vocabulary: Vocabulary: Vocabulary: Vocabulary: Vocabulary: copyright, CS6 tools, Dreamweaver Interface SPRY folders, Preview in cropping, straightening, Elements, Views (Design, Browser, remote server resizing, adjusting color, Code, Split, Live), Widget retouching, resolution, Browser, CSS Styles pixels

Revised January 19, 2014 Student Learning Map Web Design and Planning Web Design I

Key Learning: Students will work on a team and design for someone else, emphasizing the following: the design-team process for website development, team-client interaction for incorporating feedback and changes throughout the development of the site, and team-client communication using the design document and evaluating websites in preparation for the design.

changes throughout the development of the site, and teamUnit Essential Question-client communication using the design:

document and evaluating websites in preparation for the design.How does the use of design principles, website design analysis and good communication skills help a designer to create a website for a client?

Concept: Concept: Concept: Website analysis Define a web project Structure a web project

Lesson Essential Questions: Lesson Essential Questions: Lesson Essential Questions:

• How do you analyze websites for • What are the goals, target • What design elements would purpose, audience, usability, and audience, content, and delivery make your websites consistent? accessibility? requirements for the design • Why are wireframes an • What categories of information project? important part of the web design do you find in the websites? • Suppose you could choose your process? own design team. What would you • How would you decide what to look for to create a team destine for present to a client? success?

Vocabulary: Vocabulary: Vocabulary: Navigation systems, Integrated Class, tag, ID, purpose, , user interface, Animated screen audience, design, visual layout, flowchart, project overview, elements, Rich media consistency structures, color goals, objectives, messages, , Social media, scheme, visual hierarchy audience, delivery requirements, usability standards elements, content, bias, site content, site structure, currency, source, ability to visual design, corroborate information

Standards: PDE: Business, Computer and Information Technology Computer and Information Technologies - 15.4.12.A, D, F, G, H, I, J, K, ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students 1.a, 1.b, 2.a, 2.b, 2.d, 3.b, 3.c, 4.b, 4.d, 5.a, 5.b, 6.a, 6.b, 6.d National Business Education Standards Information Technology - IV, V, VI, VII, VIII, X, XI, XVI

Revised January 19, 2014 Student Learning Map Web Design and Planning Web Design I

Concept: Concept: Concept: Concept: Concept: Design a web project

Lesson Essential Lesson Essential Lesson Essential Lesson Essential Lesson Essential Questions: Questions: Questions: Questions: Questions:

• How can you produce non-destructive editing of images? • How do your two design comps address the client’s goals, audience, and content requirements? • What is the typical use of a in the design process?

Vocabulary: Vocabulary: Vocabulary: Vocabulary: Vocabulary: wireframe, storyboard, client feedback, prototype, revision

Revised January 19, 2014 Student Learning Map and Deployment Web Design I

Key Learning: Students will learn the design-team process for website development and deployment. Student teams will build and launch the client website, completing the full website production process.

Unit Essential Question:

How does the use of design principles, website design analysis and good communication skills help a designer to create a website for a client?

Concept: Concept: Concept: Web development best practices Implementing a reusable design Building a website

Lesson Essential Questions: Lesson Essential Questions: Lesson Essential Questions:

• What is the best practice for file • What are the benefits of reusable • What are the best practices for organization when designing a design? adding video, audio and other rich website? • How do such as media elements to a web page? • How do you use the CSS Styles CSS help make designs reusable and • What is the difference between panel to create and edit CSS rules? enable quick global changes? flash video and HTML5? • How can such things as code snippets, templates, CSS Starter Layouts, and other elements be reused?

Vocabulary: Vocabulary: Vocabulary: best practices, HTML1, HTML4, benefits of reusable design, internal and embedded style HTML5, Fluid Layouts, file templates, assets, libraries, sheets, external style sheets, management, file organization, assets panel, library objects, template, text, images, rich media, links, types of links div, CSS web-optimized file type and size (absolute, site-root-relative, and document-relative), link targets (_blank, _self, _parent, and _top), data tables, flash, HTML5, forms, image maps

Standards: PDE: Business, Computer and Information Technology Computer and Information Technologies - 15.4.12.A, D, F, G, H, I, J, K, ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students 1.a, 1.b, 2.a, 2.b, 2.d, 3.b, 3.c, 4.b, 4.d, 5.a, 5.b, 5.d, 6.a, 6.b, 6.c, 6.d National Business Education Standards Information Technology - IV, V, VI, VII, VIII, X, XI, XVI

Revised January 19, 2014 Student Learning Map Web Development and Deployment Web Design I

Concept: Concept: Concept: Concept: Concept: Designing for multiple Testing a website Publishing a website Presenting and launching screens a website

Lesson Essential Lesson Essential Lesson Essential Lesson Essential Lesson Essential Questions: Questions: Questions: Questions: Questions:

• What are various devices • What steps would you • What steps do you need • What are the primary for viewing ? take to guarantee quality? to take to publish your components of a website • How do you make design • When watching site website? that search engines crawl to decisions based on the visitors, how will you know find relevant search results? viewing screens? when they like what they see on your site?

Vocabulary: Vocabulary: Vocabulary: Vocabulary: Vocabulary: screen size, fluid grid quality assurance, test remote server, testing launching and marketing layouts, CSS Media plan, usability testing, server, internal a site, Search Engine Queries usability observation, development server, live Optimization (SEO), key publication terms, meta tags, head

content

Revised January 19, 2014 Student Learning Map Web Portfolios Web Design I

Key Learning: Students will learn with the Internet, portfolios can be electronic, easily and quickly sharing a designer’s work with anyone in the world. Portfolios communicate accomplishments, works

in progress, or personal history and showcase a person's work when applying for a job.

Unit Essential Question:

How do web portfolios affect society, business and communication?

Concept: Concept: Concept: Designing a Portfolio Constructing a Portfolio Review and Redesign of Portfolio

Lesson Essential Questions: Lesson Essential Questions: Lesson Essential Questions:

• What are the goals and uses of • Why is it important to optimize • Why are technical tests and peer portfolios? images for online publication? reviews a critical step in the design • How do you use portfolios to • Why would you provide contact process? communicate ideas? or a feedback form in your • When someone reads your • What are long term and short portfolio? portfolio, what do you want them to term goals of portfolios? think?

Vocabulary: Vocabulary: Vocabulary: web portfolio, skill set, training, design principles, page design design, content, peer review projects, career interests, principles, reusable design, professional goals, document properties, CSS accomplishments, learning plan, layouts web photo gallery, writing for the web

Standards: PDE: Business, Computer and Information Technology Computer and Information Technologies - 15.4.12.A, D, F, G, H, I, J, K, M ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students 1.a, 1.b, 1.d, 2.b, 3.a, 3.b, 3.c, 4.a, 4.b, 4.d, 5.a, 5.b, 5.c, 6.a, 6.b, 6.d National Business Education Standards Information Technology - IV, V, VI, VII, VIII, X, XI, XVI

Revised January 19, 2014