Evaluate existing online

creation tools, platforms

and applications in
developing ICT content for
specific professional tracks
CS_ICT11/12-ICTPT-Ig-h-9
Apply web design principles
and elements using online
creation tools, platforms, and
applications to communicate a
message for a specific purpose
in specific professional tracks
CS_ICT11/12-ICTPT-Ig-h-10
Create an original or derivative
ICT content using online
creation tools, platforms, and
applications to effectively
communicate messages related
to specific professional tracks
CS_ICT11/12-ICTPT-Ig-h-11
What is Principles of
Design?
What are the different
examples of design
principles
Element - el·e·ment
noun
a component or constituent of a
whole or one of the parts into
which a whole may be resolved
by analysis.
Elements of Design
The elements are components or
parts which can be isolated
and defined in any visual
design or work of art. They are
the structure of the work, and
can carry a wide variety of
messages.
Elements of Design
The major difference between
principles and elements is that
principles are rules you have to
follow and elements are the things
that will help you complete those
rules for the best outcome.
Elements of Design
Creating beautiful design is about more
than inspiration or a great idea, it’s about
understanding the fundamentals of the
subject. Although it’s possible to spend
years studying the nuances of design and
the many varying takes on how to be
successful at it, there are a handful, or two,
of basic elements that every designer should
know before beginning any project.
The elements are:
-Line
-Color
-Shape
-Size
-Value
-Texture
-Space
Webpage Design Using
Templates and Online
WYSIWYG Platforms
Website/web template
is a pre-designed webpage or set of HTML
webpages that anyone can use to “plug-in” their
own text content and images into to create a
website. Usually built with HTML (Hyperlink Text
Mark-up Language) ,website templates allow
anyone to setup a website without hiring a
professional web developer or designer. HTML -
plain text code language that is used to allow
web browsers to render webpages as designed.
TYPES OF WEB TEMPLATES
•Self contained ZIP file downloads
•Part of a proprietary web builder interface
•Included with an HTML software editing
program
•They may be responsive, adaptive or static
in design or configured specifically for
mobile
What can Web template include:
• Text
• (.jpg)(.png) or (gif) images
• jQuery and CSS3 animation
• Shopping carts
• Contact forms
• Dynamic image galleries and slideshows
• PDF download links page
• Video players (including embedded
Youtube movies)
Web templates
passed the Google
Mobile- Friendly Test.
TYPES OF MOBILE
-Web Templates Responsive Full
website with mobile version
(adaptive)
-Mobile and mobile optimized
Mobile upgrade (for older
websites)
WYSIWYG (pronounced "wiz-ee-wig")
- editor or program, one that
allows a developer to see what
the end result will look like while
the interface or document is
being created. It is an acronym
for "what you see is what you
get".
WYSIWYG (pronounced "wiz-ee-wig")
A WYSIWYG editor can be contrasted with
more traditional editors that require the
developer to enter descriptive codes (or
markup ) and do not permit an immediate
way to see the results of the markup. The
first true WYSIWYG editor was a word
processing program called Bravo by
Charles Simonyi.
BEST WYSIWYG PLATFORMS
1. Cloud LGS puts more effort into providing the
best mobile phone website builder program.
Developed and offered by Cloud LGS, displays
beautiful across all screen sizes, creates
responsive designed websites which are packed
with online tools & features to help
entrepreneurs grow their business from a cell
phone.
BEST WYSIWYG PLATFORMS
2. Wordpress the choice of most
web creation professionals, it is an
excellent tool for the creation of
your website, can be utilised for
blog sites with customized options
to choose from.
BEST WYSIWYG PLATFORMS
3. Wix has been touted to a strong
contender in the WYSIWYG web
builder category. The template designs
are very impressive, and there so
much flexibility on how one can design
their website due to the nature of this
web creation platform. It also allows for
an easy insertion of web animations.
BEST WYSIWYG PLATFORMS
4. Squarespace templates
available are rich in aesthetically
pleasing designs, and almost lean
to the concept of minimalism. This
web creation platform’s site are all
mobile responsive.
BEST WYSIWYG PLATFORMS
5. Weebly is commonly compared to Wix as
they both provide the same experience when it
comes to website creation. It allows for
interchanging of a template even after one has
been chosen from the beginning and
somewhat limited website creation
customizations allow for the building of a
website that loads faster for users.
Two most common used HTML editors:
1. FrontPage- WYSIWYG editor with
similar toolbars/ interface to other
Microsoft Programs
2. Dreamweaver- incorporates many
advanced features (accessibility support,
dynamic language support, code editing,
XML support, growing Javascript
Library)
ADVANTAGES:
- Controls file structure within the
program
Works much like any popular word
processor
Little knowledge of HTML needed for
basic pages
Quick time development
DISADVANTAGES:
- Complex pages can easily be composed
that do not follow standards and therefore
are not cross platform/ cross browser
compatible
Many still not well accomplished at writing
dynamic pages(ASP, PHP, JSP, ColdFusion)
Many have browser bias
Other Subject/s Integration:
Which among the elements of
design will you follow best for
your future blog layout?
Explain.
Complete the statement…
Elements of design is _______
WYSIWYG is pronounced as
_________ and is _________
What is WYSIWYG?
Best of WYSIWYG Platforms
Most commonly used HTML
editors
Advantages and
Disadvantages
Creating Your Own Site using Jimdo
Jimdo is a WYSIWYG web hosting service
offering free and paid services. It has an android
and iOS application that let you manage your
site on mobile. Jimdo has tools that will allow
you to sell your product online, create your own
photo gallery, add videos, and many more. You
can also maximize search engines by properly
tagging site.
Creating Your Own Site using Jimdo
1. Create an account on Jimdo by
going to www.jimdo.com and
clicking Create Your Free Website
2. You will be instructed to choose a
template. Pick any template that you
want.
Creating Your Own Site using Jimdo
3. Choose a URL for your website. Enter
your email and password.
4. Your website will be generated and soon
you will end up in the site’s WYSIWYG
editor.
5. The editor is pretty easy to use. The
center shows the preview of your website:
The design tools are located on the right.
Editing Elements
Hovering over a text, image, or any
element you see on website will highlight
the element.
I. Header
II. Image
III. Paragraph
Editing Elements
I. Header
If it is a header, clicking the text
will allow you to edit the text and
change its font size.
Editing Elements
II. Image
- Sizing Tools
- Align Tools
- Rotate Tools
- View Tools
- Other Tools
Editing Elements
III. Paragraph
If it is a paragraph, you will be
treated to even more options
similar to using a word
processor
Adding Elements
Add Elements button:
a. Heading – to insert heading type or text
b. Text – to insert a paragraph type of text
c. Photo – to insert a single photo
d. Text with Photo – to insert a photo
surrounded with text
e. Photo Gallery – to insert multiple photos
on one area
Adding Elements
Add Elements button:
f. Horizontal Line – to insert a horizontal
line that acts as a divider
g. Spacing – to add a space with a
specified size
h. Columns – to insert columns that
divide an area vertically
i. Video – to insert a video from a video
hosting site like YouTube
Adding Elements
Add Elements button:
j. Form – creates a Send an Email form for
feedback
k. Store Item – adds a space for selling an item
(online shopping)
l. Share Buttons – adds buttons for the site
visitor to share your website
m. Additional Elements – includes other
options like Google Maps, file download,
widgets, etc.
Site Settings (Jimdo Free Tools)
-Templates
-Style
-Blog
-Upgrade
-Settings
-SEO
-Store
-Statistics
-Help
Settings
contains important information that you
should edit to make the most out of your
Jimdo website
-Account settings
-Website
-Mobile settings
-Email and Domain Management
-Store
-SEO
-Apps
Which among the given
examples will you try
for your future web
layout? Explain.
Which platform do you
prefer: WordPress or
Jimdo? Why?
Based from your last work
on the mission statement,
you come up with slogan,
message, or call to action
that will be subjected to
design media.
 On a piece of paper, answer the following questions:
1. Which creation application can you
use to incorporate ICT content that
will help you effectively communicate
messages in your professional track?
2. Which design elements and
principles can you combine to
communicate with your intended
audiences?
 Category Exemplary Accomplished Developing Beginning Score
5 4 3 1

Content Response indicates Response Response lacks Response is

( Quality and depth and indicates focus or unfocused,
Clarity of complexity of simplistic or demonstrates illogical or
Thought) thought in repetitive confused or incoherent.
answering the thoughts in conflicting No essay
essay question. answering the thinking. response
essay question. provided.

Writing Response is well Response is Response is Response is

( organized and organized and fairly organized disorganized and
Organization developed with developed with and developed, underdeveloped,
& appropriate support general presenting providing little or
Development to make meaning supporting ideas generalizations no relevant
of Ideas clear (well-chosen provided without support.
) examples). (reasons/general adequate No essay
examples). support. response
provided.