EMPOWERMENT TECHNOLOGIES
Camarines Norte Chung Hua High School Foundation, Inc.
Rosh John Vincent R. Opeda Grade 12 ABM - Rubellite
Lesson 1: ICT
1. Deals with the use of communication
technologies such as mobile phones, telephone,
Internet, etc.
- Information
and
Communication
Technology (ICT)
ICT in the Philippines
- Philippines as “ICT Hub of Asia”
TIME MAGAZINE'S "TIME SELFIEST CITIES
AROUND THE WORLD" OF 2013 PLACES TWO
CITIES FROM THE PHILIPPINES IN THE TOP 1 AND
TOP 10 SPOTS. THE STUDY WAS CONDUCTED
USING INSTAGRAM, A POPULAR PHOTO SHARING
APPLICATION.
Web 2.0: Dynamic Web Pages
★ Web 2.0 term - coined by Darcy DiNucci in
January 1999.
★ Web 2.0 - evolution of Web 1.0 by adding
dynamic pages.
★ Users can see pages that are different from
others.
STATIC
- also known as flat page or stationary page. The
page is “as is” and cannot be manipulated by the
user.
SOCIAL MEDIA USAGE
4. Long Tail
5. Software as a Service
6. Mass Participation
FOLKSONOMY
- allows users to categorize and classify/arrange
information using freely keywords.
Hashtag - it is used to categorize posts on a website.
RICH USER EXPERIENCE
- dynamic and responsive to user’s input.
USER PARTICIPATION
- the owner of the website is not the only one who
is able to put content. Others are able to place a
content of their own by means of comments,
reviews, and evaluations.
LONG TAIL
- services that are offered on demand rather than
a
one-time
purchase.
Synonymous
to
subscribing to a data plan that charges you for
the amount of time.
SOFTWARE AS A SERVICE
- users will subscribe to a software when needed
rather than purchasing them.
MASS PARTICIPATION
- diverse information sharing through universal
web access.
Web 3.0 and The Semantic Web
SEMANTIC WEB
- a movement led by the World Wide Web
Consortium (W3C).
-
58% of the population of the Philippines have
Internet access.
-
The W3C standard encourages web developers
to include semantic content in their web pages.
-
52% of the population are mobile-active social
media users.
-
The term was coined by the investor of the
World Wide Web (WWW), Tim Berners-Lee.
-
34% global average of mobile-active social
media users.
-
Lee also noted that the Semantic Web is a
component for Web 3.0
-
42% Regional average of mobile-active social
media users.
FEATURES OF WEB 2.0
1. Folksonomy
2. Rich User Experience
3. User Participation
SEVERAL PROBLEMS OF WEB 3.0
1.
2.
3.
4.
5.
Compatibility
Security
Vastness
Vagueness
Logic
-
Web 1.0 - the mostly read-only Web.
-
Web 2.0 - the wildly read-write Web.
-
Web 3.0 - the wildly write-read Web.
TRENDS IN ICT
1.
2.
3.
4.
Convergence
Social Media
Mobile Technologies
Assistive Media
CONVERGENCE
- Technological convergence is the synergy of
technological advancements to work on a similar
goal or task.
SOCIAL MEDIA
- is a website, application, or online channel that
enables web users to create, co-create, discuss,
modify, and exchange user-generated content.
MOBILE TECHNOLOGIES
- The popularity of smartphones and tablets has
taken a major rise over the years.
-
Today, the latest mobile devices use 4G
Networking (LTE), which is currently the fastest
mobile network.
ASSISTIVE MEDIA
- Assistive media is a nonprofit service designed
to help people who have visual and reading
impairments.
-
A database of audio recordings is used to read
to the user.
6 TYPES OF SOCIAL MEDIA
BOOKMARKING SITES
- These are sites that allow you to store and
manage links to various websites and resources.
-
Examples: StumbleUpon and Pinterest
SOCIAL NEWS
- These are sites that allow users to post their own
news items or links to other news sources.
-
Examples: Reddit and Digg
MEDIA SHARING
- These are sites that allow you to upload and
share media content like images, music and
video.
-
Examples: Flicker, YouTube, and Instagram
MICROBLOGGING
- These are sites that focus on short updates from
the user. Those subscribed to the user will be
able to receive these updates.
-
Examples: Twitter and Plurk
BLOGS AND FORUMS
- These websites allow users to post their content.
Other users are able to comment on the said
topic.
-
Examples: Blogger, WordPress, and Tumblr
OPERATING SYSTEMS
1. IOS - used in Apple devices such as the iPhone
and iPad.
2. Android - an open source (for free) operating
system developed by Google.
3. Blackberry OS - used in Blackberry devices.
1.
2.
3.
4.
5.
6.
Social Networks
Bookmarking Sites
Social News
Media Sharing
Microblogging
Blogs and Forums
SOCIAL NETWORKS
- These are sites that allow you to connect with
other people with the same interests or
background.
-
Examples: Facebook and Google+
4. Windows Phone OS - a closed source and
proprietary operating system.
5. Symbian - the original smartphone OS; used by
Nokia devices.
6. Web OS - originally used for smartphones; now
used for smart TVs.
7. Windows Mobile - developed by Microsoft for
smartphones and pocket PCs.
EMPOWERMENT TECHNOLOGIES
Camarines Norte Chung Hua High School Foundation, Inc.
Rosh John Vincent R. Opeda Grade 12 ABM - Rubellite
Lesson 2: Rules of Netiquette
NETIQUETTE
- Etiquette for the Internet.
2. Spam - unwanted email mostly from bots or
advertisers
3. Phishing - Its goal is to acquire sensitive
personal information like passwords and credit
card details.
INTERNET
- truly, is a powerful tool.
-
It can be used to promote your business, gain
new friends, and stay in touch with the old ones.
-
source of entertainment through games, online
communities, and everything in between.
-
The Internet is one of the most dangerous place,
especially if you do not know what you are doing
with it.
THE INTERNET
- is defined as the information superhighway or
also known as infobahn.
-
this means that anyone has access to this
highway, can place information, and can grab
that information.
INTERNET THREATS
a. Pharming - a more complicated way of
phishing where it exploits the DNS
(Domain Name Service) system.
If you create something— an idea, an invention, or a
form of literary work, or research, you have the right as
to how it should be used by others. This is called
intellectual property.
Copyright Law
- includes your rights over your work, and anyone
who uses it without your consent is punishable
by law.
Tips that could help you Avoid Copyright
Infringement
1.
2.
3.
4.
1. Malware - stands for malicious software.
a. Virus - a malicious program designed to
replicate itself and transfer from one
computer to another.
b. Worm - a malicious program that
transfers from one computer to another
by any type of means.
c.
Understand
Be responsible
Be creative
Know the law
Tips in Conducting Online Research
1.
2.
3.
4.
5.
Have a question in mind
Narrow it down
Advanced search
Look for a credible source
Give credit
KEY TERMS
Trojan - a malicious program that is
disguised as a useful program.
* Rogue Security Software - tricks the
user into posing that it is a security
software.
d. Spyware - a program that runs in the
background without you knowing it (thus
called "spy").
-
It has the ability to monitor what
you are currently doing and
typing through keylogging.
e. Adware - a program designed to send
you advertisements, mostly as pop-ups.
Cybercrime
a crime committed or assisted
through the use of the Internet.
Privacy Policy
tells the user how the website will
handle its data.
Fair Use
means that an intellectual property
may be used without a consent as
long as it is used in commentaries,
criticism, search engines, etc.
-
Lesson 3: Advanced Word Processing Skills
MAIL MERGE
- This feature allows you to create documents and
combine or merge them with another document
or data file.
-
It is commonly used when sending
advertising materials to various recipients.
out
2 Components of Mail Merge
1. FORM DOCUMENT
- It is generally the document that
contains the main body of the message
we want to convey or send.
2. LIST or DATA FILE
- This is where the individual information
or data that needs to be plugged in to
the form document is placed and
maintained.
PLACE HOLDERS
- This marks the position on your document
where individual data or information will be
inserted.
-
Usually denoted or naked by the text with
double-headed arrows (<< >>) on underlined
spaces that you will see and use as a guide.
LABEL GENERATION
- This feature allows you to create and combine
documents and/or data files.
-
Commonly used in sending.
INTEGRATING IMAGES and EXTERNAL MATERIALS
- This feature allows you to create and combine
documents and/or data files.
-
Commonly used in sending advertising materials
to various recipients to allow easy editing in
terms of certain information within the letter.
Kinds of Materials
1. PICTURES
- electronic or digital pictures or
photographs you have saved in any
local storage device.
- Photographs you have saved in your
local storage device.
★ .JPG.
- pronounced as “jay-peg”
- Joint Photographic Experts Group
★ .GIF.
★ .PNG.
-
Identifies the kind of data compression
process that it uses to make it more
compatible and portable through the
internet
Graphics Interchange Format
stands for “Graphic Experts Group
Capable of displaying transparencies
pronounced as “ping”
stands for “Portable Network Graphics”
Transport images on the internet at
faster rates
2. CLIP ART
- GIF type; line art drawings or images
used as generic representation for ideas
and objects that you might want to
integrate in your documents.
3. SHAPES
- printable objects or materials that you
can integrate in your document to
enhance its appearance or to allow you
to have some tools to use for composing
and representing ideas or messages.
4. SMART ART
- predefined sets of different shapes
grouped together to form ideas that are
organizational or structural in nature.
5. CHART
- allows
you
to
present
characteristics and trends.
data
6. SCREENSHOT
- MS Word provides a snipping tool for
your screenshots.
Image Placement
IN LINE WITH TEXT
- This is the default setting for images that are
inserted or integrated in your document. It treats
your image like a text font with the bottom side
totally aligned with the text line.
SQUARE
- Allows the image you inserted to be placed
anywhere within the paragraph with the text
going around the image in a square pattern like
a frame.
TIGHT
- Almost the same as the square setting, but here,
the text or "hugs" conforms to the general shape
of the image. This allows you to get a more
creative effect on your document.
EMPOWERMENT TECHNOLOGIES
Camarines Norte Chung Hua High School Foundation, Inc.
Rosh John Vincent R. Opeda Grade 12 ABM - Rubellite
THROUGH
- Allows the text on your document to flow even
taking the tighter, contours and shape of the
image; can be best used with a .GIF or .PNG
type of image.
TOP AND BOTTOM
- Pushes the text away vertically to the top and/or
the bottom so that the image occupies a whole
text line on its own.
BEHIND TEXT
- Allows images to be dragged and
placed
anywhere on your document but with all the text
floating in front of it.
IN FRONT OF TEXT
- allows images to be placed right in front of the
text as if your image was dropped right on it.
Lesson 4: Advanced Spreadsheet Skills
MICROSOFT EXCEL
- a software program created by Microsoft that
uses spreadsheets to organize numbers and
data with formulas and functions.
Functions of Microsoft Excel
1. COUNTIF FUNCTION
- function used to count the cells with a
specified content within a range.
open the Format Cells dialog box. Choose Alignment
tab under Orientation, specify the degrees you want.
COUNTIF FUNCTION SYNTAX
-
=COUNTIF(range, criteria)
Range - the cells where the counting will take place.
Criteria - the label or value that determines if it is to be
counted.
AVERAGEIF FUNCTION SYNTAX
-
=AVERAGEIF(range, criteria, average range)
Range - the range cells where you want to look for the
criteria.
Criteria - a value or label that determines if a cell is part
of the range to be averaged.
Average Range (optional) - the actual range of cells that
will be averaged, if omitted, the range will be used
instead.
Lesson 5: Advanced Presentation Skills
Quick Tips in Creating an Effective Presentation
2. SUMIF FUNCTION
- function used to compute for the
summation of a range if a certain
condition is met.
1. MINIMIZE
- keep slides to a minimum to maintain a
clear message and to keep the audience
attentive.
3. AVERAGEIF FUNCTION
- function used to compute for the
average of a range if a certain condition
is met.
2. CLARITY
- avoid being fancy by using a font style
that is easy to read.
COUNT
- function used to count the cells with content in a
range.
SUM
-
function used to compute for the summation of
the number of a range.
AVERAGE
- function used to compute for the average of the
number of a range.
Tip: To change the orientation of a text, press Ctrl+1 to
Tip: A font size of 72 is about an inch (depends on the
screen size). A one-inch letter is readable 10 feet
away; a two-inch letter is readable 20 feet away.
3. SIMPLICITY
- use bullets or short sentences.
-
summarize the information on the
screen to have your audience focus.
-
Limit the content to six lines and seven
words per line. This is known as the 6x7
rule.
-
Using Hyperlinks in Microsoft PowerPoint
-
4. Once you are done, click OK.
KEY TERMS
Using hyperlinks in your presentation is an easy
way to navigate slides during your presentation.
Minimize
keeping slide counts to a minimum.
Ways to Insert Hyperlinks
Clarity
1. Select an object or highlight a text.
2. Go to Insert > Hyperlinks (under links category)
or use the shortcut key Ctrl+K. The Insert
Hyperlink dialog box would appear.
3. When done, click OK to apply your hyperlink.
Link to Options:
a. Existing File or Web Page
- creates a hyperlink to a website or a
local file saved in your hard drive.
b. Place in This Document
- creates a hyperlink that allows you to
jump to a specific slide in your
presentation.
Simplicity
using bullets or short sentences;
applying the 6x7 rule.
Visuals
using graphics that attract, not distract
the audience.
Consistency
Contrast
Hyperlink
Embedding
c. Creates a New Document
- creates a hyperlink that once clicked,
creates a new document on your
specified location.
d. E-mail Address
- creates a hyperlink that opens Microsoft
Outlook that automatically adds your
specified recipient on a new email.
EMBEDDING OBJECTS
- is easy using Microsoft PowerPoint. With this
option, you can insert an Excel file that would
look like a table to a presentation.
Embedding an Excel File to your Slide
Presentation
1. Go to the Insert tab.
2. On the Text group, click an Object.
3. The insert Object dialog box would appear:
making sure the font is readable.
making your designs uniform.
using light font on dark background or
vice versa.
a text or object that contains a link to
another file, web page, a place in a
document, a link to a new document,
or an email address.
the act of placing objects within the
presentation.
Lesson 6: Imaging and Design for Online
Environment
Basic Principles of Graphics and Layout
1.
2.
3.
4.
5.
6.
Balance
Emphasis
Movement
Pattern, Repetition, and Rhythm
Proportion
Variety
Balance - the visual weight of objects, texture, colors,
and space is evenly distributed on the screen.
Emphasis - an area in the design that may appear
different in size, texture, shape, or color to attract the
viewer’s attention.
Movement - visual elements guide the viewer’s eyes
around the screen.
a. Creates New - creates a new file from
scratch. You can select on a wide variety
of files listed.
Pattern, Repetition, and Rhythm - repeating visual
elements on an image or layout to create unity in the
layout or image.
b. Create from File - creates a file from an
existing file saved on your hard drive.
a. Rhythm - is achieved when visual elements
create a sense of organized movement.
EMPOWERMENT TECHNOLOGIES
Camarines Norte Chung Hua High School Foundation, Inc.
Rosh John Vincent R. Opeda Grade 12 ABM - Rubellite
Proportion - create a sense of unity where they relate
well with one another.
Variety - uses several design elements to draw a
viewer’s attention.
6. To save your work, click on Save on the top right
of the page. To save it in your computer, click on
Download. In the download options, select the
medium-sized and the PNG file type.
Common Image File Formats
INFOGRAPHICS
Information graphics or infographics
- are used to represent information, statistical
data, or knowledge in a graphical manner.
-
make complex data become more visually
appealing to an average user.
Creating Infographics Using Piktochart
1. Create a Piktochart account by going to
www.piktochart.com and click sign up on the
upper right corner of the page.
2. Fill up the information on the Sign Up page;
alternatively, you can connect with Google+ or
Facebook.
3. Once you have created an account and logged
in, select a template for your infographic. Since
your data relates to marketing or sales, simply
hover over the Presenta Board theme under
Free Themes then select Create.
4. The Piktochart editor will open (may take a while
to load depending on your internet connection).
The Presenta Board theme consists of three
blocks (parts). Select the blocks and input the
information as you see it.
5. While editing a block, you can use the various
tools on the left side of the page:
a. Graphics - insert lines, shapes, icons,
and even photos
b. Uploads - upload images for your
infographic
c.
Background - changes the background
d. Text - insert text to your infographic
e. Styles - modify the color scheme
f.
Tools - create charts
1. Joint Photographics Experts Group
- .jpeg or .jpg
- real-life
photographs
and
compression
- no (supports transparency)
- no (supports animation)
high
2. Graphics Interchange Format
- .gif
- computer-generated graphics
- yes (supports transparency)
- yes (supports animation)
3. Portable Network Graphics
- .png
- screenshots and high compatibility
- yes (supports transparency)
- no (supports animation)
Tips to Help You Edit Images for your Website
1. Choose the right file format
- try to make real-life photograph into GIF
2. Choose the right image size
- a camera with 12 megapixels
3. Caption it
- remember to put a caption on images
PHOTOSCAPE
- is a good tool because it is feasible for beginners
and advanced users alike.
On PhotoScape’s main screen, you will see the
many features it has that you can use for creating
web content as follows:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
Viewer
Editor
Batch Editor
Page
Combine
Animated GIF
Print
Splitter
Screen Capture
Color Picker
Raw Converter
12. Rename
13. Paper Print
Viewer
- as the name implies, is a picture viewer with
features
Editor
- alters the appearance of a single image
Batch Editor
- alters the appearance of multiple images
Page
-
STORAGE SPACE
- is pretty straightforward; it is like having a 16GB
flash drive where it limits you to just 16GB.
BANDWIDTH
- limits hinders an access to your image once a
certain bandwidth quota is reached.
INDICATORS
arranges several photos
Combine
- links several images together
Animated GIF
- create an animated GIF from several pictures
Print
-
BATCH EDITING
- one of the most useful tools when trying to easily
manipulate all images at the same time.
a. View Uploads - view photos you just uploaded
b. Share Album - shares everything you just
uploaded
c.
Edit Photos - uses Photobucket’s photo editing
tools
readies pictures for printing
Splitter
- divides a single photo into multiple parts
Screen Capture
- captures the screen and saves it
Color Picker
- grabs a pixel from your screen
Raw Converter
- converts raw images to JPEG
Rename
- allows you to rename a batch of photos
Paper Print
- useful tool for printing your own calendars,
sheets, lined paper, graph paper, etc.
Manipulate the images using the tools on the bottom:
a. Home tab - add a frame, resize, sharpen, and
add filters and effects
KEY TERMS
Piktochart
free online app that allows you to
create your own infographic
PhotoScape
a free image manipulation tool
PhotoBucket
an image hosting site
Bandwidth
amount of data used to download
your image by multiple users
Lesson 7: Online Platforms for ICT Content
Development
1. SOCIAL MEDIA PLATFORMS
- Websites like Facebook allow you to
create not only personal accounts but
also pages and groups where you can
share content.
-
The only downside of this is that you are
restricted
to
Facebook’s
“one-size-fits-all” design.
Crop - various tools can be found in order to
properly crop
-
On the plus side, Facebook has billions
of users.
d. Tools - includes other tools like red eye
correction, mole removal, mosaic effect and
brush tools
-
LinkedIn is another example of a social
networking site where its focus is on
business and professional networking.
b. Objects tab - place a wide variety of images
c.
EMPOWERMENT TECHNOLOGIES
Camarines Norte Chung Hua High School Foundation, Inc.
Rosh John Vincent R. Opeda Grade 12 ABM - Rubellite
2. BLOGGING PLATFORMS
- Websites like WordPress, Tumblr, and
Blogger focus on content and design.
-
It typically looks like a newsletter where
you are given options to change the
design to your liking.
-
Though you can manipulate the design,
social media platform's popularity is still
unrivaled.
-
The amount of customization in blogs
is also unrivaled depending on the
content
management
system
implemented by the provider.
CONTENT MANAGEMENT SYSTEM (CMS)
- is a computer application (sometimes online or
browse-based) that allows you to publish, edit,
and manipulate, organize and delete web
content.
-
CMS is used in blogs, news websites, and
shopping.
Creating Your Own Blog Using WordPress
1. If you do not have a WordPress account yet,
sign up by visiting https://wordpress.com/.
2. If it is your first time to visit the site, create your
first blog. If you already have a blog, there is no
need to delete it. WordPress allows you to
create multiple blogs. Simply click Register
Another Blog under My Blogs in the dashboard.
3. Pick a blog address. Name your blog then click
Create Blog (choose the free option). Once
done, you will get confirmation.
4. Click on Change Your Blog Description or
Permissions. The general settings page will
appear.
Set your site title and tagline. Set the time zone
to Manila. You may also insert a blog picture or
icon on the right side. (Tip: You can search icons
at www. iconarchive.com).
You may change the other settings according to
your preference. When done, click on Save
Changes located at the bottom of the page.
5. On the left menu, choose Appearance >
Themes.
6. On the themes page, select Free to filter out the
paid themes.
7. Select any theme you want by hovering the
mouse pointer over it then click activate. (Tip: If
you are happy with the current theme, just hover
over the theme then click customize.)
8. Once this dialog box appears, click Customize
Your Site.
9. You will be directed to a page where you can
edit your website. (Note: Some options differ
depending on the theme and some options may
not be available for a free account.)
a. PREVIEW WINDOW
- shows you how the websites look with
the applied changes.
b. PREVIEW SELECTION
- allows you to select what the preview
window is showing.
c. CUSTOMIZATION TOOLS
- allows you to customize the design
(limited for free users)
10. Customize the theme to your liking. Once done,
click on Save on the bottom of the customization
tools.
Posting on Your WordPress Blog
Steps on how to post for the first time:
★ STEP 1
- On your dashboard, go to Post > Add
New
★ STEP 2
- Creating a post is pretty straightforward
in WordPress. Just type a little,
customize and URL (optional), then post
in the editor.
★ STEP 3
- Compose a welcome message for you
future readers with a minimum of 100
words. (Tip: A word counter is located at
the bottom of the editor)
★ STEP 4
- You may replace the format of your post
to a standard post, an image, video,
aside, quote, or link. For now, keep it on
Standard.
★ STEP 5
- You may also add a category so that
your posts are organized. Add tags so
that others can easily search your posts
using the tags you specified.
★ STEP 6
- Once done, you may preview your post.
Once satisfied, click on Publish to post it
on your website.
- Tip: You may also change the visibility
options and schedule your post. See the
screenshot below.
★ STEP 7
- Submit the URL of your website to your
teacher.
CLOUD COMPUTING
- When we created infographics, we used
Piktochart and its infographic editor uses cloud
computing.
-
The same goes for making our own blog and
creating our first post: we used the editor from
WordPress. These are referred to as cloud
computing because we did not need to install
any software in our computer. The software is in
the "cloud" or over the Internet.
Here are some advantages and disadvantages of cloud
computing:
ADVANTAGES
1. No need to install.
2. Saves hard disk space.
3. Easy access to your software/files; can be ran
anywhere as long as there is an internet
connection.
4. Saves you money from buying software licenses
and additional hard disk space
5. No need to
automatically.
update
because
it
updates
6. Minimum system requirements.
7. backup and data recovery are relatively easier
than on a physical device.
DISADVANTAGES
1. Can be hampered down by slow Internet speed:
no connection, no cloud computing.
2. May still require compatible software like a
browser.
3. You do not own the software; you are simply
renting it.
4. Security risk of doing things over the Internet as
opposed to your personal computer alone.
5. More prone to hacking.
6. Limited control over the infrastructure itself.
CLOUD COMPUTING
- Using cloud computing is generally up to you.
Large companies opt to use the cloud because
they do not need to pay licenses for each
computer they have for their company; instead,
they can use software on demand.
EMPOWERMENT TECHNOLOGIES
Camarines Norte Chung Hua High School Foundation, Inc.
Rosh John Vincent R. Opeda Grade 12 ABM - Rubellite
Lesson 8: Basic Web Page Creation
WYSIWYG
- is the acronym for What You See Is What You
Get.
-
it offers free, professional, and business web
hosting services.
-
has an iOS and Android app which you can use
to manage your website whenever you do not
have access to a PC.
For this exercise you will create your own personal
website that focuses on your passion or hobby.
-
this means that whatever you type, insert, draw,
place, rearrange, and everything you do on a
page is what the audience will see.
-
shows and prints whatever you type on the
screen.
1. Create an account on Jimdo by going to
www.jimdo.com and clicking Create Your Free
Website.
-
is designed for anyone who has not or does not
have prior coding skills.
2. You will be instructed to choose a template. Pick
any template that you want.
Creating a Website using Microsoft Word
Step 1
Open Microsoft Word.
Step 2
Type anything on the page like “Welcome
to my Website.”
Step 3
Click on File > Save As > Browse.
Step 4
On the Save As dialog box, locate your
activities folder and create a new folder
named “Sample Web page.”
Step 5
Specify the filename “Sample Web page.”
Step 6
On the Save As type, select “Web Page
(*.htm; *.html).”
Step 7
Click the Change Title button.
Step 8
Input the title as seen below, then click OK
then Save.
Step 9
Check the files on your Sample Web page
folder. You will see a new folder generated
including your .htm or .html file.
Step 10
On the Sample Web page.htm file and you
will see that you just created a web page
using MS Word.
Tip: Any file inside the Sample Web page files folder is
generated by MS Word.
Creating Your Own Website using Jimdo
JIMDO
- is a WYSIWYG web hosting service.
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.
Tips in using the WYSIWYG editor
-
By default, the home page is shown on your
editor.
-
To navigate to another page, simply click the
page title on your navigator.
-
The site navigator contains a set of links going
through the different pages of your website.
-
The navigator currently available to you depends
on which template you used.
A sample of a navigator is shown below:
INSERTING A PAGE
1. Hover your mouse pointer over the site
navigator. The Edit Navigation button will
appear:
2. Click on the Edit Navigation button. Click on
Add a New Page.
3. Rearrange pages using the tools on the right of
the page title.
4. Click Save when done.
b. Text - to insert a paragraph type of text
EDITING ELEMENTS
c. Photo - to insert a single photo
●
●
●
●
●
Move element up - used to move the element
up by one level.
Move element down - used to move the
element one level lower.
Delete element - used to remove the element.
Copy element - used to copy the element.
Drag tool - click and drag the element to a valid
part of the page.
d. Text with Photo - to insert a photo
surrounded with text
e. Photo Gallery - to insert multiple photos on
one area
f. Horizontal Line - to insert a horizontal line
that acts as a divider
Clicking on an element will show more options
regarding on what visual element you clicked:
I.
HEADER - If it is a header, clicking the text will
allow you to edit the text and change its font
size.
II.
IMAGE - If it is an image, several options would
also appear. It also allows you to upload an
image directly from your computer or a Dropbox
account.
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
j. Form - creates a Send an Email for feedback
k. Store Item - adds a space for selling an item
(online shopping)
a. Sizing Tools - used to make image larger or
smaller or restore to actual size page.
l. Share Buttons - adds buttons for the site
visitor to share your website
b. Align Tools - used for left, right, and center
alignment page.
c. Rotate Tools - used to rotate image clockwise
or counter-clockwise page.
m. Additional Elements - includes other options
like Google Maps, file download, widgets, etc.
3. Edit the element to your liking then click Save.
d. View Tools - used to enable enlarge image,
link photo, and remove link (Tip: Enable Enlarge
Image will show a small image on the page and
will only be enlarged when a user clicks it. Link
Photo allows you to insert an image from
another website or image host like Photobucket.)
SITE SETTINGS
FEATURES
●
e. Other Tools - caption and alternative text;
allow sharing to Pinterest (Tip: Alternative Text
refers to the text that will be shown if the image
does not load.)
III.
PARAGRAPH - If it is a paragraph, you will be
treated to even more options similar to using a
word processor:
●
●
●
●
●
ADDING ELEMENTS
●
1. To add elements on screen, hover the mouse
pointer over the top or bottom of an existing
element until the Add Element button appears:
2. Select the visual element you want to add:
a. Heading - to insert heading type of text
●
●
Templates - changes the design template
selected
Style - changes the design style of the page (like
color)
Blog - creates a blog for your website
Upgrade - upgrades to JimdoPro or
JimdoBusiness
Settings - changes account and website
settings
SEO - Search Engine Optimization; used for
other to easily find your site using search
engines like Google and Bing
Store - manages the orders made from your
website
Statistics - views your site’s statistics
Help - accesses Jimdo’s help archive
EMPOWERMENT TECHNOLOGIES
Camarines Norte Chung Hua High School Foundation, Inc.
Rosh John Vincent R. Opeda Grade 12 ABM - Rubellite
SETTINGS
SETTINGS
- contains important information that you should
edit to make the most out of your JImdo website.
ACCOUNT SETTINGS
- includes changing your passwords, email, and
personal profile.
WEBSITE
- allows you to change your site title and footer;
checks your storage; creates your privacy policy
and your favicon (the icon of your website shown
on a browser).
MOBILE SETTINGS
- used to prepare your page for mobile devices.
EMAIL and DOMAIN MANAGEMENT
- settings is a premium feature.
-
It is used to manage email accounts for your
website.
STORE
- allows you to manage the items you sell on your
website.
SEO
-
is a premium feature that maximizes the Search
Engine Optimization (SEO) feature of Jimdo so
visitors can easily locate your website.
APPS
- contains settings for embedded apps on your
website like Dropbox, QR Codes, Google
Analytics, and Twitter.
JIMDO
- allows you to remove the Jimdo Box on your
website (premium feature) and check Jimdo
News.
Once you are done editing the settings, go to your
site’s URL, using a browser of your choice.
ADDITIONAL
HOME PAGE CONTENT
- entices your visitors with contents like photos of
your hobby or interest plus the context.
ABOUT ME / CONTACT ME
- adds a page containing a form element which
allows visitors to email you. You may also add
links to your Twitter page.
BLOG
- creates a page that includes details about your
WordPress blog and a link to it.
PHOTO GALLERY
- a page that contains
Photobucket account.
photos
from
your
COMMUNITY
- a page that contains links to ten of your
classmate’s websites including a short
description.
KEY TERMS
WYSIWYG
HTML
CSS
Jimdo
an editor that allows you to create and
design web pages without any coding
knowledge
stands for Hypertext Markup Language
stands for Cascading Style Sheets
a free website
WYSIWYG editor
provider
with
Template
a ready-made design for a website
Heading
the topmost label of a website
SEO
a
stands for Search Engine Optimization;
a feature that maximizes the search
engine optimization feature so visitors
can easily locate your website