COLEGIO DE SAN ANTONIO DE PADUA

Ramon M. Durano Foundation Compound

Guinsay, Danao City, Cebu

MODULE
IN
EMPOWERMENT TECHNOLOGY

Prepared by:

MS. ROSE ANN B. CASAS

MS. GERALDINE P. DELA CRUZ
SHS-Teacher

2020

1
 Table of Contents

Module Page Date

Number

Module 3: 3 March 4, 2021

Lesson 1: 4 March 4 - 5, 2021
Learning Experience/Content 4 March 4 - 5, 2021

Lesson 2: 10 March 8-9, 2021

Learning Experience/Content 11 March 8-9, 2021

Lesson 3: 18 March 10-11, 2021

Learning Experience/Content 18 March 10-11, 2021

Reflection/Wrap-up 23 March 12-14, 2021

Learning Activity 1 24 March 15, 2021

Learning Activity 2 25 March 16, 2021

Learning Activity 3 26 March 17, 2021

Self-Assessment 27 March 18, 2021

Learning Activity 1 28 March 19, 2021

Learning Activity 2 29 March 22, 2021

Learning Activity 3 30 March 23, 2021

Self-Assessment 31 March 24, 2021

Learning Activity 1 32 March 25, 2021

Learning Activity 2 33 March 26, 2021

Learning Activity 3 34 March 29, 2021

Self-Assessment 36 March 30, 2021

2
 MODULE 3
Manipulate Text, graphics, and images to create ICT
content
Introduction

This module covers three lessons on how to manipulate text, graphics and images in
different platforms on ICT. It contains every lesson a three learning activity and one self-
assessment. Imaging and Design for Online Environment is an online graphics and layouts that
taught me many effective things in order for me to use image design and its advantages. In this
lesson I had learned the basic principles of graphics and layouts. It has balance, emphasis,
movement, pattern, repetition and rhythm, proportions, and variety.
The lesson taught me many effective things in order for me to use image design and its
advantage. I understood that the basic principles of graphics and layout are so simple and it is
easy to use. It helped me also on how to create a creative Infographic Information graphics
or infographics are graphic visual representations of information, data or knowledge intended to
present information quickly and clearly. They can improve cognition by utilizing graphics to
enhance the human visual system’s ability to see patterns and trends. I can now understand and
use several file formats used on the web namely jpeg, GIF, PNG etc. It also taught me on how to
easily manipulate images. The online platforms, basic web creation and the ICT development.

3
LESSON 1
A. Title: Imaging and Design for Online Environment
B. Learning Objectives
1. define inforgraphic, piktochart, photoscape and photobucket
2. cite the different principle of graphics and layout
3. enumerate the different file formats used on the web
C. Learning Content

Image is a representation of the external form of a person or thing in art.Images may be 2-

dimensional, such as a photograph or screen display, or 3- dimensional, such as a statue or
hologram. They may be captured by optical devices – such as cameras, mirrors, lenses,
telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or
water.
Graphics are visual images or designs on some surface, such as a wall, canvas, screen,
paper, or stone to inform, illustrate, or entertain. Are visual representations of data made on a
computer and is displayed on a computer screen or monitor.
The process of planning and arranging graphic element in a page or template. A good
layout should have a balanced make up and alignment of elements. Layout is part of graphic
design that deals in the arrangement of visual elements on a page.
Examples of Graphics:
 Photographs
 Drawings
 Line Art
 Graphs
 Diagrams
Layout is part of graphic design that deals in the arrangement of visual elements on a page.
Basic Principles of Graphics and Layout
o Balance– The visual weight of objects, texture, colors, and space is evenly distributed on
the screen.

4
o Emphasis– An area in the design that may appear different in size, texture, shape or
color to attract the viewer’s attention.

o Movement– Visual elements guide the viewer’s eyes around the screen.

o Pattern, Repetition, and Rhythm– These are the repeating visual element on an image
or layout to create unity in the layout or image. Rhythm is achieved when visual elements
create a sense of organized movement.

5
 o Proportion– Visual elements create a sense of unity where they relate well with one
another.

o Variety –This uses several design elements to draw a viewer’s attention.

INFOGRAPHICS Information graphics or infographics are used to represent information,

statistical data, or knowledge in a graphical manner usually done in a creative way to attract the
viewer’s attention.

Infographics

o Visual presentations of information that ise the element of design to display content.
o Express complex messagesto viewers in a way that enhances their comprehension.

6
 o Basically using pictures, objects, and images in a way for the viewers to easily
understand the message of a topic.

Creating inforgraphics using piktochart

1. Create a Piktochart account by going to www.piktochart.com and click sign up on
the upper right corner of the page.
2. Fill out the Sign Up page with the information needed, alternatively, you can
connect with Google+TMor Facebook.
3. Once you have created an account and logged in, Click Create New on the upper
right hand corner of the screen then select Infographic then a Template that you
want.
4. The Piktochart editor will open (may take a while to load depending on your
Internet Connection). The Dashboard contains your previously created visuals. On
the left hand corner contains your options of what visual you want to create:
Infographics, presentation or printables. For noew, select infographics.
5. While editing a block, you can use the various tools on the left side of the page.
a. Graphics – allows you to insert lines, shapes, icons and even photos.
b. Uploads – allows you to browse and upload images from you local sidk
for your infographics.
c. Background – changes the background of a selected block.
d. Text – allows you to insert text to your infographicswith the option to ass
text frames
e. Color Scheme – allows you to modify or create new color scheme of your
infographic
f. Tools – allows you to create charts(similar to the ones in PowePoint),
maps (for demographics), and videos.
6. To save your work, click Saved button on the top right of the page. To save it
in your computer, click on Download.
In the Download options, select the medium quality and the PNG file format.
Online Image File Formats
Unlike images that are found in our computer, you have to consider that website images
should be more compressed because data travels over the internet and not everyone has a fast
Internet connection. Consequently, we have to use compressed images on our websites.
Likewise, even though a wide variety of websites already support high-definition (HD) photos,
you do not have to use HD all the time. In fact, most of the time, you do not really have to.
The following are common image file formats used on the web.

Name File Extension Use Supports Supports

7
 transparency animation
1. Joint .jpeg Real-life No No
Photographic photographs,
Experts Group high
compression
2. Graphics .gif Computer- No Yes
Interchange generated
Format graphics
3. Portable .png Screenshots, Yes No
Network Graphics high
compatibility
There are plenty of other image file formats used in the web but most of the time you will
be using these three because of their compatibility withh all major web browsers.

Principles and Basic Techniques of Image Manipulation

Most of the time, we just capture an image and upload it on our facebook account. From
there, Facebook does the rest by formatting our image to best fit the standard set by Facebook.
But once you create your own website, you will have to edit your images.
Here are some tips to help you edit images for your websites:
1. Choose the right file format. Try to make a real-life photograph into GIF
to see the difference between PNG, GIF and JPEG. Knowing the purpose is the
key to finding out the best file format.
2. Choose the right image size. A camera with 12 megapixels constitutes to
a bigger image size. Monitors have a resolution limit, so even if you have a
million megapixels, it will not display everything.
3. Caption it. Remember to put caption on images whenever possible. If it is
not related to the web, then remove it.

Creating and Manipulating Images Using PhotoScape

There are plenty of image manipulation tools but if you are going to create a website, you
have to use he one which is efficient. PhotoScape is a good tool because it is feasible for
beginners and advanced users alike.
On PhotoScape main screen, you will see its various features that you can use for creating
web content as follows:
1. Viewer – picture viewer that has the same features with most image viewers.

8
 2. Editor – alters the appearance of a single image.
3. Batch editor – alters the appearance of multiple images
4. Page – arranges several photos to create a single one; similar to a mosaic.
5. Combine –links several images together to form a bigger image
6. Animated GIF – allows you to create an animated GIF from several pictures
7. Print – readies pictures for printing
8. Splitter – divides a single photo into multiple parts
9. Screen capture – captures the screen and saves it
10. Color picker – grabs a pixel from your screen to be used in editing
11. Raw converter – converts RAW images (uncompressed images usually from digital
camera) to JPEG
12. Rename – allows user to rename a batch of photos
13. Paper Print – useful tool for printing your own calendars, sheets, lined paper, graph
paper, etc.
Editor Edit
For this exercise, take a photo from your camera. It can be a “selfie” a “groupie” or a
random photo. Make sure that you are the one who took it and that it is worth spending time with
editing. Once you have it ready, place it in your computer in a directory most convenient to you.
1. Open PhotoScape then choose “Editor.”
2. Choose the folder where the image you want to manipulate is located using the
file explorer on the upper left.
3. Once you have selected the folder, you will see a preview of all the images found
on that folder at the bottom of the file explorer.
4. From the preview, select the image you want to use. The image will now be
shown on a much bigger preview inside your work area.
5. Notice the properties of the image like the file name, the image size and the file
size found on the bottom of the preview.
6. Manipulate the image using the tools on the bottom.
a. Home Tab – This is where you can add a frame, resize, sharpen and add filters
and effect to your image.
b. Object Tab – this is where you can place a wide variety of images like texts,
shapes and symbols.
c. Crop – this is where various tools can be found in order to properly crop an
image to a desirable size.
d. Tools – includes other tools like red eye correction, mole removal, mosaic,
effect and brush tools.
7. Click Save located on the lower right of the program. The Save As dialog box
will appear. Save it in your activities folder with the file name editorexer.jpg.
Check the file size and see how much space you saved.

9
Batch Edit
Batch editing is one of the most useful tools when trying to easily manipulate all
images at the same time. This is most useful when you create a gallery of photos for a website.
For this exercise, you will need to take at least ten pictures and save in your desired folder. It is
highly recommended that your photos share the same orientation (portrait or landscape).
1. Select the folder where your photos are located, then on the Preview window, drag
the photos you want to be part of the batch edit to the work area.

2. Use the tools on the right to edit your photo. This is similar to the options in edit
except the Crop and Tools tab which are replaced by the Filters tab. The Filters tab
is used to add a certain filter that will apply to all your photos.
3. Resize the pictures so that they do not exceed 800 pixels in width. Add filters if you
want.
4. Click on Convert All button found on the upper right.
5. The Save dialog box will appear, which will allow you to change the location, the
name of the image and the file type. Since we are working on photographs, we are
going to keep it as JPEG.

Inserting, Uploading and Sharing Photos on the Internet

Sharing your photos on the internet is so easy using social media. However, it is highly
recommended to put your social media photos private and separated from the ones posted on the
internet. In that case, you need an image host. Image hosts are websites specializing in storing
photographs. These photographs can easily be embedded to a web page or website.
There are plenty of image hosting sites out there; some of them have fee where you can
pay for more storage space or bandwidth.

10
LESSON 2
A. Title: Online Platforms for ICT Content Development
B. Learning Objectives:
1. define online platforms and cloud computing
2. differentiate the platforms available for developing web content
3. determine the purpose of these platforms and know the basics of using the
4. enumerate the advantages and disadvantages of cloud computing
C. Learning Content:
We will focus on the platforms that will allow us to share our own content to the rest of
the world. We will also create few of them to experience what it is like to use all of the.
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 which means that no matter the
agenda of your page, it will look the same as other pages. This design feature is also present in
other social media platforms like Google+.
2. Blogging Platforms. Website 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.
Online platform is a specially developed platform using Internet technology. Online
platforms have revolutionized access to any information. In our daily life today we used Internet
in doing such things and in our learning purposes. 

1. FACEBOOK

Facebook is the biggest and the most popular social platform in the Internet. It is commonly used
by students and is a gaining ground among professionals too.

 Marketplace – allows users to post, read and respond to classified ads.

 Groups – allows users who have common interests to discover each other and interact.
 Events – allows users to publicize an event, invite others users and track those who plans to
attend.
 Pages – allows users to create and promote a public page built around a specific and chosen
topic.
 Presence technology – allows users to see which contacts are online and possible to chat
asap.

11
2.  INSTAGRAM

Instagram is an online mobile media-sharing site that allows users to share pictures and videos
either publicly or privately on the app. Journalist commonly uses this online platform.

3. TWITTER

Twitter is an online news and social networking service where users post and interact with

messages, “tweets,” restricted to 140 characters. Registered users can post tweets, but those who
are unregistered can only read them.

CONTENT MANAGEMENT SYSTEM

Content Management System (CMS) is a computer application thatallows one to publish, edit
and manipulate, organize and delete web content. It is commonly used in blogs, news websites,
and online shopping.

Creating Your Own Blog Using WordPress

1. If you do not have a WordPress account yet, sign up by visiting https://wordpress.com/.
2. If this is your first time to visit WordPress, then click on “Get Started” on the upper right hand
corner of the page.
3. Once you clicked on Get Started, fill in the details of the Let’s create a site form. Just note that
in WordPress, you can create multiple blogs. For this part, assume that you will create a personal
blog.
4. Now think of a name for your site address. Think about it carefully as it will be part of your
URL. If you are done, a list will appear showing you the available domains that you can use.
Since we are just practicing your blogging skills and are not ready to spend real money, choose
the free option. Your blog URL should look like this: yourblogname.wordpress.com
5. Choose the free plan as seen on the next screenshot.
6. On the last step, fill in the details to create your account.
Once you have logged in, you will see your dashboard containing two tabs, the “My Site”
and “Reader”. My Site includes controls regarding your content that you post, whereas “Reader”
allows you to see articles from other blogs including the ones you follow. For now, make sure
that you are on the “My Site” tab, simply by clicking the correct tab. You should see your
browser.
On the left, you will see the name of your blog and on the right side includes statistics. If
you have an old blog, you will see different statistics about the posts you have made.

12
Adding another blog on your account
In case you do not like the blog you made or you already have a WordPress account and
want to make another blog, please follow these steps.
1. Click switch site located at the upper left of the page:
2. Then click on add new Site.
Customizing Your Blog
As a new blog owner, you might want to change a
1. To see these settings, make sure you are in the My Sites Tab and your correct site is selected.
Click "Customize" under Personalize. (Note if you just want to change the theme of the site, you
may click "Themes instead).
2. You will see the customizer.
 The screen is now divided into two parts; the right part is obviously your blog. If you
already posted something, you will see it there as well. Over to the left are the controls.
Customizer Controls
 Site Identity-includes options of changing your site's title, tagline
site icon, and footer credit
 Colors-changes the header text color and the background color
 Fonts- change the default fonts for headings and content
 Header Image- changes the image at the top of your page. There are also suggested
headers you can use.
 Background Image-changes the image of the page's background
 Menus-shows the navigation bar and the pages that will be accessible at the top of your
page
 Widgets -add-ons to the site, like a Twitter sidebar, calendar, and clock, among others
 Homepage Settings allows you to have a static front page, meaning that visiting the
site will make visitors see a static web page rather than your dynamic blog (Your blog
is dynamic because every time you publish a post, it changes).
 AMP - stands for Accelerated Mobile Pages. This allows you to change the design for
mobile devices for it to load faster.
3. Go ahead and change these settings to your heart’s content.
4. Once you are done customizing, click the “Save and Publish” button on the top of the
controls.
 Note: If the button indicates “Saved”, it means that previous changes were already
saved and published. To check, you may visit your blog’s URL.

13
5. If you do not want to make small changes, you may choose to change the theme as instructed
on Step 1. Make sure you browse the "Free” section by clicking the button as illustrated below:
6. Click a design that you want, then on that design's page, click "Activate this design". If you
are still unsure about the design that you picked, you may choose to click "Open Live Demo”
which shows you how a site will look like with that theme.
Creating a Blog Post
Now that you are done with the design of your blog, it is now time for the important stuff: the
blog posts! Creating a blog post is pretty straightforward in WordPress.
1. Click "Write" on the upper right corner of your dashboard.
 Note: On this screenshot, you will see the number "8". That indicates how many
drafts you have made on your WordPress account.
2. Once you click on the “Write” button and you have multiple blogs, you will see a drop-down
menu of all your blogs. Click the blog where you want your post to appear.
3. This will show you a page similar to a rich text editor.
4. The controls in the text editor are something you may have already encountered in MS Word.
Take note of the two tabs: Visual and HTML. The Visual is your typical rich text editor; the
HTML is the code. This is ideal for inserting HTML codes from YouTube. More on that in a
future lesson.
5. On to the right is the "Post Settings" icon. It includes the following settings:
 Status – changes the time and date shown of when the post was posted. This also
includes option if you want stick the post to the front of your blogs regardless of
when it was posted.
 Categories and Tags – are important in organizing your posts. If used properly,
readers can easily click on a category to see all posts related to it.
 Featured Image – set a featured image as part of your post.
 Sharing – allows you to share your posts to other social media accounts. You will
need to link your other social media accounts to WordPress to do this.
 Post Format – changes the format of your post to better suit its content.
6. Create a welcome post about the new blog you have just created. Tell you readers what they
will expect from you and what topics you are ready to post in the future.
7. Make sure you put your post in a category. You can easily add a category whenever you post.
8. Tags make your post easy to search for. Add specific keywords that relate to your post.
9. Once you are done, you may preview your post or click the publish button on the upper right
corner of the page if you already want it to appear on your page. Do not worry, you may still edit
or delete your post in the future.

14
Other Site Options
WordPress offers more options for you to discover. Simply go to the "My Sites" tab and explore
the options to the left. Here is a brief explanation for each of them:
a. View Site - shows a preview of your site;
b. Plan-option where in case your blog grows in the future, you may opt to change your plan to
other paid subscriptions
c. Blog Posts -allows you to add, delete and edit blogs posts;
d. Site Pages- allows you to add, delete and edit pages on your blog;
e. Media-allows you to add images, documents, videos and audio. WordPresSoffters up to 3GB
space for a free account;
f. Comments-view the audience comments done on your blog posts
g. Customize- allows the editing of the site's look;
h. Sharing- allows you to connect your blog to other social networking sites;
i. People- allows you to collaborate with other people in working with your blog;
j. Plugins - these are add-ons/tools that will enhance your blogs popularity, security, appearance,
and posting options. Some plug-ins are only accessible through a paid subscription;
k. Domains-allows you to purchase domains tor your blog
l. Settings-includes settings for your blog that involve your experience while writing a blog post
and your reader's ability to interact with your K. page (such as commenting); and
m. WP Admin - contains more options for your blog. This is recommended for advanced users.
There are plenty of things you can do with a wordPressDiog- Even if you do not have a
PC available, you can download wordPress on your smartphone or tablet! Make sure you try it
out so you can easily post or create a draft even when you are not at home or in school.
Cloud Computing
We already mentioned the term "cloud computing in the previous discussions From the
past lessons, including this one, you have already used the "cloud" in producing a number of
output for this class. Give yourself a minute to think about this output that used "cloud
computing .
When we created infographics, we used Piktochart, which has an infographic editor that
uses cloud computing. The same goes in making your own blog and creating your first post: you
used the editor from WordPress. These are referred to as cloud computing because we did not
need to install any software in our computer. The software is in the "cloud" or on the Internet.
The following are some advantages and disadvantages of cloud computing.

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

16
LESSON 3
A. Title: Basic Web Page Creation and ICT Development
B. Lesson Objectives:
1. define cascading style sheet, hypertext markup language and web portal
2. explain the acronym WYSIWYG
3. steps of creating a website using MS WORD
4. cite the online collaborative tools
C. Learning Content
How basic is basic? Imagine the way our ancestors do fishing. They used fishing rod or spear to
catch fish. Today, huge companies rule the fishing industry with their huge fishing vessels with
huge nets to catch fish by the truckload. Unfortunately, those fishing vessels are not affordable
so we will still be using our fishing rod or spear. However, that is not the case in web page
creation. First, the Internet is free. Second, it is of free courtesy of many website providers that
provide basic functionalities for our website to function. Back in the day, you actually have to
learn HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) to be able to
create a decent website. Today, we will use a WYSIWYG editor.

17
WYSIWYG
WYSIWYG is the 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 are what the audience will
see. Like using the Microsoft Word, WYSIWYG shows and prints whatever you type on the
screen.

Other Ways to Create a Website

As mentioned earlier, people use HTML codes to create pages and CSS codes to design them. If
you have taken up these coding skills before, it will help you in creating pages using
WYSIWYG. If you have not, WYSIWYG is designed for anyone who has not or does not have
prior coding skills.
Creating a Website using Microsoft® Word
1. Open Microsoft® Word.
2. Type anything on the page like “Welcome to my Website”.
3. Click on File > Save As > Browse.
4. On the Save As dialog box, locate your activities folder and create a new folder named
“Sample Web Page”.
5. Specify the file name “Sample Web Page”.
6. On the Save As type, select “Web Page (*.htm; *.html).
7. Click the Change Title button.
8. Input the title as seen below, then click OK then Save.
9. Check the files on your Sample Web page. 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.

You have just created a web page using Microsoft Word-a technique you can also apply
using Microsoft Excel. These office applications can be used as a WYSIWYG platform. The

18
next step is uploading these files to a web server. However, we will skip that step because we are
going to use a much easier approach in creating websites. We are going to use an online
application that is actually designed to create websites.
Creating your own Website using Jimdo
Jimdo is a WYSIWYG web hosting service. It offers free, professional, and business web
hosting services. Jimdo also has an iOS and Android app which you can use to manage your
website whenever you do not have access to a PC.
For this exercise you will create your own personal website that focuses on your passion
or hobby.
1. Create an account on Jimdo by going to www.jimdo.com and clicking "START NOW”.
Optionally, you may also download the official Jimdo App on your iOS or Android device.
2. Input your email address, create a password and check “I’m not a robot". You may also
review the terms o f use and privacy policy. Afterwards, click "Let's do this!
3. Select website as the kind of website you want to create.
4. Choose Make your own website with Jimdo Creator. Then skip the question about what
website you would like to create.
5. You will be instructed to choose a template. Pick any that appeals to you. Do not worry, you
can still change this later.
6. Select FREE when asked Jimdo account is right for you.
7. Select the website address that you want. Though there are options for a professional domain
or a domain you already own, ignore them and choose to use a free Jimdo.com subdomain. This
means that your website will be something like hellopenz.jimdo.com
8. Wait for the page to load (it may take a while). This will load the website editor wherein you
can get a chance to modify the website to your liking. This is called the WYSIWYG editor.
To use the editor, simply click on the element you want to change whether it 1s the
navigator on top, the texts, or images. Almost everything can be changed.

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 you depend on which template
you used. A sample of a navigator is shown below:

19
Inserting a Page
1. If it is not yet visible, hover your mouse pointer over the site navigator, theEdit Navigation
button should appear. Note that some site navigators may be located at the side of your page.
This depends on the template your selected.
2. Click the Edit Navigation button. Click Add a new page. Name your new page to anything
you like.
3. Rearrange, add, delete or hide pages on your website by using the icons next to pages name.
Use the arrows on the Edit Navigation to rearrange the pages. Arrows horizontally would move
your page under the page above it.
4. Click Save when done.

Editing Elements
Hovering over a text, image, or any element you see on the website will highlight element.
Move element up- used to move the element up by one level
Move element down -used to move the element one level lower
Delete element - used to remove the element
Copy element-used to copy the element
Drag tool- click and drag the element to a valid part of the page

Clicking on an element will show more options regarding on what visual element you
clicked:
A. Header-If it is a header, clicking the text will allow you to edit the text and change its
font size.
B. Image – If it is an image, several options would also appear. This will also allow you
to upload an image directly from your computer. Click the image you want to edit and these
options will appear.
1. Edit Image -new feature of Jimdo that
allows the user to modify an image by adding
effects enhancements, frames, overlays and
many more. It is an easy access tool so that
the user does not have to edit images on a
photo editor.

20
 2. Sizing Tools -used to make the image
larger, smaller, or restore to actual size of the
added image.

3. Align Tools-used for left, right, and center

alignment.

4. Rotate Tools- used to rotate image

clockwise or counter-clockwise.

5. View Tools used to enable enlarge image,

link page.

Tip: Enable Enlarge Image will show a small

image on the page and will only be enlarged
when a user clicks it. Link Photo allows you
to insert an image from another website or
image host like Photobucket.

6. Other Tools-caption and alternative text, allow

sharing to Pinterest.

Tip: Alternative Text refers to the text that will be

shown if the image does not load.

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

21
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 appear.
2. Select the visual element you want to add:
a. Heading – to insert heading type 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 a 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 Item – adds a space for selling an item (online shopping)
l. Share Buttons – adds buttons for the site visitor to share your website; and
m. Additional Elements and Add-ons – include other options like Google Maps, filed
download, widgets and even add-ons like allowing your visitors to sign up for your newsletter,
adding a music player, and adding Instagram to your website.
Jimdo WYSIWYG Menu
The Menu button located at the upper left of your WYSIWYG website gives you more tools that
you can use. These are tools that are not usually seen by visitors but are essential for a website
creator like you.
1. Dashboard allows you to view the other websites you created with Jimdo and edit them.
2. Design - allows you to change your template, style, background, and even customize your
template. Templates are ready-made websites; on the other hand, styles are the colors and fonts.
3. Store - this contains the orders made on your site it you placed items available for purchase.
This also contains options regarding an e-business like providing your store address, adding
payment options, adding shipping costs, setting terms and return policies, emails and text
options, customizing the checkout form and the confirmation page.

22
4. SEO (Search Engine Optimization)-enables people to easily find your site using search
engines. Unfortunately, viewing the statistics of your page is a premium feature, but you can still
optimize your website using the options under setting
5. Domains and Email - helps you setup the domains and emails that your sites use, Since you
are using a free account, your access to new domains and emails are limited.
6. Settings involves domains, email accounts and email forwarding features of your site. Most
features are limited since we are using a free account. This also contains other options regarding
your site like copyright, tooters, password protected areas, Twitter integration and storage space
just to name a few.
7. Questions- premium feature that allows you to ask questions to the Jimdo support team. This
also contains a link to the Jimdo support center which you can use for free.
Facebook would not be that interesting if it were not for all your friends. In fact, the more
friends you have, the more content you get. This also rings true tor other websites and blogs.
Now, it is time for us to create a collaborative ICT content.
A web portal is a website that contains information from different sources and places
them in one location in a uniform way. An example of a web portal is Yahoo! (www.yahoo.com).
Yahoo.com offers a web portal where news, email, weather, etc. are found in one page. The
information found in the image came from different websites/sources.
Online Collaborative Tools
Working together does not necessarily mean you have to be physically together. These tools can
help your group “go the distance and work as if you already have your own office.
There are plenty or online collaborative tools:
1. You can use Facebook groups to create a group page that will allow people in your group to
communicate your ideas.
2. WordPress also allows multiple contributors for a single blog.
3. Google Drive and Microsoft Office Online allow multiple people to work on different office
files and even have their own group's cloud storage.
4. Microsoft's Yammer offers companies to have their own social network that allows sharing
and managing content.
5. Sites like Trello offer an online to-do checklist for an entire team.
To use Trello for online collaboration, follow the steps below:
1. Create a Trello account by going to their home page https://trello.com/) and click "Sign Up."
Fill out the form and then click Create New Account.

23
2. Once you have signed up and logged in, click on Create a New Team if you have multiple
boards already, it will be found on the bottom of the page.
For steps 3-6, only one person should do this, preferably the group leader.
3. The Create a New Team option will expand. Fill it out with the information of your group.
Afterward, click Create.
4. You will be taken to the organization’s page. To add members, click on the Members tab.
5. Click on the Add Members button. Input a member’s Trello name or email address or if the
team members has not signed up for Trello yet, you can invite them just by simply adding their
email. They will get an invitation which will require them to sign up. Click Send when done. Do
this again until you have sent an invitation for all members.
6. Once you are done inviting, go back to the Boards tab and under My Org Boards, click on
Create NewBoard.
7. Create a new board tor the task named Jimdo Site. Name it and use the default options then
click Create.
8. You will be taken to the newly created board. Click on Add a List to add tasks to be done by
your group. For now, add one task named Create a Jimdo Account.
9. Add a card under this with the label containing a description.
10. Click the down arrow on the lower right to view more options.
 Members – tags members on the card
 Labels – adds label found on top of the card
 Position – arranges the position of the card in relation to other cards
11. After setting those options, click on the card itself to bring up more options.
12. Any input you place in this card will be viewed by anyone. You can also use the options on
the right to add members, edit labels, put a checklist, add a due date and attachment (like photos
and office documents). Going back to the board will show that the card is updated.
13. All members should have a list of tasks under their position. The leader should arrange these
tasks according to priority (due dates). Make sure all tasks are covered.

24
Reflection/Wrap up
WYSIWYG stands for What You See Is What You Get. It is an editor that allows you to
create and design web pages without any coding knowledge. You can use Microsoft Word and
Microsoft Excel as WYSIWYG editor Jimdo is a WYSIWYG web hosting service offering free
and paid services. It has an android and iOS application that lets you manage your site on cell
phone. Jimdo WYSIWYG editor is easy to use. Just click on an element to edit it. You can also
add a page by just hovering over the navigation bar and clicking edit navigation. You can also go
to another page by simply clicking on the page link like you would normally do when navigating
through a website. Jimdo has tools that will allow you to sell your product online, create your
own photo gallery, add Videos, and many more. You can also maximize search engines by
properly tagging your site.
Web Portal is a website that contains information from different sour a places them in
one location in a uniform way. There are plenty of online collaborative tools that an organization
or group can use communicate through the use of the Internet. Facebook groups, WordPress,
Google Drive and Microsoft" Office Online, Yammer, and Trello can all be used as a tool tor
online collaboration. Trello introduces boards where any member of the organization or group
can see the different tasks for a certain project. Trello is a free service. Visit trello.com to sign
up.

25
Name: __________________________ Date: _______________________________

Subject: __________________________ Teacher Name: _______________________

Learning Activity #1. Essay

Direction: Given the question below. Write your answer on the space provided.

“What was the most important thing you learned to our topic?

Name: __________________________ Date: _______________________________

Subject: __________________________ Teacher Name: _______________________

Learning Activity #2: Differentiation

1. Piktochart vs. PhotoScape

2. Proportion vs. Movement

3. JPEG vs. GIF

4. Home Tab vs. Object Tab

5. Variety vs. Balance

26
Name: __________________________ Date: _______________________________
Subject: __________________________ Teacher Name: _______________________
Learning Activity #3: Essay:
1. What are the limitations of PhotoScape compared to other image editors?

27
Name: __________________________ Date: _______________________________
Subject: __________________________ Teacher Name: _______________________
Self-Assessment #1: Modified True or False:
Direction: Write T if the statement is True and if False underline the wrong word and supply the
correct answer.
1. Variety uses one design elements to draw a viewer’s attention. _____________

2. Infographics is also called an information graphics. ______________

3. Emphasis is an area in the design that may appear different in size, texture, shape or color to
attract the viewer’s attention. _____________

4. The Dashboard contains your present created visuals. _____________

5. The graphics allows you to insert lines, shapes, icons and even photos. ____________

6. The tools allows you to create charts (similar to the ones in PowerPoint), maps (for
demographics), and videos. _____________

7. The crop is where you can place a wide variety of images like texts, shapes and symbols.

8. Infographics used to represent information, statistical data or knowledge in a graphical

manner. ____________

9. Simple creates a Photobucket account and you can start unloading pictures and share them to a
wide variety of platforms. _____________

10. Batch editing is one of the most useful tools when trying to easily manipulate all images at
the same time. _______________

28
 Name: __________________________ Date: _______________________________

Subject: __________________________ Teacher Name: _______________________

Learning Activity #1: Essay

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

2. What basic principle of design did you follow in your blog layout? Explain

Criteria 3 2 1

Content The content is very The topic is satisfactorily The topic is expressed but is not
satisfactorily discussed and discussed and articulated. articulated satisfactorily.
(x3) articulated.

Organization The ideas are arranged in a The ideas are expressed but The ideas are somewhat expressed
logical and reasonable order. details are not complete. but are not reasonably arranged.
(x3)

Grammar Sentences are well-structured There are three to five errors There are more than five errors in
with no errors in grammar. in grammar. grammar.
Mechanics

(x2)

Word Choice The words are appropriate to Some words are not Most words neither are nor
the topic and level of usage. appropriate to the topic and appropriate to the topic and level of
(x1) level of usage. usage.

Overall Appearance The output is clean and The output has marks which The output is not all appealing to its
presentable. are distracting. intended reader because it looks dull
(x1) and unpolished.

29
Name: __________________________ Date: _______________________________
Subject: __________________________ Teacher Name: _______________________
Learning Activity # 2: Picture Analysis

1. Give at least 5 benefits of blogs.

2. Give at least 5 advantages of blogs.

30
Name: __________________________ Date: _______________________________
Subject: __________________________ Teacher Name: _______________________
Learning Activity #3: Enumeration
1-5.) Enumerate at least 5 other site options.

6-10) Enumerate at least 5 different Social Media Platforms

11-15) Enumerate at least 5 customizer controls.

31
Name: __________________________ Date: _______________________________
Subject: __________________________ Teacher Name: _______________________
Self-Assessment #1: Rearrange the following steps in chronological order by numbering them
from 1 to the last number of the steps. Write X if the step does not belong. Write your answer on
the line before each item.

A. Creating your own free Blog using WordPress

_______ Select “Start with a blog”.
_______ Type a site address and then choose the free option.
_______ On the home page, click on “Get Started”.
_______ Choose a Theme.
_______ Fill in the details of your account.
_______ Open your browser and go to www.wordpress.com
_______ Click on “See Plans”.

B. Posting using WordPress

______ Choose Format > Clear Formatting.
______ Edit the category and/or add a tag for your post.
______ Click the Publish button.
______ Type your blog post.
______ Click “Write” on the upper right corner of your dashboard.
______ If you have multiple blogs, you will see a drop-down menu. Click the blog where
you want your post to appear.

Name: __________________________ Date: _______________________________

32
Subject: __________________________ Teacher Name: _______________________
Learning Activity #1: Enumeration
1-7). Enumerate the tools that are not usually seen by users but are Essential for a website
creator.

8-10.) Enumerate the three Editing Elements in WYSIWYG editor.

Name: __________________________ Date: _______________________________

33
Subject: __________________________ Teacher Name: _______________________
Learning Activity #2:
Test I.Multiple Choice: Read the statement below and underline the correct answer.
1. This site offers an online to-do checklist for your entire team.
a. Team Dynamic c. Trello
b. Team Structure d. Yammer
2. This social networking site allows you to create a graph where in people can collaborate
a. Facebook c. Plurk
b. Multiply d. Twitter
3. This allows a group of people to collaborate on one blog.
a. Jimdo c. WordPress
b. Trello d. Yammer
4. It offers companies to have their own social network for managing projects/content.
a. Drive c. Trello
b. Office Online d. Yammer
5. It is a website that contains information from different sources and places them in one location
in a uniform way.
a. Portal c. Trello
b. Search d. Wiki

II. Enumeration
1-5.) Enumerate the five online collaborative tools a group can use for communicating
effectively using Internet.

Name: __________________________ Date: _______________________________

34
Subject: __________________________ Teacher Name: _______________________
Learning Activity #3: Essay
Direction: Given the question below. Write your answer on the space provided.

“What was the most important thing you learned to our topic?

Name: __________________________ Date: _______________________________

Subject: __________________________ Teacher Name: _______________________

35
Self-Assessment #1: Differentiate (Nx10)

1. Hypertext Markup Language vs Cascading Style Sheets

2. Jimdo vs. WYSIWYG

3. Trello vs. Yammer

36