1st degree and Bachelor-level of the Bologna process in Ingegneria Informatica (Computer Engineering) - Torino 1st degree and Bachelor-level of the Bologna process in Ingegneria Informatica - Torino
Il corso si pone l'obiettivo di introdurre i concetti, le metodologie e le tecnologie necessarie per progettare e realizzare applicazioni web costituite da elementi testuali, multimediali e interattivi.
Verranno illustrati i concetti di base di linguaggi come HTML5 e CSS3, gli aspetti fondamentali relativi alla programmazione di applicazioni web, comprensiva delle tecnologie lato client (JavaScript) e lato server (con Python), nonché le modalità di interazione con database relazionali. Particolare attenzione verrà posta agli aspetti di accessibilità e progettazione dell'architettura dell'informazione.
La presentazione degli argomenti permetterà agli studenti di ottenere le competenze base per gestire le principali tecnologie per il web ed effettuare scelte di progettazione ragionate per costruire applicazioni web efficaci.
The course aims at introducing the concepts, the methodologies, and the technologies needed to design and implement web applications made of textual, multimedia, and interactive elements.
Students will study the basic concepts of languages like HTML5 and CCS3, the fundamental aspects of the web programming with client-side (JavaScript) and server-side (with Python) technologies, and the modalities of interacting with a relational database. Particular focus will be on the accessibility aspects and the information architecture design.
The topic presentation will enable students to gain the essential skills to manage the main web technologies and make reasoned design choices to create useful web applications.
Al termine del corso, gli studenti e le studentesse saranno in grado di:
- Conoscere i concetti fondamentali relativi alle architetture web, ai suoi protocolli e linguaggi principali.
- Possedere e utilizzare le conoscenze base di un framework in Python per creare applicazioni web.
- Conoscere e usare le principali tecnologie per il web (HTML, CSS, JavaScript) e saperle applicare a scenari reali.
- Creare un'applicazione web completa, di media complessità, usabile e accessibile.
At the end of the course, students will be able to:
- Understand the fundamental concepts related to web architectures, protocols, and languages.
- Possess and apply basic knowledge of a Python framework to create web applications.
- Know and use the main web technologies (HTML, CSS, JavaScript) and apply them to real-world scenarios.
- Develop a complete, moderately complex web application that is usable and accessible.
- Programmazione Python (al livello fornito dall'insegnamento di Informatica del primo anno comune di Ingegneria).
- Linguaggio SQL per l'interrogazione di una base di dati (attraverso l'insegnamento di Basi di Dati o formazione personale).
- Python programming (at the level provided by the first-year Computer Science course common to all Engineering programs).
- SQL language for querying a database (through the Databases course or self-directed learning).
Il corso tratterà i seguenti argomenti:
a) Progettare per il web: architetture e concetti fondamentali (1 credito)
- Architettura delle applicazioni web e cenni sul protocollo HTTP
- Concetti base di progettazione per il web
- Strumenti di sviluppo e debug, dentro e fuori dal browser
- Accessibilità e architettura dell'informazione di applicazioni web
b) Programmazione front-end (3 crediti)
- Il linguaggio HTML5: aspetti base e avanzati
- Cascading Style Sheets (CSS3) e design responsive
- JavaScript e DOM
c) Programmazione back-end (2 crediti)
- Server web e sviluppo in ambiente Python
- Accesso a basi dati relazionali con Python
- Interazione col front-end
Basic concepts of web design
Architecture of web applications and an introduction to the HTTP protocol
The HTML5 language
Cascading Style Sheets (CSS3) and responsive design
Accessibility and information architecture of web applications
Client-side programming: JavaScript and the DOM
Server-side programming: web servers and development in a Python environment
Accessing relational databases with Python
Development tools, both inside and outside the browser
In aggiunta alle ore in aula, che includeranno sia lezioni interattive che esercizi (4 crediti), il corso prevede delle ore di laboratorio (2 crediti).
I laboratori consisteranno nell'applicazione delle tecniche e dei concetti presentati in aula per costruire incrementalmente un'applicazione web di complessità crescente. Durante i laboratori, gli studenti potranno discutere con i docenti le proprie soluzioni agli esercizi a loro assegnati.
Il corso adotterà soluzioni e strumenti moderni per la comunicazione e lo sviluppo di applicazioni web (per esempio, Git e GitHub, Telegram/Slack, ecc.). Le lezioni e gli esercizi in aula saranno video-registrati e messi a disposizione dopo ogni classe.
In addition to classroom hours, which will include both interactive lectures and exercises, the course also includes lab sessions.
The lab sessions will involve applying the techniques and concepts presented in class to incrementally build a web application of increasing complexity. During the labs, students will have the opportunity to discuss their solutions to assigned exercises with the instructors.
Slide e materiale relativo (link, letture, ecc.) saranno forniti dai docenti durante il corso.
Ulteriori risorse consigliate:
* Flavio Copes, Handbook su HTML, CSS, e JavaScript, disponibili online: https://thevalleyofcode.com
* MDN Web Docs, disponibile online: https://developer.mozilla.org
* Miguel Grinberg, "Flask Web Development", seconda edizione, O'Reilly Media Inc., 2018, ISBN 9781491991732
Slides and related materials (links, readings, etc.) will be provided by the instructors during the course
Slides; Esercizi; Esercizi risolti; Esercitazioni di laboratorio; Esercitazioni di laboratorio risolte; Video lezioni dell’anno corrente; Video lezioni tratte da anni precedenti; Strumenti di collaborazione tra studenti;
Lecture slides; Exercises; Exercise with solutions ; Lab exercises; Lab exercises with solutions; Video lectures (current year); Video lectures (previous years); Student collaboration tools;
Modalità di esame: Prova orale obbligatoria; Elaborato progettuale individuale;
Exam: Compulsory oral exam; Individual project;
...
L'esame consisterà nella verifica delle competenze teoriche e pratiche descritte in precedenza attraverso un progetto pratico, da implementare individualmente, seguito da una discussione orale sul progetto stesso. La consegna del progetto avverrà tramite strumenti online, mentre la prova orale sarà svolta in laboratorio o in aula.
Il progetto prevederà la creazione e la consegna di un'applicazione web che utilizzi le competenze e le conoscenze acquisite durante il corso, secondo delle specifiche che saranno pubblicate 20 giorni in anticipo rispetto alla data dell'appello. Solo gli studenti che consegneranno il loro progetto entro la scadenza fissata per ogni appello potranno accedere all'orale.
L'applicazione web sarà valutata dai docenti durante la prova orale, verificando le funzionalità implementate e le tecniche di programmazione adottate rispetto alle specifiche progettuali ricevute. Tale prova orale servirà anche a valutare la conoscenza approfondita del codice consegnato dagli studenti e alla loro capacità di discutere le scelte progettuali effettuate alla luce degli argomenti del corso. Tale discussione avrà una durata prevista di 20-30 minuti per progetto.
La valutazione sarà espressa su una scala da 0 a 30, con il progetto che varrà fino a 26 punti e la prova orale fino a 4. Fino a 2 punti aggiuntivi saranno assegnati ai progetti che dimostreranno una particolare qualità nonché precisione e ricchezza delle risposte durante l’orale. Grazie a questi ulteriori punti, sarà possibile raggiungere una valutazione pari a 30L.
Gli studenti e le studentesse con disabilità o con Disturbi Specifici di Apprendimento (DSA), oltre alla segnalazione tramite procedura informatizzata, sono invitati a comunicare anche direttamente al/la docente titolare dell'insegnamento, con un preavviso non inferiore ad una settimana dall'avvio della sessione d'esame, gli strumenti compensativi concordati con l'Unità Special Needs, al fine di permettere al/la docente la declinazione più idonea in riferimento alla specifica tipologia di esame.
Exam: Compulsory oral exam; Individual project;
The exam will assess the theoretical and practical skills described earlier through a practical project to be implemented individually, followed by an oral discussion of the project. The project must be submitted online, while the oral exam will take place in the lab or classroom.
The project will involve the development and submission of a web application that applies the skills and knowledge acquired during the course, following specifications that will be published a few weeks before the exam date. Only students who submit their project by the deadline set for each exam session will be allowed to take the oral exam.
The web application will be evaluated by the instructors during the oral exam, based on the implemented features and the programming techniques used in relation to the provided specifications. The oral discussion will also serve to assess the student's in-depth understanding of the submitted code and their ability to explain their design choices in light of the course topics. The discussion is expected to last 20–30 minutes per project.
In addition to the message sent by the online system, students with disabilities or Specific Learning Disorders (SLD) are invited to directly inform the professor in charge of the course about the special arrangements for the exam that have been agreed with the Special Needs Unit. The professor has to be informed at least one week before the beginning of the examination session in order to provide students with the most suitable arrangements for each specific type of exam.