Linguaggi e nuove tecnologie per il web - Appunti completi

Linguaggi e nuove tecnologie per il web

Lezione iniziale: informazioni organizzative

Contenuti del corso

Il corso si prefigge di accompagnare lo studente nella progettazione di un sito web adatto alla fruizione su device mobile, quali smartphone e tablet, attraverso l’utilizzo delle attuali tecnologie di sviluppo per il web. Durante il corso saranno illustrati principi di user interaction con particolare riferimento alle tecnologie mobile. Saranno inoltre approfonditi gli aspetti di interazione client/server attraverso l’approfondimento di uno specifico gestore di contenuti web (WordPress).

Verrà chiesto di presentare un progetto di gruppo che consiste nella progettazione e sviluppo di un sito web “responsive”. Il corso si svolgerà attraverso lezioni frontali in laboratorio con alcune esercitazioni e revisioni progettuali in itinere di gruppo pubbliche. Ogni sito sarà quindi presentato al docente e ai compagni per discutere apertamente di eventuali problematiche di progettazione e/o di sviluppo.

Argomenti principali del corso

• Progettazione User experience per siti web mobile.
• Elementi di UCD, Elementi di Usabilità per il mobile e principi di UI/UX per il web e per il mobile.
• Responsive web design.
• HTML 5 e tag semantici.
• CSS3 (avanzato).
• Framework CSS (Bootstrap) per responsive web design.
• Form web.
• Architettura client-web server.
• Introduzione ai linguaggi di programmazione (JS e accenni PHP).
• Introduzione ai CMS moderni (Wordpress).

Prerequisiti per seguire il corso

Conoscenza base di sviluppo web (HTML e CSS). Conoscenza base dei software Adobe Dreamweaver, Adobe Photoshop e/o Adobe XD. È fortemente consigliato aver frequentato i corsi di “Visual Design” e di “Informatica e grafica per il Web”. Dopo l’introduzione al corso ci sarà un test per una valutazione delle vostre conoscenze di HTML e CSS. Il test è obbligatorio per tutti gli studenti che sono intenzionati a frequentare il corso.

Tutti i materiali del corso saranno disponibili sulla pagina dedicata al corso del sito e-learning. Per permettervi di accedere alla Creative Suite è importante iscriversi entro il 3 marzo 2023 sulla pagina del corso, in modo da poter comunicare ai tecnici l’attivazione del vostro account sulla piattaforma che permette l’utilizzo di tali programmi. La formazione dei gruppi è obbligatoria entro l’8 marzo 2023, in modo da poter essere confermata il 10 marzo 2023.

Esame

La valutazione finale sarà basata sulla verifica di quanto appreso durante il corso, attraverso un progetto di gruppo (consegnato almeno una settimana prima) e una prova scritta/orale il giorno dell’appello.

• Progetto pratico a gruppi di 3-4 persone (progettazione e sviluppo di un minisito web responsive). Il progetto vale un anno accademico (cioè fino all’appello di Febbraio 2024).

Linguaggi e nuove tecnologie per il web

• Scritto individuale 15 domande a crocette o cloze (ogni domanda vale 2 punti).
• Orale (argomenti del corso e/o commento orale del progetto).

Il superamento dell’esame è vincolato a:

• ≥ Valutazione 18 del progetto di gruppo (obbligatorio).
• ≥ Valutazione 18 della prova scritta* (obbligatorio) 1.

Voto finale: media ponderata fra il voto di progetto e il voto dello scritto. Non sono previste altre modalità d’esame.

*N.B. Nelle slide per “esame/voto dello scritto” si intende il voto complessivo finale dello scritto/orale individuale.

Appelli

Per poter sostenere lo scritto è necessario prima presentare il progetto di gruppo (e se si presenta il progetto di gruppo è necessario presentarsi all’appello per accettare il voto del progetto di gruppo). N.B. È necessario che tutto il gruppo si presenti allo scritto dell’appello in cui si è consegnato il progetto. Per la registrazione del voto, è comunque necessario:

• Iscriversi all’esame tramite SIFA e presentarsi il giorno dell’appello con documento di identità.
• Valutazione positiva del progetto consegnato.
• Superare la prova scritta con una votazione positiva.

Linguaggi e nuove tecnologie per il web Lezione 1

Progetto di gruppo

Il progetto finale consiste nello sviluppo di un sito web con caratteristiche e requisiti minimi calibrati su quanto effettivamente visto e sperimentato a lezione. Il sito dovrà seguire il brief di progetto, nel quale saranno indicati il tema ed i requisiti generali (contenuti, articolazione, caratteristiche visive, ecc.) e tecnici (indicazioni su metodi e tecniche da adottare). Il tema e i requisiti di progetto non sono semplici indicazioni ma sono effettivamente vincolanti per la valutazione finale. Il progetto dovrà essere consegnato funzionante e strutturato secondo quanto visto a lezione. Il pacchetto di consegna dovrà contenere una cartella con tutti i file necessari per l’esecuzione del sito web.

Brief 1

Il progetto da sviluppare durante il corso è rappresentato dallo progettazione e realizzazione di un sito web di 5 pagine per i gruppi da tre persone, di 7 pagine per i gruppi da 4 persone. Il tema è quello di descrivere una agenzia di comunicazione, uno studio di design grafico o una web agency (composta dai componenti del gruppo).

L’architettura del sito è libera e dovrà essere pensata in base all’analisi UCD che farete. Il sito (=User Centered Design) dovrà essere full-responsive (quindi visibile correttamente da desktop, tablet standard e smartphone standard). È consigliato trovare una metafora comunicativa per descrivere in maniera creativa le attività della agenzia web. Idee creative originali, spiritose o ironiche sono bene accette. Non sono ammessi: Siti web one page con scroll.

Brief 2

Il sito dovrà obbligatoriamente avere le seguenti caratteristiche tecniche minime per dimostrare di aver compreso gli argomenti trattati a lezione e di saperli usare correttamente:

• Codice HTML/CSS valido.
• HTML5 con l’utilizzo tag semantici per l’organizzazione dei blocchi html (non solo div).
• Utilizzo delle nuove proprietà CSS3 (a scelta).
• Design full responsive con le tecniche viste a lezione.
• Bootstrap Bootstrap è un framework front-end open source utilizzato per sviluppare siti web e applicazioni web. Creato da Twitter, è uno dei framework più popolari al mondo e viene utilizzato da molti sviluppatori web per creare siti web responsive e mobili-first. Bootstrap fornisce un insieme di strumenti, modelli e componenti pre-costruiti per aiutare gli sviluppatori a creare rapidamente interfacce web moderne e responsivi, con un design coerente e uniforme. Questi componenti includono moduli di navigazione, pulsanti, tabelle, form, griglie, icone e molti altri elementi di base.
• Inserimento di un form web html5, ben strutturato e formattato.
• Utilizzo di librerie e script JS.

Revisione

Per la valutazione del progetto di gruppo sono obbligatorie una revisione del progetto in fase avanzata e una revisione finale a fine corso. Potranno essere richieste revisioni su materiali preliminari (bozze, schemi, grafiche base) per orientare correttamente il progetto, ma non potranno essere considerate sostitutive della revisione obbligatoria. Non verranno effettuate revisioni esclusivamente verbali. La revisione non costituisce una pre-approvazione del progetto, ma è finalizzata esclusivamente all’analisi dell'impostazione generale del progetto, alla considerazione di specifici nodi progettuali e delle relative soluzioni adottabili.

1° Revisione 4 - 5 aprile Materiali da presentare:

• User persona + User scenario.
• Architettura del sito.
• Wireframe Smartphone + Tablet + Desktop (+ eventuali sketches).
• Mockup Smartphone + Tablet + Desktop.

2° Revisione 16 - 17 maggio Materiali da presentare:

Linguaggi e nuove tecnologie per il web

• Sito sviluppato in modalità responsive con bootstrap (almeno metà della pagine arrotondate per eccesso compresa la home).

Consegna

Il progetto dovrà essere consegnato tramite wetransfer.com all’indirizzo diana.quarti@unimib.it e alessandro.gabbiadini@unimib.it usando come mittente la propria email del campus (email tipo lorem@campus.unimib.it). Attenzione: Progetti consegnati in modalità diverse non saranno valutati. Salvo accordi precedenti. Tutti i file richiesti, denominati e organizzati in cartelle, dovranno essere compressi in un unico file .zip denominato LPW-gruppoXX.zip dove XX indicano il numero del gruppo (es. 07 oppure 10), contenente:

• User personas/scenario, architettura, wireframe mobile-tablet-desktop, una breve relazione (mockup opzionali).
• Una cartella con tutti i file necessari per l’esecuzione del sito web.
• Un file .TXT o .RTF o .PDF denominato gruppoXX.pdf/rtf/txt contenente cognome e nome di tutti i componenti del gruppo con matricola e indirizzo di posta elettronica di ateneo.

Linguaggi e nuove tecnologie per il web Lezione 2

HTML5

È la 5° versione del linguaggio fondamentale di internet. Si tratta di un’evoluzione del linguaggio HTML per adattare i siti alle nuove esigenze del web. È ancora in via di definizione, pur essendo in fase di rilascio già dal 2009. L’obiettivo dell’html5 era rendere html indipendente da estensioni proprietarie dei browser (flash) e di offrire la massima compatibilità tra browser diversi (e dispositivi diversi), in particolar modo i dispositivi mobile.

Le novità riguardano:

• La novità maggiore è data dalla presenza di tag specifici per quanto riguarda la semantica nel markup* e quindi l’introduzione di nuovi tag semantici per connotare il significato dei contenuti.

*La semantica nel markup si riferisce all'uso di tag HTML ossia HyperText Markup Language (o altri linguaggi di markup come PDF, XML) per indicare il significato semantico del contenuto di una pagina web, invece di utilizzare i tag solo per la formattazione visiva. In altre parole, la semantica nel markup mira a descrivere il significato dei contenuti web, come ad esempio il fatto che un particolare blocco di testo sia un'intestazione, un sottotitolo, un paragrafo o un elenco puntato, piuttosto che specificare come tali elementi dovrebbero apparire a livello visivo. L'utilizzo di linguaggi di markup consente di separare la struttura e il contenuto di un documento dalla sua presentazione visuale, rendendo possibile la creazione di documenti compatibili con diverse piattaforme e dispositivi.

• Novità sulle possibilità di interazione dell’utente con la pagina web, ad esempio nella validazione di form (attributo required) può essere utilizzato in un elemento di un modulo web per indicare che un campo è obbligatorio e deve essere compilato dall'utente prima di poter inviare il modulo. Se l'utente non ha inserito un valore per il campo obbligatorio, il browser visualizzerà un messaggio di errore e impedirà all'utente di inviare il modulo fino a quando il campo non verrà compilato.
• Capacità di memorizzare dati in locale.
• Eliminati alcuni tag obsoleti (ad esempio il tag <font>, <frame>, ecc.) e alcuni attributi obsoleti (bgcolor, align ecc.).
• Supporto alle tecnologie legate ad animazioni (javascript ecc...).
• Supporta l’incorporazione di grafica vettoriale SVG SVG (Scalable Vector Graphics) è un formato di file per la grafica vettoriale (la quale utilizza codice XML per descrivere forme, linee, curve, testo e altri elementi grafici). A differenza dei formati di file raster come JPEG e PNG, che utilizzano una griglia di pixel per rappresentare le immagini, le immagini SVG sono basate su equazioni matematiche che descrivono le forme, il che significa che possono essere scalate a qualsiasi dimensione senza perdita di qualità. Le immagini SVG sono particolarmente utili per il web e l'interfaccia utente, in quanto possono essere utilizzate per creare icone, grafici, animazioni e altre elementi interattivi. Inoltre, essendo un formato di file testuale, le immagini SVG sono più leggere e compatte dei formati di file raster, il che significa che possono essere scaricate più velocemente e occupano meno spazio di archiviazione.
• Nuovi tag audio e video per controllare direttamente il contenuto multimediale.

Per i dispositivi mobile HTML5 è fondamentale, in quanto:

• Supporta le app offline, garantendo il funzionamento dei programmi in caso di interruzione di connettività.
• Supporta la geolocalizzazione per sfruttare al meglio il GPS.
• Supporto alla compilazione form in particolare per dispositivi touch.
• È indipendente dai software per la gestione di contenuti multimediali (Flash, ecc...).

Restano validi molti elementi del «vecchio» HTML. Compaiono nuovi tag e attributi per gestire al meglio contenuti innovativi e agevolare l’inserimento dei dati da parte dell’utente. Possiamo suddividere i nuovi tag in:

• Tag semantici per una migliore strutturazione delle pagine.
• Elementi per la formattazione dei contenuti di testo.
• Elementi interattivi Linguaggi e nuove tecnologie per il web.

Gli elementi semantici

Gli elementi semantici sono elementi con un significato. Il nome del tag descrive quindi chiaramente il significato sia al browser che allo sviluppatore.

<div> e <span> sono elementi non semantici (non ci dicono nulla sul loro contenuto).

<form>, <table> e <article> descrivono chiaramente il loro contenuto e quindi sono elementi semantici.

Gli elementi semantici dell’HTML5

L’HTML5 introduce una serie di nuovi elementi semantici, che sono supportati da tutti i moderni browser. Inoltre, è possibile insegnare ai browser più vecchi come gestire i nuovi tag. header, section, footer, aside, nav, main, article, figure { display: block; } N.B. Alcuni browser più vecchi come alcune versioni di Internet Explorer hanno bisogno di altri codici aggiuntivi.

Possiamo suddividere i elementi semantici dell’HTML5 in:

• Tag semantici (elementi con un significato: descrivono chiaramente il significato sia al browser che allo sviluppatore es. <form> <table> e <article>.
• Tag article: definisce di una sezione di contenuto semanticamente importante e ben definita. Identifica: articolo di una rivista, post di un blog, una news, un commento a un contenuto. In un elemento article possono essere inseriti altri elementi article (pensate ad esempio alla struttura a commenti nei post di un blog).
• Tag section: definisce una sezione all’interno di un documento, ovvero un raggruppamento tematico di contenuti, in genere con un’intestazione. Una home page potrebbe essere suddivisa in sezioni per l’introduzione, il contenuto e le informazioni di contatto. Ma potrei usare una sezione anche all’interno di un articolo <article>, ovvero una parte del testo dotata di una determinata struttura omogenea (che può ripetersi) con una connotazione particolare rispetto al resto del testo. Rispetto al div, le informazioni contenute in section hanno uno stesso valore semantico. Una section deve contenere un’intestazione quindi almeno un titolo (h1-h6).

Ad esempio, potrebbe essere utilizzato per suddividere il contenuto di una pagina in una sezione per l'introduzione, una per i dettagli del prodotto e un'altra per i commenti degli utenti. Ciò rende più facile per gli utenti leggere e navigare il contenuto della pagina.

• Tag aside: definisce una sezione in cui è presente un contenuto collegato all’argomento della pagina, ma a sé stante. Es. un modulo di articoli correlati alle informazioni principali, banner pubblicitario, elenco di link, approfondimenti e note.
• Tag nav: contiene informazioni necessarie a una corretta navigazione del sito. Racchiude il menu del sito web, un insieme di link per accedere ad altre sezioni del sito. Da non confondere con il tag <menu> (che può avere come figli sia il tag <li> che <manuitem>) che invece non ha una definizione chiara e che non viene quasi mai usato! Linguaggi e nuove tecnologie per il web.

Per poter utilizzare correttamente l’elemento <nav> dobbiamo ricordare i seguenti punti:

• Solo sezioni che sono costituite da grandi blocchi di navigazione sono appropriati per l’elemento <nav>.
• I link a pie’ di pagina e le breadcumb non devono essere inseriti in una sezione <nav>.

**Ad esempio, se un utente si trova sulla pagina "Prodotti > Abbigliamento > Camicie", i breadcrumb mostreranno i link "Home > Prodotti > Abbigliamento > Camicie". I breadcrumb sono utili perché aiutano gli utenti a capire dove si trovano all'interno del sito web e a navigare più facilmente tra le diverse sezioni.

• L’elemento <nav> non sostituisce gli elenchi o i link inseriti in elementi come gli <ul> o gli <ol> ma deve racchiuderli.
• Tag header: è un blocco di intestazione, tipicamente viene usato per descrivere la testata del sito web e anche quella di una sezione. Ci possono essere più elementi <heade> nello stesso documento.
• Tag hgroup: rappresenta l’intestazione di una sezione. Serve per raggruppare un insieme di elementi h1-h6, quando il titolo ha più livelli, come sottotitoli, titoli alternativi o slogan.
• Tag main: specifica il contenuto principale di una pagina, può essere presente UNA SOLA VOLTA nella pagina html, non può essere contenuto in <article>, <aside>, <footer>, <header> o <nav> tag footer: un blocco di chiusura interno alla pagina o di una sezione Linguaggi e nuove tecnologie per il web.
• Tag footer: è tipicamente un blocco di chiusura interno della pagina, identificabile come il piè di pagina, o di una sezione (dovrebbe contenere informazioni extra sul suo contenitore). Viene utilizzato per segnalare contenuti informativi a liv