UX
Intro to the lesson
- Do you remember the first operating system you used?
- What makes you remember that first interaction?
- The first operating system that I used was Windows XP, and fun fact the XP stands for experience. This shows how important User Experience is.
What is UX?
-
UX is the shortform of USER EXPERIENCE; a standard of understanding the USER EXPERIENCE of a product and optimise it based on data recived from users.
-
UX is a STANDARD OF USABILITY in all industries since collecting UX and improving the product based on it increases the POPULARITY of the product on the market, increasing profits of the company or collaboration.
Examples of bad UX but Good UI
- apple.com
- the website lags on lower end devices.
- renders the website useless on lower end devices (demonstrate)
- microsoft.com
- the website is very hard to navigate
- very hard to find every feature
- the first time i used it, i didn’t know where to change my password and eventually gave up
- is it trying to sell me its products or is it trying to help me?
- controversial but true, github.com
- veru hard to navigate
- very hard to find every feature
- too much is going on, mental stress 😩
Examples of Good UX and Good UI
- discord.com
- very easy to navigate
- very easy to find every feature
- everything is very well organized
- the icons are very easy to understand
- google.com
- it has a search bar, and that’s it
- it is very easy to use, even for a 5 year old or a 90 year old
What is the difference between UX and UI?
- The main difference between UX and UI is that UI focuses on how the website looks rather than how it works.
- A website can have a great UI but a bad UX, but a website can’t have a great UX but a bad UI
- If the website is bad to look at, the User Experience is going to be horrible.
When is UX Used?
- UX is used when a product, especially a new one, needs optimization or modification based on user prefrence. This helps with changing user perception of the product since the company producing it would have had no prior feedback and would have not known their user prefrences.
How is UX data gathered?
-
UX data is mainly gathered through internet forms or feedback discussion boards. Advertisments and websites such as Google forms or official company forums are some common methods. This data is used to make small or big quality kf life changes that make it more convineient anfor the user.
- An example of UX data collection is the Minecraft Forums:
- An example of UX implementation is the Spotify Wrapped interface:
- On one hand, the Minecraft Forums are a source of UX data and on the other hand, the Spotify Wrapped interface is an example of improving UX.
Why is UX important?
- UX is vital for the quality of a product; if there is no quality control or optimisation of UX, demand for the product drops and it fades away. If the product keeps up with modern UX expectations, it grows in popularity, gains higher demand and profits.
-
An example is the contrast between old and new Mario games:
- Incredibly low resolution, very lackluster in terms of background and very simple design on the UI and the foreground/level.
-
Incredibly detailed, amazing resolution, interesting levels and larger UI/interfaces.
-
As time has gone by, the user demands for higher resolution, higher detail, better quality, more game depth has translated into games as they strive to improve their UX to keep their products on top of the list.
What is jQuery?
jQuery is a lightweight, “WRITE LESS DO MORE”, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your site and it simplifies many tasks that require many lines of JavaScript code to accomplish, wraping them into METHODS that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The implications of jQuery
The jQuery library has the following features
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX (Asynchronous Javascript and XML)
- Utilities
- In addition, jQuery has plugins for almost any task out there.
If you ever want to use jQuery, you can download it here or just use a CDN (Content Delivery Network) from Google!
<!-- Downloaded jQuery -->
<head>
<script src="jquery-3.7.1.min.js"></script>
</head>
<!-- Google CDN which is the more common method of getting the library -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
jQuery syntax and how to use it
With jQuery you select (query) HTML elements and perform “ACTIONS” on them.
Basic syntax is: $(selector).action()
- A $ symbol to define/access jQuery
- A (selector) to “query (or find)” HTML elements
- A jQuery action() to be performed on the element(s)
Examples:
-
$(this).hide() - hides the current element
-
$(“p”).hide() - hides all <p> elements
-
$(“.test”).hide() - hides all elements with class=”test”
-
$(“#test”).hide() - hides the element with id=”test”
In the following example, write in one of the comments where the selector is (popcorn hack ~ raise hand when found)
$(document).ready(function(){ //
$("button").click(function(){ // selector
$("p").hide(); // selector
}); //
}); //
The element Selector
- $(“p”) The #id Selector
- $(“#test”) The .class Selector
- $(“.class”)
The Document Ready Event
All jQuery methods begin inside a document READY event:
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is finished loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.
Reason:
- Trying to hide an element that is not created yet
- Trying to get the size of an image that is not loaded yet
$(function(){
// An even quicker way to do it
// jQuery methods go here...
});
jQuery methods and event handling
What are Events?
- All the different visitors’ actions that a web page can respond to are called events
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Popcorn Hack: Name 3 other event HTML events
- hover
- onpress
- onreload
- onload
- local storage events
onclick=JavaScript
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Final example, look at it here
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Final example, look at it here
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Challenge! Make it so the text appears with an animation, causing it to slowly fade in and out!
});
</script>
</head>
<body>
<button id="hide">Hide</button>
<button id="show">Show</button>
<p>Points < Indicators :D</p>
<p>This is another small paragraph</p>
<p>(if you put a cool joke here you get .01 extra points)</p>
<p>"ew who wrote that?" ^^^</p>
</body>
</html>
Final example, look at it here
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
Final example, look at it here
Making requests with AJAX
AJAX stands for Asynchronous JavaScript and XML. It allows web pages to be updated asynchronously in a easier way and is promise based. A Promise in JavaScript represents the eventual completion (or failure) of an asynchronous request.
Why use jQuery AJAX over a normal async request or AJAX request?
Against a normal async request AJAX has a lot of advantages:
-
Easier Error Handling: Promises are much easier to deal with than callbacks. If an error occurs in a promise, it will be passed down to the next
catch()clause. -
Simpler API Chaining: If you want to wait for one operation to finish before starting another one you can simply use
.then().
Normal async request
getUserLocation(function(error, location) {
if (error) {
console.error('Error:', error);
} else {
getForecast(location, function(error, forecast) {
if (error) {
console.error('Error:', error);
} else {
console.log('Forecast:', forecast);
}
});
}
});
Ajax requests without any library
fetch('api/location')
.then(response => response.json())
.then(location => fetch('api/forecast/' + location))
.then(response => response.json())
.then(forecast => {
console.log('Forecast:', forecast);
})
.catch(error => {
console.error('Error:', error);
});
Ajax Requests with JQuery
$.ajax({ url: 'api/location', method: 'GET', dataType: 'json' })
.then(function(location) {
return $.ajax({ url: 'api/forecast/' + location, method: 'GET', dataType: 'json' });
})
.then(function(forecast) {
console.log('Forecast:', forecast);
})
.catch(function(error) {
console.error('Error:', error);
});
You can see using ajax is much easier to read than callback system. However when it comes to using jquery ajax vs javascript’s version there are less differences. It is up to you which syntax you like more.
As mentioned earlier, jQuery ajax also builds on top of the old javascript version so it can support older browser versions.
Jquery’s use with PBL
Jquery’s most important use is making you site dynamic and update from user input. The most important part of this for our projects is taking the data from the backend and building html from it.
%%html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.post {
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}
.like-count {
color: #007BFF;
}
</style>
</head>
<body>
<div id="posts"></div>
<script>
// Fake API function
function getAPI() {
return [
{id: 1, content: 'Dogs are man\'s best friend.', likes: 10},
{id: 2, content: 'Dogs have an exceptional sense of smell.', likes: 20},
{id: 3, content: 'There are hundreds of different dog breeds.', likes: 30}
];
}
$(document).ready(function(){
var posts = getAPI();
$.each(posts, function(i, post) {
var postHtml = '<div class="post"><h2>Post ' + post.id + '</h2><p>' + post.content + '</p><p class="like-count">' + post.likes + ' likes</p></div>';
$('#posts').append(postHtml);
});
});
</script>
</body>
Popcorn Hack: Complete the Jquery and JavaScript code
This represents a website for buying dogs. The API contains an id, name, price, and breed for each dog. Display them all as html using jQuery.
%%html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.dog {
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}
.price {
color: #007BFF;
}
</style>
</head>
<body>
<div id="dogs"></div>
<script>
// Fake API function
function getAPI() {
return [
{id: 1, name: 'Max', price: '$1000', breed: 'Golden Retriever'},
{id: 2, name: 'Bella', price: '$800', breed: 'Labrador Retriever'},
{id: 3, name: 'Charlie', price: '$1200', breed: 'German Shepherd'}
];
}
$(document).ready(function(){
var dogs = getAPI();
//Write code here
});
</script>
</body>
Animations with JQuery
You can also create animations in JQuery.
- styles: Specifies the CSS properties to animate.
- speed: Optional and specifies the speed of the animation, by default it is 400 milliseconds.
- easing: Optional and Specifies the animation pattern.
- “swing” - moves slower at the beginning/end, but faster in the middle
- “linear” - moves in a constant speed
- callback: Optional, a function to be executed after the animation completes.
- By default it is “swing”.
Animations glitch out jupyter notebooks so this example can’t be in runnable code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Reset CSS properties to their original values
$("div").css({
left: '0px',
opacity: '1',
height: '100px',
width: '100%'
});
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '100%'
});
});
});
</script>
</head>
<body>
<button>Start</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Look at the animation here
CRUD Principles:
What Does CRUD Stand For?
- CREATE, READ, UPDATE DELETE
What Does CRUD Do?
- These four basic operations represent the fundamental actions that can be performed on data in a computer system or a database.
How Can CRUD Be Applied to jQuery and Beyond?
- jQuery: jQuery is a JavaScript library that simplifies HTML document traversal and manipulation. You can use jQuery to perform CRUD operations on the client side, interacting with the DOM. Here’s a brief overview:
Create (C):
// Create a new element and append it to a table
$('#myTable').append('<tr><td>New Data</td></tr>');
Read (R):
// Read data from a table
$('#myTable tr').each(function() {
console.log($(this).text());
});
Update (U):
// Update data in a table
$('#myTable td:contains("Old Data")').text('Updated Data');
Delete (D):
// Delete a row from a table
$('#myTable td:contains("Data to Delete")').closest('tr').remove();
- Beyond jQuery: In more advanced web development scenarios, CRUD operations are often performed using server-side technologies and databases. Technologies like Node.js, Express, Django, Flask, and others are commonly used for server-side development. Databases such as MySQL, MongoDB, and PostgreSQL store and manage the data.
Demonstration of Applying CRUD to Tables:
Assuming a simple HTML table with the ID “myTable”:
<table id="myTable">
<tr>
<th>Data</th>
</tr>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</table>
Create (C):
// Create a new row and append it to the table
$('#myTable').append('<tr><td>New Row</td></tr>');
Read (R):
// Read and log data from the table
$('#myTable tr').each(function() {
console.log($(this).text());
});
Update (U):
// Update data in the first row of the table
$('#myTable tr:first-child td').text('Updated Row');
Delete (D):
// Delete the second row from the table
$('#myTable tr:nth-child(2)').remove();
These examples demonstrate how CRUD operations can be applied using jQuery to manipulate a simple HTML table on the client side. In more complex applications, these operations are often handled on the server side with the help of backend frameworks and databases.
jQuery CRUD Demo
| Name | Review | Action |
|---|---|---|
| John Mortensen | Great lesson! Explained UX and CRUD principles as well as usage of jQuery very nicely. +3 indicators! | |
| Sean Yeung | Very interactive teaching! Covered all the topic but should have made more Taylor Swift references. |
Spotify Song Review
| Song | Review | Change |
|---|---|---|
| Paaras Purohit | Fire track! I really enjoyed all the autotune | |
| Drake | Not very good. Did not like. |
%%html
<!-- Head contains information to Support the Document -->
<head>
<!-- load jQuery and DataTables output style and scripts -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>var define = null;</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<!-- Body contains the contents of the Document -->
<body>
<table id="xdemo" class="table">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th>Color</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>2022</td>
<td>Red</td>
<td>$35,000</td>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>2022</td>
<td>Silver</td>
<td>$25,000</td>
</tr>
<tr>
<td>Tesla</td>
<td>Model S</td>
<td>2022</td>
<td>White</td>
<td>$80,000</td>
</tr>
<tr>
<td>Cadillac</td>
<td>Broughan</td>
<td>1969</td>
<td>Black</td>
<td>$10,000</td>
</tr>
<tr>
<td>Ford</td>
<td>F-350</td>
<td>1997</td>
<td>Green</td>
<td>$15,000</td>
</tr>
<tr>
<td>Ford</td>
<td>Excursion</td>
<td>2003</td>
<td>Green</td>
<td>$25,000</td>
</tr>
<tr>
<td>Ford</td>
<td>Ranger</td>
<td>2012</td>
<td>Red</td>
<td>$8,000</td>
</tr>
<tr>
<td>Kuboto</td>
<td>L3301 Tractor</td>
<td>2015</td>
<td>Orange</td>
<td>$12,000</td>
</tr>
<tr>
<td>Ford</td>
<td>Fusion Energi</td>
<td>2015</td>
<td>Guard</td>
<td>$25,000</td>
</tr>
<tr>
<td>Acura</td>
<td>XL</td>
<td>2006</td>
<td>Grey</td>
<td>$10,000</td>
</tr>
<tr>
<td>Ford</td>
<td>F150 Lightning</td>
<td>2024</td>
<td>Guard</td>
<td>$70,000</td>
</tr>
</tbody>
</table>
</body>
<!-- Script is used to embed executable code -->
<script>
$("#xdemo").DataTable();
</script>
| Make | Model | Year | Color | Price |
|---|---|---|---|---|
| Ford | Mustang | 2022 | Red | $35,000 |
| Toyota | Camry | 2022 | Silver | $25,000 |
| Tesla | Model S | 2022 | White | $80,000 |
| Cadillac | Broughan | 1969 | Black | $10,000 |
| Ford | F-350 | 1997 | Green | $15,000 |
| Ford | Excursion | 2003 | Green | $25,000 |
| Ford | Ranger | 2012 | Red | $8,000 |
| Kuboto | L3301 Tractor | 2015 | Orange | $12,000 |
| Ford | Fusion Energi | 2015 | Guard | $25,000 |
| Acura | XL | 2006 | Grey | $10,000 |
| Ford | F150 Lightning | 2024 | Guard | $70,000 |
Hacks
Combine all aspects taught throughout this lesson.
- Store data on the frontend with CRUD functionality. +0.25
- You should create a frontend which can displays data with JQuery. Make sure to use event handling on each item stored to use the CRUD functionality. +0.25
- And make it look good using UX design techniques. + 0.2
In addition:
- Complete all popcorn hacks + 0.2
- Do something extra +0.1. Some good ideas are adding JQuery animations to your hacks, use extra JQuery events, or do anything else extra.
%%html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Manager</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<h1>Task Manager</h1>
<label for="taskInput">Task:</label>
<input type="text" id="taskInput">
<label for="descriptionInput">Description:</label>
<input type="text" id="descriptionInput">
<button id="addBtn">Add Task</button>
<table id="taskTable">
<tr>
<th>Task</th>
<th>Description</th>
<th>Action</th>
</tr>
<tr>
<td>Complete Project</td>
<td>Finish the project before the deadline.</td>
<td><button class="edit">Edit</button> <button class="delete">Delete</button></td>
</tr>
<tr>
<td>Exercise</td>
<td>Go for a jog in the evening.</td>
<td><button class="edit">Edit</button> <button class="delete">Delete</button></td>
</tr>
</table>
<script>
$(document).ready(function() {
// Add Task
$('#addBtn').on('click', function() {
var task = $('#taskInput').val();
var description = $('#descriptionInput').val();
$('#taskTable').append('<tr><td>' + task + '</td><td>' + description + '</td><td class="item-actions"><button class="edit">Edit</button> <button class="delete">Delete</button></td></tr>');
$('#taskInput').val('');
$('#descriptionInput').val('');
});
// Edit Task
$(document).on('click', '.edit', function() {
var currentRow = $(this).closest('tr');
var task = currentRow.find('td:eq(0)').text();
var description = currentRow.find('td:eq(1)').text();
$('#taskInput').val(task);
$('#descriptionInput').val(description);
currentRow.remove();
});
// Delete Task
$(document).on('click', '.delete', function() {
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
Task Manager
| Task | Description | Action |
|---|---|---|
| Complete Project | Finish the project before the deadline. | |
| Exercise | Go for a jog in the evening. |