Interactivity in multimedia refers to the ability of users to engage actively with content,
allowing them to influence or control their experience.
This can include actions like clicking, navigating, or making choices
that affect the outcome of the media, creating a more immersive and engaging experience...—
Multimedia
Multimedia is a form of communication that combines different content types,
such as text, audio, images, animations, and video, into a single presentation.
It allows for interactive experiences and is commonly used in areas like
education, entertainment, and marketing.
Creating content involves using the
principles of effective interactive communication...—
5 Multimedia Building Blocks
Each serve a different purpose:
1
Text
Text
is fundamental to multimedia, providing context and information.
We covered text and typography in practice 2, 3, 4, and 6.
Audio includes music, sound effects, audio slideshows, and voiceovers that enhance the experience.
Recent developments include spatial audio and advanced sound design.
Videos are moving images, video animations and video podcasts convey dynamic content.
High-definition (HD), 4K, and 360-degree video are recent innovations enhancing viewer engagement.
Animations involve the technique of creating moving images from still pictures,
often used in films, television, and video games to bring characters and stories to life.
The opening and closing 'audio' tags are used to embed sound content in a document,
i.e. music or other audio streams.
The audio tag contains one or more source tags with different audio sources.
The browser will choose the first source it supports.
The text between the opening and closing audio tags will only be displayed
in browsers that do not support the audio element.
Supported audio formats in HTML are .mp3, .mp4, .wav, and .ogg.
See final assignment for specific requirements.
Code & Example
"Walking on a Dream"
Video
You can effectively add videos to your website,
enhancing user engagement and content richness.
We will use the .mp4 format because it is supported by all browsers and recommended by YouTube.
The .mp4 was developed by the 'Moving Pictures Expert Group'.
We will use 'iframes' to 'embed' responsive videos in two different ways while
always including width and height attributes to prevent load flickering.
See final assignment for specific requirements.
Code & Examples
External Video Source
This video uses the opening and closing iframe
tags to show a video on a web page from an external source
such as Vimeo.
Lower Quality: The .mp4 file is compressed by video platforms
Faster Loading Times: Videos hosted on platforms like YouTube reduce the load on your server.
Better SEO: Videos can enhance your site's content, improving search engine rankings.
Cost-Effective: Avoids high storage costs associated with self-hosting large video files.
Internal Video Source
This video uses the opening and closing iframe
tags to show a video on a web page from an internal source: 'videos' folder.
High Quality: The .mp4 file is not compressed by video platforms.
Slower Loading Times: Videos hosted on personal servers increase the load on your server.
Videos in general can enhance your site's content, improving search engine rankings.
Less Cost-Effective: Increases high storage costs associated with self-hosting large files.
Social Media
Importance of Interactivity
Increased Visibility
Integrating social media into a website enhances user engagement and interaction.
This connection allows visitors to easily access social media profiles and share content,
creating a two-way communication channel.
Increased visibility encourages users to follow brands on social media, increasing overall brand visibility.
By effectively integrating social media interactivity, websites can foster
a more engaging and dynamic user experience, ultimately driving traffic and enhancing brand loyalty.
Benefits of Interactivity
Increased Engagement
Dynamic Content: Embedding social media feeds keeps the website fresh and engaging. Real-time updates from platforms like Instagram or Twitter can capture visitors' attention.
User-Generated Content: Showcasing customer reviews and testimonials builds trust and authenticity, encouraging more interaction.
Enhanced User Experience
Easy Sharing: Social share buttons allow visitors to share content effortlessly, increasing the likelihood of organic reach and traffic to the website.
Social Login Options: Allowing users to log in using their social media accounts simplifies the registration process, enhancing user experience.
Implementing SM Interactivity
Embedding Social Media Feeds
Single Platform Feeds: Display content from one social media platform to highlight specific interactions.
Multi-Platform Feeds: Aggregate content from various platforms for a comprehensive view of the brand's social presence.
Adding Social Media Buttons
Footer Icons: Place social media icons in the footer for easy access across all pages.
Author Bio Links: Include social media links in author bios to personalize content and encourage connections.
Shoppable Social Media Walls
Interactive Shopping: Create feeds that allow users to shop directly from social media posts, merging inspiration with action.
Implementing SM Interactivity
Embedding Social Media
Each platform has its own embed features found in a variety of places per platform
using icons or text: to 'share' and/or 'embed' content.
But what if it doesn't work on a user's browser because
they have 'third party' cookies settings st to strict?
See alternative methods below.
Code & Examples
Art, Engineering, Science & Technology
See the beautiful connections between art, engineering, science and early technology at
the Staatliche Kunstsammlungen in Dresden, Germany. #ScienceMatters #HistoryMatters #ArtMatters
Clocks, Time, Reflections & Resolutions
Happy 2025! Cheers & thank you! Enjoy astronomical marvels of engineering and personifications of time.
In time take time while time doth last, for time is no time when time is past.
—John Farmer, English Composer.
Alternative SM Methods
As possibly seen above as an example, two of the disadvantages of embedding social media posts is the reality of people having a range of browser settings (strict to full)
to allow or block 'third party' social media content and
your embedded posts can sometimes can disappear or worse,
show up as an unattactive blocked message block!
Oops!! When this happens you can be prepared with alternative methods
such as taking a 'screenshot' of the post and turning it into an image
and adding a hyperlink around so it behaves like a 'button' to take a user to the post.
The W3 lesson and video (2.35) below shows you how to do that.
(Remember to add your 'images' folder in the file path.)
Codes & Examples
Clocks, Time, Reflections & Resolutions
Happy 2025! Cheers & thank you! Enjoy astronomical marvels of engineering and personifications of time.
In time take time while time doth last, for time is no time when time is past.
—John Farmer, English Composer.
Art, Engineering, Science & Technology
See the beautiful connections between art, engineering, science and early technology at
the Staatliche Kunstsammlungen in Dresden, Germany. #ScienceMatters #HistoryMatters #ArtMatters
Blogs, News & More
A blog is an online platform where individuals or groups
share regularly updated posts on various topics,
often in an informal or conversational style.
It typically features a reverse chronological order of content,
allowing the most recent posts to appear first.
Below, the 'object' element is used to insert the content
and resources.
Use the audio code and audio resources provided in Bb and add an appropriate audio file.
Use the video code and resources provided in Bb and
add two responsive and appropriate video files in each of the two columns on your page.
The code language is the same, but the file paths are not.
One must be from an 'extrnal' sourse and the other linked from your 'internal' video folder.
Update all code element tags, text and multimedia files (images and videos), and CSS.
Replace 'Intro' placeholder text:
A well-designed website should employ the
five main responsive building blocks of multimedia web design (text, images, audo, video, anmation)
that enable the visitors to engage in interactivity.
About
Replace 'About' placeholder text:
Integrating social media into a website enhances user engagement and interaction engage in interactive, two-way communication and calls-to-action. .
Purpose
Replace 'Purpose' placeholder text:
By effectively integrating social media interactivity, websites can foster
a more engaging and dynamic user experience, ultimately driving traffic and enhancing brand loyalty.
Replace refined 'Intro' text:
A well-designed website should employ the main building blocks of multimedia.
