Introduction to Design Mode (CSP Unit 3, Lesson 2 Code.org)

Students work through a progression of levels to build an understanding of how to use Design Mode to layout an APP. The final level has students setting up the screen of an APP by attempting to copy an image of an APP.  

It's important to remember when programming you are not just writing instructions for a computer, but also for a human. Unique, meaningful element IDs help humans remember and understand the purpose of various elements.

ESSENTIAL QUESTION(S):

How does the design process you will use to complete this part of the course allow you to create visually appealing and functionally useful interfaces for an application you are building?  Who could you collaborate with to make your project better?

DISCUSSION QUESTIONS(S):

  1. What is a common APP that you use?

  2. Take a Minute to Sketch the User Interface of the Main Screen.  Label Inputs, Outputs,

       and parts of the User Interface.

  3. How does the USER Interact with the APP

(❗️) PROJECT / LESSON TASK(S)

  P.  Make sure you have completed CSP Unit 3, Lesson 1 "Intro to Apps"

  1.  Participate in Class Discussion

  2.  Complete the GMAIL Reflection Activity

  3.  Complete ALL ONLINE TASKS for CSP U3L2

  4.  Send in the "Check For Understanding" (Circle 8 Online)

  5.  Complete your Student Journal Entry

(❗️) GMAIL REFLECTION / ASSESSMENT ACTIVITY

What type of APP's do you use most on your cell phone?  What parts are Input, Output, and what parts of the APP are most interesting to you?  Try to describe the design features, colors, and other items that you think make this APP appealing.  (2-3 Sentences)

Example Gmail
TO: harvey.scribner@techfreire.org
SUBJECT: CSP U3L2
Body of Message: Answer All Questions Listed Above (Copy/Paste Questions into Gmail)

R.A.C.E.S. Method R - Repeat the Question, A - Answer the Question,
C - Cite Evidence, E - Examples / Explanation, S - Summarize your Thoughts

KEY TERMS

Code.Org Glossary Link (Click Here)

LINKS & RESOURCES

CSP Unit 3, Lesson 2 Student Page

(❗️) POST-LESSON JOURNAL ENTRY

Open your Student Journals and create a brief entry about this lesson.  Make sure to note anything about the lesson you liked, parts you struggled with, and who you might teach these skills too outside of school and why.

Overview
Students work through a progression of levels to build an understanding of how to use Design Mode to layout an app. The final level has students setting up the screen of an app by attempting to copy an image of an app.

Purpose
This lesson introduces students to Design Mode in App Lab and the different kinds of screen elements and properties at their disposal in this tool. This lesson not only builds up skills in designing a user interface but also sets students up to begin designing an app of their own in the following lesson.

Standards
CSTA K-12 Computer Science Standards (2017)
3A-AP-16 - Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue by using events to initiate instructions.

OBJECTIVES
Students will be able to set up the User Interface of an app including buttons, text, and images
Students will use meaningful names to label element ids

Students will begin to understand how to make adjustments to various design elements.

Preparation
Review the programming levels to ensure you understand the fundamentals of Design Mode in App Lab and how elements are created and their properties are modified.

JUST FOR FUN!

Using the links below, check out the Coffee Bunny Original Game and the modified version I created using APP LAP!  Use the original game and create your own version.  Once completed,  post it to our class padlet for others to try at

https://padlet.com/CSPPDTEAM2022/h58e0e1ke83y9sjs

COFFEE BUNNY ORIGINAL GAME

RED BULL BUNNY GAME JUST FOR FUN

Final Exam TFDL 21-22

FINAL EXAM GOOGLE DOCUMENT LINK

TF CLASS EVALUATION SURVEY (CLICK HERE)

Today everyone will complete the following FINAL EXAM for TF DIGITAL LITERACY 20-21 (SCRIBNER) Please follow the directions below to complete your exam. When you are finished, there is a link below to take the Course Survey! Both the Final Exam and the Course Survey are GRADED EVENTS!

(Your ANSWERS on the Course Survey are not graded, but you are receiving a grade simply for completing it!)

1. Log Into Google Drive and Click NEW to CREATE a NEW DOCUMENT
2. Name the Document: "Final Exam (Your Last Name) P(?) "
3. SHARE the Document with Mr. S for credit at harvey.scribner@techfreire.org

Copy and Paste the questions below into a GOOGLE DOCUMENT and SHARE THEM WITH ME FOR CREDIT (harvey.scribner@techfreire.org) when you have completed them.

FINAL EXAM:

Answer The Following Questions (Each question should be explained with a paragraph answer, 3-4 sentences, with proper structure.) 

Please use the R.A.C.E. structure to answer each question. R-Restate the Questions, A-Answer the Question, C-Cite your Evidence/Examples, E-Explain your Evidence/Examples:

Question 1: Describe how technology has changed the world you live in (compare it to the world your parents and grandparents grew up in):

Question 2: Explain how the technology tools you have been taught this year will help you in High School.

Question 3: Describe a time when you could pass on your knowledge in the coming year. Who would you teach? What skills or tools would you show someone else? Why?

Question 4: Explain how you will protect yourself online for the rest of your life. List at least three (3) ways to improve your Internet Safety and Security Level.

Question 5: Choose four (4) of the projects/tools below:

Tool List
Google Documents
Google Spreadsheets
Google Slides
WeVideo Movie Maker
PIXLR.com
Online Surveys
Google Drive
Code.Org
Soundation / Soundtrap
Khan Academy
Google Sites / Website Design
Draw.io
NSTeens.Org
Google Classroom
Digital Animation
Online Research
Sketchpad
Architectural Projects

You may also choose one (1) online tool you know about that we did not cover this marking period.

Answer the following three questions for each tool you choose: 

• Describe the tool and the project you completed with it?
• What projects could you complete with it?
• How could you use this tool outside of school (home or business uses)?

FINAL QUESTION EXAMPLE ANSWER
(Do Not Use As One Of Your Answers!)

GMAIL/EMAIL: Email is used in place of sending letters to people. It is electronic mail that can be transmitted electronically. Senders can write a letter in different formats and then by addressing it to as many people as required, send each recipient the same message. Recipients can send replies, and emails can be forwarded. Everything happens in fractions of a second. The sender can also attach files such as documents, pictures and hyperlinks along with the email. We have used email all year to communicate, turn in work, and to receive classroom instructions.

WHEN YOU HAVE FINISHED THE FINAL EXAM AND SHARED IT WITH MR. S FOR CREDIT, PLEASE TAKE A FEW MINUTES TO FILL OUT THE BRIEF SURVEY

Digital Literacy Independent Project(s) / Capstone

You have finally made it to the End of the Course! Students will now work on projects that will highlight their favorite digital tools. You may choose from the following list of projects that are based on overall point values. Each student MUST COMPLETE 5 Total Points of Projects in the next 2 weeks. Please choose from the projects below, listed by point value, to determine which projects to turn in prior to the end of the marking period:

TFDL CAPSTONE PROJECT SIGN-UP FORM 2022

THE COMPLETED PROJECT MUST BE POSTED TO THE PADLET BELOW FOR REVIEW:

TFDL 2022 CAPSTONE PADLET LINK (Click Here)

5-POINT PROJECTS

A - Design Your Own Project: Please create an original project, fill out the form completely (link below), and get it approved in advance! 

TFDL PROJECT PROPOSAL FORM (Click Here)

Use the Extra Credit Link (Click Here) for ideas for these projects. You MUST USE Multiple Digital Literacy Tools for these projects. These are also the only projects that you can do Collaboratively with other students.

4-POINT PROJECTS

B - Public Service Announcement Website: Students will create a single-page public service announcement. All topics MUST BE PRE-APPROVED by Mr. S. You must include at least 4 facts about your topic, multiple images / videos, titles and additional credit for design, style, and message clarity. You can use the Digital Portfolio Google Site (Click Here) assignment link for help!

C - Digital Animation Project: Students can submit another Digital Animation project. This must be a NEW PROJECT. You must follow the same directions as the earlier DA project completed.  Check out the directions at DIGITAL ANIMATION 2021 (Click Here)

D - WeVideo / Video Creation Project: Create a video, similar to the one we made in class using using titles, credits, at least 4 facts about your topic of choice, and photos/video clips. Videos should be 1-2 minutes in length, but no longer than 3 minutes for credit. 

Video Project Lesson Link

E - Code.Org Solo Project: Students can create an original animation, game, or application using Code.org. You can choose the type of program you will create and outline the project, code it, and debug it before presenting it for a grade. Go to Code.org and get some ideas. You can also use other programming resources by using the Design Your Own Project choice listed above. Be specific about the project you are creating on the project sign-up form.

F - Architectural Design Project: Students can use the resources found at GREAT ROOM DESIGN PROJECT (Click Here) to design a home, rooms, or other design project for credit. Details can be included in your project sign-up form.

G- Mentor Interview Project: Identify and Interview a community member you know. You can identify and write-up an interview with someone from your community that you consider a mentor. This could be a teacher, family member, or someone else you think is a good role model.  Use the HERO PROJECT ASSIGNMENT (Click Here) as a model for this project.

3-POINT PROJECTS

H - Research Paper: Pic a topic and write a 1-2 page research paper in MLA format with two correctly cited resources. You can use the MLA SHORT FORM RESEARCH PAPER (Click Here) link for more ideas and information.

I - Stock Market Project: Choose at least 3 different stocks to track and write a paragraph about each explaining why you think they are a good investment. Track their prices for at least a week, and then report your findings with a chart or graph using Google Sheets.

J - TinkerCad Design: Design something in TinkerCad that you would like to reproduce. Explain why you chose this project and how you could print your design (3D Printer) and mass produce it. What are the practical applications of this project, and how would you scale it up for larger quantities?

K - Photo Show Video: Create a simple video with photos and music 30-60 seconds in length.

2-POINT PROJECTS

L - Original Music: Use resources on the class reference site to create original music and submit it for credit. Soundtrap and FreeSound Lesson Post (Click Here)

M - Photo Collage: Use resources on the class reference site to create a digital photo collage.

N - Digital Poster: Choose a topic and use digital resources to create a decorative/informational digital poster about it.

O - TinkerCad Basic Design: Create a basic design using CAD tools discussed in class this year. 

1-POINT PROJECTS

P - Code.Org Hour of Code: Students can complete individual projects from the HourofCode.com website. Each project is worth a single point and should be able to be completed individually. Students should post the finished link to their progress for credit

Q - Digital Art: Use Sketchpad (or similar application) to create digital art that you can show off using our class padlet listed above.

R - Digital Photography: Students will get 1/4-point for every ORIGINAL Digital Photo submitted Photos must be posted, labeled, and include some description of where, when, and why they reflect some topic or idea covered in our class this year.

S - Google Slides Presentation: Student can complete a basic presentation on almost any topic for this project. Presentations for other classes for Q4 can be submitted for credit.

HAVE FUN WITH THESE FINAL PROJECTS! Each Student MUST Complete at least 5-Points worth of projects. Any additional time in class this year can be spent making up any work you need to complete for this class, or another. Remember that the week of June 3rd there will be a brief (and easy) final exam. Good Luck! - Mr. S