WEB PROGRAMMING, DESIGN & USABILITY

Academic Year 2021/2022 - 3° Year - Curriculum Sistemi e Applicazioni
Teaching Staff: Federico Fausto SANTORO
Credit Value: 6
Scientific field: INF/01 - Informatics
Taught classes: 24 hours
Exercise: 24 hours
Term / Semester:

Learning Objectives

The course focuses on the introduction to Fullstack development of Web Applications. The course will introduce the basics of Frontend development up to Backend development, obtaining the necessary foundations for the development of a complete project and the understanding of new technologies and frameworks.


Course Structure

The course will focus on the basic knowledge of Full-Stack development, in particular:

Front-End:
Network Application Layer
HTTP Introduction
Client - Server
URLs and Verbs
Status Codes
HTML Introduction
Web Browsers and HTML Documents
Block and inline Elements
Text Elements
Attributes
List and Tables
Forms
CSS Introduction
Simple Selectors
Selector Combinators
Pseudo-classes and elements
Box Model
CSS Style rules
Cols System
Flexbox System
Grid System
Javascript Introduction
Variables
Data Types
Expressions
Statements
Conditionals
Arrays
Functions
Arrow Functions
Scope and Closures
Objects and Notations
Classes
DOM
Events
Asynchronous
Callbacks
Promises
Async/Await
Ajax and Fetch
JQuery Introduction
Selectors
Elements
DOM Traversing
Typescript Introduction
Differences and Story
The compiler
Workflow and Configuration
Objects and Arrays
Explicit and Dynamic Types
Functions and Aliases
DOM and Casting
Classes
Modules
Interfaces
Enums and Tuples

Back-End:
Introduction to Back-End Development
HTTP & Client - Server Re-Introduction
Server and Services
SOA and Microservices
Workflow of a Server
Database Types
Back-end Languages
Back-end Technologies
Back-end Systems
SOAP Protocol
REST Architecture
XML and JSON
Security Aspects
Introduction to NodeJS
History of NodeJS
Installation
Difference between Browser and NodeJS
The V8 Engine and other engines
Hello World!
Environment Variables
Application Arguments
Exports
The NPM
The package.json
Dependencies
The NPX runner
The Event Loop
Event Emitter
NodeJS - Development Introduction
Simple HTTP Server and request
Files operations
Buffers
Streams
Error handling
NodeJS - Express Introduction
Hello Express
Route Handlers
Middlewares
Static Files
Error Handling
NodeJS - WebSockets Introduction
HTTP Polling and Streaming
Handshake
Messaging Transmission
Node JS - SocketIO Introduction
Difference between WebSockets and SocketIO
Simple Server Example
Simple Client Example
Events and Rooms


Detailed Course Content

The course will focus on the basic knowledge of Full-Stack development, in particular:

Front-End:
Network Application Layer
HTTP Introduction
Client - Server
URLs and Verbs
Status Codes
HTML Introduction
Web Browsers and HTML Documents
Block and inline Elements
Text Elements
Attributes
List and Tables
Forms
CSS Introduction
Simple Selectors
Selector Combinators
Pseudo-classes and elements
Box Model
CSS Style rules
Cols System
Flexbox System
Grid System
Javascript Introduction
Variables
Data Types
Expressions
Statements
Conditionals
Arrays
Functions
Arrow Functions
Scope and Closures
Objects and Notations
Classes
DOM
Events
Asynchronous
Callbacks
Promises
Async/Await
Ajax and Fetch
JQuery Introduction
Selectors
Elements
DOM Traversing
Typescript Introduction
Differences and Story
The compiler
Workflow and Configuration
Objects and Arrays
Explicit and Dynamic Types
Functions and Aliases
DOM and Casting
Classes
Modules
Interfaces
Generics, Enums and Tuples
UI / UX For Developers
Terminology
Wireframe, Mockup and Prototype
Basics: Typography, Colors and Images
User Centered Design (UCD)
User Experience Design
Common use and Dark Patterns
Usability and Accessibility
Introduction to Figma
Figma handoff

Back-End:
Introduction to Back-End Development
HTTP & Client - Server Re-Introduction
Server and Services
SOA and Microservices
Workflow of a Server
Database Types
Back-end Languages
Back-end Technologies
Back-end Systems
SOAP Protocol
REST Architecture
XML and JSON
Security Aspects
Introduction to NodeJS
History of NodeJS
Installation
Difference between Browser and NodeJS
The V8 Engine and other engines
Hello World!
Environment Variables
Application Arguments
Exports
The NPM
The package.json
Dependencies
The NPX runner
The Event Loop
Event Emitter
NodeJS - Development Introduction
Simple HTTP Server and request
Files operations
Buffers
Streams
Error handling
NodeJS - Express Introduction
Hello Express
Route Handlers
Middlewares
Static Files
Error Handling
NodeJS - WebSockets Introduction
HTTP Polling and Streaming
Handshake
Messaging Transmission
Node JS - SocketIO Introduction
Difference between WebSockets and SocketIO
Simple Server Example
Simple Client Example
Events and Rooms