Empowerment Technologies (E-Tech) (Lesson Guide Unit 6 – 9)

A.Y. 2023 – 2024

Unit 6

ONLINE FILE FORMATS AND PRINCIPLES OF IMAGE MANIPULATION

 IMAGE – An image is a representation of something that conveys meaning, like photographs, paintings,
drawings, illustrations, sculptures, abstracts etc.
Photo vs. Picture
Photo – Exact taken by any digital cameras
Picture – Edited and created through the use of computer (examples are paintings, drawings,
illustrations, etc.)

Classifications of Image File Formats

Images such as pictures, sculptures, paintings, illustrations, drawings, or even photographs are more likely
the tangible aspects of an image.

 Printable File Format – are image formats that may be uploaded to the internet and can be printed out into
hard copies.
JPEG or JPG (Joint Photographic Experts Group) – refers to the file format of a still and flat image. It
is a format in which still pictures are saved.
PNG (Portable Network Graphics) – It is a raster graphic file format that has higher resolution than
JPEG. This means that even if the image is resized (made larger or smaller), its quality will not be
reduced.
PDF (Portable Document Format) – Is a file format through which a word processed document,
spreadsheet, and even presentations maybe converted into an image.
EPS (Encapsulated PostScript) – is a file format for images printed on media such as billboards. It
contains vector graphics, which means the image will not lose quality even when greatly enlarged.
TIFF or TIF (Tagged Image File Format) – Is a file format that is used for raw files that came from film
cameras. It has a transparent background so the colors come out more beautiful and alive. It is also the
file format for scanned raw images.

 Online File Format – not suitable for printing.

GIF (Graphic Interchange Format) – refers to the graphic file format that allows movements
(interchanging movements). When an image is blinking, changing shapes and colors, or even
changing its movement, most probably its file format is GIF.
BMP (Bitmap) – refers to a file format for colors per pixel. It is basically used to create animated
characters in low resolution in which pixels (colors per box) are shown. One of the most common uses
for bitmap graphics are 2-dimensional (2d) images used to animate low definition games.
SVG (Scalable Vector Graphics) – is the most commonly used file format in web pages and
websites. It is made up of extensible markup language-based vector graphics that can be manipulated
with any text editors as well as drawing and image editing software.

BASIC TECHNIQUES IN IMAGE MANIPULATION USING OFFLINE OR OPEN SOURCE SOFTWARE

Image Manipulation

 Refers to the transformation of an image using various techniques and methods to enhance the resulting
image. It is accomplished with a software editor that can be downloaded either with a license or with open –
source software.
Basic Techniques in Image Manipulation

Picking Stock Images for Cropping – Selecting a stock image or a raw image.
Combining Multiple Images – Adding and combining multiple images.
Filters – enhance its beauty and transform it dramatically.
Text and Color – it will emphasize the message of the image as it catches the attention of the people
seeing it.

Editing Software

 Licensed Editing Software – are usually software you can use offline in trial mode and then purchase
after. Licensed editing software will give you full access to all of its features, which may help you in image
manipulation.
Examples:
 Adobe Lightroom
 Adobe Photoshop
 Adobe Illustrator
 Corel Painter

 Open-Source Software – these are software that do not require licensed editing software and are free of
charge.
Examples:
 GNU Image Manipulation Program (GIMP)
 Inkscape
 Krita
 RAwTherapee

Licensed Software vs Open-Source

Licensed Editing Software Open-Source Editing Software

 free of charge
 access to full features
 with trial versions
 with unique features
 access to full features when in
full version  renders file formats that are
compatible with other licensed
Advantage  commonly used by editors
software in the market
using Windows Operating
Systems and MacOS  some can be used in various
operating systems (e.g.
 user-friendly
Windows, MacOS, etc.)

Disadvantage
 has limited access to features
when in trial version
 might take time for users to be
 license expires
familiar with
Disadvantage  not compatible with
 user must have prior knowledge
open-source operating
in using such software
systems (i.e. Linux OS)
 costly
Unit 7

FAMILIARIZING WITH AN IMAGE EDIITNG APPLICATION

Image Editing Application Categories

 Basic Image Editing Applications – These kinds of applications are good for those who want to make
simple adjustments to the image. Users can crop, rotate, and sometimes apply filters on their images. Most
of these applications are free. There are usually two types under this:

1. Built-in Applications
 Windows – Windows computer has a free application like Microsoft Paint which can be
used for simple drawings and image editing. Some applications may also have Microsoft
Photos which has more advanced tools for enhancing and organizing images.
 Android – Android devices can edit images through their Gallery and Google Photos
applications.
 MacOS – there is also an installed application called Apple Photos which allows to adjust
and organize images.
 iOS – All iPhone and iPad has Photos application which stores and displays images on
the device. It can also make basic image adjustments.

2. Third-party Applications
 Third-party applications are those that can be available on the Internet or can be
downloaded and installed in computers and mobile devices.
 Examples of third-party applications include Picsart, Snapseed, Snapchat, Pixlr, and
Pizap.

 Advanced Image Editing Applications

These kinds of applications are good for those who want to make additional advanced adjustments to the
image. Users can apply different effects on different parts of the image.
Examples of advanced image editing applications include Adobe Photoshop, Paint.Net, Pixelmator,
GIMP, and Fotor.

Adobe Photoshop – is the most popular among the advanced image editing applications. Since it is widely available
for almost all devices, it has been generally used by many professional photographers and
designers, as well as amateurs.

– This application uses a layer-based editing system that allows its users to create and edit
images with many overlays, and save them in one of many formats.

Unit 8

ONLINE PLATFORMS AS TOOLS FOR ICT CONTENT DEVELOPMENT

ONLINE PLATFORMS

 An online platform is a base of technologies designed to run within an online environment and provides
interactive online services.
 Online platforms are currently include but are not limited to:
 Presentation or Visualization
 Cloud Computing
 Social Media
 File Management
 Mapping
 Web Page Creation
  Presentation or Visualization – Allows you to present and share presentations, infographics and videos
with other people.

– Use to communicate information clearly and efficiently.

Examples: Slideshare, Prezi, Zoho, etc.

 Cloud computing – simply called as “The cloud”. Access anytime, anywhere. The practice of using a
network of remote servers hosted on the internet.
Examples: Google Drive, Google cloud, etc.
 Social Media – Computer-mediated tools that allow large group of people to create, share or exchange
information, interest, etc.
Examples: Facebook, Youtube, Twitter, Tiktok, etc.
 File Management – The storing, naming, sorting and handling of computer files. Allows you to convert and
manage files without downloading the software tool.
Example: Google Drive
 Mapping – A transformation taking the points of one space into the points of the same or another space. Use
GPS (Global Positioning System) to detect location used for navigation.
Example: Google Map
 Web Page Creation – Encompasses a number of important elements including color, layout, and overall
graphical appearance. The platform does not require any web programming skill
they provide drag and drop interface and free hosting as well.
WYSIWYG (What you see is what you get) – in this kind of platform, no coding skills are required.
Instead, you manipulate with design components using an editor window and get the chance to choose
what elements on your page.
Web templates are unique full page layout that contains generic information which can be replaced by
the users with their own personal information.

Basic web design principle

1. Visual Language
 Color Scheme
 Focus of Content using Contrasting color
 Use of consistent font size and color
 Make important links or menus noticeable
 Use high quality pictures that follows the rule of third.
2. Balance
3. Paradox of Choice
 “The more choices you provide, the easier for others to choose nothing”
 Focus on Users need
 Design Sites for multiplatform and multiscreen
4. Focus on Content
 Know the purpose of your web page so you could match the content with the purpose.
 Include images on your content not just pure text.
 Content should be spellchecked.
 Content should be organized.
 Content should be updated.
5. Simplify
 Keep content simple.
 Use minimal animated graphics.
 Maintain a look and feel across all the web pages.
Basic Web Design Elements

 Illustration and Styles

 Illustration includes lines, shapes, texture, and color which are fundamentals elements that should not be
overlooked.
 Lines are used to organize, connect, and separate information and design elements. Combined with
shapes, color, and texture they use as a visual grammar which you can use to communicate.

 Links
 Links are the most basic interface on web pages. Links should be distinctive in color from other types of
text in a webpage. Keep links and regular text styled consistently to avoid users from thinking whether or
not the text is a link.
 Make sure your links are working.

 Buttons and Menus

 Just like links, buttons and menus are also essential to web pages and they too need consistent styles.
 Buttons and menus should be well-organized.
 Button labels and menus should be clear and easy to understand.

 Images
 Images also aids in communicating your message to the viewers. Aside from being used as fillers, images
also helps in leaving a lasting first impression.
 Use specific images that are related to your content so that it will draw attention not only to the content but
to your web page as a whole.

WEB PAGE or WEBPAGE

 A web page or webpage is a document, commonly written in HTML that is viewed in an Internet browser. A
web page can be accessed by entering a URL address into a browser’s address bar. A Web page may
contain text, graphics, and hyperlinks to other web pages and files.

What is Web Design?

 Web design refers to the design of websites that are displayed on the internet. It usually refers to the user
experience aspects of website development rather than software development. Web design used to be
focused on designing websites for desktop browsers.

Main Components of Web Pages

HTML (Hyper-Text Markup Language)

 Predominant markup language for all web pages that all browsers read to understand the site.
 Considered the building blocks of a web pages, and define the structure of the document
 Made up of tags that surround plain text, telling the browser how to display elements on a web page.
 These tags carry properties that further define how they should act and look.

HTML Structure: Tags and Tag Rules

 Composed of the name of the element, surrounded by angle brackets.

 Tags are always surrounded by angle brackets
 Opening tags: <>
 Closing tags: </>
 Tags always come in pairs
 Opening tag turns action on, closing tag turns it off
 <head> </head>
 <body></body>
  Tags can be nested inside of other tags
- Inner tag must be closed before the outer tag

HTML Structure: Basic tags

 <html>
 <head>
 <title>
 <link>
 <body>
 <div>
 <p>
 <br>
 <h1> - <h6>
 <a>
 <img>
 <source>

Main components of Web Pages

CSS (Cascading Style Sheets)

 Language that describes the presentation of a website
 Similar to the style sheets that newspapers and magazines use in InDesign
 Define colors, fonts, positioning, etc.
Audiovisual content
 Images
 Audio
 Movies
 Web pages don’t actually contain audiovisual content, they link to audiovisual content
- Heavy audiovisual content slows down sites.
- Optimize your images to speed up loading time.
Interactive Scripting
 Interactive scripting allows users to interact with web content.
Examples: Rollover images, Buttons, Links, and Multimedia

Unit 9

COLLABORATIVE DEVELOPMENT OF ICT CONTENT

Collaboration – is the process of two or more people, entities or organizations working together to complete a task
or achieve a goal.

Online Collaboration – Simply put/ lets a group of people work together in real time over the internet.

 Web Conference – Provides a live audio / video communication between two or more locations to
conduct meetings, training, or presentations via the internet.

TEAM STRUCTURE AND DYNAMICS FOR ICT CONTENT

How to develop ICT Project Contents

1. Planning and conceptualizing the content.

Generate content ideas and identify content opportunities based on the target audience.

2. Resources.
Find online collaborative tools that you will need for the development of the ICT content, especially if the
team is working from different places.
 3. Research for content.
Identify the current trends.

4. Audience profiling.
Consider the demographics and psychographics of your intended audience.

5. Copywriting for ICT Projects.

Write creatively and with passion to promote your web page.

6. Designing the Layout.

The layout should be easy to read, functional and organized.

7. Developing and Constructing the ICT Project.

Learn the skill of search engine optimization on how to rank highly with search engines.

8. Curating content.
Process of gathering information relevant to a particular topic or area of interest.

Team Structure

 Team Manager – or Content Strategist sets priorities, communicates with the executive team.
 Editorial Manager – implements the strategy.
 Content Curator – inputs ideas into the organization.
 Content Syndicator – does the process of sharing out the content.
 Analytics Expert – constantly looking at data to determine what is working.
 Websiteg Manager – organizes and puts the contents onto website, or upload it to YouTube.

Basic Examples of collaborative tools are:

 Voicemail
 Video Call
 Email
 Instant messaging

SOCIAL CHAT
Examples:

 Google Chat – Allows you to send and receive instant messages with anyone in the group team.
 Google Hangouts - Allows you to talk face from your computer. Make free video calls with up to 10 people.
Can make free calls from your Android, iOS or desktop to other Hangout users.
 Skype – Provides video chat and voice call services.
 Viber - Is an instant messaging and Voice over IP (VoIP) app for smartphones. It can also exchange images,
videos and audio media messages.
 Kakao Talk – Is a free mobile instant messaging application for smartphones with free text and call features.
 WeChat – Is a mobile text and voice messaging communication service. It is one of the largest stand-alone
messaging apps by monthly active users.
 Line – Windows Apps on Microsoft store. In Windows 10, you use free, high quality voice calls and video
calls whenever and wherever you are.

SOCIAL MEDIA
Examples:

 Facebook – Allows users to have access to messaging, connect with different pages and groups within the
site, and respond to discussion, polls and interactive presentations.
 Blog – allows users to produce daily information quickly or developed as content management system.
 Microblog – allows users to make short, frequent posts, links videos, photographs, leave comments and
share posts.
CLOUD-BASED COLLABORATIVE TOOLS

 Google Drive – is a free collaborative tool that allows you to create and edit documents, spreadsheet,
presentation online while collaborating with other users in real-time.
 Zoho – is a web-based free collaboration tool containing word processing, spreadsheets, presentations,
databases, and many more.
 Prezi – is a cloud-based presentation software based on a software as a service model.
 Microsoft Office Online – Presents a suite of applications that allows it to collaborate with others in Word,
Excel or PowerPoint as well as sharing files.
 Adobe Creative Cloud – Where all Adobe products like Photoshop, Dremweaver, InDesign are available.

PROJECT MANAGEMENT FOR ICT CONTENT

Content Management Systems (CMS) – is a computer application that supports the creation and modification of
digital content using a common user interface, thus usually supporting multiple users working in a collaborative
environment.

Examples of CMS are:

1. WordPress – is a free and open source content management system (CMS) based on PHP and MySQL.
2. Drupal – a free and open-sourced content-management framework written in PHP and distributed under the
GNU Public License, provides a back-end framework for at least 2.2% of all Web Sites worldwide.
3. Joomla – is a free and open-source content management system (CMS) for publishing web content.

CURATING EXISTING CONTENT FOR USE ON THE WEB

Content Curation – is the process of gathering information or content like blogs, news, images, audio, or videos,
relevant to a particular topic or area of interest from different sources.

Examples of Tools to Curate Content for Social Media or Newsletters

1. Pinterest – is a web and mobile application company that operates a photo sharing website.
2. Trapit – is a comprehensive content curation service for business that offers content discovery, curation, and
publishing to web, iPad and social channels through its web application.
3. Feedly – is a news aggregator application for various web browsers and mobile devices. It compiles news
feeds from a variety of online sources for the user to customize and share with others.

End of Quarter.

Prepared by:

AIMEE C. BOLOHABO
E-Tech Subject Teacher