Scarica Informatica Umanistica: Progettazione di Interfacce Web e Tecnologie Web - Prof. Daquino e più Appunti in PDF di Elementi di Informatica solo su Docsity!
Informatica umanistica
Appelli: 25 Maggio (chi fa al primo appello prende voti più alti), 22 Giugno Temi
- Progettazione e comunicazione digitale
- Sviluppo Web e Web Design N.B. Questi temi non coincidono con i temi di Umanistica Digitale/Digital Humanities , che è un campo di ricerca interdisciplinare, legato ad aspetti inerenti l'organizzazione, la rappresentazione e l'analisi delle informazioni in ambito digitale. Qui ci interessano invece prettamente aspetti di interfaccia grafica e promozione online. Linguaggi
- Css → definisce impostazioni di grafica
- Html→ permette di definire quali sono i blocchi del testo
- Javascript → linguaggio di programmazione utilizzato per gestire l'interazione utente sul web, per raggiungere interattività, bottoni che fanno raggiungere altre “cose” Gli strumenti (Editor apposta per aiutare a scrivere codice) Ai fini del corso non è richiesto l'utilizzo di alcun software o linguaggio proprietario o a pagamento. Durante le lezioni laboratoriali verrà richiesto agli studenti di utilizzare i seguenti strumenti:
- Sublime Text 2, portable version – (quello due è gratis, il 3 no) Rich text editor da scaricare gratuitamente (ATTENZIONE Sublime Text 3 è a pagamento e non è necessario)
Sublime Text 2 - Sublime Text →
Versione: 2.0.
o OS X (OS X 10.6 o versioni più recenti è richiesto) o Windows - disponibile anche in versione portatile
- Windows 64 bit - disponibile anche come versione portatile o Linux 32 bit o Linux 64 bit
- Github - Piattaforma (repository) per pubblicare codice open source. Consente di pubblicare pagine web gratuitamente. Permette di caricare file avendo una specificità: se si carica documenti html c’è la possibilità di caricare un sito gratuitamente, si può sviluppare tutto il sito sul nostro pc e poi caricarlo online
La scelta dell'editor e della piattaforma per la pubblicazione del sito web sono a discrezione dello studente. Gli strumenti sopra menzionati sono stati scelti per la loro facilità di utilizzo, ma non sono obbligatori. Materiali I materiali delle lezioni saranno disponibili nel repository Github del corso (questo), consultabili online e scaricabili in PDF ove possibile. Le registrazioni delle lezioni, verranno caricate automaticamente dopo ogni lezione in una cartella online. Per partecipare alle lezioni da remoto, utilizzare il seguente link a teams, su cui troverete di volta in volta il link alla registrazione. Le registrazioni vengono caricate automaticamente alla fine di ogni lezione in questa cartella. Le registrazioni vengono cancellate automaticamente dopo 6 mesi dalla fine del corso. Temi delle lezioni Intervalleremo lezioni frontali/teoria [F] e laboratoriali [L]. Durante il corso vedremo tutte le fasi di sviluppo di un sito web:
- project management, come organizzare il lavoro
- communication strategy development, quali aspetti considerare nel design di un sito web
- sviluppo web, creare e pubblicare una pagina web from zero to hero! Il calendario delle lezioni: 1a settimana
- [F] LUN 20.03.2023 (h17-19) - Presentazione del corso, AULA B (Accesso da Via Zamboni, 34)
- [F] MAR 21.03.2023 (h13-15) - Project management Plan, AULA D (Accesso da Via Zamboni, 34)
- [F] MER 22.03.2023 (h9-11) - Communication Strategy, AULA B (Accesso da Via Zamboni, 34) 2a settimana
- [F] LUN 27.03.2023 (h17-19) - Architettura di una pagina Web, AULA B (Accesso da Via Zamboni, 34)
- [L] MAR 28.03.2023 (h13-15) - HTML: blocchi logici, AULA D (Accesso da Via Zamboni, 34)
- [F] MER 29.03.2023 (h9-11) - HTML: blocchi logici, AULA B (Accesso da Via Zamboni, 34) 3a settimana
Idee:
- Fare un sito con una barra di ricerca dove è possibile inserire il nome del film/cartone/serie tv e trovare la colonna sonora e le musiche relative al contenuto cinematografico con testo sia in lingua originale che tradotto e link YouTube dove ascoltarlo. Ci sarà la possibilità di votare la colonna sonora su una valutazione da una a cinque stelle (?)
- Crea la tua band: iscrizione con login dove appare un menù a tendina con più opzioni tra cui: quale strumento suoni, tipo di musica, interessi, obiettivi, foto, esperienze passate
Potete scegliere qualsiasi tematica legata alla musica che vi consenta di sviluppare un sito web con caratteristiche innovative (e.g. fan page di una band, biografia di un artista, catalogo per l'ascolto di musica, sito tematico su un argomento storico-musicale). NOVITA': Non vengono considerate richieste di temi alternativi.
- i contenuti devono essere innovativi: non deve essere la copia di un sito esistente. Se siti simili esistono, il vostro sito deve fare qualcosa di diverso / di più / deve farlo meglio.
- i contenuti devono essere scritti in un linguaggio appropriato e adeguato al medium. Un esercizio per imparare a scrivere per il web. Perchè? Il lavoro deve essere il più possibile definito e compiuto (ovvero contenere informazioni veritiere, interessanti, complete e affidabili). Se il progetto è credibile, ben strutturato e ben sviluppato, può essere un elemento di valore da aggiungere al proprio CV. Se scegliete di realizzare un progetto inventato deve essere creativo e totalmente assurdo :) Caratteristiche Il progetto deve essere ben implementato in termini di grafica e interattività con l'utente.
- la grafica può essere semplice, anche molto minimale, ma deve essere efficace e il sito usabile (e.g. l'utente si deve saper orientare)
- l'organizzazione dei contenuti deve essere coerente (e.g. punti di riferimento uguali in ogni pagina)
- può contenere infografiche inerenti dati di interesse per la comunità di riferimento (target audience)
- può essere sviluppato completamente da zero o utilizzando template esistenti N.B. Alcune features del sito possono essere abbozzate (e.g. motori di ricerca, mail), ovvero il sito può includere un mockup dei servizi finali, anche se i servizi non sono attivi (poiché questi richiederebbero competenze che vanno aldilà delle competenze tecniche richieste dal corso). Allo stesso tempo si sconsiglia di pubblicare finti servizi che possono essere inavvertitamente visti da utenti casuali e "danneggiare" la vostra immagine.
Project Management e Communication Strategy La realizzazione di un sito web segue alcune buone pratiche per la progettazione (e.g. benchmarking, targeting utenza, studio del design d'interfaccia, definizione di obiettivi informativi e comunicativi). Le informazioni inerenti la progettazione e le strategie di comunicazione vanno organizzate utilizzando un template fornito e discusso a lezione. Output
- un documento (HTML) che (1) include le informazioni richieste dal template ed (2) è inserito nel sito web sotto specificato in una pagina HTML dedicata.
- scelta di almeno un obiettivo in termini di comunicazione web da realizzare. Potete scegliere tra: o almeno 20 like/retweet di un post sul vostro sito web su uno o più social a scelta o 50 visite al vostro sito web da utenti unici o pubblicazione di un blog post riguardo al vostro sito web o pubblicazione di una recensione sul sito web fatta da esterni o produzione grafica (e.g. brochure, poster, invito) Gli obiettivi non sono in alternativa (più ne raggiungete meglio è!). L'obiettivo raggiunto va descritto nella documentazione alla sezione 5 di Communication Strategy e va dimostrato! e.g. link a un post su post su Instagram che ha raggiunto i 20 like. Un sito web Realizzare un sito web. Output
- almeno 2 pagine HTML: (1) Home del sito web (2) la documentazione di project management e communication strategy sopra descritta. Tutte le ulteriori pagine utili a definire il progetto compiutamente (e.g. pagine di About , pagine dedicate a servizi specialistici, ecc.) sono benvenute.
- 1 file CSS, contenente le istruzioni per la grafica del sito web
- [OPZIONALE] 1 o più file Javascript, contenenti istruzioni per gli aspetti di interattività della pagina Sia la documentazione che il sito web possono essere presentati in lingua italiana o in lingua inglese. Altre lingue non sono ammesse purtroppo, visto che la qualità e lo stile dei contenuti sono oggetto di esame. Prova finale Modalità di svolgimento dell'esame Il sito web, corredato di documentazione deve essere online entro le ore 12. (mezzogiorno) del giorno precedente alla data di appello selezionata e la URL del sito
- Travel Guru viaggi il sito personale di una guida turistica
- ginger ale il sito personale di una aspirante influencer Appelli d'esame Le date verranno decise assieme durante lo svolgimento del corso e verranno pubblicate su AlmaEsami. Sono previsti 6 appelli tra maggio 2023 e giugno 2024. Lezione 21/03/ Elementi di progettazione web Project Management Plan (PMP) Una pipeline di lavoro 4 fasi fondamentali → prima si pianifica, poi si pensa alla grafica, successivamente si tocca il codice per poi pubblicare e valutare il lavoro Progettare un sito web prevede una serie di operazioni che possono essere standardizzate e sequenzializzate. Queste operazioni includono buone pratiche per garantire la qualità dei risultati, standard per lo sviluppo dei prodotti finali e metodi per la valutazione dei risultati. La scelta dell’idea è la primissima cosa
Quando si progetta qualcosa si sta risolvendo un problema, ci sono delle domande da porsi per circoscrivere il problema 3 tipi di idee:
- Idee ovvie ma difficili da implementare
- Problemi facili ma più abusati/ricercati
- Idee meno ovvie ma che sono di difficile implementazione Quali domande porsi? Qual è l’obiettivo del mio progetto? Sensibilizzare, offrire servizi, fornire informazioni circostanziali (e.g. eventi), etc. In quale genere o macro-categoria ricade? Letteratura, arte, cinema, politica, educazione, etc. Che tipologia di sito serve? Sito personale, rivista, sito divulgativo*, sito per specialisti, etc. Cosa esiste già di simile? Siti sugli stessi argomenti, siti che offrono gli stessi servizi ma per un’altra tipologia di utente, etc. Quali materiali sono efficaci e posso riusare? Immagini, testi, tecnologie, scelte grafiche Cosa manca nelle scelte esistenti? Servizi gratuiti, intuitivi, più/meno specialistici Pianificazione
- Analisi dello scenario di mercato Coscienza delle potenzialità offerte dal web e dello stato dell’arte delle tecnologie. Studio sul web dei competitor di chi ha già fatto qualcosa che vogliamo fare/abbiamo fatto noi.
- Analisi di settore e studio della presenza sul web Bisogna cercare il gap, il problema. Analisi delle soluzioni esistenti nel macro-ambito di riferimento (e.g. siti per l’educazione, per l’e-commerce). Siti come Amazon EBay.. guardano la performance: non valuteremo gli aspetti tecnologici come ad esempio la
- tematici: completezza delle informazioni fornite, aspetti comunicativi
- servizi: efficienza/completezza dei servizi, sono a pagamento?
- usabilità del sito: facile, intuitivo, coerente, approfondito, etc. Scegli un’unità di misura con cui valutare i parametri, e.g. :
- Likert scale: e.g. 1-5 (1 = per nulla soddisfacente; 5 = molto soddisfacente)
- Threshold: scegli un minimo comune denominatore e valuta se i competitor superano questa soglia o hanno questo requisito ESEMPIO: siti di ricette - REQUISITO: fornire immagini delle fasi di preparazione del piatto
- Analisi del posizionamento competitivo Definizione del gap da colmare (servizi inefficienti, a pagamento, riduttivi). Se esiste qualcosa di identico, o se esiste già un servizio più efficiente / veloce / completo, gli utenti utilizzeranno quello. Si può riusare ciò che esiste MA - Contenuti intellettuali vanno citati (testi, template grafici) - Vanno controllate le licenze per il riuso di immagini.
- Definizione degli obiettivi strategici ed operativi del sito Definizione degli obiettivi alla luce dei precedenti Content design
- Definizione degli obiettivi informativi
- Scelta di stile di comunicazione
- Redazione dei contenuti del sito
- Gestione dell’interazione tra contenuti testuali e multimediali I contenuti devono essere funzionali e usabili - le forme con cui vengono divulgati e la posizione sono fondamentali La scelta dei target utente e il device (mobile, desktop, tablet) influenzano la tipologia di contenuti da fornire loro (testi, immagini, video), il livello di approfondimento (descrizioni, infografiche) e le tecniche di disseminazione (e.g. progressive disclosure). Il tema, gli obiettivi e il target utente determinano lo stile comunicativo (e.g. sinteticità, registro) Quali domande porsi? Qual è il messaggio? Approfondimento di un tema specialistico, raccolta esaustiva di informazioni su un tema, offerta di statistiche, etc. Cosa voglio suscitare nel fruitore del mio sito? Sensibilizzazione, disseminazione della conoscenza, informazioni pragmatiche, far compiere azioni (e.g. comprare). Quanto tempo ha a disposizione il mio utente? Sito ricreativo, informazioni su organizzazione eventi, istruzioni pragmatiche, etc. Quali forme comunicative sono adeguate al target? Immagini, infografiche, descrizioni, articoli, etc
Information design
- Progettazione del modello di navigazione
- Definizione delle regole di labeling
- Definizione dei blocchi logici. I contenuti vanno organizzati:
- coerentemente (no ridondanza, no out-of-scope, labeling coerente)
- sinteticamente (no ripetizioni, no percorsi lunghi, informazioni importanti in evidenza)
- strutturalmente (gerarchia dei contenuti, disposizione mise en page, percorsi dell’utente) Architetture di una pagina web Organizzazione ad albero di un sito web La Home del sito è sempre la radice dell’albero. Siti complessi (e.g. cataloghi di musei, biblioteche) possono avere alberi che vanno molto in profondità. Nuovi trend in Web design sfruttano lo scrolling della pagina (che è potenzialmente infinita) per evitare click ridondanti (e.g. se una pagina secondaria è molto corta, quelle informazioni possono essere accorpate con altre di natura simile e distinte all’interno della stessa pagina)
Il wireframe (organizzazione logica dei blocchi informativi) cambia coerentemente con gli obiettivi informativi della pagina. Gli elementi strutturali della pagina (e.g. testata, menu, piede di pagina) rimangono invariati per non disorientare l’utente ogni volta che cambia pagina all’interno dello stesso sito. Quali domande porsi? Quali elementi vanno inseriti nella pagina? Menu principale, secondario, piede di pagina, briciole di pane, etc. Quali informazioni vanno inserite in determinati punti della pagina? Menu principale in alto, logo in alto a sinistra, contatti a piè di pagina, azione principale (e.g. compra, cerca) a centro pagina Quale organizzazione dei contenuti si presta alla tipologia di contenuti? Icone per gallerie immagini, infografiche di accompagnamento ad articoli, etc. Quali forme comunicative sono adeguate al target? Voci di menu sintetiche, utilizzo di icone, navigazione a scomparsa (se non fondamentale), etc. Web design
- Progettazione della Digital Identity (es. logo, aspetti coerenti caratterizzanti, font, palette colori..)
- Ideazione e dei layout grafici
- Creazione del template del sito Se il sito rappresenta una persona, un evento, un’organizzazione, il sito è un veicolo dell’identità del soggetto. L’identità si ottiene con scelte grafiche (palette colori, font, loghi) e con il mantenimento coerente delle scelte grafiche. L’utente cerca punti di ancoraggio visivi nella navigazione e si aspetta di trovare la stessa struttura in pagine simili per contenuto o di stesso livello (nell’albero), definite in un template.
Normalmente si guarda in alto a sinistra, ci sono però degli espedienti che possono essere usati nella creazione della pagina che permettono di spostare lo sguardo- attenzione dell’utente da un un punto A a un punto B.
Aspetti da valutare nella creazione del sito Sviluppo
- Definizione dei requisiti funzionali
- Progettazione dei requisiti non funzionali
- Scelta delle tecnologie I requisiti funzionali riguardano il comportamento del sito che deve assolvere a certi compiti (e.g. fornire servizi di prestito bibliotecario). Includono requisiti utente (i servizi richiesti) e requisiti di sistema (come deve rispondere) Se il sito offre dei servizi, questi vanno progettati sia negli aspetti implementativi, sia in termini non funzionali, come policies (e.g. chi può contribuire a Wikipedia? Come gestire i contesi?), aspetti etici, usabilità. Esistono tecnologie standard per lo sviluppo web e risorse create dalla comunità/aziende per facilitare lo sviluppo web (e.g. template, librerie)
Requisiti funzionali ESEMPIO: Calcola il mio codice fiscale - Text area per l’inserimento dei dati - Validazione dei dati inseriti dall’utente (e.g. data di nascita preso da una lista di valori) - Alert in caso di errore e reinserimento - Calcolo del codice fiscale Tecnologie web
- Linguaggi di markup: HTML → lavora sugli elementi logici della pagina
- Linguaggi per la grafica web: CSS → definisce aspetti grafici
- Linguaggi di programmazione: Javascript, Python, Java, PHP, etc. → permette di dare un “senso” ai bottoni I linguaggi di markup (linguaggio di annotazione) non sono linguaggi di programmazione, permettono di annotare un testo. HTML è il linguaggio standard per il web. Consente ad una macchina (il browser, e.g. mozilla firefox, Google Chrome, Opera, Safari) di visualizzare i contenuti di una pagina web in strutture logiche (titoli, sezioni, paragrafi, immagini). I linguaggi per la grafica web permettono di applicare stili agli elementi delle pagine web. I linguaggi di programmazione forniscono istruzioni alle macchine per compiere azioni (non solo web) e.g., calcoli, interattività dei contenuti. Strumenti a supporto dello sviluppo Creati da comunità di sviluppatori, consentono di facilitare/standardizzare alcune fasi dello sviluppo web, ad esempio:
- Librerie per la grafica e l’interazione utente (e.g. Bootstrap, ci sono dei pezzetti di codice già digeriti che permettono espedienti grafici che normalmente richiedono javascript)
- Widget per l’inserimento di link a social
- Analytics per il conteggio dei visitatori del sito (e.g. Google analytics: consente di afre copia e incolla di pezzi di codici che permettono di misurare i visitatori, fai screen per metterlo nella documentazione)
Web design trends https://medium.com/@jowitaemberton/7-future-web-design-trends- fba93eba Web design, brand identity projects https://www.behance.net/ PROJECT MANAGEMENT PLAN Sul sito del corso ci sono tanti esempi nella casella Issues
Documentazione
Contenuti
La documentazione deve contenere informazioni precise, puntuali e sintetiche. In tutto, il documento deve includere non più di 1200 parole (+100 parole max. per l’abstract). Non deve contenere ripetizioni!
Forma
Il documento deve essere pubblico e incluso nel sito del progetto (pagina HTML) Non si tratta di uno slogan, ma di una sintetica descrizione di ciò che il sito tratta
Obiettivi del sito, target scelto (ce ne può essere più di uno), competitor (almeno due con pro e contro)
