💌
week 5 - Web Application Basics —
HTML, CSS, and Human–
Computer Interaction — Usability
Topic Web basics : CSS Usability
Date
Column
Notes
Web Application Basics — HTML, CSS, and
Human–Computer Interaction — Usability
Learning Outcomes:
1. Understand limitations of the HTML
2. Understand the benefits offered by Cascading Style Sheets (CSS)
3. Understand the key issues and concepts of accessibility
4. Understand the principles underlying usability
5. Understand the key issues of acceptability
6. Understand the general principles underlying good UX design
The objectives map to the 3, 4, and 7 learning outcomes of the course:
Design, develop and implement basic/intermediate level software applications,
Understand the concepts of usability and evaluation techniques and the factors that
determine how people use technology, and
week 5 - Web Application Basics — HTML, CSS, and Human–Computer Interaction — Usability 1
, Use a software development environment to develop and deploy business
applications on the Web.
Problems with using HTML for content formatting
A limited set of formatting options
Forcing to embed formatting in the document
Example:
here the text is mixed with the presentation, if you have used the p and font elements
to mark up the first paragraph of every page in your site : what happens when you
decide to change the color of the font from red to blue need to change the arial font to
something else.
this is also an issue for visually impaired people who might need to change font
szes/colors.
» difficult to re-use formatting
» difficult to change the design later
» difficult to change how the page looks in the browser
» additional markup increases the size of the page and load times
CSS — Cascading Style Sheets
= language for visual presentation of web pages
Centralizes styling for reuse and consistency so that all formating can be defined in external
files
Allows for additional customization
week 5 - Web Application Basics — HTML, CSS, and Human–Computer Interaction — Usability 2
week 5 - Web Application Basics —
HTML, CSS, and Human–
Computer Interaction — Usability
Topic Web basics : CSS Usability
Date
Column
Notes
Web Application Basics — HTML, CSS, and
Human–Computer Interaction — Usability
Learning Outcomes:
1. Understand limitations of the HTML
2. Understand the benefits offered by Cascading Style Sheets (CSS)
3. Understand the key issues and concepts of accessibility
4. Understand the principles underlying usability
5. Understand the key issues of acceptability
6. Understand the general principles underlying good UX design
The objectives map to the 3, 4, and 7 learning outcomes of the course:
Design, develop and implement basic/intermediate level software applications,
Understand the concepts of usability and evaluation techniques and the factors that
determine how people use technology, and
week 5 - Web Application Basics — HTML, CSS, and Human–Computer Interaction — Usability 1
, Use a software development environment to develop and deploy business
applications on the Web.
Problems with using HTML for content formatting
A limited set of formatting options
Forcing to embed formatting in the document
Example:
here the text is mixed with the presentation, if you have used the p and font elements
to mark up the first paragraph of every page in your site : what happens when you
decide to change the color of the font from red to blue need to change the arial font to
something else.
this is also an issue for visually impaired people who might need to change font
szes/colors.
» difficult to re-use formatting
» difficult to change the design later
» difficult to change how the page looks in the browser
» additional markup increases the size of the page and load times
CSS — Cascading Style Sheets
= language for visual presentation of web pages
Centralizes styling for reuse and consistency so that all formating can be defined in external
files
Allows for additional customization
week 5 - Web Application Basics — HTML, CSS, and Human–Computer Interaction — Usability 2
