View syllabus
WEB DESIGN AND PROGRAMMING
VINCENZO AMBRIOLA
Academic year2020/21
CourseDIGITAL HUMANITIES
Code443AA
Credits12
PeriodSemester 2
LanguageItalian

ModulesAreaTypeHoursTeacher(s)
PROGETTAZIONE WEBINF/01LEZIONI42
MARIA SIMI unimap
PROGRAMMAZIONEINF/01LEZIONI42
VINCENZO AMBRIOLA unimap
Obiettivi di apprendimento
Learning outcomes
Conoscenze

Conoscenza delle metodologie e tecnologie di base per la progettazione e realizzazione di siti Web.

Knowledge

Knowledge of basic methodologies and techniques for web design and implementation.

Modalità di verifica delle conoscenze

La presentazione di un progetto individuale realizzato dallo studente sarà un’occasione per verificare in sede di esame le conoscenze teoriche e metodologiche acquisite.

Assessment criteria of knowledge

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à

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.

Skills

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.

Modalità di verifica delle capacità

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.

Assessment criteria of skills

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.

Comportamenti

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.

Behaviors

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.

Modalità di verifica dei comportamenti

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.

Assessment criteria of behaviors

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.

Prerequisiti (conoscenze iniziali)

Fondamenti teorici e programmazione (IFU-L, I semestre), o equivalenti competenze di programmazione di base in Javascript.

Prerequisites

Theorethical foundations and programming (IFU-L, 1st semester) or equivalent basic programming skills in Javascript.

Indicazioni metodologiche

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.

Teaching methods

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.

Programma (contenuti dell'insegnamento)

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à
Syllabus

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.
Bibliografia e materiale didattico

Ambriola. Programmazione in JavaScript: Seconda parte. Nota didattica, versione 11.0 del 27 gennaio 2021.

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: http://elearning.humnet.unipi.it/course/view.php?id=2308 (edizione 2018/19)

Tutorial online su W3schools: http://www.w3schools.com/

Bibliography

Ambriola. Programmazione in JavaScript: Seconda parte. Teaching notes, version 11.0, January 27th 2021 (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: http://elearning.humnet.unipi.it/course/view.php?id=2308 (2018/19 edition)

Indicazioni per non frequentanti

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 dovrebbe mettere gli studenti non frequentanti in grado di elaborare autonomamente, con il supporto a distanza dei docenti, il progetto individuale richiesto per superare l’esame.

Non-attending students info

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 should allow non attending students to autonomously develop, with the distant support of the teachers, the individual project required to pass the exam.

Modalità d'esame

Presentazione di un progetto individuale realizzato dallo studente e contestuale verifica delle conoscenze teoriche e metodologiche.

Assessment methods

Presentation of an individual project implemented by the student and verification of the relevant theoretical and methodological knowledge.

Updated: 10/02/2021 17:52