CdSINFORMATICA UMANISTICA
Codice443AA
CFU12
PeriodoSecondo semestre
LinguaItaliano
Conoscenza delle metodologie e tecnologie di base per la progettazione e la realizzazione di siti Web.
Knowledge of basic methodologies and techniques for web design and implementation.
La presentazione di un progetto individuale realizzato dallo studente sarà un’occasione per verificare in sede di esame le conoscenze teoriche e metodologiche acquisite.
The presentation of an individual project implemented by the student will give the opportunity to verify during the exam the acquisition of both theoretical and methodological knowledge.
Capacità di progettare e realizzare un semplice sito web seguendo una metodologia corretta e un uso appropriato delle tecniche. Capacità di programmazione su strutture dati complesse e ad eventi.
Capacità di programmare semplici interazioni in siti web.
Design and implementation of a simple web site, according to a correct methodology and appropriate use of the relevant techniques. Programming on complex data structures and event driven. Programming of simple interactions in web sites.
Lo studente dovrà dimostrare di saper svolgere gli esercizi proposti durante il corso e di progettare e realizzare autonomamente un semplice sito web con elementi di interattività. Il progetto sarà discusso e valutato in sede di esame.
The student will have to demonstrate the ability to complete the exercises proposed during the course and to design and implement autonomously a web site, which includes a few interactive components. The project will be presented and evaluated during the final exam.
Lo studente acquisirà consapevolezza dell’importanza di un progetto centrato sull’utente e dei requisiti di accessibilità e usabilità. In aggiunta, conoscerà le principali regole in materia di diritto d’autore e di riservatezza dell'informazione.
The student will acquire awareness of the importance of a user-centered design and of accessibility and usability requirements. Moreover he/she will be acquainted with the main regulations about authorship rights and privacy.
Lo studente dovrà dimostrare attraverso il progetto realizzato di avere acquisito piena consapevolezza delle soluzioni tecniche adottate e messo in atto un comportamento corretto rispetto ai contenuti disponibili sul web attraverso una rielaborazione originale e citazione puntuale delle fonti.
The student will have to demonstrate, through the implemented project, a full awareness of the technical solutions adopted and he/she will have to adopt a correct behaviour with respect to contents available on the web, by performing a personal elaboration of those contents and by citing the relevant sources.
Fondamenti teorici e programmazione (IFU-L, I semestre) o equivalenti competenze di programmazione di base in Javascript.
Theorethical foundations and programming (IFU-L, 1st semester) or equivalent basic programming skills in Javascript.
Si alterneranno lezioni ed esercitazioni in modo da mettere subito in pratica quanto appreso. Tutti i materiali, sia delle lezioni teoriche che delle esercitazioni e risorse web di aiuto allo sviluppo, sono rese disponibili online attraverso il sito web del corso e la piattaforma Moodle.
La frequenza è raccomandata ma non indispensabile.
Per il programma da 6 CFU seguire solo il modulo A.
Lectures and exercise classes will be interleaved so that theoretical notions are immediately put into practice. All teaching materials (lecture slides or lectures notes, assigned exercises and web resources) are made available online through the course web site and the Moodle platform.
Attendance is recommended but not essential.
Modulo A: Progettazione
- Breve storia del web e delle tecnologie associate
- Metodologia di progettazione di siti Web
- Il linguaggio per la marcatura di documenti web: HTML5
- Il linguaggio per i fogli di stile: CSS3
- Progettare per una molteplicità di dispositivi: responsive design e media query
- Elaborazione di immagini per il Web
- Criteri di usabilità e accessibilità
- Internazionalizzazione, compatibilità, sicurezza
- Aspetti legali: privacy e diritto d’autore nel web
- Valutazione e promozione
Modulo B: Programmazione
- Programmazione a oggetti in JavaScript
- Programmazione su strutture dati complesse: alberi
- Programmazione ad eventi dentro il browser.
- Programmazione con il Document Object Model (DOM)
- Esempi di programmazione dell’interattività
Module A: Web design
- Brief history of the web and associated technologies.
- Web site design methodology.
- Markup of web documents: HTML5
- Style sheets: CSS3
- Web sites for multiple devices: responsive web design and media queries
- Image processing for the web.
- Usability and accessibility.
- Internazionalization, compatibility, security
- Web sites for any device: responsive web design
- Legal issues: privacy and authorship rights
- Evaluation and promotion.
Module B: Programming
- Object oriented programming in JavaScript
- Programming on complex data structures: objects and trees.
- Event oriented programming inside the browser.
- Programming with the Document Object Model (DOM)
- Examples of interactive programming.
Ambriola. Programmazione in JavaScript: Seconda parte. Nota didattica, versione 12.2 del 25 gennaio 2023.
Ambriola. EasyJS, un ambiente di programmazione JavaScript. Versione 1.14.
Jennifer Niederst Robbins, "Learning Web Design: a beginners guide to HTML, CSS, Javascript and web graphics - 4th Edition", O'Reilly, 2012 (anche in edizione Kindle).
Materiale per modulo A su Moodle: https://elearning22.humnet.unipi.it/course/view.php?id=292
Tutorial online su W3schools: http://www.w3schools.com/
Ambriola. Programmazione in JavaScript: Seconda parte. Teaching notes, version 12.2, January 25th 2023 (in Italian)
Ambriola. EasyJS, un ambiente di programmazione JavaScript. Version 1.14.
Jennifer Niederst Robbins, "Learning Web Design: a beginners guide to HTML, CSS, Javascript and web graphics - 4th Edition", O'Reilly, 2012 (also available for Kindle).
Material for Module A on the Moodle web site: https://elearning22.humnet.unipi.it/course/view.php?id=292
Il sito web del corso e la piattaforma Moodle contengono tutti i materiali per seguire anche a distanza le lezioni: i lucidi delle lezioni o le dispense del docente, gli esercizi assegnati, materiale bibliografico e indicazione di numerose risorse web di supporto, incluso uno spazio di condivisione per fasi intermedie del progetto. Queste risorse permettono agli studenti non frequentanti di elaborare autonomamente, con il supporto a distanza dei docenti, il progetto individuale richiesto per superare l’esame.
The course web site and the Moodle platform contain all the materials which are necessary to attend classrooms in a distance learning mode: lecture slides or lecture notes, assigned exercises, bibliographic references and several web resources, including a data storage service for sharing intermediate project results. These facilities will allow non attending students to autonomously develop, with the distant support of the teachers, the individual project required to pass the exam.
Presentazione di un progetto individuale realizzato dallo studente e contestuale verifica delle conoscenze teoriche e metodologiche.
La valutazione del progetto è in trentesimi ed è determinata collegialmente dai docenti, tenendo in considerazione:
- Correttezza dei contenuti. La qualità del testo, della grafica, la corretta citazione delle fonti bibliografiche. L'adeguatezza del livello di approfondimento e dello stile di presentazione.
- L'organizzazione e la gradevolezza dell’interfaccia. Struttura e strumenti che consentano un’efficace comunicazione via web, anche tenendo in considerazione la natura peculiare dei diversi dispositivi (es. dimensione dello schermo).
- Qualità dell’interattività e dell’accessibilità. Il rispetto dei criteri di accessibilità del W3C, l’usabilità delle pagine (coerenza dell'interfaccia, navigabilità).
- L’efficacia del codice e l’osservanza dei suggerimenti in merito allo stesso.
- L'originalità e creatività del sito.
Gli studenti autori dei progetti che supereranno positivamente il processo di valutazione accederanno alla prova orale, la quale verterà sugli aspetti teorici e pratici del corso.
Presentation of an individual project implemented by the student and verification of the relevant theoretical and methodological knowledge.
The evaluation of the project is out of thirty and is determined collectively by the teachers, taking into consideration:
- Correctness of contents. Quality of the text and the graphics, correct citation of bibliographic sources. Appropriateness of the level of detail and style of presentation.
- Organization and pleasantness of the interface. Structure and tools that allow effective communication via the web, also taking into consideration the peculiar nature of the different devices (e.g. screen size).
- Quality of interactivity and accessibility. Compliance with W3C accessibility criteria, usability of the pages (interface consistency, navigability).
- Effectiveness of the code and observance of the suggestions regarding the code.
- Originality and creativity of the site.
Student authors of projects who successfully pass the evaluation process will access the oral exam, which will focus on the theoretical and practical aspects of the course.