PRAYER
University of Santo Tomas
Senior High School
COURSE: Empowerment Technologies
LESSON 11: DIGITAL CONTENT FOR WEB
DEVELOPMENT
SY 2021-2022
Course Facilitator:
Mr. Russell B. Carrasco, LPT, MBA
University of Santo Tomas - Senior High School
COURSE: Empowerment Technologies
§ Attendance
§ Lecture on Lesson 11: DIGITAL CONTENT
FOR WEB DEVELOPMENT
§ Lecture about HTML Fundamentals
§ Individual Activity (Formative Assessment)
§ PETA (Instructions)
Course Facilitator:
Mr. Russell B. Carrasco, LPT, MBA
TYPES OF DIGITAL CONTENT
(1) Blogs (“weblog”)
• Long form - Blogs with 1500 - 3500 words.
According to Google, longer content contain
more information and therefore, helps solve
many queries of the audience at once.
• Short form – The fact that short form blogs
have lesser word count, that may go down to
250 words or lesser, can make it less popular in
SEO. Therefore, it’s important the blogs being
short, should also be precise and unique.
https://www.thepoortraveler.net
Almighty God, thank you for being the cornerstone of my life
and the foundation of everything I believe. Grant me the gift
of loyalty and tender kindness towards the people in my life.
For my family, allow me to move with love and obedience.
Please give me the courage and the willingness to sacrifice my
time and energy to serve my community. For my Church,
guide me to be faithful and devoted; and in everything I do,
help me reflect your love. These we pray in Jesus, our savior’s
name. Amen!
What is ONLINE CONTENT ?
§ Rich or digital content in the online
environment and user experience;
§ EVERYTHING that is in your website;
§ Content is not "stuff we write to rank
higher" or "infographics" or "longform
articles." Content is anything that
communicates a message to the
audience. Anything!
§ The online content on business websites
is written from the point of view of one
person or organization, and aims to
inform and persuade potential new
customers.
Here’s how to write content to maximize the likelihood of being
found in search engines and get your prospects to take action.
1. Know your audience and create buyer personas
2. Make sure your content is useful and interesting
3. Make sure your content is visually appealing
4. Include a call-to-action (CTA)
5. Make sure your content is sharable and search-friendly
6. Analyze your effectiveness
TYPES OF DIGITAL CONTENT TYPES OF DIGITAL CONTENT
(1) Blogs (Blog structure) (2) Videos
§ It is an online journal or informational § One type of digital
website displaying information in the element to help the
reverse chronological order, with the visitors understand your
latest posts appearing. content (or product). It is
§ Types of BLOG Posts: How-To Post, used in marketing and
List Post, Pictorial Post, News Posts, promotional campaigns.
Personal Post. “A good video always
remains etched to the
audience’s memory.”

TYPES OF DIGITAL CONTENT TYPES OF DIGITAL CONTENT

(3) Podcasts (4) Social Media Content
• Podcasts are digital audio files • Majority of people around the globe
that are used to share use various social media platforms
information through computers due to which they have found a
or any portable music devices place in the marketing strategy.
such as MP3 players or iPods. • You may not find another medium
• Businesses usually use podcasts to reach your content to the
to share information regarding audience in a short span of
their new products, about the time and the benefit is that, you get
company or about the general to connect directly with your
happenings in the industry. potential customers.

TYPES OF DIGITAL CONTENT TYPES OF DIGITAL CONTENT

(5) Copywriting (5) Copywriting (Continuation)
• Copywriting is the process of writing advertising materials
such as blogs, newsletters, marketing campaigns etc. The
words should be persuasive enough for the audience to
take an action, thus driving traffic to your business
website. Effective copywriting includes:
§ Attention grabbing headlines that compel the
audience to click the link to read further
§ It provides just the information that the reader needs
§ Interesting content that helps the audience to easily
connect with your business, while building trust and
brand recognition
§ Content that tells the audience what to do next, such
as signing up for newsletters, click a link to visit a
website, social media page etc.
 TYPES OF DIGITAL CONTENT
(6) Infographics
• Infographics refers to the visual
representation of information. The fact that
visuals tend to stay in people’s minds than
text works in favor of infographics.
• As a result, infographics is the most shared
content compared to other digital content
types. Infographics can include anything such
as general information, data, statistics etc.
• Almost everyone is making infographics
these days and therefore, it is important to
be creative with your infographics for
audience to take notice.
Elements of Modern Web Design
1. Text - this is a mandatory element of a web page.
However, visitors get distracted about the font family of
the text on website. Also considered as the most basic
element of media (web design).
2. Graphics/ Illustrations - make sure your images or
illustrations are not pixelated or must be on good quality.
There are times that text give description to an image, so
you make sure that these two elements are well
arranged.
3. White space - having a crowded website, it is very hard
to direct the attention of your visitor's eye. These white
space gives your website a room to breathe.
WAYS TO CREATE WEBSITE:
(1) Hard Code
• The first, oldest, and most technical
method for building websites is to code
everything by hand.
• Markup Languages responsive designs, via a visual,
• HTML, XML, etc.
• Cascading Style Sheets (CSS)
• Scripting languages
• Javascript, PHP, etc.
• Web creation and editing software
• Notepad++, BB Editor
TYPES OF DIGITAL CONTENT
(7) E-books
• E-books consist of large content of a minimum
word count of 10,000 words, in PDF format and
are downloadable. An e-book gives an insight of
your knowledge about an industry and is
the most effective way of sharing your knowledge
with others.
• While creating an e-book, make sure that the
content is divided into topics making it easier for
the users to read. Remember, your e-book’s title
plays an important role in the audiences’ decision
regarding downloading your e-book. Therefore,
make sure that the title is catchy and relevant.
Elements of Modern Web Design
4. Links - links or hyperlinks allows user to jump to another site or page that
is related of to your site.
5. Color - the colors you use in your design is a very important aspect. There
are times that colors become visually distracting to your viewers. As some
web designers do, they use the company logo of their client as their color
reference on their website.
6. Video/Audio - there are sites use audio/video to help their visitors to
better understand what they are selling or teaching. These elements of
web designing really helps your visitors especially those websites that
offers tutorial of certain subject.
7. Background - texture or background gives a more appealing sight to your
website. This will provide your website a feeling of a surface underneath.
WAYS TO CREATE WEBSITE:
(2) WYSIWYG Website Editors
• It is a web design software
application that lets you build
page layouts, including mobile,
drag 'n drop interface.
• Dreamweaver
 WAYS TO CREATE WEBSITE: WAYS TO CREATE WEBSITE:
(3) FREE Website Builders (4) CMS – Content Management System
• Free website builders allow • A CMS is a piece of software that runs on
you a simple way to design, a live web server, that allows individuals
build, launch and manage your or teams of people to publish content in
website for free. a consistent format — all with little or no
• You may simply fill in the technical skill required. In fact, CMS
content and launch your site. platforms often use simple, point-and-
click interfaces. This means they're great
for beginners and non-technical users.
• These are generally standard templates
where the coding on the back end is
already done.

Advantages of Using WCMS

Responsive Websites
• Websites that respond to the size of computer screens and mobile
device screens, and look good on all of them are vital these days.
• The open source CMS platform is designed to do this automatically.
Database-Driven
• Open source CMS uses a database to store and retrieve information,
making it easy to access and input content on any part of your site.
• So there is only one place to update that content, no matter how many
pages it appears on.
Multi-User
• The free CMS platforms are designed to accommodate several users
adding content at the same time.
• You can set permissions as to levels, and utilize “draft” and “approval”
settings to make it easy for one person to write a new blog, while
another may be updating a contact form.
• Video from Create a Pro Website downloaded from youtube.com

Advantages of Using WCMS (Continuation) HTML FUNDAMENTALS:

Accessible from Anywhere

• You don’t have to send an HTML file back and forth between computers
to make edits with an open source content management system.
• The software sits on your web server so you can access it online to
make updates from anywhere. HTML AND CSS FUNDAMENTALS
You Don’t Have to Be a Designer
• Another big benefit of the best open source CMS programs is that they
are made to be easy to use without formal web design training.
• Some can be more complicated to use than others, depending upon the
template you choose, but only minimal computer skills are needed.
Basic Principles of Web Design Basic Principles of Web Design

1. PORTABLE DESIGN - website design must 2. DESIGN FOR LOW BANDWIDTH - not all
be portable and accessible. The design user who are online are connected to a
must be compatible with other operating high-speed internet connection. In
system and web browsers. You should also designing a website you need to avoid
design your website on which it can be large graphics or animations as the users
access to a different computer platforms may leave the site if downloading is slow.
or devices especially for those visitors who
uses mobile device to access a website.

Website compatibility test

Basic Principles of Web Design Basic Principles of Web Design

2. DESIGN FOR LOW BANDWIDTH - not all 3. DIRECTION - identify the order of
user who are online are connected to a importance of the various elements
high-speed internet connection. In and place them in a sequence where
designing a website you need to avoid the eye moves and perceives the things
large graphics or animations as the users it sees. There should be consistent
may leave the site if downloading is slow. layout and structure
(continuation…)

A website wireframe, also known as a page schematic or

https://tools.pingdom.com/#5e0c0b8b29800000 screen blueprint, is a visual guide that represents the
skeletal framework of a website.
Wireframes are created for the purpose of arranging
elements to best accomplish a particular purpose.

Basic Principles of Web Design Basic Principles of Web Design

4. SIMPLICITY - the more option you 5. REGULAR TESTING – every device or

place in your site, the more difficult project needs maintenance, same as
it is for a visitor to make a decision your website. Website should be
and more time is required to regularly upgraded, updated and tested
browse through them. as what they so that problems will be quickly
usually say "simplicity is beauty". resolved. Visitors who have encounter
any errors like problems in loading or
viewing in your website will not hold on.

https://www.alexa.com
Sources:
• http://www.makeuseof.com/tag/10-popular-content-management-systems-online/
• http://searchcontentmanagement.techtarget.com/definition/content-management-system-
CMS
• http://searchcontentmanagement.techtarget.com/definition/web-content-management-WCM
• https://www.advisoryhq.com/articles/best-open-source-cms/
• https://medium.com/platform-hunt/the-8-types-of-software-platforms-473c74f4536a
• https://web.archive.org/web/20121118194457/http://www.digitalbusiness.gov.au/online-
payments-and-donations-benefits-of-e-commerce/e-commerce-payment-gateways/
• https://medium.com/fbdevclagos/4-reasons-why-wire-frame-is-important-during-website-or-
mobile-app-development-46fabdf47190
• https://www.jointviews.com/blog/8-types-of-digital-content/
• https://www.business2community.com/tech-gadgets/4-different-ways-build-website-0994696
• https://www.tentononline.com/different-ways-to-build-a-website/