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
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
Lab material by Dr. Mai Elshehaly
Let’s code something simlar Lab material by Dr. Mai Elshehaly
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
Lab material by Dr. Mai Elshehaly CSS Selectors Go to: http://www.w3schools.com/css/css_examples.asp 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 Lab material by Dr. Mai Elshehaly
Lab material by Dr. Mai Elshehaly 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 Lab material by Dr. Mai Elshehaly
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
Lab material by Dr. Mai Elshehaly In your code Lab material by Dr. Mai Elshehaly
Now the page looks like this 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
Lab material by Dr. Mai Elshehaly 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 Lab material by Dr. Mai Elshehaly
Lab material by Dr. Mai Elshehaly 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: https://www.dropbox.com/s/z3554ulg3tgorxi/candycrush- skeleton.zip?dl=0 Option 2: http://web.mit.edu/6.813/www/sp17/assignments/ps1- 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
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: Lab material by Dr. Mai Elshehaly
Lab material by Dr. Mai Elshehaly 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 Lab material by Dr. Mai Elshehaly
Add line break between the two words <br> Lab material by Dr. Mai Elshehaly
Lab material by Dr. Mai Elshehaly Add font style Lab material by Dr. Mai Elshehaly
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
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
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> Lab material by Dr. Mai Elshehaly
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
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
Lab material by Dr. Mai Elshehaly Congratulations! You just added JavaScript functionality to your page! 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
Lab material by Dr. Mai Elshehaly Homework Activity Go to: https://www.w3schools.com/tags/tag_table.asp 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