Designing an App

LESSON 4 (PART 2)

April 27 :: 22• P3 • P5 April 28 :: P2• P4

April 29 :: 22• P3 • P5 April 30 :: P2• P4


TODAY'S GENRE: DECADES!


Expectations:

C: CONVERSATION...Mute your mic when not speaking and have camera on as much as possible

H: HELP...Raise your hand by clicking the "Raise Hand" Button, or by inserting the emoji and/or type “raise hand” in the chat

A: ACTIVITY...Work on the assignment/Complete tasks on time

M: MOVEMENT...Stay in the Teams meeting and be present (But don't forget to stretch and use eye safety tips!)

P: PARTICIPATION...Use thumbs up and thumbs down for a yes or no response. Ask and Answer questions in the chat area or verbally when appropriate.

S: SUCCESS...Succeed in a virtual space together!

Typing.com ASSIGNMENT! (Advanced: Numbers Letters Numbers)

Typing:

1. Log in to typing.com

2. Click Lessons

3. On Advanced Tab, Click Advanced: Numbers Letters Numbers (this is due Friday, April 30): 10 Pts.

4. Begin Typing (Please DO NOT DO THE NEXT LESSON! It will RESET if you do!)

If you are finished or waiting, work on Clever!

  1. Students click on the Clever icon on the desktop

  2. Sign in using the username & password (same as logging into computer)

  3. Click on the square that says iReady

  4. Continue until time is up!

Lessons have been assigned to them based on their diagnostic test results both in Math and Reading. Within each lesson are brain break games. The district is pushing a goal of 45 minutes per week on Online Lessons in ELA and 45 minutes per week in Math to close the gaps found in the diagnostic. Math and ELA are providing some of that time during the week, but not all.

CODE.ORG!

Let's SIGN IN!

WHAT ARE WE LEARNING: App Development...Planning!

WHY IS IT IMPORTANT: Why is it important to plan out the design of an app? Planning can save time so the developers don't spend time designing faulty user interfaces. Planning can help the developers talk through and test out ideas with the users of the app.

HOW WILL MY TEACHER KNOW WHAT I LEARNED: Students brainstorm app ideas and sketch out user interfaces in preparation for the next lesson where they will return to App Lab.

LAYOUT, DOWNLOAD, & BUILD!

Keep going!

Today...

  • If you haven't completed your LAYOUT of your app please continue and move on...(click here)

  • If you haven't DOWNLOADed your images for your app please continue and move on...(see below)

  • If you haven't started BUILDing the GUI of you app on code.org please continue! (see below)

REMEMBER! Building an App takes time. We will continue to build our apps all this week! (coding will happen in a few weeks!)

DESIGNING YOUR APP!

  • Draw 3 rectangles (like a phone screen)

  • Choose something you would like to make your app about!

  • Layout out the three (3) screens

  • Include arrows that indicate it clicked the screen would change to what?

REMEMBER! You will use this layout for the remainder of the Quarter!

(PS. Don't use the example to the left...please make your App your OWN!)

WHAT IS THE APP WORTH?

  • THREE (3) Screens minimum = 30 Points (10 points per screen!)

  • At least ONE (1) photo per screen = 15 points (5 points per photo!)

  • Text (header/information text on each screen)= 15 points (5 points per screen with text)

  • Coding the app (each screen is clickable!) = 30 points (10 per click)

  • Submit form (coming soon) with link to app! = 10 points!

TOTAL 100 POINTS!!!!!

ASSIGNMENT: Designing an App...Part 2

Downloading images and start designing! Make sure you have your development guide handy!!

SEARCH FOR IMAGES

Now SEARCH online (Google or Bing) to find images to use for your app!

Once you find an image, right click on it and SAVE IMAGE AS to the APP DESIGN folder on your desktop or on One Drive!

(Hint: you created this folder in Lesson 2...when we found an image of a Cat)

TIPS:

  • Remember to be specific! Finding what you want takes time.

  • Look for clear/clean images.

  • File types... .jpg or .gif or .png work best!

  • Remember that they MUST be relevant to your app!

  • Find at least ONE different image per screen (minimum 3 screens)

  • Note: The Home Screen will probably have more images!

.JPG (JPEG: Joint Photographic Experts Group)

JPEG is the most common format used by digital cameras and images living on the World Wide Web. This file format is based on lossy compression, meaning that it keeps information that is visible to the viewer and gets rid of data that the human eye can’t perceive. The popularity of the JPEG file stems from the fact that it is lightweight, while still being good enough quality for digital use. Due to its size, it will not only load faster, but it can be uploaded to any platform regardless of size limitations. This format can also be viewed on any device without the need to download a special image viewer. However, it’s important to be aware that every time you save a file as a JPEG, hence compressing it over and over again, it causes the image to lose quality and possibly become pixelated or grainy.

.PNG (Portable Network Graphics)

PNG is a high-quality file format used for images. This file type is based on the lossless compression, which means that it supports high-quality images for online use while retaining the original image colors and sharpness. Unlike JPEG files, PNGs also support images with transparent backgrounds. So, if you want to have an image without a background, like a logo or product, you can save it as a PNG file and use it with different backgrounds. However, this file is not as lightweight as a JPEG. Therefore, it’s not recommended to upload hundreds of large PNG’s to your website or portfolio as it will take up a lot of storage and ultimately increase the loading time of your site. And nobody has time for that.

.GIF (Graphics Interchange Format)

You’ve probably heard of this file type based on its most popular feature that’s taken the Internet by storm: animation! The GIF file is a form of bitmap images, meaning the graphic is composed of many tiny parts called pixels, just like the JPEG and PNG file formats. This file type is based on LZW (Lempel-Ziv-Welch), a special form of the lossless data compression algorithm. A GIF is most suitable for storing graphics with a few colors, such as simple diagrams, shapes, and logos, rather than gradients. For example, your business’ icons that contain three colors or less look great in this file format – plus, the small file size will be suitable to use anywhere. However, a beautiful sunset picture would not only be too heavy of a file size but also will look distorted because of the color limitations. One benefit of this file type is that it supports a transparent background, like a PNG file.

Lesson 4: Designing an App Part 2

Sign in to code.org! Make sure you have your development guide handy!!

Go to code.org

Select SIGN IN on the top right corner


Enter your fresnou.org email and password

Or Click Continue with MicroSoft on the Right


If you are not directed to Lesson 4 click MY DASHBOARD on the top left

Once on your DASHBOARD...

Scroll down to find MY COURSES

Click the Current Unit: CSP Unit 3 - Intro to App Design ('20-'21)

Click LESSON 4

Click 1 (in the oval)

Make sure you have your development guide handy

Click CONTINUE

Do This:

Take a look at the prototype below for the Bird Quiz App.

Run the app in code.org, and think about how the prototype helped in the development of this app.

Do This:

  • Look at the user interface design in your planning guide

  • Recreate the screens your drew out here

  • Add Images and Labels etc from the Design Toolbox

  • Remember to give meaningful names as IDs

  • You can upload images to your app by clicking "Choose..." next to the "image" category in Design Mode.

Use the "Design Guide we have been creating to guide you!

Note: You are not doing any programming yet on your app. You will start that in a later lesson.


Things you MUST have:

  • Minimum of 3 screens...but you CAN HAVE MORE!!!

  • At least ONE different image per screen

  • Remember a title and instructions for your app (Home screen)

  • Includes images, audio and text on each screen

  • A clear and easy to navigate user interface (the user of your app will know what to do easily)

  • Clearly communicates information about YOUR topic


REMEMBER...Lesson 4 will AUTO SAVE and you will continue to build you app in the upcoming weeks!


DESIGN TOOLS HELP!

Watch the video for tips on design tools!

CONGRATULATIONS! YOU HAVE BEGUN DEVELOPING AN APP!

Once you are done, please give a thumbs up in the chat!