LESSON 6: IMAGING AND DESIGN FOR ONLINE Monitors have a resolution limit, so even if you have a LESSON 7 ONLINE
t, so even if you have a LESSON 7 ONLINE PLATFORMS FOR ICT CONTENT
ENVIRONMENT
Basic Principles of Graphics and Layout
1. BALANCE. The visual weight of objects, texture, colors, and
space is evenly distributed on the screen.
2. EMPHASIS. An area in the design that may appear different in
size, texture, shape or color to attract the viewer’s attention.
3.MOVEMENT. Visual elements guide the viewer’s eyes around
the screen.
4. 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. PROPORTION. Visual elements create a sense of unity where
they relate well with one another.
6. 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.
ONLINE IMAGE FILE FORMATS
*When inserting text to a web page, you can simply copy a text to
your html editor, or you can upload it on a website as a PDF file.
Most browsers support “add-ons” so that you can open PDF files
without leaving the browser.
PRINCIPLES AND BASIC TECHNIQUES OF IMAGE MANIPULATION
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.
million megapixels, it will not display everything.
3. Caption it. Remember to put a caption on images
whenever possible. If it is not related to the web page,
then remove it.
SHARING PHOTOS WITH PHOTOBUCKET
There are plenty of free image hosting sites out there,
and Photobucket is one of the oldest. Here’s how to
access it:
1.First, sign up for a Photobucket account on photobucket.com.
Just like Piktochart, you may use your Google+ or Facebook
account to automatically sign up.
2.Once your account is set up and you are already logged in, click
the Start Uploading button.
3.A new page will load allowing you to drag and drop your photos
or to choose them manually or to choose an entire folder to
upload. Select a folder, add a password (optional), then feel free
to upload any photos you have right then.
4.Once selected, a progress bar will appear indicating that the
image is uploading. This may take a moment and will depend on
your Internet connection. Once you are done, you will see an
indicator similar to the one shown in the image below.
5.Let us just assume you will share a photo individually. To do this,
click on View Uploads. Once the page loads, click the photo you
want to share.
6.On the top of the image, you will see the following options:
A – shares your photo directly to social media and blogging
platforms: Facebook, Twitter, Google+, Tumblr, and Pinterest,
respectively
B – gives you a variety of link codes for HTML, Forums, Emails,
Instant Messagingand a direct link
C – shares your image via email
D – allows you to download your image
E – shares your image to social media sites with the option to add
a custom message
7.You may choose to share your photo to your friends on
Facebook. If you are done sharing, you may now log off and close
the browser.
DEVELOPMENT
Online Platforms for ICT Content Development
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 most popular social media sites in 2019
1. FACEBOOK
• 2.23 billion MAUs
• Biggest social media site.
• Easy to get started
– Works great with almost content formats
• Facebook algorithms prioritizes content that sparks
conversation and sparks meaningful interaction
between people.
2. YOUTUBE
• 1.9 billion MAUs
• Video sharing platform.
• You can create YouTube channel for your brand
– you can upload videos for your subscribers
to view, like, comment and share
3.INSTAGRAM
• 1 billion MAUs
• Photo and video shariing social media app
• Allows you to share a wide range of content such as
photos, videos, stories and live videos.
BLOGGING PLATFORMS.
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.
WORDPRESS
• One of the most popular free blogging platforms in the
internet.
• Provide simple, free blog creation and maintenance
– Can integrate your blog with social media,
and popular features such as comments and
polls.
BLOGGER.COM
• Easy for beginner to use.
• You can type your contents, add photo and publish.
• Lets users edit HTML and add widget to blog.
• A google service, you need to have google account to
sign in.
OTHER ONLINE CONTENT DEVELOPMENT SITES There are plenty of online collaborative tools: Change.org is dubbed as the world’s platform for
• For presentation/visualization change where anyone from the online community can create a
– Prezi 1. You can use Facebook groups to create a group page that will petition and ask others to sign it. During the past times, petitions
– Soho allow people in your group to communicate your ideas. are only done through signing a paper, usually done by a group
– Slideshare asking for signatures via travel. Change.org gives access to more
– Mindmeister people by allowing the online community to affix their digital
2. WordPress also allows you to multiple contributors for a single
• For Cloud computing/storage signatures on a petition.
– Google Drive blog. The Mission
– Evernote Change.org’s mission is to help people from around
– Dropbox 3. Google Drive and Microsoft Office Online allow multiple the world create the change they want to see.
• For Web Page Creation people to work on different office files and even have their own
– Wix group’s cloud storage. Signing an Online Petition
– Weebly
– Jimdo 4. Microsoft’s Yammer offers companies to have their own social 1. Visit Change.org.
• For File Management 2. Click on Log in on the upper right hand of the page.
network that allows sharing and managing content.
– Google Docs 3. Click Sign up or log in with Facebook.
– Zamrar 4. You can then start your own petition, but for now, click on any
– Word2pdf 5. Sites like Trello offer an online to-do checklist for your entire petition you want under trending petitions.
• For Mapping team. 5. Read the petition description to see if this petition matters to
– Google Maps you. If it is, sign the petition by filling up the information on the
– Wikimapia LESSON 11: ICT AS PLATFORM FOR CHANGE right side of the screen.
• For publication material creation 6. Share the petition on Facebook to promote it.
– Canva
– Piktochart ICT: AN AVENUE TO SOCIAL CHANGE LESSON 12 : ICT PROJECT FOR SOCIAL CHANGE

CONTENT MANAGEMENT SYSTEM ICT has helped improved communication when

• 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.
CLOUD COMPUTING
• Used by blog creator and other online content developer.
• You don’t need to install the software, the software is in
the cloud.
LESSON 9: COLLABORATIVE ICT DEVELOPMENT
WEB PORTALS
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.
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.
Filipinos needed it the most. Radyo Veritas helped in the success CREATING A CONCEPT PAPER
A concept paper is a document used to convince a panel of
of the People Power Revolution. Text brigades helped in the
potential funders to help a product, program, or service become a
success of EDSA Dos. Social media sites like Facebook helped in
reality.
the success of the Million People March. Finally, technologies like
the People finder helped bring comfort to families looking for Five elements of a concept paper:
their loved ones during calamities like Yolanda. 1. Introduction – includes your group’s mission and vision
and a brief introduction of your project
THE ROLE OF ICT IN RECENT HISTORY 2. Purpose – includes the reasons why this project is
worth your group and your sponsor’s time, effort, and
• EDSA (People Power Revolution) money
3. Description – includes all the necessary information
– Radio Broadcast about the project.
4. Support – contains the budget needed for the project.
Some concept papers do not specify any amount
• EDSA Dos
requested from the sponsor.
5. Contact Information – includes information on how
– Text Brigade
the group can be contacted
• Million People March
SIMPLIFIED ICT PROJECT PROCESS OVERVIEW
– Social Media Campaign
• Yolanda People Finder
– Database powered by Google
CHANGE.ORG
1. PLANNING – involves the following tasks (but not limited to):

a. Conceptualizing your project

b. Researching on available data about your topic
c. Setting deadlines and meetings
d. Assigning people to various tasks
e. Finding a web or blog host
f. Creating a site map for your website
g. Listing down all applications that you need including
web apps
h. Funding (if applicable)

2. DEVELOPMENT – involves the actual creation of the website(s);

involves the production of images, infographics, etc.

3. RELEASE AND PROMOTION – involves the actual release of the

website for public view and promoting it. Promotion typically
starts before the actual release.

4. MAINTENANCE – involves responding to feedback of your site

visitors and continuing to improve the website.

Creating HTML

 HyperText Markup Language or HTML is a set of tags is

used to create a web page

 HTML tags are used to format the content you want to

appear on your webpage as well as to connect one
web page to another to hyperlinks

 An HTML page is indicated with an <HTML> </HTML>

tag pair