Apps and Websites in Daily Life
🎯 (CTLS-EVL-01)
📌 Identify apps and web software that are used in everyday life
An app is a program you open on a phone, tablet or computer.
Web software runs in a web browser, on a website.
You use apps and web software every day. Here are some examples.
- A music app plays songs.
- A weather app shows if it will rain.
- A school website shows class news.
- A map app shows the way to a park.
Think about your morning. Which apps did you use before school?
- Find the app icons on the screen.
- Point to three apps that you use often.
- Say what each app helps you do.
Key Parts of an App or Website
🎯 (CTLS-DPM-01)
📌 Recognise key app and web software elements and functions
Every app and website has elements. An element is one part of the screen.
Each element has a job, called its function.
Here are four common elements:
- A menu shows a list of choices.
- A button starts an action. A “Send” button sends a message.
- A text box is where you type words or numbers.
- An image shows a picture.
- Look at a simple app with a teacher.
- Put one note on each menu, button, text box or picture.
- Write one word on each note that says its job.
Features of a Good User Experience
🎯 (CTLS-DES-01)
📌 Describe various features of user experience (UX)
User experience (UX) is how a person feels when using an app. Good UX makes an app easy and pleasant to use.
Some features of good UX are:
- Clear labels, so you know what each button does.
- Quick steps, so you do not get lost.
- Feedback, such as a message that says “Saved”.
- Large text and buttons that are easy to see.
Example: a game shows a big Start button. It is easy to find, so a player starts quickly.
- Point to one button that is easy to see.
- Point to one word that tells you what it does.
- Say one thing that would make the app easier to use.
Buttons and Controls on Screen
🎯 (CTLS-DES-01)
📌 Label specific controls in a user interface (UI)
A user interface (UI) is the part of an app you see. You also tap, click or type on it.
A control is a part you use to do something. To label a control means to name it.
Common controls include:
- A button, which you tap.
- A slider, which you drag to change a number, such as volume.
- A tick box, which you tick to choose an option.
Example: music apps often have Play, Volume and Next controls.
- Draw a button, a slider and a tick box.
- Write a label beside each one, such as “Play”.
- Point to each label and say what the control does.
Keeping Personal Data Safe
🎯 (CTLS-SAF-01, CTLS-DAT-01)
📌 Respond appropriately to security concerns around the use and storage of personal data on websites, apps and web software, including acceptance of permissions
Personal data is information about you. It can be your name, your school or your photos.
An app may ask for permission to use part of your device. For example, it may ask to use your location.
Stop before you tap “Allow”. Ask yourself: does the app need this to work?
Never share your password. Never give your home address to a stranger online.
Tell a trusted adult if anything online worries you.
- Read the permission message with a teacher.
- Ask: does this app need this to work?
- If you are not sure, choose not to allow it. Then tell a trusted adult.
Security Features on Websites
🎯 (CTLS-SAF-01)
📌 Identify the security protocols on existing websites, apps and/or web software
A security protocol is a set of rules that keeps information safe. It works while information moves between your device and a website.
Look at the start of a web address. If it begins with https, the information is protected while it moves. It does not prove that a website is safe or honest.
Many browsers also show a padlock symbol. Where it appears depends on the browser.
Many sites also ask for a password. A password is a secret word that helps show who you are.
- Look at the start of the web address. Is it https?
- Look for a padlock symbol near the address bar.
- Say what you found to a teacher.
Sequence, Choices and Repeats
🎯 (CTLS-ALG-01)
📌 Explore how sequences, branching and iteration are used to represent logic in an app or in web development environments
Logic is the order of steps and the choices an app makes. Three ideas show logic: sequence, branching and iteration.
Sequence means steps happen in order. Making a sandwich is a sequence: bread, filling, bread.
Branching means choosing one path. For example: if it rains, take an umbrella, else wear a hat.
Iteration means repeating steps. Clapping three times is an example.
Code uses the same ideas. This example shows each one:
# Sequence: steps run in order
print("Get bread")
print("Add filling")
# Branching: choose one path
hungry = True
if hungry:
print("Eat a snack")
else:
print("Keep playing")
# Iteration: repeat a step three times
for count in range(3):
print("Clap")- Put three cards in order to make a sandwich.
- Add a choice card. If you want cheese, add it.
- Put a clap card in the row and repeat it three times.
Common Programming Languages
🎯 (CTLS-ALG-01)
📌 Explore common app and web software programming languages
A programming language is a set of words and rules. Programmers use it to tell a computer what to do.
Here are some common languages and their jobs:
- HTML builds the parts of a web page, such as a button.
- CSS sets how a web page looks, such as its colours.
- JavaScript makes a web page react when you click.
- Python is used for many tasks. Many people learn coding with it.
Here is a tiny HTML example. It makes one button on a web page:
<!-- HTML: one button -->
<button>Start</button>- Write HTML, CSS and JavaScript in a list.
- Write one job beside each language.
- Draw one example of each job.
Jobs in App and Web Development
🎯 (CTLS-COL-01)
📌 Explore roles associated with app and web software development in the workplace
A role is a job that a person does. Many people work together to build an app or website.
Here are some roles:
- App developer writes the code that makes the app work.
- Web designer plans how a website looks and is laid out.
- UX designer plans how easy and pleasant an app is to use.
- Tester checks the app and reports any problems.
Each role needs different skills. For example, a tester needs careful checking.
- Pick one role from the list.
- Act out or draw one thing that person does.
- Say one skill that person needs.
Industries that Use Apps and Websites
🎯 (CTLS-EVL-01)
📌 Explore industries that have embedded the use and promotion of apps and web software
An industry is a type of business or service. Many industries use apps and websites every day.
Here are some examples:
- Shops use websites to show products and take orders.
- Banks often have apps so people can check their money.
- Schools use websites to share class news.
- Some bus services use apps to show timetables.
Sport clubs, hospitals and libraries use apps too.
- Write the name of one place you visit.
- Write one app or website that place uses.
- Say how the app helps the people who go there.
Planning and Managing an App Project
🎯 (CTLS-COL-01, CTLS-THI-01)
📌 Use a scaffold to plan and manage projects individually and/or collaboratively
A scaffold is a planning template with boxes to fill in. It helps you plan a project step by step.
A project plan lists each task. A task is one job to do. Next to each task, write who will do it. Add a due date too.
If you work with others, share the plan. Everyone can then tick off their own tasks.
- Write three tasks on paper, one on each line.
- Next to each task, write your name.
- Tick each task when it is done.
Timeline of App and Web Innovations
🎯 (CTLS-EVL-01, CTLS-COL-01)
📌 Participate in developing a timeline of app and web software innovations based on user/industry adoption
A timeline shows events in the order they happened. An innovation is a new idea or tool. It can change how people do things.
Adoption means many people start using a new idea. A new app might start with a few users.
Early phones mostly made calls and sent texts. Later phones added cameras, maps and apps.
Check any dates in a library book or a school website.
- Write one event on each note, such as a new phone feature.
- Put the notes in order, from oldest to newest.
- Ask a teacher which events many people used.
How Changing Needs Shape Apps
🎯 (CTLS-EVL-01)
📌 Recognise how the changing needs of society have influenced the development and use of apps and web software
Society means the people and communities around us. Their needs can change over time.
When families are far apart, video call apps help. The need came first. The app was built to meet it.
Older people may want bigger text and simple buttons. So app designers make screens easier to read.
- Name one need, such as keeping in touch with family.
- Name one app that helps with that need.
- Say one change that would help a new need.
Ethical and Social Impacts of Apps
🎯 (CTLS-SAF-01, CTLS-EVL-01)
📌 Identify the ethical and social impacts of apps and web software
An impact is an effect on people. An app can have good effects and harmful ones.
An ethical impact asks: is it fair, kind and honest? A social impact changes how people live and work together.
- Good: an app can help people keep in touch.
- Harm: mean messages online can hurt people. This is called cyberbullying.
- Harm: screens can take time away from sleep and play.
Some stories and art belong to the communities they come from. Ask before you use them.
- Write Good on the left and Not good on the right.
- Write one app impact in each column.
- Tell a trusted adult which impact worries you most.
Safety and Security in Building Apps
🎯 (CTLS-SAF-01)
📌 Recognise safety and security considerations when developing apps and web software
Safety means users are not harmed. Security means their information is kept private.
Before you share an app, ask:
- Does it ask for personal data we really need?
- Can a stranger see the data?
- Is the password rule strong enough?
- Who can help if something goes wrong?
Keep a note of each question and its answer. This helps the team fix problems early.
- Answer each question yes or no.
- Circle any question where the answer is a worry.
- Show your answers to a teacher.
Screen Layout and Interactive Parts
🎯 (CTLS-DES-01)
📌 Explore app and web software interface layout, including interactivity and functional elements
The layout is how the parts of a screen are arranged. Interactivity means the screen responds when you tap, click or type.
A common layout has:
- a header at the top, with the app name
- a menu to move between pages
- a main area in the middle, with the content
- a footer at the bottom, with extra links
Wireframe
A phone screen with four areas
A plain sketch of one phone screen, with four areas labelled.
What to notice
- The header sits at the top, with the app name.
- The menu is at the side, to move between pages.
- The main area in the middle holds the content.
- The footer at the bottom holds extra links.
Try thisPoint to each area and say what belongs in it.
Functional elements are parts that do a job. Buttons, forms and scroll bars are examples.
- Draw a box at the top and write “Header”.
- Draw a side menu and a main area in the middle.
- Draw three buttons in the main area. Label each one.
What Users Need and Want
🎯 (CTLS-DES-01)
📌 Identify a user’s preferences, needs and wants when accessing/using an app or web software
A user is the person who uses an app. Users have needs, wants and preferences.
A need is something a user must have. For example, a person with low vision may need large text.
A want is something nice to have. A preference is what a user likes, such as a favourite colour.
You can find out by asking good questions. Ask about needs and wants, not private details.
- What app do you use most?
- What is hard to use?
- What one thing would you change?
Comparing UI and UX Features
🎯 (CTLS-DES-01, CTLS-COM-01)
📌 Compare features of UI and UX on apps and web software
The UI is what you see and touch. Examples are buttons, colours and text styles.
The UX is how the app feels to use. Is it easy, quick and helpful?
To compare, say how two things are alike and different. Both affect the user. UI is the look. UX is the feel.
A large Play button is UI. Finding it quickly is part of UX.
- Circle three parts you see, such as buttons.
- Write one word that describes how the app feels, such as easy.
- Say one way the look and the feel are alike.
Responsive Design for Any Screen
🎯 (CTLS-DES-01)
📌 Explore responsive app and web design and its significance for UX
Responsive design means the screen layout changes to fit the device. A phone, a tablet and a computer have different screen sizes.
On a computer, a menu may sit across the top. On a phone, it may shrink into a small button.
Why does it matter? A responsive app is easy to use on any screen. That makes the user experience better.
- Open the same simple website on both.
- Find one part that moved or changed.
- Say if the change made it easier to use.
Design Specifications for an App
🎯 (CTLS-DPM-01, CTLS-COL-01)
📌 Participate in developing design specifications for an app or web software project
A design specification is a list of what an app must do. It also says how the app should look. It tells the builders what to make.
Here is a short example for a packing app:
- The app shows a list of items.
- A user can tick an item when it is packed.
- The text is large and the buttons are easy to tap.
Everyone in the team helps write the specification. Users can also say what they need.
- Write what the app must do, in one line.
- Write who will use it.
- Write one thing it must look like, such as big buttons.
Agile Tools for Planning Projects
🎯 (CTLS-COL-01)
📌 Use agile tools when planning, designing and developing projects
Agile means working in small steps. The team tests and changes the work as it goes.
An agile tool helps a team see its tasks. Many teams use a board with three columns.
- To do: tasks not started yet.
- Doing: tasks in progress.
- Done: finished tasks.
A paper board works well too. Move a sticky note to the next column when a task moves.
- Write four tasks on sticky notes or small cards.
- Place each note in the To do column.
- Move each note as you finish it, until it is in Done.
GUI Display Areas and User Experience
🎯 (CTLS-DES-01)
📌 Explore how the use of graphic user interface (GUI) display areas within apps and web software increase the UX
A GUI is a screen with pictures, icons and buttons. It stands for graphical user interface.
A display area is one part of the screen with a job.
Grouping display areas helps people find things. This makes the UX better.
Example: a music app has three display areas:
- A now playing area shows the song.
- A list area shows the songs.
- A button row holds the play controls.
- Draw three display areas, such as a title, list and buttons.
- Label each display area with its job.
- Ask a partner what they find first.
Managing Time and Resources
🎯 (CTLS-COL-01)
📌 Use a scaffold to manage time and resources when developing an app or web software
When you build an app, your time and materials are limited. A resource is anything you use, such as paper or a device.
A scaffold helps you plan your time. Write each step. Estimate how long it will take.
Keep a simple timetable for the project. Check it each week with your team.
- Write three steps down the left side.
- Write a guess for each step, in minutes or days.
- Tick each step as you finish it.
Input, Process, Output and Decisions
🎯 (CTLS-ALG-01, CTLS-THI-01)
📌 Identify and use input process output (IPO), decision trees, or ‘and/or’, ‘if/then/else’ statements when developing app or web software programs or games/simulations
IPO stands for input, process and output. Input is what goes in. Process is what the program does with it. Output is what comes out.
- Input: two numbers, such as 4 and 5.
- Process: add the two numbers.
- Output: the total, 9.
A decision is an if/then/else choice. The program checks a condition, then picks one path.
And needs both parts to be true. Or needs at least one part to be true.
Predict the output before you run this code.
hungry = True
has_money = False
# 'and' needs both parts to be true
if hungry and has_money:
print("Buy lunch")
else:
print("Eat your snack")- Write “Is it raining?” in a box at the top.
- Draw a yes line to “Take an umbrella”.
- Draw a no line to “Leave it at home”.
Prototypes for Ideas and Features
🎯 (CTLS-COM-01, CTLS-DES-01)
📌 Design and develop physical/web-based prototypes to communicate ideas and features to potential end users
A prototype is an early model of an idea. You make it to test a design early. Users can try it before the full app is built.
A physical prototype might be paper screens. A web prototype might be a simple web page with one button.
Example: a paper prototype for a lunch order app has three screens. A user taps a paper button to move to the next screen.
- Draw three phone screens on paper.
- Draw one button on the first screen.
- Point to the button and move to the next screen. Say what happens.
Changing Code and Seeing Results
🎯 (CTLS-ALG-01)
📌 Participate in modifying existing code in app or web software applications and observe the variable changes in the output
A variable is a labelled box that holds a value. The value can change while the program runs.
Changing the code and running it again shows what the variable does. Try this example with a teacher.
# A variable is a labelled box
points = 5 # change this number
print("Points:", points)Change 5 to 10 and run it again. The output now says Points: 10. The label stays the same. The value changes.
- Run the code and write down the output.
- Change the number and run it again.
- Compare the two outputs. What changed?
Building an Interface for a User
🎯 (CTLS-DES-01, CTLS-DPM-01)
📌 Design and produce an app or web interface based on the preferences of an identified end user
An end user is the person who will use the app. Good design starts by asking what that person prefers.
For example, a grandparent may want large text and big buttons. A designer makes the text larger and the buttons bigger.
Build the screen step by step. Check each part with the user before you go on.
- Write three things Sam prefers, such as big text.
- Draw a screen with one big button for each preference.
- Show the drawing to a partner. Ask if Sam would like it.
Changing Properties of Objects
🎯 (CTLS-ALG-01)
📌 Use properties to change the variables of objects within a program or application
An object is a thing on the screen. It can be a button, a picture or a character.
A property is a setting of an object. Examples are size, colour and position.
You change a property to change how an object looks. The lines below show the idea:
set button size to 150
set button colour to blueBlock coding tools work the same way. You drag a block into place and choose a value.
- Pick one object on the screen.
- Change its size property to a new number.
- Say what changed on the screen.
Finding and Fixing Code Errors
🎯 (CTLS-ALG-01, CTLS-DPM-01)
📌 Identify and correct errors within an existing algorithm or code, including syntax, Boolean and run time errors
An error is a mistake in code. Finding and fixing errors is called debugging.
There are three common kinds of error:
- Syntax error: a spelling or rule mistake. The program stops before it runs.
- Boolean error: a true or false test gives the wrong answer.
- Run-time error: a mistake that only shows up while the program runs.
This code has a syntax error. Can you spot it?
# Look at the if line
score = 7
if score > 5
print("Well done")Add a colon at the end of the if line.
- Find the mistake. Is it a syntax, Boolean or run-time error?
- Fix it by adding the missing colon.
- Run the code again and check the output.
Designing GUI Display Areas
🎯 (CTLS-DES-01)
📌 Design GUI display areas based on developed apps or web software
A GUI layout is planned before the code is built. Good planning makes the screen easy to understand.
First, choose the display areas. Next, place them on the screen. Then label each area and test the sketch.
Example: a sports score app. The header shows the team names. The main area shows the score. The menu lets you choose a game.
- Draw four display areas: header, menu, main area and footer.
- Write the job of each area in one short line.
- Ask a partner to point to the menu. Did they find it quickly?
Designing Password Rules in an App
🎯 (CTLS-SAF-01, CTLS-ALG-01)
📌 Design an app or web software program that meets password length and requirements
A password rule is a check that a password must pass. For example, a password must be long enough.
Your code can check the length. This example asks for a practice password and checks it. Never type a real password into practice code.
# Practice only: never use a real password here
password = input("Make a practice password: ")
if len(password) < 8:
print("Too short. Try again.")
else:
print("Good length.")The number 8 is only an example rule.
- Run the code with a short word, such as “cat”.
- Run it again with a longer practice word.
- Change the number 8 to 6 and run it again. What changed?
Writing Criteria to Test an App
🎯 (CTLS-COL-01, CTLS-DPM-01)
📌 Independently or collaboratively develop a set of criteria to test app or web software using different scenarios
Criteria are the things a good app must do. A scenario is a situation that you test.
For example, a scenario is a user who forgets their password. The criterion is that the app shows a reset option.
With a partner, write three criteria and three scenarios. Then test each one.
- Write one scenario, such as “a user taps the wrong button”.
- Write what the app should do in that case.
- Turn that into a criterion you can tick yes or no.
How App Use Has Changed
🎯 (CTLS-EVL-01)
📌 Reflect on how app or web software use and interactions have changed
To reflect means to think back on something. Think about how you used apps a few years ago.
Compare that with how you use them now. Many things change over time.
For example, a school may once have shared news on paper. Now it may use a school app.
- Write two things you did with an app a few years ago.
- Write two things you do with apps now.
- Say one change you noticed.
Testing an App Against Criteria
🎯 (CTLS-DPM-01)
📌 Test and assess the effectiveness of app and web software designs using a set of agreed criteria
To test effectiveness means to check how well an app works. You use a set of agreed criteria to check it.
Use a checklist. For each criterion, mark yes or no. Then count the yes marks. A high count shows the design meets more criteria.
Example: criterion one says the Save button is easy to find. The tester marks yes.
- Write three criteria, each as a short line.
- Test a simple app against each criterion.
- Mark yes or no and count your yes marks.
Does the App Work as Planned?
🎯 (CTLS-DES-01)
📌 Test the functionality of a developed app or web software program based on the elements of UX and UI
Functionality means whether an app does what it should. Testing functionality checks buttons, menus and text boxes.
UX and UI both matter here. Does each button do what its label says? Is the text clear and easy to read?
Example: tap the Send button. If the message does not send, write it down as a problem.
- Tap each button once.
- Check that each one does what its label says.
- Write “works” or “does not work” beside each button.
Problems Found When Testing
🎯 (CTLS-DPM-01)
📌 Identify issues encountered when testing solutions
An issue is a problem you find when you test. For example, a button may do nothing. Text may also be too small to read.
Write each issue in a log. A log is a list of what went wrong. Include what happened, where it happened and an idea for a fix.
| What happened | Where | Fix idea |
|---|---|---|
| The Send button does nothing | Message screen | Check what the button is set to do |
- Make three columns: What happened, Where and Fix idea.
- Write one issue in the first row.
- Show your log to a teacher or partner.
Using Test Data to Check Code
🎯 (CTLS-ALG-01)
📌 Test data to check an algorithm and programming code
Test data is sample input that you use to check code. You also write down the result you expect. Then you compare it with the real result.
Example: a password checker should say Too short for a short word. Use three test words to check it.
| Test input | Expected result | Actual result |
|---|---|---|
| cat | Too short | Fill in after you run it |
| A long practice word | Good length | Fill in after you run it |
| Nothing typed | Too short | Fill in after you run it |
- Run the code with each test input.
- Write what actually happens in the last column.
- Check: do the expected and actual results match?
Ethics and Cybersecurity of Apps
🎯 (CTLS-SAF-01)
📌 Recognise the ethical and cybersecurity considerations of app and web software designs
An ethical design is fair, honest and kind. A cybersecurity design keeps data and devices safe from misuse.
Developers check these points:
- Does the app ask only for data it needs?
- Does it ask permission before using your camera or location?
- Are passwords kept safe and never shown on screen?
Phishing is a fake message. It tries to trick you into sharing a password or private details. To spot it, check the sender and avoid strange links.
Tell a trusted adult about anything that worries you.
- Answer each point yes or no.
- Circle any point you marked no.
- Tell a trusted adult about any worry.