Lecture overview¶
- About the course
- Programming interaction
- HTML + CSS
- Tools
- Visual Studio Code + extensions
- Inspector in web browser (Firefox or Chrome recommended)
About the course¶
- Learning objectives
- Administrative information
- Course structure
Course Learning Objectives¶
- implement graphical interactivity using basic and generally available building blocks
- identify and describe components used in a user interface
- implement a user interface component given a description
- discuss the programming complexity of a set of interaction techniques
- i.e. this is mainly a programming course, and UX only plays a smaller part
Assumed prerequisites¶
- Basic programming proficiency (abstraction, flow control, data types) and an understanding of object oriented programming concepts.
- Familiarity with general methods and workflows related to Interaction Design.
- Proficiency in written and spoken English.
- All assignments are to be written and documented in English, even if both you and your project supervisor speak Swedish. Seminars and presentations toward the end of the course are conducted in English.
Course literature¶
- MDN Docs - Web technology for developers
- Google is your friend.
- Stack Exchange is your friend.
- ChatGPT is not your friend, but might help you a bit before stabbing you in the back at the worst possible moment.
- Links to various web references can be found on the home page
Course staff¶
- Examiner/course coordinator
- Johan Falkenjack
- Teaching assistants
- Charlie Simonsson, Carmen Francis and Simon Ekman
- Course administrator
- Anna Grabska Eklund
Our relationship¶
- We have different roles but we have the same goal in the project that is your education.
- Think of us teachers as senior colleagues in that project.
- We will think of you as junior colleagues, and we will treat you as such.
- Our job is to provide guidance and support, but we also expect your independence.
- Mainly, let's treat each-other with respect, mkay?
Changes since last year¶
- Two new TAs: Carmen and Simon.
- Small changes in assignment specifications for clarity.
- Fewer 4 hour labs.
- No unsupervised lab sessions.
- A more reliable system for handing in materials (Sendlab).
Groups¶
- Assignments and project should be done in mixed pairs as far as possible.
- I.e. each member of the pair should be from a separate program.
- We are aware that a majority of the class are cog-sci students and thus, some of you cog-sci students will have to pair up with other cog-sci students, but try to pair up across programs first.
Sign up for LAB1 and PRO1¶
- Visit
- Sign up using the same pair groups for both modules
Course structure¶
- Weeks 45-49: Assignments + project preparations
- Weeks 50-3: Project
Workload¶
- 9 Weeks, 6 ECTS = 180h => ~20h/ week
- Scheduled course sessions 4-10h/week
- 10 - 16h/week on your own
Grades, assignments¶
- Assignments
- Assignment 1-4. 1-2 points per group submission (total: 4-8 points)
- Optional Assignment 5: 2-3 points, individual assignment
- LAB1. Grades
- A: >= 10 points
- B: >= 9 points
- C: >= 8 points (maximum points from group submissions)
- D: >= 6 points
- E: >= 4 points (must have at least 1 point from each assignment)
Grades, project¶
- Project deliverables
- GUI analaysis (1-3 points)
- Specification (1-3 points)
- Implementation (pass/fail)
- PRO1, 2 deliverables with points (all deliverables must pass)
- 1-3 points / deliverable
- A: 6 points
- B: 5 points
- C: 4 points
- D: 3 points
- E: 2 points
Course Grade¶
- Average of the grades of LAB1 and PRO1 (A=5, ... , E=1) with .5 rounded to the closest odd number. E.g.
- C & A → (3+5)/2 = 4 → B
- A & D → (5+2)/2 = 3.5 → 3 → C
- B & E → (4+1)/2 = 2.5 → 3 → C
Assignments¶
- 4 assignments:
- HTML+CSS
- Introduction to JavaScript
- DOM manipulation and animation using JavaScript
- Custom interactive HTML components (Web Components)
- 2-4 supervised computer lab sessions per assignment
- Done in groups of 2 people
- Signup via webreg: https://www.ida.liu.se/webreg3
Assignments cont.¶
- Submit assignments by deadline (see course web page)
- Submit URL to published assignments via Sendlab
- One URL per exercise (if published in
wwwpub) - Use of JS frameworks is not allowed for assignments
- Eric Meyers CSS reset must be used
- Use of onload/onclick HTML attributes is not allowed
- One URL per exercise (if published in
Optional: Web pages at LiU
How to publish pages via your student account
Short guide to publishing web pages at LiU¶
- The directory
/wwwpub/yourliuidis made available on the web via the LiU web server - Access
/wwwpub/yourliuidvia the Linux environment (computer room/ThinLinc/RDP) or upload via SFTP- (Though don't over-use ThinLinc unless you have to, it's already overburdened, as you might have experienced.)
- Files in this directory are available at https://php-web.edu.liu.se/~yourliuid from within LiU (i.e. network on campus or connected to LiU VPN)
- More information on the course web pages
Project¶
Project¶
- Deliverables
- GUI Analysis (1-3 points)
- Specification (1-3 points)
- Implementation
- Supervision regarding specification & implementation
- Deadlines: See course web page
Next steps¶
- Decide on a category
- Search for potential exemplars
Project Categories¶
Categories¶
- Each category has a description + a number of functional requirements
- Your final implementation must fulfill these functional requirements
- After selecting a category, decide on a subcategory
- Categories
- Online store
- Product customizer
- Product showcase with non-standard navigation
Online store¶
- Browse items and interact with shopping cart
- Functional requirements:
- browse items
- items have more then one picture
- items have a description
- add/remove/edit items in shopping cart
- view shopping cart
- Example subcategories: clothing store, food store ...
Product customizer¶
- Select product options and configure product.
- Functional requirements:
- view information about product options
- select different product options and see a dynamic representation of the final result
- see how much the current configuration costs
- Example subcategories: shoes, t-shirt, bag, computer, car ...
Product showcase with non-standard navigation¶
- Showcase a product
- Animation and movement is used to make the showcase fun, interesting and spectacular.
- Navigate/explore information about the product using nonstandard navigation techniques
- Functional requirements:
- interactively explore different features/sounds/images/videos/texts of the product
- Example subcategories:
- specify a kind of product or
- specify a kind of navigation
Product showcase with non-standard navigation¶
- Things this category should NOT be:
- an ordinary web page
- a photo gallery
- just scrolling that triggers animation
GUI Analysis¶
GUI analysis¶
- A kind of precedent design analysis that focuses on the GUI
- Examples of other related methods
- Competitor analysis
- Genre analysis
- Detailed instructions and example report available on the course web page
Choosing exemplars¶
- Choose exemplars that represent your subcategory
- An exemplar should be thoughtfully selected as a representative of what is typical for your subcategory
- Exemplars should fulfill the functional requirements of your subcategory
Programming interaction¶
Interaction environment¶
- application environment
- command line interface – CLI
- full screen application
- desktop vs web vs mobile
- games console
- input/output
- touch/mouse/pen/gestures/keyboard/buttons
- small screen/large screen/VR/haptics
- expectations/domain
- game
- movie/entertainment
- enterprise
- medical
Common tasks for programs with user interfaces¶
- Creating and updating the user interface
- respond to user input
- reflect system states
- Modeling the data that the program uses
- fetching data from e.g. databases/files/online APIs
- communicating data to the user (interface)
- Managing "business logic", i.e. requirements from the application domain
HTML + CSS + JavaScript¶
Why HTML + CSS + JavaScript?¶
- Dominant or at least deeply influential approach for software interface development today.
- Yes, even for apps for desktop computers and mobile devices.
- (Many apps are just a minimal web server and -browser displaying an interactive web page.)
- Low threshold technology-wise.
- A simple text-editor and a web browser is enough to get started.
- (Well, okay, you need a web server too, but VS Code can run one of those for you.)
- Close to infinite variety with suitable frameworks.
Web platform¶
| Component | Responsibility |
|---|---|
| HTML | Content (text, images, media, ...) |
| CSS | Form (color, position, size, ...) |
| JavaScript | Interaction (events, calculations, changing form or content, ...) |
Tools¶
- Any text editor, we recommend and can provide support for VS Code + plugins:
- Live Server: view files via local web server (sharable via Live Share)
- Remote - SSH: connect to LiU's Linux system directly through VSCode (no ThinLinc or RDP needed!)
- HTMLHint: static code analysis for html
- Prettier: formatter for JS, CSS and HTML
- (And if you have to cooperate remotely:)
- Live Share: shared editing of workspace files
- Inspector in web browser (e.g. Firefox or Google Chrome)
HTML + CSS¶
You will need to master HTML and CSS¶
- HTML and CSS are the building blocks of interaction programming on the web.
- You will need to master and understand how HTML and CSS interact and how structure affects style and what constraints are set by various CSS properties.
- The lectures only provide an introduction and overview: You need to look at examples from the course literature/from the web in addition to the examples here.
Some HTML history¶
- HTML - Hypertext Markup Language
- Hypertext - Text that can contain instantly accessable hyperlinks to other text.
- Initially specified by Tim Berners-Lee at CERN for documents accessible through his Hypertext Transfer Protocol (http).
- TimBL also wrote the first Web Browser and the first Web Server.
- Historically HTML specified both form and content structure, now only content structure.
- Evolved from Standard Generalized Markup Language
- (SGML; ISO 8879:1986)
HTML5 vs HTML vs XHTML vs XML?¶
- Uhmm... Just Google it.
- For the purposes of the course, you can always assume HTML5.
- (Yes, I personally abhor the fact that HTML5 is not as strict as XML, but I'm a Computer Scientist, I'm allowed to get upset by lack of strictness that basically never cause any real issues that aren't easily avoidable. That's essentially the definition of a Computer Scientist. Don't look at me like that.)
HTML Structure¶
- HTML document consists of elements
- Elements can be nested - hierarchy
- Document Object Model: DOM - tree structure
HTML5¶
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document 1</title>
</head>
<body>
<p>The first and only paragraph.</p>
</body>
</html>
- Elements
- start tag + end tag, e.g.
<body>and</body> - attributes + values, e.g.
charset="utf-8"on the<meta>tag - content, between start and end tags, e.g.
The first and only paragraph.
- start tag + end tag, e.g.
- Elements can be nested, but may not overlap.
Tag syntax¶
- Document type
<!doctype html>
- Non-closing tag
<tag>
- Start and end tag
<tag>content</tag>
- Non-closing tag with an attribute+value
<tag attribute="value">
- Start and end tag with attribute+value
<tag attribute="value">content</tag>
The DOM tree¶
Syntax¶
- Whitespace (tab, space, return) is not significant. Still, you should keep your code tidy.
- Character case does not matter, but use lower case letters for tags.
HTML defines structure¶
- semantic use
- for search engines
- organizational use
- hierarchy and grouping for styling using CSS
- hierarchy and grouping used when adding interactivity
Comments¶
- Make comments to disable parts of your HTML code or to annotate your code
<!-- This is a comment -->
Headings¶
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraphs¶
<p>paragraph 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
Links¶
<a href="url">Link text</a>
Images¶
<img src="url">
Structural elements¶
Structural elements¶
- Structural elements
<div>and<span>have no default visual style. - Used to group other elements.
- An inline element. Inline elements can be displayed beside each other on a single "row".
<span> </span>
- A block of something. Block elements occupy all horizontal space, i.e. displayed alone on their "row".
<div> </div>
- However, the behavior of both
<span>and<div>is almost infinitely customizable via CSS.
Semantic elements in HTML5¶
- Semantic elements have no visual style.
- Used to inform e.g. search engines or accessibility tools about the semantics of page elements.
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>