Computers for Digital Learners Grade 9 Unit 1 Lesson 1

Mastering the principles of Web design and Web development

Objective:
At the end of the lesson, the students will be able to:
a) Differentiate web design from web development.
b) Identify the principles of web design.
c) Identify the principles of web development.
d) Appreciate the importance of principles.

Web Design
- Is the creation of the layout of the visual elements of the website using various design programs.
Example:
Adobe Creative Cloud
- Monthly or annual subscription is required to fully use the collection of software
- It includes the visual aesthetics and usability of a website-color scheme, layout, information flow
and everything else related to the visual aspects of the user interface and user experience.
Web Development
- Creation of web pages using scripting languages.
Web Designer and Web Developer
Web designer focuses on the appearance of a website
 Main Responsibilities:
o Consider various design principles to achieve a pleasing or an aesthetic layout for the website.
Web Developer specializes on coding and works on making websites with emphasis on its functionality.
 Main Responsibilities:
o Converts a static layout into a dynamic website by using links, buttons, and other interactive
elements.
Design principle
 Balance -
 Contrast
 Emphasis
 Consistency
 Unity
Principles of Web Design
1. Minimalism
- Less is more. Simplicity is always the key to a minimalist web design. This can be achieved by using
more white space with impressive visuals and focusing only on including the most essential elements.
Minimalism reduces information overload and allows web pages to load faster.
2. Typography
- Is an element of design that refers to the visual aesthetics, style or appearance of the text. It sets the tone
and theme of a website.
- The modern web design uses striking and expressive typography, replacing the traditional ones. Bold
and bright fonts will help focus the user’s attention.

3. Color Scheme
- Color combination has a big impact on how users think and feel about the website.

4. Display
For smoother navigation and more continuous story-like presentation, we use borderless user interface display.
We also design a one-page website screen. This is better than a multiscreen, grid-based interface. This will allow
the users to browse the website’s content in a simple and linear fashion. There is no need to switch through
multiple pages
5. Animation
 Users crave for a more entertaining experience. To capture maximum user attention, animations, when used
responsibly can help us achieve this. We can use animated icons and micro-interactions to ensure fluidity in the
user’s experience.
6. Mobile-friendliness
When we design a website, we make sure the users can access and browse it on any device such as smartphones,
tablets or desktop computers. It is very important to consider if our website is mobile-friendly since it is now the
commonly used tool to access websites.
Principles of Web Development
The following principles can help us develop functional websites:
1. User Focus
 This is the key principle to provide them a great user experience. Accessibility and functionality of
the website depend much on the developers.
2. Quality Focus
 This is very important to develop a mindset of quality. We must determine the standards of a quality
website. A high-quality website provides relevant and useful content and a good use experience.
3. Simplicity
 Less is indeed more. We keep our website simple and organized. Simple websites do not have
superfluous information. They are easier to build and maintain.
4. Efficiency of codes
 We write codes efficiently. We also try to reduce the number of codes without compromising the
website’s quality and functionality.
 Less codes mean less time spent on maintenance. In addition, we comment to make the codes
programmer-friendly. Thus, we must use code responsibly.
 Computers for Digital Learners Grade 10 Unit 1 Lesson 1
Understanding Computer Programming
Program

- Is a set of instructions that tells the computer what to do.

Programming

- Is the process of creating a program

Program Development Life Cycle (PDLC)

-Guide that helps them create and develop any type of program.

Program Development Life Cycle Phases

1. Problem Definition and Analysis

2. Algorithm Development
3. Coding
4. Testing and Debugging
5. Maintenance

Program Development Life Cycle Phases

1. Problem Definition and Analysis

o Determine the problem, need and output of the problem.
o Identify the requirements needed to solve the problem, such as variables, data input from the user and
the limitations of the program.
2. Algorithm Development

Algorithm - refers to the logical sequence of steps and procedures to solve the problem. We breakdown the
solution step by step

o This is one of the most important phases in program development.

Presented in 2 ways:

a) Flowchart - is a diagram that represents the algorithm. It contains various

shapes connected by arrows.
b) Pseudocode - is a detailed description of an algorithm, displayed in an easily
understandable language, usually in English and not in a complicated
programming language.

Start Program

1. Enter Value for number 1

2. Enter value for number 2
3. Add number 1 and number 2 and store in
sum
4. Display sum

End Program

3. Coding
o For the computer to be able to understand these instructions, we use a programming language to
“communicate” with the computer.
 4. Testing and Debugging
o after the code is written out, we test if the code works and displays the correct output.
5. Maintenance
o This phase involves users actively using the program.
o Check for improvements, enhancements or new problem in the program.

Control Structures Programming

- shows how instructions are performed

3 Basic Control Structure:

1. Sequential Structure
o an instruction performed sequentially
o simplest of structure

2. Conditional (decision-making) Structure

o Some instructions may involve decisions or conditions before they are executed.

3. Iterative (looping) Structure

o a certain set of instructions is represented or looped in a certain number of times.

Ethics in Computer Programming

-Ethical guidelines in developing programs

1. Contribute to society and to human well-being, acknowledging that all people are stakeholders in computing

2. Avoid harm to others.

3.Be honest and trustworthy

4. Be fair and take action not to discriminate unfairly.

5. Respect the work required to produce new ideas, inventions, creative works and computing artifacts.

6.Respect Privacy.

7. Honour confidentially.
 Computers for Digital Learners Grade 6
Working in a Digital World Unit 1 Lesson 1
Safety -is being away from dangers or threats.

Threats -is anything that causes danger or pain.

Common Online Threats

 Phishing - This is a threat that tricks the user into giving his or her information, like username or password. This

usually involves links leading to fake sites that ask for personal information.

 Malware - This is a threat that download viruses, Trojan horses, spywares and other harmful software into our

computers. When these harmful programs enter our computers, they would cause lots of problems, working

both online and offline.

 Cyberbullying - Bullies are not only present in real life. They can also be lurking online. In social networking sites,

groups, chats and discussion boards, there are some people who would want to say mean and hurtful things

about a person.

Protection from Internet Threats

1. Think before we click. - Make this our golden rule while using the internet.

2. Leave unknown sites

3. Do not post personal information.

4. Only be friends with people we know.

5. Be careful with the people we meet online.

6. Do not talk back to cyberbullies.

7. Have the latest antivirus software installed.

 Computers for Digital Learners Grade 8

Working in a Digital World Unit 1 Lesson 2

Observing Netiquette
Netiquette – is a term used to refer rules that show respect and courtesy to people online. Netiquette tells us

what to do and what not to do online.

The word netiquette is a combination of the words “net” (of the internet) and “etiquette”.

Rules of Netiquette

1. Cyber manners

We already know the dangers brought by the effects of cyberbullying. It is a very dangerous
place to be in. To avoid this, we must do our share for us not to start a fight with another
person online.

a. Be polite
b. Think before we write or type.
c. Behave online just like how we would behave in real life.
2. Cyber smarts
Kindness is one aspect of netiquette, but being smart about using the Internet is also another
aspect. We have learned that there are threats to our safety that are caused by malware or
phishing. Following the rules below will help us overcome these threats.
a. Never give out or post personal information.
b. Do not do anything uncomfortable.
c. Only visit safe websites.
3. Cyber communication
The rules below are about communicating online. How should we talk to other people?
Communication is also a key to avoid cyberbullying.
a. Do not talk to strangers.
b. Keep messages short.
c. Use emoticons for the proper emotion, but use them moderately.
d. Do not use ALL CAPS.

It is our responsibility to observe netiquette at all times.

 Computers for Digital Learners Grade 9 Unit 1 Lesson 2
Undergoing The Web Design and Web Development Process
Web Design and Web Development Process

There are different phases on the website design and web development process. The exact process may vary
from designer to designer and from developer to developer, but the basics are the almost the same.

Phases

1. Information gathering
The very first step is to get a clear understanding of the website.
Things to consider:
 Purpose
 Goals
 Target audience
 Content of a website
2. Planning
Put together the information we
gathered in phase 1.
Site map - describes how the entire
site will look like.
 It lists all the areas of the
website as well as the sub-
areas if applicable.
 It also shows the relationship
among different pages of the
website.
 This will help us build a user-
friendly and easy-to-navigate
website.

Parts of Website

This are the main sections we can include on our website.

a. Home Page - Start or the main web page of a website.

b. Products or Services - This section allows visitors to see enough information about the different products or
services an individual, group, or company offers.
c. About - Introduces the creator/s or the company, which may include its history, people.
d. Contact - Provides website visitors different ways on how they can contact us. It may include phone numbers,
email address or physical address, or a map. A contact form may included
e. Dynamic content - We need visitors to keep coming back to our website. One way to do this is by including a
section with dynamic content such as blog, video. Photo gallery, news, events, frequently asked questions etc.
f. Site links - Displays links relative to other sites that the customers would find interesting.

Wireframe – used to describe the user interface of the website.

 Sample Templates for creating a website

3. Design - This determines the look and feel of our websites in this stage. Elements for the website: Themes,
colors, logos
4. Content writing and assembly - Important part of the process is writing the content.
5. Coding - We start creating the website itself. The web developer writes the codes for it. 6.
6. Testing, delivery and launching - Everything on the website should be tested: Links, forms, scripts and
typography.
7. Maintenance and regular updating - The development of the website does not stop when it has been launched
and has been made viewable to the public. Feedback system will be a good feature of a website.
 Computers for Digital Learners Grade 10
Getting Started with Programming Using Scratch Unit 1 Lesson 2
Scratch
 is a visual and block-based programming language
 developed by Lifelong Kindergarten group of MIT (Massachusetts Institute of
Technology) Media Lab.
 Enables its users to create different programs such as games, stories or
animations.
Sprite
 Any character or actor in the Scratch program that follows certain
commands.
 “Scratch cat” is the default sprite and mascot of the scratch
A file in Scratch is called a Scratch project, saved with a .sb2 file extension.

Main Panes
1. Stage –where the program happens or where the sprite moves and follow
instructions.
2. Sprite list – shows all the names and thumbnails of the sprites that we will
use or have used in the project.
Part Function
a. Sprite information This shows the details of the selected
sprite
b. Thumbnail for stage This shows the backdrop or background
of the stage. White is the default
background
c. Thumbnail for Sprite This shows the thumbnail of the active
or currently in use sprite when it is
highlighted in blue.
d. Choose a Sprite This has 4 options: Choose a sprite,
Paint, surprise and upload Sprite
e. Choose a backdrop This has 4 options: Choose a backdrop,
Paint, surprise and upload backdrop

3. Code tab – where the coding and editing happen. It consists of the ff:
a. Block tab contains the different blocks.
b. Scripts area is where each block is dragged and stacked or grouped
together

VISUAL BASIC is a high-level programming language that evolved from the earlier DOS version called BASIC
VISUAL BASIC is a VISUAL Programming Language because programming is done in a graphical environment. In
VB6 , you just need to drag and drop any graphical object anywhere on the form and click on the object to
enter the code window and start programming.
 Computers for Digital Learners Web Page Development

Getting Started with HTML

HTML

 (Hypertext Markup Language) the most widely used language for creating web pages.
 Hypertext refers to links that connect web pages to one another, either within a single website or
between websites.
 A markup language, which means it describes the structure of web pages using markup.

Brief History

 Tim Berners-Lee
 Father of the World Wide Web (www) created HTML in late 1991.

1995
 HTML 2.0
 HTML 3.0
1997
 HTML 3.2 became the World Wide Web Consortium (W3C) recommendation.
 Late 1997 HTML4.0
1999
 Html 4.01
2014
 HTML5
2016
 HTML5.1
2017
 HTML5.2
HTML Editors
Notepad is the default text editor for Windows and TextEdit for Mac.