Ames Girls Who Code

​

Session 8, 2017-11-27

Welcome!

​

​

Plan for Today

1. Review of Wireframing (10 min)
2. Review of Impact Project (15 min)
3. Wireframe Your Page (15 min)
4. Review basic website components ( 5 min)
5. Try it out - Beginner HTML Activities (20 min)
6. Core4: Activity Sets (60 min)
7. Reflection Journals (5 min)

Wireframing

Plan for Today

• Review of Wireframing (10 min)
• Review of Impact Project (15 min)
• Wireframe Your Page (15 min)
• Review basic website components ( 5 min)
• Try it out - Beginner HTML Activities (20 min)
• Core4: Activity Sets (60 min)
• Reflection Journals (5 min)

Review of: Impact Project �(Pawsitive Connection)

What Pages & Elements Do We Need?

1. Picture of the pet
2. Like or dislike indication
3. Instructions
4. Animal info (description)
5. Questions/quiz
6. Breed picker ^
7. Search bar
8. Indicator of special needs
9. Saved list of liked/matched animals
10. Ability to add animal to list

Review of: Impact Project �(Pawsitive Connection)

What Pages & Elements Do We Need?

• Picture of the pet
• Like or dislike indication
• Instructions
• Animal info (description)
• Questions/quiz
• Breed picker ^
• Search bar
• Indicator of special needs
• Saved list of liked/matched animals
• Ability to add animal to list

What’s the first thing we’ll need to do any of these things?

DATA

Amy’s Idea: Managing Health Info

Issue:

A better way to make sure all health info is recorded

​

Idea:

• Create a Better Kennel Card:
• animals picture, age, temperament, general info, favorite things, ideal family desc (public info)
• Private Health Info for Staff/Tech:
• including medications/ vaccinations/ date of spay or neuter/ microchip number (private info)

​

Kennel Cards

• A real need would be addressed

​

• A finished project could be created

​

• Info gathered could be used populate our website (if we have time)

​

​

Why we start projects small?

Accomplish some of the goals

​

High rate of success.

​

Have a finished working project.

​

​

What information will we need in our form?

1. Age
2. Breed
3. Type of animal
4. Type/brand of food
5. Energy level/personality/ playfulness/aggressiveness
6. Special needs
7. Name
8. Spayed/Neutered & date
9. Friendliness
10. Kid/family/owner type
11. Potty trained
12. Work trained or pet (service animal)
13. Medications/vaccinations

1. Previous illnesses/prone to illnesses
2. How big animal is
3. Shelter information
4. Where the animal was found/born
5. Microchip
6. Description of animal
7. Favorite toys/treats
8. Space requirements (house, yard, etc)
9. Indoor or always outdoor
10. Dislikes (tall men, people in hats, raised voices, etc)
11. Coat type/grooming requirements
12. Declawed or not
13. Training
14. Picture

Public Info: Private Info:

Amy’s Idea: Managing Health Info

Issue:

A better way to make sure all health info is recorded

​

Idea:

• Create a Better Kennel Card:
• Age, temperament, general info, favorite things, ideal family description
• Private Health Info for Staff/Tech:
• including medications/ vaccinations/ date of spay or neuter/ microchip number (private info)

​

Divide into groups

Split into three groups (3-4 girls):

- Designs the entry form

- Public Info Page

- Private Info Page

​

Bonuses:

- Saves pet for later (easy difficulty)

- Edit existing pet info (medium difficulty)

- Add a photo (medium difficulty)

- Add a video (hard difficulty)

​

Plan for Today

• Review of Wireframing (10 min)
• Review of Impact Project (15 min)
• Wireframe Your Page (15 min)
• Review basic website components ( 5 min)
• Try it out - Beginner HTML Activities (20 min)
• Core4: Activity Sets (60 min)
• Reflection Journals (5 min)

Wireframe Your Group Page (Individually)

Everyone draws at least one wireframe.

​

Time = 5 minutes

Wireframe Basic Impact Project

Share Your Wireframes

​

Identify Similar Ideas

​

Vote on Your Favorite Ideas

​

​

Wireframe Your Group Page (Together)

Combine everyone’s ideas into one page

​

Time = 10 minutes

​

Share with class

​

Hand in

Plan for Today

• Review of Wireframing (10 min)
• Review of Impact Project (15 min)
• Wireframe Your Page (15 min)
• Review basic website components ( 5 min)
• Try it out - Beginner HTML Activities (20 min)
• Core4: Activity Sets (60 min)
• Reflection Journals (5 min)

Tools and Technologies we need ….

Tools and Technologies we need ….

HTML Intro: Basic Structure

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

​

<body>

​

...

...

​

</body>

</html>

Explore these and MORE in Chrome/Firefox!

Chrome -> Developer Tools -> Inspector (or right click!)

Simple:

• http://www.w3schools.com/html/html_elements.asp

​

Advanced:

• http://www.pbs.org/wgbh/pages/frontline/shows/teenbrain/work/adolescent.html

​

Plan for Today

• Review of Wireframing (10 min)
• Review of Impact Project (15 min)
• Wireframe Your Page (15 min)
• Review basic website components ( 5 min)
• Try it out - Beginner HTML Activities (20 min)
• Core4: Activity Sets (60 min)
• Reflection Journals (5 min)

HTML Lessons Plan

• Coders will open each lesson in the browser by clicking the lesson link, then using the button

HTML Intro: Some Basic Elements

• HTML Elements (try it yourself)

• HTML Headings and BR Tags (TIY & exercises)

​

• HTML Paragraphs and PRE Tags (TIY & exercises)

​

• HTML Comments (TIY & exercises)

​

Plan for Today

• Review of Wireframing (10 min)
• Review of Impact Project (15 min)
• Wireframe Your Page (15 min)
• Review basic website components ( 5 min)
• Try it out - Beginner HTML Activities (20 min)
• Core4: Activity Sets (60 min)
• Reflection Journals (5 min)

1. Work on Core4 Sets
2. Track progress in Journal

Instructors Take Attendance

Plan for Today

• Review of Wireframing (10 min)
• Review of Impact Project (15 min)
• Wireframe Your Page (15 min)
• Review basic website components ( 5 min)
• Try it out - Beginner HTML Activities (20 min)
• Core4: Activity Sets (60 min)
• Reflection Journals (5 min)

Closing Reflections

• In what ways would you like to challenge yourself to grow?

​

• Share if time!

​

Have a great week!

​

Don’t forget to be awesome!

​