- Oggetto:
- Oggetto:
Tecnologie Web
- Oggetto:
Web Technologies
- Oggetto:
Anno accademico 2023/2024
- Codice dell'attività didattica
- MFN0634
- Docente
- Claudia Picardi (Docente)
- Corso di studi
- [008707] Laurea in Informatica
- Anno
- 3° anno
- Periodo didattico
- Primo semestre
- Tipologia
- Caratterizzante
- Crediti/Valenza
- 6 CFU - Numero di ore - Number of hours: 54 (24 teoria + 30 lab - 24 theory + 30 practice)
- SSD dell'attività didattica
- INF/01 - informatica
- Modalità di erogazione
- Tradizionale
- Lingua di insegnamento
- Italiano
- Modalità di frequenza
- Facoltativa
- Tipologia d'esame
- Scritto con orale a seguire
- 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:
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. Successivamente, le/i partecipanti apprenderanno i fondamenti di progettazione di un server HTTP tramite Node. Approfondiranno poi l’uso di Jakarta/Java HTTP Servlet e JDBC in connessione a un database service 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. Then, participants will learn the basics of an HTTP server based on Node, and will subsequently study in detail how to use Jakarta/Java HTTP Servlets and JDBC, in conjunction with a database service, to design and implement back-end services.
- 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 di Jakarta/Java Servlet e dei relativi meccanismi di collegamento a database (JDBC).
- 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 Jakarta/Java Servlet e JDBC.
- 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 Jakarta/Java Servlet and of the corresponding database connection tools (JDBC).
- 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 Jakarta/Java Servlet and JDBC.
- 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:
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. Il laboratorio sarà svolto con l’ausilio di computer personali degli studenti e le attività potranno essere svolte in coppia o a piccoli gruppi, a discrezione del/la 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 from the Moodle platform. Practice classes will also take place in the classroom, by using the students own laptops. It will be possible to share the same laptop in groups of two/three students.- 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 React e back-end realizzato con Java Servlet/JDBC, 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.
Gli studenti che hanno seguito il corso nell'AA 22/23 o precedenti, e non hanno ancora dato l'esame, possono sostenere la prova scritta sugli argomenti del programma precedente, e realizzare il progetto con gli strumenti ivi presentati. Si invita chi fosse in questa situazione a contattare la docente con congruo anticipo prima dell'esame in modo da poter ricevere una prova scritta adeguata al programma portato.
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 React-based front-end and a Jakarta/Java Sevlet 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.
Students who took the classes in the year 2022 or in previous years can take the written text on the old program, and prepare the project using the tools that were taught in the old progam. Those is in this situation should contact the teacher prior to taking the exam (and sufficiently in advance) so that they can undertake the written test on the old program.
- 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 Jakarta/Java HTTP Servlet
- Laboratorio: realizzazione di una semplice servlet 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)
- Programmazione back-end con Php: cenni
- 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 Jakarta/Java HTTP Servlet
- Practice: implementing a servlet-based 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:
- Back-end programming in PHP
- The deployment of Web applications
- Offline-first applications with IndexedDB
- Multi-thread applications with Web Workers
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:
