Progettazione User-Centered per il Web Design, Appunti di Programmazione e Tecnologie Web

Scarica Progettazione User-Centered per il Web Design e più Appunti in PDF di Programmazione e Tecnologie Web solo su Docsity! WEB DESIGN Fase di Analisi: primo momento del ciclo di vita di un progetto in cui l’obiettivo è raccogliere più info possibili sul progetto che mi è stato chiesto di realizzare. Dovrò conoscere gli obiettivi e le necessità della committenza, i contenuti da pubblicare, gli aspetti tecnologici da considerare, il contesto di riferimento ovvero budget, normative, tempistiche ecc. i destinatari, chi sono i nostri utenti. Dai requisiti del progetto si passera poi alla progettazione vera e propria. CONOSCERE GLI UTENTI FINALI Come conoscere gli utenti finali? Ci sono più strade. Da molti anni si usa sull’user center design e sulle metodologie che aiutano a comprendere chi siano gli utenti e quali siano le azioni e gli obiettivi che essi hanno e come il nostro sito possa soddisfare tali bisogni. Es. interviste di stakeholder colloqui o interviste che vengono effettuate con coloro che hanno voce in capitolo sul progetto tipo il proprietario dell’azienda che ci ha commissionato il sito o i suoi referenti. Potrebbe anche essere il direttore di una pubblica amministrazione e persone che lavorano a stretto contatto con lui. Tutto ciò serve per definire un profilo o più profili di modelli di utente il più possibile affidabile. Si può anche capire definire analizzando altri siti competitors che sono simili e si sono già posti il problema. Organizzazione di focus Group (sessione di lavoro in cui vengono riuniti un gruppo di persone rappresentativi degli utenti finali, circa 8-10 persone. In più è presente un moderatore che cerca di costruire una conversazione per conoscere gli obiettivi e le necessità di questi utenti rappresentativi) o interviste agli utenti finali. Osservazione, attività che consiste nel prendere degli utenti rappresentativi e osservare i loro atteggiamenti mentre navigano il sito. Metodi di misurazione e di usabilità, simile all0osservazione ma con dati più specifici. Coinvolgimento partecipativo, gli utenti finali sono coinvolti nel processo di progettazione, affiancano analisti e designer per trovare delle soluzioni su misura. L’utente però non è un designer e a volte non sa nemmeno lui cosa vuole, inoltre non ha la visione completa del progetto dal pdv tecnologico ad esempio, non sa quanti contenuti a disposizione ha l’utente (i contenuti e le risorse costano). ANALISI DEGLI UTENTI Metodi senza coinvolgimento utenti: analisi log file, query di ricerca, dei clickstream, analisi comparativa … Metodi con coinvolgimento di utenti: indagini sul campo, focus Group, interviste e card sorting Vedi slide su analisi comparativa. Analisi comparativa serve per trovare un minimo comun denominatore con i competitor ma anche le occasioni per differenziarsi da questi per crearsi anche un’identità in opposizione con questi siti. Es. Modello AGID siti delle pubbliche amministrazioni si stanno riorganizzando attorno a un modello deciso a livello ministeriale PROGETTAZIONE USER-CENTERED La progettazione basata sull’utente è una filosofia che cerca di incorporare l’utente nel prodotto sin dalle battute iniziali. Prodotto è costruito sull’utente e non viceversa. Nel caso dei siti web conoscere l’utente non è una questione socio demografica. Dal pdv del design è più utile conoscere quali sono le abitudini, l’alfabetizzazione informatica, i comportamenti della persona per quanto riguarda la ricerca. Cosa fa l’utente, cosa cerca, come si relaziona all’info. Gli utenti non sono tutti uguali, bisogna capire quali sono gli utenti primari, secondari e occasionaliquelli che capitano sul sito casualmente. Ci sono poi utenti esperti, novizi (quando gli utenti visitano il sito per le prime volte, costruzione di un modello mentale di un determinato sito), e gli utenti “perpetuamente incompleti” ovvero coloro che si posizionano a metà tra il non sapere tutto e il sapere tutto di un determinato sito. Compito dell’analista o progettista è quello di costruire un profilo dell’utente finale. Rappresentazione attraverso il Metodo dei personaggi tecnica che serve per stabilire un profilo ipotetico di un utente. Di questo profilo si dà qualche caratteristica socio demografica (es. ragazza, studentessa, con una determinata età, …), si può mettere anche una foto dell’utente e poi si descrivono le funzionalità/obiettivi che vuole portare a termine. Descrizione molto specifica. Si fa dopo un’analisi degli utenti ed aver osservato statistiche. PERSONE UTILITA’ Ricerche e metodi permettono di avere ben chiaro quello che gli utenti interessa primariamente rispetto a quello che potrebbe essere loro utile ma che in realtà non è emerso dalla fase di analisi. Danno complessità gli ipotetici comportamenti degli utenti. L’utente deve fare più azioni sul sito. Un personaggio ci permettere di mettere a sistema i vari contenuti/requisiti e quindi di tradurli in storie di utilizzo del sito che sono plausibili e danno una visione più completa dell’utente. Grazie alla figura del personaggio chi progetta può fin da subito delimitare l’ambito del progetto. Come la risposta al mio dubbio, cambiamento, innovazione sarebbe utile agli obiettivi dei miei utenti finali rappresentati dai personaggi. Un sito può avere più personaggi e utenti modello. I personaggi aiutano anche per quanto riguarda il fatto di poter cadere in errori come il design per i casi limite se non si ha presente un utente primario allora non sono in grado di capire se quello che sto facendo interessa i miei utenti primario o sto accontentando utenti che capitano solo per caso sul sito. Altra categoria di errore in cui si può incorrere è quello del design auto referenziale per compiacere se stessi o il proprio committente, senza avere a cuore l’utente. Altra problematica è il design indifferenziato se tutti sono uguali a tutti allora non so più a chi rivolgermi. Altra funzione dei personaggi è quella di essere un documento, è quindi possono essere condivisi con il resto del team, programmatori, grafici, account, cliente finale stesso, … possiamo così essere in accordo sul nostro destinatario. Rischi dei personaggi è che rischiano di essere troppo statici, ovvero delle figure/ritratti. In realtà abbiamo detto che gli utenti sono figure che hanno una relazione dinamica con i siti web che vanno a visitare. METODO DEGLI SCENARI Il metodo dei personaggi può essere arricchito mediante la creazione di scenari, cioè descrizioni narrative di come l’utente modello può interagire con il sistema per raggiungere i propri obiettivi. User story storie dell’utente, descrizione narrativa di quello che un utente può fare o meno all’interno di un sito. La presenza della storia aiuta a far convergere i requisiti paratici e funzionali verso un unico obiettivo. Uno scenario potrebbe essere X vuole registrarsi al sito per ottenere degli sconti. Il progettista una questa storia per ricavare i requisiti grafici, funzionali e contenutistici che permettano all’utente di raggiungere il suo obiettivo in modo semplice e fluido. Un buon scenario consente di distingue il piano logico (sequenza di azioni che devono essere effettuate) da un piano realizzativo (piano grafico e tecnico). Gli scenari sono indipendenti dalla tecnologia e dall’interfaccia utente dal pdv grafico che però potrebbe cambiare nel tempo. Esame degli scenari consente al team di tradurre gli obiettivi dell’utente in requisiti: Contenutistici: quali info devono essere manipolate mediate dal sistema. Funzionali: quali operazioni dovranno essere possibili. Contestuali: relazione tra i contenuti e le relazioni stesse. GOOGLE ANALYTICS Dentro la sessione head si può inserire il tag <title>lezione 1</title> ciò consente al browser di identificare la pagina. Tag <meta charset=”UTF-8” /> è un tag che non ha un comando di chiusura. C’è un /> alla fine questo si chiama sintassi abbreviata. È un attributo quindi un comando aggiuntivo inserito nel tag di apertura. Charset è chiamato attributo e può variare. Meta è il tag. Il significato completo è che tutti i simboli alfanumerici che andrò a inserire nella parte body della mia pagina vanno interpretati come il set di caratteri denominati UTF-8. Un set di caratteri va interpretato come una tabella con due colonne da una parte i simboli alfanumerici tipo lettere, numeri, valute economiche di dollari sterline, i simboli matematici e della percentuale, simboli chimici, lettere accentate, ecc. nell’atra colonna c’è la sequenza di bit che aiutano a memorizzare sulla memoria che si sta usando (hardisck del computer); questa corrispondenza è una convenzione, non c’è un motivo per cui la lettera A corrisponda a 8 numeri 0 consecutivi potrebbero essere 8 numeri 1 consecutivi (parliamo in termini binari di bit). Per far sì che le informazioni passino da un dispositivo all’altro noi dobbiamo dichiarare la tabella di conversione che abbiamo deciso di usare. Con la tabella di conversione UTF 8 possiamo scrivere tutti i simboli possibili e in più si ottiene l’interoperabilità cioè, il mio sito può essere aperto da un ragazzo che vive a mosca con un set di caratteri in cirillico di vedere il contenuto in modo corretto. Importante andare a capo ed eventualmente spostarsi per rendere il codice il più possibile leggibile. C’è la possibilità di aggiungere dei commenti per spiegare cosa sta succedendo per inserirli <!--quello dentro è un commento -->. In pratica punto esclamativo due volte meno meno commento e due meno meno chiuso. Il commento serve per prendere appunti es. l’immagine e temporanea chiedere poi quella definitiva. HTML: titoli e paragrafi Il primo comando è quello che ci permette di inserire un titolo nella pagina web (nella sezione body). Html serve per descrivere semantica e struttura pagine. Html non serve per attribuire caratteristiche grafiche visuali o altro tipo ai testi e all’informazioni. Per questa finalità esiste un linguaggio specifico e separato chiamato css. Es. css definisce poi la parte tipo della scritta in grassetto il colore ecc. i browser intervengono sul testo html. [Con i fogli di stile si potrà dire a tutti i browser di visualizzare un comando in un certo modo anche per quanto riguarda le proprietà grafiche] Il comando <h1> (che ha come chiusura </h1>) permette di dire al browser che quello all’interno del comando è un titolo. Più precisamente il titolo più alto di livello 1 che dà il nome a tutto il contenuto. (in totale ci sono 6 livelli di titoli). Questi comandi sono simili ma cambiano per il numero es. <h2> ecc. si inizia sempre da un titolo di livello 1, non si può iniziare dal 2, ci possono essere però più livelli 2 (sottosezioni principali), all’interno delle sotto sezioni potrei avere bisogno di ulteriori titoli. Ricordati di SALVAREE. Le sezioni di livello 3 poi può essere seguita dal livello 4. Rimangono poi altri due livelli il 5 e 6. Di solito si arriva a un h3-4 è difficile arrivare al 5-6. Su notepad++ se teniamo il mouse puntato su una riga e clicchiamo control e D la riga viene duplicata. I titoli sono l’OUTLINE del documento, ovvero scaletta del documento per quanto riguarda titoli e sottotitoli. Comando per inserire un paragrafo nel testo <p> </p>, consiglio scrivere il tag prima di scrivere il paragrafo per non dimenticarlo e ricorda di chiuderlo. In un testo possiamo avere più paragrafi. HTML: come inserire le immagini Prima cosa devi trovare il posto per inserirla. Una volta trovato, possiamo inserire in una pagina web diverse tipologie di immagini. I formati più frequenti e che vengono visionati da tutte le piattaforme sono: png, jpeg e svg. Jpeg usto solitamente per i panorami, fotografie, contenuti fotografici in generale. Jpg è un formato che comprime e ottimizza spazio e dimensioni occupate da un’immagine quando il contento è occupato da una fotografia, ha un parametro che va da 0 a 100, cento è il massimo della qualità e il file pesa di più, solitamente si usa una qualità a 80. Questo parametro si può controllare e modificare all’occorrenza. Png formato che hanno contenuti grafici come icone, loghi, … immagini che non richiedono gamme cromatiche con sfumature o più gradazioni di colori. Con png possiamo avere immagini semi trasparenti cioè lo sfondo del logo una volta inserito su una pagina dell’altro colore, si può avere un logo con il colore della pagina. Nel formato Svg ci consente di avere immagini vettoriali mentre gli altri due formati abbiamo immagine raster (png e jpeg) il contenuto dell’immagine è descritto mediante una serie di info binarie (byte di info allocate per ogni singolo pixel e cioè per ogni singolo quadratino che compone l’immagine). Lo si vede nelle proprietà dell’immagine, dettagli, pixel e ogni pixel c’è una sequenza di byte che descrivono il colore fondamentalmente. Per ingrandire l’immagine l’effetto che si rischia di ottenere è quello di un’immagine sbiadita e stiracchiata. Per far fronte a questa necessità esistono dei formati chiamati vettoriali. Un’ immagine vettoriale è costituita da dei comandi e formule matematiche che permettono di avere il risultato desiderato (svg). Usare i formati con criterio. Il prof consiglia di salvare l’immagine e rinominarla con nomi semplici. Per inserire immagini usare il tag <img e per chiudere />. È un tag con sintassi abbreviata. All’interno il file viene dichiarato dall’attributo src=”” all’interno va inserito il percorso è la sequenza di passi ovvero cartelle da percorrere per raggiungere il file che contiene l’immagine partendo dalla posizione del file corrente. Es. voglio importare un file (nome del file in questione html5.png) dalla cartella immagini; per prima cosa bisogna chiedere al browser es. <img src=”immagini/html5.png”/> È molto importante mettere l’estensione del file (in questo caso .png). può capitare di non vedere l’estensione del file di tipi conosciuto, a questo punto bisogna fare visualizza, opzioni e cerca doveri trovare scorrendo l’opzione nascondi le estensioni per i tipi di file conosciuti, bisogna disattivarlo per vedere. Src è un attributo che si può usare solo sulle immagini. Un altro attributo è alt  nel valore di questo attributo si può scrivere un testo alternativo che descrive il contenuto, la funzione dell’immagine. Nell’esempio di prima si potrebbe scrivere alt=”logo di html5”/>, questo testo viene visualizzato dal browser solo quando l’immagine non può o non vuole essere caricata. Viene usato soprattutto da alcuni programmi che va in contro a utenti non vedenti. Essi possono ascoltare con un programma la pagina web, alt quindi è un testo alternativo usato anche dagli SCREEN READERS. Se ho una fotografia descrivo in breve la foto. Vedi lezione 10 minuto 34. HTML: inserire video parte 1 Vai sul sito W3shools.com, poi references, html tag refernece, si trova l’elenco di tutti i tag esistenti. In questo caso ci serve il tag <video> per testare il comando si possono scaricare dei video Sample Videos. Comando di apertura <video> chiusura >/video>. All’interno del tag troviamo il tag <source con attributo src=”” e type=”” />. Quindi: <video controls> viene aggiunto controls per attivare tasti come play o pausa. <source src=”” type=”MIME-TYPE”/> ; per inserire il mime type in questo caso può essere video/mp4, vedi ultimi due minuti. <source src=”video/video.mp4” type=”video/mp4 /> <source src=”movie.ogg” type=”video/ogg”> </video> </body> </html> HTML: parte 2 Se scrivi es. <video controls muted (serve per far iniziare il video con l’audio muto) loop (fa sì che il video una volta terminato ricominci) poster (permette di specificare un valore tramite un percorso per avere un’immagine che funge da poster, prima che il video cominci). Si chiamano attributi BOOLEANI, ovvero seguono una logica vero/falso, se non ci sono il browser non sa cosa fare e non li considera. Ragionamento sul formato dei video: all’interno del tag video ci possono essere più tag src (source), ogni tag src specifica una destinazione ad una variante del video che si vuole mostrare. Ogni variante ha un’esenzione e un type differente. Ogg è un formato video open source. Il motivo di questi tag è che non siamo sicuri che i browser riescano a visualizzare tutti i medesimi tipi di file. Se voglio condividere un video da un altro sito tipo You Tube, schiaccio tasto condividi e poi incorpora. Copia e incolla, do solito c’è il comando <il frame la possiamo intendere come una finestra all’interno di una pagina che permette di visualizzare un altro indirizzo web. Non tutti gli indirizzi web sono utilizzabili. Due attributi width=“”  se cambio il valore dentro le virgolette dà un’altra larghezza per quanto riguarda i pixel, e height=””  dà un'altra altezza. Il valore è sempre un numero intero. Un altro attributo è frameborder=””  se vogliamo che la cornice abbia dei bordi. 8 di solito è brutto esteticamente ma al massimo si mette “0”. Esiste il tag <audio controls> <source src=”” type=”” /> </audio> HTML: le liste <h2>Le liste</h2> Ci sono 3 tipi di liste in html5 Liste non ordinate, Ordinate e liste di Definizioni. Es. elenco della spesa o di cose che servono per una ricetta. Vengono messi (gli elementi) in ordine con dei punti. Liste non ordine si usano quando vogliamo elencare degli elementi, ordine non è importante. Il significato non cambia in qualsiasi modo noi leggiamo la lista. Es. lista ingredienti ricetta. Tag <ul> </ul> (ul sta per unordered list). All’interno va inserito un tag <li> </li> (list item); per ogni elemento. Lista ordinata es. classifica di arrivo di una corsa, sapere il primo è importante. Dare delle info riguardo il montaggio di qualcosa. Vengono messi in ordine con i numeri 1, 2, 3, … <tr> <th> <th> <th> </tr> <tr> <td> </tr> Secondo caso, crei una tabella dove le celle di intestazione non siano nella riga orizzontale in alto ma nella colonna verticale: <table> <tr> <th> <td> </tr> <h3>Ultimo esempio più complesso, tabella con intestazione sia di riga che di colonna </h3>. Ricorda per le tabelle di chiudere sempre i tag. <tr> <th>Giorno</th> <th>Milano</th> <th>Torino</th> <th>Genova</th> </tr> <tr> <th>sabato</th> <td>Variabile</td> <td>Sereno</td> Tabelle seconda parte La tabella può avere bisogno di una didascalia che ne spieghi il significato. La didascalia va inserita con il tag <caption> </caption>. Questo tag va inserito subito dopo il tag table. Nell’esempio di prima del meteo <tr> <caption>Previsioni del tempo</caption> </tr>. Altri comandi sono gli attributi che permettono di estendere la superficie di una cella su più colonne o righe. Es. voglio dire che a Genova pioverà tutto il week end. <td rowspan=”3”>Pioggia</td> la cella si estende per tre righe. Le altre 2 celle quindi vanno cancellate, perché la cella è alta 3 righe e le altre due non ci stanno, si cancellano per evitare disallineamenti. Un analogo comando (che si sviluppa orizzontalmente) è l’attributo colspan=””. Es <td colspan=”2” >Sereno</td>. Problematica legata all’accessibilità: Accessibilità è una serie di buone pratiche che permette di rendere la pagina fruibile a chiunque. Anche a persone con difficoltà di tipo percettivo, non vedenti, udenti, o persone con problemi motori, magri hanno problemi di coordinazione o di tipo cognitivo. In Italia i siti web delle pubbliche amministrazione devono seguire alcuni requisiti. Le tabelle sono facili da comprendere se vengono visualizzate. Persone con difficoltà usano programmi appositi per poter leggere le pagine, si chiamano screen reader. Quando la tabella viene letta da uno screen reader viene letta da sx verso dx e dall’alto verso il basso. Gli screen reader necessitano alcuni comandi aggiuntivi che permettono al browser e gli screen reader stessi di comprendere da soli il valore semantico delle celle, per poter leggere con senso le tabelle. In questo caso sono utili due attributi: uno è l’attributo id=”” es. <th id=””></th> <th id=””></th> Nelle single celle invece va usato headers=”” es.<td headers=””> Dal pdv grafico non cambia ma per i reader sì. Vedi video per essere sicura. Altri tag utili per suddividere la tabella in aree sono: <h3>Tabella strutturata</h3> <table> Tag <thead> va a marcare l’intestazione <tr> <th>studente</th> <th>Voto</th> </tr> </thead> <tbody> contiene tutti i dati della tabella. <tr> <td>Mario Rossi</td> <td>26</td> </tr> </tbody> <tfoot> piede della tavella dove si vanno eventualmente a inserire dei dati per dare info aggiuntive rispetto alla parte centrale della tabella</tfoot> </table>. Questi tag non hanno effetti visuali ma i browser ne tengono conto dal pdv della struttura. Con i fogli di stile è possibile dare uno sfondo diverso per poter distinguere i dati, le intestazioni e il piede della tabella. HTML: i form (parte prima) Form parti di una pagina web che permettono all’utente di inserire dei dati e ottenere dei risultai in cambio. Es. campi di ricerca all’interno di un sito, registrazione a una piattaforma o elemini che permettono di mettere il proprio indirizzo quando si fa un acquisto on line. Premessa: creiamo dei form e li visualizziamo ma non vediamo la parte che permette di salvare e spedire questi dati a qualcuno questo perché avremmo bisogno di lavorare su un vero e proprio server web ovvero elaboratore remoto, programma, su cui sono ospitate le pagine web che costituiscono un sito internet. Questo calcolatore è dotato di una serie di programmi tra cui server web. I più famosi server web sono Apache, Nginx, IIS. Sono programmi che ricevono le richieste degli utenti attraverso i browser e sulla base di quello che viene richiesto, forniscono delle risposte. Quando creiamo un form, es. quando digitiamo delle parole all’interno di un motore di ricerca, le parole che digitiamo vengono spedite al serve in insieme alla richiesta dei risultati. Queste operazioni sono gestite dal server web e hanno la necessita di piccoli o grandi programmi scritti attraverso linguaggi di vera e propria programmazione (non in html) e si preoccupano di acquisire la richiesta dell’utente e di elaborare una risposta per restituire i risultati dell’elaborazione all’utente finale. Questi programmi si scrivono con linguaggi tipo PHP o JSP… Noi costruiamo l’interfaccia utente, non ci preoccupiamo dei processi del sistema. Primo tag dei form <form> </form>. Può avere diversi attributi come quelli generici tipo id e title e class. Ma gli attributi che ci interessano sono method=”” e action=””, questi attributi servono a specificare come e dove i dati dell’utente che va a compilare devono essere spediti. Method può avere diversi valori ma sono valori fissi e non possiamo scriverci dentro quello che vogliamo perché sono parole chiave che hanno a che fare con le modalità di trasmissione dei dati sul protocollo http. I valori di method accettati sono “get” e “post”. L’attributo action specifica un url (nome di una pagina web) che è quella a cui saranno rimandati gli utenti una volta che il form è stato inviato. Questo indirizzo è quello che serve al server web per elaborare la richiesta. Indirizzo, calcolo, ricerca, invio di una mail, salvataggio di dati e così via. Per i nostri scopi pensiamo di rimandare gli utenti a una pagina che si può chiamare es. action=”salvataggio.html”>. si crea un nuovo file e lo salvi nella cartella per non avere problemi con i percorsi e lo chiamiamo salvataggio.html for=”sesso”>Maschile</label>. Stessa roba per il femminile. Ricorda che l’attributo id deve essere diverso, qui potrebbe essere id=”sesso_m” invece trattino basso f per il femminile. Attributo interessante è checked (rende uno dei campi già pre-selezionato). Tanti singoli campi che danno l’impressione di essere raggruppati ma così non è. Es. <p>A quali corsi di laurea sei interessato?</p> <ul> <li> <input type=”checkbox” />  in questo modo appare un quadrato per poter selezionare la scelta. Potremmo mettere <input type=”checkbox” name=”cdl_comunicazione” id=”cdl_comunicazione” value=”comunicazione” /> <label for=”cdl_comunicazione””>scienze della comunicazione</label> </li> <li> <input type=”checkbox” name=”cdl_filosofia” id=”cdl_filosofia” value=”filosofia” /> <label for=””>filosofia</label></li> <li> <input type=”checkbox” name=”cdl_storia” id=”cdl_storia” value=”storia” /> <label for=””>storia</li> </ul> Campo che ci serve per chiedere all’utente di scegliere qualcosa all’interno di una lista di opzioni/valori. Es. <p>Indica la tua provincia di residenza</p>. in questo caso si usa il tag <select> permetterà al suo interno di indicare una lista di opzioni, ciascuna opzione è inserita nella lista <option> </option>. Si possono aggiungere degli attributi al tag option. <label for”provincia”>Indica la tua provincia</label> <select> name=”provincia” id”provincia” <option value=”” >Seleziona</option> <option value=”to” >Torino</option> <option value=”cn”>Cuneo</option> <option value=”vc” >Vercelli</option> <option value=”no” >Novara</option> </select> Si crea una specie di finestra con la freccetta per aprirla e selezionare. Vedi ultimi minuti del video per vedere meglio le opzioni. CSS: concetti di base e selettori CSS Css= cascading style sheets, letteralmente fogli di stile a casata, sono una struttura a livelli dove si possono specificare delle regole che si sovrappongono tra di loro e si sommano fra loro per dare un risultato finale che è quello che l’utente vede alla fine. I fogli di stile sono un linguaggio che definiscono le proprietà stilistiche nella pagina, ha una sintassi diversa da html. Si occupano della parte grafica e non del contenuto o della struttura semantica (html se ne occupa). L’obiettivo è avere una piena separazione tra il piano semantico /strutturale (hmtl) e grafico/presentazione (css). Come si creano i fogli di stile: Blocco note, crea un nuovo file e slava il file di testo con estensione css. Lui l’ha chiamata stile.css I commenti css si scrivono /* CSS cascata */. Il browser ha bisogno di sapere che i due file (html e stile.css) per cui bisogna aggiungere in html un comando che aggiunga questo collegamento. Nella parte head mettiamo il tag <link /> e all’interno ci sono 3 attributi rel=”stylesheet” type=”text/css” href=””. I primi due hanno valore fisso e si scrivono sempre così. Invece href=”può contenere il percorso che separa la pagina corrente dal foglio di stile in questo caso mettiamo stile/stile.css”  questo dice al browser che deve tenere in considerazione il file stile e che deve stabilire una relazione di tipo foglio di stile. Comando che serve a modificare il colore di un testo: il primo elemento è il selettore, dopo metti due parentesi graffe (schiaccia il tasto alt gr, shift, e parentesi quadra). Tra le graffe si inseriscono degli elenchi fatti di nomi di {proprietà: valore; proprietà: valore1; …}. Tutto insieme questi elementi formano una regola. Ricorda di chiudere SEMPRE la parentesi graffa e controlla che il percorso di href sia corretto, devi mettere il foglio che crei in una cartella es. il foglio stile.css lo metti nella cartella stile. Il selettore è fondamentale e ne vedremo alcune tipologie. Il selettore più semplice è quello che sfrutta il nome del tag. Es. h1 { color: red:}  in questo caso il testo diventa rosso. I selettori possono anche essere raggruppati in un'unica regola. Es. se voglio che tutti i titoli dall’ h1 al h6 siano di colore rosso. Si fa cosi h1, h2, h3, h4, h5, h6 { Color: red; } Tra queste due modalità ne va inserita solo una ma se si mettono tutte due l’ultima trascritta prende il sopravvento. Dal pdv dei selettori un primo modo per identificare un elemento all’interno della pagina sia l’utilizzo del nome del tag. Altri tipi di selettore fondamentali è quello che sfrutta il valore dell’attributo id. Es. #inizio { color: yellow; } Se uso un attributo id per selezionare un tag all’interno della pagina e assegnargli delle proprietà si dice che questo selettore è più specifico. La presenza del selettore basato su un id ha “la voce più grossa” su un selettore basato su un tag. Quindi anche se appare in una posizione del codice precedente rispetto all’altra prende il sopravvento, perché il peso specifico è maggiore. Altro selettore popolare è il selettore di classe. È basato sulla presenza di un attributo html nei vari tag, l’attributo è class=”” si può applicare a tutti i tag html. Serve a specificare uno o più valori che aiutano il browser a capire che quel component/tag che ha ricevuto quella determinata classe appartiene ad una collezione o insieme di tag che condividono le medesime proprietà. Nel html bisogna mettere es. class=”pari” e nel css si mette .pari (o la condizione che si è messa all’interno di class). Quindi .pari { Color: blue; } Si può anche decidere di mettere es. h3.pari in questo caso il browser seleziona solo gli elementi che hanno le entrambe le situazioni sono verificate quindi h3 e pari. Quello diventa del colore che vuoi. Cresce la specificità. Quando vuoi colorare degli elementi in una tabella guarda da minuto 40. Quando voglio indicare espressamente che il tag a cui voglio applicare le regole è direttamente figlio di un altro devo scrivere un selettore così: <li>a { Color: blue; } Regola applicata a tutti gli <a> che sono “figli” di un tag <li>. Ma lo sposso anche fare per link che stanno dentro a #beta .alfa ul a { } La specificità. È il peso di un selettore all’interno di un foglio di stile. Più è spesante più la specificità è elevata e più le proprietà descritte da quel selettore saranno applicate. Come fa il browser a dire quale selettore è più specifico di un altro? Applica una formula. La formula si basa sull’idea di calcolare i singoli elementi che compongono il selettore in questione. Es. quando nella regola è presente un selettore di tag il browser assegna un punto al selettore; quando nella regola è presente un selettore si classe il browser assegna 10 punti al selettore; quando contiene un id assegna 100 punti. Es. h1 { color: red; } ha specificità=1 .titolo{ color: red;} specificità=10 #inizio{ color: red;} specificità=100 Nel tag html (che è inserito nella pagina) si può applicare una regola per cambiare il font poi a tutti gli elementi. Si possono poi gestire le eccezioni nel caso in cui si voglia cambiare qualcosa. Ma vediamo: Se applichi il font-family: Arial;  le parole non sono più in Times new Roman. Il browser riesce ad usare quei font che sono presenti sulla macchina che ospita il browser. Se il computer però non ha qual font i fogli di stile danno la possibilità di inserire dei font alternativi. Lo si fa mettendo la virgola. Es. font-family: Ariel, Verdana, Helvetica, sans-serif; san serif (senza grazie) è un font generico che il browser può usare se non ne trova nessuno di quelli citati. L’alternative sono i font con grazie ovvero font-family; “Times new Roman”, serif; sono font web safe. Io posso inserire più font con la virgola così se uno non è presente il browser usa l’alto basta mettere la virgola e lo spazio. Se il nome del font è composto da due parole lo devo mettere tra virgolette “” così il browser capisce che è una cosa sola. Web font sono dei font che io incorporo nella pagina web. Per usarli devo aggiungere nel file html un’istruzione (proprio nella pagina html). Questa opzione però è complicata, la strada più comoda è quella di usare dei font a disposizione on line. Vai su Google web fonts il sito ci mostra le anteprime di come quel testo sarebbe visualizzato. Clicchiamo su quello che ci interessa, poi sul pulsante select this style e poi o faccio il download oppure embed selezioni il codice che c’è lo copi e lo inserisci nel file html, lo inserisci prima del foglio di stile quindi <link herf=”il codice copiato”. Poi dice se lo vuoi usare in una tua regola css copia il codice che trovi a quello dell’html. Es. se lo usi solo per l’h1 lo inserisci solo lì. Se non dovesse funzionare il server e non si ha a disposizione il font, in questo caso il browser va a usare il font predefinito del file font-family: cursive;  su w3school trovi anche altri cartteri generici oltre a cursive. Il san-serif corrisponde all’arial. Chiara metti questo sans-serif e chiudi con; vedi lezione 53 min 1 ora e 38. Inserisci line-height: 1.5; spazio che c’è nell’interlinea. CSS: il box model, unità di misura Il Box model è un concetto dei fogli di stile, che prevede che ogni elemento all’interno della pagina possa acquisire una natura bidimensionale, che permette allo sviluppatore di controllare la larghezza, l’altezza. La dimensione. Crea un foglio di stile chiamato boxmodel.css e aggiungi il collegamento al link e metti file stile/boxmodel.css. È come se ci fossero vari strati, quello più interno è quello del contenuto ed è occupato di solito dal testo, poi c’è il padding ovvero l’imbottitura. Poi c’è il border e il terzo livello che è il margin. Il box model si applica a tutti gli elementi di tipo blocco (es. immagini). Anche gli elementi inline possono avere un box model ma lo devono dichiarare attraverso la proprietà display. Riprendi il selettore h1 { display: block; modifica il modo di visualizzazione dell’elemento. background-color: rgb (150); se voglio vedere il rettangolo inserisco questo, in questo caso vedo anche il colore. } Oppure: strong { display: block; } Se devo nascondere un elemento mettiamo display: none;  questo può capitare quando magari vogliamo inserire dei contenuti che siano visibili solo da mobile e non dal desktop. Per capire meglio il display guarda w3school. Proprietà width: 50% o un valore fisso come 50 rem larghezza e height: altezza. Se l’altezza non viene dichiarata essa si basa sul contenuto presente. Ciò riguarda l’area content/contenuto. Ps. Meglio usare i rem. Se metto min-height: 8rem;  elemento deve avere altezza minima di 8 rem Esiste anche max-height  controlla altezza massima Min e max valgono anche per width La proprietà che controlla il bordo si chiama border: dopo i due punti ci possono essere tre proprietà. border: lo spessore 3px il tipo di bordo che si vuole ottenere solid e il colore rgb (255,255,0). Posso decidere di cambiare anche solo un bordo es. voglio cambiare il colore del bordo sx border-left: 15px solid green; border-bottom: 15px dashed blue; border-top: e poi c’è border-right: border-width: controlla la larghezza del border. border-style: cambia il tipo di bordo (solid, dashed, dotted, double, none, ...) border-color: rgb(0,0,100); border-top: posso cambiare solo il carattere del bordo sopra es. none border-top-color: red; border-radius: consente di cambiare la smussatura dell’angolo. Più il valore alto più l’effetto è tondeggiante Se scrivo border-radius: 50% 0 0 0;  in questo caso si smussa solo l’angolo in alto a sx, poi dx, angolo basso a dx e angolo in basso a sx. Va in senso orario Quindi definire spessore, stile e colore, e tieni il file in ordine. Il padding, spazio che sta tra il bordo e il contenuto. Il comando si chiama padding: padding: 20px  così il contenuto si distanzia dal bordo su tutti i 4 lati. Se volessi delle differenze metto padding-top/right/bottom/left: (l’ordine da seguire è questo dall’alto a dx al basso a sx). Esiste una modalità per scrivere in una sola riga dimensioni diverse per tutti e 4 i lati. Si fa padding: 20px 50px;  significa che sopra e sotto sarà 20px, a dx e a sx sarà 50% Padding: 20px 50px 30px;  in questo caso il primo valore indica il top, il secondo indica sx e dx e il terzo valore indica il bottom. Padding: 20px 30px 40px 50px;  in senso orario: sopra, dx, sotto, sx Caso in cui voglio modificare un solo lato  padding:30px; padding: 60px; I Margini: (margin) il bordo della finestra o la distanza dall’elemento della pagina precedente o successivo. margin: 0; il bordo è attaccato, su tutti e quattro i lati. Non serve indicare l’unità di misura se è 0. margin: 40px 20px 70px; oppure uso i rem. margin-bottom: 50px; Nel caso della proprietà margin è possibile usare la proprietà auto, può servire per mettere al centro della pagina l’elemento. Es. margin:40px auto 70px; oppure margin: 4 rem auto anche gli altri elementi hanno dei margini es. h2 h3 ecc. i browser applicano il concetto di collassamento dei margini se due elementi hanno uno un margine inferiore e il secondo un margine superiore queste lunghezze entrano in contatto, queste due lunghezze si fondono tra di loro e vince il valore maggiore. Quanto è largo il nostro elemento? Lasciando da parte il margine, prendiamo in considerazione il box e premiamo tasto dx e ispeziona. Si apre una barra laterale dove vedi tutto il codice html così come viene interpretato dal browser. Nell’altro riquadro vediamo tutti gli stili che sono applicati ad ogni elemento. se vuoi selezionare qualcosa nella pagina devi schiacciare sulla cartellina che c’è in alto a sx. In basso si vede il box e lo spazio occupato da esso è dato dalla somma della proprietà width+ padding left+ padding-right+ border-left+ border-right. Per fortuna esiste un comando box-sizing che possiamo applicare a qualsiasi elemento e che ammette il valore border-box. box-sizing: border box main { width: 75%; float: left; } .container { width: 70%; float: left; } Puoi creare anche un banner pubblicitario. Noi usiamo float ma il metodo più raffinato è flex box. Questo però è incorporato direttamente da bootstrap. Approfondire il tema, il prof non ha tempo. Responsività come verrà visualizzata la pagina su l’applicazione smartphone. Vai sulla pagina creata, tasto dx, ispeziona, in alto a sx c’è una icona con un cellulare con dietro uno schermo più ampio. Il tag da applicare al html è un meta-tag viewport è <meta name="viewport" content="width=device- width” /> content indica al browser come deve trattare il contenuto all’interno della sua area di visualizzazione Responsive web design i 3 principi: 1. Misure proporzionali: un modo per realizzare il responsive web design è utilizzare come unità di misura e larghezza sempre proporzionali, quindi percentuali e rem. 2. Immagini flessibili: nel html c’è un tag immagine, tipo <p><img src=”immagini/html5.png” alt=”logo html5” /></p> quando visualizzo l’immagine all’interno di un box che il device ha ridotto, la nostra immagine esce fuori dal bordo, per risolvere basta dichiarare nel foglio di stile che per le immagini si applica la proprietà img { max-width: 100% } L’immagine torna corretta. La larghezza massima è il 100% del contenitore e il browser la mette in scala. Molto importante questa possibilità. 3. Media Query: sono delle istruzioni css che permettono di far eseguire determinate parti del codice in funzione del verificarsi di alcune condizioni. Possiamo applicare dello stile a patto che lo schermo sia più o meno largo di una certa dimensione. Esse si scrivono con @media screen and (condizione da verificare) {}  se la condizione è vera tutto ciò che sta all’interno delle due parentesi graffe verrà eseguito. Se il test non viene superato allora tutto quello nelle graffe viene saltato. Quindi: @media screen and (mind-width:600px) {  se l’utente apre questa pagina con questo schermo e lo schermo ha una larghezza minima di 600px allora per esempio il footer sarà: footer { background-color: red; } } Il browser a tutti gli utenti applica rispetto al footer un background giallo ma se lo schermo ha una larghezza minima di 600px in poi allora entra in gioco la regola successiva e quindi il background sarà rosso. Esiste anche la parola (max-width)fino a 600px Lui preferisce il min ma vedi tu. Diciamo che il mobile first è l’approccio più semplice. Possiamo anche avere più media query, vedi ultimi due minuti. Possiamo spostare una serie di istruzioni all’interno delle media query. Tutto quello che si scrive fuori dalle media query sarà sempre applicato per cui la versione mobile si può definire fuori dalle media query. Guarda lezione css: responsive web parte 2 LEZIONI 2020 TERZO ANNO Importanti le abitudini per gli utenti. Le gerarchie sono la strategia dell’organizzazione dell’informazione più comune dei siti internet. Spesso l’icona rappresenta in sintesi il simbolo di una gerarchia. Ci possono essere più contenuti sullo stesso livello es. data l’home page ci potrebbero essere tante opzioni di navigazione accessibili dalla prima pagina, oppure avere un numero ridotto di opzioni di navigazione che però nel caso in cui i contenuti restino gli stessi del caso precedente, avere meno opzioni di navigazione porta l’utente ha compiere più passi per arrivare al suo bisogno informativo. In linea di massima gli utenti preferiscono avere un buon numero di opzioni di navigazione per abbracciare le principali suddivisioni del sito anziché compiere più passaggi per arrivare all’info. Non è una regola fissa ma solitamente è così. Es. se sto navigando su un sito di abbigliamento non mi importa di compiere più passaggi per trovare un paio di scarpe perché il mio obiettivo è quello, magari viene facilitato con la possibilità di selezionare lo stile e il numero. In termini di connettività se la mia connessione non è eccellente è meglio progettare un sito efficace dove si trova subito ciò che si vuole. Lezione 46 I siti sono organizzati secondo una gerarchia che può essere monodimensionale un informazione può essere raggiunta solo tramite un ramo della gerarchia. Se voglio raggiungere un specifico prodotto on line, lo trovo solo nella sotto categoria; o multi-dimensionale possibilità di collocare la stessa informazione all’interno di più categorie. Si può raggiungere il prodotto attraverso varie categorie. La navigazione è data da tutti quegli elementi della pagina che permettono all’utente di spostarsi da un punto all’altro del sito web. Non fa parte della navigazione il motore di ricerca che pur essendo all’interno del sito non fa parte della navigazione ma fa parte del sistema di ricerca. Anche chat forum e aree di scambio diretto non fanno parte della navigazione. Ci sono varie tipologie di sistemi di navigazione. Solitamente i sistemi sono co-presenti all’interno del sito interne e si aiutano a vicenda permettendo all’utente di raggiungere l’obbiettivo finale: trovare l’info. Quando progettiamo la navigazione devi pensare all’utente e a come la navigazione può aiutare a raggiungere l’info. 1. Navigazione globale: strumento presente nei siti che permette all’utente di spostarsi nelle differenti sezioni del sito. Es. ci sono le principali categorie in cui è diviso il catalogo. E’ un elemento costante ed è presente in tutte le pagine del sito perché fornisce l’accesso e aiuta l’utente a capire l’identità del sito stesso. Mi permette di muovermi tra le voci di primo livello. Rimane uguale in tutte le pagine. Ricerca esplorativa. 2. Navigazione locale: spesso abbinata a quella globale, ci permette di muoverci all’interno di una specifica sezione. Fa afre dei passaggi e spostamenti tra i contenuti della medesima sezione. Permette di muovermi tra le sezioni figlie della sezione del primo livello. Cambia il contenuto in ogni sezione e piò anche cambiare la forma a volte (caso in cui le sezioni siano diverse l’une dalle altre perché ci sono molti contenuti). Ricerca esplorativa serve a farsi un’idea. Navigazione globale + locale formano la cornice del sito. Non riguardano il contenuto in sé. 3. Navigazioni contestuali: strumenti della navigazione permettono all’utente di passare da un punto all’altro della gerarchia senza percorrere tutti i rami della gerarchia. Es. link posti su specifiche parole, posizioni periferiche come i box a lato che permettono di cambiare rotta con un movimento laterale. Utile per approfondire l’argomento. Contenuti correlati devono essere inerenti. 4. Navigazione supplementare: “briciole di pane” o bread craft, sono diciamo percorsi. Percorsi necessari a risalire l’albero ad esempio fino alla home. Qualcosa che l’utente può usare, rispetto alla navigazione principale, qualora la strategia di ricerca sia differente rispetto alla mera esplorazione dei contenuti. esistono vari strumenti come:  La mappa del sito pagina all’interno della quale sono elencati sotto forma di gerarchia gli elementi della pagina, senza dover passare da tutti i livelli della gerarchia del sito. Schematizzazione dei primi livelli della gerarchia.  Indice del sito presentazione dei contenuti in senso alfabetico.  Guide/tutorial brevi percorsi di navigazione lineare che mostrano i contenuti in un determinato ordine.  Profilazione per utenti modello, per parole chiave, per argomenti, ecc. Es. come fare per il sito poi ti porta ad una specifica che ti porta a fare l’iscrizione.  Georeferenziazione 5. Navigazione sociale: assimilabile ad altri sistemi di navigazione ma in generale è uno strumento che è sempre più diffuso che cerca di applicare i contenuti del sito web a un’organizzazione che arriva dal basso verso l’alto. In questo modo sono gli utenti a classificare i contenuti sia in modo diretto che indiretto. Contenuti che poi una volta classificati vengono messi a disposizione di altri utenti. Es. se noi usiamo degli hashtag questa è un’opera di classificazione. Altri utenti interessati a quella parola chiave possono accedere a tutti i contenuti appartenenti all’hashtag (#). Si parla di Folksonomie sistemi inventati dal popolo. Un altro esempio sono le ricerche popolari, collaborazioni come “chi ha comprato questo ha comprato anche …” su Amazon. Anche tenere conto delle interazioni (ho cercato un certo tipo di libro e il sito mi fa vedere tutti i libri di questa categoria secondo certi algoritmi) fa parte della navigazione sociale. Mantenere coerenza grafica nel sito. Lezione 47 Lezione 51 Posso specificare alcune proprietà come ad esempio il background, e queste saranno applicate a ciascuno dei singoli selettori inseriti nella regola. Non ho più necessità di ripetere successivamente. Esempio: h1,h2,h3 { background: blue; color: white; } Quando voglio applicare le stesse proprietà a più selettori in contemporanea posso inserire nello spazio dedicato al selettore le virgole per separarli come fatto qua sopra. Menu di navigazione nav { background } a {  questo selettore a però è troppo generico e tutto diventa rosso in questo caso Color: red } Per specificare solo qui link che stanno dentro il menu bisogna mettere un tag dei link che voglio controllare. Devi inserire un selettore. Quindi in questo caso fai nav a { Color: red; } Se vai nel html dove hai messo il pulsante torna a inizio pagina poi mettere anche qui il tag nav. In questo modo anche qua varrà poi la regola inserita nel foglio css. Altri due tag del html sono <header> posizionato nella parte superiore vuole dire testata e lo uso per tutta la navigazione principale. Si chiude con </header>. titolo e navigazione del sito di solito sono in questa parte. <main> si mette la parte centrale </main> <aside> si usa per le info a lato del contenuto principale </aside>. <footer> si usa a pie di pagina </footer> Servono per dividere la pagina in alcune sezioni: testata, pie di pagina (parte inferiore), gli elementi di navigazione e contenuto centrale della pagina. Questa divisione permette di operare con i fogli di stile in modo differente su ogni parte. Torna al file stile css. Se metti: header nav a { font-size: 20 px; } E poi metti footer nav a { font-size: 10 px; } Il risultato cambia visto che si trova in un contesto diverso. I selettori discendenti separati a spazi mi permettono di indicare delle proprietà specifiche per delle condizioni più particolari. Quindi posso utilizzare queste sintassi per differenziare lo stesso tag o selettore quando si trova in un contesto diverso. Per identificare in modo puntuale uno o più tag devo usare selettori più specifici. Selettore di class e identificatore (id). Torna sul foglio html. SELETTORE DI ID Bisogna scrivere: #valore del contenuto id sul quale voglio lavorare { Background: green } Definisco lo stile di un elemento in mezzo a tutti gli alti. SELETTORE DI CLASS Seleziona gli attributi class, attributo generico che posso applicare a qualsiasi tag. Dal paragrafo al tag em. Dentro class=”” scrivo un nome logico (non dei valori pre definiti) che va ad etichettare quell’elemento come se facesse parte di una stessa collezione di tag. Es. nella mia pag. web tutte le volte che viene citato un tipo di un film voglio proprietà stilistiche particolari es. lo voglio in grassetto. Se nell’h1 c’è un titolo metto: <h1 class=”titolofilm”>”Via col Vento” nell’attributo class la parola deve essere unica, senza spazi. Si può applicare anche a un li em strong e h123 … Ora che sono accumunati dal selettore class nel foglio di stile posso scrivere: .titolofilm { il punto primo della parola è necessario font-weight: bold; il risultato è il grassetto, perché bold è grassetto. Si può aggiungere sotto anche un font-style: italic;  così viene una sorta di corsivo } Esempi di combinazioni di selettori per mettere titolo in evidenza. nel html metto <ul class=”menu” title=”menu di navigazione”> <li><a herf=”index.html” id=”home”>Home page<a/></li> Nel css metto header .menu #home { Font-size: 30 px; } Quando ci sono delle regole in contrasto il browser attua due criteri. Se ripeto la stessa proprietà all’interno della stessa regola es. due volte font-size il risultato che vince è quello della regola scritta dopo. Vince la regola scritta più in basso nel browser. Ci sono selettori più paesanti e più leggeri. Capacità di prendere il sopravvento rispetto a selettori che magari fanno riferimento allo stesso comando. I selettori di id sono più potenti. Dopo abbiamo selettori di classe e alla fine i selettori di tag. Ci sono casi dove i selettori vengono messi insieme il browser calcola il peso/la specificità su numero di selettori di id, numero di selettori classe, numero di selettori tag. E’ come se id valesse 100 classe 10 e tag 1 vedi lezione parte dal minuto 1 ora e 40. Io potrei avere un tag strong dentro a un tag a che a sua volta sta dentro a p e anche dd... insomma possono essere tag molto lunghi. Su w3school puoi andare si referenze in alto a dx e selezionare css selettori per vedere tutte le casistiche. I colori vedi sopra. Lezione 52 Lezione 53 Studio delle proprietà css. Il testo: .testo { font-size: 40px;  il font serve per la dimensione del testo width: 40%; } Guarda css units su w3school. Ci son unità di misura assolute e relative. Quelle assolute non dipendono dal contesto in cui sono inserite, in sostanza il valore non cambia mai anche se cambio altre cose. Meglio usare unità relative perché la pagina web è un elemento fluido. Bisogna ragionare sulla flessibilità degli elementi. Per far si che il contenuto si adatti bisogna esprimere il dato un percentuale e non in px. main { width: 1000px } La percentuale viene calcolata in funzione di qualcosa altro. Una larghezza del 40% equivale a chiedere al browser di prendere la dimensione del contenitore 1000 dividerla per 100 e moltiplicarla per 40. Lo stesso vale sul font size se uno dice 100%. Solitamente il font del body è di 20px