Web Engineering :: Course Log

Lectures Log - A.Y. 2025/2026

Total lectures: 16, total lecture hours: 32 (66%) - First lecture: 2026-02-24, Last lecture: 2026-04-23

Lecture 1: Modern web: technologies, challenges and problems

2026-02-24, 14:30 (2 hours)

(1-1)

Course presentation
(1-2)

The origins of WWW
(1-3)

The client-server architecture
(1-4)

Web 2.0: Rich Internet Applications, Social Web
(1-5)

Today's web problems: accessibility, usability, cross-browser programming, security,...
(1-6)

Web technologies: client side (HTML5, CSS3 e responsive design, Javascript, AJAX)
(1-7)

Web technologies: server side (Java servlets, JDBC, Freemarker templates)
(1-8)

Creating a website with the MVC pattern: separation between data, business logic and presentation

Lecture 2: XML

2026-02-26, 14:30 (2 hours)
Slides XML

(2-1)

The HTTP protocol
(2-2)

Base concepts: URIs, URLs, media types...
(2-3)

What is and what is not XML
(2-4)

XML base syntax: the XML declaration
(2-5)

Example Character encoding problems
(2-6)

Character encoding: what is really UTF-8? (and UTF-16? and ISO-8859-1??)
(2-7)

Example Character encoding: can also be a security problem: the UTF-7 attack
(2-8)

XML base syntax: the DOCTYPE declaration
(2-9)

Example Correct declaration of the HTML version in use
(2-10)

Standards and Quirks modes
(2-11)

XML base syntax: elements and their syntactic rules
(2-12)

Example Common problems related to element syntax
(2-13)

XML base syntax: attributes and their syntcatic rules
(2-14)

Example Common problems related to attribute syntax
(2-15)

XML base syntax: namespaces
(2-16)

XML base syntax: text and character entities
(2-17)

Example XSS attacks and the correct use of entities for reserved characters
(2-18)

XML base syntax: CDATA sections
(2-19)

Example The problem with embedded scripts in HTML pages

Lecture 3: HTML /1

2026-03-03, 14:30 (2 hours)
Slides HTML

(3-1)

The HTML evolution
(3-2)

Keeping up to date with the living standard: reference sites
link https://developer.mozilla.org/en-US/docs/Web/HTML
link https://html.spec.whatwg.org
(3-3)

Check and fix your HTML: validators
link https://validator.w3.org
(3-4)

Standards and Quirks modes
(3-5)

Basic document structure for HTML4 and HTML5 documents
(3-6)

HTML: inline and block elements
(3-7)

The new element classification in HTML5
(3-8)

HTML: common attributes
(3-9)

New HTML5 common attributes: data, aria,...
material HTML_Examples - HTML5
(3-10)

Example Use of the ARIA attributes in complex, customized layouts
link https://www.w3.org/WAI/standards-guidelines/aria
link https://www.w3.org/WAI/ARIA/apg/patterns/
(3-11)

HTML: paragraphs and breaks (p, br)
(3-12)

Example Empty paragraphs, line breaks, etc.: the wrong ways to add vertical space
(3-13)

Marking the document base structure: the h elements
(3-14)

The semantic value of a correct markup
(3-15)

The new HTML5 sectioning elements
material HTML_Examples - HTML5
(3-16)

Example Actual rendering of the HTML elements
material HTML_Examples
(3-17)

HTML: the div and span containers (div, span)
(3-18)

HTML: semantic formatting (em, code, pre, ins, q,...)

Lecture 4: HTML /2

2026-03-05, 14:30 (2 hours)
Slides HTML

(4-1)

HTML: base formatting (i, b, tt,...)
(4-2)

Example New behaviour of some formatting elements in HTML5
link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
(4-3)

Lists as semantic element in complex layouts
(4-4)

Example Creating a menu with graceful degradation using lists
material css_menu_multilev_static
(4-5)

HTML: lists (ol, ul, dl)
(4-6)

HTML: tables
material HTML_Examples - Tables
(4-7)

The table element attributes in HTML5
(4-8)

Base table structure: rows (tr), cells (td) and header cells (th)
(4-9)

The complete table structure: header (thead), body (tbody), footer (tfoot)
(4-10)

Example Watch out for the implicit tbody element...
(4-11)

Creating complex tables with colspan and rowspan
(4-12)

Images in web pages
material HTML_Examples - Images
(4-13)

Accessible images: the alt attribute
(4-14)

Client size image resizing
(4-15)

Server and client side image maps
(4-16)

Logical links between resources (link)
(4-17)

The rel(ation) attribute in links
link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
(4-18)

Example Alternate documents
(4-19)

Example External stylesheets
(4-20)

Example Adding a RSS feed to a web page
(4-21)

Example Adding a shortcut icon to a web page

Lecture 5: HTML /3

2026-03-10, 14:30 (2 hours)
Slides HTML

(5-1)

Example Page loading optimization (speculative loading): preload and prefetch links
link https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Speculative_loading
link https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading
link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
(5-2)

Hyperlinks (a)
(5-3)

Anchors and fragment identifiers
(5-4)

Example Jump directly to the page content
(5-5)

Forms in HTML (form)
(5-6)

Important form attributes: action, method, enctype e accept-charset
link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
(5-7)

Example Using accept-charset to solve further encoding issues (this time between client and server)
(5-8)

The GET and POST methods
(5-9)

Form data encoding
(5-10)

Example Choosing the right method/encoding combination for a form
(5-11)

Example The POST-Redirect-GET pattern for form submission
link https://en.wikipedia.org/wiki/Post/Redirect/Get
material Java_Example_Post_Redirect_Get
(5-12)

The input control element (input)
(5-13)

Example Rendering comparison for input controls on different browsers
material HTML_Examples - Forms
(5-14)

Example Values submitted by non-textual inputs: file, checkbox, radio,...

Lecture 6: Java Web Applications

2026-03-12, 14:30 (2 hours)
Slides HTML

(6-1)

Value validation attributes in HTML4 and HTML5 (maxlength, min, max, pattern,...)
(6-2)

Example How (and where) form data should be validated
(6-3)

Text editors (textarea)
(6-4)

Multiple choice selectors (select)
(6-5)

Example Option labels and values: which data should I send to the server?
(6-6)

Options and option groups
(6-7)

Different renderings of select controls
material HTML_Examples - Forms
(6-8)

Example Select controls used as menus on mobile devices
(6-9)

Accessible control labels (label)
(6-10)

Java/Jakarta Enterprise Edition (JEE/JakartaEE): versions and profiles
link https://www.oracle.com/java/technologies/java-ee-glance.html
link https://jakarta.ee/about/jakarta-ee/
(6-11)

(Private) Installation of a complete development environment (JDK, IDE, server) for Java web applications
(6-12)

Java web application deployment: from IDE to server
(6-13)

A new way to deploy Java web applications: JAR with embedded server

Lecture 7: Java Servlets /1

2026-03-17, 14:30 (2 hours)
Slides Servlets
Material JakartaEE Web Application tutorial

(7-1)

Example Different use cases for hidden inputs
(7-2)

Example The Cross-site request forgery
link https://owasp.org/www-community/attacks/csrf
(7-3)

Example Hidden inputs and CSRF tokens
link https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html
(7-4)

Apache Tomcat server installation and introduction
(7-5)

Netbeans IDE introduction
(7-6)

Example Some useful tips to link Netbeans and Tomcat
(7-7)

Servlets and containers
(7-8)

Introduction to servlet programming
(7-9)

The web application context and the url mapping
(7-10)

The web application base structure
(7-11)

The web application folder structure
(7-12)

Example How to create a new web application
material Java_WebApp_Base_T10
(7-13)

Example Compiling, deploying and executing a web application
(7-14)

The context configuration file (context.xml)
link https://tomcat.apache.org/tomcat-11.0-doc/appdev/deployment.html
(7-15)

Example How to add static resources (html, css, etc.) to a web application

Lecture 8: Java Servlets /2

2026-03-19, 14:30 (2 hours)
Slides Servlets
Material JakartaEE Servlet tutorial

(8-1)

Example How to add a new servlet in a web application
(8-2)

The deployment descriptor (web.xml)
material Java Servlet Specification, version 2.3, Chapter 13 - Deployment Descriptor
(8-3)

The servlet base interfaces: Servlet, ServletRequest, ServletResponse
(8-4)

The servlet lifecycle: initialization, service and finalization
(8-5)

Servlet initialization and finalization: init and destroy methods
(8-6)

The HttpServlet class and its doGet and doPost methods
(8-7)

Multithreading in the HttpServlet class: per-thread and shared variables
(8-8)

Writing data to the client: the HttpServletResponse class
(8-9)

Textual and binary output from a servlet
(8-10)

Example The "Hello World" servlet
(8-11)

Writing headers and payload of an HTTP response

Lecture 9: Java Servlets /3

2026-03-24, 14:30 (2 hours)
Slides Servlets

(9-1)

Example The project object model (POM) of a simple web application
(9-2)

Communication among application layers through request attributes
(9-3)

Effective error and exception handling in servlets
(9-4)

Returning HTTP error codes from a servlet
(9-5)

Getting user input through HttpServletRequest
(9-6)

Reading form GET parameters: getParameter and getParameterValues
(9-7)

Input validation to prevent attacks (like SQL Injection)
(9-8)

Output sanification to prevent XSS attacks
(9-9)

Example The "Hello World" servlet with a name parameter
material Java_Example_Servlet
(9-10)

Output logic (view) encapsulation and application layers
(9-11)

Example The restructured "Hello World" servlet
material Java_Example_Servlet_Fwk
(9-12)

Binary data download through servlets
(9-13)

Security issues: why we should use a download servlet and how we should write it

Lecture 10: Java Servlets /4

2026-03-26, 14:30 (2 hours)
Slides Servlets

(10-1)

Some interesting HTTP headers: Content-Type, Content-Disposition and Content-Length
(10-2)

Example An example of download servlet
material Java_Example_Downloader
(10-3)

Server-side generated images with Java
(10-4)

Example An image generation servlet
material Java_Example_Imager
(10-5)

Reading form POST parameters with url encoding
(10-6)

Handling multipart encoded forms
(10-7)

The multipart-config element
(10-8)

Handling uploaded files with getPart()
(10-9)

Example The 'Hello world' servlet with file upload
material Java_Example_Servlet_Multipart_7
(10-10)

Example Secure web applications accepting uploads
link https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html
(10-11)

Filenames sanitization

Lecture 11: Java Servlets /5

2026-03-31, 14:30 (2 hours)
Slides Servlets

(11-1)

Example Secure web applications accepting uploads
link https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html
(11-2)

Application configuration through ServletContext parameters
(11-3)

The web application status: sessions
link https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html
(11-4)

Example Sessions for user profiling
(11-5)

Session identifier exchange: cookie and URL rewriting
(11-6)

Generate and handle session information: the HttpSession class
(11-7)

Read and write session variables: getAttribute, setAttribute
(11-8)

Close a session: invalidate
(11-9)

Example The 'Hello world' servlet with sessions
material Java_Example_Servlet_Sessions

Lecture 12: Sessions and Security

2026-04-09, 14:30 (2 hours)
Slides Servlets

(12-1)

Sessions for user authentication
(12-2)

Example Login, logout and authenticated sessions
material Java_Example_Login
(12-3)

User authentication and secure password storage
(12-4)

Example Password hashing with PBKDF2 in Java
link https://en.wikipedia.org/wiki/PBKDF2
link https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html
(12-5)

Session protection techniques
(12-6)

Session refreshing
(12-7)

Session timeout(s)
(12-8)

Example The SecurityHelpers class
(12-9)

The login-with-redirection technique
(12-10)

Cross-site request forgery attacks and prevention techniques in practice
material Java_Example_Servlet_CSRF
(12-11)

Filters in java web applications and how to use them to ease session management
material Java_Example_Emailfilter
material Java_Example_Login_Middleware

Lecture 13: Web Applications and Databases

2026-04-14, 14:30 (2 hours)
Slides Servlets

(13-1)

Java and DBMS: references to JDBC basics
(13-2)

Example JDBC: adding the driver dependency to the project POM
(13-3)

Example JDBC: the main classes (Connection, (Prepared)Statement, ResultSet)
(13-4)

Example JDBC: opening a connection through the DriverManager (not recommended in web applications!)
(13-5)

Example JDBC: execution of insert, update, delete queries
(13-6)

Example JDBC: execution of select queries
(13-7)

JDBC: closing resources (resultsets, statements and connections)
(13-8)

JDBC: precompilation of (parametric) queries
(13-9)

Example Reasons to use PreparedStatement in a web application: safety (against SQL injection)
(13-10)

Example When to open a connection in a web application/servlet and when to close it
(13-11)

Data access performances in web applications: the connection problem
(13-12)

Reusing JDBC connections: connection pooling
(13-13)

Configuration of a JDBC data source in Tomcat (context.xml)
link https://tomcat.apache.org/tomcat-11.0-doc/jdbc-pool.html
(13-14)

Resource references in the deployment descriptor
(13-15)

Using Java naming services to obtain a DataSource
(13-16)

Using the JavaEE resource injection to obtain a DataSource
link https://jcp.org/en/jsr/detail?id=250
(13-17)

JDBC: opening a connection through the DataSource (recommended in web applications!)
(13-18)

Example JDBC with connection pooling
material Java_Example_Servlet_Database
(13-19)

Example Final example on forms and databases: a file repository
material Java_Example_Uploader
(13-20)

Example How to create the digest of a file
(13-21)

Example JDBC: Create a not-FORWARD_ONLY ResultSet and count the number of results
(13-22)

Example JDBC: Get the auto-generated keys after an insert statement
(13-23)

Presentation of the final project specifications

Lecture 14: Data Modeling /1

2026-04-16, 14:30 (2 hours)

(14-1)

Creating a website with the MVC pattern: separation between data, business logic and presentation
(14-2)

The data object model as a contract between the MVC layers
(14-3)

POJO - JavaBeans used to represent data model entities
(14-4)

Build well-formed POJOs: default constructor, getters and setters
(14-5)

Example Creating entity objects: interface and implementation
(14-6)

Example The newspaper data model: an example of data model design and implementation on MySQL
material Java_Example_SimpleDataModel
(14-7)

The low-level interface of entity objects: proxies
(14-8)

Example Marking entity objects as modified with setters
(14-9)

Example Lazy loading of relations: why it is important and how to implement it
(14-10)

Creating data access methods: DAO
(14-11)

Example Entity object factories
(14-12)

Example Entity object caching: why it is important and how to implement it

Lecture 15: CSS /1

2026-04-21, 14:30 (2 hours)
Slides CSS3
Material CSS_Examples

(15-1)

Notes on optimistic and pessimistic locking techniques to manage concurrency
(15-2)

Example Summary example: a simple application that shows how to create and make models and controllers interact effectively
material Java_Example_BaseApplicationMC
(15-3)

Introduction to CSS Stylesheets
(15-4)

Adding style to HTML: style and link elements
(15-5)

Multiple stylesheets in the same document
(15-6)

Stylesheets: persistent, preferred and alternative (used selected)
(15-7)

Media-related alternate stylesheets
(15-8)

Example Creating print-oprimized stylesheets (media="print")
material css_inclusion_print
(15-9)

Syntax of CSS rules
(15-10)

Simple selectors
material css_selectors
(15-11)

Base selectors
(15-12)

Attribute selectors
(15-13)

Class selectors
material css_selectors
(15-14)

Example Classes as special attributes
(15-15)

ID selectors
(15-16)

Short form for class and ID selectors
(15-17)

Example Identify and format the base layout structures
(15-18)

Pseudo classes
(15-19)

Example Hover effects on links
(15-20)

Example Focus effects on inputs
(15-21)

The :hover pseudo class in legacy browsers
(15-22)

Example How to add internal borders to a list of elements
(15-23)

Pseudo elements
(15-24)

Example How to create a drop cap
(15-25)

Example How to add text in document using CSS
(15-26)

Composite selectors

Lecture 16: CSS /2

2026-04-23, 14:30 (2 hours)
Slides CSS3
Material CSS_Examples

(16-1)

Composite selectors
(16-2)

The CSS algorithm to determine property values
(16-3)

Origin priority, specificity and rule ordering
(16-4)

The !important modifier
(16-5)

Example Cascading rules in the browsers
material css_cascade
(16-6)

Style inheritance
(16-7)

Using the browser's CSS inspector to analyze styles and their composition
link https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css
link https://developer.chrome.com/docs/devtools/css
(16-8)

CSS measurement units
(16-9)

Relative units as a way to increase the site accessibility
(16-10)

Percentage measures in liquid and responsive layouts
(16-11)

CSS color specification
(16-12)

Adding borders to elements
material css_properties_common
(16-13)

New CSS3 border properties: border-radius and box-shadow
(16-14)

Vendor prefixes on css properties and legacy browser compatibility
(16-15)

Example Rounded corners in CSS3
material css_3_round_borders
(16-16)

Example Advanced CSS3: image borders
material css_3_imageborders