ICT 9

1. Reden D. Oriola
Computer Teacher
Presented by:

2. WRITTEN
30%
PERFORMANCE
70%
GRADING SYSTEM
- QUIZZES
- LONG TEST
- ASSIGNMENTS
- SHORT ACTIVITIES
- RECITATION
- MASTERY TEST
- PERIODICAL TEST
- PROJECTS

3. RESOURCE
BOOK
ALCOHOL
WIPES
PEN / PENCIL
PAD PAPER
FLASH DRIVE
1.
2.
3.
4.
5.
MATERIALS NEEDED

4. NO EATING INSIDE THE COMPUTER
LABORATORY

5. What is Internet?

6. INTERNET
- Sometimes called "Net"
- Internet is a worldwide system of
computers interconnected to each other
sharing information across the world.
*System - is a set of things working
together as parts of a mechanism or an
interconnecting network.

7. What can you do on the Internet?
- Exchange emails
- Browse Documents
- Download and upload data
- Watch videos
- Interact with other people
- Research

8. LEARNING OBJECTIVES
At the end of the lesson, we should be able to:
Differentiate web design from web development.
Identify the principles of web design.
Identify the principles of web development
1.
2.
3.

9. What is Web Design
and Web Development?
Web design and web development are terms that
are frequently used interchangeably. These two are
essential in creating and designing websites.

10. Web Design
Web Design is the creation of
the layout of the visual
elements of the website using
various design programs.
Web development is the
creation of web pages using
HTML, CSS, JavaScript, and
other scripting languages. It
involves codes that make a
website work.
Web
Development

11. A web page or webpage is a document, commonly written
in HTML, that is viewed in an Internet browser.
A web page can be accessed by entering a URL address
into a browser's address bar. A web page may contain text,
graphics, and hyperlinks to other web pages and files.
Let us first define some terms:
WEB PAGE
Example: Facebook Profile

12. A website is a collection of multiple webpages in which
information on a related topic or another subject is linked
together under the same domain address.
WEB SITE
Example: www.facebook.com
www.instagram.com
www.twitter.com

13. This is a simple scripting language that is used for creating
web pages.
HTML (HYPERTEXT MARKUP LANGUAGE)

14. CSS
(CASCADING STYLE SHEETS )
This is used to set the style
(fonts, colors, spacing) in web
pages that contain HTML
elements.

15. JAVASCRIPT
JavaScript is a text-based programming language used
both on the client-side and server-side that allows you
to make web pages interactive

16. What is Web Designer
and Web Developer?

17. Focuses on the appearance of a website. Web designer
creates the layout and design of a website. In addition, a
web designer uses various design principles to achieve a
pleasing or an aesthetic layout for the website. In simple
terms, a website designer makes a site look good.
WEB DESIGNER

18. specializes on coding and works on making websites with
emphasis on its functionality. A web developer is also
called a programmer who converts a static layout into a
dynamic website by using links, buttons, and other
interactive elements.
WEB DEVELOPER

19. Principles of Web
Design

20. 1. Minimalism
– Minimalism reduces information overload and
allows web pages to load faster.
-Focus only on the essential element such as the
images and text.
-Uses more blank spaces to give balance to the
website.
Example: https://cssguideline.es

22. 2. Typography
- Typography is an element of design that refers
to the visual aesthetics, style, or appearance of
the text.
-Websites use bold fonts to focus the user’s
attention.
Example: https://shop.bench.com.ph

24. 3. Color Scheme
- Color scheme is the arrangement or combination of
colors. Color combination has a big impact on how users
think and feel about the website. Nowadays, vibrant, and
dramatic colors catch more attention from the user.
Example: https://www.oxgnfashion.com/

26. 4. Display
- A good display allows the user to browse the website’s
content in a simple and linear way. For smoother navigation
and more continuous story-like presentation we design a one-
page website screen.
Example: https://www.apple.com

28. 5. Animation
- Use of animated icons and micro-interactions
to ensure fluidity in the user’s experience.
- This captures more attention, because users
crave for a more entertaining experience.
Example: https://www.penshoppe.com

30. 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 a website.
To test if a website is mobile friendly enter its URL here:
https://search.google.com/test/mobile-friendly

31. https://search.google.com/test/mobile-friendly

34. Activity 1
Answer the following questions on a 1/2 sheet of paper
If you are to create your own website, what will it be about?
1.
ex. A website selling beauty products
2. What will be the name of your website?
ex. Beauty Plus
3. What are the main goals you hope to accomplish in creating the website?
ex. 1. To help young girls and mamshies maintain their beauty.
2. To discover the next Victoria's secret model using my products.
3. To become rich.
4. Who is your target audience?
ex. Mostly women of any age.
5. What will be the content of your website?
ex. Makeup, skin care, hair care, nail polish, lipstick

35. Principles of Web
Development

36. The following principles can help us develop
functional websites:
1.User focus – This is the key to provide them a
great user experience. Accessiblity and functionality
of the website depend much on the developers.
It's easier for the user to access the different parts
of the website (pages, carousel, account, content).
Each part must function properly.

37. 2. Quality Focus
- A high-quality website provides relevant and
useful content and a good user experience.
- We use tools to measure and improve the
website's quality (performance, responsiveness,
storage, and speed)

38. 3. Simplicity
- Simple websites do not have too much
information. They are easier to build and
maintain.
- Organized
- Easier to find errors.

39. 4. Efficiency of codes
- Less codes mean less time spent on
maintenance. This makes the websites
easier to manage for the programmer.
- Programmers try to reduce the amount of
written code without affecting the website's
quality and performance.