ATS 3.

After you logged in, the next window will allow

you to choose a website template which will be
L1-L2 the main theme of your page.
Web Page 4. The next window shows All Templates and Blank
Templates. If you want to use blank template,
 A Web page is a document which is designed for click Blank Templates
the World Wide Web that can be accessed and 5. To get started on the template, select Edit.
displayed on a monitor or smartphone using any 6. The next page will show the blank page of your
web browser web page.
HTML

 HTML stands for Hyper Text Markup Language. ONLINE WEBSITE BUILDER:EASY USE OF DRAG-
 HTML describes the structure of a web page.
 HTML consists of a series of elements.
 HTML elements tell the browser how to display
the content.
 HTML elements are represented by TAGS.
 HTML TAGS label pieces of content such as
“heading”, “paragraph”, “table” and so on...
 Browsers do not display the HTML tags, but use
them to render the content of the page.

CREATING WEB PAGE USING ONLINE WYSIWYG

PLATFORMS AND-DROP INTERFACE
WYSIWYG

 Is an acronym for “what you see is what you There are many available software that you can use to
get”. design a webpage.
 It is a type of editing software that allows users
to see and edit content in a form that appears Example:
as would when displayed on an interface or  Weebly
webpage.  Wix
 Wordpress
 Zoho
WIX  Adobe Dreamweaver and so on..
 Is a pure WYSIWYG, free cloud-based web
development platform that allows users to
create HTML5 websites and mobile sites. BASIC WEB DESIGN PRINCIPLES AND ELEMENTS

Hands-on: Using Wix to create a Web Page Web Design

1. Open the web browser and type in the address  Web Design is a concept of planning, creating,
bar www.wix.com then press enter. updating and maintaining websites.
2. Click Get Started then choose to sign in with  A good design allows the user to understand the
facebook, Google, or Sign up a new account. message, contents and ideas in the most
convenient way.
  Website design must be portable and accessible
by the users who have different browsers, OS,
Web Design Elements and computer platforms.
Text  It is important to consider building your website
with a responsive layout where your website
 Font family and type must be chosen well, clear, can adjust to different screens.
and in readable size.
Direction
Graphics/Illustrations, Layout
 There should be a consistent layout and
 Must be with good quality and well arranged structure.
with the text and other elements.  F-based pattern is the most common way
visitors scan text on a website.
Navigation
Accessibility
 Effective navigation buttons are essential to any
website.  When a visitor enters the website, he/she must
be able to easily access the information.
Background
 Grids help to structure your design and keep
 This element must be used to bring out the your content organized.
content given on the website to make it look
Simplicity
more appealing.
 The more options you place in you site, the
Color
more difficult it is for a visitor to make a
 Use bold colors that will attract but not too decision and more time is required to browse
distracting, must blend well and complement through them.
the elements on the page.  Simplicity is the best way to go when
considering the user experience and the
Video/Audio
usability of your website.
 Will help viewers easily understand what you
Convenience
are teaching or selling.
 To allow a visitor to make an action, the click
Links
buttons should be conveniently located and
 Will allow users to connect to another site or accessible.
page that is related to the content of your page  Navigation is the way finding system used on
or site. websites where visitors interact and find what
they are looking for.

Functional
Web Design Principles
 A website must be clear and easy to use.
 A good web design must contain elements that
are not only appealing but should be functional, Design for Low Bandwidth
responsive, and useful.
 Website design must be accessible at a variety
Website Purpose of speeds.
 Avoid large graphics or animations as the users
 Your website needs to accommodate the needs may leave the site of downloading is slow.
of the user.  Waiting for a website to load will lose visitors.
Portable Design
 A public or private sharing method or tool for computer
files, whether online or in a network with various levels
of access privilege.
L3-4  Ex: Google drive, one drive, dropbox
Collaboration CHARACTERISTICS OF GOOD COLLABORATIVE TOOLS
 is a working practice whereby individuals work AND PLATFORMS.
together for a common purpose to achieve  The tool must be user friendly.
business benefit..”  The tool has elements that are appropriate for
 Collaboration can be either “Synchronous” or the team's goal.
“Asynchronous”  The tool prioritizes security and privacy.
Collaborative Development

 Is a process or strategy in which different people TEAM STRUCTURE

or organizations work together on the
development of a certain project or product or  The formation of either an individual team or of
are working together towards a common goal. a multi-team system.

Online Collaborative Tools

 is a technology tool that can be used to help

people in working together to achieve a
common goal or objective.

HERE ARE THE TOOLS THAT CAN BE USED TO HELP

REMOTE TEAMS TO COLLABORATE AND BE MORE
EFFICIENT:
Communication Tools

 Electronic communication devices which allow

to work together through messaging or video
conferencing.
 Ex: zoom, GoToMeeting, ZOHO Meeting, google TEAM DYNAMIC
meet, Jitsi Meet, ez, Microsoft Teams, skype,  is the psychological aspects that affect the
Design Tools results of a team’s performance.

 This is the term is used to refer to the objects,

media, or programs which can be used in To strengthen your team’s dynamics, use the following
designing. strategies:
 Ex: Canva, Adobe Photoshop, Adobe illustrator
 Know your team.
Documentation Tools  Tackle problems quickly with good feedback.
 These are tools that can be used to view, edit  Define roles and responsibilities.
and create text documents of all types.  Break down barriers.
 Ex: google docs, Zoho docs, Word  Focus on communication.
 Pay attention.
File Sharing Tools

PROJECT MANAGEMENT FOR ICT CONTENT

Project Management ICT is an important part of the social environment today
and has made an impact on the social issues that
 The application of knowledge, skills, tools, and
surround the public.
techniques to project activities is called Project
Management. It is the fastest way to spread, share, and access
information anywhere in the world.
5 MANAGEMENT PROCESS

THE POWER OF SOCIAL MEDIA

 As of today, social media was known to be the
most powerful platform to use if you want to
generate instant and massive public reactions to
whatever concerns or issues that you have.

THE SOCIAL POWER OF SOCIAL MEDIA

 Social media is more than just news and
entertainment.
 Social media can be an environment to
encourage, communicate, share stories, get
opinions, and exercise the freedom to say what
Initiation
people want.
 Forming and proposing title & objectives
Social Media can:
 Reason
 Promote social change or advance reforms.
Planning
 Access to those who are impoverished, hurting,
 Create plans left out, or victims.
 Think best strategies to achieve objectives  Stop bullying or discrimination.
 Creating time table  Help during calamities or tragedies.
 Setting budget  Allow people to have responsibility to engage as
citizens.
Execution

 Doing the plan or task

 Taking necessary steps ICT IN THE RECENT HISTORY OF THE PHILIPPINES
 See product
EDSA (People
Monitoring & control
 Power Revolution) The People Power Revolution
 Check if the project meets the objectives lasted from 1983 to 1986.
 Check quality of the output of the project  Radyo Veritas (nanawagan sa government na
 Satisfaction sabhian na pumunta sa EDSA para mapaalis sa
posisyon ung pangulo – Ferdinand Marcos Sr.
Closure
due to Martial Law)
 Present product to client
EDSA Dos

 This was also known as the 2001

L5-6  EDSA Revolution which happened during
January 17 to 21, 2001.
ICT AS PLATFORM FOR CHANGE
  through text brigades (pinaalis si Joseph Erjecito 5. Tell your story. Explain the problem, and why you
Estrada because of plunder case care about it! Explain the impact the solution you
mentioned in your
6. title would have.
7. Add a photo. You don’t have to add a picture, but as
Million People March they say - a picture is worth a thousand words!
 This was a series of protest that mainly took 8. Add your phone number. This allows campaigners to
offer tips and tricks to being successful.
place in Luneta Park from
9. Check out your preview! This is a chance to see all
 August 22 to 26, 2013.
your hard work in one place, and get a feel for what
 social media campaign (limited) (protest pork others will see when they come to sign your petition.
barrel) 10. Once you’re ready, hit the big red “Publish petition”
button in the bottom right corner.

Yolanda People Finder

 Recent storms in the Philippine history gave Digital Citizenship

birth to the people finder database powered by Internet and technology is very affordable this time,
Google. even the young kid can browse the online world in one
click of the finger.

ICT AS MEDIUM FOR ADVOCACY As a responsible person, we must always bear in our
mind that every actions should have a corresponding
 The use of ICT has a great impact on social responsibility.
movements since things have already happened
through its influence.

Advocacy DIGITAL CITIZENSHIP AND THE FILIPINO PEOPLE

 is a way of expressing views, opinions, concerns Digital Citizenship

information access and on establishing to all  a term use to a social responsibility in the digital
one’s rights and responsibilities through any world.
possible means or ways.  It involves the appropriate and responsible use
PLATFORM FOR PLACING PETITIONS OR CHANGE of technology to all users.
 It is more than being safe online.
ADVOCACY
Digital Citizen
Change.org
 is a term use to describe a person who uses the
 Change.org is dubbed as the “world’s platform
online and technology world safely and
for change” where anyone from the online
responsibly.
community can create a petition and ask others
to sign it.

How to start your petition. NINE ELEMENTS OF DIGITAL CITIZENSHIP

1. Decide if your petition is on a local, national, or Digital Access
global scale! No change is too big or too small.
2. Select a topic that best fits your petition. If none of  it is full participation in society through
them fit, choose “Other.” electronic means.
3. Let us know how many people you think you can
share your petition with. Don’t worry if it’s only a Digital Commerce
small number!
4. Add a title. Make sure to keep it short, and focus on
naming a solution, rather than stating the problem.
  E-commerce is increasing and is here to stay, as
selling buying of goods online becomes the
norm for shopping for its ease and saving.

Digital Communication

 Today, it is easier, faster and cheaper to get in

touch with anyone around the world and
beyond.

Digital Literacy

 deals with the learning and then sharing or

teaching about the technology available online.

Digital Etiquette

 is appropriate conduct on the internet and is

very challenging, considering that people come
from different backgrounds and cultures.

Digital Law

 deals with the laws and ethics in society as a

value.

Digital Rights & Responsibilities

 is the right to privacy and speech protection in

the digital world.

Digital Health & Wellness

 the dangers of using the computer and the

internet have manifested and have caused
suffering to digital citizens.

Digital Security

 the dangers of identity and information theft,

hacking of computers for information, and many
threats caused by other citizens are very real.