Scribd
Upload
57 views45 pages

CCS370 Lab Manual

Uploaded by

vijithramurugesan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views45 pages

CCS370 Lab Manual

Uploaded by

vijithramurugesan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 45

1.

DEVELOPING A REPONSIVE LAYOUT FOR AN SOCIETAL


APPLICATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Societal App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Societal App</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Notifications</a></li>
</ul>
</nav>
</header>

<main>
<section class="content">
<h2>Latest Posts</h2>
<div class="post">
<h3>Post Title</h3>
<p>Content of the post...</p>
</div>
<!-- More posts go here -->
</section>

<aside class="sidebar">
<h2>Trending Topics</h2>
<ul>
<li>#topic1</li>
<li>#topic2</li>
<li>#topic3</li>
<!-- More trending topics go here -->
</ul>
</aside>
</main>
<footer>
<p>&copy; 2024 Societal App. All rights reserved.</p>
</footer>
</body>
</html>
CSS (styles.css):

/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 10px 20px;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 10px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}

.content {
flex: 70%;
}

.sidebar {
flex: 30%;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
main {
flex-direction: column;
}

.sidebar {
order: -1; /* Move sidebar to the top on small screens */
margin-top: 20px;
}
}

Output:

2.EXPLORING VARIOUS UI PATTERNS


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewp`ort" content="width=device-width, initial-scale=1.0">


<title>UI Interaction Patterns</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<h1>Explore UI Interaction Patterns</h1>

<button id="btnToggleModal">Open Modal</button>

<div id="modal" class="modal">

<div class="modal-content">

<span class="close">&times;</span>

<p>This is a modal. Click the &times; button to close.</p>

</div>

</div>

<input type="text" placeholder="Enter text">

<select>

<option value="option1">Option 1</option>

<option value="option2">Option 2</option>

<option value="option3">Option 3</option>

</select>

</div>

<script src="script.js"></script>

</body>

</html>

CSS (styles.css):

.container {

max-width: 600px;

margin: 50px auto;

padding: 20px;

text-align: center;

}
button {

padding: 10px 20px;

background-color: #007bff;

color: white;

border: none;

cursor: pointer;

input[type="text"], select {

margin: 10px 0;

padding: 8px;

width: 100%;

.modal {

display: none;

position: fixed;

z-index: 1;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

.modal-content {

background-color: #fefefe;

margin: 15% auto;

padding: 20px;

border: 1px solid #888;


width: 80%;

.close {

color: #aaa;

float: right;

font-size: 28px;

font-weight: bold;

.close:hover,

.close:focus {

color: black;

text-decoration: none;

cursor: pointer;

avaScript (script.js):

document.addEventListener('DOMContentLoaded', function() {

var modal = document.getElementById('modal');

var btnToggleModal = document.getElementById('btnToggleModal');

var spanClose = document.getElementsByClassName('close')[0];

btnToggleModal.addEventListener('click', function() {

modal.style.display = 'block';

});

spanClose.addEventListener('click', function() {

modal.style.display = 'none';

});
window.addEventListener('click', function(event) {

if (event.target == modal) {

modal.style.display = 'none';

});

});

Output:

3.Developing an interface with proper UI style Guides


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Style Guide Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My App</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section>
<h2>Section 1</h2>
<p>This is the content of section 1.</p>
</section>

<section>
<h2>Section 2</h2>
<p>This is the content of section 2.</p>
</section>
</main>
<footer>
<p>&copy; 2024 My App. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>
CSS (styles.css):

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 10px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
}

section {
margin-bottom: 20px;
}

footer {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}

OUTPUT:
4.Developing Wireflow diagram for application using open source software

5. Exploring various open source collaborative interface Platform


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Open Source Collaborative Interface Platforms</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
}

ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 6px;
}

li:hover {
background-color: #eaeaea;
cursor: pointer;
}
</style>
</head>
<body>

<div class="container">
<h1>Explore Open Source Collaborative Interface Platforms</h1>
<ul id="platformList">
<!-- Platforms will be added dynamically using JavaScript -->
</ul>
</div>

<script>
// Example data of open source collaborative interface platforms
const platforms = [
{ name: "GitHub", url: "https://github.com" },
{ name: "GitLab", url: "https://gitlab.com" },
{ name: "Bitbucket", url: "https://bitbucket.org" },
// Add more platforms as needed
];

// Function to dynamically populate the platform list


function populatePlatformList() {
const platformList = document.getElementById('platformList');
platformList.innerHTML = ''; // Clear existing list items

platforms.forEach(platform => {
const listItem = document.createElement('li');
listItem.textContent = platform.name;
listItem.addEventListener('click', () => window.open(platform.url,
'_blank'));
platformList.appendChild(listItem);
});
}

// Call the function to populate the platform list on page load


populatePlatformList();
</script>

</body>
</html>
6.Hands on Design Thinking Process for a new product

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Design Thinking Process for a New Product</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
}

.step {
margin-bottom: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 6px;
}

button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}
.hidden {
display: none;
}
</style>
</head>
<body>

<div class="container">
<h1>Design Thinking Process for a New Product</h1>

<div class="step" id="step1">


<h2>Step 1: Empathize</h2>
<p>Understand the user's needs, motivations, and pain points.</p>
<button onclick="nextStep()">Next</button>
</div>

<div class="step hidden" id="step2">


<h2>Step 2: Define</h2>
<p>Clearly define the problem based on user insights.</p>
<button onclick="nextStep()">Next</button>
</div>

<div class="step hidden" id="step3">


<h2>Step 3: Ideate</h2>
<p>Generate ideas to solve the defined problem.</p>
<button onclick="nextStep()">Next</button>
</div>

<div class="step hidden" id="step4">


<h2>Step 4: Prototype</h2>
<p>Create a low-fidelity prototype of the solution.</p>
<button onclick="nextStep()">Next</button>
</div>

<div class="step hidden" id="step5">


<h2>Step 5: Test</h2>
<p>Test the prototype with users and gather feedback.</p>
<button onclick="restart()">Restart</button>
</div>
</div>

<script>
let currentStep = 1;

function nextStep() {
document.getElementById(`step$
{currentStep}`).classList.add('hidden');
currentStep++;
if (currentStep <= 5) {
document.getElementById(`step$
{currentStep}`).classList.remove('hidden');
}
}

function restart() {
document.getElementById(`step$
{currentStep}`).classList.add('hidden');
currentStep = 1;
document.getElementById(`step$
{currentStep}`).classList.remove('hidden');
}
</script>

</body>
</html>
7.Brainstorming feature for proposed product

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Brainstorming Feature for Proposed Product</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
text-align: center;
}

form {
text-align: center;
margin-bottom: 20px;
}

input[type="text"] {
width: 70%;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
}

button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

ul {
list-style-type: none;
padding: 0;
text-align: left;
}

li {
padding: 10px;
background-color: #f9f9f9;
margin-bottom: 10px;
border-radius: 4px;
}
</style>
</head>
<body>

<div class="container">
<h1>Brainstorming Feature for Proposed Product</h1>

<form id="ideaForm">
<input type="text" id="ideaInput" placeholder="Enter your
idea">
<button type="submit">Submit Idea</button>
</form>

<ul id="ideaList">
<!-- Ideas will be added dynamically using JavaScript -->
</ul>
</div>

<script>
// Function to add idea to the list
function addIdea(event) {
event.preventDefault(); // Prevent form submission
const ideaInput = document.getElementById('ideaInput');
const idea = ideaInput.value.trim();
if (idea !== '') {
const ideaList = document.getElementById('ideaList');
const listItem = document.createElement('li');
listItem.textContent = idea;
ideaList.appendChild(listItem);
ideaInput.value = ''; // Clear input field
}
}

// Add event listener to form submission


document.getElementById('ideaForm').addEventListener('submit',
addIdea);
</script>

</body>
</html>
8. Defining the Look and Feel of the new Project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Define Look and Feel</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
}

.option {
margin-bottom: 20px;
}

.option label {
font-weight: bold;
}

.option input[type="color"] {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
cursor: pointer;
}

.option select {
padding: 5px;
border-radius: 4px;
}

button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>

<div class="container">
<h1>Define Look and Feel</h1>

<div class="option">
<label for="primaryColor">Primary Color:</label>
<input type="color" id="primaryColor" value="#007bff">
</div>

<div class="option">
<label for="secondaryColor">Secondary Color:</label>
<input type="color" id="secondaryColor" value="#6c757d">
</div>

<div class="option">
<label for="fontFamily">Font Family:</label>
<select id="fontFamily">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Helvetica">Helvetica</option>
<!-- Add more font options as needed -->
</select>
</div>

<button onclick="applyChanges()">Apply Changes</button>


</div>

<script>
function applyChanges() {
const primaryColor =
document.getElementById('primaryColor').value;
const secondaryColor =
document.getElementById('secondaryColor').value;
const fontFamily =
document.getElementById('fontFamily').value;

document.body.style.setProperty('--primary-color',
primaryColor);
document.body.style.setProperty('--secondary-color',
secondaryColor);
document.body.style.setProperty('--font-family', fontFamily);
}
</script>

</body>
</html>

9.Create a Sample Pattern Library for that product (Mood board, Fonts, Colors based on UI
principles)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sample Pattern Library</title>


<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 20px;

background-color: #f4f4f4;

.container {

max-width: 800px;

margin: 0 auto;

background-color: #fff;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

padding: 20px;

h1 {

text-align: center;

.section {

margin-bottom: 30px;

.section h2 {

margin-bottom: 10px;

.mood-board {

display: flex;
justify-content: space-between;

flex-wrap: wrap;

.mood-board img {

width: 30%;

margin-bottom: 10px;

border-radius: 8px;

.fonts {

font-family: 'Open Sans', sans-serif;

margin-top: 20px;

.colors {

margin-top: 20px;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

.color-box {

width: 30%;

height: 100px;

margin-bottom: 10px;

border-radius: 8px;

</style>

</head>

<body>
<div class="container">

<h1>Sample Pattern Library</h1>

<div class="section">

<h2>Mood Board</h2>

<div class="mood-board">

<img src="https://via.placeholder.com/300" alt="Mood Image 1">

<img src="https://via.placeholder.com/300" alt="Mood Image 2">

<img src="https://via.placeholder.com/300" alt="Mood Image 3">

</div>

</div>

<div class="section">

<h2>Fonts</h2>

<div class="fonts">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in mauris euismod,
suscipit turpis et, vestibulum erat.</p>

</div>

</div>

<div class="section">

<h2>Colors</h2>

<div class="colors">

<div class="color-box" style="background-color: #007bff;"></div>

<div class="color-box" style="background-color: #6c757d;"></div>

<div class="color-box" style="background-color: #28a745;"></div>

<div class="color-box" style="background-color: #17a2b8;"></div>

<div class="color-box" style="background-color: #ffc107;"></div>

<div class="color-box" style="background-color: #dc3545;"></div>

</div>
</div>

</div>

</body>

</html>

10. Identify a customer problem to solve

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Identify Customer Problem</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
}

form {
margin-top: 20px;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}

button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>

<div class="container">
<h1>Identify Customer Problem</h1>

<form id="problemForm" onsubmit="submitProblem(event)">


<label for="problemTitle">Problem Title:</label>
<input type="text" id="problemTitle" required>

<label for="problemDescription">Problem Description:</label>


<textarea id="problemDescription" rows="4" required></textarea>

<button type="submit">Submit</button>
</form>
</div>
<script>
function submitProblem(event) {
event.preventDefault();

const problemTitle = document.getElementById('problemTitle').value;


const problemDescription =
document.getElementById('problemDescription').value;

// Here you can perform further actions like sending the data to a server, etc.
console.log("Problem Title:", problemTitle);
console.log("Problem Description:", problemDescription);

// Optionally, you can display a success message or redirect the user to another
page.
}
</script>

</body>
</html>

11.Conduct end-to-end user research - User research, creating personas,


Ideation process (User stories, Scenarios), Flow diagrams, Flow Mapping

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>End-to-End User Research</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
text-align: center;
}

form {
margin-top: 20px;
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
}

input[type="text"],
textarea {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}

button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
align-self: flex-end;
}

button:hover {
background-color: #0056b3;
}

.persona {
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
}

.persona h2 {
margin-top: 0;
}
</style>
</head>
<body>

<div class="container">
<h1>End-to-End User Research</h1>

<!-- User Research Form -->


<h2>User Research</h2>
<form id="userResearchForm">
<label for="researchTopic">Research Topic:</label>
<input type="text" id="researchTopic" required>

<label for="researchDetails">Research Details:</label>


<textarea id="researchDetails" rows="4"
required></textarea>

<button type="submit">Submit</button>
</form>

<!-- Persona Creation -->


<div class="persona" id="personaSection" style="display:
none;">
<h2>Persona</h2>
<div id="personaDetails">
<!-- Persona details will be displayed here -->
</div>
</div>

<!-- Ideation Process -->


<h2>Ideation Process</h2>
<!-- User Stories, Scenarios, Flow Diagrams, Flow Mapping
can be added here -->
</div>

<script>
document.getElementById('userResearchForm').addEventList
ener('submit', function(event) {
event.preventDefault();

const researchTopic =
document.getElementById('researchTopic').value;
const researchDetails =
document.getElementById('researchDetails').value;
// Process the research data (e.g., store in database, perform
analysis)
console.log("Research Topic:", researchTopic);
console.log("Research Details:", researchDetails);

// Display Persona section


document.getElementById('personaSection').style.display =
'block';

// Generate and display Persona (this is just an example,


actual persona creation may be more complex)
const personaDetails = `
<p><strong>Name:</strong> John Doe</p>
<p><strong>Age:</strong> 35</p>
<p><strong>Occupation:</strong> Software Developer</p>
<!-- Add more persona details as needed -->
`;
document.getElementById('personaDetails').innerHTML =
personaDetails;
});
</script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy