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 a framework
- 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 a programming course, not a design course
Assumed prerequisites¶
- Basic programming skills (abstraction, flow control, data types) and an understanding of object oriented programming concepts.
- Familiarity with general methods and workflows related to Interaction Design.
Course literature¶
- MDN Docs - Web technology for developers
- Google is your friend.
- Stack Exchange is your friend.
- Links to various web references can be found on the home page
Course staff¶
- Examiner/course leader
- Johan Falkenjack (with ~10 year old HTML+CSS+JS skills)
- Teaching assistants
- Charlie Simonsson and Emma Mainza Chilufya (with fresh HTML+CSS+JS skills)
- Course administrator
- Anna Grabska Eklund (doesn't need to know HTML+CSS+JS but can help you with other stuff)
Our relationship¶
- We have different roles but we have the same goal in the project that is your education.
- Think of us 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¶
- New examiner:
- Hi! 👋
- Everything else:
- Back to pre-2023 version, except for...
- You have to work with someone from the other programme.
Groups¶
- Assignments and project should be done in pairs of one SVP and one CogSci student (as far as possible).
- No exceptions!
- (Unless you have a very good reason and only after consulting with me.)
Sign up for LAB1 and PRO1¶
- Visit
- Sign up using the same pair groups for both modules
Course structure¶
- Weeks 46-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 Lisam
- One URL per exercise
- 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
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 approach for software interface development today.
- Yes, even for desktop apps.
- 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 we provide you with one of those.)
- 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 suggest VSCode + plugins:
- Live Server: view files via local web server (sharable via Live Share)
- Live Share: shared editing of workspace files
- 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
- Inspector in Web browser (Firefox or Google Chrome recommended)
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 overview and introduction: 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 + end
- attributes + values
- content
- 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>
Semantic elements in HTML5¶
- Semantic elements have no visual style.
- Used to inform e.g. search engines about the semantics of page elements.
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>