Book 7

Innovative Technology
Designer Explorer
Computational
Thinker
Robot Digital
Programmer
Citizen
Empowered Knowledge
Learner Constructor
ICTECH
Computing
Developed By:
EdTech Department
The City School

Acknowledgements
Project Lead
General Manager Education Technology
Project Team
EDTECH Department
&
Regional Computing Curriculum Leaders
Group Head Office: 31 – Industrial Area, Guru Mangat Road,

Gulberg III, Lahore, Pakistan.
Ph: +92 (42) 111 444 123
Fax: +92 (42) 35773065
Website: www.thecityschool.edu.pk
The entire computing curriculum is mapped with the attainment levels of the
UK National Curriculum, ICDL and ISTE Student Standards 2017-2018.
ICDL
All rights reserved. No part of this publication may be reproduced or transmitted in any part by any
means at any time.

Data Handling..........................................................................................................................................11
1.1. Understanding Databases........................................................................................................................................................................................................12
1.2. Relative and Absolute References in Excel.................................................................................................................................................................12
1.3. Format Sheet as Table.................................................................................................................................................................................................................14
1.4. Advance Filters and Sort Features..................................................................................................................................................................................... 16
1.5. Working with Power and Percentage Formula.......................................................................................................................................................18
1.6. Common Error Messages in Excel.....................................................................................................................................................................................20
1.7. Advance Charts..................................................................................................................................................................................................................................21
1.8. Modifying and Formatting Chart Design....................................................................................................................................................................25

Table of Contents
1.9. Conditional Formatting...............................................................................................................................................................................................................28
1.10. Import and Export Data as CSV Files.............................................................................................................................................................................30
1.11. Pivot Table..............................................................................................................................................................................................................................................32
Building a Website............................................................................................................................. 47
2.1. What is a Webpage....................................................................................................................................................................................................................48
2.2. Getting Started with HTML....................................................................................................................................................................................................48
2.3. Creating a Webpage..................................................................................................................................................................................................................51
2.4. Common HTML Tags.................................................................................................................................................................................................................53
2.5. Introduction to Adobe Dreamweaver..........................................................................................................................................................................55
2.6. Getting Started with Adobe Dreamweaver...........................................................................................................................................................55
2.7. Creating Webpage in Dreamweaver...........................................................................................................................................................................56
2.8. Creating Website in Dreamweaver...............................................................................................................................................................................59
2.9. Inserting Media with HTML5................................................................................................................................................................................................64
2.10. Getting Started with CSS.........................................................................................................................................................................................................68
2.11. CSS with Dreamweaver...........................................................................................................................................................................................................70
2.12. Creating Web Forms..................................................................................................................................................................................................................72
All About Cloud................................................................................................................................... 79

3.1. What is a Computer Network........................................................................................................................................................................................... 80
3.2. Network Topology and Type............................................................................................................................................................................................. 81
3.3. Types of Area Network........................................................................................................................................................................................................... 81
3.4. How Does the Internet Work.............................................................................................................................................................................................. 83

3.5. Internet Functions........................................................................................................................................................................................................................ 84
3.6. Communication Links............................................................................................................................................................................................................... 84
3.7. Data and Network Security................................................................................................................................................................................................ 85
3.8. Understanding Digital Citizenship.................................................................................................................................................................................. 86
3.9. Cloud Storage................................................................................................................................................................................................................................. 88
3.10. Getting Familiar with Google Workspace............................................................................................................................................................... 90
3.11. Google Drive..................................................................................................................................................................................................................................... 90
3.12. Getting Started with Google Docs................................................................................................................................................................................. 93
3.13. Google Translate.......................................................................................................................................................................................................................... 97

Table of Contents
3.14. Google Maps.................................................................................................................................................................................................................................... 99
Presenting Your Ideas....................................................................................................................... 105

4.1. What is Sway?...................................................................................................................................................................................................................................106
4.2. What Can I Create with Sway?...........................................................................................................................................................................................106
4.3. Getting Started with MS Sway.............................................................................................................................................................................................107
Programming the Computer-Python......................................................................................... 112

5.1. Overview..................................................................................................................................................................................................................................................113
5.2. Flowcharts and Algorithms.....................................................................................................................................................................................................113
5.3. Pseudocode..........................................................................................................................................................................................................................................115
5.4. What is a Program..........................................................................................................................................................................................................................116
5.5. Getting Started with Python...................................................................................................................................................................................................116
5.6. Variables and Data Types........................................................................................................................................................................................................119
5.7. Comments..............................................................................................................................................................................................................................................121
5.8. Python Numbers...............................................................................................................................................................................................................................122
5.9. Calculation with Numbers.........................................................................................................................................................................................................123
5.10. LIST in Python.....................................................................................................................................................................................................................................124
5.11. Conditional Statements in Python.....................................................................................................................................................................................125
5.12. Loops in Python.................................................................................................................................................................................................................................127
5.13. Functions in Python........................................................................................................................................................................................................................128
5.14. Error Handling in Python...........................................................................................................................................................................................................130
5.15. Creating Graphics with Python.............................................................................................................................................................................................131
5.16. Event Handling in Python..........................................................................................................................................................................................................134

Robotics....................................................................................................................................................138
6.1. What is Robotics............................................................................................................................................................................................................................ 139
6.2. Getting Started with Edison.................................................................................................................................................................................................. 143
6.3. Introduction to EdPy................................................................................................................................................................................................................... 145
6.4. Starting to Code in EdPy......................................................................................................................................................................................................... 147
6.5. Edison Drive Function in EdPy........................................................................................................................................................................................... 148
6.6. Variables in Edison....................................................................................................................................................................................................................... 150
6.7. Looping Structures in Edison.............................................................................................................................................................................................. 151

Table of Contents
6.8. Play Tunes on Edison................................................................................................................................................................................................................. 153
6.9. Conditional Structures in Edison...................................................................................................................................................................................... 154
6.10. Obstacle Detection...................................................................................................................................................................................................................... 156
6.11. Clap Control Drive........................................................................................................................................................................................................................ 157
6.12. Line Tracking Sensor.................................................................................................................................................................................................................. 158
6.13. Light Sensors.................................................................................................................................................................................................................................... 159
6.14. Light Sensors.................................................................................................................................................................................................................................... 160
Mobile App Development................................................................................................................ 163

7.1. Getting Started with AppLab.................................................................................................................................................................................................... 164
7.2. setProperty( ) Block......................................................................................................................................................................................................................... 164
7.3. Event Handling..................................................................................................................................................................................................................................... 165
7.4. Working with Sound......................................................................................................................................................................................................................... 167
7.5. Working with Images...................................................................................................................................................................................................................... 168
7.6. Designing an App.............................................................................................................................................................................................................................. 170
Glossary........................................................................................................................................................174
What is ICTECH Computing?
The ICTech (Innovation in Curriculum through Technology) Curriculum is based on

the best practices in learning and teaching with technology to improve higher order
thinking skills of students to prepare them for their future in a competitive global
job market. In this curriculum, technology is used as a tool to integrate 21st century
competencies and expertise such as communication, leadership, critical thinking,
complex problem solving and collaboration in different subjects.
Structure of the Book

• Data Handling: techniques to surf internet and staying safe in online world
• Building a Website: designing and developing a website from scratch using HTML
and CSS
• All about Cloud: getting familiar with cloud storage services
• Presenting Your Ideas: designing professional presentations using templates
• Programming the Computer-Python using python language to program computers
• Robotics: getting familiar with robot programming
• Mobile App Development: designing and developing mobile applications
Book Features
Student Learning Outcomes
These appear at the start of each chapter and define the skills students will be
equipped with after completing the lesson.
ISTE Student Standard Coverage
These represent the ISTE student standards covered in each chapter. A complete
description of ISTE student standard can be found here.
Chapter Opener
These appear at the start of every chapter and are designed to grasp learners
attention related to the topic. Chapter openers consist of useful bits of information
related to the topic.
Checkpoint
Checkpoints are learning bits that appear within the chapter at different stages to
reinforce the important learning concepts.
Food for Neurons
Food for neurons consist of fun facts or trending news about the topic. These appear
within each chapter.
Let’s Review
Each chapter ends with the key learning points that provide a complete overview of
the chapter.
Chapter Highlights
Key terms appearing throughout the chapter are highlighted to draw learner’s
attention.
My Notes
My Notes section appears at the end of the chapter. Here learners can write important
learning points or reflect on their learning.
Glossary
Contains the important terminology covered in the book.
Data Analysis-Application
Security
Data analytics applications, or, more specifically,
predictive analysis help in minimizing crime rates.
Delivery
Logistic companies are using data analysis to
examine collected data and improve their overall
efficiency.
Healthcare
Self-learning healthcare programs, are able to work on
data of individual patients to provide a personalized
health recommendation.
Urban Planning
Big Data allows urban planners to develop a new
understanding of how cities function.
Energy Consumption
Data analysis allows smart meters to self-regulate
energy consumption for the most efficient energy use.
Data Handling
After going through this chapter, students will be able to:
1. Understand the concept of databases

2. Format data as table and use advance filters and sorting techniques on the data.
3. Understand and use relative and absolute references
4. Understand and correct error messages
5. Work with power and percentage formula
6. Format different types of chart
7. Create pivot tables on a given data set
8. Generate different data sets by using selected headings and filters
9. Use slicer feature to create different data sets
10. Create pivot charts based on pivot table data
11. Generate pivot charts on desired variables from the given data set using filters and slicers
12. Save and print the pivot table and charts
Empowered Computational Creative

Learner Thinker Communicator
1a 1d 5a 5b 5d 6d
The City School 2021-2022
1.1. Understanding Databases

A database (DB), in the most general sense, is an
organized collection of data. In other words, a
database is used by an organization as a method
of storing, managing and retrieving information.
Modern databases are managed using a Database
Management System (DBMS).
1.2. Relative and Absolute References in Excel

In MS Excel all the cells have an address, for example, the first cell is known as A1. This
address is taken from rows and columns, A is for the column and 1 is for the row. A cell
reference is the address of the cell and identifies its location. When you want to copy
the same formula to new cells, you can use the relative and absolute references.
12
Relative Reference
Relative Reference is the cell reference. When you copy a cell that has a formula, the
formula changes automatically. The change depends on the relative position of rows
Data Handling
and columns. For example, type the contents of columns A and B below and in cell C2,
type =A2*B2. If you copy the formula A2*B2 to cell C3, it will become A3*B3.
Absolute Reference
An absolute reference is used when we want to keep a cell, a row or a column
constant when copying a formula. You have to declare it when you create the formula
by using the $ (dollar sign). This way you create an absolute reference which doesn’t
change when it’s copied or filled.
Syntax Description
$E$1 Cell reference will not update while copying or filling
$E1 Only the row reference will update and the column remains the
same
E$1 Only column reference will update and row remains same
13
1.3. Format Sheet as Table

In Excel, a table is a specially designated range of numbers. This special range of
numbers has added functionality that other cell ranges do not have. You can have
more than one table in a workbook or worksheet if you want, and tables can be as
large or small as the amount of data you want to work with.
Normally a table is made from adjacent columns of data, with a unique label or
heading for each column. Each row in the table should have entries organized
according to the column headings. You should keep your table data adjacent in a
block to take advantage of all of Excel’s table features. Some Excel features, like filters
and PivotTables, will not work correctly if the data is not blocked together in adjacent
columns as a table.
To create a table from existing data in your spreadsheet:
1. Select a range of data in adjacent columns or click any cell within the required data
range. In the example below, we selet cell range A2:D9.
2. On the Home Ribbon, Style group, click on the Format as Table button.
14
3. This will display a menu of table formatting options. If you click on one of the table
menu options, the selected range will be formatted as a table based on the style of
your choice.
Data Handling
4. When you choose a table format, you will see a Format as Table dialogue box
appear. Make sure the cell range shown is the range that you want for your table;
Click the OK button to create your table.
15
1.4. Advance Filters and Sort Features
Sorting Data
If you have a lot of records, it’s a good idea to sort them because this way it will be
easier to find what you are looking for. You can put the data in alphabetical order for
text fields or start from the smallest to the largest (and vice versa) for numbers. To sort
data do the folowing:
1. Choose a column that you want to sort by. Click on the Sort & Filter option on
the Home tab and select the order either ascending or descending as per your
necessity.
2. If there is any data in your other adjacent columns a warning window will appear
before performing the sorting option to expand the selection or continue with the
existing selection.
16
Advanced Filters
Advanced filters can be constructed to get more control over your data tables.
1. As an example, we want to display the records of people who purchased camera.
Data Handling
Click the arrow button next to a field header Type.
2. Click Text Filters and then click Custom Filter. In the camera list, click contains and
in the text box next to it, type camera.
3. Click OK. Then only those records whose Type field contains the word camera are
displayed.
17
1.5. Working with Power and Percentage Formula
Power
In complex calculations, there is more than one Checkpoint
part to the formula, the order of the calculations A database (DB), is an organized
collection of data.
is from left to right, but any part of the formula in Relative Reference is the cell reference.
When you copy a cell that has a formula,
the formula changes automatically.
parentheses will be calculated first. An absolute reference is used when we
want to keep a cell, a row or a column
constant when copying a formula.
Try simple exponent/power calculation using a ^ symbol in your formula answer will
be 4.
Type the numbers below. Click any cell and type =((C1Â1)-(D1^B1))+((B1/A1)*A1)^2
18
Percentage
Values can be changed from a decimal number to a percentage by applying the
percentage format. Microsoft Excel multiplies the cell by 100 and displays the result
Data Handling
with the percentage sign.
1. Enter the data shown in the image below
2. Click cell B3 and type =B2/D2 and click cell C3 and type =C2/D2.
3. Select the cells which contain the numbers you want to format, in this case, B3 and
C3. On the Home tab, in the Number group, click the Percentage symbol button %.
19
3. Percentage can be applied through formula directly putting *100 at the end of the
formula.
1.6. Common Error Messages in Excel

If we do mistake while typing formulas. MS Excel will show you different types of
errors relevant to the mistake we have made in a formula. The most common error
messages are:
######
This message appears when the column is not

wide enough to display all of its content. You can
correct it by increasing the width of the column to
fit the content correctly.
#DIV/0!
This error message appears when you divide

something by 0. You can correct it by changing
the divider in the function or formula so it is not
zero or blank.
20
#Name?
This error message appears when you have
Data Handling
typed a wrong formula and MS Excel cannot
recognize it. You can correct it by typing the
correct formula’s name.
#VALUE! Error
This error appears when your formula includes

cells that contain text and numbers. You can
correct it by correcting data types.
1.7. Advance Charts

Charts in Excel
A chart is a graphical representation of data and describes the overall analysis
visually. There are several type charts in MS Excel for different sorts of data.
Column/Bar Chart
Column/bar chart is used to illustrate

comparisons between a series of data.
In a column chart, categories appear
horizontally (x-axis) and numeric values
appear vertically (y-axis). The opposite
happens in a bar chart which is one of the
most commonly used chart types.
21
Line Chart
It is used to display trends. It shows the

changes in data over a period of time.
Numeric values always appear vertically
(y-axis) and categories horizontally (x-axis).
It is suitable for showing data for a large
number of groups.
Pie Chart
It used to display only one series of data.

It shows the relationship of the parts to the
whole. You have to pay attention. It is suitable
for showing data for one group.
Creating Chart in Excel
To create a column chart, execute the following steps:
1. Select the cells you want to chart, including the column titles and row labels. These
cells will be the source data for the chart. In our example, we’ll select cells A1:F6.
22
2. On the Insert tab, in the Charts group, select the chart type.
Data Handling
3. Choose the desired chart type from the drop-down menu.
4. The selected chart will be inserted in the worksheet.
23
5. To visualize data of a selected range of data, hold the ctrl key and select your
desired columns. For instance, in this example, we need to visualize fiction book
sales in the year 2010 only. Select the range A1:A6 hold down the ctrl key and select
the cell range D1:D6.
6. On the Insert tab, in the Charts group, select column chart option. Select your
desired chart style.
24
7. In order to visualize the fiction book sale from 2009 to 2011, select the desired
columns. On the Insert tab select Line Chart option. Select your desired chart style
from the drop-down menu.
Data Handling
1.8. Modifying and Formatting Chart Design
Chart Design
To modify the charts, select the chart and go to Design. Following modification options
are available:
Chart layouts
Excel allows you to add chart elements—such as chart titles, legends, and data
labels—to make your chart easier to read. To add a chart element, click the Add Chart
Element command on the Design tab, then choose the desired element from the drop-
down menu. The Quick Layout option allows you to select a predefined chart style.
25
Chart styles
Excel also includes several different chart styles,

The estimated amount of data on
which allow you to quickly modify the look and feel the internet created daily will be
of your chart. To change the chart style, select the 463 exabytes* in 2025.
desired style from the Chart styles group. * an exabyte is 1,000 bytes to the sixth power.
Data
The Data tab allows to switch the rows and columns of the chart. The Switch Rows/
Columns option swaps the data over the axis. Data being charted on the x-axis will
move to y-axis and vice-versa. On the other hand, the Select Data option allows you to
change the data range included in the chart.
26
Type
The Change Chart Type option allows to change the type of your current chart.
Data Handling
Chart Formatting
Every element of the chart is editable, to do that select that element of the chart and
go to Format tab.
27
1.9. Conditional Formatting

Conditional formatting allows you to
automatically apply formatting—such as Checkpoint
colors, icons, and data bars—to one or
Column/bar chart is used to illustrate
more cells based on the cell value. To do comparisons between a series of data.
this, you’ll need to create a conditional Line chart shows the changes in data
over a period of time.
formatting rule. For example, a conditional
Pie chart shows the relationship of the
formatting rule might be: If the value is less parts to the whole.
than $2000, color the cell red. By applying

this rule, you’d be able to quickly see which cells contain values less
than $2000.
Applying Conditional Formatting

In our example, we have a worksheet containing sales data, and we’d like to see which
salespeople are meeting their monthly sales goals. The sales goal is $4000 per month,
so we’ll create a conditional formatting rule for any cells containing a value higher
than 4000.
1. Select the desired cells for the conditional formatting rule.
28
2. From the Home tab, click the Conditional Formatting command. A drop-down
menu will appear.
3. Hover the mouse over the desired conditional formatting type, then select the
desired rule from the menu that appears. In our example, we want to highlight cells
Data Handling
that are greater than $4000.
4. A dialog box will appear. Enter the desired value(s) into the blank field. In our
example, we’ll enter $4000 as our value.
5. Select a formatting style from the drop-down menu. In our example, we’ll choose
Green Fill with Dark Green Text, then click OK.
6. The conditional formatting will be applied to the selected cells. In our example, it’s
easy to see which salespeople reached the $4000 sales goal for each month.
29
1.10. Import and Export Data as CSV Files

In MS Excel we can import and export data from many sources to many types of file.
One of the most common sources for import and export is the CSV file. CSV files are
Comma-Separated Values and can be incorporated in any software or database.
Import a CSV File
To import a CSV file, follow these steps:
1. From the office ribbon go to the Data Tab and click the From Text button.
2. Select the CSV file from the file browser window that just opened.
30
3. After selecting the file select delimited from the Text Import Wizard.
Data Handling
4. Click next and at this point, data can be separated through a Tab, Semicolon,
Comma, or Space and can be specified in the Other: box and click next and Finish.
Export Data in CSV
Open an Excel file, on the File tab click Save As and click Browse. Select the file type as
CSV and click save.
31
1.11. Pivot Table

When you have a lot of data, it can sometimes be difficult to analyze all of the
information in your worksheet. PivotTables can help make your worksheets more
manageable by summarizing your data and allowing you to manipulate it in different
ways.
Using Pivot Tables to Answer Questions
Consider the example below. Let’s say we wanted to answer the question What is the
amount sold by each salesperson? Answering it could be time consuming and difficult;
each salesperson appears on multiple rows, and we would need to total all of their
different orders individually. We could use the Subtotal command to help find the total
for each salesperson, but we would still have a lot of data to work with.
Fortunately, a PivotTable can instantly calculate and summarize the data in a way
that’s both easy to read and manipulate. When we are done, the PivotTable will look
something like this:
32
Once you’ve created a PivotTable, you can use it to answer different questions by
rearranging—or pivoting—the data. For example, let’s say we wanted to answer What
is the total amount sold in each month? We could modify our PivotTable to look like
Data Handling
this:
Creating Pivot Table

1. Select the table or cells (including column headers) you want to include in your
PivotTable.
2. From the Insert tab, click the PivotTable command.
33
3. The Create PivotTable dialog box will appear. Choose your settings, then click OK. In
our example, we’ll use Table1 as our source data and place the PivotTable on a new
worksheet.
4. A blank PivotTable and Field List will appear on a new worksheet.
5. Once you create a PivotTable, you will need to decide which fields to add. Each field
is simply a column header from the source data. In the PivotTable Field List, check
the box for each field you want to add. In our example, we want to know the total
amount sold by each salesperson, so we will check the Salesperson and Order
Amount fields.
34
6. The selected fields will be added to one of the four areas below the Field List. In our
example, the Salesperson field has been added to the Rows area, while the Order
Amount has been added to the Values area. Alternatively, you can click, hold, and
Data Handling
drag a field to the desired area.
7. The PivotTable will calculate and summarize the selected fields. In our example, the
PivotTable shows the amount sold by each salesperson.
35
Just like with normal spreadsheets, you can sort the data in a PivotTable using the
Sort & Filter command on the Home tab. You can also apply any type of number
formatting you want. For example, you may want to change the number format to
Currency. However, be aware that some types of formatting may disappear when you
modify the PivotTable.
If you change any of the data in your source worksheet, the PivotTable will not update
automatically. To manually update it, select the PivotTable and then go to Analyse >
Refresh.
Pivoting Data
One of the best things about PivotTables is that they can quickly pivot or reorganize
data, allowing you to look at your worksheet data in different ways. Pivoting data can
help you answer different questions and even experiment with the data to discover
new trends and patterns.
In our example, we used the PivotTable to answer the question: What is the total
amount sold by each salesperson? But now we’d like to answer a new question: What
is the total amount sold in each month? We can do this by simply changing the field in
the Rows area.
36
To change row:
1. Click, hold, and drag any existing fields out of the Rows area. The field will
disappear.
Data Handling
2. Drag a new field from the Field List into the Rows area. In our example, we will use
the Month field.
3. The PivotTable will adjust or pivot to show the new data. In our example, it now
shows the total order amount for each month.
37
To add a column
So far, our PivotTable has only shown one column of data at a time. To show multiple
columns, you will need to add a field to the Columns area.
1. Drag a field from the Field List into the Columns area. In our example, we will use
the Region field.
2. The PivotTable will include multiple columns. In our example, there is now a column
for each region.
38
3. The PivotTable will include multiple columns. In our example, there is now a column
for each region.
Data Handling
Adding Filters
In our example, we will filter out certain salespeople to determine how they affect the
total sales.
1. Drag a field from the Field List to the Filters area. In this example, we will use the
Salesperson field.
2. The filter will appear above the PivotTable. Click the drop-down arrow, then check
the box next to Select Multiple Items.
39
3. Uncheck the box next to any item you don’t want to include in the PivotTable. In our
example, we’ll uncheck the boxes for a few salespeople, then click OK.
4. The PivotTable will adjust to reflect the changes.
40
Slicers
Slicers make filtering data in PivotTables even easier. Slicers are just like filters, but
they’re easier and faster to use, allowing you to instantly pivot your data. If you
Data Handling
frequently filter your PivotTables, you may want to consider using slicers instead of
filters.
Adding Slicers
1. Select any cell in the PivotTable. From the Analyze tab, click the Insert Slicer
command.
2. A dialog box will appear. Check the box next to the desired field. In our example,
we’ll select Salesperson, then click OK.
41
3. The slicer will appear next to the PivotTable. Each selected item will be highlighted
in blue. In the example below, the slicer contains all eight salespeople, but only five
of them are currently selected.
4. Just like filters, only selected items are used in the PivotTable. When you select
or deselect an item, the PivotTable will instantly reflect the change. Try selecting
different items to see how they affect the PivotTable. Press and hold the Ctrl key on
your keyboard to select multiple items at once.
42
Pivot Charts
Pivot Charts are like regular charts, except they display data from a Pivot Table. Just
like regular charts, you’ll be able to select a chart type, layout, and style that will best
Data Handling
represent the data.
Adding Pivot Charts
In the example below, our PivotTable is showing a portion of each region’s sales
figures. We’ll use a PivotChart so we can see the information more clearly.
1. Select any cell in your Pivot Table. From the Insert tab, click the PivotChart
command.
2. The Insert Chart dialog box will appear. Select the desired chart type and layout,
then click OK.
43
3. The PivotChart will appear.
4. Try using filters or slicers to narrow down the data in your PivotChart. To view
different subsets of information, change the columns or rows in your PivotTable.
In the example below, we’ve changed the PivotTable to view the monthly sales for
each salesperson.
44
Let’s Review
1. A database (DB), is an organized collection of data.
2. ###### message appears when the column is not wide enough to display all of its
content.
3. #DIV/0! error message appears when you divide something by 0.
4. #Name? This error message appears when you have typed a wrong formula and MS
Excel cannot recognize it.
5. #Value! error appears when your formula includes cells that contain text and numbers.
6. Column/bar chart is used to illustrate comparisons between a series of data.
7. Line chart used to display trends.
8. Pie chart is used to display only one series of data.
9. Conditional formatting allows you to automatically apply formatting—such as colors,
icons, and data bars—to one or more cells based on the cell value.
10. CSV files are Comma-Separated Values and can be incorporated in any software or
database
11. PivotTables can help make your worksheets more manageable by summarizing your
data and allowing you to manipulate it in different ways.
12. Slicers are just like filters, but they’re easier and faster to use, allowing you to instantly
pivot your data.
13. PivotCharts are like regular charts, except they display data from a PivotTable.
My Notes!
45
Different Types of Websites
Blogging Websites
Features regularly updated articles, photos and
videos.
Business Websites
Committed to depicting a particular business. It conveys
the sorts of items as well as services the company/
business offers.
e-Commerce Websites
An online shopping destination where users can purchase
products or services from your company.
Social Media Websites

These websites are normally made to let individuals share
contemplations, pictures or thoughts, or just associate with
others corresponding to a specific topic.
Forum Websites
Network or Social Forums are an incredible method to
connect and share thoughts with individuals with similar
interests or from comparative foundations through the
internet.
2. Building a Website
1. Understand what a webpage is

2. Familiarize with HTML, common tags of HTML and HTML 5
3. Familiarize with Adobe Dreamweaver interface.
4. Create a webpage, add content and create hyperlinks in DW
5. Work with tables in DW and manage website layout using tables
6. Work with inserting images in DW
7. Embed video and audio in website
8. Understand CSS, its types and syntax
9. Work with CSS using UI of DW
10. Apply CSS on HTML script
11. Understand what web forms are
12. Create a web form with DW
Empowered Innovative Creative

Learner Designer Communicator
1a 1d 4a 4c 6d
2.1. What is a Webpage

A web page or webpage is a document commonly written in HTML (Hypertext Mark-
up Language) that is accessible through the Internet or other networks using an
Internet browser. A web page is accessed by entering a URL address and may contain
text, graphics, and hyperlinks to other web pages and files.
A webpage can contain multiple types of scripting and programming languages such
as HTML, CSS, JavaScript, Python, PHP, ASP.Net etc.
2.2. Getting Started with HTML

Hypertext Mark-up Language (HTML) is the standard mark-up language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such as
JavaScript.
HTML elements are the building blocks of HTML pages. With HTML constructs, images
and other objects such as interactive forms may be embedded into the rendered
page. HTML provides a means to create structured documents by denoting structural
semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets. Tags such as
<img /> and <input /> directly introduce content into the page. Other tags such as <p>
surround and provide information about document text and may include other tags
as sub-elements. Browsers do not display the HTML tags but use them to interpret the
content of the page.
HTML5 is the latest version of Hypertext Mark-up Language, HTML5 has been
designed to deliver almost everything you’d want to do online without requiring
additional software such as browser plugins. It does everything from animation
to apps, music to movies, and can also be used to build incredibly complicated
applications that run in your browser.
48
HTML Tags
There are two types of HTML tags
Building a Website
Types of
HTML tags
Paired Unpaired
HTML tags HTML tags
< > < /> <>
Paired HTML Tags
A paired tag consists of two tags, the first one is called an opening tag and the second
one is called closing tag. These tags contain the text in between at which the effect of
that tag will be applied. For example: <b>ABC</b>
Here <b> is the opening tag, </b> is the closing tag and ABC the text in between which
will result as ABC on the browser screen. Some more examples of paired HTML tags
are given below:
• <li> </li> List Items

The <li> tag defines a list item. The <li> tag is used inside ordered lists(<ol>), unordered
lists (<ul>).
Sample Code Output

<ol> 1. Coffee
<li>Coffee</li> 2. Tea
<li>Tea</li> 3. Milk
<li>Milk</li> 4. Water
<li>Water</li> 5. Juice
<li>Juice</li> 6. Shake
<li>Shake</li>
</ol>
49
• <ul> </ul> Unordered list items
The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li>
tag to create unordered lists.
Sample Code Output
<ul> Coffee
<li>Coffee</li> Tea
<li>Tea</li> Milk
<li>Milk</li> Water
<li>Water</li>
</ul>
• <p> </p> Paragraph
The paragraph tag defines a paragraph.
Sample Code Output
<h1>The p element</h1> The p element
<p>This is a paragraph.</p> This is a paragraph.

<p>This is a paragraph.</p>
<p>This is a paragraph.</p> This is a paragraph.
This is a paragraph.
Unpaired HTML Tags

An Unpaired tag is a single tag which does not need a companion tag. These tags can
be written like < > or < /> both works as same, it’s your choice which style you choose.
• <br> Break
An Unpaired tag is a single tag which does not need a companion tag. These tags can
be written like < > or < /> both works as same, it’s your choice which style you choose.
Sample Code Output

<html>
<body> The br element
<h1>The br element</h1> To force
<p>To force<br> line breaks<br> in line breaks
a text,<br> use the br<br> in a text,
element.</p> use the br
</body> element.
</html>
50
• <hr> Horizontal rule

The <hr> element is most often displayed as a horizontal rule that is used to separate
Building a Website
content.
Sample Code Output

<html>
<body> Line-1
<p>Line-1</p>
<hr>
<p>Line-2</p> Line-2
</body>
</html>
HTML Tag Attributes
Attributes define additional characteristics or properties of the element such as width

and height of an image. Attributes are always specified in the start tag (or opening
tag) and usually consists of name/value pairs like name=”value”.
2.3. Creating a Webpage

Creating an HTML page is easy as saving a notepad document, Follow the steps below
to save an HTML using a simple text editor like Notepad.
1. Open notepad and create the basic HTML structure based on the following tags:
51
2. Save the file on your computer. Select File > Save as in the Notepad menu and
manually change the index.txt to index.html. Always save the first page of your web
with the name index as index.html is the most common name used for the default
page shown on a website if no other page is specified when a visitor requests the
site. In other words, index.html is the name used for the homepage of the website.
3. After saving the file, close the notepad and double click on the file to execute. You
will notice instead of opening this file in notepad it will open in your default web
browser.
4. To edit the same file with text editor simply right click on the file and open with
notepad.
52
2.4. Common HTML Tags
Building a Website
<html>...</html>
This tag specifies that the webpage is written in HTML. It appears at the very first and
last line of the webpage. It is mainly used to show that the page uses HTML5 – the
latest version of the language. Also known as the root element, this tag can be thought
of as a parent tag for every other tag used in the page.
<head> … </head>
This tag is used to specify metadata about the webpage. It includes the webpage’s
name<Title>…</Title>, its dependencies (JS and CSS scripts), font usage etc.
<title> … </title>
As the name suggests, this tag contains the title/name of the webpage. You can see
this in your browser’s title bar for every webpage open in the browser. Search engines
use this tag to extract the topic of the webpage, which is quite convenient when
ranking relevant search results.
<body> … </body>
Everything the user sees on a webpage is written inside this tag. It is a container for all
the contents of the webpage.
<h1..h6> … </h1..h6>
Six different variations of writing a heading. <h1> has the largest font size, while <h6>
has the smallest.
<div> … </div>
A webpage’s content is usually divided into blocks, specified by the div tag also known
as division.
53
<p> … </p>
Plain text is placed inside this tag.
<br/>
A line break for webpages. Is used when wanting to write a new line.
<sub> … </sub>
Used for writing a subscript (smaller font just below the mid-point of normal font).
Example: H2O
<sup> … </sup>
Similar to the above tag, but for superscripting. Example 12th.
<b>…</b> OR <strong>…</strong>
For making the text bold.
<u>…</u>
For the underline.
<i>…</i> OR <em>…</em>
For making the text bold and em means to emphasize.
<a href=“”> … </a>

Anchor tag. Primarily used for including hyperlinks.
<img src= “” Alt/>
A tag to display images in the webpage followed by the URL or path where the image
is located either on your drive or on the web. The alt tag is alternative is a contingency
that if the image is not loaded from the server due to the wrong URL or non-responsive
connection from server a text related to the image will appear.
54
2.5. Introduction to Adobe Dreamweaver

Dreamweaver is a web development tool. It is basically for
Building a Website
generating HTML while using an editable front end, kind
of like using Word to do all your layout, and the end result
is an HTML code. The idea is that you should be able to do
all of your layouts visually without having to worry about
the underlying generated code.
Adobe Dreamweaver is one of many HTML editors. It is
used to edit HTML, PHP, JavaScript, CSS and related files
and can also be used to upload them to one’s Web server. Dreamweaver is considered
to be a WYSIWYG (What You See Is What You Get) editor, although what you see in the
program is not always an exact match of what you would see on a live page as that
requires a thorough understanding of the code as well its structure.
2.6. Getting Started with Adobe Dreamweaver
Welcome Screen
On welcome screen select HTML to open a blank HTML file and save it in a folder.
Unlikely notepad Dreamweaver will save the document in HTML format. It is highly
recommended to save your HTML documents in a separate folder as other documents
like CSS and Images will also need to save in this folder, the reason behind this is that
other external resources will be embedded through the URL and improper placements
may cause malfunction of content.
55
Dreamweaver Interface
2.7. Creating Webpage in Dreamweaver
To add content on your webpage, we will use

the design view of DW (Dreamweaver). This Checkpoint
UI looks similar to a word processing software
A webpage can contain multiple types
but there are some limitations due to the HTML of scripting and programming
languages such as HTML, CSS,
JavaScript, Python, PHP, ASP.Net etc.
code.
WYSIWYG stands for What You
Follow the steps below to create an HTML See Is What You Get
document about General information of

Pakistan:
1. Open DW and copy-paste the text from google.

2. DW supports all the external HTML items. Therefore any data, text, and images
copied from other sources will be pasted here with all the relevant formatting and
hyperlinks, which might disturb the existing HTML layout, therefore while pasting
external content use the Ctrl+Shift+V to Paste Special and select the option of Text
only.
56
3. Add the HTML title to About Pakistan.
Building a Website
4. Select the text of Pakistan heading and change it to Heading 1 from the Properties
option at the bottom.
5. To change the font colour of the heading, select Page Properties. A dialog box will
open. From the Category menu, select Headings (CSS) and select the desired font
colour.
57
6. Once the colour is applied DW will automatically create a CSS with the name of
style1 as a default action, this style can also be used to apply the same formatting
to any other text as well.
7. Create a five-point bulleted list for the information of Pakistan using the Bullet
option from the Properties on the bottom.
8. To add hyperlink, add a simple text Click here for more information. Copy and
poste the URL in the Link section in the Properties panel at the bottom.
58
9. Save the file and click on the globe icon or press F12 to preview it on the default
web browser.
Building a Website
10. The preview would look like this:
2.8. Creating Website in Dreamweaver

In a traditional website, there is a lot of content containing text, images, videos,
sounds, etc. this content needs proper management to effectively use the space and
also provide a clear and aesthetic look to users/viewer.
Content management on a webpage can be achieved in several ways but the two
most common ways are:
• Tables
• DIVs.
Tables in HTML can be formed using the Table icon which will later ask for the
59
properties of the table like the number of rows and column, table width, border
thickness, cell padding and spacing (cell margins). The table can also have tables
inside to manage the content more symmetrically, and this table is called a nested
table/s.
Follow the steps below to create a webpage with navigation using tables:
1. Add background colour or a background image to the page from Page Properties
option on the bottom, also set the font to Verdana from the same menu so
the whole text in this document should be displayed with Verdana font. These
formatting will automatically add CSS in the code.
2. Add the HTML webpage title as Search Engine Database.
60
3. Insert a table from Insert> Table.
Building a Website
4. Create a new table with 1000px width and 6 rows and 4 columns. Set cell border, cell
padding, cell spacing to 0, by doing this the table will not visible and can be used
only for the structure and content management.
61
5. Select the cells of the first row, right-click to open the menu and from the menu
select Table> Merge Cells or press CTRL+ALT+M after selecting the cells.
6. Insert a relevant header image to the topic in a merged cell as a header of the
website. Using the insert image option by clicking Insert>Image
7. In the next line write the name of search engines in the centre of the cells column-
wise: Google, Bing, Yahoo and Baidu and also create a link to each of them to their
respective websites. To center align the text, hilight the text and right click. Select
Align>Left.
62
8. Change the font color to white by clicking on the Page Properties option.
Building a Website
9. Download the logos of these search engines and place them in the third row.
Images can be inserted from Insert>Image. Resize the image size to your desired
size. To align the images, right click the image and select the desired alignment
10. To hyperlink the images with the relevant websites, select the image and enter the
search engine’s URL in the Link section in Properties panel.
63
11. Merge the remaining columns and insert some relevant information about each
search engine.
2.9. Inserting Media with HTML5

HTML5 supports video and audio tags that allow users to play video and audio files in
a browser, without an external plug-in or player. Dreamweaver supports code hints for
adding video and audio tags.
Inserting Sound with HTML5

Follow these steps to embed an Audio element in an open Dreamweaver CS5 HTML
web page:
1. To insert audio, go the to Split View in the Dreamweaver.
64
2. In Split view, place your cursor after the opening <body> tag, and press Enter to
create a new line of code. Type <au and then press Tab to complete the beginning
Building a Website
of the <audio> tag.
3. Press the spacebar and double-click src in the pop-up list.
4. Press the spacebar and double-click src in the pop-up list.
65
5. Next, we’ll add a parameter to display a controller (player) for the audio. Press the
spacebar, and double-click controls from the code hints.
Important to note:
the text between the <audio> and </audio> tags will only be displayed in browsers that
do not support the <audio> element.
<audio> can be used to play sound files in the following formats:
• .mp3: Supported by all modern browsers.
• .wav: Not supported by Internet Explorer.
• .ogg: Not supported by Internet Explorer and Safari.
• audio can be placed like an object similar to images or text in DIV or Table.
Inserting Video with HTML5

In HTML or on the website, the videos can be placed by two methods. Either we embed
the video from an external website like YouTube or we can place the video along with
our website. Embedding a video from YouTube is always recommended as it does not
occupy space on our server and it does not affect the traffic of our website.
Embedding video from YouTube
1. Access the video which you want to embed in HTML.
66
2. Click on share and then click on Embed.
Building a Website
3. YouTube will automatically give you the code for embedding, add that code to your
HTML and resize height and width from the iframe code if necessary.
Embedding Video using <video> tag
To embed video using the video tag, it is important to have downloaded on your
computer. Enter the following code in the Split view.
67
Important to note:
• the controls attribute adds video controls, like play, pause, and volume.
• it is a good idea to always include width and height attributes. If height and width
are not set, the page might flicker while the video loads.
• the <source> element allows you to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
• the text between the <video> and </video> tags will only be displayed in browsers
that do not support the <video> element.
• video can be placed like an object similar to images or text in DIV or Table.
2.10. Getting Started with CSS

CSS stands for Cascading Style Sheets,
CSS describes how HTML elements are to
be displayed in web browsers, CSS typically CSS = Styles
creates design profiles for any HTML element
for reuse and overall layout control of the and Colors
document layout.
M a n i p u l a t e T e x t
There are three methods of CSS integration in
HTML: C o l o r s , B o x e s
• inline CSS
• internal CSS
• external CSS.
A CSS rule consists of a selector and a declaration block:
selector Declaration
h1 { color : blue ; font-size : 12px; }
property value property value
The selector points to the HTML element to style (h1). The declaration block (in curly
braces) contains one or more declarations separated by semicolons. Each declaration
includes a CSS property name and a value, separated by a colon.
68
Inline CSS
Building a Website
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS
uses the style attribute of an HTML element.
Internal CSS
An internal CSS is used to define a style for a single HTML page. An internal CSS is
defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p> elements to red. In addition, the page will be
displayed with a powderblue background color:
69
2.11. CSS with Dreamweaver
CSS can be added and edit using GUI of DW as well and DW will automatically add the
CSS code respectively.
Follow the steps below to add CSS using GUI of DW:
1. Start DW with a new HTML document. Right-click on the blank area of CSS Styles
panel which is usually located on the right side and click New.
2. Select Tag from the Selector Type drop-down list. Select h1 from the Selector Name
drop-down list. This will add the style to the Heading1 of the document. Click OK.
70
3. The next window that pops up, allows you to define CSS rule definition for heading-1
i.e. About Pakistan. The Category panel on the left provides different options to
Building a Website
work with. For this example we will add CSS rule definition to the Type category.
4. After defining the properties of CSS, it will be added and available in CSS Style
Panel on the right side for further editing and addition. By clicking on Add Property
option more properties can be added for the whole class.
5. By clicking on the Split view, you can see the underlying CSS code to style
heading-1. You can style the other HTML tags in the similar manner.
71
2.12. Creating Web Forms

A webform, web form or HTML form on a web
page allows a user to enter data that is sent to a Checkpoint
server for processing. Forms can resemble paper CSS stands for Cascading Style Sheets
or database forms because web users fill out the An inline CSS is used to apply a unique
style to a single HTML element.
forms using checkboxes, radio buttons, or text An internal CSS is used to define a style
for a single HTML page. An internal CSS
fields. For example, forms can be used to enter is defined in the <head> section of an
HTML page, within a <style> element.
shipping or credit card data to order a product

or can be used to retrieve search results from a
search engine.
One of the most common and important uses of web forms in a website is the
Contact Form in which developers or site owners ask the relevant information from
the user to contact them in terms of sales or technical support.
Creating Web Forms Using Dreamweaver
Follow the steps below to create a contact form:
1. Create a new HTML document and set any desired from the page properties panel.
Enter the contact us text as a heading using H1 heading.
72
2. From the Insert option, click on Forms Tab and insert the form to let the HTML
knows that this is the form area. After clicking on this button, a red dashed line will
Building a Website
appear to represent that this is the form area, from this point onward we will be
working inside the <form> tag.
3. Create a table of 10 rows and 2 columns while setting its cell spacing to 4,
border and padding to Using a table to manage the forms elements is highly
recommended for place management. Recommended width 500px.
4. On the left column, we will enter the title of information required such as name,
address etc. whereas on the right side we will enter the form elements.
5. The first element we will insert is a text field. Click on this button and another will
appear with numerous information required:
• ID: information is used to program the form text field with programming languages
like PHP, JavaScript etc.
73
• Label: information is used to place the title along with form element, but in this case,
we are already using the table, therefore, no need to fill in the label information and
also select the option of “No Label tag”.
• The access key: is used to assign a specific hotkey to directly shift the cursor focus
by pressing Alt+“Access Key”.
• Tab index: is the sequence of cursor focus, if we enter 3 over here then the cursor
will focus this specific text field on the third press of the TAB key.
6. The next form element we will enter is List/Menu to create a drop-down list for
selecting an option from a list given. HTML tag for form list is <select> </select>.
7. The number of list item can be inserted from List Values… button on the bottom
from the properties panel, click on the List Values… button and another window will
appear, click on the + icon to add the list menu items.
74
8. The next form element is Radio buttons, the function of a radio button is to get one
single answer from the multiple choices given.
Building a Website
9. The next form element is checkboxes, the function of checkboxes is to get multiple
answers from the multiple choices given.
10. The next form element is the Text area. Text area works like a simple text field but
it can accommodate more words than a normal text field and its layout is like a
paragraph.
75
11. Buttons are the action element of form to submit or reset the form.
12. Preview your form in the web browser.
76
Let’s Review
1. A web page or webpage is a document commonly written in HTML (Hypertext
Mark-up Language) that is accessible through the Internet or other networks using
an Internet browser.
2. Hypertext Mark-up Language (HTML) is the standard mark-up language for
documents designed to be displayed in a web browser.
3. A paired tag consists of two tags, the first one is called an opening tag and the
second one is called closing tag.
4. An Unpaired tag is a single tag which does not need a companion tag.
5. Attributes define additional characteristics or properties of the element such as
width and height of an image.
6. Dreamweaver is a web development tool. It is basically for generating HTML while
using an editable front end.
7. Content management on a webpage can be Tables and DIVs.
8. CSS stands for Cascading Style Sheets. It typically creates design profiles for
overall document layout.
9. An inline CSS is used to apply a unique style to a single HTML element.
10. An internal CSS is used to define a style for a single HTML page.
11. A webform, web form or HTML form on a web page allows a user to enter data
that is sent to a server for processing.
My Notes!
77
Adults V/S Teens
The Pew Research Center recently released a study about how adults
use social media, which made us wonder how teens and adults stack
up when it comes to social media use. Teenagers today grow up in a
digital world, so it is no surprise that they are pretty savy when it
comes to all things online and technology. Surprisingly, though, when
it comes to early adoption of newer social mediums like Pinterest and
Instagram, adults seem to have teens beat, if only slightly.
Adults Teens
72% 81%
94%
Who uses which social media network most?
Adults Teens
Teens seem to dominate the traditional social networks like
Facebook and Twitter, while adults use Instagram, Tumblr and
Pinterest more than teens
67%
26%
13% 11% 15% 18%
6% 5%
1%
Tumblr Instagram Pinterest Twitter Facebook
All About Cloud

1. Understand Data and Network Security (WEP, WPA, WPA2)
2. Understand how the Internet works
3. Understand Computer Networks (LAN, WAN, MAN, Wireless, 3G, 4G & 5G)
4. Understand Digital Citizenship (Personal data, intellectual property law, license,
freeware and shareware)
5. Familiarize with cloud storage and cloud services
6. Use different services of Google Suite
Empowered Digital Creative Global

Learner Citizenship Communicator Collaborator
1b 2b 6d 7b 7d
3.1. What is a Computer Network

A network, in computing, is a group of two
or more devices that can communicate. In
practice, a network is comprised of several
different computer systems connected by
physical and/or wireless connections. The
scale can range from a single PC with some
basic peripherals to massive data centres
located around the World, to the Internet
itself. Regardless of scope, all networks allow computers and/or individuals to
share information and resources.
Computer networks serve many purposes, some of which include:
Communications such as Shared hardware such

file transfer, email, instant as printers and input
messaging, chat rooms, devices.
etc.
Shared data and information Shared software, which is

through the use of shared achieved by running applications
storage devices. on remote computers.
80
3.2. Network Topology and Type

Network Topology is the schematic description of a network arrangement, connecting
various nodes (sender and receiver) through lines of connection. Networks can be
All About Cloud

arranged in three ways:
• Star topology
• Bus topology
• Ring topology
• Star topology: All computers and devices are connected to a network switch and
this is one of the common topologies nowadays.
• Bus topology: In this arrangement computers and devices are connected to a
single linear cable called a trunk.
• Ring topology: Computers and devices are connected to a closed-loop cable.
3.3. Types of Area Network

The Network allows computers to connect and communicate with different computers
via any medium. LAN, MAN and WAN are the three major types of the network
designed to operate over the area they cover. There are some similarities and
dissimilarities between them. One major difference is the geographical area they
cover, i.e. LAN covers the smallest area; MAN covers an area larger than LAN and
WAN comprises the largest of all.
81
LAN - Local Area Network:

LAN is an interconnection of computers and
its related devices within a small geographical
area or a building, home, office, school, where
the distance between the computers is small.
Mostly the LANs are built to share vital resources
such as printers and exchanging files. LAN is
also used in providing other services such as
sharing applications, games, files, accessing
the Internet. A speed of LAN is higher than WAN
i.e. 1000 Mbps. Ownership of this network is private and maintained by a single
organization.
WAN - Wide Area Network:

WAN is a computer network that
covers broad and large areas such as
small towns and cities. The design and
maintenance are more difficult than LAN.
Ownership of the network can be private
or public as well. WANs are very complex
to manage by private administrators and
they usually have public ownership. WAN is
a connection between multiple geographic
locations which is composed of multiple LAN’s. The best example of a WAN is
the Internet which connects many smaller LANs and MANs through ISPs. A speed
of WAN is comparatively low than LAN i.e. 150 Mbps. It ranges up to 10000 Km.
WANs are more congested than LANs. WANs have a lower data transfer rate
compared to LANs.
82
4G Network
4G is the fourth generation of broadband cellular network technology, succeeding 3G.
Potential and current applications include amended mobile web access, IP telephony,
All About Cloud

gaming services, highdefinition mobile TV, video conferencing, and 3D television.
5G Network
5G is the fifth generation of mobile networks, a significant evolution of today’s
4G LTE networks. 5G has been designed to meet the very large growth in data
and connectivity of today’s modern society, The Internet of things with billions of
connected devices, and tomorrow’s innovations. 5G will initially operate in conjunction
with existing 4G networks before evolving to fully standalone networks in subsequent
releases and coverage expansions.
3.4. How Does the Internet Work

1. You either type an address (URL) into your
address Bar or click on a hyperlink.
2. Your browser sends a request to your ISP server
asking for the page. When the browser sends a
request to the ISP the following information is
transferred from user PC:
• Web Page Request
• User ID
• IP Address
3. The ISP server forwards the request to the country’s gateway. After receiving the
user request, the ISP transmits the following information to the country’s gateway:
• Web Page Request
• User ID
• IP Address
• ISP ID
4. The host server sends the requested page back to the country gateway and
similarly, the country gateway sends the page back to the concerned ISP server.
5. Your ISP sends the page to your browser and you see it displayed on your screen.
83
3.5. Internet Functions

The Internet is a worldwide network of computers linked together by telephone wires,
satellite links and other means. All computers on the Internet can be divided into two
categories: servers and browsers.
Server: are where most of the information on the Internet

lives. These are specialized computers which store
information, share information with other servers, and
make this information available to the general public.
Browser: ISP servers receive requests from browsers to

view web pages, check email, etc. As each server cannot
hold all the information from the entire Internet, so in order
to provide browsers with the pages and files they ask for,
ISP servers must connect to other Internet servers. This
brings us to the next common type of server: the Host Server.
3.6. Communication Links

1. Dialup connection
2. DSL Connection Checkpoint
3. Cable Net (Coaxial Cable) Star topology: computers and devices

are connected to a network switch
4. Fibre-Optic
Bus topology: computers and devices
5. Satellite Links are connected to a single linear cable
Ring toplogy: computers and devices

are connected to a closed-loop cable.
84
3.7. Data and Network Security
Wi-Fi Protected Access (WPA), Wi-Fi

$
All About Cloud

Protected Access II (WPA2), and Wi-Fi
Protected Access 3 (WPA3) are three
security protocols and security certification
programs developed by the Wi-Fi Alliance to
secure wireless computer networks.
Different types of wireless security protocols
were developed for home wireless networks
protection. Not only do the wireless security
protocols prevent unwanted parties from
connecting to your wireless network, but also encrypt your private data sent over the
airwaves.
WEP-Wired Equivalent Privacy

WEP was developed for wireless networks and approved as a Wi-Fi security standard
in September 1999. WEP was supposed to offer the same security level as wired
networks, however, there are a lot of well-known security issues in WEP, which is
also easy to break and hard to configure. Despite all the work that has been done to
improve the WEP system it still is a highly vulnerable solution.
WPA-Wired Protected Access
For the time the 802.11i wireless security standard was in development, WPA was used
as a temporary security enhancement for WEP. One year before WEP was officially
abandoned, WPA was formally adopted. Most modern WPA applications use a pre-
shared key (PSK), most often referred to as WPA Personal, and the Temporal Key
Integrity Protocol (TKIP) for encryption. WPA Enterprise uses an authentication server
for keys and certificates generation. Still, WPA2, WPA’s newest version, is more secure
and even better than WPA. WPA2 is the latest and strongest wireless security and
encryption standard. Almost all modern routers support it and you should definitely
use this option to protect your home network.
85
3.8. Understanding Digital Citizenship

You probably have heard that it is important
to be a good citizen. So, what would it mean
to be a good digital citizen? The word digital
refers to any type of technology that you use.
• If you are a citizen, this means you
Adnrea Bilarosa
belong to a group of people. So you
could be a citizen of your classroom or
your neighbourhood.
• Being a digital citizen means you are a part of the group of people that use
technology to communicate.
• There are rules that you need to follow when you are a digital citizen, to protect
yourself and to protect others.
Personal Data
Personal data, also known as personal information, personally identifying information
(PII), or Sensitive Personal Information (SPI) is any information relating to identifying a
person. Some examples of PII are:
• Names: your full name, your maiden name, and your mother’s maiden name
• Personal ID numbers: NIC#, driver’s license#, passport#, patient ID#, taxpayer
ID# etc
• Addresses: your street address and email address
• Biometrics: retina scans, fingerprints, facial geometry, or voice signatures,
Vehicle ID or title numbers
• Technology asset information: Media Access Control (MAC) or Internet
Protocol (IP) addresses that are tied to a certain individual.
We must never give our name, address, telephone number or other personal data to
strangers or unknown websites to avoid identity theft or to protect our financials.
86
Intellectual Property (IP)
It is a category of property that includes intangible
All About Cloud

creations of the human intellect. There are many types
of intellectual property, the most well-known types are
copyright, patents, trademarks, industrial design rights,
plant variety rights etc.
Intellectual Property Law (IP)

It is the area of law that deals with legal rights to creative works and inventions. It
controls who gets to use creations including new products, artistic works and designs.
The purpose of intellectual property law is to allow the people who create and invent
things to profit from their work. Lawmakers believe that it is fair for creators to profit
from their own work product.
Software Licensing
Software licenses typically provide end-users with the
right to one or more copies of the software without
violating copyrights. The license also defines the
responsibilities of the parties entering into the license
agreement and may impose restrictions on how the
software can be used. Software licensing terms and
conditions usually include fair use of the software, the
limitations of liability, warranties and disclaimers and
protections if the software or its use invades on the
intellectual property rights of others.
Freeware
Freeware is software, most often proprietary, that is distributed at no financial cost
to the end-user. There is no agreed-upon set of rights, license, or EULA that defines
freeware unambiguously; every publisher defines its own rules for the freeware
it offers. For instance, modification, redistribution by third parties, and reverse
87
engineering without the author’s permission

are permitted by some publishers but
prohibited by others. Unlike with free and
The most popular at the
open-source software, which are also often moment are iCloud on Mac, and
distributed free of charge, the source code for Dropbox, both of which attract
an impressive 300 million users
freeware is typically not made available. to their platforms.
Shareware
Shareware is a type of proprietary software which is initially provided free of charge

to users, who are allowed and encouraged to make and share copies of the program.
Shareware is often offered as a download from a website or as a compact disc
included with a magazine. There are numerous platforms which offer shareware like
GitHub, Stack Overflow, Source Forge etc
3.9. Cloud Storage

Cloud storage is a model of computer data storage
in which the digital data is stored in logical pools.
The physical storage spans multiple servers
(sometimes in multiple locations), and the physical
environment is typically owned and managed by
a hosting company. These cloud storage providers
are responsible for keeping the data available and
accessible, and the physical environment protected
and running. People and organizations buy or lease
storage capacity from the providers to store user, organization, or application data.
The widespread cloud services are Google Drive, One Drive, DropBox, Media Fire,
Mega.nz, pCloud, iCloud, Amazon Drive etc.
88
Advantages of Cloud Storage
• Data safety: your files are protected against physical disasters because they are
All About Cloud

stored in multiple remote servers. This means that you don’t have to worry if your
hard drive fails.
• Access your data from anywhere: no need to transfer files across your computers
with USB drives anymore.
• Sharing & collaboration: you can easily send a link to one of your files to all your
friends and they can download it. You can also share entire folders, which enables
you to work collaboratively on group projects via the Internet.
• Cost-Effective: reduced energy costs, a significant portion of an organization’s
energy bill stems from server power consumption and maintenance is reduced.
Disadvantages of Cloud Storage
• It needs an Internet connection: if you find that you urgently need to access your
files and don’t have an Internet connection or have a very slow one, then this could
lead to delays.
• Security: if you don’t use strong passwords or if the cloud service is not secure
enough, you may face security issues.
• Unavailability risks: although very rare, the cloud service may be temporarily
unavailable, perhaps when you most need it. Another slight risk is that the
company offering the service might go out of business and you may lose your
data.
89
3.10. Getting Familiar with Google Workspace
G Workspace, also known as Google Suite or

G Suite, is a collection of business, productivity,
collaboration, and education software developed
and powered by Google. The primary G Suite tools
include Gmail, Drive, Docs, Sheets, Slides, Forms,
Calendar, Google+, Sites, Hangouts, and Keep.
3.11. Google Drive

The newest cloud-based storage system, Google Drive allows
users to store files on their servers, synchronize files across
devices, and share files. In addition to a website, Google Drive
offers apps with offline capabilities for Windows and MacOS
computers, and Android and iOS smartphones and tablets.
Google Drive encompasses Google Docs, Google Sheets, and
Google Slides, which are a part of an office suite that permits collaborative editing of
documents, spreadsheets, presentations, drawings, forms, and more. Files created and
edited through the office suite are saved in Google Drive and can be downloaded to a
device in numerous formats especially which are compatible with Microsoft office.
Accessing Google Drive

There are a few methods in which we can access Google Drive. The easiest way is by
using the Chrome browser. In Chrome, we click on a new browser or a new tab, we will
be presented with the following page. From here click on next to your profile icon.
90
Signing up for a Google Account
To use Google Drive, we are required to have a Google account. If you already own
a Google account then just continue with signing in, for those of us who have yet to
All About Cloud

create an account, we will continue with signing up for Google account.
1. On the Google Drive welcome page, click on Go to Drive button. You will be
redirected to the sign-in page. Sign-in with your Google account, if you already
have one. Alternatively, click on Create account.
2. You can either create account for personal use or to manage your business.
3. Fill out the information on the signup page and click Next.
91
4. On this page, all the information is required except for the field mobile phone
and your current email address. Both these fields will only be used for security
purposes such as when you would like to prove that you are the owner of the
account.
There are cases where an account was hacked. To get the account back, Google
would ask you to verify that you are the owner by sending messages or an email to
the phone number and email address provided. It is recommended that you fill in both
these fields but it does not have to be filled during registration and you can always fill
them up later.
5. Once we have completed the form, please make sure you click on the I agree
button or you will not be able to submit. Verify that all information is correct and
submit the form.
6. After submitting the form, you would be redirected to Google Drive page.
92
3.12. Getting Started with Google Docs
Google Docs is an online version of Microsoft Word,
All About Cloud

PowerPoint and Excel. In Google Docs they are called
Google Document, Spreadsheet and Presentation.
After we complete our registration, we will be
directed to the following Google Drive page:
1. On the left is the folder view which shows any files shared with us, starred files and
recently modified files.
2. At the top is the menu bar i.e. My Drive, contains options such as creating new
folders and files.
3. The centre is the area where files in the Drive will be displayed, but since we do not
have any files yet, this shows information about Google Drive.
User interface of Google Docs, Spreadsheet and Slides
Google doc
93
Google spreadsheet
Google slides
Adding Files to Google Drive
Google has always intended to make its product user friendly and therefore using
Google Drive and Google Docs is much easier than most cloud storage solutions.
To add a file to Google Drive, click on the My Drive button and choose the option to
create a new folder or to create any office document.
94
Whereas if you need to upload an existing file in your google drive simply drag and
drop the file in that folder or root to begin your upload.
All About Cloud

Alternatively, you can upload file or folders by selecting Upload File or Upload Folder
option from My Drive drop-down menu.
After uploading the file, we can also share that file or data with anyone specific or can
create a public link to share without any restriction. To do that right-click on the file
and select share option.
95
In the sharing window there will be two procedures to share the file. We can share this
file to an individual by entering the email address of the recipient or we can click on
the Copy Link button to get a shareable link.
You can either allow certain members to have access to your files or folders by
selecting Restricted option or you can allow anyone with the link to have access to
your files.
Restricted: when you change a link’s setting to Restricted, the only people who can still
see the file or folder are those you have directly shared with in the ‘Share with people
and groups’ section.
Anyone with the Link: allows your document to be accessed by any person who has
the URL of the file or the folder.
96
Real Time Collaboration
Google Drive lets multiple people

in different locations collaborate
All About Cloud

simultaneously on the same file from
any computer with Internet access. When
someone is viewing or editing something
at the same time as you, you’ll see a
coloured tile with their name in the top
right of your screen.
3.13. Google Translate
Google Translate is a free multilingual machine translation service

developed by Google, to translate text. It also offers a website
interface for mobile apps for Android and iOS, and an API that helps
developers build browser extensions and software applications.
Google Translate supports over 100 languages at various levels and
serves over 500 million people daily. To access Google Translate use the URL: translate.
google.com or search on google for google translate.
97
1. Enter text for translation

2. Select source language
3. Select the language translation
4. Switch the language
5. Input through speech and hear the input
6. Hear the translation
7. Copy the translation
8. Share the translation
Google Translate Text from Photos
You can translate text in photos you’ve already taken. You can also take a new photo
in the Translate app and translate text on the new photo.
1. On your Android phone or tablet, open the

Translate app.
2. Pick the languages. Checkpoint
• At the top left, choose the language
Software licenses provides end-users with
you want to translate or Detect the right to one or more copies of the
software without violating copyrights.
language. Freeware is software, is distributed at
no financial cost.
• At the top right, choose a language
Shareware is initially provided free of charge
you read. to users, who are allowed and encouraged
to make and share copies of the program.
98
3. Beneath the text box, tap Camera

• To translate the whole text instantly, tap Instant Instant.
• To translate part of the document:
All About Cloud

a. Tap Scan and then Capture .
b. Use your finger to highlight the text you want to translate, or tap Select
all.
• To choose an existing photo to translate, at the bottom right, tap Import .
4. Use your finger to highlight the text you want to translate, or tap Select all.
3.14. Google Maps
Google Maps is a web-based service that provides

detailed information about geographical regions and
sites around the world. In addition to conventional road
maps, Google Maps offers aerial and satellite views of
many places. In some cities, Google Maps offers street
views comprising photographs taken from vehicles. To
access Google Maps on a desktop, use the URL: google.
maps.com or search on Google for Google Maps.
Google Maps offers several services as part of the
larger Web application, as follows:
• A route planner offers directions for drivers, bikers, walkers, and users of public
• transportation who want to take a trip from one specific location to another.
• The Google Maps application program interface (API) makes it possible for web
site administrators to embed Google Maps into a proprietary site such as a real
estate guide or community service page.
• Google Maps for Mobile offers a location service for motorists that utilizes the
Global Positioning System (GPS) location of the mobile device (if available) along
with data from wireless and cellular networks.
• Google Street View enables users to view and navigate through horizontal and
vertical panoramic street-level images of various cities around the world.
• Supplemental services offer images of the moon, Mars, and the heavens for hobby
astronomers.
99
Types of Maps
Google Maps is a web-based service that provides detailed information about
geographical regions and sites around the world. In addition to conventional road
maps, Google Maps offers aerial and satellite views of many places. In some cities,
Google Maps offers street views comprising photographs taken from vehicles.
Google Maps offers several services as part of the larger Web application, as follows:
Roadmap: this is the Satellite: this is the map Terrain: this is the
default type. It shows the type that shows the map type that shows
street view of the selected satellite images of the the terrain and
region. selected region. vegetation.
To switch to a particular map type, click on the top left corner.
100
Google Maps on Phone

1. On your Android phone or tablet, open the Google Maps app.
2. Search for a place or tap it on the map.
All About Cloud

3. In the bottom left, tap Directions. If you touch and hold the button instead, you’ll
start navigation and can skip steps 4-6.
4. Optional: To add additional destinations, go to the top right and tap More and
then Add stop. You can add up to 9 stops. When you are finished, tap Done.
5. Choose one of the following:
• Driving:
• Transit:
• Walking:
• Rides:
• Cycling:
6. If other routes are available, they will be shown in gray on the map. To follow an
alternate route, tap the gray line.
7. To start navigation, tap Start Start. If you see searching for GPS, your phone is
trying to get a GPS signal. For example, you might be in or near a tunnel, parking
garage, or other location where there’s no GPS signal.
8. To stop or cancel navigation, go to the bottom left and tap Close Close.
Places Option
After selecting anyplace in
google maps we can start
navigation by selecting the
Directions option, Save that
place, Search Nearby places
to that location, send that
place to your phone (in case
of desktop usage) and we
can also share the location
via URL.
101
Google Coordinates
After selecting anyplace in google maps we can start navigation by selecting the
Directions option, Save that place, Search Nearby places to that location, send that
place to your phone (in case of desktop usage) and we can also share the location via
URL.
1. Open the Google maps and locate my

house on maps by clicking or manually
locate my house using the nearest
landmark.
2. Click on location it will show me a
dialogue box in the bottom with address
and coordinates 24.818294, 67.070234
3. Share these coordinates to anyone to
locate a place on the entire planet.
Details on Maps
In google maps there are several other useful information about that place is available
at the bottom of the left pane like address, website, phone number, working hours,
photos, etc. We can also contribute to this content by adding photos or “Suggest an
edit” option. If we scroll down a little more, we can see a public review option along
with the 5-star rating system which describes the place more in detail. We can also
add our review as per our experience.
102
Let’s Review
1. A network, in computing, is a group of two or more devices that can communicate.
2. Network Topology is the schematic description of a network arrangement,
connecting various nodes (sender and receiver) through lines of connection.
3. LAN, MAN and WAN are the three major types of the network designed to operate
over the area they cover.
4. Wi-Fi Protected Access (WPA), Wi-Fi Protected Access II (WPA2), and Wi-Fi Protected
Access 3 (WPA3) are three security protocols and security certification programs
developed by the Wi-Fi Alliance to secure wireless computer networks.
5. Intellectual property includes intangible creations of the human intellect.
6. Personal data, also known as personal information, personally identifying
information (PII), or Sensitive Personal Information (SPI) is any information relating
to identifying a person.
7. Intellectual property includes copyright, patents, trademarks, industrial design rights,
plant variety rights etc.
8. Google Drive allows users to store files on their servers, synchronize files across
devices, and share files.
9. Google Translate is a free multilingual machine translation service developed by
Google, to translate text
10. Google Maps is a web-based service that provides detailed information about
geographical regions and sites around the world.
My Notes!
103
Presentation Design Do’s
and Dont’s
Do’s
1. Your information, design and style should be based on what your
audience will understand and respond to
2. Use minimal text and more images. Images increase retention by
42%
3. Use a single color in your selected palette to emphasize
important points in your text
4. Titles should be at least 28 to 48 points, bulleted text or body
copy at least 24 points. Only use caps in headlines and section
titles, not in paragraphs
Dont’s
1. Don’t use pixelated, blurry, or tiny images
2. Don’t tell your data when you can show it; Visualize your data
wherever possible
3. Use too many graphics; they can distract the audience from your
content
4. Using too many borders, boxes, lines, arrows, and spaces can be
distracting
Presenting Your Ideas

1. Manage content creation without investing too much effort on content layout and
formatting.
2. Insert, edit and format content via storyline feature.
3. Organize content in sequential order.
4. Add a title to Sway.
5. Add content such as text, images and videos to Sway from local drive or web.
6. Preview sway.
7. Change the style of Sway.
8. Share Sway with teacher and peers.
Empowered Knowledge Creative Global

Learner Constructor Communicator Collaborator
1a 1c 1d 3c 6a 6b 6d 7b
4.1. What is Sway?

Sway is a new app from Microsoft Office that makes it
easy to create and share interactive reports, personal
S
stories, presentations, and more. Start by adding
your text and pictures, search for and import relevant
content from other sources, and then watch Sway
do the rest. With Sway, you’re no longer limited to
picking a pre-designed template that makes your
presentations look like everyone else’s, and you
don’t have to have any design skills to transform and
showcase information in modern, interactive, and attention-getting ways.
With Sway, there’s no need to spend lots of time on formatting. Its built-in design
engine takes care of making your creation look its best. If the initial design doesn’t
quite match your taste or mood, you can easily apply another — or fully customize
your layout to make it your own.
It’s super easy to share your finished Sways. Family, friends, classmates, and co-
workers can see your creations on the Web without signing up, signing in, or
downloading anything. And you can change the privacy settings for any Sway
whenever you want more control over what you share.
4.2. What Can I Create with Sway?
Whether it’s a report, a

presentation, a newsletter,
a personal story, a photo
album, or a visual trip report,
there’s virtually no limit
Reports Presentation
on what you can express
creatively with Sway.
Newsletter Stories
106
4.3. Getting Started with MS Sway

Sign-in to Start Creating
1. To get started with Sway,

2. Visit sway.office.com in any
browser and then click Sign in
on the top menu bar.
3. When prompted, enter the
email address you want to use
with Sway.
4. You can use your free Microsoft
Account (Hotmail, Outlook.com)
or any organizational account
given to you by your work or school.
5. If you don’t already have an account, visit www.microsoft.com/account to sign up
for free.
Create
On the My Sways page that opens
after you’ve signed in, click or tap
Create New to start creating your
first Sway.
107
Get to Know Your Storyline
The Storyline is where you type,

insert, edit, and format the content
that tells your story. Content is
arranged in sequential order by
adding cards, each of which holds
the type of content you want —
such as text, images, videos, and
even Office documents. The order
of cards can be rearranged at any
time to suit your needs.
Give Your Sway a Title

Click the Title your Sway placeholder
text shown in the first card on the
Storyline, and then type a short but
meaningful description of what your
Sway is all about. When you later share
your finished Sway, this title will be the
first thing that others will see.
Add Images and Text to Sway
To add content to your Sway, such as text,

images, or videos, click or tap the + icon
at the bottom of any existing card. You
can also drag and drop text and images
right onto your Storyline. (Don’t hesitate
to experiment — you can change the
order of your content at any time and
customize each card the way you want.)
108
Add Content to Your Sway

You can easily search for and add
additional content to your Sway, such as
an image that is stored on your computer
or mobile device. Sway can also search the
Web for the most relevant content, such
as videos, and add it to your Sway. On the
menu bar, click Insert, select your preferred
content source from the menu, and then
enter any search keyword or phrase into
the Search Sources box.
Preview Your Sway
You can preview your work in progress at

any time by clicking the Design tab. When
you preview your Sway, you can see how it
will appear to others when you later decide
to share it. To fully experience your Sway,
click the Play button on the top menu bar. To
return to your Storyline when you’re done
previewing your Sway, click the Storyline
tab.
S
Sway or PowerPoint?
PowerPoint is primarlity used for presenting charts and graphs and when a dedicated
person is presenting the content. Sway is preferred choice of tool when information is simply
consumed by the end user without a live presentation
109
Let’s Review
1. MS Sway allows to create and share interactive reports, presentations,
personal stories, newsletters and much more.
2. Storyline is where you type, insert, edit and format the content.
3. Title of your Sway is the first thing others see when you share your Sway.
4. Content is arranged in sequential order by adding cards.
5. To add content to your Sway, such as text, images, or videos, click or tap
the + icon at the bottom of any existing card.
6. The Design tab allows you to view your work in progress at any time.
7. The Play button on the top to full experience your sway.
My Notes!
110
Why You Should Learn
to Code?
Future Demand
According to Code.org, 71% of all new STEM (jobs are in
computing. Learning how to code will give your child a
head start in the real world.
Creativity skill
When children learn how to code they do not only
consume digital media and technology but create it.
Communication skill
Learning how to code improves logical
communication and strengths in both verbal and
written skills.
Coding is fun
By coding, children can develop their own games,
website, apps and much more. They actually build their
own dreams and desires!
Programming the
Computer-Python

1. Process and convert an algorithm into a flowchart.
2. Create solution steps using pseudo-codes.
3. Understand the concept of a computer program.
4. Understand that the program interacts with hardware.
5. Familiarize with Python programming language and user interface of Python IDLE
6. Work with basic commands of python such as print, input, comments, and
calculation with numbers, list and delete
7. Understand and work with conditional and looping structures in Python
8. Create robust programs by using functions in Python
9. Create shapes and graphics through programming
10. Create dynamic programs through user actions and event handling
11. Debug program by identifying logical and syntax errors
Empowered Computational Creative

Learner Thinker Communicator
1a 1d 5c 5d 6d
5.1. Overview
Computer programming is a way of giving
computers instructions about what they should
do next. These instructions are known as code,
and computer programmers write code to solve
problems or perform a task.
The end goal is to create something: that could
mean anything from a web page, or a piece of
software, or even just a pretty picture. That’s
why computer programming is often described
as a mix of art and science; it’s technical and
analytical, yet creative at the same time.
5.2. Flowcharts and Algorithms

Algorithms and flowcharts are two different tools used for creating new programs,
especially in computer programming. An algorithm is a step-by-step analysis of the
process, while a flowchart explains the steps of a program in a graphical way.
Algorithms
To write a logical step-by-step method to solve
Making a PB&J Sandwich
the problem is called an algorithm. In other undo the twist tie
get out two slices of bread
words, an algorithm is a procedure for solving get out two slices of bread
place them on a plate
problems. In order to solve a mathematical or open the jelly jar

scoop them out with a knife
spread jelly on one slice
computer problem, this is the first step of the wipe off the knife
open the peanut butter jar
procedure. An algorithm includes calculations, scoop some out with a knife

spread peanut butter on the other
reasoning and data processing. Algorithms can

set the knife down
pickup each of the slices
keep the dry sides on the outside
be presented by natural languages, pseudocode put the slices together
place the sandwich back down
and flowcharts, etc. pick the knife back up again

cut the sandwich into two halves
113
Flow Charts
A flowchart is a type of diagram that represents an algorithm, workflow or process.
The flowchart shows the steps as boxes of various kinds, and their order by connecting
the boxes with arrows. Flowcharts are used in analyzing, designing, documenting or
managing a process or program in various fields.
Flow Chart Symbols
Terminal
The rounded rectangles, or terminal points,

indicate the flowchart’s starting and ending
points.
Flow Lines
The default flow is left to right and top to bottom
(the same way you read English). To save time
arrowheads are often only drawn when the flow
lines go contrary the normal.
Input/Output
The parallelograms designate input or output

operations.
Process
The rectangle depicts a process such as a

mathematical computation, or a variable
assignment.
Decision
The diamond is used to represent the true/false

statement being tested in a decision symbol.
114
Example
Programming the Computer-Python

Start
Read
temperature
temperature<32
Print Print
Below freezing Above freezing
End
5.3. Pseudocode
Pseudocode is an informal high-level description of
the operating principle of a computer program or Pseucode Example
other algorithm. It uses the structural conventions BEGIN

of a normal programming language but is intended input hours
input rate
for human reading rather than machine reading. pay=hours*rate
Pseudocode typically omits details that are essential print pay
for machine understanding of the algorithm, such END
as variable declarations, system specific code etc.

In simple words, Pseudocode is a precise form of an
algorithm without unnecessary steps of vocabulary/
words.
115
{Code}
5.4. What is a Program
In computing, a program is a specific set of

ordered operations for a computer to perform.
In the modern computer that John von Neumann
outlined in 1945, the program contains a one-at-a-
time sequence of instructions that the computer
follows.
How a Program Interacts with Hardware

Hardware is a term we use to describe the electronics and mechanical parts of the
computer. To be able to use it, we need programs, the software. A computer program
is a list of instructions stored as a file on a storage device. If this program is embedded
inside a hardware device it is called firmware.
When we run the program, the computer reads the list of commands or instructions
and does what the program tells it to do.
5.5. Getting Started with Python

Python is a high-level programming language
designed to be easy to read and simple to implement.
It is open-source, which means it is free to use, even
for commercial applications. Python can run on Mac,
Windows, and Unix systems.
Python is considered a scripting language, like Ruby
or Perl and is often used for creating Web applications
and dynamic Web content.
Programming Language v/s Scripting Language

Programming languages work with full-length code and are capable of running
independently while a scripting language generally runs on small chunks of code and needs
embedding into parent programs.
116
There are tens of thousands of famous python websites on the internet, few of them

are listed:
Uber Reddit Dropbox Google
Spotify Netflix Pinterest Amazon
Python IDLE
Python is a Programming language is popular because of its easy syntax. We will

start writing some code in PYTHON IDLE (Integrated Development and Learning
Environment).
File menu: it is for basic operations like opening, saving and printing programs.
Shell menu: it is to reset the environment
Debug menu: it is to check your program from any errors
117
Writing your First Program in Python
1. Open File menu and select New File or press Ctrl+N.
2. Type print (“My first program in Python”).
3. Open File menu and save the program or press Ctrl+S.
4. Run the program from the Run menu or press Ctrl+F5.
118
Python Indentations

Indentation refers to the spaces at the
Indentation Example
beginning of a code line. Where in other
programming languages the indentation in if 5 > 2
print (”Five is
code is for readability only, the indentation
greater than two”)
in Python is very important. Python uses
indentation to indicate a block of code.
5.6. Variables and Data Types “a” “hello”

A variable is nothing but a name given
to a storage area that our programs can
manipulate.
A variable is a container of data in a
computer’s memory where the computer stores
4 2.5
the different types of data and this could be
numeric or text. To create and access these
Variable (data containers) we name them so
we can call them in our program where it is
necessary.
Data can be of any type like text, numbers,

integers, etc. A variable can store values only in one
data type either it could be numeric or string. Python
has no command for declaring a variable.
Numeric data type: This data type is used to hold Comments in Python
numeric values like integers, or Float like decimal
#this is comment
numbers.
String data type: The string is a sequence of print(”hello world”)
characters like a simple text “Hello World”.

Python supports Unicode characters. Generally,
strings are represented by either single or double-
119
quotes. In Python variables are created the moment we assign a value to it. Unlike
other programming languages, Python has no command for declaring a variable. A
variable is created the moment we first assign a value to it.
Example
Variable Names
A variable can have a short name (like x and y) or a more descriptive name (age, car_
name, total_volume). Rules for Python variables:
• A variable name must start with a letter or the underscore character
• A variable name cannot start with a number
• A variable name can only contain alpha-numeric characters and underscores(A-z,
0-9, and _ )
• Variable names are case-sensitive (age, Age and AGE are three different variables)
Assign Value to Multiple Variables
Python allows us to assign values to multiple variables in one line:
120
Output Variables

The Python print statement is often used to output variables. To combine both text
and a variable, Python uses the + character:
We can also use the + character to add a variable to another variable:
5.7. Comments
Python has the ability to add comments for

the purpose of in-code documentation. In Comments in Python
other words, comments are just a dead piece
#this is comment
of code which can be used for our references
only. Comments start with a #, and Python will print(”hello world”)
render the rest of the line as a comment.
121
5.8. Python Numbers

There are three numeric types in Python:
• Integer: also known as int, is a whole number,
positive or negative, without decimals, of
Python Numbers
unlimited length. x=1 #int

• float: also known as floating point number, is a y=2.8 #float
z=1j #complex
number, positive or negative, containing one or
more decimals.
• complex: are written with a “j” as the imaginary
part
Variables of numeric types are created when we assign a value to them. To verify the
type of any object in Python, use the type() function. A sample code that determines
type is shown below:
Type Conversion
We can convert from one type to another with the int()and float() methods. A
sample code is shown below:
122
5.9. Calculation with Numbers

We can also use Python to do any kind of calculation: addition, subtraction,
multiplication, division, etc. The rules that we have learned in Microsoft Excel for the use
of parentheses apply here, too.
For example, let’s suppose that we want to display the term percentage of a student
for a subject by using averages in exam marks and course work. Multiplications and
divisions are calculated before additions and subtractions. This means that 4+2*5 gives
you 14 and not 30. Use parentheses to prioritize the sequence of calculations. For this
example, we will also look into the user interaction using INPUT feature of python to
take data from the user end.
Sample Code
#calculate the percentage of a subject

subject=(input(“enter the subject name: “))
exam= float(input(“enter the marks obtained in exam”))
CW=float(input(“enter the marks obtained in coursework”))
percentage=(exam+CW)/2
print(“The average percentage of: “, subject,”:”,percentage)
1. In this example, the first line is having a comment

2. In the 2nd line, we have declared a variable named subject with user input to
take subject name form user.
3. In the 3rd line, we have declared a variable name exam while setting its data type to
float.
4. In the 3rd line, we have declared a variable for course work with the name of CW
while setting its data type to float.
5. In the 5th line, we declare the variable name Percentage while setting its value to a
mathematical calculation of exam+cw divided by 2 to get the average percentage
of the subject.
6. In the 6th line, we have printed the string value along with the values of the
subject variable and percentage variable.
123
5.10. LIST in Python

In Python, you can store your data into variables,
but you can also put them in lists. A list is just an
Checkpoint
ordered collection of items which can be of any data
type. Creating a list is as simple as putting different Algorithms can be presented by natural
languages, pseudocode and flowcharts
comma-separated values between square brackets. Hardware is a term we use to describe
the electronics and mechanical parts of
Each element of a list is assigned a value by using an the computer.

Comments are used for the purpose of
in-code documentation.
index.
An example of a list could be:
NewList=[10,20,30,”Samsung”]
To call a list element is very easy as calling a cell reference in excel:
print(NewList[3]). By this code, pythons output will be Samsung, as the count in
the list starts from 0.
Deleting an Item from List

Del command is used to delete a list element as mentioned in the example below
Adding an Item to the List
To add an item to the end of the list, use the append() method
124
5.11. Conditional Statements in Python

Conditional statement is a set of rules performed if a certain condition is met.
IF Statement
IF statement is a programming conditional statement that, if proved true, performs a

function or displays information. An if statement in python is written by using the IF
keyword. The sample code below shows the if statement in python.
Sample Code
# This program compares two numbers
using if
a = 33
b = 200
# if block
if b > a:
print(“b is greater than a”)
In this example, we use two variables, a and b, which are used as part of the if
statement to test whether b is greater than a. As a is 33, and b is 200, we know that
200 is greater than 33, and so we print to screen that “b is greater than a”.
Indentation is necessary; if we do not use the indentation as mentioned in example,
python will give an error.
ELIF Statement
The ELIF keyword is Python’s way of saying if the previous conditions were not true,
then try this condition. The sample code below demonstrates Elif statement.
125
Sample Code
# This program compares two numbers
using elif
a = 33
b = 200
# if block
if b > a:
# elif block
elif b = = a:
print(“a and b are equal”)
In this example a is equal to b, so the first condition is not true, but the elif condition is
true, so we print to screen that “a and b are equal”.
Else Statement
The else keyword catches anything which isn’t caught by the preceding conditions. The
sample code below shows else statement.
Sample Code
# This program compares two numbers using else
statements
a = 33
b = 200
# if block
if b > a:
# elif block
elif b == a:
print(“a and b are equal”)
# else block
else
print(“a is greater than b”)
126
In this example a is greater than b, so the first condition is not true, also the elif

condition is not true, so we go to the else condition and print to screen that “a is
greater than b”. We can also use the else without using elif.
5.12. Loops in Python

A For loop is used for repeating over a sequence (that is either a list or a string). This
is less like the FOR keyword in other programming languages and works more like an
iterator method as found in other object-orientated programming languages.
For example, we have a list of students and we want to display the student with the
highest marks without using the max() function:
Sample Code
# This defines a list of student marks

stdMarks = [70, 80, 92.5, 60.2]
# This variable keeps track of the max marks
maxMarks = 0
# for loop block
for i in range(0,4):
if stdMarks[i] > maxMarks:
maxMarks = stdMarks[i]
# Prints highest student marks
print(“highest marks are: “, maxMarks)
127
1. In the 1st line of this code, we have created a list StdMrks with four values stored
in it.
2. In the 2nd line, we have declared a variable name MaxMarks with an integer value
of 0.
3. In the 3rd line, we use for loop while declaring another variable i with the range of
four.
4. This means this loop will run 4 times. Every time FOR loop runs, it will increase the
value of the i variable.
5. In the 4th line, we have set a condition to check that if StdMrks[i] variable is
greater than MaxMrks (declared 0 in 2nd line) variable then change the value of
MaxMarks[i] to StdMrks value. (StdMrks[i] variable is going to change its
value every time the loop runs and change the index of StdMrks. This process is
also known as unary increment). Using indention is compulsory or python will not
consider the For loop elements and give an error.
6. In the 5th line, MaxMrks is setting its value equal to the current value of StdMarks
only if the condition in the previous line is true.
7. In the 6th line, we have just printed the value of MaxMrks along with a string
sentence.
5.13. Functions in Python
In Python, a function is a group of related

statements that perform a specific task.
Functions help break our program into smaller
and modular chunks. As our program
grows larger and larger, functions make it
more organized and manageable.
Furthermore, it avoids repetition and makes
code reusable. Function names cannot
have spaces in between. Instead of spaces use
_ underscore to connect the words.
In Python, a function is defined using the def keyword and for executing the function
we can use the function name along with parentheses ().
128
Sample Code-1

The sample code below demonstrates how functions are used in python:
# This declares the function

called my_function()
def my_function():
print(“Hello from a
function”)
# Calling the function
my_function()
1. Keyword def marks the start of function header.

2. A function name to uniquely identify it. Function naming follows the same rules of
writing identifiers in Python.
3. Parameters (arguments) through which we pass values to a function. They are
optional.
4. A colon (:) to mark the end of function header.
5. The last line executes the function, we can call or use the function in our code
wherever it is needed.
Sample Code-2
# This declares the function

called print_name()
def print_name():
print(“Enter your name”)
yourName=input()
print(“Hi ”+yourName)
print_name()
Sample Code-3
We have already experienced this code earlier but now we have converted the same
into a function and now it can be recalled and reused whenever required in the
program.
129
# This declares the function called my_function()

def getMarks():
Subject=(input(“Enter the subject name:”))
Exam=float(input(“Enter the marks obtained in the Exam:”))
CW=float(input(“Enter the marks obtained in the course work:”))
Percentage= (Exam+CW)/2
print(“The Average Percentage of”, Subject,”:”, Percentage)
getMarks()
5.14. Error Handling in Python
A software bug is a coding error that causes an

unexpected defect in a computer program. In
other words, if a program does not perform as Checkpoint
intended, it is most likely because of a bug.
A list is just an ordered collection of
There are bugs in software due to unclear or items which can be of any data type.
constantly changing requirements, software IF statement is a programming
conditional statement that, if proved
complexity, programming errors, timelines, true, performs a function or displays
information.
errors in bug tracking, communication gap,
documentation errors, deviation from standards
etc.
There are two types of errors/bug in
python or any other programming
language.
Syntax Error: errors in typing the
commands and variables. Syntax
errors will be automatically detected
by the Python IDLE and will show
you the error in a dialogue box with a
suggested solution or the line number
where the mistake has been done:
130
Logical Error: a logical mistake while designing the program which occurs due to the

improper planning of the program flow. Logical errors can be avoided by working on a
Data Flow Diagram (DFD), one practice of DFD is also a flowchart which is an extract
of the algorithm. Mentioned below are the few areas which can be used to avoid
logical errors in your program:
Form a hypothesis or two before looking at code.

• Resolve syntax errors.
• Start the debugger.
• Identify key variables or conditions.
• Step to your suspicious code.
• Look at the relevant variables.
• Predict what the suspicious line should do.
• Compare your expectations with reality.
• Think about your logic.
5.15. Creating Graphics with Python
The Canvas widget supplies graphics facilities for Tkinter. Among these graphical
objects are lines, circles, images, and even other widgets. With this widget, it’s possible
to draw graphs and plots, create graphics editors, and implement various kinds of
custom widgets and for using those we need to call/import the library of Tkinter so we
can use these functions.
Example-Creating Line
We will draw our first example, drawing a line.

The method create_line(coords, options) is used to draw a straight line. The
coordinates “coords” are given as four integer numbers: x1, y1, x2, y2 this means that
the line goes from the point (x1, y1) to the point (x2, y2).
131
from tkinter import*

master=Tk()
canvas_width=80
canvas_height=40
w=Canvas(master, width=canvas_
width,height=canvas_height)
w.pack()
y=int(canvas_height/2)
w.create_line(0,y,canvas_width,y,fill=”#476042”)
mainloop()
Sample Code-Creating Rectangle
For creating rectangles, we have the method create_rectangle(coords, options).

Coords are again defined by two points, but this time the first one is the top left point
and the bottom right point of the rectangle.

master=Tk()
w=Canvas(master, width=200, height=100)
w.pack()
w.create_
rectangle(50,20,150,80,fill=”#470642”)
w.create_rectangle(65,35,135,65,fill=”yellow”)
w.create_line(0,0,50,20,fill=”#470642”,width=3)
mainloop()
132

The following image with the coordinates will simplify the understanding of the
application of create_lines and create_rectangle in our previous example.
Sample Code-Creating Oval
We can create an oval on a canvas c with the method id = C.create_oval (x0,

y0, x1, y1, option, ... ) This method returns the object ID of the new oval
object on the canvas C. The following script draws a circle around the point (50,50)
with the radius 100:
canvas_width=190
canvas_height=150
master=Tk() As per Code.org, there are over
500,000 openings for
w=Canvas(master, width=canvas_width, computing jobs in the USA.
height=canvas_height)
w.pack()
w.create_oval(50,50,100,100)
mainloop()
133
5.16. Event Handling in Python

Events in python are more likely we have in other programming languages. They also
execute at any specific action/signal occurred for i.e. hovering a mouse at a certain
point, clicks of the mouse either right click or left click and so on.
A Tkinter application runs most of its time inside an event loop, which is entered via the
mainloop method. It waits for events to happen. Events can be key presses or mouse
operations by the user.
Tkinter provides a mechanism to let the programmer deal with events. For each
widget, it’s possible to bind Python functions and methods to an event.
widget.bind(event, handler) If the defined event occurs in the widget, the handler
function is called with an event object, describing the event.
Sample Code-1
def hello (event):
print(“Single click, Button-1”)
def quit(event):
print(“Double click, so let’s
stop”)
import sys;sys.exit()
widget=Button(None,text=’Mouse
Clicks’)
widget.pack()
widget.bind(‘<Button-1>’,hello)
widget.bind(‘<Double-1>’,quit)
widget.mainloop()
In this program, the event will be triggered by clicking on the Tkinter widget window. If
we click once it will say “Single Click, Button-1” as defined in string values and
if we double click it will say “Double click, so let’s stop as defined in a string
value.
134
Sample Code-2

Let’s have another simple example, which shows how to use the motion event, i.e. if the
mouse is moved inside of a widget:

def motion(event):
print(“Mouse position:(%s %s)” % (event.x,event.y))
return
master=Tk()
whatever_you_do=”Expect the best, Prepare for the worst.\n
Mohammad Ali jinnah”
msg=Message(master,text=whatever you do)
msg.config(bg=’lightgreen’,font=(‘times’,24,’italic’))
msg.bind(‘<Motion>’,motion)
msg.pack()
mainloop()
Every time we move the mouse in the Message widget, the position of the mouse
pointer will be printed. When we leave this widget, the function motion() is not called
anymore.
Color Codes in Python
Basic colour list plot for python. There are more colours which can be used with basic
words like forest green or lime etc.
gray olive blue
brown green purple
orange cyan red
135
Let’s Review
1. Algorithms can be presented by natural languages, pseudocode and flowcharts, etc.

2. A flowchart is a type of diagram that represents an algorithm, workflow or process.
3. Pseudocode is an informal high-level description of the operating principle of a
computer program or other algorithm
4. A program is a specific set of ordered operations for a computer to perform
5. Python is a high-level programming language designed to be easy to read and
simple to implement.
6. Indentation refers to the spaces at the beginning of a code line.
7. A variable is a name given to a storage area that our programs can manipulate.
8. A list is just an ordered collection of items.
9. For loop is used for repeating over a sequence.
10. Conditional statement is a set of rules performed if a certain condition is met.
11. A function is a group of related statements that perform a specific task.
12. A software bug is a coding error that causes an unexpected defect in a computer
program.
13. Syntax errors in typing the commands and variables.
14. A logical mistake while designing the program which occurs due to the improper
planning of the program flow is called logical error.
My Notes!!
136
Importance of
STEM Education
S T E M
Science Technology Engineering Mathematics
Did you know, STEM workers earn 26 percent

MORE than those without a STEM background
Projected Job Growth Projected Job Openings
STEM Employment
17%
Computer 1,083,800
Non-STEM Employment occupation
Engineers 510,900
STEM related
9.8% mgmt 167,600
Life and physical 150,900

science technicians
STEM related sales 118,400
Robotics
1. Familiarize with robotics and understand its importance

2. Familiarize with Edison robot and its working
3. Understand the EdPy App interface and create an online account
4. Understand Edison drive function with EdPy
5. Creating a square and circle using Edison
6. Work with loops and conditional structures in EdPy
7. Familiarize with obstacle detection programs in Edison
8. Familiarize with clap control drive and line tracking sensors in Edison
Empowered Innovative Computational Creative

Learner Designer Thinkiner Communicator
1a 1d 4d 5c 5d 6d
6.1. What is Robotics

Robotics is a branch of engineering that
involves the conception, design, manufacture,
and operation of robots. This field overlaps
with electronics, computer science, artificial
intelligence, mechatronics, nanotechnology and </>
bioengineering.
Whenever the word ROBOTICS is used, we think
of a machine which would have metal arms, legs,
bionic eyes and the robotic voice. This machine is
called a humanoid or android. Robotics is all about automation of any process or task.
A robot can contain numerous electronic or non-electronic parts like motors, battery,
chassis, wirings, sensors, computer boards for programming etc.
Science-fiction author Isaac Asimov is often given credit for being the first person
to use the term robotics in a short story composed in the 1940s. In the story, Asimov
suggested three principles to guide the behaviour of robots and smart machines.
Asimov’s Three Laws of Robotics, as they are
called, have survived to the present:
• Robots must never harm human beings.
• Robots must follow instructions from
humans without violating rule 1.
• Robots must protect themselves without
violating the other rules
Why Robotics is Important?
Robots make our life easier and much safer Robots can do tasks which are dangerous
for humans like bomb diffusion, security guard, and Mars rover etc. Besides these
dangerous tasks, robots can perform tasks which humans are not good at such as:
139
Safety: safety is the most obvious advantage of utilizing robotics.

Heavy machinery, machinery that runs at high temperatures,
and sharp objects can easily injure a human being. By delegating
dangerous tasks to a robot, we can avoid human accidents.
Speed, consistency & Production: robots don’t get distracted or

need to take breaks. They don’t request vacation time or ask to
leave an hour early. A robot will never feel stressed out and start
running slower. They also don’t need to be invited to employee
meetings or training session. Robots can work all the time, and this
speeds up production. Robots never need to divide their attention
between a multitude of things. Their work is never contingent on
the work of other people. They won’t have unexpected emergencies, and they won’t
need to be relocated to complete a different time-sensitive task. They’re always there,
and they’re doing what they’re supposed to do. Automation is typically far more reliable
than human labour.
Perfection & Accuracy: robots will always deliver quality. Since they’re
programmed for precise, repetitive motion, they’re less likely to make
mistakes. In some ways, robots are simultaneously an employee and a
quality control system. A lack of quirks and preferences, combined with
the eliminated possibility of human error and the outcomes are more accurate than
the humans.
Job Creation: robots don’t take jobs away. They merely change the
jobs that exist. Robots need people for monitoring and supervision. The
more robots we need, the more people we’ll need to build those robots.
By training your employees to work with robots, you’re giving them a
reason to stay motivated in their position with your company. They’ll be
there for the advancements and they’ll have the unique opportunity to develop a new
set of tech or engineering-related skills.
140
Robotics Industry
Robots are becoming increasingly prevalent in almost every industry, from healthcare
and manufacturing to defence and education.
Here is the list of the organizations working on robotics as life essentials:
Robotics
Sphero: Sphero invented a now world-famous appenabled
robotic ball, which is used in classrooms all over the world
to teach through play. In addition to the original ball, other
products include the Sphero 2.0 and the Sphero Mini as well
as app-enabled racing robots named Ollie and Darkside. The
company’s Sphero Edu app is a hub for programming its
robots and more.
GITA: from the Piaggio Group that brought you the Vespa
scooter comes Piaggio Fast Forward; a robotics company
dedicated to creating lightweight mobility solutions for
people and goods. The company’s flagship robot, Gita, is a
mobile carrier that follows people around and carries up to
45 pounds. Gita can be used to carry everything from heavy
books between classes to groceries.
MOXI: Diligent’s AI-enabled robots are designed to work

with people in everyday environments. The company’s
autonomous “Moxi” robot can be left alone to perform
time-consuming logistical tasks in hospitals like setting up
patient rooms and restocking supply rooms. Capable of
navigating hospital hallways and other tight spaces, Moxi
is even imbued with “social intelligence” that’s conveyed
through its head movements and LED eyes.
141
Anybots: Equipped with a speaker, camera and video

screen, Anybots robots serve as remote avatars that are
controlled through a browser-based interface and connect
to the Web over Wi-Fi. Say you’re in Chicago and you want
to also be in Taiwan. Your robot — which has a built-in
guidance system, live video streaming capabilities and is steered with the arrow keys
on your computer’s keyboard — can act as a stand-in.
ATLAS: Boston Dynamics makes a host of different

robots that have human- and animal-like dexterity. A
few examples: There’s SpotMini, “a nimble robot that
handles objects, climbs stairs, and will operate in offices,
homes and outdoors”; Atlas, a “dynamic humanoid” that
“uses balance and whole-body skills to achieve two-
handed mobile manipulation”; and WildCat, a speedy
quadruped that “uses a galloping gait much like a dog or horse and leans into turns to
maintain traction and balance.”
HV-100: According to Harvest, its HV-100 model was the

world’s “first fully autonomous robot that works alongside
people in unmodified industrial environments.” Today, more
than 30 of them serve major agricultural players across
the U.S. to help increase productivity, efficiency and plant
quality. Harvest’s robots lessen the load when it comes to
manual labour so their human counterparts can focus on
other facets of the growing process.
142
6.2. Getting Started with Edison

Edison robots are a complete STEAM teaching resource designed to bring coding
to life. Edison is an expandable robotics system, which works with any LEGO brick
compatible building system, the robots can be used as the programmable base for an
incredible assortment of engineering and STEM projects. Edison can be programmed
Robotics
through 4 platforms:
• Barcodes and Remote Control
• EdBlock – Graphical Language
• EdScratch – Scratch Language interface
• EdPy – Python Programming Interface
Edison is equipped with all the sensors,
outputs and motors needed to introduce you to the amazing world of robotics.
Edison’s creator, Brenton O’Brien says that: a robot is a machine that can behave
autonomously which is also a simple definition of robotics.
Robotics wouldn’t be possible without electronics.
Your Edison robot has electronics which you
can see through the transparent top. There are
resistors, capacitors, transistors, motors and more.
The most important electronic part is Edison’s
microcontroller (MCU). The microcontroller is like
Edison’s brain. It’s where all the robot’s thinking happens. Edison’s microcontroller
is very similar to the processor chip inside a computer, only much smaller. Just like
a processor chip in a computer, Edison’s microcontroller contains programs. These
programs are what allow Edison to ‘think’ and make decisions.
Edison’s sensors, buttons and switches

Edison robot is LEGO brick compatible on four of its sides, has a removable skid and
two removable wheels and includes a range of built-in sensors. Familiarity with your
robot will allow you to create an incredible range of robotics and coding projects.
143
To use Edison, you’re going to need to know where all of Edison’s sensors are
located and become familiar with the robot’s three buttons.
Default settings of Edison’s three buttons:

• Record button 1 press = download program 3
presses = scan barcode
• Stop button 1 press = stop program
• Play button 1 press = run program
Turn the Edison robot over to see where the

power switch, removable skid, and line tracking
sensor are located on the bottom. Edison’s line
tracking sensor is made up of two parts: a red LED
light and a light sensor. The line tracking sensor
also reads special barcodes that activate pre-
installed programs.
Meet Edison
EdPy is Edison’s text-based programming
application. The robot is controlled by a program, which contains the instructions
and rules governing the robot’s behaviour. Any program you create in EdPy must
be downloaded to Edison before the robot can perform the
actions. The program can be changed only in the EdPy platform
and in such cases, you will need to download the new program
to the robot again. To connect Edison with the computer to
download the program you create with EdPy, you need the
EdComm cable which is Edison’s special cable. The EdComm
cable is used to download programs to Edison. It connects into
the headphone/audio Socket/jack on your computer or tablet
or phone or any other computing device which contains an
audio jack and a working web browser to access EdPy app.
Note: Before you begin programming with EdPy you MUST make sure that your computer
volume is MAX and it is important that ALL sound enhancements are disabled. This includes
Altec Lansing enhancements, Realtek audio enhancements, Beats audio, Spatial sound, and
all equalizers. Edison will fail to program if this is not done.
144
6.3. Introduction to EdPy
EdPy app is one the web-based programming interface to program Edison. EdPy is a
text-based programming language based on Python. Python gives more flexibility to
your programs and offers more precise control of your robot. EdPy application can be
Robotics
accessed online and without any installation on your computer or tablet.
To access EdPy app. visit https://www.edpyapp.com/
EdPy Interface
145
Programming area: this is where you type the Python code to control the Edison robot.
Documentation: in this window, you can search the documentation about Python
functions that can be used in EdPy. Here you can find explanations of all the available
commands including example code.
Recently opened: this window contains a list of recently opened programs. Clicking on
these will re-open the program in the programming area.
Examples: this window contains a list of example programs which you can select and
open in the programming area. The example programs explain how to use common
functions of the Edison robot, including some to the functions students encountered
with the barcode programs.
Check code: when the ‘Check Code’ button is clicked, the code in the programming
area is checked for errors. If errors are detected, a message will appear in the
‘Compiler Output’ window at the bottom of the screen providing details on the errors.
Program: When the ‘Program’ button is clicked, the current program is downloaded to
the Edison robot. Make sure the Edison robot is ready for the code by connecting the
cable, turning the volume up to full and pressing Edison’s round button one time.
Compiler Output: when EdPy translates the written code into commands readable
by the Edison robot, this is called ‘compiling the code.’ If errors are detected when you
click ‘Check Code,’ they will be displayed in the compiler output section. If there are no
errors detected, this section will display a message which reads: ‘There are no errors in
your code.’
Line help: the line help is a guide to use while programming which shows users what
each of the Python commands do. When you select a line of code in the programming
area with your mouse cursor, the ‘line help’ window will display a plain-English
description of the command being highlighted by your cursor. This description is a
‘translation’ of the Python code into English.
Setup code: All Edison programs must contain the setup code that you see every time
you open the EdPy app.
146
Creating Online EdPy Account

Using the online EdPy programming environment you can save your work online and
have access to your projects from any browser. All you need to do is to create an
account and log in. The online EdPy programming environment can be used with or
without an account. Without an account, you don’t have the option to save a project so
Robotics
that you can work on it later.
Click on Menu and select Click on Create Account. Enter details and click
login. on Create Account &
Login to proceed.
6.4. Starting to Code in EdPy

It is highly recommended to work on EdPy
while logged into your account so all
the work will be available/save for your
convenience.
The programming area in EdPy has
numbered lines. All Edison programs must
contain the setup code which is included
in lines 1 to 11. When you start a new program, you should start typing on line 13. When
you finish writing you should check the program for errors with the Check Code button.
If the program has any errors, they appear in the Compiler Output area.
147
Sample Code
The following program will turn on the left LED of the robot for 10 seconds.
#-------------Setup----------------
import Ed Checkpoint
Ed.EdisonVersion = Ed.V2
Ed.DistanceUnits = Ed.CM Robotics is important due to its safety,
Ed.Tempo = Ed.TEMPO_MEDIUM speed, accuracy and consistency
#--------Your code below----------- Edison robots are a complete STEAM
Ed.LeftLed(Ed.ON) teaching resource designed to bring
coding to life.
Ed.TimeWait(10, Ed.TIME_SECONDS)
Edison robot has a removable skid and
two removable wheels and includes a
range of built-in sensors.
There is no need to enter the mentioned below code and it will be available always
whenever you start a new program, however you can customize the parameters as
per your requirement.
Import Ed is a predefined code to import the library of Edison functions in python.
Ed.EdisonVersion = Ed.V2 is the code to define the version of Edison we are using
which is Version 2.
Ed.DistanceUnits = Ed.CM is the code to define the unit of measurements to drive
the Edison.
Ed.Tempo = Ed.TEMPO_MEDIUM is the code to define the music/sound pace.
After this line #-------Your code below --------- enter the code to work on Edison.
Ed.LeftLed(Ed.ON) is to turn on the left LED of Edison
Ed.TimeWait(10, Ed.TIME_SECONDS) is the code where we have defined the interval
between the LED to turn on.
EdPy works on python and will work with the same rules use for Python like case
sensitivity and indentation, therefore you need to be very careful entering the code
according to Python style.
6.5. Edison Drive Function in EdPy

The Edison robot has two motors that allow it to perform a handful of movements.
With its two motors, the robot can move forwards and backwards and also spin both
left and right. To move your Edison robot you use the drive function, which has three
148
parameters: direction, speed and distance. The constant Ed.DistanceUnits that is

set in the Setup code controls the measurement of distance. There are three distance
units: centimetres, written as Ed.CM, inches, written as Ed.INCH and time, written as
Ed.TIME.
Robotics
Ed.Drive Direction Parameters
Ed.FORWARD: Edison drives forwards.
Ed.BACKWARD: Edison drives backwards.
Ed.FORWARD_RIGHT: Edison uses one wheel to turn forwards right (clockwise).
Ed.BACKWARD_RIGHT: Edison uses one wheel to turn backwards right (counter-
clockwise).
Ed.FORWARD_LEFT: Edison uses one wheel to turn forwards left (counter-clockwise).
Ed.BACKWARD_LEFT: Edison uses one wheel to turn backwards left (clockwise).
Ed.SPIN_RIGHT: Edison spins on the spot to the right (clockwise).
Ed.SPIN_LEFT: Edison spins on the spot to the left (counter-clockwise).
Ed.STOP: Stops Edison immediately.
Sample Code • While entering the code you will

#-------------Setup---------------- observe that a code hint menu will
import Ed appear, from which we can select the
Ed.EdisonVersion = Ed.V2
Ed.DistanceUnits = Ed.CM entire code by pressing tab and there
Ed.Tempo = Ed.TEMPO_MEDIUM would be no need to type the whole
#--------Your code below-----------
code. Using the code hint menu will
Ed.Drive(Ed.FORWARD, Ed.SPEED_4, 9)
help you program the code in less
Sample Code time and above all, there will be less

chance for syntax errors.
#-------------Setup----------------
import Ed • Check the code from Check Code
Ed.EdisonVersion = Ed.V2 button from the right top corner.
Ed.DistanceUnits = Ed.CM
• Click on Program Edison button right
Ed.Tempo = Ed.TEMPO_MEDIUM
#--------Your code below----------- top corner.
Ed.Drive(Ed.BACKWARD, Ed.SPEED_3, 7) • Make sure the Edison is connected to
your computer’s headphone jack via
the EdComm Cable. Make sure your
computer’s volume at maximum and
all sound enhancements are disabled.
149
Always remember that while using the Ed.FORWARD and Ed.BACKWARD command, the
Distance parameter works as the number of steps(cm/inch) Edison has to move.
Whereas, while using Ed.FORWARD_RIGHT, Ed.FORWARD_LEFT, Ed.SPIN_RIGHT,
Ed.SPIN_LEFT, the Distance parameter works as the angle at which Edison has to turn.
This means that a code like Ed.Drive(Ed.SPIN_LEFT, Ed.SPEED_5, 90) will make
the Edison robot turn 90 degrees counterclockwise.
Sample Code-Creating a Square with Edison

#-------------Setup---------------- Ed.Drive(Ed.FORWARD, Ed.SPEED_6,
import Ed
Ed.EdisonVersion = Ed.V2 20):This code will drive Edison forward
Ed.DistanceUnits = Ed.CM to 20cm at the speed of 6.
Ed.Tempo = Ed.TEMPO_MEDIUM
Ed.Drive(Ed.SPIN_LEFT, Ed.SPEED_6,
#--------Your code below-----------
Ed.Drive(Ed.FORWARD, Ed.SPEED_6, 20) 90): This code will rotate the Edison to 90
Ed.Drive(Ed.SPIN_LEFT, Ed.SPEED_6, 90) degrees at the speed of 6.
Ed.Drive(Ed.SPIN_LEFT, Ed.SPEED_6, 90)
6.6. Variables in Edison

A Python variable is a reserved memory location to store values. In other words,
a variable in a python program gives data to the computer for processing. Most
important function to use the variable is to have flexibility in the program, rather than
entering data directly into a program, we use variables to represent the data. Then,
when the program is executed, the variables are replaced with real data.
150
Sample Code
#--------Your code below-----------
degreesToTurn=90
Ed.Drive(Ed.SPIN_RIGHT, Ed.SPEED_6, degreesToTurn)
Robotics
This program will make Edison robot turn right using a value from the variable.
degreesToTurn = 90 is the variable with the parameters of 90. This variable is going
to use as a reference in the program to turn the Edison robot to 90 degrees.
6.7. Looping Structures in Edison

For Loop
In Python, a for loop is a control structure which can be used to repeat sets of
commands or statements any number of times. Using a for loop allows you to repeat
(also called iterate over) a block of statements as many times as you like. The for
loop often goes together with the range() function in Python. In EdPy, range() only
has one input parameter. That input parameter determines the upper limit of the set
and the lower limit is always 0, or in a simpler definition it can be used to define the
times of loop should repeat itself.
Sample Code
#--------Your code below-----------

# i defines variable for the range value
for i in range(4)
#play a beep sound
Ed.PlayBeep()
#wait for one second Robotics has already gotten
Ed.TimeWait(1, Ed.TIME_SECONDS) about 150,000 people employed
worldwide in engineering and
assembly jobs.
151
Sample Code-Creating Square Using For Loop
Using loop to create a program which has several repeating codes is a smart decision.
The following program will create a square using a loop.
#--------Your code below-----------
for x in range(4)
Ed.DRIVE(Ed.FORWARD,Ed.SPEED_5,1)
Sample Code-Creating Circle Using For Loop
It may not be possible to drive in a perfect circle, but a shape with thousands of very
small sides can closely approximate a circle. degreesToTurn is a variable with a value
of 1.
#--------Your code below-----------

degreesToTurn=1
for x in range(360)
Ed.DRIVE(Ed.FORWARD,Ed.SPEED_5,1)
Ed.Ed.Drive(Ed.SPIN_LEFT, Ed.SPEED_5, degreesToTurn)
Try it Out!
Create a program to make your robot drive forward for 3 seconds then
flash both LED lights. After that, using the For loop, Edison is to drive in the
form of a square and stop.
While Loop
The While loop repeats a statement or group of statements while a given condition is
TRUE. It tests the condition, which is written as an expression, before executing the loop
body. While the expression evaluates to TRUE, the program repeats the commands in
the loop. When the expression evaluates to FALSE, the program moves on to the next
line of code outside the loop.
152
Sample Code-Creating Circle Using For Loop
In this program, we want the Edison to follow a torch and we need this program to run
infinitely, therefore, we will use the while loop.
Robotics
#--------Your code below-----------
# loop forever
while True:
if Ed.ReadLeftLightLevel()>Ed.ReadRightLightLevel():
#if the left light level is higher, drive to left
Ed.Drive(Ed.FORWARD_LEFT, Ed.SPEED_4, Ed.DISTANCE_UNLIMITED)
else:
#otherwise, the light is on the right, drive to the right
Ed.Drive(Ed.FORWARD_RIGHT, Ed.SPEED_4, Ed.DISTANCE_UNLIMITED)
6.8. Play Tunes on Edison

Edison can play individual musical notes through its small speaker using the
Ed.PlayTone() function in EdPy. The Ed.PlayTone()function takes two input
parameters: the note and the duration. The note determines what note to play and
the duration determines the given length of time the note should be played. The
Ed.PlayTone() is defined as: Ed.PlayTone(Ed.NOTE_B_6,Ed.NOTE_HALF)
Parameter Input Options Play Musical Note

Ed.NOTE_A_B Low A
Ed.NOTE_A_SHARP_6 Low A sharp
Ed.NOTE_B_6 Low B
Ed.NOTE_C_7 C
Ed.NOTE_C_SHARP_7 C sharp
Ed.NOTE_D_7 D
Ed.NOTE_D_SHARP_7 D sharp
Ed.NOTE_E_7 E
Ed.NOTE_F_7 F
Ed.NOTE_F_SHARP_7 F sharp
Ed.NOTE_G_7 G
Ed.NOTE_G_SHARP_7 G sharp
153
Ed.NOTE_A_7 A
Ed.NOTE_A_SHARP_7 A sharp
Ed.NOTE_B_7 B
Ed.NOTE_C_8 High C
Parameter Input Options Plays Note For (Duration)

Ed.NOTE_SIXTEENTH 125 milliseconds
Ed.NOTE_EIGTH 250 milliseconds
Ed.NOTE_QUARTER 500 milliseconds
Ed.NOTE_HALF 1,000 milliseconds
Ed.NOTE_WHOLE 2,000 milliseconds
6.9. Conditional Structures in Edison
IF Statement
An important part of coding is making decisions. The most common way to do this
is to use an IF statement. An IF statement asks whether a condition is true or false.
If the result is true, then the program executes the block of statements following the
IF statement. If the result is false, the program ignores the statements inside the if
statement and moves to the next line of code outside of the if statement.
Sample Code
#--------Your code below-----------

# loop forever
while True:
Ed.ObstacleDetectionBeam(Ed.ON)
if Ed.ReadObstacleDetection()!=Ed.OBSTACLE_NONE:
Ed.PlayBeep()
Ed.ReadObstacleDetection()
154
Elif Statement
For Edison, we can create a program which makes a decision using more than two
conditions. To do this, you use another Python syntax structure:
• if expression: statement(s)
• elif expression: statement(s)
Robotics
• else: statement(s)
Elif is how you say else if in Python. You can use elif to write a program with multiple
if conditions. A program using if/elif/else still moves sequentially from the top
down. Once the program runs any indented code inside any part of the if statement
structure, it will skip the rest of the structure and move on to the next line of code
outside the structure.
This means that if the if statement at the top is true, the program runs the indented
code for the if expression and skips any elif sections as well as the else section if
there is one. If the if statement is false, however, the program skips that section of
indented code and moves to the first elif section. Again, if the first elif condition is true,
the program runs its indented code and skips everything below it in the if statement
structure (any other elif and the else condition if there is one). If this elif condition is
false, the program moves to the next part of the if statement structure and so on.
Sample Code
#--------Your code below-----------
#turn on obstacle detection
while True:
Ed.Drive(Ed.FORWARD, Ed.Speed_1, Ed.DISTANCE_UNLIMITED)
obstacle=Ed.ReadObstacleDetection()
if obstacle>Ed.OBSTACLE_NONE: #there is no obstacle
Ed.Drive(Ed.BACKWARD, Ed.SPEED_5, 7)
if obstacle==Ed.OBSTACLE_LEFT:
elif obstacle==Ed.OBSTACLE_RIGHT:
Ed.Drive(Ed.SPIN_LEFT,Ed.SPEED_5,90)
elif obstacle==Ed.OBSTACLE_AHEAD:
Ed.Drive(Ed.SPIN_RIGHT, Ed.SPEED_5,180)
Ed.ReadObstacleDetection() #clear any unwanted detections
155
This program has three different paths that it can take when an obstacle is detected
based on where the detected obstacle is relative to Edison.
6.10. Obstacle Detection
Edison has two obstacle detection beams, one on the front left and the other is on
the front right.
Sample Code
#--------Your code below-----------
Ed.Drive(Ed.Forward, Ed.SPEED_5, Ed.DISTANCE_UNLIMITED)
while Ed.ReadObstacleDetection()!=Ed.Obstacle_Ahead:
pass
Ed.Drive(Ed.STOP,1,1)
This program tells Edison to drive until it encounters an obstacle. There are a couple of
important things to notice about this program:
• Ed.ObstacleDetectionBeam(Ed.ON) turns Edison’s obstacle detection beam
to ‘on’. Whenever you want to use Edison’s obstacle detection beam in an EdPy
program, youalways need to turn the beam to ‘on’ before the beam is used in the
program.
• Ed.Drive(Ed.Forward, Ed.SPEED_5, Ed.DISTANCE_UNLIMITED) sets the speed
to 5 in this program. When using obstacle detection, you need to use a slightly
lower speed to allow the robot to detect an obstacle before colliding with it. If the
speed is too fast, the robot will crash into obstacles before being able to detect
them.
Right and Left Obstacle Detection
In this program, Edison is going to react to obstacles on the left or right. To do this, we
will use conditional statements like if and elif. This program has three different
paths that it can take when an obstacle is detected based on where the detected
obstacle is relative to Edison.
156
#--------Your code below-----------

Ed.ObstacleDetectionBeam(Ed.ON) #turn on obstacle detection
while True:
Ed.Drive(Ed.Ed.FORWARD, Ed.SPEED_1, 7)
obstacle=Ed.ReadObstacleDetection()
Robotics
if obstacle>Ed.OBSTACLE_NONE: #there is no obstacle
Ed.Drive(Ed.SPIN_RIGHT, Ed.SPEED_5, 90)
elif obstacle==Ed.OBSTACLE_RIGHT:
Ed.Drive(Ed.SPIN,Ed.SPEED_5,90)
elif obstacle==Ed.OBSTACLE_AHEAD:
Ed.Drive(Ed.SPIN_RIGHT,Ed.SPEED_5,180)
Ed.ReadObstacleDetection() #clear any unwanted detection
6.11. Clap Control Drive
The Edison robot’s sound sensor is not just

sensitive to claps. The sensors can respond to
any loud sound detected or vibrations similar to Checkpoint
that sound, which is why you can tap near the
EdPy is a text-based programming
speaker on the robot to trigger the sound sensor. language based on Python.
Edison’s motors, gears and wheels all make Edison drive function has three
parameters: direction, speed and
sounds as they turn, which can trigger the sound distance.
A variable in a python program gives
sensor. To prevent the sound of the robot driving data to the computer for processing.
from triggering the sound sensor, you need to
alter the program.
You will need to add a TimeWait() function call with an input parameter of about
350 milliseconds to give the robot’s motors time to stop. You also need to use a
ReadClapSensor() to clear the clap sensor.
157
Sample Code
#--------Your code below-----------
Ed.Drive(Ed.Forward,Ed.Speed_8,10)
Ed.TimeWait(350,Ed.TIME_MILLISECONDS)
Ed.ReadClapSensor()
while Ed.ReadClapSensor()==Ed.CLAP_NOT_DETECTED:
pass
Ed.Drive(Ed.BACKWARD, Ed.SPEED_8, 10)
6.12. Line Tracking Sensor
In this program, you will learn about the Edison’s line tracking sensor and how Edison
can use this sensor to determine if it is on a reflective or non-reflective surface. How
does Edison’s line tracking sensor work?
Your Edison robot is equipped with a line tracking sensor, located near the power
switch on the bottom of the robot. This sensor is made up of two main electronic
components:
• A red light-emitting diode (LED)
• A phototransistor (light sensor).
This image represents a cross-section of Edison’s line tracking sensor. The line tracking
sensor’s LED shines light onto the surface that the Edison robot is driving on. The
phototransistor component is a light sensor. The phototransistor measures the amount
of light that is reflected off of the surface beneath Edison.
Sample Code
#--------Your code below-----------
Ed.LineTrackerLed(Ed.ON)
Ed.Drive(Ed.FORWARD, Ed.SPEED_6, Ed.DISTANCE_UNLIMITED)
while True:
if Ed.ReadLineState()==Ed.LINE_ON_BLACK:
Ed.PlayBeep()
Ed.Drive(Ed.STOP, Ed.SPEED_6, 0)
158
Ed.LineTrackerLed() turns the LED state to ON. Just like with Edison’s obstacle
detection beam, to use the line tracking sensor in a program, you must first turn
the sensor on. The Ed.PlayBeep() function doesn’t affect the way the line tracking
program works. Instead, this line’s purpose is for debugging.
Sample Code-Bounce in Borders
Robotics
#--------Your code below-----------
Ed.LineTrackerLed(Ed.ON)
while True:
if Ed.ReadLineState()==Ed.LINE_ON_BLACK:
Ed.Drive(Ed.STOP,Ed.SPEED_3, Ed.DISTANCE_UNLIMITED)
Ed.PlayBeep()
Ed.Drive(Ed.SPIN_RIGHT, Ed.SPEED_5, 135)
6.13. Light Sensors

In this activity, we will use a program to have your Edison robot turn the two LED
lights on when it gets dark. In this program, we are using the less than (<) symbol
to determine the path that the program will take. If the value returned from the
Ed.ReadLeftLightLevel() function is less than 100, then the activateBothLights()
function is called with the input parameter of Ed.ON. Otherwise, the program moves to
the else part of the if statement, which also calls the activateBothLights() function,
but with the input parameter of Ed.OFF.
Sample Code
#--------Your code below-----------
while True:
if Ed.ReadLeftLightLevel()<100:
activateBothLights(Ed.ON)
else:
activateBothLights(Ed.OFF)
def activateBothLights(stateOfLed):
Ed.LeftLed(stateOfLed)
Ed.RightLed(stateOfLed)
159
7.14. Light Sensors

In this activity, we will write a program so that your Edison robot will follow the light
from a torch (flashlight). This program compares the light level between the right light
sensor and the left light sensor to determine the flow of the program. The presence
of the torch on either the left or right of the robot will cause the robot to read a higher
light level on that side of the robot. The logic of this program says that when the right
light level minus the left light level is less than zero, the robot drives left towards the
higher source of light, else the robot drives to the right.
Sample Code
#--------Your code below-----------
while True:
if Ed.ReadRightLightLevel()-Ed.ReadLeftLightLevel()<0:
Ed.Drive(Ed.FORWARD_LEFT,Ed.SPEED_5,Ed.DISTANCE_UNLIMITED)
else:
Ed.Drive(Ed.FORWARD_RIGHT, Ed.SPEED_5, Ed.DISTANCE_UNLIMITED)
160
Let’s Review
1. Robotics is a branch of engineering that involves the conception, design, manufacture,
and operation of robots.
2. Edison robots are a complete STEAM teaching resource designed to bring coding to
life.
3. Edison’s microcontroller contains programs. These programs are what allow Edison to
think and make decisions.
4. Default settings of Edison’s three buttons: Record button 1 press = download program
3 presses = scan barcode Stop button 1 press = stop program Play button 1 press =
run program.
5. The robot is controlled by a program, which contains the instructions and rules
governing the robot’s behaviour.
6. EdPy app is one the web-based programming interface to program Edison.
7. All Edison programs must contain the setup code which is included in lines 1 to 11.
8. To move your Edison robot you use the drive function, which has three parameters:
direction, speed and distance.
9. The for loop often goes together with the range() function in Python.
10. The while loop repeats a statement or group of statements while a given condition is
TRUE.
11. Edison can play individual musical notes through its small speaker using the
Ed.PlayTone() function in EdPy.
My Notes!
161
Mobile App Development Process
Idea generation & validation
1 Brainstorming Market research Mind mapping
Requirement gathering App goals and objectives
UX/UI Design
Wireframing Prototyping Mockup
2
Style Guide Information architecture
Development
3 Back-end development Iterations
Testing & quality assurance
Launch and Deployment

Finalizing build App store submission 510,900
4
1,083,800
App store approval
Marketing and Maintainence

5 1,083,800
App marketing strategy Releasing updates & fixes
User engagement and retention

Mobile App Development
1. Familiarise with the App Lab interface

2. Understand and identify the purpose of the design elements found in the Design
toolbox
3. Add images and icons to the app interface
4. Switch over to the design mode and design the app interface by using various
design elements
5. Know and understand the importance of setting meaningful IDs of design elements
6. Understand the naming convention of JavaScript programming language.
7. Create user-interface of an app of their choice.
8. Share their apps with their peers and publish on Code.org
Empowered Innovative Creative

Learner Designer Communicator
1a 1d 4a 4c 6a 6d
7.1. Getting Started with App Lab

Making your own apps is easy with App Lab! Whether you’re new to coding or have
some experience. App Lab is a great tool for building new apps and sharing them with
your friends.
App Lab Interface
On the left side is your app. On the right side is the code that will make it run. You
build your program by dragging in blocks from the toolbox.
7.2. setProperty( ) Block

The setProperty()block changes the look of the elements on your screen. Like the
buttons, labels, or even the screen itself. First you need to decide which element you
want to change. If you hover over an element in your app you can see the name or ID
here. Then go select that ID from the first drop-down.
164

Elements have lots of properties you can
change like their text colour, background colour
or font size. You can see the full list and choose
which property you want to change in the
second dropdown.
The last drop-down is where you’ll write the

value you want to use. The block will make a
suggestion for you. But you can always type in
different colours or numbers yourself.
Example
The following code snippet sets the
background colour of the button to green using
setProperty() block. The block reads a bit
like a sentence: ‘Set button1’s background colour
to green.’
We will be working in block mode but App Lab

also supports working in text. Either
way you’ll be programming in JavaScript, the
language of the web.
7.3. Event Handling

Events are user actions like clicking a button,
scrolling through a menu, or hovering over a
picture. Interactive apps need ways to respond
to events, like playing a sound when I click this
button. To do this in App Lab you need to use a
new block called onEvent().
165
Example
The following code turn the screen color from blue to green when the button is clicked.
1. Switch to the Design mode and drag a button from the design toolbox on to the
screen as shown below.
2. From the Properties option, set the text property of the button to Greenify! and set
its color property to green.
3. Set the initial colour of the screen to blue by dragging the setProperty()block
into the code area.
166

4. Next drop the onEvent()function on the code area. Add code inside the onEvent
that will change the background colour of the screen. You can read this block like a
sentence: “On the event that the button is clicked run all this code.”
5. If you want to change more things after the event, like the text on the screen just
add more code to the onEvent(). To make your program respond to more events
add more onEvent(). blocks. Just make sure not to put them inside of each other.
Now it’s time to try it out for yourself.
7.4. Working with Sound

Checkpoint
1. In the toolbox, you’ll find a new block
The setProperty() block changes
called playSound(). Drag it into the the look of the elements on your
screen.
workspace. You can pick a sound to Events are user actions like clicking a
button, scrolling through a menu, or
play by clicking the drop-down then hovering over a picture.
The playSound() block allows you to
clicking Choose. add sound to your app.
167
2. From here you can either upload a sound file from your computer or search for a
sound from the sound library. The sound library has lots of different categories like
instruments, background music or animals.
3. Once you’ve got the sound you want, click Choose. When this block runs, it will play
the sound you chose.
7.5. Working with Images
1. To add images to your elements you

can just use the setProperty() block.
Select the image property in the second
drop-down
168

2. Then select Choose from the third dropdown. From here you can upload an image
from your computer, insert link to an image or you can look through a huge library
of icons in the icon library.
3. Back in code mode, you can use the setProperty()block to change the icon
colour of your icon. Once you’ve picked what image your icon to use click Run to
see how it looks.
169
7.6. Designing an App

1. Use the switch on top of your app to go into Design Mode. You can add new
elements by dragging them onto the screen. You can move them around to
different locations and change their size by dragging the bottom right corner.
2. To change an element’s properties, use the controls on the right. For example, it’s
really easy to change this button’s text, colour, and font size.
3. To change an element’s properties, use the controls on the right. For example, it’s
really easy to change this button’s text, colour, and font size. When you add a new
element to your screen it’ll get a generic ID like button1, image2. It’s a good idea
to change this button’s ID to something more meaningful like rightButton. So that
you’ll know which one it is when you go to the program.
170
4. You can add entirely new screens to your app by dragging in a screen element.

5. From the drop-down, at the top, you can quickly switch back and forth between the
screens you create.
6. Inside your app, you’ll need a way to switch between all of these screens, so
the setScreen block has been added to the toolbox. Use setScreen inside the
onEvent()block to change screens at the click of a button.
171
Let’s Review
1. The setProperty() block changes the look of the elements on your

screen.
2. Elements have lots of properties you can change like their text colour,
background colour or font size.
3. Events are user actions like clicking a button, scrolling through a menu, or
hovering over a picture.
4. To add events in App Lab you need to use a new block called onEvent().
5. The playSound() block allows you to add sound to your app.
6. To add images to your elements you can just use the setProperty() block.
My Notes!
172
Glossary
4G: it is the fourth generation of broadband cellular network technology, succeeding
3G.
5G: it is the fifth generation of mobile networks, a significant evolution of today’s 4G
LTE networks.
Absolute reference: it is used when we want to keep a cell, a row or a column constant
when copying a formula.
Advanced filters: can be constructed to get more control over your data tables.
algorithm is a procedure for solving problems
Attributes: define additional characteristics or properties of the element such as width
and height of an image.
Bus topology: in this arrangement computers and devices are connected to a single
linear cable called a trunk.
Canvas widget: supplies graphics facilities for Tkinter.
cell reference is the address of the cell and identifies its location.
Change chart type: this option allows to change the type of your current chart.
chart is a graphical representation of data and describes the overall analysis visually.
Chart layouts: Excel allows you to add chart elements—such as chart titles, legends,
and data labels—to make your chart easier to read.
Chart styles: includes several different chart styles, which allow you to quickly modify
the look and feel of your chart.
Checkboxes: in HTML forms is to get multiple answers from the multiple choices given.
Cloud storage: is a model of computer data storage in which the digital data is stored
in logical pools.
Cloud storage providers: are responsible for keeping the data available and
accessible, and the physical environment protected and running.
Column/bar chart: it is used to illustrate comparisons between a series of data.
Comments: are just a dead piece of code which can be used for our references only.
Computer programming: it is a way of giving computers instructions about what they
should do next.
Conditional formatting: allows you to automatically apply formatting—such as colors,
174
icons, and data bars—to one or more cells based on the cell value.
CSS: stands for Cascading Style Sheets, CSS describes how HTML elements are to be
displayed in web browsers, CSS typically creates design profiles for any HTML element
Glossary
for reuse and overall layout control of the document layout.
CSV files: are Comma-Separated Values and can be incorporated in any software or
database.
Data tab: allows to switch the rows and columns of the chart.
Database (DB): is an organized collection of data.
Dreamweaver: is a web development tool. It is basically for generating HTML while
using an editable front end, kind of like using Word to do all your layout, and the end
result is an HTML code.
Edison robot: is LEGO brick compatible on four of its sides, has a removable skid and
two removable wheels and includes a range of built-in sensors.
EdPy app: is one the web-based programming interface to program Edison.
Elements: have lots of properties you can change like their text colour, background
colour or font size.
ELIF keyword: is Python’s way of saying if the previous conditions were not true,
else keyword catches anything which isn’t caught by the preceding conditions.
Events: in python execute at any specific action/signal occurred for i.e. hovering a
mouse at a certain point, clicks of the mouse either right click or left click and so on.
flowchart is a type of diagram that represents an algorithm, workflow or process.
For loop: is used for repeating over a sequence (that is either a list or a string).
Freeware: is software, most often proprietary, that is distributed at no financial cost to
the end-user.
Functions: help break our program into smaller and modular chunks.
G Workspace: also known as Google Suite or G Suite, is a collection of business,
productivity, collaboration, and education software developed and powered by
Google.
Google Docs: is an online version of Microsoft Word, PowerPoint and Excel. In Google
Docs they are called Google Document, Spreadsheet and Presentation.
Google Drive: allows users to store files on their servers, synchronize files across
devices, and share files.
175
Google Maps: is a web-based service that provides detailed information about

geographical regions and sites around the world. Roadmap: Roadmap view in Google
maps, the street view of the selected region.
Google translate: is a free multilingual machine translation service developed by
Google, to translate text.
Hardware: is a term we use to describe the electronics and mechanical parts of the
computer.
Host server: sends the requested page back to the country gateway and similarly, the
country gateway sends the page back to the concerned ISP server.
Hypertext Mark-up Language (HTML): is the standard mark-up language for
documents designed to be displayed in a web browser.
IF statement: is a programming conditional statement that, if proved true, performs a
function or displays information.
Indentation: refers to the spaces at the beginning of a code line.
inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses
the style attribute of an HTML element.
Intellectual property: is a category of property that includes intangible creations of
the human intellect.
Internal CSS: is used to define a style for a single HTML page. An internal CSS is
defined in the <head> section of an HTML page, within a <style> element.
Internet: is a worldwide network of computers linked together by telephone wires,
satellite links and other means.
LAN: is an interconnection of computers and its related devices within a small
geographical area or a building, home, office, school, where the distance between the
computers is small.
Line chart: is used to display trends. It shows the changes in data over a period of
time.
List/Menu: in HTML forms are used to create a drop-down list for selecting an option
from a list given.
Logical errors: occur while designing the program which occurs due to the improper
planning of the program flow.
Network topology: is the schematic description of a network arrangement,
connecting various nodes (sender and receiver) through lines of connection.
network, in computing, is a group of two or more devices that can communicate.
176
Numeric data type: is used to hold numeric values like integers, or Float like decimal
numbers.
Paired tag: in HTML consists of two tags, the first one is called an opening tag and the
Glossary
second one is called closing tag.
Personal data: also known as personal information, personally identifying information
(PII), or Sensitive Personal Information (SPI) is any information relating to identifying a
person.
Pie chart: it is used to display only one series of data.
Pivot charts: are like regular charts, except they display data from a Pivot Table.
PivotTable: can help make your worksheets more manageable by summarizing your
data and allowing you to manipulate it in different ways.
Program: is a specific set of ordered operations for a computer to perform.
Pseudocode: is an informal high-level description of the operating principle of a
computer program or other algorithm.
Python: is a high-level programming language designed to be easy to read and simple
to implement.
Radio buttons: is used to get one single answer from the multiple choices given.
Relative reference: is the cell reference. When you copy a cell that has a formula, the
formula changes automatically.
Ring topology: Computers and devices are connected to a closed-loop cable.
Robotics: is a branch of engineering that involves the conception, design, manufacture,
and operation of robots.
Satellite view: in Google maps shows the satellite images of the selected region.
Server: are where most of the information on the Internet lives.
setProperty()block: changes the look of the elements on your screen. Like the buttons,
labels, or even the screen itself.
Shareware: is a type of proprietary software which is initially provided free of charge
to users, who are allowed and encouraged to make and share copies of the program.
Slicers: are just like filters, but they’re easier and faster to use, allowing you to instantly
pivot your data.
Software bug: is a coding error that causes an unexpected defect in a computer
program.
Software licenses: typically provide end-users with the right to one or more copies of
the software without violating copyrights.
177
Star topology: All computers and devices are connected to a network switch and this
is one of the common topologies nowadays.
String data type: The string is a sequence of characters like a simple text “Hello
World”.
Sway: is a new app from Microsoft Office that makes it easy to create and share
interactive reports, personal stories, presentations, and more.
Syntax error: errors in typing the commands and variables.
Tab index: in HTML it is the sequence of cursor focus
Table: in MS Excel, is a specially designated range of numbers
Terrain view: in Google maps shows the terrain and vegetation.
Text area: in HTML works like a simple text field but it can accommodate more words
than a normal text field and its layout is like a paragraph.
then try this condition.
Unpaired tag: in HTML is a single tag which does not need a companion tag.
variable is nothing but a name given to a storage area that our programs can
manipulate.
WAN: is a computer network that covers broad and large areas such as small towns
and cities.
Web page: also called webpage is a document commonly written in HTML (Hypertext
Mark-up Language) that is accessible through the Internet or other networks using an
Internet browser.
Webform: it is HTML form on a web page allows a user to enter data that is sent to a
server for processing.
While loop: repeats a statement or group of statements while a given condition is
TRUE.
178
The ICTECH curriculum engages students at technical and practical level,
equipping them with skills required in areas of research, publication
designing and prediction. The computing curriculum aims at teaching
principles of information and computation, how digital systems work and
how to put this knowledge to use through programming. ICTECH
activities incorportae a range of technology skills into student learning
such as word processing, programming, Animation, Programming,
Spreadsheets, Photoediting, Desktop Publishing, Digital Citizenship,
Databases, Operating system, Robotics, and Presentation Skills.
Microsoft
MICROSOFT
SCHOOLS We are a Microsoft School
Microsoft

Book 7

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Book 7

Uploaded by

Copyright:

Available Formats

Innovative Technology

The City School

Group Head Office: 31 – Industrial Area, Guru Mangat Road,

means at any time.

1.2. Relative and Absolute References in Excel.................................................................................................................................................................12

1.3. Format Sheet as Table.................................................................................................................................................................................................................14

1.4. Advance Filters and Sort Features..................................................................................................................................................................................... 16

1.5. Working with Power and Percentage Formula.......................................................................................................................................................18

1.6. Common Error Messages in Excel.....................................................................................................................................................................................20

1.7. Advance Charts..................................................................................................................................................................................................................................21

1.8. Modifying and Formatting Chart Design....................................................................................................................................................................25

1.9. Conditional Formatting...............................................................................................................................................................................................................28

1.10. Import and Export Data as CSV Files.............................................................................................................................................................................30

1.11. Pivot Table..............................................................................................................................................................................................................................................32

2.2. Getting Started with HTML....................................................................................................................................................................................................48

2.3. Creating a Webpage..................................................................................................................................................................................................................51

2.4. Common HTML Tags.................................................................................................................................................................................................................53

2.5. Introduction to Adobe Dreamweaver..........................................................................................................................................................................55

2.6. Getting Started with Adobe Dreamweaver...........................................................................................................................................................55

2.7. Creating Webpage in Dreamweaver...........................................................................................................................................................................56

2.8. Creating Website in Dreamweaver...............................................................................................................................................................................59

2.9. Inserting Media with HTML5................................................................................................................................................................................................64

2.10. Getting Started with CSS.........................................................................................................................................................................................................68

2.11. CSS with Dreamweaver...........................................................................................................................................................................................................70

2.12. Creating Web Forms..................................................................................................................................................................................................................72

All About Cloud................................................................................................................................... 79

3.2. Network Topology and Type............................................................................................................................................................................................. 81

3.3. Types of Area Network........................................................................................................................................................................................................... 81

3.4. How Does the Internet Work.............................................................................................................................................................................................. 83

3.6. Communication Links............................................................................................................................................................................................................... 84

3.7. Data and Network Security................................................................................................................................................................................................ 85

3.8. Understanding Digital Citizenship.................................................................................................................................................................................. 86

3.9. Cloud Storage................................................................................................................................................................................................................................. 88

3.10. Getting Familiar with Google Workspace............................................................................................................................................................... 90

3.11. Google Drive..................................................................................................................................................................................................................................... 90

3.12. Getting Started with Google Docs................................................................................................................................................................................. 93

3.13. Google Translate.......................................................................................................................................................................................................................... 97

3.14. Google Maps.................................................................................................................................................................................................................................... 99

Presenting Your Ideas....................................................................................................................... 105

4.2. What Can I Create with Sway?...........................................................................................................................................................................................106

4.3. Getting Started with MS Sway.............................................................................................................................................................................................107

Programming the Computer-Python......................................................................................... 112

5.2. Flowcharts and Algorithms.....................................................................................................................................................................................................113

5.4. What is a Program..........................................................................................................................................................................................................................116

5.5. Getting Started with Python...................................................................................................................................................................................................116

5.6. Variables and Data Types........................................................................................................................................................................................................119

5.8. Python Numbers...............................................................................................................................................................................................................................122

5.9. Calculation with Numbers.........................................................................................................................................................................................................123

5.10. LIST in Python.....................................................................................................................................................................................................................................124

5.11. Conditional Statements in Python.....................................................................................................................................................................................125

5.12. Loops in Python.................................................................................................................................................................................................................................127

5.13. Functions in Python........................................................................................................................................................................................................................128

5.14. Error Handling in Python...........................................................................................................................................................................................................130

5.15. Creating Graphics with Python.............................................................................................................................................................................................131

5.16. Event Handling in Python..........................................................................................................................................................................................................134

6.2. Getting Started with Edison.................................................................................................................................................................................................. 143

6.3. Introduction to EdPy................................................................................................................................................................................................................... 145

6.4. Starting to Code in EdPy......................................................................................................................................................................................................... 147

6.5. Edison Drive Function in EdPy........................................................................................................................................................................................... 148

6.6. Variables in Edison....................................................................................................................................................................................................................... 150

6.7. Looping Structures in Edison.............................................................................................................................................................................................. 151

6.8. Play Tunes on Edison................................................................................................................................................................................................................. 153