E-TECH

MODULE 4

4.1.1 Nature and Purpose of Online Platforms: Visualization

and Cloud Computing
1. Presentation/ Visualization Online Platform

 Prezi is a presentation tool that can be used as an alternative to

traditional slide making programs such as PowerPoint. Instead of
slides, Prezi makes use of one large canvas that allows you to pan and
zoom to various parts of the canvas and emphasize the ideas presented
there.

 Slideshare is a slide hosting service, acquired by LinkedIn in 2012. It

allows users to upload files (PowerPoint, PDF, Keynote, or OpenDocument
presentations), either privately or publicly. The slide decks can then be
viewed on the site itself or can be embedded on other sites.

 MindMeister provides a way to visualize information in mind

maps utilizing user modeling, while also providing tools to facilitate
real-time collaboration, task management and creating presentations. By
using cloud storage, MindMeister can distribute changes in mind maps in
real-time to all users on all devices. Mind maps can be shared both privately
with an unlimited amount of users and publicly.

2. Cloud Computing Online Platform

 Google Drive is an online storage that allows you to save photos,

stories, designs, drawings, recordings, and videos online and share it with
others to view, download, and collaborate. Files or folders can be shared
privately with particular users having a Google account, using
their @gmail.com email addresses.

Google Docs allows user to create and share your work online and access
your documents from anywhere. Google Docs brings your documents to
life with smart editing and styling tools to help you easily format text and
paragraphs. It allows users to easily manage documents, spreadsheets,
presentations, surveys, and more.

 Box is an online file sharing and content management service for

businesses. The company uses a freemium business model to provide
cloud storage and file hosting for personal accounts and businesses.

 Dropbox is a Dropbox creates a special folder on the user's computer,

the contents are then synchronized to Dropbox's servers and to other
 E-TECH

MODULE 4

computers and devices that the user has installed Dropbox on. Everything
you keep in Dropbox is synced automatically to all your devices.

4.1.2 Nature and Purpose of Online Platforms: Social Media

3. Social Media Online Platform

 Facebook is an online social networking site that allows users to

communicate and stay in touch with friends and family. It is the biggest
social network of students, and is gaining ground among professionals.
Facebook application enables users to add new ways to interact with each
other, share messages, pictures, and videos.

 Flickr, in addition to being a popular website for users to share and

embed personal photographs, and effectively an online community, is
widely used by photo researchers and bloggers to host images that they
embed in blogs and social media.

Instagram is an online mobile photo-sharing site that allows users to

share pictures and videos. Users can upload media captured in any aspect
ratio and apply digital filters to their images. Videos uploaded on Instagram
can support widescreen resolutions of up to 1080p and longer recording
times for either prerecorded (up to one minute) or disappearing live (up to
one hour) videos.
LinkedIn is a social networking site designed specifically for the
business community. The goal of the site is to allow registered members to
establish and document networks of people they know and trust
professionally. It is another example of social networking site, although its
focus is business and professional networking.SnapChat allows users to
talk with friends, view Live Stories from around the world, and explore news.
Snapchat evolved into a mix of private messaging and public content,
including brand networks, publications, and live events such as sports and
music.

 Skype, owned by Microsoft, is one of the most popular

communication-based social networking platforms. It allows users to
connect with people through voice calls, video calls and text messaging.
You can even conduct group conference calls. Skype-to-Skype calls are
free and can be used to communicate with anyone, in any part of the world,
over the internet
 E-TECH

MODULE 4

Tumblr is a microblogging and social networking website. The service

allows users to post multimedia and other content to a short-form blog.
Users can follow other users' blogs.

 Twitter is an online news and social networking service where users

post and interact with messages or "tweets". It is a free application that lets
users connect with people and get information around the world in the area
of politics, sports, and entertainment, news and current events. Registered
users can post tweets, but those who are unregistered can only read them.

Viber is a multilingual social platform, which is available in more than 30

languages, and is known for its instant text messaging and voice messaging
capabilities. You can also share photos, videos and audio messages using
Viber. It offers you the ability to call non-Viber users through a feature
named Viber Out.

4.1.3 Nature and Purpose of Online Platforms: Web Page

Creation
4. Web Page Creation Online Platform

 Weebly allows user to create a free website, blog, or online store in

minutes by using a simple drag and drop interface. It is a web-hosting
service featuring a drag-and-drop website builder.

 Wix is a cloud-based web development platform that allows users to

create HTML5 web sites and mobile sites through the use of their online
drag and drop tools.

Webs (formerly FreeWebs) is among the most popular free website

creators available and features many of the same features of other online
website builders. It only takes a few clicks in order to add e-commerce
functionality to your website as Webs has the ability to integrate your site
with Paypal or Google Checkout. Create your own social network by
requiring visitors to “join” your site.
Webnode is a website creator with a user-friendly interface (think of
Microsoft Word) and operates like a content management system. With
Webnode, webpages are edited by browsing to the page first, then making
the necessary changes. This helps to better visualize how website will look
and function exactly. Change your page layout and design at anytime using
the toolbar. Webnode allows for automatic linking and navigation, so it can
be particularly useful when creating large websites with lots of content.
Yola (formerly Synthasite) has functionality similar to that of desktop
publishing software such as Microsoft Publisher. It offers drag-and-drop
 E-TECH

MODULE 4

editing features which make it easier to use than some of the mentioned
web creating sites. Most remarkable is Yola’s online photo editing through a
partnership with Yola service is very reliant on templates, but there are
plenty to choose from and they vary from fun and funky to classy and cool.

4.1.4 Nature and Purpose of Online Platforms: File

Management and Mapping
5. File Management Online Platform

 Zamzar is a web-based file conversion tool that can convert your video,
audio, images, and documents from nearly any format to nearly any other
format. It supports over 1200 different conversions - Video Converter,
Audio Converter, Music Converter, eBook Converter, Image Converter,
CAD Converter among others.

 Word2PDF easily converts your Word files to PDF with this online tool.
Users can select particular pages, rotate PDF pages, re-order pages, split
files and more. A PDF protection for printing, copying and editing is
removed automatically (without password). Supported
formats include Word, Excel, Powerpoint, Publisher, OpenOffice, Images,
XPS, PDF among others.

6. Mapping

 Google Maps is a web mapping service application and technology

provided by Google that offers satellite imagery, street maps, and Street
View perspectives. It helps users find local businesses and allows them to
view maps and get driving directions.

 Wikimapia is a privately owned open-content collaborative mapping

project that utilizes an interactive "clickable" web map with a
geographically-referenced wiki.

4.2 Basic Principles and Elements of Web Design

The elements of design are the basic building blocks of all design projects. The
elements of design include line, shape, texture, color, size, space and value.

The principles of design are how you apply design elements to your page.
These principles are some of the more accepted methods of design. The
principles of design are balance, contrast, emphasis, rhythm, and unity.
 E-TECH

MODULE 4

4.2.1 Elements of Web Design

1. Line
Line is a basic element of design. It adds to the style of a design and can
enhance the comprehension and readability of a design. Lines can be used as
a border around elements or a divider between elements.
2. Shape

Shapes are made up of closed contours and three-dimensional objects placed

in the design. Shapes are used to convey meaning and organize information.
An example would be the three basic shapes: circle, square, and triangle,
considered to be the fundamental shapes found in all design.
3. Texture
Texture is the look and feel of a surface. In two-dimensional form, texture is
essentially visual and adds richness and dimension to work. Texture can also
refer to pattern, which is visual texture.

4.2.2 Elements of Web Design (cont.)

4. Color
Color is used to generate emotions, define importance, create visual interest
and unify branding.
5. Size
In graphic design, size is used to convey importance, attract attention, and
create contrast.
6. Space
 E-TECH

MODULE 4

A vital part of any good graphic design, space is the area around the elements
in a design. It can be used to separate or group information. Use it effectively to
give the eye a rest, define importance and lead the eye where you want it to
travel
7. Value
Value is how light or dark an area looks in a design. It is everything from the
darkest of blacks thru the brightest of whites. Used correctly, it will create depth,
contrast, and emphasis.

4.2.3 Basic Principles of Web Design

1. Balance
Balance occurs when all the design elements are equally distributed through
the design. There are essentially two types of
balance: symmetrical and asymmetrical. Symmetrical elements are
arranged equally on both sides of a composition to suggest a stable or static
motion. Asymmetrical elements create a deliberate imbalance to suggest
variety or dynamic movement.
2. Contrast
Contrast shows the differences between elements on the page. Big and small,
black and white, square and circle - these are all contrasts. Contrast stresses
the visual differences between the elements to enhance the perception of a
message intended. Contrast also draws and directs the viewer's attention to
specific areas of information.
3. Emphasis
Emphasis is often called dominance. With emphasis, designers showcase what
is of highest priority in the design. The most emphasized visual element in a
design is called a focal point, because it attracts the viewer's attention first.
You can create emphasis by taking an element and making it bigger, bolder, or
brighter, by putting it in a contrasting color, or by surrounding it with white
space.
4. Rhythm
Rhythm or repetition is the expression of visual harmony within a design.
Repetition and rhythm attract attention in a design and allow the viewer to relax
as they recognize the pattern. The term sequence is used to refer to the
viewing order of the elements and to determine the flow of a multi-page
publication such as a magazine, book or large website.
5. Unity
 E-TECH

MODULE 4

Unity is achieved when all the design elements relate to one another and
project a sense of completeness. For example, an image must relate to the text
it is next to, otherwise the overall message will not make sense to the viewer.
Unity is what makes the content attractive and understandable to the viewer.
Where there is no unity in the design, the message can appear confusing and
undesirable to the viewer.

4.3 Web Page Design Using Templates and Online Platforms

This part of the module gives some view points on how to design pages using
templates and online platforms. The following tools to be discussed are as
follows:

 Weebly

Weebly is an easy way to build a fantastic site. First step is to pick a theme,
then pick a domain option, and build your weebly website.

 Wix

Wix is a cloud-based web development platform that allows users to create

HTML5 web sites and mobile sites through the use of their online
drag-and-drop tools.

 Facebook Pages

Pages are for businesses, brands and organizations to share their stories and
connect with people. Like profiles, you can customize a Page by publishing
stories, hosting events and more. People who like your Page and their friends
can get updates in News Feed.

4.3.1 Designing Web Pages in Weebly

Select a Theme
The first step on the road to building your site is selecting a theme. Choose from
a variety of themes, all of which are responsive and built to adapt to a variety of
purposes.
You can look them up with a quick scroll through the Theme Gallery.
Domain Name
After you pick a theme, choose your site's address/domain name. Select from a
free sub-domain of Weebly.com or register a new domain name.

4.3.2 Designing Web Pages in Wix

 E-TECH

MODULE 4

To create a webpage using Wix, follow the step-by-step guide below.

1. Sign up for an account

Getting started with WIX requires you to sign up for an account. To do this, you
just enter your email address and a password or you can sign in with a Google
or Facebook social account.
2. Choose a Type of Website
Some of the selections most useful to small businesses might include a
business website, online store or blog. However, depending on the type of
business you operate, you might also select “Photography,” “Restaurants,”
“Accommodation” or “Beauty & Wellness,” etc.
3. Select a Template
You can browse from the popular templates or search for something specific.
You can also search within specific categories like websites made specifically
for consultants, service providers or marketers. Also, you can choose from a
selection of mostly blank themes and then build up from there.
4. Change Your Details
When you’ve selected a template you like, WIX will take you to a preview of the
design that you can edit by clicking, dragging and dropping the different
elements on the page. Update your business name, tagline and any other text
elements on the page. To do this, just click on the text that you want to change
and then you’ll see a text editor that lets you type in new text and change the
size, font and other elements.
5. Update Media
You’ll also have the ability to change some of the more visual elements of the
site. If there are any photos included on the template, you can click on them to
change them to a photo that’s more specific to your business. Also, you have
the ability to change the background of your page. Just click on the background
option on the sidebar, and then choose a color or upload a photo or video to
serve as the background of your website.

6. Add Different Elements

You can also add other elements to the page to really make the site look
complete. On the sidebar, click the “add” button to bring up a list of potential
page elements you can add to your site. You might choose to add things like
text boxes, images, slideshows, buttons, menus, videos or shapes. When you
click on one of those elements from the menu, you can see a few different
options for the type of style you want to add to your site. Then, you can add and
 E-TECH

MODULE 4

move around different elements to make everything look exactly the way you
want it.

7. Repeat for Each Page

You don’t have to add the exact same elements. You can customize each page
to look exactly the way you want using the same method. Just click on the page
you want to edit in the navigation bar and then add whatever elements you want
on that page. Save your work and move on to edit the next page.
8. Publish Your Site
You can preview your site by clicking the button in the top right corner. Click
“publish” in the top right corner and your site will go live. You can see your
domain in the popup that appears. Or you can choose to connect your WIX site
to your own branded domain.

4.3.3 Designing Web Pages in Webnode

Step-by-Step guide on webpage creation using Webnode:

 Name your website and Register

 Select type of website and website category

From the list of more than 100 categories, select the category that describes
your business best. Based on your choice, your website will be created with
relevant text prepared for your business category and placed in your template.

 Choose design template

 Fill in Contact Details

4.3.4 Facebook Pages

Pages are for businesses, brands and organizations to share their stories and
connect with people. Like profiles, you can customize a Page by publishing
stories, hosting events and more. People who like your Page and their friends
can get updates in News Feed.
 E-TECH

MODULE 4