Input CS 422: UI Design and Programming HCI is the study of how people uses computer technologies and in turn how we can design user-friendly computer technologies. HCI drives innovation at the intersection of people and computers Input

Housekeeping For group deliverables, GR2, GR3, etc. you don’t need to submit anything to Blackboard. We will check the Google document version that was available on the due date. PS1 is due TODAY. Remember, you are critiquing a design, not the person(s) who came up with the design. Peer review and critique is one of the oldest traditions of scholarship. There will be two labs in the upcoming weeks. Labs will be held here. If you are comfortable coding in HTML/CSS/JavaScript, feel free to skip the labs. But remember, these are the only times, when coding basics will be covered in class.

Housekeeping (cont.) TAs Ja Eun and Nina will conduct the labs. I will be around to help out too. Bring your computer. Have a basic text editor and Chrome installed. Recommended text editor: Sublime Review basic HTML/ CSS concepts from resources listed in PS2 before labs. Start getting familiar with PS2.

Problem Set 2/ PS2 Let’s see an example

Survey Results (n = 39)

Input

Things we will review today HTML CSS Bootstrap JavaScript basics jQuery basics If you know all of the above, start working on PS2 or help out a peer who doesn’t. We will cover the basics today. Practice offline and during labs.

What style of GUI implementation is HTML (Hypertext Markup Language)? Direct Manipulation Declarative programming Procedural programming None of the above

What style of GUI implementation is HTML (Hypertext Markup Language)? Direct Manipulation Declarative programming Procedural programming None of the above

What style of GUI implementation is JavaScript? Direct Manipulation Declarative programming Procedural programming None of the above

What style of GUI implementation is JavaScript? Direct Manipulation Declarative programming Procedural programming None of the above

DOM is an example of ___________ in GUI implementation. View Tree Listener Pattern Learnability Efficiency

DOM is an example of ___________ in GUI implementation. View Tree Listener Pattern Learnability Efficiency

onclick is an example of ________________ View Tree Listener Pattern Learnability Efficiency

onclick is an example of ________________ View Tree Listener Pattern Learnability Efficiency

HTML Hypertext Markup Language is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. Tags and attributes are the basis of HTML. <div></div> a tag <div style= “font-family:arial”;> </div> style an attribute

HTML We will use HTML5. Allows for basic interactions with event listeners.

Example: Mouse events https://www.w3schools.com/tags/ref_eventattributes.asp

Let’s work on an example Design a basic table. Add some style.

CSS CSS stands for Cascading Style Sheets CSS is a language that describes the style of an HTML document. External stylesheets are stored in CSS files CSS is a static way to control the appearance of your view, what users will see. CSS has it’s own syntax. https://www.w3schools.com/css/default.asp

Let’s look at some examples

CSS property look up https://www.w3schools.com/cssref/default.asp

Bootstrap Think responsive design, mobile-first design. But why?

Bootstrap Ok, good. But how? Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is completely free to download and use! https://www.w3schools.com/bootstrap4/default.asp

Let’s look at some examples

Bootstrap 4 Grid System

Do it yourself Use Bootstrap to create the table we created previously. Contextual classes can be used to color the whole table <table>, the table rows <tr> or table cells <td>

JavaScript/ JS JavaScript, often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a language that is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. Alongside HTML and CSS, JavaScript is one of the three core technologies of the web. JavaScript enables interactive web pages and thus is an essential part of web applications.

Let’s look at some examples.

Methods to search nodes in DOM http://javascript.info/searching-elements-dom

Do it yourself Check the table. How can you access the following?

Let’s recap last class’s example

jQuery jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. https://www.w3schools.com/JQuery/default.asp

jQuery Syntax

Let’s look at some examples

Next class Lab