B.

Readings/Discussions
This topic deals with the online environment and the user experience, multimedia
and interactivity. It also explains Web 1.0, Web 2.0 and Web 3.0. It also
differentiates the facebook platforms before and after. It also about online games,
online test, online courseware, online tools to produce video content, vodcasting
and podcast.
The Evolution to Web 3.0 ( Executable), Web 2.0 (writable) and Web 1.0 is the
most read only web( readable).

Web1.0
It is the “readable” phrase of the World Wide Web with flat data. In Web
1.0, there is only limited interaction between sites and web users. Web
1.0 is simply an information portal where users passively receive
information without being given the opportunity to post reviews,
comments, and feedback.
Web2.0
It is the “writable” phrase of the World Wide Web with interactive data.
Unlike Web 1.0, Web 2.0 facilitates interaction between web users and
sites, so it allows users to interact more freely with each other. Web 2.0
encourages participation, collaboration, and information sharing.
Examples of Web 2.0 applications are Youtube, Wiki, Flickr, Facebook,
and so on.
Web3.0
It is the “executable” phrase of Word Wide Web with dynamic
applications, interactive services, and “machine-to-machine” interaction.
Web 3.0 is a semantic web which refers to the future. In Web 3.0,
computers can interpret information like humans and intelligently
generate and distribute useful content tailored to the needs of users.
One example of Web 3.0 is Tivo, a digital video recorder. Its recording
program can search the web and read what it finds to you based on your
preferences.
 Facebook Platform

Before
 After

Rich content in the online environment and the user experience

 Rich user experience is the ability of the web to deliver full scale GUI style
 applications to the client, making it easier to interact, share, and access Web
content. Although rich user experience is based on the rich contents, it focuses
on the rich user interface to enhance how the data is presented, manipulated,
and used by the users.
 GUI ( Graphical User Interface) a program that allows a person to work easily
with a computer by using a mouse to point a small pictures and other elements
on the screen.
 Multimedia is the integration of text, sound, graphics, animation and video into
a single unit.
 Interactive means that the user or audience has control over the program or
presentation.

Types of Rich and Multimedia content currently include but are not limited
to:
A. Online Tools to produce Video Content
Facebook live – Facebook live streaming tool. Use it to engage
viewers in real-time.
YouTube editor – Use Youtube’s video editor to create new videos
and edit clips and publish them to Youtube with one click . All of your
uploads are added automatically to the video editor. Combine multiple
videos , add music from a library of approved tracks, and customize
clips with special tools and effects.
YouTube live streaming – Once your Youtube channel is enabled ,
you have three options to start a live stream. Stream Now is a quick
and easy way to send content automatically start and stop the stream
for you at the right time.
Adobe Spark – Spark is Adobe’s app to transform ideas into visual
stories. Pick photos, add text, and apply design filters to create
professional graphics. Easily combine video clips, photos and icons
into an engaging video.
Magisto – is an app to create professional video with easy to use
editing tools , captions custom branding and commercially licensed
music.
Facebook Slideshow – are video -like ads that use motion, sound
and text to tell your story across devices. Slideshows load quickly so
they play beautifully on any connection speed.
Loopster – is an full featured online video editor with an easy-to-use
Interface. Edit your videos by rotating , cropping , splicing , zooming,
 and adding sound effects to either standard or high definition videos.
Wideo - is a tool to create animated videos for a marketing
campaign. Just drag and drop elements or upload your own images
and start animating in a few clicks.
Periscope -is twitter’s app for live streaming Broadcast live video and
interact with people through hearts and comments.
WeVideo - is a full featured online platform for editing video. Use text
transitions , motion effects picture-in picture , green screen
technology, custom call to action , a music library and more.
StoriesAds.com – is a tool for creating compelling video content
tailored for Instagram’s vertical format.
Animoto – is a platform for creating videos and slideshows with three
storytelling products.

B. ONLINE GAMES, TEST AND COURSEWARES

1. Online games – an online game is a video game that is either partially or
primarily played through the internet or another computer network.

Examples

1. DOTA 2
2. Mobile Legends

2.Online Test – Electronic Assessment also known as e-assessment or online

test is the use of information technology in various forms of assessment such as
educational assessment , health assessment, and psychological assessment.
This may utilize an online computer connected to a network.

3. Online Courseware – is educational material intended as kits for teachers or

trainers or as tutorial for students usually packaged for use with a computer. It
includes the following:

 Material for instructor-led classes

 Websites that offer interactive tutorials
 Material that is coordinated with distance learning such as live
classes conducted over the internet
 Videos for use individually or as part of classes.

Web-,game-, pod-, and vod-casting

 Webcast is a media file distributed over the internet using streaming

media technology. A webcast may either be distributed live or on
 demand. Essentially, webcasting is “broadcasting” over the internet”
A webcast uses streaming media technology to take a single content
source and distribute it to many simultaneous listeners/viewers.
According to PCMAG Webcast means to:
(1) To send live audio or video programming over the Web. It is the
internet counterpart to traditional radio and TV broadcasting.
(2) To send selected Web-based information (text, graphics, audio,
video, etc.) to Internet users based on individual requirements.

 Gamecast is a hook for some functionality that will be available in the

future. What it does is send play by play data to our web server. The
intent is that if you are scoring a game on an iPhone (or an iPod
Touch with WiFi connectivity), you will be able to send the play by
play data to the server in real time, and other people interested in
your game will be able to access your data.
There are at least a couple of ways we intend to make this data
available.
1. A web view of the game much like you can see on espn.com of
 MLB games where as the game progresses, people can “watch it”
on the internet.
2. Another user with iScore can be kept in sync while you are
scoring a game.
 A podcast is an episodic series of digital audio or video files which a
user can download and listen to. It is often available for subscription,
subscription, so that new episodes are automatically downloaded via
web syndication to the user’s own local computer, mobile application,
or portable media player. It is something like a TV program or
element of a program. Unlike TV programs which you have to watch
when scheduled.
Benefits of Vodcasting
 Video content on demand – when consumer wants access
 Easier and cheaper than TV production
 Allows for skills and delivery convergence- a newspaper can
be an online broadcaster and a broadcaster can be an online
newspaper.
 Flexible mass distribution much easier.
 Little to no cost for maker or consumer -no copies to be made
and distributed.

B. Exercises

Exercise 1

Directions: Select at least three(3) online content rich interfaces (e.g, learning
management system, blog and facebook page) pertaining to their specific academic
track. Rate each interface according to the simplicity and functionality using the table
below.
 SIMPLICITY FUNCTIONALITY

Simple Complex Easy Difficult

Quipper School III V III VI

Google Classroom I II II IV

Kinemaster III V III VII

Example Screenshot online interfaces

1. Facebook 2. Blog 3. Deped Common

4.Google Classroom 5. Kinemaster 6. Quipper School
Instruction : Read the questions carefully, Please write your answers in your notebook.

1. Among your selection, which are your top three favorites? Explain.
KineMaster, Google Classroom, and Quipper School are essential online tools
for students. KineMaster allows users to edit videos easily, students usually use
this. Google Classroom is widely used by teachers-students for organizing
assignments, sharing resources, and communication. Quipper School provides
educational materials and interactive quizzes, which can help students learn by
themselves.
2. What can make an online interface difficult to use?
If it has complex navigation which cause users to struggle to navigate or find
information they need. A confusing menus and buttons/icons, overwhelming
design which colors and fonts and images are cluttered. Lack of user guidance,
they didn’t include a user manual.
3. What can help an interface user understand or navigate an online interface?

To help users understand and navigate an online interface, it's important to have a
design that is clear, organized, and consistent in terms of color, font, spacing and icon
design. It is also important to use labels, icons, and buttons which are familiar to the
users. Additionally, providing user manual or user guidance can guide users in using
the interface correctly, with relevant instructions and error messages. Having user-
friendly navigation, such as clear menus, filter, search functionality, makes it easy for
users to find what they need. Lastly, creating a responsive and accessible design
ensures that the interface works well on different devices and screen sizes, allowing
users to comfortably interact with it.

Exercise 2

Directions: Given the definition below , describe what you would combine to make
your digital content interactive.

Interactive Multimedia

Interactive Multimedia, any computer -delivered electronic system that allows control
, combine and manipulate different types of media, such as text, sound , video ,
computer graphics and animation

Examples:

The following image shows online features that enhance a video content. Which feature/s
would engage you? Why?
I will choose interactive features such as games, hotspots, carousels, microsites, and
live data because it enhances video content by providing engaging and entertaining
experiences for users. Games allow active participation and enjoyment, while hotspots
offer additional information and interactive elements within the video. Carousels enable
easy exploration of related content, and microsites provide dedicated spaces for
supplementary information and unique experiences. Live data keeps the content
dynamic and up-to-date. These features make the video more interactive and engaging
for users.

C. Assessment/Application/Outputs (Please refer to DepEd Order No. 31, s. 2020)

Directions: Identify what is being asked. Write your answer on the notebook.

1. Web 3.0 It is the “executable” phrase of Word Wide Web with

dynamic applications.
2. Web 2.0 It is the “writable” phrase of the World Wide Web with
interactive data.
3. Web 1.0 It is the “readable” phrase of the World Wide Web with flat
data.
4. Multimedia The integration of text, graphics, sound and video into a
single unit.
5. Podcast Something like a TV program or element of a program.
6. Youtube Editor/ Youtube Live Streaming this is a multimedia content
hosted by Youtube.
7. Podcast An episodic series of audio or text files streamed online.
8. SoundCloud_An example of a host for audio/music/sound content.
 9. World Wide Web Meaning og WWW.
10. Embed Tab Tab that includes the embedded code for Youtube video,

D. Suggested Enrichment/Reinforcement Activity/ies

Directions: Identify what is being asked. Write your answer on the notebook.

Youtube Editor/ Youtube Live Streaming 1. This is a multimedia content hosted by

Youtube.

Podcast 2. An episodic series of audio or text files streamed online.

SoundCloud3. An example of a host for audio/music/sound content.

World Wide Web 4. Meaning of WWW.

Embed Tab 5. Tab that includes the embedded code for a Youtube video.

References:

https://slideshare.net/rosdenhingpit/lesson8-emporment technologies

https://slideshare.net/livedeped/em-tech-reader6111816

https://slideshare.net/livedeped/em-tech-tgacad51112316

https://commons.deped.gov.ph/documents.

https://learn_quipper.com/

Prepared by: Edited by:

Marites C. Melendres __________________

SHS- Teacher III

Reviewed by:
 _____________________

GUIDE

For the Teacher : Advise the students to read the reading and discussion portion
before they attempt to answer the practice exercises. Going through the parts
sequentially will help them easily understand the topic.

For the Learner : Read through the self-learning home task from the first part to the last
part. Doing so, will help you understand better the topic.

For the Parent/Home Tutor : Assist your child and make sure that he/she reads the
self-learning home task from beginning to end to ensure proper understanding of the
concepts.