Guida degli insegnamenti

Syllabus

Partially translatedTradotto parzialmente
[3I965] - TECNOLOGIE WEBWEB TECHNOLOGIES
Alessandro CUCCHIARELLI
Lingua di erogazione: ITALIANOLessons taught in: ITALIAN
Laurea - [IT04] INGEGNERIA INFORMATICA E DELL'AUTOMAZIONE First Cycle Degree (3 years) - [IT04] COMPUTER AND AUTOMATION ENGINEERING
Dipartimento: [040040] Dipartimento Ingegneria dell'InformazioneDepartment: [040040] Dipartimento Ingegneria dell'Informazione
Anno di corsoDegree programme year : 3 - Secondo Semestre
Anno offertaAcademic year: 2020-2021
Anno regolamentoAnno regolamento: 2018-2019
Crediti: 9
Ore di lezioneTeaching hours: 72
TipologiaType: C - Affine/Integrativa
Settore disciplinareAcademic discipline: ING-INF/05 - SISTEMI DI ELABORAZIONE DELLE INFORMAZIONI

LINGUA INSEGNAMENTO LANGUAGE

Italiano

Italian


PREREQUISITI PREREQUISITES

Conoscenza di base della programmazione.

Basic knowledge of computer programming.


MODALITÀ DI SVOLGIMENTO DEL CORSO DEVELOPMENT OF THE COURSE

Lezioni teoriche: 72 ore.

Lectures: 72 hours.


RISULTATI DI APPRENDIMENTO ATTESI LEARNING OUTCOMES
Conoscenze e comprensione.

Il corso ha l'obiettivo di fornire allo studente le conoscenze sulle tecnologie alla base del Word Wide Web e le competenze necessarie per realizzare applicazioni in tale dominio. Il raggiungimento dell’obiettivo prefissato consentirà l’ampliamento le competenze già acquisite negli altri insegnamenti del corso di laurea relative ai linguaggi ed alle metodologie di programmazione ed alle architetture dei sistemi di elaborazione e delle reti di calcolatori.


Capacità di applicare conoscenze e comprensione.

Al termine del percorso formativo lo studente sarà in grado di progettare applicazioni Web di media complessità, utilizzando architetture e tecnologie allo stato dell’arte, in maniera corretta ed efficiente. In particolare, sarà in grado di: 1. Strutturare documenti attraverso l’uso del linguaggio HTML; 2. Modificare dinamicamente i contenuti di un documento, tramite l’uso di linguaggi lato client, in risposta alle azioni compiute dall’utente dell’applicazione ; 3. Codificare programmi lato server per la generazione di contenuti dinamici; 4. Utilizzare strumenti avanzati di sviluppo quali librerie e framework; 5. Utilizzare, nelle applicazioni, modelli di interazione asincrona tra il Client ed il Server Web basati sull’uso di tecnologie di codifica allo stato dell'arte.


Competenze trasversali.

La realizzazione di un progetto di applicazione Web per la verifica delle competenze acquisite, sviluppato in piccoli gruppi autonomi, consentirà di accrescere la capacità di lavorare in team, di definire soluzioni a problemi in ottica collaborativa, di apprendere autonomamente conoscenze specifiche finalizzate al raggiungimento degli obiettivi, di affinare le capacità di giudizio e di formulazione di obiettivi raggiungibili in un tempo determinato. La produzione della documentazione di progetto richiesta per la verifica finale affinerà le capacità di descrivere in maniera sintetica ed efficace il risultato del lavoro svolto. Infine, la presentazione orale dell’applicazione stimolerà il miglioramento della capacità comunicativa degli studenti.


Knowledge and Understanding.

The course aims to provide students with the ability to understand the technologies underlying the World Wide Web and the knowledge required to build applications in this domain. The acquisition of such knowledge will allow the students to expand the skills acquired in the other courses, related to programming languages and programming methodologies and architectures of computer systems and computer networks.


Capacity to apply Knowledge and Understanding.

At the end of the course the students will be able to design Web applications of medium-complexity, by correctly and efficiently using state of the art technologies and architectures. In particular, they will be able to: 1. Structure documents with the HTML language; 2. Dynamically change the document content, by using client-side programming languages, in response to actions performed by the application’s user; 3. Code server side programs to produce dynamic contents; 4. Use advanced development tools such as libraries and frameworks; 5. Use asynchronous interaction models between Client and Web Server, based on state of the art encoding technology in the Web applications.


Transversal Skills.

The creation of a Web application in order to test the students’ acquired skills , developed within small autonomous groups, will enhance the ability to work in teams, to define solutions to problems in a collaborative perspective, to autonomously gain specific knowledge aimed at reaching the solutions to problems (learning skills), to refine the ability of making judgements and formulation of goals achievable in a given time. The effort to produce the application documentation, required for final assessment, will sharpen the ability to describe both concisely and effectively the result of the work done. Finally, the oral presentation of the application will stimulate the improvement of the students’ communication skills.



PROGRAMMA PROGRAM

(1) Introduzione
Definizione di World Wide Web (W3). I principi su cui si fonda. Protocolli utilizzati. Applicazioni principali.
(2) Il Modello Client-Server (T)
Definizione e caratteristiche fondamentali. Cenni alle principali architetture Client-Server (C/S). Il modello C/S ed Internet: caratterizzazione della rete, protocolli applicativi. Il modello C/S ed il W3: componenti del W3. I server W3: descrizione e funzionalità, uso del protocollo HTTP, codifica MIME, schema di interazione server/browser. I Browser: descrizione, funzionalità.
(3) Il Linguaggio HTML
Caratteristiche principali. Tag: struttura ed attributi. Tag fondamentali in un documento HTML. Gli hyperlink: tipologie e Tag per la loro implementazione. Le Liste. Inserimento di elementi multimediali nelle pagine. Le mappe d’immagine. Le Tabelle. Le Form. Cenni sui CSS. La visualizzazione dei contenuti HTML nel Browser.
(4) Il Linguaggio JavaScript
Caratteristiche fondamentali e funzionalità. Struttura del codice JavaScript, sua integrazione con l'HTML e sua attivazione. Le variabili ed i tipi di dato. Le funzioni e gli oggetti. Le strutture di controllo. Gestione degli eventi generati dal Browser in JavaScript. Il Document Object Model e la sua gestione in JavaScript.
(5) Il Linguaggio PHP
Caratteristiche fondamentali e funzionalità. Struttura del codice PHP e sua attivazione per la generazione di contenuti HTML. Le variabili ed i tipi di dato. Le funzioni e gli oggetti. Le strutture di controllo. L’uso di PHP per la gestione del contenuto di Form HTML. L’accesso a DB da PHP. Esempi di interfacciamento con MySQL. Gestione delle sessioni utente.
(6) I Framework Laravel per lo sviluppo server-side
Caratteristiche di una Web Application. Implementazione secondo il pattern MVC. MVC Application Stack. Caratteristiche principali del framework Laravel, componenti, workflow delle applicazioni. Gestione degli errori. Struttura base di un'applicazione Laravel. l'ORM Eloquent. L'uso dei layout e la gestione delle FORM HTML. Integrazione di package nell'applicazione Laravel. Gestione dell'autenticazione e dell'autorizzazione utente. Esempi di sviluppo di applicazioni.
(7) La Libreria jQuery
Caratteristiche generali. Struttura delle istruzioni. Selettori CSS, posizionali e generici. Metodi core: manipolazione di Wrapped-Set, Classi, Attributi, Stili, Contenuti, valori delle Form, Animazioni. Gestione degli eventi. Direttive AJAX e richiami alla codifica JSON.

(1) Introduction
World Wide Web (W3) definition. Founding principles. W3 protocols. Main applications.
(2) The Client/Server architecture
Definition, principles and relevant aspects. Hints to the Client/Server architectures. C/S and Internet: communication network characteristics, application layer protocols. C/S and W3: W3 main components. W3 servers: description and functionalities, HTTP protocol, MIME Type, server/browser interaction. Browsers: description and functionalities.
(3) The HTML language
Main characteristics. Tags: structure and attributes. Fundamental HTML tags. Hyperlinks: types and related HTML tags. Lists. Multimedia contents in HTML pages. Image Maps. Tables. Form. Hints of CSS. HTML document rendering.
(4) The Javascript language
Main characteristics and functionalities. Javascript (JS) code structure, JS integration into HTML documents and execution. Variables and data types. Functions and objects. Control structures. Browser's events handling in JS. Document Object Model and its manipulation in JS.
(5) The PHP language
Main characteristics and functionalities. PHP code structure and use for HTML contents generation. Variables and data types. Functions and objects. Control structures. Use of PHP for HTML FORM content manipulation. Access to DBMS in PHP. Examples of PHP-MySQL interface. User sessions handling in PHP.
(6) The Laravel frameworks for server-side development
Web application characteristics and its implementation through the MVC design pattern. MVC application stack. Characteristics of the Laravel framework: main components, application workflow. Error handling. The basic structure of a Laravel application. Eloquent ORM. Layouts and HTML Form handling. Packages integration in Laravel. User authentication and authorization. Examples of applications development.
(7) The jQuery library
Main characteristics. Statements structure. CSS positional and generic selectors. Core methods: manipulation of wrapped-set, HTML classes, attributes, styles and contents. HTML FORM handling and animations. Event handling. AJAX interactions and hints on JSON encoding.


MODALITÀ DI SVOLGIMENTO DELL'ESAME DEVELOPMENT OF THE EXAMINATION
Modalità di valutazione dell'apprendimento.

L'esame si compone di due prove: lo sviluppo di un'applicazione Web finalizzata alla valutazione della capacità dello studente di applicare i concetti e le tecnologie illustrate durante il corso per la soluzione di un problema reale ed una orale, che ha l'obiettivo di verificare il livello di apprendimento delle conoscenze concettuali acquisite dallo studente. Una valutazione positiva dell'applicazione Web (punteggio maggiore o uguale a 18/30) costituisce il prerequisito per l'accesso alla prova orale, che consiste in un'analisi preliminare del codice dell'applicazione, seguita da una serie di domande sugli argomenti del corso.


Criteri di valutazione dell'apprendimento.

L'applicazione Web verrà valutata sulla base della corrispondenza delle sue caratteristiche funzionali con le specifiche date, dell'uso corretto ed efficace degli strumenti tecnologici utilizzati per il suo sviluppo ed in termini di organizzazione del lavoro necessario alla sua realizzazione, in base a quanto verificato durante le revisioni di progetto. Durante la prova orale, il candidato deve dimostrare di conoscere i principi e le tecnologie utilizzate nello sviluppo di applicazioni Web, di saper usare un corretto linguaggio tecnico e di saper risolvere problemi puntuali. Il punteggio massimo verrà conseguito dimostrando un'approfondita conoscenza dei temi trattati nel corso.


Criteri di misurazione dell'apprendimento.

L'apprendimento dello studente verrà misurato con un voto massimo pari a 30.


Criteri di attribuzione del voto finale.

Per superare l'esame, lo studente deve conseguire un punteggio maggiore o uguale a 18/30, sia nella valutazione dell'applicazione Web che nella prova orale. Il voto finale è calcolato sulle valutazioni delle due prove e la lode viene assegnata agli studenti che abbiano dimostrato una conoscenza approfondita delle tematiche oggetto del corso ed una spiccata capacità di fornire soluzioni efficienti ed efficaci ai problemi applicativi proposti.


Learning Evaluation Methods.

The examination is organized in two steps: the development of a Web application, aimed at assessing the student's ability to solve a real problem using the concepts and the technologies illustrated in the course, and an oral examination, aimed at verifying the level of the conceptual knowledge acquired by the student. A positive evaluation of the Web application (equal to or higher than 18/30) is a prerequisite for the access to the oral examination, consisting in a preliminary analysis of the application code, followed by a set of questions on the course topics.


Learning Evaluation Criteria.

The Web application will be evaluated on the basis of the correspondence of its functional characteristics with the given specifications, the correct and effective use of the technologies, as well as in terms of work organization, as emerged during the project revisions. In the oral examination, the candidate must show an adequate knowledge of concepts and technologies used for the development of a Web applications, a proper use of the technical language and the ability to solve simple specific problems. The maximum mark will be achieved by demonstrating in-depth knowledge of the course topics.


Learning Measurement Criteria.

The student's learning will be measured with a maximum of 30 points.


Final Mark Allocation Criteria.

In order to pass the exam, the student must attain a mark equal to or greater than 18/30 in both the Web application evaluation and the oral examination. The final mark is assigned taking into account the evaluations of the two steps and the 'laude' is given to the students who have demonstrated a thorough understanding of the course topics, along with the ability to give efficient and effective solutions to the application problems proposed.



TESTI CONSIGLIATI RECOMMENDED READING

Copia delle slides e testi degli esempi illustrati a lezione, che possono essere scaricati dal sito del corso (https://learn.univpm.it).

Slides copies and code of the examples used for the lectures, downloadable from the course site (https://learn.univpm.it).


E-LEARNING E-LEARNING

No

No


Scheda insegnamento erogato nell’A.A. 2020-2021
Le informazioni contenute nella presente scheda assumono carattere definitivo solo a partire dall'A.A. di effettiva erogazione dell'insegnamento.
Academic year 2020-2021

 


Università Politecnica delle Marche
P.zza Roma 22, 60121 Ancona
Tel (+39) 071.220.1, Fax (+39) 071.220.2324
P.I. 00382520427