Web Design

  • Students will gain the skills and project-based experience needed for entry into web design and development careers.
  • Students will be able to use a variety of strategies and tools to create websites.
  • Students will develop awareness and appreciation of the myriad ways that people access the web and will be able to create standards-based websites that are accessible and usable by a full spectrum of users

    www.wikiwebstudio.com
    http://www.wikiwebstudio.com

Goals:

1. Learn how to effectively design and maintain quality web pages
2. Understand the importance of technology in today’s work and school setting
3. Learn ways to create and manipulate images
4. Understand the rights and responsibilities of the internet, media and journalists

   Syllabus

Syllabus andQuiz01 Syllabus andQuiz01 [Cont.]

Proj01: “Me” Web Page

Proj01: “Me” Web Page[Cont.] Basic Computer Skills: Windows XP Windows XP Quiz

Basic Computer Skills: Using a Web Browser

ForumRegistration andCheck In

Week 2 UNIT 1: DESIGN PRINCIPLES

Forum Topic 1: Aesthetics

Design Principle #1: Proximity

Proj02: Proximity Poster

Proj02: Proximity Poster[Cont.] Proj02: Proximity Poster– Feedback and Finalized Designs Design Principle #2:Alignment

Proj03: Alignment Poster

Proj03: Alignment Poster[Cont.]
Week 3 Forum Topic 2: Confidence

Proj03: Alignment Poster– Feedback and Finalized Designs

Design Principle #3: Repetition

Proj04: Flyer Redesign Design Principle #3: Repetition

Proj05: Repetition Poster

Proj05: Repetition Poster [Cont.] Proj05: Repetition Poster– Feedback and Finalized Designs
Week 4 LABOR DAY HOLIDAY NON-STUDENT DAY Forum Topic 3: Contrast

Design Principle #4: Contrast

Proj06: Contrast Poster

Proj06: Contrast Poster [Cont.] Proj06: Contrast Poster – Feedback and Finalized Designs
Week 5 Forum Topic 4: Critique

Principles Review(5 pages)

Principles Quiz

Proj07:

Part 1

Part 2

Proj07:

Part 3

Proj07:

Part 4 – Feedback & Refine

Proj07:

Part 4 – Feedback & Refine [Cont.]

Week 6 UNIT 2: INTRO to DREAMWEAVER

Forum Topic 5: Composition

Chapter A: Intro, Lessons 1 & 2

Chapter A: Lessons 3 & 4 Chapter A: Lessons 3 & 4 [Cont.] Chapter A: Lessons 3 & 4 [Cont.] Chapter A: Lesson 5

Review

Week 7 Forum Topic 6: Balance

Chapter A:
Project Builder 1

Chapter A:Project Builder 2 Chapter A:
Design Project
Chapter A:
Group Project
Chapter A:
Group Project[Cont.]Quiz
Week 8 Forum Topic 7: Feedback

Chapter A:
Quiz
UNIT 3: MAKING a WEB PAGE

Chapter B: Intro and Lesson 1

Chapter B: Lesson 2 Chapter B: Lesson 2 [cont.] Chapter B: Lesson 3
Week 9 Forum Topic 8: Adding Images to Posts

Chapter B: Lesson 4

Chapter B: Lesson 5 Chapter B:Review TART Showcase Chapter B: Lessons Redux

END OF QUARTER


Week 10 Forum Topic 9: Collaboration

Chapter B: Group Project

Chapter B:Group ProjectFeedback & Refine Chapter B:Project Builder 1 Chapter B:Project Builder 2 Chapter B: Quiz
Week 11 UNIT 4: TEXT and GRAPHICS

Forum Topic 10: Hierarchy

Chapter C: Intro and Lesson 1

Chapter C: Lesson 2 New student logins

Chapter C: Lesson 3

Chapter C: Lessons 4 and 5 REDO Day: blooms, rapids and jacobs
Week 12 NON-STUDENT DAY Chapter C:Review Chapter C:Project Builder 1 Chapter C:Project Builder 2 Technical Problems
Week 13

 

 


Week 13/14 add on

Technical Problems

 

———

What programming languages do you need to know?

Forum Topic 11: Usability

Chapter C:
Design Project


Javascript for beginners

https://www.codecademy.com/learn/javascript

 

Chapter C:
Group Project 


Ruby for beginners

https://hackhands.com/beginners-guide-ruby/

https://www.ruby-lang.org/en/documentation/quickstart/

Chapter C:
Group Project[Cont.]


Python for beginners

https://www.python.org/about/gettingstarted/

http://introtopython.org/

 

Demo: Editing images for the Web

Chapter C:
Group Project[Cont.]

Week 14 Chapter C:
Group Project[Cont.]Chapter C: Quiz
VETERAN’S DAY HOLIDAY Catch-Up Day


Fun project!

Animate your name

UNIT 5: WORKING with LINKS

Chapter D: Intro and Lesson 1

Chapter D: Lessons 2 & 3
Week 15 Chapter D: Lessons 4 & 5 Chapter D:Review Graphics for the Web – Tutorial 01: Navigation Buttons Chapter D:Project Builder 1 Chapter D:Project Builder 2
BREAK
THANKSGIVING HOLIDAY
Week 16 Chapter D:Design Project Chapter D:Design Project[Cont.]

Chapter D:Group Project

Chapter D:Group Project[Cont.] Chapter D:Group Project[Cont.]

Quiz

Video: History of Computers
Week 17 Proj 08: Internet History Proj 08: Internet History [Cont.] Chapter D: Quiz

Final Project: Part 1

Final Project:
Part 1
Part 2
Final Project: Part 3

Last Day for Late Work

Week 18 Final Project: Part 3 [Cont.] Final Project: Part 3 [Cont.] END OF SEMESTER
UNIT 6: GRAPHICS for the WEB

Chapter 16: Intro, Lessons 1 & 2

Chapter 16: Lessons 3 & 4 Chapter 16: Lessons 4 & 5 Chapter 16: Lessons 5 & 6

Review

Chapter 16: Review
Week 20 Martin Luther King Jr. Holiday Unit 6 Special Tutorial: Saving Photoshop Slices for the Web Chapter 16:Group Project Chapter 16:Group Project[Cont.] Chapter 16:Group Project[Cont.]

Quiz

Week 21 UNIT 7: TABLES

Chapter E: Intro & Lesson 1

Chapter E: Lessons 2 & 3 Catch-Up Day

Animation

Chapter E: Lessons 4 & 5 Chapter E: Review
Week 22 Staff Development (no school) Chapter E: Project Builder 1 Chapter E: Project Builder 2 Chapter E: Group Project (skip step 8) Chapter E: Group Project [Cont.]
Week 23 Lincoln’s Birthday Holiday Unit 7 Quiz

UNIT 8: LAYERS

Chapter G: Intro & Lesson 1

Chapter G : Lessons 2 & 3 Chapter G: Review Chapter G: Project Builder 1

Project Builder 2

Week 24 Washington’s Birthday Holiday “Design an Ad” Contest “Design an Ad” Contest [Cont.] “Design an Ad” Contest[Cont.] “Design an Ad” Contest [Cont.]
Week 25 “Design an Ad” Contest [Cont.]

Catch Up Day

Unit 7 Special Tutorial: Layout with Layers and CSS Layout with Layers and CSS[Cont.] Layout with Layers and CSS [Cont.] Layout with Layers and CSS[Cont.]
Week 26 Catch Up Day UNIT 9: BEHAVIORS

Chapter K: Intro & Lesson 1

Chapter K: Lesson 2 Chapter K: Review Chapter K: Project Builder 1

Project Builder 2

Week 27 UNIT 10: STYLES

Chapter L: Intro & Lesson 1

Chapter L: Lesson 2 Chapter L: Review Catch Up Day Certificated Holiday (No school)
Week 28 Mid-Term Project: 3-Page Web Site Mid-Term Project[Cont.]

CAHSEE: ½-Day

Mid-Term Project [Cont.]

CAHSEE: ½-Day

Mid-Term Project [Cont.] Mid-Term Project [Cont.]

END OF QUARTER


Week 29 UNIT 12: HTML & XHTML

HTML Lesson 1

HTML Lesson 2 HTML Lesson 3 HTML Lesson 4 HTML Lesson 5
Week 30 HTML Lesson 5[Cont.] HTML Lesson 6 HTML Lesson 7 HTML Lesson 8 HTML Lesson 9
BREAK
SPRING HOLIDAY
Week 31 HTML Lesson 10 HTML Lesson 11 HTML Lesson 12 Slideshow: the future of the Web, and the NAB Show Catch Up Day
Week 32 HTML Lesson 13 Putting Your Web Site Online

HTML Lesson 14

HTML Lesson 15

HTML Lesson 16

Week 33 Catch Up Day HTML Lesson 17

HTML Lesson 18

HTML Lesson 19

HTML Lesson 20

Week 34 Catch Up Day Catch Up Day Catch Up Day HTML Lesson 20 HTML Lesson 20[Cont.]
Week 35 HTML Lesson 20[Cont.] XHTML Lesson (direct PDF download) XHTML Lesson [Cont.] XHTML Lesson [Cont.] XHTML Lesson [Cont.]
Week 36 Memorial Day Holiday Rework and resubmit HTML 20 and XHTML [Cont.] CSS 1 Lesson (direct PDF download) CSS 1 Lesson [Cont.]
Week 37 CSS 1 Lesson [Cont.] CSS 2 Lesson (direct PDF download) CSS 2 Lesson [Cont.] CSS 2 Lesson [Cont.] FINAL PROJECT
3 Page Autobiographical Web Site
Week 38 FINAL PROJECT[Cont.] [Cont.] [Cont.] [Cont.] [Cont.]

END OF SEMESTER

Unit 1: Designing and Planning Web Pages

Module 1: Basic Site Evaluation and Rubric Creation

Module 2: Color Theory

Module 3: Web Standards & Accessible Design

Module 4: Planning a Website

Unit 2: Creating Pages with HTML

Module 1: Pre-Coding

Module 2: Basic HTML Markup

Module 3: HTML Lists

Module 4: Creating Links

Module 5: Creating a Data Table

Excel Spreadsheets (basics)
We will learn how to create a spreadsheet, do simple math and make titles and graphs
Make a gif and add it to your site!

Resource:
  1. Glogster: is always a fan favorite since they can add music video and images all in one project.  This virtual poster site is always one that I see multiple times a year.
  2. Photo Story 3: has become a big hit over the past year and a half.  This is a simple video creator that allows students to take a series of images place them in any order and then narrate each image and/or add text to each image. It then generates a movie adding in transitions and panning automatically to the video.  It is simple and creates great short informational videos. They do also have a mac version.
  3. Museum Box: This is a great site for history classes.  Students place items in a box that would help describe a person or event. They can add video, audio, images and text.  This site has led to some great projects.
  4. Goanimate: takes a bit of learning but is a animated video creator that students love to create their projects with.  It generates great animated cartoons that my students have used to explain many different historical events.
  5. Google Search Stories: is a great video creator for quick informational video clips.  It uses the Google search engine and results to tell a story or explain and event.
  6. Picture A Story: allows students to tell stories about history, explain topics or concepts using preloaded images characters and objects.
  7. Flixtime: Is another video creator that allows students to take a series of images ad create great videos to explain concepts or historical events.
  8. Poster 4 Teachers: Is a free program that allows students to create online projects and reports in a poster format.  It also allows them to create simple websites to explain or discuss topics presented in class.
  9. Slideroll: This site allows kids to create simple slide shows to tell a digital story.
  10. Animoto: This site allows students o create professional looking videos projects.  This site is easy and fun for students to use.
  11. Alice.Org:  A animated story creator. That also teaches programming. I have had a few students really get into programming after using this application.
  12. Digital Story Teller: This is similar to Photo Story 3 students can add text and audio to their digital stories.
  13. Kerpoof: Always a favorite site for students to create movies and other digital media.
  14. Fotobabble: This is really a card creator but students have used it in a variety of ways to narrate  a digital story and have used it a segment in other digital projects.

Create a Peanuts character in your likeness:

http://www.peanutizeme.com/

Screen Shot 2015-09-23 at 3.17.56 PM

Here’s me!!! Does it look like Ms. Shotts?


Find 3 things on the internet that Ms. Shotts doesn’t know about! Can you trick her???


Module 6: HTML Video

Module 7: Reflections

Unit 3: Formatting Web Pages with Style Sheets

Module 1: Introduction to Cascading Style Sheets

Module 2: Color in CSS

Module 3: Typography in CSS

Module 4: The Box Model in CSS

Module 5: The Role of ID and Class in CSS

Module 6: Page Layout Techniques

Module 7: Reflections

Unit 4: Graphics

Module 1: Introduction to Web Graphics

Module 2: Creating a Web Photo Album

Module 3: Creating a Button

Module 4: Creating a Web Page Banner

Module 5: Reflections

Unit 5: Scripting

Module 1: Overview of Scripting on the Web

Module 2: JavaScript

Module 3: Reflections

Unit 6: Quality Control

Module 1: Validating Websites

Module 2: Testing Usability

Module 3: Reflections

Unit 7: Website Management and Authoring Tools

Module 1: Web Authoring Software

Module 2: Publishing on the Web

Module 3: Reflections

Unit 8: Client Website

Module 1: Client Website

Module 2: Reflections

CODING BASICS

This week, we are going to work through the lessons on CODING.COM. They may seem overly simple at first but we will build up to more difficult code very soon.

https://code.org/learn

Click on the link and let’s work through these lessons!

https://scratch.mit.edu/

HACKING?!?!? WHAT YOU NEED TO KNOW! 

Let’s start by reading this article about the benefits of hacking. Yep, there are good things about getting behind the scenes of a computer system!

(Content derived from CSU Global)

https://hourofpython.com/

Now let’s go to Hack High

http://www.hackerhighschool.org/lessons/HHS_en1_Being_a_Hacker.v2.pdf

https://hackerexperience.com/

http://www.addictinggames.com/puzzle-games/the-hacker-game.jsp

http://www.hacker-project.com/

http://www.slavehack.com/

Advertisements

One thought on “Web Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s