Appunti Metalinguaggi di Marcatura

BACKGROUND

Con i CSS è possibile definire il background di un elemento, in particolare è possibile

personalizzare:

Colore (colore di sfondo di un elemento con la proprietà background-color)

o Immagine (immagine di sfondo con background-image)

o Ripetizione dell’immagine (background-repeate)

o Posizione (background-position)

o

BORDI

Lo stile è definito con la proprietà border-style mentre il colore con border-color.

Alcuni stili possibili sono:

dotted BORDI PUNTINATI

o dashed BORDI TRATTEGGIATI

o solid BORDI SOLIDI

o double DOPPI BORDI

o

MARGIN

Le proprietà possibili sono:

margin-top

o margin-right

o margin-bottom

o margin-left

o

PADDING

Nel CSS il padding è utilizzato per definire lo spazio intorno al contenuto

Le proprietà possibili sono:

padding-top

o padding-right

o padding-bottom

o padding-left

o

ALTEZZA E LARGHEZZA

Tramite le proprietà width e height è possibile definire rispettivamente larghezza e alezza di un

elemnto.

BOX MODEL

Un elemento HTML può essere considerato come una scatola. Nella costruzione del layout e del

design si parla quindi di box model. La scatola è composta da margini, bordi, paadding e contenuto.

FORMATTAZIONE DEL TESTO

Il CSS è utilizzato anche nella formattazione del testo per definire colore, font, grandezza,

posizione.

color viene utilizzata per il colore

o text-align viene utilizzata per l’allineamento orizzontale

o text-decoration viene utilizzata per decorare il testo

o overline

line-through

underline

white-space viene utilizzata per la gestione dello spazio bianco

o font-family

o font-size

o font-style

o italic

list-style-type

o

Lezione 05/11/2024



LAYOUT serve per scegliere come posizionare gli elementi all’interno della pagina. Abbiamo

diverse tecniche: 

Flusso normale quando scriviamo la pagina HTML senza mettere il css. Solo tag senza

rappresentazione. Floats

Tutti gli elementi HTML hanno un valore di display predefinito che può essere block o inline.



Display Inline-block inline con delle misure prestabilite. Elemento che occupa solo quello

spazio ma posso dargli delle grandezze.



Flexbox ci permette di giocare con dei gruppi di elementi. Es: contenitore con molte cose dentro

che vogliamo che siano tutte centrali o con degli spazi uguali possiamo farlo con flexbox.

Raggruppa gli elementi sulla stessa riga.

Flex ha tante proprietà:



Flex direction specifica in quale direzione viene eseguito l’asse principale.

Flex Row da sinistra a destra



o Flex Row reverse da destra verso sinistra



o Flex Colum da sopra a sotto



o Flex Colum reverse da sotto a sopra



o 

Flex wrap mette gli elementi vicini, quando non ha più spazio va in automatico a capo

Noweap (default)

Wrap 

Justify-content gestisce l’allineamento degli elementi lungo l’asse principale



Alignment fa la stessa cosa ma verticalmente



Floats tecnica per il posizionamento. Permette di spostare a sinistra o destra all’interno del suo

contenitore permettendo agli altri elementi di “fluttuare” attorno ad esso. Di solito utilizzato per le

immagini circondate dal testo. Quando vogliamo mettere il float left o right senza che gli altri

elementi seguono utilizziamo il clear. Float-left / Float-right / Float-none / Float-inherit



Posizione è molto utile quando vogliamo togliere un elemento e dargli una posizione. Ha 4

valori diversi: static:posizione di defoult, relative: l’elemento è posizioanto rispetto alla sua

posizione originale, si basa sul contenitore più grande, assoluto:l’elemnto è posizioanto rispetto al

suo contenuto più vicino, fixed e sticky



Overflow ad esempio quando abbiamo il testo più lungo dell’immagine.

- visibile

- hidden

- scroll

- auto

Per l’ottimizzazione del layout sarebbe meglio utilizzare le tabelle

Lezione 19/11/2024

Il Web Design è l’arte di progettare siti web che siano funzionali, esteticamente belli e facilmente

navigabili. Coinvolge decisioni su layout, colori, tipografia, immagini e interattività. Inoltre tiene

conto anche degli obiettivi del sito: informare, vendere, intrattenere o fornire un servizio.

Obiettivo → migliorare l’esperienza dell’utente (User Experience o UX).

UX e UI

User Experience (UI) ≠ User Interface (UI)

La User Experience (UX) riguarda il "sentire" del sito: il sito è facile da usare? È intuitivo?

Soddisfa i bisogni dell’utente?

La User Interface (UI) riguarda invece il design visivo: bottoni, colori, layout.

→ La UI è ciò che l’utente vede, mentre la UX è ciò che prova usando il sito.

L’usabilità è una qualità essenziale di un prodotto web, strettamente legata al design. Essa indica la

facilità con cui gli utenti possono interagire con il sito e raggiungere i loro obiettivi in modo

efficiente.

L’eyetracking è una tecnica diffusa per studiare l’usabilità. Permette di tracciare dove un utente sta

posizionando il suo sguardo. I risultati di questi studi vengono rappresentati tramite delle heatmaps.

Gli esseri umani hanno un’attenzione naturalmente selettiva, un meccanismo evolutivo progettato

per aiutarci a filtrare ciò che è rilevante in un mare di stimoli. Le persone che navigano sul web

tendono a dedicare pochissimo tempo a valutare una pagina prima di decidere se restare o

andarsene.

Quando progettiamo per il web, dobbiamo accettare che:

● Gli utenti non leggono, scansionano.

● Decidono in pochi secondi se vale la pena restare su una pagina.

● Cercano soluzioni rapide, contenuti chiari e interazioni intuitive.

La missione è attirare l’attenzione, ma soprattutto mantenerla abbastanza a lungo per guidare

l’utente verso ciò che vogliamo comunicare o offrire.

Principi del web design

1. Gerarchia visiva (gli elemnti più importanti devono essere messi in risalto)

2. Spaziatura e leggibilità (lo spazio vuoto attorno agli elementi rende il design "respirabile" e

più ordinato, migliorando la leggibilità).

3. Tipografia (usare font chiari e leggibili, armonia visiva)

Le due categorie principali di grafica digitale sono quella raster e quella vettoriale.

Grafica Raster è composta da una griglia di piccoli quadratini chiamati pixel. Ogni pixel ha un

colore specifico, e tutti insieme formano un'immagine. Esempi di file raster sono le foto (come JPG,

PNG, GIF). Il limite della grafica raster è che, se ingrandisci l'immagine troppo, può diventare

sfocata o "pixelata", perché dipende dalla risoluzione.

Compressione lossy: questi tipi di formati perdono la qualità ogni volta che vengono salvati e

modificati, quindi non sono adatti per il fotoritocco ma sono perfetti per lo scambio di immagini

tramite Internet.

Grafica Vettoriale: invece di usare pixel, la grafica vettoriale si basa su forme geometriche (linee,

curve, poligoni) definite da equazioni matematiche. Questo tipo di grafica è scalabile, quindi puoi

ingrandirla o ridurla senza perdere qualità. Esempi di file vettoriali sono quelli creati con software

come Adobe Illustrator (come SVG, EPS, AI).

Il Responsive Design

Si tratta di una tecnica di progettazione web che permette ai siti di adattarsi automaticamente alle

dimensioni e alla risoluzione dello schermo, garantendo un’esperienza utente ottimale su qualsiasi

dispositivo (desktop, tablet, smartphone). L’obiettivo è quello di offrire un’esperienza utente

consistente e comoda, indipendentemente dal dispositivo utilizzato.

- Accessibilità su tutti i dispositivi

- Migliore esperienza utrente

- SEO migliorato: i browser premiano i siti responsive, migliorando il posizionamento nei

risultati di ricerca

- Semplificazione della gestione

Principi fondamentali:

1. Fluidità: utilizza layout flessibili con griglie fluide che si adattano alle dimensioni dello

schermo

2. Immagini e media adattivi: le immagini devono essere ridimensionate in modo tale che si

adattino a schermi di diverse dimensioni

3. Breakpoints: stabilire punti di interruzione nel codice CSS per modificare il layout a

seconda delle dimensioni dello schermo

Media Queries

Le Media Queries sono regole CSS che permettono di applicare stili diversi in base alle

caratteristiche del dispositivo o del contesto di visualizzazione. Generalmente slono composte da

due elementi, il media-type e la condition che vengono utilizzati in più combinazioni per ottenere

regole e risultati diversi.

Il media-type indica il tipo di dispositivo in cui la pagina web deve essere visualizzata



all indica tutti i dispositivi



print modalità di stampa



screen per gli schermi, i tablet o gli smartphone



speech destinata ai sinetizzatori vocali

La condition o media-features sono le condizioni specifiche che determinano quando applicare una

regola CSS. Queste condizioni si riferiscono alle caratteristiche del dispositivo come la larghezza

dello schermo (width), l’altezza (height), la risoluzione e l’orientamento (orientation).

Un menu responsive cambia il suo aspetto e comportamento a seconda delle dimensioni dello

schermo. Su schermi più piccoli, come quelli degli smartphone, il menu spesso si trasforma in

un'icona di tipo "hamburger" (tre linee orizzontali) che, una volta cliccata, espande il menu a

tendina.

Lezione 26/11/2024

Introduciamo la dinamica del documento, concetto di comportamento. L’elemento centrale che

caratterizza questa ultima parte è JavaScript. Si tratta di un linguaggio di programmazione. (Non è

obbligatoria per il progetto finale ma potrebbe fare delle domande orali a riguardo).

Che vuol dire comportamento? Definire come la pagina si deve comportare a seguito del verificarsi

di un evento (ad esempio se è notte). Rientra nel concetto di dinamicità. Noi interagiamo con il sito

e in base alle nostre interazioni il sito si modifica.

JavaScript è uno dei linguaggi di programmazione più usati al mondo. Importante: è l’unico

linguaggio di programmazione che possiamo usare sul web nella parte dinamica, l’unico linguaggio

che supporta la parte dinamica del web. Questo lo rende uno dei linguaggi più popolari in assoluto.

In qualsiasi linguaggio di programmazione facciamo riferimento alle variabili: una parola, lettera,

ecc… che al proprio interno si salva un valore. Noi dobbiamo lavorare con i dati e ci sono vari modi

per utilizzarli. I tipi di dato in JavaScript sono poch