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.
