Web Design II - Prof. Fabio Codebue
Obiettivi
Il corso si propone di fornire agli studenti una conoscenza approfondita dei principi e delle tecniche del Responsive Web Design (RWD) e dell’Adaptive Web Design (AWD), in un percorso che integra la teoria dell’evoluzione del web con la pratica dello sviluppo front-end moderno. li obiettivi principali dell'insegnamento partendo dalle origini della progettazione web e dai concetti fondamentali di usabilità, accessibilità e User Experience (UX),: - Fornire una solida comprensione dei concetti fondamentali di JavaScript, inclusi variabili, tipi di dati, operatori, strutture di controllo, funzioni e oggetti. - Sviluppare la capacità di utilizzare JavaScript per manipolare il Document Object Model (DOM), permettendo la creazione di interfacce utente dinamiche e interattive. Preparare gli studenti alle sfide professionali, attraverso progetti pratici che simulano scenari reali di sviluppo e tramite l'apprendimento di best practices e metodologie di lavoro in team.
Programma
Parte 1 – UX, Prototipazione e Responsive Web Design (Lezioni 1–10) Evoluzione del Web Design Dalle origini del web statico al Web 2.0 Introduzione a Responsive (RWD) e Adaptive Web Design (AWD) Concetti di accessibilità e design per tutti Principi di User Experience (UX) e User Interface (UI) Differenza tra UX e UI Usabilità, consistenza e affordance Modelli mentali e percorsi cognitivi dell’utente Analisi e Ricerca Utente Personas, scenari e journey map Tecniche di user research Analisi dei competitor e benchmark di design Prototipazione e Wireframing Strumenti per la prototipazione (Figma, Adobe XD, Pen&Paper) Architettura dell’informazione Wireframe low/high fidelity e flussi di navigazione Fondamenti di HTML5 e CSS3 per RWD Struttura semantica del documento Layout fluidi, percentuali e viewport Media queries e breakpoints Introduzione a Bootstrap Il concetto di grid system e responsive layout Container, row, col Componenti base e utility classes Layout Responsive con Bootstrap Navbar, card, immagini responsive Gestione delle colonne e delle proporzioni Personalizzazione tramite variabili e SASS Principi di Adaptive Web Design (AWD) Differenze tra responsive e adaptive Rilevazione del dispositivo e adattamento del contenuto Progressive Enhancement e Graceful Degradation UX Writing e Microinterazioni Come il linguaggio influisce sull’esperienza utente Messaggi di errore, feedback visivo e test di usabilità Animazioni leggere e transizioni fluide Progetto pratico RWD: Landing Page responsive Dalla prototipazione al codice Applicazione dei principi UX/UI e RWD Testing multi-device e ottimizzazione Parte 2 – Le Basi di JavaScript (Lezioni 11–20) Introduzione a JavaScript Inserire JavaScript in una Pagina Web Variabili e Tipi di Dati Operatori in JavaScript Stringhe e Metodi Condizioni: if, else if, else Cicli: for, while, do while Funzioni: Dichiarazione e Invocazione Funzioni Arrow e Scope Oggetti in JavaScript Parte 3 – Strutture Dati e Programmazione Asincrona (Lezioni 21–40) Array: Introduzione e Metodi Base Array Avanzati: map, filter, reduce Oggetti Avanzati e Prototipi Destructuring di Oggetti e Array Classi in JavaScript Ereditarietà e Super Classi Set e Map Spread e Rest Operator JSON e Interazione con Dati Introduzione alle Promise async e await Gestione degli Eventi Error Handling e Debugging Moduli in JavaScript Fetch API: Richieste HTTP DOM: Selezione e Manipolazione Aggiungere e Rimuovere Elementi DOM Gestione dei Form e Validazione localStorage e sessionStorage Cookies in JavaScript Parte 4 – Progetti Avanzati e Framework Moderni (Lezioni 41–70) Creazione di una To-Do List App Introduzione a React Gestione dello Stato con React React Router Redux: Stato Globale Introduzione ad Angular Introduzione a Vue.js Comunicazione con API esterne Ottimizzazione delle Performance Progetto Finale: App Completa con Login e Dashboard Parte 5 – Preparazione Professionale e Best Practices (Lezioni 71–100) Struttura di un progetto professionale Best practices di naming e documentazione Gestione del codice con Git e GitHub Deploy e hosting di applicazioni web Accessibilità e conformità WCAG SEO tecnico e performance Testing e debug multi-browser Design System e componenti riutilizzabili Progetto integrato finale (UX + RWD + JS) Revisione finale e simulazione colloquio tecnico