Imaging and Design for Online 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.
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.
Monitors have a resolution limit, so even if you have a 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
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.
a. View Uploads – views photos you just uploaded which also grants you options to share and
edit them individually
b. Share Album – shares everything you just uploaded plus the other contents of your specified
folder
c. Edit Photos – uses Photobucket’s photo editing tools to manipulate your image
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.
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.
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.
Basic Web Page Creation
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 is what the audience will see.
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
Webpage.”
5. Specify the filename “Sample Webpage.”
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 WebPage folder. You will see a new folder generated including
your htm/html file.
10. Open the Sample WebPage.htm file and you will see that you just created a webpage using MS
Word.
Collaborative ICT Development
A web portal is a website that contains information from different sources and places them in one
location in a uniform way.
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.
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.
There are plenty of 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 you to 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 your entire team.
Interactive Multimedia
Multimedia Contents
1. Videos. Through video hosting sites, you can take a video and show it to the entire world (e.g.,
YouTube).
2. Sound, Music, or Audio. If videos are too much for you, you can always record sounds. You can
now share your sound bites to the entire world (e.g., Soundcloud).
3. Online games. Game developers now create what is called “browser-based games.” You do not
need to install these games to your computer as they run in most updated web browsers
(AdventureQuest, Farmville, Candy Crush)
4. Online tests. Online survey forms and tests that automatically display the results when finished
(Online IQ and Personality Tests).
5. Courseware. Online courses that simulate the classroom online (e.g., E-learning Courses using a
Learning Management System)
6. Podcasts. An episodic series of audio or text files streamed online (e.g., Stuff You Should Know, TED
Talks, The Starters, Ear Biscuits).
7. Vodcasts. An episodic series of video streamed online (e.g., YouTube series/shows like Video Game
High School, Good Mythical Morning).
Inserting YouTube Videos on Your Blog Post
1. Search this song on YouTube.com (you can use an official music video or someone else’s.
2. Go to the bottom of the video and click the Share button.
3. Click on Embed.
4. Copy the code similar to the screenshot below.
5. Create a new post on your WordPress then on the editor, click on the Text tab.
6. Paste your code.
7. Go back to the Visual tab and add text content on either the top of your video or the bottom.
8. Preview then publish the content.
ICT as Platform for Change
ICT: An Avenue to Social Change
ICT has helped improved communication when Filipinos needed it the most. Radyo Veritas helped
in the success of the People Power Revolution. Text brigades helped in the success of EDSA Dos. Social
media sites like Facebook helped in the success of the Million People March. Finally, technologies like
the People finder helped bring comfort to families looking for their loved ones during calamities like
Yolanda.
Change.org is dubbed as the world’s platform for change where anyone from the online
community can create a petition and ask others to sign it. During the past times, petitions are only
done through signing a paper, usually done by a group asking for signatures via travel. Change.org
gives access to more people by allowing the online community to affix their digital signatures on a
petition.
The Mission
Change.org’s mission is to help people from around the world create the change they want to
see.
Signing an Online Petition
1. Visit Change.org.
2. Click on Log in on the upper right hand of the page.
3. Click Sign up or log in with Facebook.
4. You can then start your own petition, but for now, click on any petition you want under trending
petitions.
 5. Read the petition description to see if this petition matters to you. If it is, sign the petition by filling
up the information on the right side of the screen.
6. Share the petition on Facebook to promote it.
ICT Project for Social Change
Creating a Concept Paper
A concept paper is a document used to convince a panel of potential funders to help a product,
program, or service become a reality.
Five elements of a concept paper:
1. Introduction – includes your group’s mission and vision and a brief introduction of your project
2. Purpose – includes the reasons why this project is worth your group and your sponsor’s time,
effort, and money
3. Description – includes all the necessary information about the project.
4. Support – contains the budget needed for the project. Some concept papers do not specify any
amount requested from the sponsor.
5. Contact Information – includes information on how the group can be contacted
Simplified ICT Project Process Overview

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.
ICT Project Publication and Statistics
In the business world, companies would use site statistics to check how popular their website is
and at which day and time they get the most traffic. This way their new content could reach more
people.
Monitoring Site Statistics on Different Platforms.
1. WordPress
Once you log in to your WordPress account, you are on the Reader tab by default. Simply click on My
Sites and from there you will see the statistics for your blog.
2. Facebook
In your created Facebook page, a summary of the statistics will appear on the right side of your cover
photo:
a. Overview – contains the summary of statistics about your page
Definition of terms on your Facebook statistics:
(1) Reach: Organic – your posts seen through the page’s wall, shares by users, and the news feed
(2) Reach: Paid – your posts seen through paid ads
(3) Post Clicks – number of clicks done to your posts
(4) Likes, Comments, and Shares – actual interaction done by your audience either through liking the
post, commenting on it or sharing it on their wall.
b. Likes – contains the statistics about the trend of page likes
c. Reach – contains information about the number of people who was reached your post
d. Visits – contains data of the number of times your page tabs (like the Timeline) are visited
e. Posts – contains data showing when (day and time) your site visitors visit your site
f. People – contains statistics about your audience’s demographics (age, location, gender, language,
and country). It also includes demographics about the people you have reached and engaged with
Demographics refers to the statistics characterizing human population usually divided by age, gender,
income, location, and language.