1 Course updates User understanding report due today All - - PowerPoint PPT Presentation

CS102: Monsoon 2015

CS 102 Human-Computer Interaction Lecture 13: HTML, HTTP, CSS and Javascript

1

CS102: Monsoon 2015

Course updates

User understanding report due today All (remaining) project teams should meet course staff Tuesday 3-4.30pm or Friday 9-11am Aswin Venu will be computer lab assistant Think of a name for your project Deadline for personal home page now Monday Oct 26 (not a graded assignment)

2

CS102: Monsoon 2015

HTML & CSS Intro

https://www.codecademy.com/en/tracks/htmlcss (Complete the whole course)

3

CS102: Monsoon 2015

Chrome Devtools course

http://discover-devtools.codeschool.com/ (at least Chapters 1 and 2)

4

CS102: Monsoon 2015

Quiz 1: recap

Contrasting types of memory: episodic vs. semantic Stroop test: time to name color can tell if participant might know meaning of the word (not just color words) Cognitive biases: Representativeness: Ignoring the base rate Availability: Biased by samples that are easier to access

5

CS102: Monsoon 2015

Transactive memory

6

Externalized memory to other repositories like other people, paper or written materials, tangible objects, etc.

CS102: Monsoon 2015

Ethnography

Ethnography is a general method (contrast: anthropology is a discipline) Ethnographic studies are often used by product designers to better understand their users

7

CS102: Monsoon 2015

Recap

8

CS102: Monsoon 2015

HTML 5

<video>, <audio> tags <svg>, <canvas> for drawing form input types (date, color, email, number, etc) Semantic tags (<article>, <section>, <progress>, etc) localStorage - for sites to persist data in the browser (per domain) Geolocation Drag and drop etc. Examples: http://cs.ashoka.edu.in/cs102/html5.html

9 http://www.html5rocks.com/

CS102: Monsoon 2015

Events

10

CS102: Monsoon 2015

Events

Much code in interactive systems is in event handlers that deal with user input Types of events: click, dblclick, focus, blur, hover, mousedown, mouseup, resize, unload, etc. Event handlers are provided details such as target element, X, Y coordinates, key modifiers (alt, shift, ctrl), keycode, ….

11

CS102: Monsoon 2015

UI thread

Event handlers can trigger at any time Which thread of execution handles the event? UI thread, often called the main thread, handles all UI events Long-running computations should not block the UI thread, otherwise the interface appears to freeze

12

CS102: Monsoon 2015

Runaway scripts

13

CS102: Monsoon 2015

UI thread

General guideline: limit computation on UI thread to no more than 50ms. Otherwise, system feels sluggish In the browser: outsource serious computation to Web workers to avoid blocking the UI thread Communicate between UI threads and Web workers using postMessage()

14 High Performance Javascript

CS102: Monsoon 2015

Events

Event capture goes from top to bottom Event bubbling: bottom to top Handlers can be associated with either phase Example: http://cs.ashoka.edu.in/cs102/events.html

15 http://www.quirksmode.org/js/events_order.html

CS102: Monsoon 2015

Javascript

16

CS102: Monsoon 2015

Overview

Designed by Brendan Eich in 1994 De facto standard in all browsers Now standardized as ECMAscript Inherits ideas from Self and Scheme Functional, object-oriented, unthreaded, loosely typed

17

CS102: Monsoon 2015

Simple operations

• .p or o[‘p’]: looks up property p in object o

f(a): calls function f with argument a x = y assigns y’s value to x if, for, return, … A few math operators …

18

CS102: Monsoon 2015

Javascript primitives

All numbers are 64 bit floats (no integers) The values 0, null, NaN, undefined, false, ‘’” all are treated as false in if statements No block scope, only function scope function() { var a = 1; { var a = 2; } }

19

CS102: Monsoon 2015

Javascript objects

Each object has a pointer to another object, its prototype Objects created with new F() where F is a function

• .p looks for p in o; if not found, in o.prototype, etc.

Properties can be added or deleted on the fly new F() creates an object o, sets its prototype link to F’s prototype, and calls F with this set to o

20

CS102: Monsoon 2015

Javascript functions

Functions are first-class objects: they can be passed and returned to other functions Functions can be nested Closures retain state after a function returns function a() { var x = 1; return function() { console.log (x); } }

21

CS102: Monsoon 2015

`

22