Slide 1

Slide 1 text

Coding in the Classroom Photo from http:/ /urthmama.com/easy-computer-programming-for-kids/

Slide 2

Slide 2 text

speakerdeck.com/jeg2/ coding-in-the-classroom The only thing you need to write down!

Slide 3

Slide 3 text

Introductions

Slide 4

Slide 4 text

I'm Going to Ask Name Role in schools Your hopes for this training A fun fact about yourself

Slide 5

Slide 5 text

But I'll go first!

Slide 6

Slide 6 text

James Edward Gray II My Name

Slide 7

Slide 7 text

My Role: Dad My daughter goes to John Ross I've shown the kids there tech stuff I like supporting the schools

Slide 8

Slide 8 text

My Hopes for Today I hope to expand your view of programming and programmers I want to show you something fun and useful for the kids My fear: teaching the teachers!

Slide 9

Slide 9 text

I Love Games My Fun Fact

Slide 10

Slide 10 text

Dana Gray John Ross PTO President Elect I hope to help you find some handy new teaching tools Finds cats even in Japan! Photo from https:/ /www.dreamstime.com/editorial-stock-photo-beckoning-cat-sculpture-view-large-gateway-ekamai- shopping-mall-january-bangkok-thailand-japanese-themed-image48939578

Slide 11

Slide 11 text

Your Turn Name Role in schools Your hopes for this training A fun fact about yourself

Slide 12

Slide 12 text

Thank You!

Slide 13

Slide 13 text

Our Plan

Slide 14

Slide 14 text

The Schedule 8:30-9:20: chat about programming & generate mazes 9:20-9:30: break 9:30-10:30: programming mazes 10:30-10:40: break 10:40-11:30: chat about other ideas & AMA

Slide 15

Slide 15 text

Please Stop Me With Questions!

Slide 16

Slide 16 text

What is Programming?

Slide 17

Slide 17 text

I Am a Programmer Or Developer, or coder I write code, mostly to built Web applications Photo from https:/ /comicvine.gamespot.com/forums/battles-7/albert-wesker-re-vs-neo-matrix-1607450/

Slide 18

Slide 18 text

I download things for my mother-in-law's iPad. All Programmer's Do

Slide 19

Slide 19 text

A Translator for Machines We want machines to do a lot of work for us It's my job to tell them how I translate work instructions into computer languages

Slide 20

Slide 20 text

Computers Are Very Dumb But wicked fast!

Slide 21

Slide 21 text

The PB&J Challenge

Slide 22

Slide 22 text

Kid's Task Write out or dictate live instructions Explain how to make a peanut butter & jelly sandwich

Slide 23

Slide 23 text

Follow Their Instructions Extremely Literally Photo from https:/ /www.youtube.com/watch?v=cDA3_5982h8

Slide 24

Slide 24 text

This is my job!

Slide 25

Slide 25 text

Why Program?

Slide 26

Slide 26 text

Turn ALL YOUR KIDS into Programmers!!!

Slide 27

Slide 27 text

Turn ALL YOUR KIDS into Programmers!!!

Slide 28

Slide 28 text

Exposure Show kids another option they have Just like we do for writing, art, sports, and more It affects their lives a lot We program spreadsheets, robots, cars, movies, clothes, and so much more

Slide 29

Slide 29 text

Jobs We currently graduate around a third of the tech industry's demand These are good jobs High pay Strong benefits

Slide 30

Slide 30 text

Curriculum: Kindergarten K.N.1 Understand the relationship between quantities and whole numbers. K.A.1 Duplicate patterns in a variety of contexts. K.A.1.2 Recognize, duplicate, complete, and extend repeating, shrinking and growing patterns involving shape, color, size, objects, sounds, movement, and other contexts.

Slide 31

Slide 31 text

Curriculum: 1st 1.N.1 Count, compare, and represent whole numbers up to 100, with an emphasis on groups of tens and ones. 1.A.1 Identify patterns found in real-world and mathematical situations. 1.A.1.1 Identify, create, complete, and extend repeating, growing, and shrinking patterns with quantity, numbers, or shapes in a variety of real-world and mathematical contexts.

Slide 32

Slide 32 text

Curriculum: 2nd 2.A.1 Describe the relationship found in patterns to solve real-world and mathematical problems. 2.A.1.1 Represent, create, describe, complete, and extend growing and shrinking patterns with quantity and numbers in a variety of real-world and mathematical contexts. 2.A.1.2 Represent and describe repeating patterns involving shapes in a variety of contexts.

Slide 33

Slide 33 text

Curriculum: 3rd 3.A.1 Describe and create representations of numerical and geometric patterns. 3.A.1.3 Explore and develop visual representations of growing geometric patterns and construct the next steps. 3.GM.1 Use geometric attributes to describe and create shapes in various contexts.

Slide 34

Slide 34 text

Curriculum: 4th 4.A.1 Use multiple representations of patterns to solve real-world and mathematical problems. 4.A.1.3 Create growth patterns involving geometric shapes and define the single operation rule of the pattern.

Slide 35

Slide 35 text

Curriculum: 5th 5.A.1 Describe and graph patterns of change created through numerical patterns. 5.A.1.1 Use tables and rules of up to two operations to describe patterns of change and make predictions and generalizations about real-world and mathematical problems.

Slide 36

Slide 36 text

ISTE Technology Standards 1. Creativity and Innovation a. apply existing knowledge to generate new ideas, products, or processes. 3. Critical Thinking, Problem Solving, and Decision Making plan and manage activities to develop a solution or complete a project.

Slide 37

Slide 37 text

Continued: ISTE Technology Standards 5. Digital Citizenship b. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity. 6. Technology Operations and Concepts a. understand and use technology systems. c. troubleshoot systems and applications.

Slide 38

Slide 38 text

Imagine If I Tried A science standard "predict motion of the Earth's movement" A technology standard "use models and simulations to explore complex systems and issues"

Slide 39

Slide 39 text

Learning to Program

Slide 40

Slide 40 text

Arcane Languages?! class Tweet def self.recent tweets = TWITTER_CLIENT.user_timeline( "JEG2", exclude_replies: true, include_rts: false ) Array(tweets).map { |tweet| new( id: tweet.id, url: tweet.url.to_s, body: tweet.text, created_at: tweet.created_at, user_name: tweet.user.screen_name, avatar_url: tweet.user.profile_image_url ) } end include Twitter::Autolink def initialize(id: , url: , body: , created_at: , user_name: , avatar_url: ) @id = id @url = url @body = body @created_at = created_at @user_name = user_name @avatar_url = avatar_url end attr_reader :id, :url, :body, :created_at, :user_name, :avatar_url def linked_body auto_link( body, link_attribute_block: ->(_, link_attributes) { link_attributes.merge!(target: "_blank") } ) end end

Slide 41

Slide 41 text

I "Know" Around 15 "Programming Languages" It depends on how you define these terms.

Slide 42

Slide 42 text

Programming Languages are Small 0 450 900 1350 1800 Ruby Japanese (Kanji only)

Slide 43

Slide 43 text

Most Important Programming Skills 1. Human Communication 2. Problem Solving 3. Think Like a Computer 
 (Think Algorithmically) 4. Good at Learning New Things 5. Programming Languages

Slide 44

Slide 44 text

Codebreaking What Programmers Do

Slide 45

Slide 45 text

Do you know who this is? Photo from http:/ /www.gizmodo.co.uk/tag/alan-turing/

Slide 46

Slide 46 text

Do you know what this is? Photo from http:/ /www.hoylen.com/photos/2009-west/06-computer-history/pic8.html

Slide 47

Slide 47 text

The Story Nazi Germany encoded World War II messages using the Engima Alan Turing built a machine (with a lot of help) to decode the Enigma's messages

Slide 48

Slide 48 text

It wasn't quite powerful enough! Photo from https:/ /en.wikipedia.org/wiki/Cryptanalysis_of_the_Enigma

Slide 49

Slide 49 text

Too Many Combinations A typical message: WEUBYYNULLSEQSNULLNULL Nine letters: 26 * 25 * 24 * 23 * 22 * 21 * 20 * 19 * 18 1,133,836,704,000 combinations!

Slide 50

Slide 50 text

Linguistic Analysis to the Rescue! We were able to guess some words "nothing to report" "Heil Hitler" Turing's machine did the rest

Slide 51

Slide 51 text

The Imitation Game A good (if sad) movie Covers this story better Has other great Turing tidbits Photo from https:/ /www.rottentomatoes.com/m/the_imitation_game/

Slide 52

Slide 52 text

Temperature Monitoring What Programmers Do

Slide 53

Slide 53 text

A Friend of Mine Photo from https:/ /comicvine.gamespot.com/forums/battles-7/albert-wesker-re-vs-neo-matrix-1607450/

Slide 54

Slide 54 text

The Problem Server rooms need to stay cool Old buildings can have faulty generators Humans need to track temperature changes

Slide 55

Slide 55 text

Photo from https:/ /www.acurite.com/8-5-thermometer-with-hygrometer-00339.html Photo from https:/ /www.visiononline.org/blog-article.cfm/The-Cameras-in-Your-Computer/11

Slide 56

Slide 56 text

Managing an Outage What Programmers Do

Slide 57

Slide 57 text

The Errors Start I was "on call" for an application Our monitoring system started reporting A LOT of errors I checked to see if the application could still function

Slide 58

Slide 58 text

A Plug is Pulled I solicited a second opinion I took the application offline We started an investigation of what went wrong I made a report to my superiors

Slide 59

Slide 59 text

A Fix is Uncovered Our programmers found the issue and the obvious fix It would take over 30 hours We had about 12

Slide 60

Slide 60 text

We Get Creative The programmers came up with a partial fix that only needed a few hours We could finish repairs over three weeks

Slide 61

Slide 61 text

Divide and Conquer One team went to work on the quick fix (no programming required) A junior team added a notice for our users Another team started on the longer repairs

Slide 62

Slide 62 text

Skills Used Analysis, investigation, communication, math, estimation, problem solving, and planning Actual programming: Given to a junior Or not rushed

Slide 63

Slide 63 text

A Lot (Maybe Most) of "Programming" Happens Outside Computers!

Slide 64

Slide 64 text

Making Mazes Look Ma, no computers!

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

"Draw a 4 x 4 Grid." I should have tried this first!

Slide 67

Slide 67 text

I Bet You are Better at This! I tried several ways to get her to draw a grid When I finally said "grid" "Daddy, I know what a grid is."

Slide 68

Slide 68 text

The Main Instructions "Point to a square." "Let's do the bottom right one." "Flip a coin." "Heads. Erase the top wall." "Tails. Erase the left wall."

Slide 69

Slide 69 text

The Special Rule I left her continue doing squares until she reached the edge. "Here's a new rule: don't erase outside walls."

Slide 70

Slide 70 text

Finishing Touches "Erase the top left wall for a start." "Erase the bottom right wall for an exit."

Slide 71

Slide 71 text

Finishing Touches "Erase the top left wall for a start." "Erase the bottom right wall for an exit."

Slide 72

Slide 72 text

Finishing Touches "Erase the top left wall for a start." "Erase the bottom right wall for an exit."

Slide 73

Slide 73 text

Finishing Touches "Erase the top left wall for a start." "Erase the bottom right wall for an exit."

Slide 74

Slide 74 text

Notes It took around 10 minutes She wanted to solve it immediately

Slide 75

Slide 75 text

Take Ten Break Time

Slide 76

Slide 76 text

Programming Mazes

Slide 77

Slide 77 text

https:/ /scratch.mit.edu/ Visit Scratch

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

Click "Create"

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

Right-click the cat Click "delete"

Slide 83

Slide 83 text

Click to add a new sprite

Slide 84

Slide 84 text

Double-click the "Ball"

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

Move your mouse in here Watch this X and Y

Slide 88

Slide 88 text

Coordinates (X: -240, Y: 180) (X: 240, Y: -180) (X: 0, Y: 0) (X: 240, Y: 180) (X: -240, Y: -180)

Slide 89

Slide 89 text

A 10 X 10 Grid (X: -150, Y: 150) (X: 150, Y: -150) (X: 150, Y: 150) (X: -150, Y: -150) 300 300

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

Click "Pen"

Slide 92

Slide 92 text

Click "Control"

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

My Plan

Slide 95

Slide 95 text

My Plan

Slide 96

Slide 96 text

My Plan

Slide 97

Slide 97 text

My Plan Draw the border

Slide 98

Slide 98 text

My Plan Draw the border Draw the maze

Slide 99

Slide 99 text

Drag a "go to" block into your program Click "Motion" Type -150 into "x" and 150 into "y"

Slide 100

Slide 100 text

Click "Events" Snap "when [flag] clicked" above the "go to" block

Slide 101

Slide 101 text

Click the flag to run your program

Slide 102

Slide 102 text

Snap "change x by" below "go to" Type 300 into the field Click "Motion"

Slide 103

Slide 103 text

Click to run

Slide 104

Slide 104 text

Click "Pen" Insert "pen down" between the motion blocks

Slide 105

Slide 105 text

Click to run

Slide 106

Slide 106 text

Click "Motion" Add "change y by" Type -270 into the field

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

Click to run

Slide 109

Slide 109 text

Run it again

Slide 110

Slide 110 text

That's a "Bug!" Don't panic, investigate…

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

Click "Pen" Insert "clear" under "go to"

Slide 113

Slide 113 text

Click to run

Slide 114

Slide 114 text

Add "pen up"

Slide 115

Slide 115 text

Click "Motion" Add "change y by" Type -30 into the field

Slide 116

Slide 116 text

Click to run

Slide 117

Slide 117 text

The Hero's Journey

Slide 118

Slide 118 text

Draw the bottom edge

Slide 119

Slide 119 text

Draw the bottom edge Hints: • Put the pen down • Make a negative 
 x move

Slide 120

Slide 120 text

Draw the bottom edge Hints: • Put the pen down • Make a negative 
 x move

Slide 121

Slide 121 text

Draw the left edge

Slide 122

Slide 122 text

Draw the left edge Hints: • Make a y move • Leave a gap

Slide 123

Slide 123 text

Draw the left edge Hints: • Make a y move • Leave a gap

Slide 124

Slide 124 text

Raise the pen and move right

Slide 125

Slide 125 text

My Plan Draw the border Draw the maze

Slide 126

Slide 126 text

My Plan Draw the border Draw the maze

Slide 127

Slide 127 text

My Plan Draw the border Draw the maze

Slide 128

Slide 128 text

My Plan Draw the border Draw the maze

Slide 129

Slide 129 text

My Plan Draw the border Draw the maze

Slide 130

Slide 130 text

Revised Plan Draw the maze Draw the top edge Draw the left edge Repeat both to make a grid Switch to drawing the top OR the left

Slide 131

Slide 131 text

Drawing Steps

Slide 132

Slide 132 text

Drawing Steps

Slide 133

Slide 133 text

Drawing Steps

Slide 134

Slide 134 text

Drawing Steps

Slide 135

Slide 135 text

Drawing Steps

Slide 136

Slide 136 text

Drawing Steps

Slide 137

Slide 137 text

Draw top edge and return to the corner

Slide 138

Slide 138 text

Draw left edge and return to the corner

Slide 139

Slide 139 text

Draw left edge and return to the corner Hints: • Start drawing • Move down • Stop drawing • Move back

Slide 140

Slide 140 text

Draw left edge and return to the corner Hints: • Start drawing • Move down • Stop drawing • Move back

Slide 141

Slide 141 text

Move to the next square

Slide 142

Slide 142 text

Loops: Do It Again and Again "This is the song that doesn't end Yes, it goes on and on my friend Some people started singing it not knowing what it was And they'll continue singing it forever just because…"

Slide 143

Slide 143 text

Drag the last nine blocks aside

Slide 144

Slide 144 text

Click "Control" Add a "repeat" block Type 9 into the field

Slide 145

Slide 145 text

Drag the drawing blocks back

Slide 146

Slide 146 text

Click to run

Slide 147

Slide 147 text

Move to the start of the next row

Slide 148

Slide 148 text

Click to run

Slide 149

Slide 149 text

Drag the row drawing code aside

Slide 150

Slide 150 text

Click "Control" Add a "repeat" block Type 9 into the field

Slide 151

Slide 151 text

Drag the drawing blocks back

Slide 152

Slide 152 text

Click to run

Slide 153

Slide 153 text

Conditional Logic If the merry-go-round is full then Play on the monkey bars Else Play on the merry-go-round

Slide 154

Slide 154 text

Our Decision If the coin flip is heads then Draw the left edge Else Draw the top edge

Slide 155

Slide 155 text

Drag the edge drawing code aside

Slide 156

Slide 156 text

Separate: • The top edge • The left edge • The move

Slide 157

Slide 157 text

Add an "if… then… else…" block

Slide 158

Slide 158 text

Drag the top edge code under "if"

Slide 159

Slide 159 text

Drag the left edge code under "else"

Slide 160

Slide 160 text

Drag the move code after the "if" block

Slide 161

Slide 161 text

Computers Can't Flip Coins! They can generate a random number between 1 and 2 Call 1 heads Call 2 tails

Slide 162

Slide 162 text

Click "Operators" Add an "=" test

Slide 163

Slide 163 text

Add "pick random"

Slide 164

Slide 164 text

Type 2 into these fields

Slide 165

Slide 165 text

Click to run

Slide 166

Slide 166 text

Click "looks" Add a "hide" at the bottom

Slide 167

Slide 167 text

Add a "show" at the top

Slide 168

Slide 168 text

Click to run

Slide 169

Slide 169 text

Make Mazes! Keep clicking run!!!

Slide 170

Slide 170 text

Take Ten Break Time

Slide 171

Slide 171 text

Scratch Exercise Refinements

Slide 172

Slide 172 text

You Know Your Kids Better Than I Do!

Slide 173

Slide 173 text

Draw Something Else Using just "Motion" and "Pen" blocks is the simplest option Add loops ("repeat") for a step up Add conditional logic ("if") for another step up

Slide 174

Slide 174 text

Or Let the Kids Free Draw After a Quick Primer

Slide 175

Slide 175 text

You Can Learn From Scratch Projects!

Slide 176

Slide 176 text

Peek Inside an Animation https:/ /scratch.mit.edu/projects/164565708/

Slide 177

Slide 177 text

Peek Inside an Animation https:/ /scratch.mit.edu/projects/164565708/

Slide 178

Slide 178 text

Peek Inside an Animation https:/ /scratch.mit.edu/projects/164565708/

Slide 179

Slide 179 text

Choose Your Own Adventure https:/ /scratch.mit.edu/projects/87677805/

Slide 180

Slide 180 text

Play Games https:/ /scratch.mit.edu/projects/16215228/

Slide 181

Slide 181 text

Try Other Computer Exercises

Slide 182

Slide 182 text

http:/ /www.calormen.com/jslogo/ More Drawing But With Language

Slide 183

Slide 183 text

education.minecraft.net A game of building and programming!

Slide 184

Slide 184 text

code.org Fun games for kids Material for all ages On and off the computer Great teacher support Free workshops Prepared curriculum (with standards)

Slide 185

Slide 185 text

Other Coding Content

Slide 186

Slide 186 text

Sneak in Bits of Our History

Slide 187

Slide 187 text

Social Studies Curriculum First Grade: Content Standard 2: The student will describe the characteristics of the American economic system 3. Summarize how historic inventors and entrepreneurs contributed to the prosperity of the nation including Samuel F. B. Morse, John Deere, Alexander Graham Bell, Orville and Wilbur Wright, and Thomas Edison. (CCRIT 2)

Slide 188

Slide 188 text

No content

Slide 189

Slide 189 text

Rear Admiral Grace Hopper She invented the first "compiler" She taught the first modern programmers Congress promoted her in H.J.Res. 341 And SO much more! Photo from https:/ /en.wikipedia.org/wiki/Grace_Hopper

Slide 190

Slide 190 text

Dorothy Vaughan What did early "computers" look like? She went from computer to manager to expert FORTRAN programmer Photo from https:/ /www.nasa.gov/content/dorothy-vaughan-biography

Slide 191

Slide 191 text

Hidden Figures Another great movie It covers the transition from humans to machines And a lot more! Photo from http:/ /www.imdb.com/title/tt4846340/

Slide 192

Slide 192 text

Ada Lovelace The first programmer Invented the computer program in the 1840's Didn't have a computer! Photo from https:/ /en.wikipedia.org/wiki/Ada_Lovelace

Slide 193

Slide 193 text

Use Non-Computer Material

Slide 194

Slide 194 text

Robot Turtles Great for any age Scales up with age Designed by a programmer for teaching kids programming concepts Photo from https:/ /www.thegrommet.com/robot-turtles-programming-board-game

Slide 195

Slide 195 text

Bee-Bot www.bee-bot.us Program moves Then run it Good for early ages Education support Photo from http:/ /intermit.co.uk/index.php?route=product/product&product_id=285

Slide 196

Slide 196 text

Binary Arithmetic http:/ /www.garlikov.com/Soc_Meth.html

Slide 197

Slide 197 text

education.lego.com Mindstorms are well known There's more! WeDo for $175 includes curriculum

Slide 198

Slide 198 text

Junior Botball Challenge juniorbotballchallenge. org Build and program robots Has curriculum and workshops $500 for kit + $75 yearly registration Photo from https:/ /wn.com/broken_arrow_public_schools_junior_botball_challenge_feb_2015

Slide 199

Slide 199 text

And Now a Word From Our Sponsor Use Your PTO

Slide 200

Slide 200 text

Wrapping Up

Slide 201

Slide 201 text

[email protected] I'll help if I can!

Slide 202

Slide 202 text

Thank You! You are my heroes. My daughter's too.

Slide 203

Slide 203 text

Ask Me Anything!