DAEHAN COLLEGE OF BUSINESS AND TECHNOLOGY, INC.

Road 20 Sitio Siwang Road, Nagtinig, Barangay San Juan, Taytay, Rizal
Senior High School Department

NAME:___________________________________________________________
JOHN PAOLO TABADA
ICT12-A
GRADE & SECTION:_________________________________________________

SUBJECT INSTRUCTOR:
Mr.___________________________________
Angelo M. Llenes, LPT
 Table of Contents

What this Module is about? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i

Objectives of this module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i

Lesson 6:
Imaging and Design for Online Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Pre-activity ............................................1
Lesson Proper ............................................2
Post-Activity ............................................6

Lesson 7:
Online Platform using for ICT Content Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Pre-activity ............................................7
Lesson Proper ............................................8
Post-Activity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Lesson 8:
Basic Web Page Creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Pre-activity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Lesson Proper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Post-Activity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
What this Module is about

This learning material is divided into three lessons which include some enrichment activities. This whole
module is also intended to be answered within 2 weeks span.

In the first lesson, we will learn the nature and purposes of online platforms as well as web applications
for content development. Here, we will try differentiating social media platforms to blogging platforms through
taking a more in-depth approach on these platforms and when to use them.

In the second lesson, we will learn the fundamentals of web page creation using templates and using
an online WYSIWYG platform. Here, we are going to try creating and designing our own web page using
Microsoft Word, and/or Free Host in particular, by editing and inserting different elements for our website.

________________________________________________________________________________________

OBJECTIVES

After getting through with this module, you are expected to:

1. evaluate existing websites and online resources based on the principles of layout, graphic, and visual
message design;

2. use image manipulation techniques on existing images to change or enhance their current state to
communicate a message for a specific purpose;

3. create an original or derivative ICT content to effectively communicate a visual message in an online
environment related to specific professional tracks;

4. evaluate existing online creation tools, platforms and applications in developing ICT content for specific
professional tracks;

5. apply web design principles and elements using online creation tools, platforms, and applications to
communicate a message for a specific purpose in specific professional tracks; and

6. create an original or derivative ICT content using online creation tools, platforms, and applications to
effectively communicate messages related to specific professional track.

i
 LESSON IMAGING AND DESIGN FOR ONLINE
6 ENVIRONMENT

PRE-ACTIVITY

Activity # 16: Thinking Beyond the Pages

Evaluate the given picture below in terms of its principles of layout, graphic, and visual message
design.

I can say that the layout of the picture is …

Resembles great tragedy and history between

innovation and drama

I can say that the graphic of the picture is …

Represents a message to the Viewers that the

movie promotes deep and strong point

I can say that the visual message design of the picture is …

particularly desinged to make viewers know how

the movie goes

1
 LESSON PROPER

Creating a web page is like creating a work of art. There are certain things that you need to consider in
order to get your message across. In Lesson 5: Advanced Presentation Skills , you learned some tips on how
to create an effective PowerPoint presentation. Some of those tips can help you in graphics and design layout.

Part I: BASIC PRINCIPLES IN GRAPHICS AND LAYOUT

1) SYMMETRICAL – there should be equal weights or elements on both sides of the page.

2) ASYMMETRICAL – it may be asymmetrical when there is an artistic and different intensity on one side of
the page.

2
3) TEXT – the text type should be legible, appropriate font face, left justified, right justified, or centered, the
flow of text should be easy to read.

4) IMAGE – the image should be proportionate, sharp in color, with high resolution, with appropriate captions.

3
5) PROXIMITY AND HARMONY – the elements should be close together and scattered and arranged apart
from each other. Elements should not be cluttered and not compete with each other.

6) CONSISTENCY – there should be uniformity of theme on each page

4
7) COLOR AND SHAPE – use color to create 8) EMPHASIS – there should be one point of interest
interest by providing variety in the design (color in a page. The elements to be emphasized should
contrast and shapes). have a different size, color, shape or background.

Part II: INFOGRAPHICS

• An infographic is a collection of imagery, charts, and minimal text that gives an easy-to-understand
overview of a topic.
• Express complex messages to viewers in a way that enhances their comprehension.
Reasons to use Infographics:

• To communicate a message
• To present in a way that is compact and easy to comprehend.
• To analyze data in order to discover cause-and-effect relationships.
• To periodically monitor the route of certain parameters.

3 Elements of Infographics:

• Visual Elements which includes color coding, graphics, and reference icons.
• Content Elements which includes time frames, statistics and references; and
• Knowledge Elements which consist of facts.

Types of Infographics:

• Cause and Effect Infographics – infographics that show the cause and effects of certain topics.
• Chronological Infographics – usually used to show a topic in a chronological or a step-by-step
sequence.
• Quantitive Infographics – used to show statistics like charts, bar graphs, etc.
• Directional Infographics – similar to chronological infographics where you use arrows to direct the
viewers’ attention to another aspect of the infographic.
• Product Infographics – used to promote products and services.

5
Here are some Tips for Creating Infographics:

• Simplicity Rocks. Keep the infographic simple so it won’t be an eyesore to the viewers
• Nothing takes effect without a cause. This just means that you need to show the viewers the cause
of the topic before discussing the effect of said topic.
• Draw your Boundaries. Just don’t overdo the pictures or images or it will look like a collage that looks
like vomit.
• Think in Color. Match the colors in your infographic like making the text in white in a dark background
and vice versa.
• Layout is not just Typography.
• Make it Appealing. Of course make it look good so it would attract and keep the viewer’s attention.
• Be Verifiable. And finally, the facts in the infographic should be verified and confirmed that they are
indeed true.

Skill Exploration:

Now that we have learned the different tips that can help you in graphics and design lay outing,
let us now put theory into practice. Let us watch and take a look at how we can actually make example
of infographics. To do so, KINDLY VISIT THE LINKS BELOW.

https://www.youtube.com/watch?v=mHXMLXxjGqI - Fast and easy Infographics with Word or

PowerPoint

https://www.youtube.com/watch?v=LF_rcj4OiW8 - How to Make an Infographic Poster Using Microsoft

PowerPoint

POST-ACTIVITIES

Activity # 17: Getting Hands On

Group yourself into 5 and create an infographic about any of the following using either MS Word or
PowerPoint:

- The nature of COVID-19 virus

- Safety precautions about COVID-19 virus
- Tips on how to do modular learning

Submit your output to my Gmail account, [email protected], following this file name:
GROUPNAME-STRAND/SECTION-INFOGRAPHICS
Note: Aside from the output itself, the infographic, do also include in passing the MS word or
PowerPoint File that you used to make the infographic.

6
 LESSON ONLINE PLATFORMS FOR ICT
7 CONTENT DEVELOPMENT
2

PRE-ACTIVITY

Activity # 18: Thinking Beyond the Pages

Below are two examples of platforms already available in the web. Write on the box 5 advantages of
using each platforms based on your prior understanding about them.

SOCIAL MEDIA BLOGGING

PLATFORMS PLATFORMS

Make A Difference. ...

Share Your Knowledge. ...
Build relationships. Refine Your Writing Skills. ...
Share your Expertise Learn How To Make Money Online. ...
Increase your visibility. Build Your Professional Network
Educate yourself.
Connect anytime.

7
 LESSON PROPER

Online Platforms for ICT Content Development

We will focus on platforms that will allow us to share our own content to the rest of the world. We will
also create a few of them to experience what is like to use all of them.
1. Social Media Platforms – websites like Facebook allow you to create not only personal accounts
but also pages and groups where you can share content. The only downside of this is that you are
restricted to Facebook’s “one-size-fits-all” design.
2. Blogging Platforms – Websites like WordPress, Tumblr, and Blogger focus on content and design.
It typically looks like a newsletter where you are given options to change the design to your liking.
Though you can manipulate the design, social media platform’s popularity is still unrivaled. The
amount of customization in blogs is also unrivaled depending on the content management system
implemented by the provider.

Content Management System

A Content Management System (CMS) is a computer application (sometimes online or browser based)
that allows you to publish, edit, and manipulate, organize and delete web content. CMS is used in blogs, news
websites and shopping.

Create Your Own Blog Using WordPress

1. If you do not have a WordPress account yet, sign up by visiting https://wordpress.com.

2. If it is your first time to visit the site, create your first blog. If you already have a blog, there is no need
to delete it. WordPress allows you to create multiple blogs. Simply click Blog Posts under Publish in the
dashboard.

8
 3. Name your blog then click Publish.

4. Click on Settings to change your site title, tagline and more information on you blog.

You can set your site title and tagline. You may also change the other settings according to your
preference. When done, click on Save Settings located at the top right of the page.

9
5. On the left menu, choose Themes.

6. On the Themes page, select Free to filter out the paid themes.

7. Select any theme you want by hovering the mouse pointer over it then click Activate.

10
 Tip: if you are happy with the current theme, just hover over the theme then click Customize.

8. Once this dialog box appears, click Customize.

9. You will be directed to a page where you can edit your website.

A B C

a. Preview Window – shows you how the website would look like with the applied changes.
b. Preview Selection – allows you to select what the preview window is showing. You can
preview how your site would look like in a PC/Mac, a tablet, or a mobile phone (respectively).
c. Customization Tools – allows you to customize the design (limited for free users), change
the color and header, select a front page, add site widgets, and change the site title.

10. Customize the theme to your liking. Once done, click on Save on the bottom of the customization
tools.

11
Putting on Your WordPress Blog

It is now time for us to add content to our WordPress blog. Follow these easy steps on how to post for
the first time.
1. On your dashboard, go to Blog Posts, then click Add

2. Creating a post is pretty straightforward in WordPress. Just type a title, customize the URL (optional),
and then post in the editor.

3. Compose a welcome message for your future readers with a minimum of 100 words. (Tip: A word
counter is located at the bottom of the editor.)
4. You may also add a category so that your posts are organized. Add tags so that others can easily
search your posts using the tags you specified.

12
 5. Once done, you may preview your post. Once satisfied, click on Publish to post it on your website.

Tip: You may also change the visibility options and schedule your post. See the screenshot below.

Skill Exploration:

For a more vivid and clear tutorial of how to make a blog using WordPress.com, KINDLY VISIT
THE LINK below:

https://wordpress.com/home/emptechllenes.wordpress.com

Cloud Computing

Cloud computing is the practice of using a network of remote servers hosted on the Internet to store,
manage, and process data, rather than a local server or a personal computer. Give yourself a minute to thing
about the outputs that used “Cloud Computing.” When we used WordPress for making our own blog and
creating our first post, we are in the process of cloud computing because we did not need to install any
software in our computer. The software is in the “cloud” or over the Internet. Here are some advantages and
disadvantages of cloud computing.

ADVANTAGES DISADVANTAGES
1. No need to install 1. Can be hampered down by slow Internet speed; no
2. Saves hard disk space connection, no cloud computing
3. Easy access to your software/files; can be ran 2. May still require compatible software like a browser
anywhere as long as there is Internet connection 3. You do not own the software; you are simply
4. Saves you money from buying software licenses renting it
and additional hard disk space 4. Security risk of doing things over the Internet as
5. No need to update because it updates opposed to your personal computer alone
automatically 5. More prone to hacking
6. Minimum system requirements 6. Limited control over the infrastructure itself
7. Back up and data recovery are relatively easier
than on a physical device

Using cloud computing is generally up to you. Large companies opt to use the cloud because they do
not need to pay licenses for each computer they have for their company; instead, they use a software on
demand.

13
 POST-ACTIVITIES

Activity # 19: Your Turn to Shine

1. What are other blogging platforms besides WordPress that piqued your interest? Why?

tublr, Tumblr is a great option for visual blogging and other posts with minimal texts.
________________________________________________________________________________________
Users tend to post interesting and catchy posts that even goes beyond the boundaries of
________________________________________________________________________________________
Tumblr and into other social media. Tumblr is free and can be used even by beginners. The
________________________________________________________________________________________
user interface is very easy to learn and interact.
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________

2. Besides WordPress, what are the other cloud computing software you have used so far?
Big data Analysis: Civis Analysis
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________

14
 LESSON
BASIC WEB PAGE CREATION
8

PRE-ACTIVITY

Activity # 20: Thinking Beyond the Pages

1) Have you ever tried creating a Web Page? Why or Why not?

no for 4 reasons:You cant alter page structure,Limited Themse and plug-ins,

________________________________________________________________________________________
It Costs to add style,The content and copyright issue
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________

2) Name a Website you normally visit and what makes the site great?
tomato.com Keeps me informed of what great movies are..
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________
________________________________________________________________________________________

LESSON PROPER

WYSIWYG

- Acronym for “What You See, Is What You Get”. This means that whatever you type, insert, draw,
place, rearrange and everything you do on a page is what the audience will see. Like using the MS Word,
WYSIWYG shows and prints whatever you type on the screen.

CREATING A WEBSITE USING A MICROSOFT WORD

1. Open Microsoft Word

2. Type anything on the page like “Welcome to my Website”
3. Click on the File > Save As > Browse.

15
4. On the Save As dialog box, locate your activities foder and create a new floder named “Sample Web
page.”
5. Specify the filename “Sample Web page.”
6. On the SaveAs type, select “Web Page (*.htm; *.html).”

7. Click the Change Title button.

8. Input the title as seen below, then click OK the Save.

16
 9. Check the files on your sample Web Page folder. You will see a new folder generated including your
.htm or .html file.

10. Open the Sample Web page.htm file and you will see that you just created a web page using MS Word.
Tip: Any file inside the Sample Web page files folder is generated by MS Word. These are the files that
make HTML

CREATING A WEBSITE USING A JIMBO

JIMDO - is a WYSIWYG web hosting service. It offers free, professional and business services. Jimdo
also has IOS and Android app which you can use to manage your website whenever you do not have access
to a PC.

1. Create an account by going to www.jimdo.com and clicking create your free website.

17
2. You will be instructed to choose a template. Pick any template that you want.

3. Choose a URL for your website. Enter your email and password.

18
 4. Your website will be generated and soon you will end up in the sites WYSIWYG editor.

5. The editor is pretty easy to use. The center shows the preview of your website. The design tools is
located on the right.

Tips in using the WYSIWYG editor by default, the home page is shown on your editor. To navigate to
another page, simply click the page title on your navigator. The site navigator contains a set of links going
through the different pages of your website. The navigator currently available to you depends on which
template you used.

Inserting a Page

1. Stay your mouse pointer over the site navigator. The Edit Navigation button will appear.

2. Click on the Edit Navigation button. Click on Add a New Page.

19
 3. Rearrange pages using the tools on the right of the page title.

4. Click Save when done.

A. Editing Elements

Hovering over a text, image, or any element using on the website will highlight the element.

Move element up - use to move the element up by one level

Move element down- use to move the element one level lower

Delete element- use to remove the element

Copy element- use to copy the element

Drag tool- click and drag the element to a valid part of the page

I. Header - If it is a header, clicking the text will allow you to edit the text and change its font size.

II. Image - If it is an image, several options will also appear. It also allows you to upload an image
directly from your computer or a Dropbox account.

20
 Sizing Tools- used you make image larger or smaller or restore
to actual size page

Align Tools- used for left, right, and center alignment page

Rotate Tools- used to rotate image clockwise or

counterclockwise

View tools – used to enable enlarge image, link photo, and

remove link (Tip: Enable enlarge image will show a small image
on the page and will only be enlarge when a user clicks it. Link
photo allows you to insert an image from another website or
image host like Photobucket.)

Other tools- caption and alternative text; allows sharing to

Pinterest

Tip: Alternative text refers to the text that will be shown if the emerge does not load

III. Paragraph - If it is a paragraph, you will be treated to even more options similar to using a word
processor:

B. Adding Elements

1. To add elements on screen, hover the mouse pointer over the top or bottom of an existing element until the
Add Element button appears.

21
2. Select the visual elements you want to add:

a) Heading - to insert heading type of text

b) Text - to insert a paragraph type of text
c) Photo - to insert a single photo
d) Text with photo - to insert a photo surrounded with text
e) Photo gallery - to insert multiple photos on one area
f) Horizontal line - to insert a horizontal line that acts as a divider
g) Spacing - to add a space with a specified size
h) Columns - to insert columns that divide an area vertically
i) Video - to insert a video from a video hosting site like YouTube
j) Form - creates a send an email form for feedback
k) Store items - adds a space for selling an items (online shopping)
l) Share buttons - adds buttons for the site visitor to share your website
m) Additional element - includes other options like Google Maps, File download, widgets and etc.

3. Edit the element to your liking then click Save.

22
C. Site Settings

Templates - changes the design templates selected

Style - changes the design style of the page (color)

Blog - creates a blog for your website

Upgrade - upgrades to JimdoPro or JimdoBusiness

Settings - changes account and website settings

SEO - search engine optimization; used for others to easily find your site using search
engines like Google and Blog

Store - manages the orders made from your website

Statistics - views your sites statistics

Help - accesses Jimdo’s help archieved

D. Settings

The Settings options contains important information that you should edit to make the most out of your
Jimdo website.

• The Account Settings includes changing you password, email, and personal profile.

23
• The Website options allow you to change your • The SEO option is a premium feature that
site title and footer; checks your storage; maximizes the search engine optimization
creates your privacy policy and your favicon feature of Jimdo so visitors can easily locate
(the icon of your website shown on a browser). your websites.

• The Apps option contains settings for embedded

apps for your website like Dropbox, QR Codes,
Google Analytics, and Twitter

• The Mobile Settings is used to prepare your

page for mobile devices

• The Jimdo Settings allows you to remove the

Jimdo Box on your website (premium feature)
and check Jimdo news

• The Email and Domain Management Settings

is a premium feature. It is used to manage
email accounts for your website.

• Once youre done editing the settings, go to your

site’s URL using a browsers of your choice.

• The Store Settings allows you to manage the

items you sale on your website.

24
 POST-ACTIVITIES

Activity # 21: Getting Hands On

Together with your groupmates from the infographic activity, choose any kind of program or TV show –
a movie, an anime, an asian or hollywood series, that you all really really like watching. Using Microsoft Word,
create a website that contains your reviews about the program or show you chose. The following should be
included to the website you will make.

- The main plot of the series/program/show

- The main characters (protagonists and antagonists) in the series/program/show
- The setting of the series/program/show
- The mood and/or theme of the series/program/show
- Your own review about the series/program/show (What can you say about the program? How do
you all feel about the series when you watched it?)

Note: Insert pictures and other materials (shapes for the design, etc.) in the website you will create.
Don’t forget to include the link of the pictures and the informations you copied from the internet.

Submit your output to my Gmail account, [email protected], following this file name:
GROUPNAME-STRAND/SECTION-ReviewWebsite.

25
 REFERENCES

1. BOOKS

A) Rex Book Store

o Empowerment Technologies (Innovative Training Works, Inc)
o Pages 99-156
o Author: Innovative Training (IT) and Education Professionals
o Publishing Address: 856 Nicanor Reyes, Sr. St. Manila, Philippines

2. GOOGLE

Regis, Joyce. “Empowerment Technologies.” https://ictcom444251764.wordpress.com/2018/03/31/-

empowerment-technologies-lessons-1-15/. Viewed on Aug. 13, 2020. Time: 01:23pm

26