1. 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

2. 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.

3. 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.

4. Problem Set 2/ PS2
Let’s see an example

5. Survey Results (n = 39)

6. Input

7. 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.

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

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

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

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

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

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

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

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

16. 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

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

18. Example: Mouse events

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

20. 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.

21. Let’s look at some examples

22. CSS property look up

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

24. 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!

25. Let’s look at some examples

26. Bootstrap 4 Grid System

27. 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>

28. 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.

29. Let’s look at some examples.

30. Methods to search nodes in DOM

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

32. Let’s recap last class’s example

33. jQuery jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.

34. jQuery Syntax

35. Let’s look at some examples

36. Next class
Lab