- Oggetto:
- Oggetto:
Tecnologie Web
- Oggetto:
Web Technologies
- Oggetto:
Anno accademico 2024/2025
- Codice attività didattica
- MFN0634
- Docente
- Claudia Picardi (Docente)
- Corso di studio
- [008707] Laurea in Informatica
- Anno
- 3° anno
- Periodo
- Primo semestre
- Tipologia
- Caratterizzante
- Crediti/Valenza
- 6 CFU - Numero di ore - Number of hours: 54 (24 teoria + 30 lab - 24 theory + 30 practice)
- Crediti percorso 24 CFU
- 3
- SSD attività didattica
- INF/01 - informatica
- Erogazione
- Tradizionale
- Lingua
- Italiano
- Frequenza
- Facoltativa
- Tipologia esame
- Scritto con orale a seguire
- Tipologia unità didattica
- corso
- Prerequisiti
- Lo studente deve mostrare di possedere una buona familiarità con i principi della progammazione (imperativa, ad oggetti e basata su eventi). Inoltre, deve conoscere le basi operative per gestire una base di dati basata su SQL e per configurare/installare pacchetti software nel proprio sistema operativo.
Insegnamenti propedeutici (forniscono le competenze attese in ingresso):- Programmazione I
- Programmazione II
- Sistemi Operativi
- Basi di Dati
A fluent coding ability is required before attending the class, and the student must be familiar with the most common programming paradigm (imperative, object-oriented, event driven). Moreover, the student must have an operative knowledge on data base management (and with the SQL language), and on installing/configuring software packages in her/his operating system.
Preparatory Courses (providing the expected entry skills):- Computer Programming I
- Computer Programming II
- Operating System
- Data bases .
- Oggetto:
Sommario insegnamento
- Oggetto:
Avvisi
- Oggetto:
Obiettivi formativi
L’insegnamento Tecnologie Web è collocato nell’area tematica di approfondimento “Reti e sistemi informatici”. Esso è mirato a fornire solide conoscenze e competenze relative a metodologie e strumenti per la progettazione e lo sviluppo di applicazioni web.L’insegnamento fornisce competenze teoriche e pratiche sull’architettura a strati di un’applicazione web (front-end, back-end, persistenza) e approfondisce, per ciascun elemento di tale architettura, strumenti e linguaggi necessari a sviluppare una single-page application.
L’apprendimento della programmazione web fa parte obiettivi formativi specifici del CdS in Informatica (L31); in particolare è fra gli obiettivi relativi all'area approfondimento.
In particolare, le/i partecipanti apprenderanno l’uso del linguaggio TypeScript/JavaScript e dell’ambiente Node/npm per la gestione di progetti basati su tali linguaggi. Verrà altresì approfondito l’uso di HTML, CSS e del framework React per la progettazione di front-end a componenti basati sul pattern MVVM. I fondamenti di progettazione di un server HTTP verranno introdotti tramite Node.js. Verrà poi approfondito l'uso del framework Spring, basato su Java, per la realizzazione di servizi di back-end.
The Web Techonology course belongs to the "Computer Systems and Networks" thematic area. It aims at providing solid knowledge and skills concerning methods and tools for the design and development of web applications.It therefore provides theoretical and practical competencies on the layered architecture of web applications (front-end, back-end, persistence layer); for each element of such architecture it examines in depth languages and tools needed in order to develop a single-page web application.
Leraning web programming is part of the formative goals of the Cds in Computer Science (L31); in particular, it belongs to the in-depth area.
More specifically, participants will learn the TypeScript/JavaScript language and the Node/npm environment for managing project based on such languages. They will explore in detail the use of HTML, CSS and the React framweork for the development of component-based front-ends based on the MVVM pattern. The basics of HTTP server-side services will be introduced with the aid of Node.js; the design and implementation of back-end services will be then explained and exemplified in detail how with the Java-based Spring framework.
- Oggetto:
Risultati dell'apprendimento attesi
CONOSCENZA E CAPACITÀ DI COMPRENSIONE- Conoscenza dell’architettura di base di un’applicazione Web e comprensione di come essa viene realizzata tramite il protocollo HTTP.
- Conoscenza dei linguaggi Javascript, EcmaScript e Typescript e comprensione delle relazioni fra di essi.
- Conoscenza e comprensione del runtime di Javascript/Typescript (asynchronous single-threaded event-driven loop).
- Conoscenza e comprensione dei meccanismi di gestione progetto e di package management.
- Comprensione dei concetti di base dei framework front-end (pattern MVVM, architettura a componenti, concetto di stato di un componente, property-binding, event-binding).
- Conoscenza e comprensione del funzionamento di base di un Server HTTP nei suoi aspetti statici e dinamici.
- Conoscenza e comprensione del framework Spring e dell'uso del linguaggio Java all'interno di esso.
- Conoscenza e comprensione dei meccanismi di base di deployment di un’applicazione Web su un server HTTP.
CAPACITÀ DI APPLICARE CONOSCENZA E COMPRENSIONE
- Capacità di scrivere, compilare ed eseguire programmi in Typescript.
- Capacità di gestire il progetto di un’applicazione Web con appositi strumenti di package management (npm).
- Capacità di progettare back-end e front-end di un’applicazione Web.
- Capacità di realizzare un back-end server-side utilizzando Spring e il linguaggio Java.
- Capacità di realizzare un front-end client-side utilizzando il framework React, JSX, HTML e CSS.
AUTONOMIA DI GIUDIZIO
- Capacità di valutare scelte progettuali e architetturali di alto livello sulla suddivisione fra client-side e server-side.
- Capacità di valutare l’opportuna architettura a componenti per la costruzione di un front-end basato su pattern MVVM.
- Capacità di valutare la struttura del back-end affinché sia adeguata a sostenere l’utilizzo inteso dell’applicazione progettata.
- Capacità di valutare l’uso di modelli, librerie, framework per la realizzazione di un’applicazione web.
- Capacità di valutare le opportune strutture dati nei linguaggi di riferimento volte a realizzare le funzionalità stabilite tramite l’analisi architetturale e progettuale.
ABILITÀ COMUNICATIVE
Capacità di comunicare, in forma scritta e orale e in lingua italiana
- le conoscenze acquisite
- le caratteristiche tecniche, progettuali e architetturali di un’applicazione web
- le scelte e le valutazioni effettuate nella progettazione e implementazione di un’applicazione web
CAPACITÀ DI APPRENDIMENTO
- Capacità di apprendere attraverso la pratica l’utilizzo degli strumenti introdotti a lezione ai fini dello sviluppo di applicazioni web.
- Capacità di inquadrare strumenti non precedentemente conosciuti per valutarne l’efficacia nell’ambito della progettazione di un’applicazione web.
- Capacità di autovalutare il livello di competenza raggiunto con ciascuno degli strumenti proposti.
KNOWLEDGE AND UNDERSTANDING- Knowledge of the basics of web applications architecture, and understanding of how it is implemented by means og HTTP protocol.
- Knowledge of the Javascript, EcmaScript and Typescript languages, and understanding of their relationships.
- Knowledge and understandingg of the runtime enviroment of Javascript/Typescript (asynchronous single-threaded event-driven loop).
- Knowledge and understanfing of project and package management mechanisms.
- Understanding of the basic concepts of front-end frameworks (pattern MVVM, component-oriented architecture, state of a component, property-binding, event-binding).
- Knowledge and understanding of the basic functioning of a HTTP Server in its static and dynamic aspects.
- Knowledge and understanding of the Spring framework and of the use of the Java language within it.
- Knowledge and understanding of the basic deployment mechanisms of a web application on a HTTP server.
APPLYING KNOWLEDGE AND UNDERSTANDING
- Writing, compiling and executing Typescript programs.
- Managing a Web Appplication project by means of project maangement tools (npm)
- Designing the back-end and front-end services of a Web application.
- Implementing a server-side back-end service by means of the Spring framework and the Java language.
- Implementing a client-side front-end service by meand of the React framework, JSX, HTML and CSS.
MAKING JUDGEMENTS
- Evaluating design and architecture options when structuring the server-side / client-side distinction in a web application
- Evaluating a suitable component-oriented architecture when designing a front-end service based on the MVVM pattern
- Choosing an adeguate back-end service to support the intended functions of the designed application
- Choosing proper models, libraries, packages and frameworks for the development of a given web application depending on functional and non-functional requirements.
- Choosping adequate data structures in order to implement functionalities as established in the project architecture and design.
COMMUNICATION SKILLS
Ability to communicate, in written and oral form, in the Italian language:
- acquired knowledge
- the technical features, as well as the architecture and design, of a web application
- choices made and lessons learned in the design and implementation of a web application
LEARNING
- Learning through practice how to use the methods and tool for web application development that are introduced in the classes
- Learning how to contextualize previously unknown tools in order to evaluate their adequacy for the development of a web application
- Self-evaluating the competencies achieved with each of the taught methods and tools
- Oggetto:
Programma
PROGRAMMAZIONE ORIENTATA AL WEB- L’architettura di un’applicazione web
- I linguaggi e i framework del web: panoramica
- Breve cronistoria: Javascript, EcmaScript
- Il linguaggio Typescript
- Node/npm come ambiente di esecuzione di Typescript/Javascript
- Laboratorio: primi programmi in Typescript con ambiente Node/npm
PROGETTAZIONE E SVILUPPO FRONT-END / CLIENT-SIDE
- HTML e CSS
- Typescript/Javascript per le UI: meccanismi di interazione di base
- Laboratorio: studio e realizzazione in HTML/CSS/JavaScript di elementi di UI
- Il pattern MVVM, le UI a componenti e le Single Page Application
- Il framework React
- Laboratorio: studio, progettazione e realizzazione di un semplice front-end in React
- Connessione HTTP client-side
- Laboratorio: ottenere (get) e utilizzare dei file JSON in un front-end React
- Laboratorio: costruire oggetti JSON con React e spedirli (post) a un server
PROGETTAZIONE E SVILUPPO BACK-END / SERVER-SIDE
- Anatomia di base di un HTTP server in Node
- Programmazione server-side con Java e Spring
- Laboratorio: realizzazione di un semplice back-end collegato a un database, con calcolo e invio di dati in formato JSON
- Laboratorio: ricevere ed elaborare file JSON all’interno di una servlet
- Laboratorio: going full stack; front-end e back-end si parlano
APPROFONDIMENTI (uno o più dei seguenti argomenti)
- Il deployment delle applicazioni Web: cenni
- Applicazioni offline-first e uso di IndexedDB
- Applicazioni multi-thread: Web Workers
WEB-ORIENTED PROGRAMMING- The architecture of a web application
- Languages and frameworks for web development: an overview
- A brief history of Javascript and EcmaScript
- The Typescript programming languages
- Node/npm as runtime environment for Typescript/Javascript
- Practice: first Typescript programs in the Node/npm runtime
FRONT-END / CLIENT-SIDE DESIGN AND DEVELOPMENT
- HTML and CSS
- Typescript/Javascript for UI design: basic interaction mechanisms
- Practice: design and implementation of UI elements in HTML/CSS/Javascript
- The MVVM pattern, component-oriented UIs and Single Page Applications
- The React framework
- Practice: Study, design and implementation of a simple front-end in React
- Client-side HTTP connection
- Laboratorio: GETting and using JSON data in a React-based front-end
- Laboratorio: computing and POSTing JSON data in a React-based front-end
BACK-END / SERVER-SIDE DESIGN AND DEVELOPMENT
- Basic anatomy of a HTTP server in Node
- Server-side programming with Java and Spring
- Practice: implementing a basic back-end that computes and sends JSON data by exploiting a database connection
- Practice: obtaining JSON data from an HTTP connection in a servlet back-end
- Practice: going full stack; front-end and back-end in dialogue
FURTHERMORE...
One or more ofthe following topics will be discussed at an introductory level:
- The deployment of Web applications
- Offline-first applications with IndexedDB
- Multi-thread applications with Web Workers
- Oggetto:
Modalità di insegnamento
Le lezioni frontali si svolgono in aula con l’ausilio di slide. Per chi non ha la possibilità di frequentare verrà fornito materiale utile alla preparazione del corso tramite la piattaforma Moodle, incluse le slide utilizzate durante le lezioni e le registrazioni delle lezioni stesse. Il laboratorio sarà in parte costituito da esercitazioni in cui la docente mostra, in modo replicabile, come svolgere le attività oggetto del corso. Alcuni esercizi saranno svolti con l’ausilio di computer personali degli studenti e potranno essere realizzati in coppia o a piccoli gruppi, a discrezione della docente.Theory classes will take place in the classroom wih the projection of slides. Students who cannot attend classes will be able to download slides and other teaching materials, including the video-recordings of the classes, from the Moodle platform. Practice classes will partly consist of practical examples in which the teacher will show how to carry out the activities explained in the classes. Some exercises will be directly carried out by the students, using their own laptops. It will be possible to do the exercises in teams of 2 or more people, according to the teacher's instructions.- Oggetto:
Modalità di verifica dell'apprendimento
La valutazione dell’apprendimento avviene tramite i seguenti strumenti:- solo per chi frequenta: è prevista la consegna degli esercizi svolti durante la parte di laboratorio, a scadenze prefissate durante il corso. Costituisce il 20% del punteggio totale.
- prova scritta: la prova scritta si compone di domande a risposta chiusa e domande a risposta aperta, ed è divisa in due parti. La parte A, per tutti, compone 50% del punteggio finale e consta di 5 domande a risposta chiusa e 2 domande a risposta aperta. La parte B, solo per chi non ha frequentato e dunque non ha consegnato gli esercizi, costituisce il 20% del punteggio totale, e consta di 2 domande a risposta chiusa e 1 domanda a risposta aperta.
- progetto: il progetto consiste realizzazione di una semplice applicazione web, completa di front-end realizzato con Typescript+React e back-end realizzato con Java+Spring, che dimostri la capacità di applicare le conoscenze acquisite e di effettuare scelte progettuali in autonomia. Il progetto può essere realizzato da soli o in team di 2 persone, e viene discusso oralmente. La discussione consiste in una presentazione da parte degli autori o autrici del progetto, seguita da domande del/la docente.
The final assessment of acquired knowledge and skills involves the following assessment tools:- only for students that attend classes: students will regularly upload the exercises carried out during classes. They will contribute for the 20% to the final evaluation.
- written test: the written test is composed of closed and open questions, and is is dividedi n two parts. Part A is for everyone and contributes for the 50% to the final evaluation; it contains 5 closed questions and 2 open questions. Part B is for those who do not attend classes and therefore did not upload the exercised during the course. It contributes for the 20% to the final evaluation, and it contains 2 closed questions plus 1 open question.
- project: the project requires to design and implement a simple web application, with a Typescript+React-based front-end and a JAva+Spring back-end. The project is aimed at verifying the capability of applying acquired knowldge, and the capability to evaluate design and implementation choices. The project can be undertook in teams of 1 or 2 people, and it is presented in an oral discussion. Such discussion involves a short presentation from the team members, followed by a Q/Q with the teacher.
Testi consigliati e bibliografia
- Oggetto:
- Altro
- Titolo:
- Documentazione e tutorial React (in inglese)
- Descrizione:
- La documentazione ufficiale di React (manuale, tutorial, reference guide).
- Note testo:
- Attenzione: l'ultima versione differisce significativamente dalle precedenti pubblicate su reactjs.org. considerate ora obsolete.
- URL:
- Obbligatorio:
- No
- Oggetto:
- Altro
- Titolo:
- Manuale di Typescript (in inglese)
- Descrizione:
- Manuale completo di Typescript. Contiene anche informazioni su come usare Typescript con React.
- URL:
- Obbligatorio:
- No
- Oggetto:
- Altro
- Titolo:
- Guida di riferimento per HTML, CSS e il DOM (in inglese)
- Descrizione:
- La guida ufficiale della Mozilla Developer Network, con documentazione e guida di riferimento.
- Note testo:
- Oltre agli argomenti citati nel titolo, contiene molte altre informazioni potenzialmente utili per il web developer. Alcune parti sono disponibili anche in italiano.
- URL:
- Obbligatorio:
- No
- Oggetto:
