VI - CSE - CCS352-MMA - Lab Manual
VI - CSE - CCS352-MMA - Lab Manual
LAB MANUAL
Prepared By,
CCS352_MMA
4931_Grace College of Engineering,Thoothukudi
LAB MANUAL
Experiment 1
Working with Image Editing tools:
Install tools like GIMP/ Inkscape / Krita / Pencil and perform editing
operations:
★ Use different selection and transform tools to modify or improve
an image
★ Create logos and banners for the home pages of websites.
Creating a Logo:
● Open GIMP: Launch the GIMP software on your computer.
● Create a new canvas: Go to "File" in the menu bar and select "New."
Set the dimensions for your logo canvas by entering the desired width
and height. Choose the resolution and click "OK" to create a new
canvas.
● Design your logo:
1. Text: Select the "Text Tool" from the Toolbox on the left side.
Click on the canvas and type in your logo text. You can choose
the font, size, color, and other formatting options from the text
tool options at the bottom of the Toolbox.
2. Shapes: Use the "Shape Tool" to create shapes like circles,
rectangles, or custom shapes for your logo. Select the desired
shape from the Toolbox, click and drag on the canvas to draw
the shape, and adjust its properties from the tool options.
3. Drawing: You can use various drawing tools, such as the
"Paintbrush Tool," "Pencil Tool," or "Eraser Tool," to create
freehand or pixel-based elements for your logo. Experiment
with different brushes, colors, and sizes to achieve the desired
effect.
4. Layers: Utilize layers to separate and organize different
elements of your logo. Each element, such as text or shapes,
can be placed on separate layers. To create a new layer, click
Output:
Result:
Thus the banner and logo has been created successfully using GIMP.
Experiment 2
Working with Audio Editing tools:
★ Install tools like, Audacity / Ardour for audio editing, and sound
mixing, and add special effects like fade-in or fade-out, etc.,
★ Perform audio compression by choosing a proper codec.
Installation:
● Visit the Audacity website: Go to the Audacity website at
https://www.audacityteam.org/.
● Download the installer: On the Audacity website, click on the
"Download" button to access the downloads page. Choose the
appropriate installer for your operating system (Windows, macOS, or
Linux).
● Run the installer: Once the installer file is downloaded, run it by
double-clicking on the file.
● Accept the terms and conditions: Read and accept the terms and
conditions of the software.
● Choose installation options: During the installation process, you may
be prompted to choose additional components to install. Select the
options you desire, such as optional plug-ins or language packs.
● Complete the installation: Follow the on-screen instructions to
complete the installation process. The installer will create shortcuts or
icons as necessary.
● Launch Audacity: After installation, launch Audacity by locating its
shortcut or searching for it in the Start menu (Windows) or
Applications folder (macOS).
● Apply fade-in effect: To apply a fade-in effect, go to Effect > Fade In.
Audacity will gradually increase the volume from silence to the
desired level.
● Preview the mix: To preview the mix, click the Play button in
Audacity's transport toolbar. Listen carefully to the levels and adjust
as needed to achieve the desired balance and sound.
● Export the mix: Once you're satisfied with the sound mix, go to File >
Export > Export Audio. Choose the desired file format, name the file,
and select the location where you want to save it. Click "Save" to
export the mixed audio.
Output:
Result:
Thus the audio editing, sound mixing and compression has been done
successfully using Audacity.
Experiment 3
Working with Video Editing and conversion tools:
★ Install tools like OpenShot / Cinelerra / HandBrake for editing video
content.
★ Edit and mix video content, remove noise, create special effects, and
add captions.
Installation:
● Visit the OpenShot website: Go to the OpenShot website at
https://www.openshot.org/.
● Download the installer: On the OpenShot website, click on the
"Download" button to access the downloads page. Choose the
appropriate installer for your operating system (Windows, macOS, or
Linux).
● Run the installer: Once the installer file is downloaded, run it by
double-clicking on the file.
● Accept the terms and conditions: Read and accept the terms and
conditions of the software.
● Choose installation options: During the installation process, you may
be prompted to choose additional components or features to install.
Select the options you desire, such as additional effects or language
packs.
● Complete the installation: Follow the on-screen instructions to
complete the installation process. The installer will create shortcuts or
icons as necessary.
● Launch OpenShot: After installation, launch OpenShot by locating its
shortcut or searching for it in the Start menu (Windows) or
Applications folder (macOS).
Edit and mix video content, remove noise, create special effects, and
add captions:
● Import video files: Open OpenShot and import the video files you
want to edit by going to File > Import Files. Select the videos you
want to include in your project and click "Open."
● Arrange video clips: Drag and drop the imported video clips into the
timeline at the bottom of the OpenShot interface to arrange them in
the desired order for editing.
● Edit and trim clips: To remove unwanted parts of a video clip, click on
it in the timeline, then use the trim handles at the beginning and end
of the clip to adjust its duration.
● Remove noise: OpenShot doesn't have a built-in noise removal tool,
but you can use third-party audio editing software like Audacity
(mentioned earlier) to remove noise from the audio tracks of your
videos. Export the audio tracks, edit them in Audacity to remove
noise, and import them back into OpenShot.
● Add special effects: OpenShot provides various special effects that
you can apply to your video clips. Select a video clip in the timeline,
go to the Effects tab in the top-left corner, choose an effect category,
and drag and drop the effect onto the clip.
● Add captions: To add captions or subtitles to your video, go to the
Title tab in the top-left corner, choose a title style, and drag and drop
it onto the timeline above the desired video clip. Double-click on the
title clip to edit the text and customize its appearance.
● Preview and export: To preview your edited video, click the Play
button in the preview window. Once you're satisfied with the result, go
to File > Export Video. Choose the desired video format, resolution,
and other export settings. Provide a name and location for the
exported video file, and click "Save" or "Export" to initiate the
rendering process.
Output:
Result:
Thus the editing and mixing video content has been done successfully
using Openshot.
Experiment 4
Working with web/mobile authoring tools:
★ Install tools like Adapt / KompoZer/ BlueGriffon / BlueFish /
Aptana Studio/ NetBeans / WordPress /Expression Web:
★ Design a simple Home page with banners, logos, tables quick
links, etc
★ Provide a search interface and simple navigation from the home
page to the inside pages of the website.
★ Design Responsive web pages for use on both web and mobile
interfaces.
● Set up the project: Launch NetBeans and create a new web project
by going to File > New Project. Choose the appropriate web project
template based on your preferred programming language (Java, PHP,
etc.) and click "Next". Provide a project name, location, and other
details as required, then click "Finish" to create the project.
● Design the homepage: In the NetBeans IDE, locate the "Web Pages"
folder in your project. Right-click on it, go to New > HTML File. Name
the file "index.html" (or any other desired name) and click "Finish" to
create the homepage file.
● Add content: Open the newly created "index.html" file in the
NetBeans editor. Design the homepage by adding HTML code for
banners, logos, tables, quick links, and any other desired elements.
Use HTML tags, CSS, and images as needed to achieve the desired
design. For example:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- Add CSS styles here -->
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<!-- Add banners, logos, etc. here -->
</header>
<nav>
<!-- Add navigation links here -->
</nav>
<main>
<h2>Homepage Content</h2>
<!-- Add content, tables, etc. here -->
</main>
<footer>
<!-- Add footer content here -->
</footer>
</body>
</html>
Design Responsive web pages for use on both web and mobile
interfaces.
● Create a new HTML file: Right-click on the "Web Pages" folder in
your NetBeans project and select New > HTML File. Name the file
"index.html" (or any other desired name) and click "Finish" to create
the file.
● Add HTML structure: Open the "index.html" file in the NetBeans
editor and add the basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Web Design Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Responsive Web Design Example</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Welcome to Our Website!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
</section>
</main>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
● Create a CSS file: Right-click on the "Web Pages" folder, select New
> CSS File, and name it "styles.css". This file will contain the CSS
styles for the responsive design.
● Define responsive CSS styles: Open the "styles.css" file and add the
following CSS code:
/* Mobile-first responsive design */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline;
margin-right: 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
margin-bottom: 20px;
}
/* Media query for tablets and larger screens */
@media (min-width: 768px) {
nav li {
display: block;
margin-bottom: 10px;
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
}
/* Media query for larger screens */
@media (min-width: 1200px) {
main {
grid-template-columns: 1fr 1fr 1fr;
}
}
● In this example, the CSS styles define a mobile-first approach where
the layout adapts for larger screens using media queries. The
@media rules target specific screen widths to apply different styles.
● Save and preview: Save both the HTML and CSS files. Run the
project in NetBeans to see a preview of the responsive web design.
Resize the browser window to see how the layout and styles adapt
based on the screen size.
Output:
Result:
Thus the responsive simple web page has been created successfully using
Netbeans.
Experiment 5
Working with Animation tools:
Install tools like Krita, Wick Editor, and Blender:
★ Perform a simple 2D animation with sprites
★ Perform simple 3D animation with keyframes, kinematics
Installation:
● Visit the Blender website: Go to the Blender website at
https://www.blender.org/.
● Download the Blender installer: On the Blender website, click on the
"Download" button to access the downloads page. Choose the
appropriate installer for your operating system (Windows, macOS, or
Linux).
● Run the installer: Once the installer file is downloaded, run it by
double-clicking on the file.
● Accept the terms and conditions: Read and accept the terms and
conditions of the software.
● Choose installation options: During the installation process, you may
be prompted to choose additional components or features to install.
Select the options you desire, such as additional plugins or language
packs.
● Complete the installation: Follow the on-screen instructions to
complete the installation process. The installer will create shortcuts or
icons as necessary.
● Launch Blender: After installation, launch Blender by locating its
shortcut or searching for it in the Start menu (Windows) or
Applications folder (macOS).
● Now that Blender is installed on your computer, you can use it to
perform both 2D and 3D animations.
● Set up the animation: Use the Timeline or Dope Sheet editor to set up
the keyframes for the animation. Keyframes define the position,
scale, rotation, and other properties of the sprites over time.
● Animate the sprites: Manipulate the sprites in each frame to create
the desired motion. You can move, rotate, scale, and deform the
sprites to create animations.
● Preview and render the animation: Use the Animation Playback
controls to preview the animation in real time. Adjust the timing and
properties of the keyframes as needed. Once you're satisfied, you
can render the animation into a video file or image sequence.
Output:
Result:
Thus the 2D and 3D animation has been performed successfully using
Blender.
Experiment 6
★ Working with Mobile UI animation tools: Origami studio / Lottie /
Framer etc.,
● Download and install Origami Studio: Visit the Origami Studio website
at https://origami.design/ and download the installer for your
operating system (macOS only). Run the installer and follow the
on-screen instructions to complete the installation.
● Launch Origami Studio: Once installed, open Origami Studio from
your applications folder.
● Create a new project: In the Origami Studio interface, click on "New
Project" or go to File > New to create a new project. Give your project
a name and choose the desired screen size for the mobile device
you're designing for (e.g., iPhone X).
● Design your mobile UI: In the canvas area of Origami Studio, you can
design your mobile user interface by dragging and dropping UI
components from the Library panel on the left side. You can also
import design assets from other tools like Sketch or Figma.
● Add animations: Origami Studio provides a powerful animation
system that allows you to create interactive and animated UIs. You
can add animations to UI elements by connecting patches in the
Patch Editor. The Patch Editor is a visual programming interface
where you can create animations and interactions using different
patches (nodes) and wires to connect them.
● Preview and test: Use the Origami Live app (available on iOS) to
preview and test your mobile UI animations on a real device. Install
the Origami Live app on your device, and then click on the "Preview"
button in Origami Studio. Connect your device to your computer, and
you'll be able to interact with your UI prototype directly on your
device.
● Refine and iterate: Iterate your design and animation by making
changes in Origami Studio and previewing them in real time using
Origami Live. You can adjust animations, timings, and interactions to
achieve the desired user experience.
Output:
Result:
Thus the animation in mobile has been done successfully using Origami
Studio.
Experiment 7
Working with E-Learning authoring tools:
Install tools like EdApp / Moovly / CourseLab/ IsEazy and
CamStudio/Ampache, VideoLAN:
★ Demonstrate screen recording and further editing for e-learning
content.
★ Create a simple E-Learning module for a topic of your choice.
● Edit the recorded video: After the recording is complete, you can edit
the video using video editing software. If you don't have video editing
software, you can use free options like Windows Movie Maker (for
Windows) or iMovie (for macOS) to perform basic editing tasks like
trimming, adding text overlays, or adding transitions.
Output:
Result:
Thus the simple e-learning content has been created successfully using
CamStudio.
Experiment 8
Optimize Performance:
VR/AR applications require high performance to ensure a smooth
experience. Optimize your application's performance by reducing
unnecessary graphical complexity and using efficient coding practices.