Didattica > Ingegneria del Web

This section collects links to external material that can be useful for non-Italian students to understand the main course arguments.

• XHTML: basic rules and differences from HTML 4 (from the W3C website)
  This official document lists the main new features and constraints of XHTML with respect to its 'parent' HTML 4 and gives some basic usage rules.
• XHTML: element reference and best practices (from the XHTML.com website)
  This online reference lists all the HTML4/XHTML 1 elements and gives examples of their correct use.
• XHTML: overview, examples and other references from Wikipedia
  Hystorical notes, discussion and future of XHTML, together with its basic usage rules and a lot of useful further readings.
• Java servlets basics from the Oracle tutorial
• Basic CSS tutorial from HTML.net
• CSS reference and tips from XHTML.com
• Freemarker online documentation
  The complete documentation about the Java template engine adopted in our course. Sections I and II are the most important reading.
• Javascript and HTML DOM Reference from w3schools.com
• ECMAScript Language Specification from ECMA international
  Since Javascript is a direct derivation of ECMAScript, this guide is useful to understand and disambiguate many Javascript language features and syntax issues.
• DOM Events specification (from the W3C website)
• DOM CSS2 specification (from the W3C website)
• Ajax tutorial from w3schools.com
• JQuery
  A powerful, crossbrowser Javascript helper library

This section contains links to (free) applications used in the course

• NetBeans
  A Java IDE, useful to develop web applications
• Notepad++
  A good editor for code and scripts
• Mozilla Firefox
  A standards-compliant browser!
• HTML Tidy
  A tool to analyze (and correct) many structural and accessibility problems of web pages
• HTML Validator
  A Firefox add-on to automatically validate web pages.
• SASS: Syntactically Awesome Style Sheets
  A style sheet preprocessor.
• FreeMarker
  A Java template library
• MySQL Connector/J
  The MySQL JDBC driver

This section contains all the examples used in the lectures to show the HTML5 features and check their compatibility.

• XHTML test suite
  Some xhtml files showing the syntax of the most important language elements and allow to compare their rendering between different browsers

This section contains all the examples of Java programming (Servlets, JDBC, etc.) developed or shown during the lectures. Note that the Java application examples are published as zipped Netbeans projects: you may need to adjust the library and server paths to run them on your machine.

• The 'Hello World' web application
  Shows the basic usage of classes HTTPServlet, HTTPServletRequest and HTTPServletResponse
• The 'Hello World' web application in our development framework
  The 'Hello World' application written using our framework of reusable code (developed during the course), with a better layer separation.
• Binary download servlet
  This application shows how to output binary data from a servlet, e.g., to download a file from a repository.
• Image download servlet
  This application shows how to dynamically send images from a servlet to a web page.
• The 'Hello World' web application with file upload
  The 'Hello World' application with file upload. To decode multipart/form-data encoding we use the primitives available in JEE from version 6.
• The 'Hello World' web application with sessions
  The 'Hello World' application with session support.
• Sessions and authentication
  This example shows how to use sessions to authenticate the user through the common login/logout procedures. We also show some basic session protection techniques.
• JDBC Connection Pooling
  This example shows how to create a JDBC connection pool in Tomcat and use it in a web application through the DataSource objects.
• JDBC Connection Pooling and Resource Injection
  This example shows how to inject DataSource objects using JEE 7 Resource Injection.
• A simple file repository: file upload and download
  This application shows how to correctly upload and download files in a web application with database support.
• Creation of a data model: the Newspaper case study
  This shows shows (also) how to implement a simple data model, and includes a model implementation for MySQL. An sql script to setup the required database is also included.

This section contains all the examples used in the lectures to show the CSS features and check their compatibility.

• CSS: inclusion
  An XHTML document showing different ways to attach a CSS style to a document
• CSS: selectors
  An XHTML document showing different combinations of CSS selectors and their effect
• CSS: cascading rules
  An XHTML document showing the cascading algotithm at work
• CSS: fonts and lists
  An XHTML document showing some basic font and list properties
• CSS: borders with and without images
  An XHTML document showing different techniques to achieve border with rounded corners using images (the old way), CSS2 or CSS3
• CSS: sprites
  An XHTML document showing how to exploit the background, width and height properties to achieve the CSS sprites technique
• CSS: shadows
  An XHTML document showing how to cast shadows from boxes and text using CSS3
• CSS: image borders
  An XHTML document showing how to compose complex borders using CSS3
• CSS: web fonts
  An XHTML document showing CSS at-rule font-face used to dynamically load a web font
• CSS: transitions and opacity
  An XHTML document showing the use of the advanced CSS3 properties opacity and transition
• CSS Menus
  Two examples of crossbrowser menus created using nested lists and CSS: static (with hover effect) and popup.
• CSS: display, visibility and overflow
  An XHTML document showing how to use usare display and overflow properties to achieve useful effects
• CSS: positioning
  A set of XHTML documents showing the CSS positioning properties and their effect
• CSS: floats
  An XHTML document showing the behaviour of CSS floats.
• CSS: other properties
  An XHTML document showing some minor CSS properties like come quotes, content and cursor
• SASS: base features
  An XHTML document showing the syntax of the most useful SASS features
• SASS: a simple usage example
  Two style sheets compared: normal CSS vs. SASS

This section contains all the examples developed or shown during the lectures about design techniques and template support in Java. Note that the Java application examples are published as zipped Netbeans projects: you may need to adjust the library and server paths to run them on your machine.

• Base layouts: single column
  A set of layout skeletons showing how to build single-column layouts (header,body,footer) using various techniques (tables,positioned divs,css frames,etc.)
• Base layouts: two columns
  A set of layout skeletons showing how to build two-column layouts using various techniques (floats,positioned divs,css frames,flexbox, etc.)
• Base layouts: three columns
  A set of layout skeletons showing how to build three-column layouts using various techniques (floats,positioned divs,css frames,flaxbox, etc.)
• Responsive grid layout
  An example of responsive, fluid grid layout which uses CSS media queries to adapt to the client's characteristics
• Templates and Freemarker
  This examples shows how to use Freemarker, a template engine for Java applications, very useful to generate the html output of web applications.
• Advanced FreeMarker: the TemplateResult helper class
  This example shows the TemplateResult class, an easy interface to the Freemarker functionalities which abstracts and automates mmuch of the work needed to use this template angine as the view layer of a web application.

This section contains all the script examples developed or shown during the lectures.

• Gracefully degrading tooltips with CSS and Javascript
  This exampe shows hot to create tooltips that are better than the ones generated by the html title attribute, but completely functional if javascript is not available and even without css support. This is an introductory example, to show how javascript should be actually used in accessible pages with enhanced funcionality.
• Javascript based client-side pagination
  This example shows how to implement client-side pagination (with graceful degradation to server-side pagination) for a simple table. These basic ideas can then be applied to complex applications, e.g., using AJAC to dynamically load the table data
• AJAX: gracefully degrading pagination
  This web application shows how to use AJAX in the pagination script presented in a previous example, and how to support it on the server side
• Javascript-powered advanced input controls
  This example shows how Javascript can be used to turn textual input form fields into advanced and more used-friendly input controls, without changing the page HTML structure or the server code which receives the form data. Moreover, these advanced controls gracefully degrade to standard HTML controls
• Javascript based paged scrolling
  This example shows how to implement a 'paged scrolling' effect, where the contents of a scrollable area is gradually loaded as the user scrolls it down. Warning: this script is in beta!
• An object library to perform automatic form validation with Javascript
  In this example javascript is applied to form validation. The example is interesting since it also shows how to create a complex javascript class library using constructors, closures and many other advanced aspects of the javascript objects.
• Javascript based element dragging and resizing
  This example show how Javascrupt can be used to make web page elements draggable and resizable
• Javascript based table sorting
  This example shows how to turn a simple table into a sortable table, with an intelligent (and gracefully degrading) use of Javascript
• Javascript based field autocompletion
  This example shows how Javascript can add autocompletion (based on different data sources) to input and select controls
• Javascript based contextual menus
  This example shows how Javascript can make some web page elements 'active' and attach them a context menu
• AJAX: search
  This web application shows a simple AJAX-powered search system. The client-side code is proposed in two versions: pure Javascript and JQuery-supported Javascript
• AJAX: news update
  This web application shows how to create a simple news page that is periodically updated using AJAX. The client-side code is proposed in two versions: pure Javascript and JQuery-supported Javascript

• WebPlatform.org
  'The latest information on how to use the technology that runs the web: HTML, CSS, JavaScript and more. Web Platform is a project of the W3C and the Web Platform stewards: Adobe, Apple, Facebook, Google, HP, Intel, Microsoft, Mozilla, Nokia, and Opera. '
• WHATWG (Web Hypertext Application Technology Working Group)
  The community that develops the new HTML ('living standard') and related technologies
• WebComponents.org
  The new technologies for a modular, extensible HTML
• Polymer
  A framework to create and reuse HTML components
• HTML5 Cross Browser Polyfills
  A list of polyfills useful to add modern features to old browsers
• HTML 5 specification
• HTML 4 specification
• Differences between HTML 4 and HTML 5
• Polyglot Markup: how to write HTML5 documents compatible with the XML syntax
• XHTML 1 specification
• Online HTML validator
• Java Servlet Technology
• CSS 2 specification
• Current CSS3 drafts
• Online CSS validator
• LESS: a CSS preprocessor
• Online CSS Optimizer
• CSSPlay
  Demos and examples of everything CSS can really do...
• DOM specification
• Browsershots
  Here you can see how browsers display you web site
• Open Source Web Design
  Free web site designs to reuse and learn from!
• Open Web Application Security Project (OWASP)
  A site devoted to web application security
• Web Content Accessibility Guidelines (WCAG) 2.0
  The guidelines to follow to develop really accessible web sites
• Responsive Web Design
  The original Ethan Marcotte article published on A List Apart that introduced this design technique
• modern.IE
  A set of useful tools to test your websites on different browsers, especially old versions of IE

• Giochi con HTML5, CSS3 e JavaScript: dalla progettazione alla programmazione: Slides
  Seminario di Diego La Monica del 28/5/2019
• Giochi con HTML5, CSS3 e JavaScript: dalla progettazione alla programmazione: Codice di Esempio
  Codice mostrato da Diego La Monica durante il seminario del 28/5/2019