01 Web Applications

Web Applications

developer.mozilla.org

Web application = an application stored at a remote server that requires a web browser as a client to run and ¹internet for data / resource transfer²

• Provide access to info & services for a variety of users from diff. backgrounds

	Web Applications	Desktop Applications (e.g. Words, Excel, Notepad)
Deployment & maintenance (updates)	Require deployment on a single set of server machines	Done on individual client machines separately
Location constraint	None, can be accessed from anywhere (most locations)	Desktops are confined to a standalone machine, can only be accessed from the machines they are deployed in
	Platform-independent, can work in diff. types of platforms with the only requirements from a web browser	Must be developed separately for diff. platform machines (Windows, Linux, Unix, Mac, etc)
	Inc. accessibility ⇒ Higher security risks	Have better authorisation and administrators have better control ⇒ more secure
	Rely heavily on internet connectivity for operation	Doesn’t require internet for operations (some only require at the time of updates)

Web Application Usability Principles ⇒ to attract customers

• Learnability: when users first encounter the web application, how easy is it to navigate in the system to perform basic tasks?
• Efficiency: how fast can users perform tasks after knowing the system?
• Memorability: if users have not used the system for a long time, how easy it is to recall the functionality of the system without relearning?
• Errors: how does the system help users recover from possible errors that users make?
• Satisfaction: how pleasant is it for use?

Nielsen’s 10 Principles:

1. Viability of system status

• System should always keep users informed about what is going on, through appropriate feedback within reasonable time
• E.g. progress bars / loaders to show progress while users are waiting; colour change when upload file, and message to show time left to complete the task
• 

1. Match between system & real world

• System should speak users’ language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making info appear in a natural & logical order

1. User control and freedom

• Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo
• E.g. online shop: allow users to adjust no. of items to purchase & remove item by clicking cross sign; easily remove attachment in Gmail
• 
• E.g. popup message to allow undo of action if user accidentally clicks delete
• 
• E.g. if accidentally delete email, possible to undo the process to retrieve the mail

1. Consistency and standards

• Users should not have to wonder whether diff. words, situations, or actions mean the same thing. Follow platform conventions
• E.g. hotel booking website: generally put currency choices & login options on top right corner, form to fill in on left side, advertisements / promotions on right side

1. Error prevention

• Error messages are a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action
• E.g. Google search offers the correct word for wrong spelling
• E.g. When user sends email without subject or text, webmail application pops out a message for correction
  

1. Recognition rather than recall

• Minimiser user’s memory load by making objects, actions, and options visible
• User should not have to remember info from one part of the dialogue to another
• Instructions for use of the system should be visible or easily retrievable whenever appropriate
• E.g. show past search history for users to retrieve
• E.g. search engine offers suggested contents to the user
  

1. Flexibility & efficiency of use

• Accelerators (unseen by the novice user) may often speed up interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allows users to tailor frequent actions
• E.g. an experienced user will explore the tools to search for webpages published within a certain period of time
  

1. Aesthetic and minimalist design

• Dialogues should not contain irrelevant or rarely needed info
• Every extra unit of info in a dialogue competes with the relevant units of info and diminishes their relative visibility

1. Helps users recognise, diagnose, and recover from errors

• Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution
• E.g. when user enters a wrong login info, the message is shown in red. Few options given to user to resolve problem: either re-enter correct account, or sign in via Google, or click “I forgot” to trace the password

1. Help and documentation

• Even though it is better if the system can be used without documentation, may be necessary to provide help and documentation
• Any such info should be easy to search, focused on the user’s tasks, list concrete steps to be carried out, and not be too large

Web Server

Hardware	Software
= computer that stores web server software and a website’s component files (e.g. HTML documents, images, CSS stylesheets, JavaScriptfiles)

Static	Dynamic
Computer (hardware) + HTTP server (software) Server sends its hosted files “as-is” to your browser	Static web server + extra software (e.g. application server and database) Application server updates the hosted files before sending them to your browser via HTTP server

Web browser

• Serves as both a client for request documents from web servers, by using HTTP protocol, and a viewer for the documents that are sent over, by using the Hypertext Markup Language (HTML)
• Requests and responses made using HTTP are not encrypted ⇒ can be read or modified by any party involved in routing the data across the Internet
• Can be encrypted using HTTPS (HTTP Secure)

Hypertext Transfer Protocol (HTTP)

• Application layer protocol fo transmitting hypermedia documents, e.g. HTML
• Main purpose: communicate between web browsers and web servers
• Follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response
• A stateless protocol ⇒ server does not keep any data (state) between 2 requests

Locating web documents

• To request for a web document, must give a web browser these:
• IP address or domain name of the host server that has the document
• Port number that the web server program is listening on
• Full name (path) of document requested
• All 3 info are supplied to web browser using a single string, the Universal Resource Locator (URL)
• URL must meet some requirements
• Treat some reserved characters as special
• Allow only unreserved characters (E.g. letters, numeric digits, hyphen [_
• For web documents, URLs typical start with a scheme (http or https) that specifies which protocol to use, followed by a colon and 2 slashes, the host IP address or domain name, an optional colon and port number, then the path
• 
• To represent all other characters, use percent-encoding by replacing the character with “%” then its ASCII code converted to a 2-digit hexadecimal no.
• After the path, there may be “?” then a query which provides/sends additional info to web server and may modify the server’s response
• After query (or path, if no query), URl may end with “#” then a fragment
• Fragments are not sent to web server
• Fragments control how a web browser displays the response
• Changing fragment when making HTTP request generally does not change server’s response
• 
• URL is entered into address bar of web browser, which lets users omit the first portion of URL before the host (assumed: HTTP sued)
• After URL entered, web browser creates a socket and connects it to the specified host and port number (default: 80)
• After connection established, web browser sends HTTP request for document using path given by URL
• Requests and responses are encoded as bytes using rules defined by HTTP protocol

HTTP requests

• In Google Chrome: More tools → Developer Tools
  
• 
  
• If “view source” link missing, make sure using HTTP not HTTPS, or refresh page
• From link, can see a portion of the bytes sent by web browser to web server using a socket
• HTTP 1.0 and 1.1 are text-based so HTTP requests and responses are still readable even when encoded as bytes
• 
• Request line
• Contains 3 info separated by spaces:

1. HTTP command (method / verb) that client wants to perform
2. GET: to get or request for a web document without intention to make any changes

• E.g. when enter http://example.com/test.html into a web browser’s address bar: web browser creates socket to example.com server & sends a request with GET /test.html HTTP/1.1
• Path comes directly from URL entered in address bar, unless URL’s path is empty (e.g. http://example.com (without a slash))

1. POST: to post or submit data and make changes to data on web server

• Request includes message body containing data submitted

1. Path of relevant document (+ query portion of URL, if any)
2. E.g. http://example.com/hello?q=world entered into a web browser’s address bar ⇒ GET /hello?q=world HTTP/1.1
3. Version of HTTP used by client

• Header fields
• Provide additional info to web server so it can customise its response accordingly
• 
• Only Host is required for HTTP 1.1, which is copied from host portion of URL
• Allows the same web server to provide different responses depending on domain name used to reach server
• Content-Type: specify how the message body should be interpreted
• Content-Length: specify message body’s size in bytes
• https://en.wikipedia.org/wiki/List_of_HTTP_header_fields
• Message body
• After header field: empty line followed by optional message body
• GET requests: message body ignored
• POST requests: message body contains data being submitted
• E.g. simplified POST request that browser makes after a simple web form is submitted by user
  

Output when restart server & visit http://127.0.0.1:8000/ using a browser:

Output when restart server & visit http://127.0.0.1:8000/example#fragment using a browser:

HTTP responses

• After web server received HTTP request, it sends back a HTTP response using the same socket
• 
• 
• Status line
• Summarises if web server was able to perform the request received from client or web browser
• Contains:

1. Version of HTTP that server uses
2. Status code
3. Reason phrase (Explains what each status code means)

• 
• Header fields
• Provide additional information
• 
• Content-Type value: specifies how the message body should be interpreted
• E.g. text/plain, text/html, text/css, image/png, image/gif, image/jpg
• Content-Length value: specifies message body’s size in bytes
• Message body
• Header fields and message body are separated by an empty line
• Contains document in the format specified by the Content-Type header field
• E.g. simplified HTTP response that a browser may make after receiving a request for a HTML document
  

• Prints “Hello,
  World!”
  when use browser to visit http://127.0.0.1:8000

Q1 my ans:

http	www.example.com	(empty)	(empty)
https	secure.example.com	4430	(empty)?
https	example.com	80	example.com
https	example.org	(empty)?	example.com/example.html
http	complex.example.org	(empty)?	complex.example.com
https	www.moe.gov.sg	(empty)?	new/press-releases

Q2 my ans:

http	example.net	5000	com	hello=world	(empty)
https	sub.domain.example.org	80?	9999	(empty)	hello-world
https	example.org	80?	res/search	keyword=computing	page-1

Q3 my ans: B

HTML (.html) ⇒ write using text editor (e.g. Notepad++) or vscode

Escape codes

• TO use special characters (e.g. <, >) without syntax error
• Character references that start with an ampersand (&) and end with a semicolon (;)

Character	&	<	>	“
Character Reference	&amp;	&lt;	&gt;	&quot;

Comments

• Readable by humans, but ignored by web browser
• Starts with <!- - and ends with - - >
• Contents of comment must NOT contain 2 consecutive hyphens (- -)

HTML Tags

• Describe the structure of a web page by organising its content into a true of elements
• Each start tag corresponds to a single element
• Start tags may have 1 or more attributes
• Normal elements: start tags with a matching end tag
• May contain a combination of text contents and other elements
• E.g. <body>, <h1>, <p>
• Void elements: start tags that do not have matching end tags
• Must not contain any other content
• E.g. <img>, <input>

1. Required Tags

• Required elements in all HTML documents
• E.g. every HTML document must start with <!doctype html>
• Tells web browser the version of HTML used in the document ⇒ important because web browser supports multiple HTML versions
• Root element
• <html> </html>
• Metadata
• Data that describes other data
• Inside html element
• <head> </head> <body> </body>
• Document title
• <title> </title>
• Set title of web page that appears in browser window or tab
• Inside head
• 

1. Structural Tags

• Main content in <body> tag
• <h1> </h1>: 1st-level heading, etc
• <p> </p>: paragraphs

1. Text & Media Tags

• <b> </b>: bold
• <i> </i>: italic
• <b> <i> both </i> <b>
• <a href=”http://www.example.com”**>**Example</a>
• Link to images / other web pages
• <a> tag with href attribute
• <a>: anchor ⇒ attaches some portion of the web page to a fixed URL
• href: hypertext reference ⇒ set to which URL the <a> tag’s content will be linked to
• When linking to external site, href attribute must be an absolute URL
• Include scheme component of url (e.g. http://)
• Else, is interpreted as linking a file with that name (relative URL)
• Web browser treats the URL as a path name starting from the web page’s initial directory
• URLs always use forward slash (/) to separate directory names
• vs Windows: backward slash (\)
• .. : special directory name referring to parent directory (i.e. directory that is 1 level up from current directory)
• E.g.

Current URL	Relative URL	Resulting URL
https://www.sg/en	example	http://www.sg/example
http://www.sg/en/	example	http://www.sg/en/example
http://www.sg/en/	example/	http://www.sg/en/example/
https://www.sg/en/sg	../example	http://www.sg/example
http://www.sg/en/sg/	../example	http://www.sg/en/example
http://www.sg/en/sg/	/example	http://www.sg/example

• <img src=”images/example.png” alt=”Example of an image”>
• <img> tag with compulsory src (source to set URL of image file) and alt (alternative text description, to support users who cannot / do not wish to view image) attributes
• For maximum compatibility, image file should be in GIF, JPEG or PNG format
• src can be absolute or relative URL depending on whether image is
• stored on an external site

1. Table Tags

• Similarly, also arranged top-to-bottom, left-to-right
• <table> </table>, <tr> </tr>, <th> </th>, <td> </td>
• tr: table row (auto bolded)
• th: table header (header cells that contain row or column titles)
• td: table data, each describing a cell in that table row from left to right
• 
• 

1. Form Tags

• Forms for web pages to collect inputs from reader
• <form> </form>, <input>, <textarea> </textarea>
• 
  
• value is for the text inside the “button” itself
• action attribute: sets URL where the submitted data will be sent to
• Inside <form> tag: can use <input> and <textarea> tags in addition to section, text, media, and table tags ⇒ each <input> and <textarea> tag represents an input control and may have a unique name attribute to help server retrieve these inputs
• <input> tag: either a single-line text box or submit button (set type attribute to “text” or ‘submit” or “file”)
• For submit button: value attribute determines button’s label
• “file”: allow user to upload files for submission with the form
• No end tag
• <textarea> tag: a multi-line text box
• Requires an end tag
• Text inside will be used as text box’s initial content

my ans:

6. invalid, valid, invalid

7. normal, normal, normal, normal ??

8. normal, normal

11a) C; 11b) C

12. D

13. normal, normal, normal, void

14. normal, normal, normal, normal

15. normal, void, normal

html:

<type of element> </ type of element>

a = anchor (any element which is a link?), e.g. to:

• ___.html
• https://www.\_\_.com

href ⇒ references

Tags

• h1 ⇒ header 1 (largest text)

<img src = “[image link]” height = 50px width = 50px> ⇒ NO CLOSING TAG

* indentation not needed but use to make it neat

rel = relation

css:

element {

…

}

margin ⇒ distance from edges of element

<table border=1>
<tr> = table row
<td> = table dataset?? / cell?

<form> ⇒ submit data inside html file

/app (or e.g. task3)

• app.py ⇒ flask
• /templates/ ⇒ .html
• /static/ ⇒ .css

Comments from the Word document

Footnotes

1. Comment by ANDREA TAN KAI XUAN HCI: on? ↩

2. Comment by ANDREA TAN KAI XUAN HCI: what this supposed to mean bruh ↩