Human Computer Interaction

Human Computer Interaction
Lab 1 Lab material by Dr. Mai Elshehaly

Lab material by Dr. Mai Elshehaly
Lab Objective Learn how to design and implement user interface like Candy Crush Lab material by Dr. Mai Elshehaly

What you’ll learn in this lab
Web GUI framework HTML tags and attributes <div> elements CSS layout Understand what is being given to us in the code skeleton Understand what is the target outcome of this assignment <input> element Adding functionality with JavaScript Lab material by Dr. Mai Elshehaly

Web GUI Framework GUI = Graphical User Interface HTML5 is a markup language for creating web pages HTML Tags specify the structure of the document <html> <head> </head> <body> </body> </html> Lab material by Dr. Mai Elshehaly

HTML Example: (any text editor, Sublime text is great!)
Master Internet Volunteer Program 09/22/97 HTML Example: (any text editor, Sublime text is great!) <HTML> <HEAD> <TITLE> Candy Crush Game </TITLE> </HEAD> <BODY> Nothing here yet </BODY> </HTML> Tech help should be a local or toll-free call Is it available when you are using the net? Will you get a real person or have to leave voice mail? (voice mail is OK if the response time is fast and during a time you are not connected) Try calling tech support before subscribing. Lab material by Dr. Mai Elshehaly University of Minnesota Extension Service 9

The <div> element
Container You can add anything in it Lab material by Dr. Mai Elshehaly

What the current code looks like
index.html Lab material by Dr. Mai Elshehaly

Let’s code something simlar
Lab material by Dr. Mai Elshehaly

Web GUI Framework The appearance of your web page (i.e. document) is specified with Cascade Style Sheets (CSS) Lab material by Dr. Mai Elshehaly

CSS Selectors Go to: Test the id selector Test the class selector (for all elements) Test the class selector (for only <p> elements) Test the grouping selectors Lab material by Dr. Mai Elshehaly

Defining id and class in the HTML document
Many elements can be of the same class id is unique (only one element should have this id) Lab material by Dr. Mai Elshehaly

Adding id and class attributes to your file

Now we can use CSS to select and style different elements using either their id or class You can write style in the HTML file You can create a file.css and use it You can use existing libraries like Bootstrap Lab material by Dr. Mai Elshehaly

Let’s start simple  use Bootstrap
You need to be connected to the Internet to link your code to the Bootstrap library You can download a version of the library and keep a local version and link to that Lab material by Dr. Mai Elshehaly

W3 Schools: Bootstrap Grid Layout

Bootstrap col classes for grid layout
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts. We will use class col-md-4 Lab material by Dr. Mai Elshehaly

In your code Lab material by Dr. Mai Elshehaly

Now the page looks like this

Before we continue Let’s see what the game is about Lab material by Dr. Mai Elshehaly

Let’s play Candy Crush https://king.com/play/candycrush

Candy Crush Rules Whenever three or more candies of the same color form either a horizontal line or a vertical line, the following happens: The player gains points The candies are removed from the grid thereby creating holes in the game field The candies on top of the removed candies move down thereby filling the holes New random candies are added from the top to fill the open slots on the board. Lab material by Dr. Mai Elshehaly

Step 1: Download the Skeleton Code
Option 1: from Dropbpx: skeleton.zip?dl=0 Option 2: candycrush-ui/candycrush-skeleton.zip Lab material by Dr. Mai Elshehaly

Step 2: Familiarize yourself with structure
The folder contains: index.html: a skeleton file for your user interface. Start coding here. mainLayout.css: a stylesheet file for index.html board.js: a javascript file containing the Board class rules.js: a javascript file containing the Rules class candy.js: a javascript file containing the Candy class graphics: a folder containing all the graphics files (we will use them layer) Lab material by Dr. Mai Elshehaly

What we see now Lab material by Dr. Mai Elshehaly

By the end of this week, it should look like this:

What we want to do The first column should contain two elements: The game title (bold and colored) A New Game button The buttons should be <input> elements. Lab material by Dr. Mai Elshehaly

The <p> tag ( p for paragraph)
You can now start working in files in the game skeleton Add this in index.html Lab material by Dr. Mai Elshehaly

Your text needs some styling

Add line break between the two words <br>

Add font style Lab material by Dr. Mai Elshehaly

Adding a button Lab material by Dr. Mai Elshehaly

Click on the button in your web browser
Nothing happens! Lab material by Dr. Mai Elshehaly

Javascript A programming language Run in web browsers
Allows web pages to perform tasks such as: reading elements from the DOM, add elements to the DOM, manipulate or move elements of the DOM, react to events (e.g. mouse clicks), determine the user’s screen size, date and time, etc.

Javascript Adds a lot of functionality to web pages
Mainly works on the GUI side But can also be used for server-side processing (e.g. Node.js)

A combination of HTML, CSS, DOM and Javascript provides an infrastructure for Web GUI development

Add onClick attribute to your <input>

Now let’s tell the program what the doFunction() call does
Under the <script> tag, add this function definition Lab material by Dr. Mai Elshehaly

What happens Reload the page in your browser Press Ctrl+Shift+j (for Google Chrome) to see the developer console You will see the sentence “Hello World” printed to console. Lab material by Dr. Mai Elshehaly

Congratulations! You just added JavaScript functionality to your page! Lab material by Dr. Mai Elshehaly

Homework Activity Go to: Understand the <table> HTML tag Add a 2 x 2 table to the main column in your index.html Lab material by Dr. Mai Elshehaly

Human Computer Interaction

Similar presentations

Presentation on theme: "Human Computer Interaction"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Human Computer Interaction

Similar presentations

Presentation on theme: "Human Computer Interaction"— Presentation transcript:

Similar presentations

About project

Feedback