TEACHER GUIDE
Lesson Instructions: This lesson plan will help you demonstrate to students some of the skills and procedures used by computer programmers. Begin the lesson by reading the Class Message below to your students, then have them watch the recommended career video. Afterwards, facilitate a discussion using the Class Questions listed below
After the discussion, students will work on two activities. Each activity has a printable worksheet with student instructions and areas to record their work.
You should also familiarize yourself with the student worksheets to provide assistance when needed, demonstrate procedures, and help in facilitating the discussion that ends the activity.
Class Message: Today we are going to explore the computer programmer career. We’ll discuss some common computer programming tasks, like mapping out an application using wireframes. You will learn some computer programming basics by completing online exercises on the Code.org website.
Computers are all around us. A cell phone is a computer. A modern car has computers in its engine, radio, and inside its dashboard. Computer programs tell computers what we want them to do. When you play a game on a phone, think about how the phone knows the rules of the game. Someone programmed, or “coded,” the game, and the phone was given those instructions when the app was downloaded. Programmers also write the code that creates web pages and the instructions that make the computers in cars, TVs, and appliances in your home work. The more you know about coding and how it works, the easier it will be for you to understand how all of these devices work. By understanding coding, you can even create your own games or website.
Let’s watch this brief video to better understand the career of computer programming and how programmers affect our everyday lives.
Class Discussion Questions:
〉 What are some things in this classroom that a computer programmer may have programmed? Possible responses: computer workstations, overhead projector, audio visual equipment, electronic bulletin board, etc.
〉 What are some things you have at home that a computer programmer may have programmed? Possible responses: all smart devices – TV, disk player, laptop, gaming systems, home security system, etc
〉 What other examples of technology in our everyday life were likely programmed by a computer programmer? Possible responses: smart cars, drones, smart watches, Bluetooth headphones, etc.
Activities Overview: This lesson plan includes two student activities. In Activity #1, students will map out a simple application on paper using a wireframing diagram. In Activity #2, students will complete coding exercises in Code.org.
Read and familiarize yourself with the student worksheet for each activity.
Activity #1: App Wireframing
In the App Wireframing activity, students will map out on paper how a simple app works. This activity uses a type of diagraming called “wireframing.” Instead of focusing on the technical coding of an app, wireframing uses simple outline frames for the app’s images, text, and other elements to quickly show how the parts of an app are organized. One of the main benefits of wireframing is how it focuses on the purpose and functionality of the app and not just on the coding to ensure the app can be used easily and effectively.
Many wireframing exercises involve constructing new apps, but to keep this activity within the allotted time, students will wireframe an existing app. If you have additional time, students can imagine their own app and create wireframes for it.
Activity Instructions:
〉 Hand out the activity worksheet.
〉 Walk students through the Rules of the Game
Activity Results: Students mapped out an existing app of their choice using wireframing to create simple outline frames for the app’s images, text, and other features to show how elements of an app are organized.
Wireframing can be a powerful tool in designing new apps. Wireframing helps programmers work through how users might use an app and reveals ways the app could be improved. It’s much easier to make quick changes to an app’s design by wireframing it before beginning to develop its code.
Activity Discussion:
〉 What app did you choose and why? What is the app designed to do? Allow students to share their experience.
〉 Why does working with an outline of a screen element, like text or an image, make designing an app easier? Possible responses: you can see how the text and
images will look in the final app, you can map the flow of the application and move between screens.
〉 What are the advantages of doing a wireframe before you begin coding an app? Possible responses: you can create the overall look and flow of the application to troubleshoot before programming, you can visualize the entire app from beginning to end to ensure it meets your vision
〉 How could wireframing be a useful tool when a team of people are working together to design a new app? Possible responses: the team can visualize the parts of the app that are created by others and how their piece fits in with the others, helps with standardizing the overall look and feel of the application.
Activity #2: Advanced Hour of Code
This activity will introduce students to an advanced level of coding and illustrate how coding is used for different situations. Students will complete coding exercises and challenges online. Students begin by visiting the links listed for each exercise on their activity worksheet. All Code.org lessons are designed to run within most common web browsers, on most operating systems, and on a variety of devices
Activity Instructions:
〉 Hand out the activity sheet.
〉 Facilitate an introduction to the activity.
〉 Walk students through the instructions for the activity.
〉 After completion, facilitate a discussion of the suggested questions
Activity Results: Students complete the assigned lessons in Code.org to learn some of the basics of advanced computer programming.
Activity Discussion:
〉 How are the exercises you completed on Code.org related to the work of a computer programmer? Possible responses: Computer programmers use Java and other programming languages to create applications.
〉 What do you think about using the Blockly method of dragging and dropping to program code? Did you find it difficult to understand? Allow students to share their experience.
〉 Share your experience with using the App Lab. Was it easy or was it difficult? Allow students to share their experience.
〉 What is Java Script? Possible responses: Java Script is a web technology that is a scripting or programming language that allows you to implement complex interactive items on a website such as displaying content updates, interactive maps, animated 2D/3D graphics, scrolling, videos, music, etc.
〉 Before this activity, did you have any previous experience using Java Script? Allow students to share their experience.
〉 What did you like the most in the exercises you completed? What did you like the least? Allow students to share their experience.
CAREER INSIGHT
Career Highlight: This lesson plan highlights some of the skills a computer programmer uses on a daily basis to develop and code software and computer processes. See the Employers in My Area section to contact businesses and organizations in your area about classroom demonstrations, onsite visits, or other additional career exposure opportunities
Featured Career: Computer Programmer
Career Descriptions: Create, modify, and test the code, forms, and script that allow computer applications to run. Work from specifications drawn up by software developers or other individuals. May assist software developers by analyzing user needs and designing software solutions. May develop and write computer programs to store, locate, and retrieve specific documents, data, and information.
Other Names for this Career: Software Developer, Web programmer, Analyst Programmer, Programmer, Application Programmer Analyst, Programmer Analyst, Web Applications Programmer, Java Developer, Internet Programmer, Computer Programmer Analyst
EDUCATOR RUBRIC
ITEM
Wireframe Activity #1
Does Not Meet Expectations
Student wireframe lacked attention to detail, did not include multiple written descriptions identifying the actions of buttons and elements of navigation.
Independent Work Activity #2
Student struggled to work independently on the Hour of Code lessons. Student distracted others.
Meets Expectations Exceeds Expectations
Student wireframe exhibited attention to detail and included multiple written descriptions identifying the actions of buttons and elements of navigation.
Student worked well independently.
Student wireframe exhibited attention to detail, and included multiple written descriptions identifying the actions of buttons and elements of navigation. Student put extra effort in neatness and clarity of writing.
Student worked well independently and also showed leadership assisting others.
Simple Phone Level 15
Hero’s Journey Level 10
Student was not able to complete 8 of the 15 levels of coding
Student completed 12 of the 15 levels of coding
Student completed all 15 levels of coding.
Student was not able to complete 5 of the 10 levels of coding.
Student completed 7 of the 10 levels of coding.
Student completed all 10 levels of coding.
ACTIVITY #1: APP WIREFRAMIMG
Introduction: Have you ever thought about making an app? How would you demonstrate your app idea to other people? Most app coders and designers use a tool called “wireframing” to work out ideas they have for new apps and describe how an app would work, to other people. In wireframing, simple box outlines are used to show where app elements like images, text and buttons will go on the screen and what they do. With enough screen wireframes, you can diagram any app you can think of Wireframing can be a powerful tool in designing new apps. Wireframing helps you work through how users might use an app, and ways the app could be improved. It’s also easier to make changes to an app’s design by wireframing it before beginning to program it.
Activity Description: In this activity, you will map out an existing app of your choice. You’ll use the wireframe graphics provided below to create layouts of the app’s screens, images, text, and other elements to show how the app is organized
Activity Procedure:
〉 Think of a simple app that you like to use. It might be a new social media way to communicate with friends, something that makes your school or community safer, a new way to sell products online, or it could be something that makes your life at home easier. Whatever you think of, consider these questions: What app did you choose and why? Who is the main type of user for this app? What is the app designed to do?
〉 On your handout, you have several blank smartphone wireframes to work with. Use these blank wireframes to show how that app works.
〉 Draw boxes where the screen elements go and label what they are. As time allows, do this for all the major screens in the app.
〉 Then use arrows and written descriptions to identify what the buttons do and how the user navigates through the different screens.
〉 Remember that your wireframe doesn’t have to be extremely detailed. Wireframing works best when you can quickly diagram an app’s functions.
〉 If you have extra time, imagine a new app of your own design. First, figure out a problem that you think you can solve with an app. It might be a new social media way to communicate with friends, something that makes your school or community safer, a new way to sell products online, or it could be something that makes your life at home easier. Whatever you think of, consider these questions: What app did you choose and why? Who is the main type of user for this app? What is the app designed to do?
Activity Discussion:
〉 What app did you choose and why? What is the app designed to do?
〉 Why does working with an outline of a screen element, like text or an image, make designing an app easier?
〉 What are the advantages of doing a wireframe before you begin coding an app?
〉 How could wireframing be a useful tool when a team of people are working together to design a new app?
APP WIREFRAMING!
Welcome to wireframing! Wireframing uses simple outline frames to layout an app’s images, text, and other elements. The wireframe screens below give you an idea of how simply and quickly a wireframe can be done. Choose an app that you have used before and use the blank wireframes on the next page to show how that app works. Draw boxes where the screen elements go and label what they are. Do this for all the major screens in the app, then use arrows and written descriptions to identify what the buttons do and how the user navigates through the different screens. Remember that your wireframe doesn’t have to be extremely detailed. Wireframing works best when you can quickly diagram an app’s functions.
ACTIVITY #2: ADVANCED HOUR OF CODE
Introduction: This activity demonstrates how coding is used in different situations You will use the Code.org website to complete lessons that have been assigned to you.
Activity Description: Today, you get the opportunity to take online lessons that will walk you through different coding exercises and challenges step-by-step
Activity Procedure: To access the lessons, Ctrl+Click the images below or click on the links below the images. Work at your own pace through the exercises and challenges
Intro to App Lab (Experienced Level)
Minecraft: Hero's Journey (Experienced Level)
Use blocks of code to create a simple phone app. Write code to program the Agent to help you on your Minecraft journey.
http://tn-caps.com/r/92CL1
Activity Discussion:
http://tn-caps.com/r/92CL2
〉 How are the exercises you completed on Code.org related to the work of a computer programmer?
〉 What do you think about using the Blockly method of dragging and dropping to program code? Did you find it difficult to understand?
〉 Share your experience with using the App Lab. Was it easy or was it difficult?
〉 What is Java Script?
〉 Before this activity, did you have any previous experience using Java Script?
〉 What did you like the most in the exercises you completed? What did you like the least?
