ETECH

The Nature and Purposes of Online Platforms and Applications

Definition of Terms
Online Platform- is technologies that are grouped to be used as a base upon which other applications
processes or technologies are developed.

Presentation/Visualization- communicates information clearly and efficiently via statistical graphics,

plots and information graphics.

Cloud Computing- 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.

Social Media- are computer-mediated tools that allow people, companies and other organizations to
create, share, or exchange information, career interests, ideas, and pictures/videos in virtual
communities and networks.

Web Page Creation- encompasses a number of important elements including color, layout, and overall
graphical appearance.

File Management- is the storing, naming, sorting and handling computer files.

Mapping- a transformation taking the points of one space into the points of the same
or another space.

Online Platforms for ICT Content Development

Online Platform is technologies that are grouped to be used as a base upon which other applications
processes or technologies are developed Examples of Online Platform
a. Presentation/Visualization
b. Cloud Computing
c. Social Media
d. Web Page Creation
e. File Management
f. Mapping

A. Presentation / Visualization- communicates information clearly and

efficiently via statistical graphics, plots and information graphics
Examples of Presentation / Visualization

Prezi – helping to reinvent the art of presentation

Zoho – an online project management app that helps you plan your work and keep track of your
progress
SlideShare – to build quickly from concise, well presented content from top experts
B. Cloud Computing- 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 Examples of Cloud
Computing:

Google Drive – keep all work in one secure place with online file storage
Dropbox – keeps your files safe, synced, and easy to share

C. Social Media- are computer-mediated tools that allow people, companies and other organizations to
create, share, or exchange information, career interests, ideas, and pictures/videos in virtual
communities and networks Examples of Social Media

· Twitter – online social networking service that enables users to send and read short 140- character
messages called “tweets”.
· Facebook – is for-profit corporation and online social networking service

D. Web Page Creation- encompasses a number of important elements including color, layout, and
overall graphical appearance. Examples Web Page Creation

· Wix -a cloud-based web development platform that allows users to create HTML5 websites and mobile
sites through the use of their online drag and drop tools
· Weebly – a web-hosting service featuring a drag and-drop website builder.

E. File Management- is the storing, naming, sorting and handling computer files Examples of File
Management

· Zamzar – web application to convert files

· word2pdf – convert Word files to PDF (Portable Document Format) with this online tool

F. Mapping- a transformation taking the points of one space into the points of the same or another
space. Examples of Mapping

· Google Maps – a desktop web mapping service developed by Google

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 Blogs- is a discussion or informational website published on the web
consisting of discrete, often informal diary-style text entries ("posts"). Posts are typically displayed in
reverse chronological order, so that the most recent post appears first, at the top of the web page

Examples of Blogging Sites:

1. WordPress (wordpress.com)
2. Blogger (blogger.com or blogspot.com)
3. Medium.com
4. Squarespace.com
5. Tumblr
Web page design using templates and online WYSIWYG platforms

Definition of Terms
WYSIWYG editor- It allows you to create and design a web page without any coding knowledge.
HTML- stands for Hypertext Markup Language
CSS- Stands for Cascading Style Sheets
Jimdo- a free website provider with WYSIWYG editor
Template- a ready-made design for a website
SEO- stands for Search Engine Optimization- a feature that maximizes the search engine optimization
feature so visitors can easily locate your website.

WYSIWYG 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 a WYSIWYG editor.
Jimdo is a WYSIWYG web hosting service offering free and paid services. Jimdo has tools that will allow
you to sell your products online. Create your own photo gallery, and videos, and many more. You can
also maximize the search engine by properly tagging your site.
WEB DESIGN PRINCIPLES AND ELEMENTS
Website Template- Also known as web template is a predesigned webpage, simply by adding your text
and customization to create your desired web page. It is usually built with HTML and CSS code.
WYSIWYG editor- It allows you to create and design a web page without any coding knowledge
WYSIWYG- 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. It shows and prints whatever you type on the screen.

Editing Elements

Hovering over a text, image, or any element you see on the website will highlight the
element.
Move element up- used to move the element up by one level

Move element down- used to move the element one lower

Delete element- used to remove the element

Copy element- used to copy the element

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

I. Header- If it is a header, clicking will allow you to edit the text and change its font size.
II. Image- If it is an image, several options would also appear. It also allows you to upload an
image directly from your computer or a Dropbox account.
III. Paragraph- If it is a paragraph, you will be treated to even more options similar to using a
word processor:
Settings
• The settings option contains important information that you should edit to
make the most out of your Jimdo website.
• The account settings include changing your password, email, and personal
profile.
• The website options allow you to change your site title and footer; checks your
storage; creates your privacy policy and your favicon (the icon of your website
shown on a browser).
• The Mobile Settings is used to prepare you page for mobile devices.
• The Email and Domain Management setting is a premium feature. It is used
to manage email accounts for your website.
• The Store settings allow you to manage the items you sell on your website.
• The SEO option is a premium feature that maximizes the Search Engine
Optimization feature of Jimdo so visitors can easily locate you website.
• The Apps option contains settings for embedded apps on your website like
Dropbox, OR Codes, Google Analytics, and Twitter
• The Jimdo settings allows you to remove the Jimdo Box on your website
(premium feature) and check News.

IMAGE FILE FORMATS, EDITING, AND PHOTO MANIPULATION

As a graphic artist it is vital to know what image editing and manipulation is and also the difference
between the two. Just like architects know what materials they can use to build a house, knowledge of
image file formats, editing, and manipulation will also come in handy when entering the world of digital
arts and graphic design.
Vector and Bitmap:
Bitmap and vector are both types of images found online or as an image type supported in graphical
software. It is nearly impossible to discuss graphic programs without understanding the differences
between these two main types of 2-D graphics.

• Vector
• Images created from geometrical primitives such as points, lines, curves and other defined
shape.
• Vector images are software-created and based on mathematical calculations.
• Vector images are edited by manipulating the lines and curves that make up the image using a
computer program.
• Examples of vector graphic formats are PICT, EPS, and WMF as well as PostScript and TrueType
fonts.

• Bitmap (Raster)
• Images are recorded in an array of pixels, typically used for the representation of photographic
images.
• A bitmap (also called "raster") graphic is created from rows of different colored pixels that
together form an image.
• Pixels are picture elements, tiny squares of individual color that make up what you see on the
screen.
• Bitmap graphics can be edited by erasing or changing the color of individual pixels using a
computer program.
 • Examples of bitmap graphic formats include GIF, JPEG, PNG, TIFF, XBM, BMP, and PCX as well as
bitmap (i.e., screen) fonts.

File Formats:
1. JPEG (or JPG) - Joint Photographic Experts Group
• JPEGs might be the most common file type you run across on the web, and more than likely the kind of
image that is in your company's MS Word version of its letterhead. JPEGs are known for their "lossy"
compression, meaning that the quality of the image decreases as the file size decreases.
2. PNG - Portable Network Graphics (pronounced as Ping)
• PNGs are amazing for interactive documents such as web pages but are not suitable for print. While
PNGs are "lossless," meaning you can edit them and not lose quality, they are still low resolution.
3. TIFF - Tagged Image File
• A TIF is a large raster file that doesn't lose quality. This file type is known for using "lossless
compression," meaning the original image data is maintained regardless of how often you might copy,
re-save, or compress the original file.
4. PSD - Photoshop Document
• PSDs are files that are created and saved in Adobe Photoshop, the most popular graphics editing
software ever. This type of file contains "layers" that make modifying the image much easier to handle.
This is also the program that generates the raster file types mentioned above.
5. PDF - Portable Document Format
• PDFs were invented by Adobe with the goal of capturing and reviewing rich information from any
application, on any computer, with anyone, anywhere. I'd say they've been pretty successful so far.
6. EPS - Encapsulated Postscript
• EPS is a file in vector format that has been designed to produce high-resolution graphics for print.
Almost any kind of design software can create an EPS.
7. GIF - Graphics Interchange Format (pronounced as Jiff)
• GIF images are compressed using the Lempel–Ziv–Welch (LZW) lossless data compression technique to
reduce the file size without degrading the visual quality.

Image Editing and Manipulation:

• Image editing- Signifies the regular process used to enhance photos and to create them.
• Refers to the process of enhancing the key components and parameters of an image. It is used
primarily for making the images appear perfect and without any of the defects occurred while
capturing it.

• Image manipulation
• The process by which the entire appearance of the image is manipulated by the addition of
secondary elements and by enhancing the existing elements in the image. Focuses on altering
the elements that appear in the frame.
• Some examples of image manipulation include the addition of birds into the sky, altering the
entire backgrounds, carrying out alterations in the faces and other properties within the image,
etc.
Image Editing VS Image Manipulation
In a nutshell, the main difference between editing and manipulating images is the type of elements you
change. If you try to enhance or correct separate digital elements like brightness, contrast, size, or color
in one single photo then you are doing photo editing. While if you add photographic elements to a
photo such as duplicating elements or combining elements of different photos into a new one, then you
are manipulating photo.