Web 1 - Opening Activities

Day 1 - (Min. Day)

Document: Activity 1
PowerPoint: Welcome to Class

Day 2 - (Min. Day)

Document: Web Design Syllabus
Recruit Dancers Bachata Cumbia Salsa Salsa
Document: Activity 3



Day 3 - (Min. Day)

Student Presentations (pairs)

Teach Student Login

Review Activity 1 Questions (online notes)

If time permits:

Web 1 Video: What is the Internet? (online notes)

 


Day 4

Review Class Rules

  • Pay attention to the teacher - No talking while the teacher is talking
  • Raise your hand for assistance - Do not shout the teacher's name and please be patient
  • Work quietly - Collaboration is encouraged, but class volume must stay low
  • Take care of computer equipment - Do not change computer settings or delete files

- No food or drinks (computer lab rule)
- No gum (school rule)
- Remove earbuds/headphones before entering classroom

Log in to the network using Student account

Use Sticky Notes to place name on Desktop

Start Activity 2 (Just read and preview questions)

Preview Activity 4 Questions

Go to online notes

Show Vignette

History of the Internet Presentation

Laika

Start Activity 5 Questions


Day 5

Complete Activity 0

Space Race Video

Yuri Gagarin Video

ARPA has become DARPA

The Future with DARPA

A look back - old versions of modern websites

File Extensions (online notes)

Create folder with various text files to introduce file extensions

.ppt, .docx, .xlsx, .jpg, .html, .mp3


Day 6

Complete Activity 0

Visit Student Web 1 Projects:

1 2 3 4 5

Build - File Extensions Advanced - (Fake Files)

File Extensions - (online notes)

Review or Complete Activity .25


Day 7

Complete Activity 0

Complete Activity .25

Classroom Server/Student Folders- Explanation and Demonstration

Practice Window Manipulation

  • Title bar drag
  • Resize and position
  • Min, max, restore
  • Taskbar window settings
  • Windows key + arrows
  • Alt-Tab for program switching

Explain Local CHS Server - Map to Server \\fs01-chs\classroom

Create Folder Structure (on Desktop)

Laika

Document Activity 5 - Use multiple windows

Test/Show Sublime Text 3

Test/Show Atom.io

Test/Show DreamWeaver


Day 8

Create Seating Chart

Kahoot Etiquette

Kahoot - History of the Internet

Create Folder Structure Practice:

Handout001 Angel
Handout002 Ryan
Handout003 Brock
Handout004 Jared

 


Day 9

Setup Network Logins - Gmail Account (May require time and setup)

- Build Jared while workstations setup (review)

Prepare for Quiz 1 and Quiz 2

- Complete Activity 0

- Complete Activity .25

Compressing Files and Folders

- Photos to Download (3)

- Photos to Compress (3 Favorites)

Email teacher

- (gmail) - Compressed file


Day 10

Extracting Files and Folders

- Compressed - Photos (zipped file)

- Compressed - Colors (zipped file)

Keyboard Navigation Shortcuts:

  • Backspace (exit a folder)
  • Enter (go into folder)
  • Arrows (move)

Classifications - Animal

Categorization - Target

Update Seating Chart


Day 11

- Complete Activity 0

- Complete Activity .25

Test Canvas Login: http://chusd.instructure.com/

 

Animal Sort Zip - Sorting Images (practice and apply keyboard shortcuts)

Target Sort Zip - Sorting Products (practice and apply keyboard shortcuts)

File Server Connection Test - \\fs01-chs\classroom

Keyboard Shortcuts:

  • Backspace (exit a folder)
  • Enter (go into folder)
  • Arrows (move)
  • Ctrl-X (cut)
  • Ctrl-V (paste)
  • Ctrl + Z (undo)
  • Ctrl + Y (redo)
  • Shift + F10 right-click menu

Color Sort.Zip - Sorting Objects (practice and apply keyboard shortcuts - multi-select)

Character Sort Zip - Sorting Objects (practice and apply keyboard shortcuts - multiselect)

  • Ctrl + Shift (multi-select adjacent files)
  • Ctrl + Spacebar (multi-select/delect non adjacent files)

Day 12

- Complete Activity 0

Take Quiz #1 - History of the Internet

Manipulate Text with Keyboard Shortcuts

Visit Yahoo and look at source code

Click on the following file for text edit practice (code manipulation):

interestingfacts.txt

Click on the following file for text edit practice (sort):

howtocatchaliar.txt

Copy the text from the above documents to a new Word document.

Use additional shortcut keys with file documents:

Double-click - word selection
ctrl-home - go to beginning of document
ctrl-end - go to end of document
shift + arrow - multi-character selection

The Essentials - Keyboard Shortcuts
ctrl-f = find
ctrl-c = copy
ctrl-x = cut
ctrl-v = paste
ctrl-z = undo
ctrl-y = redo
ctrl-a = select all
alt-tab = navigate programs

F2 = rename

F11 = maximized view

window key + D = minimizes all windows
window key + up arrow = maximize current window
window key + down arrow = restore current window


Day 13

- Complete Activity .25

Review Keyboard (only) Manipulation - Sort

interestingfacts.txt

Find and Reorder:

  • Pregnant goldfish
  • Baby kneecaps
  • Mickey Mouse named after Mickey Rooney
  • Russians answering phones

Click on the following file for text edit practice (sort):

Keyboard sort in numerical order (Timed)

howtocatchaliar.txt

Setup Practice

  • Disconnect Network Drive
  • Map Network Drive - \\fs01-chs\classroom
  • Create Folder Structure on CHS file server

Install Sublime Text, Notepad++, or Atom.io for code preview

(Save in the Demos folder with other folders, P1Code, P2Code, P3Code)

The basics - the document parts

p1code.html - basic - finished1


Day 14

Complete Activity .25

Review (switch workstations)
  • Log in to Network
  • Log in to Gmail
  • Map Network Drive - \\fs01-chs\classroom
  • Check Folder Structure on CHS file server

Introduction to HTML - It's a markup language (define structure)

Markup file using htm editor (Sublime Text, Notepad++, or Atom.io):

howtocatchaliar.txt - Save as howtocatchaliar.html and markup (Just a tad CSS)


Day 15

Complete Activity .25

Introduction to HTML - It's a markup language (define structure)

Markup file using htm editor (Sublime Text, Notepad++, or Atom.io):

interestingfactsshort.txt - Save as interestingfactsshort.html and markup


Day 16

Kahoot- File Extensions

Using HTML editor, code three pages

(Save in the Demos folder with other folders, P1Code, P2Code, P3Code)

The basics - the document parts

p1code.html - basic - finished1

Introduce tags:

  • Header 1, Header 2, Header 3
  • Horizontal Rule
  • Break
  • Emphasis
  • Ordered List
  • Unordered List
  • List Item

p2code.html - <h1>, <hr>, <br>, <em> - finished2
p3code.html - <h3>, <ol>, <ul>, <li> - finished3


Day 17

Take Quiz #2 - File Extensions

Prepare for next Quiz - Keyboard Shortcuts

Finish: p3code.html - <h3>, <ol>, <ul>, <li> - finished3

Part 1

CSS (Cascading Style Sheets) is the presention language for the Web. It allows you to "style" HTML elements.

HTML - A markup language for structure

CSS - A presentation language for presentation

Using an HTML Editor, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in Demos in as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML
p8code.html + css - make your own css using Rachel's Challenge HTML


Day 18

Activity .5

Part 2

Resources:

1 - Copy and Paste Text

2 - Color Names

3 - System Font Names

Using an HTML editor, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in Demos as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML
p8code.html + css - make your own css using Rachel's Challenge HTML


Day 19

Part 3

Activity .5

Mac Connection to server test:

Go to Finder and select Connect to server - smb://fs01-chs.chusd.org

Use your gmail account and check off the "remember" box

Resources:

1 - Copy and Paste Text

2 - Color Names

3 - System Font Names

Using an HTML Editor, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in Demos as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML or your own list
p8code.html + css - make your own css using Rachel's Challenge HTML or your own list


Day 20 - Day 21

Part 4

Activity .5

Every class download and install Atom.io. Code updated HTML (Rachel's Challenge) with teacher.

Resources -

1 Updated HTML

2 Color Names

4 Color Scheme Generator

5 HTML Code Image

6 Web Safe Fonts

Using a different HTML editor, code four pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in Demos as p9code.html and p10code.html, etc.).

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p9code.html + css - make your own css using updated Rachel's Challenge HTML

Day 2

Review:

  1. Code HTML
  2. Code Style tags within Head tags
  3. Code CSS within Style tags


p10code.html + css - make your own css using updated Rachel's Challenge HTML
p11code.html + css - make your own css using updated Rachel's Challenge HTML

.


Day 22-23-24

Mac Connection to server test:

Go to Finder and select Connect to server - smb://fs01-chs.chusd.org

Use your gmail account and check off the "remember" box

Part 1

Add the following images to a Web page - Learn <img> attributes
Image - 1 : 2: 3

<img src="mypic.jpg">

Learn about the Images folder.

<img src="Images/mypic.jpg">

Part 2 (Day 24)

Take Quiz #3 - Keyboard Shortcuts


Download required zip file and add the following images to a Web page:

Image - 1 : 2: 3

Make sure to provide a title (header) and a description paragraph for each image. - Learn <img> attributes and css for centering images.

activity006a.zip

<img src="mypic.jpg">

Learn about the Images folder.

<img src="Images/mypic.jpg">

CSS - display:block; and margin:auto; for centering images.


Day 25-27

Part 2
Finish Part 2

Image - 1 : 2 : 3 : 4 : 5

Make sure to provide a title (header) and a description paragraph for each image. - Learn <img> attributes and css for centering images.

Web Design Museum

On Your Own 1 - Web Technologies

  • Create a WebTechnologiesCode folder in Demos
  • Create a webtechnologies.html file and save to the WebTechnologiesC ode folder
  • Add the basic tags to your webtechnologies.html file (html, head, title, body)
  • Use the following resources to complete the web page

Text | Images 1 2 3 4 5 | HTML Code| CSS Code | Finished Web Page

Atom.io - Packages - Intstall Pigments

Color Theory

The Color of Friendship (text) - Paste into Word .
Download and markup wth HTML - Learn <blockquote>, and <div>
Images - 1 2 3screenshot

(Advanced) The Color of Friendship - Demo only - Ids
demoactivityzip

<blockquote id="red">

Use HEX codes codes

Atom.io - Packages - Install Color Picker


CSS and Color

Pay special attention to the colors you choose for your Web site. They are important and convey different emotions to your target audience. Please read the following article:

Color Psycholoogy

From Ezilon.com

Internet Design Articles
The Psychology of Colors in Website Design
By Ezilon.com Articles
Oct 24, 2005, 07:57

Since people associate particular colors with different emotions, the colors used on your website can have a psychological effect on visitors to your site. By using specific colors geared towards the emotion you want to invoke, you can actually increase product sales.

Here are some colors along with the emotions and symbols they stimulate:

1) WHITE- purity, innocence, peace, perfection, chastity, sterility, cleanliness. In general, white creates a cool and refreshing feeling.

2) BLACK- night, space, authority, sturdiness, reliability, power, constancy, prudence, wisdom, classy, elegance, submission, mourning, demons, witches. Black is a controversial color as it can symbolize both good and evil.

3) RED- love, excitement, warmth, heat, fire, blood, passion, power, aggression, action. Use red as an attention grabber. It works better as an accent color rather than a background one.

4) PINK- romantic, affection, sensuality, tenderness, calm, soft hearted, softness, femininity. Pink tends to reduce aggression.

5) BLUE- sky, ocean, water, temperature, ice, coolness, mist, shadow, travel, freedom, truth, solitude, wisdom, trust, loyalty, peaceful, calmness, intelligence, dedication, masculinity. Different shades of blue convey opposite meanings. Light blue is peaceful while dark blue is depressing.

6) PURPLE- royalty, dignity, luxury, wealth, sophistication, feminine, passion, romance, sensitivity, coolness, mist, shadows, mysterious, mystic.

7) GREEN- money, calm, envy, greed, nature, life, youth, renewal, hope, vigor, fertility, rebirth, freedom, guilt. Different shades of green have different meanings. Dark green-cool. masculine, conservative, wealth. Emerald green- immortality. Olive green- peace. Green is the easiest color on the eye.

8) YELLOW- light, purity, understanding, brightness, warmth, playfulness, creativity. Lemon yellow is the most eye fatiguing color. Yellow can increase irritability so yellow should not be used as a main color, only as an accent. Yellow enhances concentration.

9) ORANGE- autumn, youthful, fire, warmth, contentment, fruitfulness, wholesomeness, strong, generous, endurance, strength, ambition. Orange is the color most associated with appetite so it would be a good color choice for a website selling food products. Orange also makes a product seem more suitable for everyone and more affordable.

10) BROWN- wood, comfort, strength, earth, solid, reliable, credible, maturity, humility, conservancy. Light brown conveys genuineness.

11) GRAY- exclusivity. Enhances the psychological response of other colors.

In general, red, orange, and yellow are exciting colors while purple, blue and green are calming ones.

Use the color that symbolizes the emotion you want to convey as the primary color on your website. Add 1-2 other colors to reinforce this emotion. The colors used for your background, header, graphics, text, highlighting, headlines, etc. will all contribute to your websi te's influence on your visitors.

© Copyright 2004 by YourSITE.com

Day 28

Color Theory

Read/Study Pyschology of Color Article for Quiz#4

Online Notes - Color Psychology

Used in Various Careers

- Web Design - Colors and Emotion Article

- Interior Design - Room Colors Screenshot

- Fashion - Pantone Colors 2015 pdf

- Cinema - Film Color Schemes Article

- Marketing (packaging) - Package Design Article

Color Theory