NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject

Applied ICT – Empowerment Technologies

Week 1

Online
platforms as
tools for ICT
content
idevelopmen
t

Website

Designing for Online

Environment
Website Creation
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
ine
content
development
idevelopment

Website
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
ine
content
development
idevelopment

Website
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
ine
content
development
idevelopment

Website
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
ine
content
development
idevelopment

Website
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
ine
content
development
idevelopment

Website
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Module 52 Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
WWW – World Wide Web
ine
content
development
idevelopment

HTML stands for Hypertext Markup

Website

Language. Only language recognize by

the web.

HTTP stands for Hypertext Transfer

Protocol.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Web Development
ine
content
development
idevelopment

Website

- a process of developing a website. It

aims to design, create and also launch
a website.
-building of website that includes Web
Designing and Web Programming.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Web Designing
In developing a web you should take into account
ine
content
development
development

Website
the web's purpose and audience.

A good designer knows how to achieve the effects

called for in the most flexible, efficient, and
elegant way.

This includes also the design layout, images,

audio video etc. that you will place in your
webpage.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Web programming
To design a web, you should have a thorough
ine
content
development
development

Website
grounding in hypertext, multimedia, Java, and
other programming possibilities as well as
knowledge about how particular web
structures affect an audience.

Programs used in Web programming ASP,

ASP.NET, ColdFusion Markup Language (CFML),
JSP, and PHP.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Website Versus Webpages.
ine
content
development

Web Site- is anything published on the

development

Website

web that is physically located anywhere

in the world that needs a computer a
physical connection to the Internet.

Web Pages- documents that are

published on the web. Page in a website
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Website Versus Webpages.
ine
content
development

The home page is the first page of

development

Website

related webpage in your website

Three kinds of Website

•Static website
•Dynamic Website
•Liquid Website
 K to 12 Senior High School Core Subject
NEGROS OCCIDENTAL HIGH SCHOOL Applied ICT – Empowerment Technologies

Week 1

Onlplatforms

Web Designing includes the ff:

Online
as tools for
platforms as
ICT content
tools for ICT
ine
content
development
development

Website

Skill in animations -Flash, SWiZ etc.

Skill in imaging design - Adobe
Photoshop, Corel Draw, Fireworks etc.,
Skill in webpage editor HTML,
Dreamweaver
Online apps for Web Designing-
Word press, Weebly, Wix , Jimdo etc.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine
content
development
development

Website
1. Purpose
Good web design always caters to the
needs of the user. Each page of your
website needs to have a clear purpose,
and to fulfill a specific need for your
website users in the most effective way
possible.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine
content

2. Communication
development
development

Website

Some effective tactics to include in

your web design include: organizing
information using headlines and sub
headlines, using bullet points instead
of long windy sentences.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine
content

2. Communication
development
development

Website

People on the web tend to want

information quickly, so it is important
to communicate clearly, and make
your information easy to read and
digest.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms
ICT content (Sofia Woods, 2014)
as tools for
ine
ICT content

3. Typefaces
development
developme
nt

Website

In general, Sans Serif fonts such as

Arial and Verdana are easier to read
online Stick to a maximum of 3
typefaces in a maximum of 3 point
sizes to keep your design
streamlined.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine

4. Colors
content
development
development

Website

A well thought out color palette can go a

long way to enhance the user experience.
Using contrasting colors for the text and
background will make reading easier on
the eye. Vibrant colors create emotion
and should be used sparingly.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine
content

5. Images
development
development

Website

A picture can speak a thousand

words, and choosing the right images
for your website can help with brand
positioning and connecting with your
target audience.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine
content
development
development

Website
6. Navigation
Navigation is about how easy it is for people to take
action and move around your website. Some tactics
for effective navigation include a logical page
hierarchy, designing clickable buttons, and following
the ‘three click rule’ which means users will be able
to find the information they are looking for within
three clicks.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine
content

7. Grid based layouts

development
development

Website

Placing content randomly on your web

page can end up appearance that is messy.
Grid based layouts arrange content into
sections, columns and boxes that line up
and feel balanced, which leads to a better
looking website design.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Module 7 Module 8 Module 9 Module 10
1
Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine

8. “F” Pattern design

content
development
development

Website

Eye tracking studies have identified that

people scan computer screens in an “F”
pattern. Most of what people see is in
the top and left of the screen and the
right side of the screen is rarely seen.
Rather than trying to force the viewer’s
visual flow.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine

8. “F” Pattern design

content
development
development

Website
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools foras
10 Web Design Principles.
platforms
ICT content
tools for ICT
(Sofia Woods, 2014)
ine
content

9. Load time
development
development

Website

Everybody hates a website that takes

ages to load. Tip to make page load
times more effective include :
optimizing image sizes (size and
scale)
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
10 Web Design Principles.
platforms as
ICT content (Sofia Woods, 2014)
tools for ICT
ine
content

10: Mobile friendly

development
development

Website

It is now commonplace to access

websites from multiple devices with
multiple screen sizes, so it is
important to consider if your website
is mobile friendly.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Parts of a Webpage
ine
content
development
development

Website

•HEADER
•NAVIGATION MENU: Main/Sub links
•CONTET
•FOOTER:*Page links
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Module 7 Module 8 Module 9 Module 10 References
1
Module 5.2 Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
ine
content
development
development

Website
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
1. HEADER
• It includes a title and subtitle for
ine
content
development
development

Website

the page.
• It serves to orient the user to the
site. This helps remind the user of
the site he's visiting.
• Helps establish a specific design
style for that site.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
2. NAVIGATION MENU
• This menu offers a number of
ine
content
development
development

Website

hyperlinks that direct the user to the

other pages on the site (HOME,
ABOUT US, MENU, CONTACT US)
• Many websites feature a
navigation menu at the top or side of
a page.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
3. CONTENT
• Contained in the space between
ine
content
development
development

Website

the header and footer.

• The content can take many
forms, depending on the site.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
4. FOOTER
• located at the bottom of a page.
ine
content
development
development

Website

• include copyrights and credits

for material on the page.
• typically appears in small, plain
text.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
Elements on Page
• Text Information
tools for ICT
ine
content
development
development

Website • Mainlinks
• Files
• Image links
• Sub links
• Images
• Animated images
• Video Files
• Audio Files
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Arranging Elements on Page
ine
content
development
development

•Site Map
Website

•Layout
•Prepare the contents
(info text and files- like document
file, image file, video file, audio file,
animated file etc.)
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Site Map
ine
content
development
development

Website

A site map is designed to show

the connections between pages.

A graphical site map uses lines to

connect linked pages.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Site Map
ievelopment
content
development
index
Website

Home About Gallery Contacts

Pics with Pics with

friends family
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Web Page Layout
ine
content
development
development

Website

•Layout of web pages is very important

•Poor layout makes for -
• Difficult navigation
• Hard to locate information on page
• Visually unappealing
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Web Page Layout
•Use tables to lay out your pages.
ine
content
development
development

Website
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
Areas of a Webpage
tools for ICT
ine
content
development
development

Website
HEADER
MAINLINKS

CONTENTS

PAGE LINKS
Copyright / Author’s name
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies
Module 1
1
Week 1

Onlplatforms
Online
as tools for
platforms as
ICT content
tools for ICT
Contents
•Text Information
ine
content
development
development

Website

• Files (document file,

image file, video file, audio
file, animated file etc.)
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
PERFORMANCE TASK 1A
• Create your
ICT content
tools for ICT
ine
content
development
development

Website
presentation/visualization design using
your PowerPoint presentation
• Use may select any
presentation/visualization online
platform.
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
PERFORMANCE TASK 1B
• Creating your own blog using any
ICT content
tools for ICT
ine
content
development
development

Website
blogging platform.
• Post related articles and pictures of
your strand
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
PERFORMANCE TASK 1C
Creating your group website using any web creation platform.
Online
as tools for
platforms as
ICT content
tools for ICT
ine
content
development
development
Create your own personal website using any online platforms
Website
for web designing.
1. Use the following navigational main links:
HOME ABOUT US PHOTO GALLERY ARTICLES
Home – Welcome page that entices your visitors visit your site.
About Me – Adds a page containing personal information
about yourself, a form element which allows visitors to email
you. You may also add links to your google account apps and
other related apps.
Photo Gallery – A page that contains your photos
ARTICLES -A page that contains articles about your strand
 NEGROS OCCIDENTAL HIGH SCHOOL K to 12 Senior High School Core Subject
Applied ICT – Empowerment Technologies

Week 1

Onlplatforms
Online
as tools for
platforms as
2.Create a site map
3.Create a draft of your design
ICT content
tools for ICT
ine
content
development
development

Website
Look for online platform to create your
website
Recommended sites:
• Weebly.com
• Jimdo.com
• Wordpress.com
• Wix.com