CMP 312 LECURE MATERIAL

UNIVERSITY OF DELTA AGBOR,
DELTA STATE
FACULTY OF ARTS
DEPARTMENTS OF PHILOSOPHY, PERFORMING ARTS & HISTORY AND

INTERNATIONAL RELATION
SECOND SEMESTER LECTURE MATERIAL
Course Code: CMP 312

Course Title: APPLICATION OF COMPUTER TO ARTS
Course Unit: 3 Units
COURSE CONTENTS
1. Introduction
2. Web Design
3. Graphic Design
4. Use of the Internet
5. Computer Programming
LECTURER: MISS SNOW
2023/2024
Application of Computer to Arts Page 1

CHAPTER ONE: INTRODUCTION
The intersection of computer technology and the arts has undergone a profound
evolution, reshaping how art is created, experienced, and distributed. This journey
began in the mid-20th century, as computers transitioned from being purely scientific
tools to becoming integral components in artistic exploration. In the 1960s and 1970s,
pioneering artists and technologists began experimenting with computers to generate
visual art. Early computer graphics were rudimentary, constrained by the limited
processing power and graphical capabilities of the time. However, these initial forays
laid the groundwork for more sophisticated digital art forms. One notable example is the
work of Frieder Nake, a German mathematician and computer scientist, who used
algorithms to produce intricate geometric patterns, highlighting the potential of
computers to create complex and precise designs.
History of Computers
The advent of personal computers and advancements in software during the 1980s and
1990s significantly broadened the scope of digital art. Programs like Adobe Photoshop,
which was first released in 1988, revolutionized graphic design and photo editing,
providing artists with powerful tools to manipulate images with unprecedented
flexibility and precision. This period also saw the rise of digital illustration and
animation, as software such as CorelDRAW and Adobe Illustrator enabled artists to
produce intricate vector graphics and animations. As computer technology continued to
advance, it began to integrate more seamlessly with traditional artistic practices. Artists
started to use digital tools alongside traditional media, combining the tactile experience
of painting or sculpting with the versatility of digital manipulation. This hybrid
approach allowed for greater experimentation and the development of new artistic
styles. For instance, digital printmaking emerged as a method for artists to produce
high-quality prints of their work, blending the precision of digital design with the
aesthetic qualities of traditional print techniques.
The rise of the internet and digital platforms has profoundly impacted the distribution
and accessibility of art. Online galleries, social media, and digital marketplaces have
democratized the art world, allowing artists to reach global audiences without the need
for physical gallery spaces. This shift has also changed how art is consumed, with digital
reproductions making it possible for people to experience and engage with artworks
from anywhere in the world. Additionally, virtual reality (VR) and augmented reality
(AR) technologies have opened new avenues for immersive art experiences, enabling
viewers to interact with art in dynamic and innovative ways. In recent years, emerging
technologies such as artificial intelligence (AI) and machine learning have begun to play
a significant role in the arts. AI-powered tools can generate music, poetry, and visual
art, challenging traditional notions of creativity and authorship. Artists are increasingly

collaborating with AI to explore new forms of expression and to push the boundaries of
what is possible in art. For example, AI algorithms can analyze vast datasets to produce
unique compositions or assist artists in developing new styles by learning from existing
artworks.
The Roles of Computer to Arts
History and Human Relation:
Computers have revolutionized the way historical data is stored, processed, and
accessed. Digital archives preserve vast amounts of information, ensuring that historical
documents are preserved for future generations. Advanced computing enables
historians to analyze large datasets, identifying patterns and trends that were previously
impossible to detect. Digital libraries and online databases have made historical
documents and scholarly articles more accessible to researchers worldwide. Computers
facilitate collaboration among historians through online platforms, enabling the sharing
of ideas and resources. Educational platforms offer history courses and resources,
making history education more accessible to a global audience. Multimedia
presentations, virtual reality (VR), and interactive simulations provide engaging ways to
learn about historical events and periods. Computers can create detailed simulations of
historical events, allowing historians to test hypotheses about how events might have
unfolded under different circumstances. 3D modeling and virtual reconstructions
provide insights into ancient civilizations and historical sites. Computers have
transformed the way people communicate, making it possible to send messages
instantly across the globe. Platforms like Facebook, Twitter, and LinkedIn have
redefined social interactions, enabling people to maintain connections and form new
relationships regardless of geographic barriers. Computers have enabled the formation
of online communities where people with shared interests can connect and interact.
Online forums and support groups provide a platform for individuals to seek advice,
share experiences, and offer support. Advances in computing technology have facilitated
the rise of remote work, allowing people to collaborate and work together from different
locations. Software tools like Slack, Trello, and Asana enhance team collaboration and
project management. Platforms like YouTube, TikTok, and Instagram enable users to
create, share, and engage with content, fostering new forms of social interaction.
Computers enable cross-cultural communication and exchange, allowing people to learn
about and appreciate different cultures. Language learning apps and online courses help
bridge language barriers, enhancing understanding and communication between
different linguistic groups. Computers have profoundly influenced both history and
human relations, transforming how humans store and analyze historical data,
communicate, collaborate, and interact. They continue to shape human understanding
of the past and their relationships in the present, highlighting the integral role of
technology in human development.

Performing Arts:
Software like Ableton Live, Logic Pro, and Finale allow composers to create, arrange,
and edit music digitally. Algorithms and AI can assist in generating new compositions or
enhancing existing ones. Tools like DanceForms and LifeForms help choreographers
visualize and plan dance routines, experimenting with movements and sequences before
live rehearsals. Computers power electronic instruments and MIDI controllers,
expanding the range of sounds and possibilities for live performances. Motion capture
and interactive technology enable performances that respond to the movements and
actions of performers in real-time, creating dynamic and immersive experiences.
Lighting and Sound Design: Software like Lightwright and QLab allows designers to
create intricate lighting and soundscapes, synchronizing them with the performance. 3D
modeling and virtual reality (VR) tools help set designers visualize and create detailed
stage environments. Virtual sets can be projected or used in augmented reality (AR) to
enhance live performances. Virtual Rehearsals: Virtual reality (VR) environments can
simulate performance spaces, allowing performers to rehearse in a virtual setting when
physical spaces are unavailable. Applications and software provide musicians and actors
with tools for practice, including metronomes, tuners, and virtual coaches. Live
Streaming: Platforms like YouTube, Twitch, and specialized services like Digital Theatre
allow performances to be streamed live, reaching a global audience. With advancements
in technology, entire performances can be created and experienced virtually, offering
new forms of artistic expression. Social Media and Promotion: Computers enable artists
and organizations to market performances through social media, email campaigns, and
websites, engaging with audiences directly. Mobile apps and interactive websites offer
audiences additional content, such as behind-the-scenes footage, artist interviews, and
interactive programs. Performance Analytics: Software can analyze various aspects of a
performance, such as audience engagement and reaction, helping artists and producers
make data-driven decisions. Technologies like audience response systems and real-time
feedback tools allow performers to interact with their audience during a live show,
creating a more engaging experience. Computers have revolutionized the performing
arts by providing new tools for creation, enhancing live performances, and expanding
the reach and accessibility of artistic works. From digital composition and interactive
staging to virtual rehearsals and global live streaming, technology continues to push the
boundaries of what is possible in the performing arts.
Philosophy:
Computers allow philosophers to create models and simulations of complex systems,

such as social dynamics, cognitive processes, or ethical dilemmas. This helps in
exploring theoretical scenarios and understanding emergent properties of philosophical
concepts. Philosophers can use algorithms to analyze texts, arguments, and
philosophical positions systematically. This includes techniques like natural language

processing (NLP) to interpret philosophical texts or computational models to test logical
consistency. Computers are central to the study of AI ethics, raising questions about
machine autonomy, moral decision-making, and the implications of artificial
intelligence in society. Philosophers of mind use computational models to explore
theories of consciousness, cognitive processes, and the nature of thought.
Computational neuroscience and cognitive science provide insights into understanding
the mind. Automated Reasoning: Computer programs can perform automated
reasoning, assisting in the development and testing of logical proofs and arguments.
This helps in exploring formal systems and their implications. Tools like theorem
provers and model checkers verify the correctness of logical systems and arguments,
ensuring consistency and reliability in philosophical reasoning. Online repositories and
databases provide access to vast amounts of philosophical texts, papers, and resources.
This democratizes access to knowledge and facilitates research. Computers enable
philosophers to collaborate through online platforms, sharing ideas, conducting joint
research, and participating in virtual conferences and seminars. Impact of Technology
on Society: Philosophers explore the ethical, social, and existential implications of
emerging technologies, such as AI, biotechnology, and the internet. New philosophical
concepts and frameworks are developed to address issues unique to the digital age, such
as virtual reality, digital identity, and cyber ethics. E-Learning and MOOCs: Online
courses, lectures, and educational platforms make philosophical education more
accessible to a global audience. Interactive tools and multimedia resources enhance the
learning experience. Computer-based simulations and interactive scenarios allow
students to engage with philosophical problems and ethical dilemmas in a practical and
experiential manner. Computational tools are used in the digital humanities to analyze
philosophical texts, trace the development of ideas, and uncover patterns in historical
philosophical discourse. Text mining and data analysis techniques help philosophers
examine large corpora of texts, identifying themes, trends, and influences across
different works and periods. Computers have become integral to the practice of
philosophy, offering new tools and methodologies for research, analysis, and education.
From modeling cognitive processes and exploring AI ethics to facilitating global
collaboration and democratizing access to knowledge, technology continues to shape
and expand the horizons of philosophical inquiry.

CHAPTER TWO: WEB DESIGN
Web Design refers to the process of creating websites, encompassing several aspects
including webpage layout, content production, and graphic design. It is essential for
digital presence, user engagement, and achieving business goals. A well-designed
website enhances user experience and boosts credibility.
Web Design Process:
1. Planning
Understand what you aim to achieve with your website.
Identify Audience: Know the target audience's needs and preferences.
Create a Sitemap: Outline the structure and organization of the website's pages.
2. Design and Development
Create detailed designs using graphic design software using Adobe XD, Photoshop.
Structure and style the content using HTML for structure and CSS for styling. Add
interactivity and dynamic elements. Example: Image sliders, form validations using
JavaScript
3. Testing and Launch
Ensure compatibility across different browsers using Chrome, Firefox, Safari, Microsoft
Edge. Check the website on various devices and screen sizes. Compress images, minify
CSS and JavaScript files using tools like Google PageSpeed Insights.
4. Deployment and Maintenance
Choose a reliable hosting provider for example, Bluehost, SiteGround.
Upload Files using FTP or hosting tools to upload the website files.
Keep the website content and software up to date.
Regularly backup the website data to prevent data loss.
Introduction to HTML
HTML (HyperText Markup Language) is the standard language used to create

webpages. It provides the basic structure of a site, which is enhanced and modified by
other technologies such as CSS (Cascading Style Sheets) and JavaScript.
1. Basic Structure of an HTML Document

Every HTML document starts with a <!DOCTYPE html> declaration, followed by an
<html> tag that contains the document as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is my first HTML page. I'm learning how to create websites!</p>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
 <!DOCTYPE html>: Declares the document type and version of HTML.

 <html lang="en">: Root element of the HTML document, specifying the
language.
 <head>: Contains meta-information about the document (character set, viewport
settings, title).
 <body>: Contains the content of the HTML document, visible to the user.
2. Common HTML Elements
Headings
Headings range from <h1> (highest level) to <h6> (lowest level).
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
Paragraphs
Paragraphs are created using the <p> tag.
<p>This is a paragraph of text.</p>

Links
Links are created using the <a> (anchor) tag.
<a href="https://www.example.com">
Images
Images are embedded using the <img> tag, which must include the src attribute
(meaning source of the image).
<img src="image.jpg" alt="Description of the image">

Lists
There are ordered lists (<ol>) and unordered lists (<ul>).
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
3. HTML Attributes
HTML elements can have attributes, providing additional information about the
element. Common attributes include class, id, and style.
Class and ID Attributes
 class: Used to apply CSS styles to multiple elements.

 id: Unique identifier for a single element, used for styling or scripting.
<p class="intro">This is an introductory paragraph.</p>

<p id="unique">This paragraph has a unique ID.</p>

Style Attribute
Inline CSS styles can be applied using the style attribute.
<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>
4. Semantic HTML
Semantic HTML introduces meaning to the web page rather than just presentation.
Common semantic elements include:
<article></article>
<aside></aside>
<details></details>
<figcaption></figcaption>
<figure></figure>
<footer></footer>
<header></header>
<main></main>
<nav></nav>
<section></section>
<summary></summary>
<time></time>
Example of Semantic HTML
<article>
<header>
<h2>Article Title</h2>
<p>Published on <time datetime="2024-06-10">June 10, 2024</time></p>
</header>
<section>
<p>This is a section of the article.</p>
</section>
<footer>
<p>Author: John Doe</p>
</footer>
</article>
5. Forms
Forms are used to collect user input. The <form> element encompasses the form fields
and submission buttons.
<form action="/submit_form" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">

</form>
 action: URL to which the form data will be sent.

 method: HTTP method for sending data (get or post).
 <input>: Various input types like text, email, submit, etc.
6. Multimedia
HTML supports embedding audio and video using the <audio> and <video> tags.
Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
7. HTML5 New Elements
HTML5 introduced new elements for better structure and functionality.
 <article>: Self-contained content.

 <section>: Thematic grouping of content.
 <nav>: Navigation links.
 <aside>: Sidebar content.
 <header>: Introductory content or navigation links.
 <footer>: Footer for the content.
Example
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Main Section</h2>
<p>This is the main content section.</p>
</section>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
Example of a Website
Task: To create a simple website for a fictional cafe called "Café Delight." This website
will have a homepage, a menu page, and a contact page.
index.html (Home Page)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Café Delight</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Café Delight</h1>
<nav>
<ul>

<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Welcome to Café Delight</h2>
<p>Enjoy delicious coffee and pastries in a cozy atmosphere.</p>
</section>
</main>
<footer>
<p>© 2024 Café Delight</p>
</footer>
</body>
</html>
Menu.html (Menu Page)

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu - Café Delight</title>
</head>
<body>
<header>

<nav>
<ul>
</ul>
</nav>
</header>
<main>
<section>
<h2>Our Menu</h2>
<ul>
<li>Coffee - $2.50</li>
<li>Latte - $3.50</li>
<li>Espresso - $2.00</li>
<li>Croissant - $2.00</li>
<li>Muffin - $1.50</li>
</ul>
</section>
</main>
<footer>
</footer>
</body>
</html>
Contact.html (Contact Page)

<!DOCTYPE html>
<html lang="en">
<head>

<title>Contact Us - Café Delight</title>
</head>
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<main>
<section>
<h2>Contact Us</h2>
<p>For inquiries or reservations, please call us at: 123-456-7890</p>
</section>
</main>
<footer>
</footer>
</body>
</html>

CHAPTER THREE: GRAPHIC DESIGN
Graphic design is the art and practice of visual communication. It involves creating
visual content to convey messages, ideas, and information effectively and aesthetically.
Graphic design is a versatile and rewarding field that requires creativity, technical skill,
and a deep understanding of design principles. Essential graphic design tools include:
Adobe Photoshop, Canva, Stetch, Stigma etc.
Adobe Photoshop:
Adobe Photoshop is a versatile and essential tool for image editing, graphic design, and
digital art creation.
Interface Overview
 Menu Bar: Contains various commands and options for working with images.
 Toolbox: Houses a wide range of tools for editing and creating images.
 Layers Panel: Displays layers, allowing for non-destructive editing and
compositing.
 Properties Panel: Provides options and settings for selected tools or layers.
Creating a New Document
 Go to File > New or use the shortcut Ctrl + N.

 Specify document settings such as width, height, resolution, and color mode.
 Click "Create" to create a new document.
Essential Tools and Functions
Selection Tools
 Marquee Selection: Select rectangular or elliptical areas.

 Lasso Selection: Freeform selection tool for selecting irregular shapes.
 Magic Wand: Selects areas based on color similarity.
 Quick Selection: Automatically selects similar pixels based on brush size and
hardness.
Editing Tools
 Brush Tool: Paints colors and patterns onto an image.

 Eraser Tool: Removes portions of an image or layer.
 Clone Stamp Tool: Clones pixels from one area to another.
 Gradient Tool: Fills an area with a smooth transition between colors.

Layer Basics
 Creating Layers: Click the "New Layer" icon in the Layers panel.
 Layer Mask: Hide or reveal portions of a layer without permanently erasing
them.
 Blending Modes: Blend layers together to create different effects (e.g., Multiply,
Screen, Overlay).
Image Editing Techniques
Cropping and Resizing
 Use the Crop Tool (C) to crop images to desired dimensions.

 Go to Image > Image Size to resize images while maintaining aspect ratio.
Adjustments and Filters
 Image Adjustments: Enhance colors, brightness, and contrast using adjustment

layers (e.g., Levels, Curves, Hue/Saturation).
 Filters: Apply various effects and stylizations to images (e.g., Blur, Sharpen,
Distort).
Retouching and Healing
 Spot Healing Brush: Quickly remove blemishes and imperfections from images.
 Clone Stamp Tool: Clone pixels from one area to another to retouch or remove
objects.
Creating Digital Art and Design
Text and Typography
 Use the Text Tool (T) to add text layers to your design.
 Experiment with different fonts, sizes, and styles to achieve desired typography.
Drawing and Painting
 Brushes: Customize brush settings such as size, hardness, opacity, and flow.
 Drawing Tablets: Utilize pressure-sensitive drawing tablets for more precise and
natural drawing/painting.
Layer Styles and Effects
 Apply layer styles (e.g., Drop Shadow, Stroke, Gradient Overlay) to add depth and
dimension to layers.

 Experiment with layer effects and blending options to achieve desired visual
effects.
Saving and Exporting
Saving Files
 Go to File > Save to save a Photoshop (.psd) file with layers intact for future
editing.
 Use File > Save As to save a copy of the file in different formats such as JPEG,
PNG, or PDF.
Exporting for Web and Print
 Go to File > Export > Export As to export images for web use, adjusting settings
such as quality and file format (e.g., JPEG, PNG).
 For print, ensure images are saved in CMYK color mode and at appropriate
resolution (usually 300 dpi).
Canva:
Canva is an online graphic design platform that allows users to create a wide range of
visual content, including social media graphics, presentations, posters, and more. Canva
is a versatile and user-friendly tool for creating stunning graphic designs, even for
beginners.
1. Signing Up and Logging In
 Visit the Canva website (www.canva.com) and sign up for a free account.
 Alternatively, log in with your existing Google or Facebook account.
Interface Overview
 Dashboard: Access your designs, templates, and folders.

 Toolbar: Contains various tools for creating and editing designs.
 Sidebar: Provides access to templates, elements, text, and uploads.
 Canvas Area: Where you design and edit your projects.
2. Creating a New Design
Choosing a Template
 Click on "Create a design" on the Canva dashboard.

 Browse through the template categories or use the search bar to find a specific
template.
 Click on a template to start editing.

Customizing Your Design
 Replace placeholder text and images with your own content.

 Customize colors, fonts, and other design elements using the toolbar and sidebar
options.
 Add elements such as shapes, icons, illustrations, and photos to enhance your
design.
Saving and Downloading
 Click on the "Download" button to save your design.

 Choose the file format (e.g., JPG, PNG, PDF) and quality options.
 Your design will be downloaded to your computer or device.
3. Exploring Canva Features
Templates
 Canva offers a wide range of professionally designed templates for various

purposes.
 Explore templates for social media posts, presentations, flyers, posters, and
more.
Elements
 Access a library of elements including shapes, icons, illustrations, and stickers.

 Drag and drop elements onto your canvas to enhance your designs.
Text
 Add text to your designs using a variety of fonts, styles, and colors.
 Customize text elements by adjusting size, alignment, spacing, and effects.
Uploads
 Upload your own images, logos, and other assets to use in your designs.
 Organize uploaded files into folders for easy access and management.
4. Design Tips and Best Practices
Keep It Simple
 Avoid cluttered designs by focusing on key elements and messages.

 Use white space effectively to create a clean and balanced layout.

Consistency is Key
 Maintain consistency in colors, fonts, and design style across your projects.
 Use Canva's "Brand Kit" feature to save brand colors, fonts, and logos for easy
access.
Experiment and Explore
 Don't be afraid to experiment with different templates, layouts, and design

elements.
 Explore Canva's features and tools to discover new possibilities for your designs.
5. Collaborating and Sharing
Collaboration
 Invite team members or collaborators to view or edit your designs.

 Use Canva's collaboration features to work together in real-time on projects.
Sharing and Publishing
 Share your designs directly from Canva via email, social media, or link.
 Download designs for printing or use the "Publish" feature to share them online.

CHAPTER FOUR: USE OF THE INTERNET
The Internet is a vast network of interconnected computers that allows users to access
and share information globally. In this tutorial, we'll cover the basics of the Internet,
how it works, and how to use it effectively. The Internet has become an indispensable
tool for communication, information sharing, and commerce in today's digital age. By
understanding how the Internet works and following best practices for online safety and
security, users can make the most of this powerful resource while protecting themselves
from potential risks and threats.
1. Understanding the Internet
The Internet is a network of networks, connecting millions of computers worldwide. It

enables communication, collaboration, and the exchange of information through various
services and protocols. The Internet works through a system of interconnected routers
and servers. Data is transmitted in packets across different networks using the TCP/IP
protocol suite. Users access the Internet through Internet Service Providers (ISPs) via
wired or wireless connections.
Key Internet Terminology
 URL (Uniform Resource Locator): A web address that identifies the location of a
resource on the Internet (e.g., https://www.example.com).
 Browser: Software used to access and view websites and web content (e.g.,
Google Chrome, Mozilla Firefox).
 Website: A collection of web pages hosted on a server and accessible via the
Internet.
 Search Engine: A tool that allows users to search for information on the Internet
(e.g., Google, Bing).
 Hyperlink: A clickable link that directs users to another web page or resource.

2. Using the Internet Effectively
 Open your web browser and enter a URL in the address bar to visit a website.
 Navigate between web pages by clicking on hyperlinks or using the browser's
back and forward buttons.
 Use Search engines to find information on specific topics by entering keywords or
phrases.
 Send and receive emails using email services like Gmail, Outlook, or Yahoo Mail.
 Use messaging apps and social media platforms to connect with friends, family,
3. Internet Safety and Security
Protecting Your Privacy
 Be cautious about sharing personal information online, especially on public

websites and social media.
 Use strong, unique passwords for your accounts and enable two-factor
authentication when available.
Avoiding Online Threats
 Install antivirus software and keep it up to date to protect against malware,

viruses, and other online threats.
 Be wary of suspicious links, emails, and attachments, as they may be phishing
attempts or contain malicious content.

5. COMPUTER PROGRAMMING
Computer Programming is the process of writing instructions (code) for computers to

perform specific tasks or solve problems. It involves designing algorithms, writing code
in programming languages, and debugging and testing code for errors.
Programming languages are formal languages used to communicate instructions to

computers. Examples include Python, Java, JavaScript, C++, and many others, each
with its syntax and semantics. These programming languages can be tested in
environments such as Integrated Development Environments (IDEs) using tools such as
Software tools for writing, testing, and debugging code, such as Visual Studio Code,
PyCharm, and IntelliJ IDEA.
Importance of Computer Programming
 Computer programming is fundamental to the development of software,

applications, and systems that power modern technology.
 It enables automation, data processing, and the creation of innovative solutions
to real-world problems.
 Proficiency in programming is highly sought after in various industries, including
software development, data science, cybersecurity, and artificial intelligence.
Key Concepts
 Variables: Containers for storing data values, such as numbers or strings.

 Control Structures: Constructs for controlling the flow of program execution,
including loops and conditional statements.
 Functions: Reusable blocks of code that perform specific tasks.
 Data Structures: Organized collections of data, such as arrays, lists, and
dictionaries.
 Algorithms: Step-by-step procedures or methods for solving problems or
performing tasks efficiently.
Development Process
 Problem Solving: Identify and understand the problem to be solved.

 Algorithm Design: Plan and outline the steps needed to solve the problem.
 Coding: Write code to implement the algorithm in a chosen programming
language.
 Testing and Debugging: Test the code to ensure it produces the correct output
and debug any errors or issues.
Best Practices
 Readability: Write code that is clear, concise, and easy to understand for yourself
and others.

 Modularity: Break code into smaller, modular components for easier
maintenance and reuse.
 Documentation: Document code with comments and documentation to explain
its purpose and functionality.
 Testing: Test code thoroughly to identify and fix errors before deployment.
Introduction to Python Programming Language
Python is a high-level, interpreted programming language known for its simplicity and
readability. Python is widely used in various domains, including web development, data
science, machine learning, and automation. Its simplicity and ease of learning makes it
an ideal choice for beginners and professionals alike. Practical Application of Python
includes Web Development which uses frameworks like Django and Flask for building
web applications
Installing Python:
 Download and install the latest version of Python from the official website
(https://www.python.org).
 Optionally, use package managers like Anaconda or pip to manage Python
packages and environments.
 Choose an Integrated Development Environment (IDE) for writing and executing

Python code, such as PyCharm, Visual Studio Code, or Jupyter Notebook.
Python Basics:
Variables and Data Types
 Variables: Containers for storing data values, such as numbers, strings, lists,
tuples, dictionaries, and more.
 Data Types: Numeric (int, float), String, List, Tuple, Dictionary, Boolean, and
more.
Operators
 Arithmetic Operators: +, -, *, /, %, **.

 Comparison Operators: ==, !=, <, >, <=, >=.
 Logical Operators: and, or, not.
Control Flow
 Conditional Statements: if, elsif, else.

 Loops: for loop, while loop.

Functions
 Defining Functions: def keyword.

 Calling Functions: FunctionName(parameters).
Example 1:
Find the factorial of a given number n.
The factorial of a non-negative integer n is the product of all positive integers less than
or equal to n. It is denoted by n!. Mathematically, n! = n * (n-1) * (n-2) * ... * 1.
def factorial(n):
# Base case: Factorial of 0 is 1
if n == 0:
return 1
else:
# Recursive case: Factorial of n is n * factorial(n-1)
return n * factorial(n-1)
# Test the factorial function

number = int(input("Enter a number: "))
result = factorial(number)
print("Factorial of", number, "is", result)
Explanation:
1. Define a function factorial that takes an integer n as input.

2. Handle the base case: If n is 0, the factorial is 1, so we return 1.
3. For non-zero n, use recursion to calculate the factorial. We return n * factorial(n-
1).
4. Prompt the user to enter a number.
5. Call the factorial function with the input number and store the result.
6. Print the factorial of the input number.
Example 2”
Find the sum of the first 10 odd numbers.
def sum_of_odd_numbers():
odd_sum = 0
count = 0
number = 1
while count < 10:
odd_sum += number
number += 2 # Increment to the next odd number

count += 1 # Increment count
return odd_sum
# Calculate and print the sum of the first 10 odd numbers

result = sum_of_odd_numbers()
print("Sum of the first 10 odd numbers:", result)
Explanation:
1. Define a function sum_of_odd_numbers to calculate the sum of the first 10 odd

numbers.
2. Initialize variables odd_sum to store the sum, count to keep track of the number
of odd numbers added, and number to start with the first odd number (1).
3. Use a while loop to iterate until we've added 10 odd numbers.
4. Inside the loop, add the current odd number (number) to the sum (odd_sum),
increment number by 2 to move to the next odd number, and increment count.
5. Return the sum.
6. Call the function, store the result, and print the sum of the first 10 odd numbers.
Example 3:
Find the sum of the first 10 even numbers.
def sum_of_even_numbers():
even_sum = 0
count = 0
number = 2
while count < 10:

even_sum += number
number += 2 # Increment to the next even number
count += 1 # Increment count
return even_sum
# Calculate and print the sum of the first 10 even numbers

result = sum_of_even_numbers()
print("Sum of the first 10 even numbers:", result)
Explanation:
1. Define a function sum_of_even_numbers to calculate the sum of the first 10 even

numbers.
2. Initialize variables even_sum to store the sum, count to keep track of the number
of even numbers added, and number to start with the first even number (2).
3. Use a while loop to iterate until we've added 10 even numbers.

4. Inside the loop, add the current even number (number) to the sum (even_sum),
increment number by 2 to move to the next even number, and increment count.
5. Return the sum.
6. Call the function, store the result, and print the sum of the first 10 even numbers.
Introduction to Java Programming Language
Java is a high-level, object-oriented programming language developed by Sun

Microsystems (now owned by Oracle Corporation). It is known for its platform
independence, write-once-run-anywhere (WORA) philosophy, and extensive standard
library. Java is widely used for developing a variety of applications, including web
applications, mobile apps (Android), desktop applications, enterprise software, and
more. Its robustness, scalability, and security makes it suitable for building large-scale,
mission-critical systems. Practical Applications of Java include Web Development which
uses frameworks like Spring Boot, Java EE, or Apache Struts for building web
applications.
Installing Java Development Kit (JDK):
 Download and install the latest version of JDK from the official Oracle website
(https://www.oracle.com/java/technologies/javase-jdk11-downloads.html).
 Set up environment variables (JAVA_HOME and PATH) to point to the JDK
installation directory.
 Choose an Integrated Development Environment (IDE) for writing, compiling,

and debugging Java code, such as IntelliJ IDEA, Eclipse, or NetBeans.
Java Basics:
Syntax and Structure
 Java programs are organized into classes, each containing methods that define
the program's behavior.
 Statements end with semicolons (;) and blocks of code are enclosed in curly
braces ({}).
Variables and Data Types
 Java supports various data types, including primitive types (int, double, boolean)
and reference types (String, arrays, objects).
 Variables must be declared with a data type before use, and their values can be
assigned using the assignment operator (=).

Operators
 Arithmetic Operators: +, -, *, /, %.
 Relational Operators: ==, !=, <, >, <=, >=.
 Logical Operators: &&, ||, !.
Control Flow
 Conditional Statements: if, else if, else.

 Loops: for, while, do-while.
Object-Oriented Programming (OOP) in Java:
Classes and Objects
 Classes define the blueprint for creating objects with properties (attributes) and
behaviors (methods).
 Objects are instances of classes, created using the new keyword.
Encapsulation
 Encapsulation involves bundling data (attributes) and methods that operate on

the data within a single unit (class), hiding the internal state of an object from the
outside world.
Inheritance
 Inheritance allows a class (subclass) to inherit properties and behaviors from

another class (superclass), promoting code reuse and hierarchical organization.
Polymorphism
 Polymorphism enables objects of different classes to be treated as objects of a

common superclass, allowing for method overriding and dynamic method
invocation.
Object-Oriented Programming (OOP)

Object-Oriented Programming (OOP) is a programming paradigm that uses objects and
classes to design and structure software.

Classes and Objects
 Class: A blueprint for creating objects. It defines a set of attributes and methods
that the created objects will have. For example, an OOP in Jave is illustrated as”
public class Car {

String color;
String model;
void drive() {
System.out.println("The car is driving.");
}
}
 Object: An instance of a class. It is created from the class blueprint and has the
properties and methods defined by the class.
Car myCar = new Car();

myCar.color = "Red";
myCar.model = "Tesla Model S";
myCar.drive();
Encapsulation
Encapsulation is the bundling of data (attributes) and methods that operate on the data
into a single unit (class). It restricts direct access to some of an object's components,
which can help prevent unintended interference and misuse.
public class Person {

private String name;
private int age;
public String getName() {

return name;
}
public void setName(String name) {

this.name = name;
}
public int getAge() {

return age;
}
public void setAge(int age) {

if (age > 0) {
this.age = age;

}
}
}
Inheritance
Inheritance allows a new class to inherit attributes and methods from an existing class.
The new class (subclass) can add its own attributes and methods and override methods
from the parent class (superclass).
public class Animal {

void eat() {
System.out.println("This animal eats food.");
}
}
public class Dog extends Animal {

void bark() {
System.out.println("The dog barks.");
}
}
Dog myDog = new Dog();

myDog.eat(); // Inherited method
myDog.bark();
Polymorphism
Polymorphism allows objects to be treated as instances of their parent class rather than
their actual class. This enables methods to use objects of different classes
interchangeably.
public class Animal {

void makeSound() {
System.out.println("Some sound");
}
}
public class Cat extends Animal {

void makeSound() {
System.out.println("Meow");
}
}
public class Dog extends Animal {

void makeSound() {
System.out.println("Bark");

}
}
Animal myAnimal = new Cat();

myAnimal.makeSound(); // Outputs "Meow"
myAnimal = new Dog();

myAnimal.makeSound(); // Outputs "Bark"
Abstraction
Abstraction is the concept of hiding the complex implementation details and showing
only the essential features of an object. It can be achieved using abstract classes and
interfaces.
abstract class Shape {

abstract void draw();
}
class Circle extends Shape {

void draw() {
System.out.println("Drawing a circle");
}
}
Shape myShape = new Circle();
Example:
Create a simple object-oriented programming language to develop a website for

philosophy, history and performing Arts.
Solution:
Creating a simple website using an object-oriented programming approach can be
achieved using Python with a web framework like Flask. Flask is a lightweight and easy-
to-use web framework that allows for quick development and deployment of web
applications.
Here's a step-by-step guide to developing a basic website for philosophy, history, and
performing arts using Flask:

1. Setting Up the Environment
Install Flask
First, make sure you have Python installed. Then, you can install Flask using pip:
2. Project Structure
Create a project directory with the following structure:
philosophy_history_arts
│
├── app.py
├── templates
│ ├── base.html
│ ├── index.html
│ ├── philosophy.html
│ ├── history.html
│ ├── arts.html
└── static
├── styles.css
3. Flask Application
app.py
This is the main file where the Flask application will be defined.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/philosophy')
def philosophy():
return render_template('philosophy.html')
@app.route('/history')
def history():
return render_template('history.html')
@app.route('/arts')
def arts():

return render_template('arts.html')
if __name__ == '__main__':
app.run(debug=True)
4. HTML Templates
templates/base.html
This is the base template that other templates will extend.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Philosophy, History, and Performing Arts</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<header>
<h1>Philosophy, History, and Performing Arts</h1>
<nav>
<ul>
<li><a href="{{ url_for('index') }}">Home</a></li>
<li><a href="{{ url_for('philosophy') }}">Philosophy</a></li>
<li><a href="{{ url_for('history') }}">History</a></li>
<li><a href="{{ url_for('arts') }}">Arts</a></li>
</ul>
</nav>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
templates/index.html
This is the home page template.
{% extends 'base.html' %}
{% block content %}
<h2>Welcome to Philosophy, History, and Performing Arts</h2>
<p>Explore the realms of philosophy, delve into the depths of history, and experience
the beauty of performing arts.</p>
{% endblock %}

templates/philosophy.html
This is the philosophy page template.
{% block content %}
<h2>Philosophy</h2>
<p>Philosophy is the study of general and fundamental questions about existence,
knowledge, values, reason, mind, and language.</p>
{% endblock %}
templates/history.html
This is the history page template.
html
Copy code
{% block content %}
<h2>History</h2>
<p>History is the study of the past as it is described in written documents. It
encompasses various periods, events, and notable figures.</p>
{% endblock %}
templates/arts.html
This is the performing arts page template.
html
Copy code
{% block content %}
<h2>Performing Arts</h2>
<p>The performing arts include a wide range of activities such as theater, music, dance,
and other forms of performance.</p>
{% endblock %}
5. Static Files
static/styles.css
This is the CSS file for styling the website.
css

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 1rem;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 2rem;
}
6. Running the Application
To run the application, navigate to the project directory in your terminal and execute:
python app.py
Open your web browser and go to http://127.0.0.1:5000/ to see the website

Course Assignment
Please Note: The following course assignments will be used to assess students’
understanding of the general course. In addition, it will used to generate part of the
scores that makeup students’ CA. hence, a total score of 10 marks will be allocated for
this course assignment.
1. Write a simple Python program to add 10 Prime numbers
2. Using OOP and Java with Apache Struts, create a simple website to allow for digital
stage rehearsal (performing Arts students only), archival of historical information (for
history and international relation students only) and reasoning, assisting in the
development and testing of logical proofs and arguments (for philosophy students only).

CMP 312 LECURE MATERIAL

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CMP 312 LECURE MATERIAL

Uploaded by

Copyright:

Available Formats

UNIVERSITY OF DELTA AGBOR,

DEPARTMENTS OF PHILOSOPHY, PERFORMING ARTS & HISTORY AND

SECOND SEMESTER LECTURE MATERIAL

Course Code: CMP 312

LECTURER: MISS SNOW

Application of Computer to Arts Page 1

Application of Computer to Arts Page 2

The Roles of Computer to Arts

History and Human Relation:

Application of Computer to Arts Page 3

Computers allow philosophers to create models and simulations of complex systems,

Application of Computer to Arts Page 4

Application of Computer to Arts Page 5

Web Design Process:

Understand what you aim to achieve with your website.

Identify Audience: Know the target audience's needs and preferences.

2. Design and Development

3. Testing and Launch

4. Deployment and Maintenance

Choose a reliable hosting provider for example, Bluehost, SiteGround.

Keep the website content and software up to date.

Regularly backup the website data to prevent data loss.

HTML (HyperText Markup Language) is the standard language used to create

1. Basic Structure of an HTML Document

Application of Computer to Arts Page 6

 <!DOCTYPE html>: Declares the document type and version of HTML.

2. Common HTML Elements

Headings range from <h1> (highest level) to <h6> (lowest level).

Paragraphs are created using the <p> tag.

<p>This is a paragraph of text.</p>

Application of Computer to Arts Page 7

Links are created using the <a> (anchor) tag.

<img src="image.jpg" alt="Description of the image">

There are ordered lists (<ol>) and unordered lists (<ul>).

Class and ID Attributes

 class: Used to apply CSS styles to multiple elements.

<p class="intro">This is an introductory paragraph.</p>

Application of Computer to Arts Page 8

Inline CSS styles can be applied using the style attribute.

<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>

<form action="/submit_form" method="post">

Application of Computer to Arts Page 9

<input type="submit" value="Submit">

 action: URL to which the form data will be sent.

7. HTML5 New Elements

HTML5 introduced new elements for better structure and functionality.

 <article>: Self-contained content.

Application of Computer to Arts Page 10

index.html (Home Page)

Application of Computer to Arts Page 11

Menu.html (Menu Page)

Application of Computer to Arts Page 12

Contact.html (Contact Page)

Application of Computer to Arts Page 13

Application of Computer to Arts Page 14

Creating a New Document

 Go to File > New or use the shortcut Ctrl + N.

Essential Tools and Functions

 Marquee Selection: Select rectangular or elliptical areas.

 Brush Tool: Paints colors and patterns onto an image.

Application of Computer to Arts Page 15

Image Editing Techniques

Cropping and Resizing

 Use the Crop Tool (C) to crop images to desired dimensions.