Web design - Appunti

LINGUAGGI DEL WEB – LABORATORIO DI WEB DESIGN

Di Massimo Cellario

Community password= WD2021

Esame test a computer con domande + progetto opzionale

PRODUCTION PROCESS

Sviluppo progetto=

Concept(idea,

1- outline, sketch, draft…)

Devolopment

2- • Design

• Implementation (Realization, Execution…), calare nella realtà il progetto chiarito con il design e

ispirato dal concept

• Test (Evaluation…), valutare prima di lanciare il progetto/qualità

Distribution(pubblicazione

3- e marketing)

Sviluppo progetto a livello economico:

PLAN: strategia,

1- l’idea

PROGRAM+CONTROL: tattica,

2- programmazione di come attuare l’idea

EXECUTION: operation,

3- quando andiamo infine a fare delle cose

L’analogo più filosofico di tale schemino:

I Dati cono la cosa più bassa, e sono la cosa più elementare possibile.

Lavoreremo sui dati(unità base) che uniti formano Information, dei

“pattern”, “temi”. Quando l’information non basta più, passiamo ad un

altro livello di sapere, “Knowledge”. Il potere della conoscenza è saper

generare informazioni che anche non avevamo prima.

INFORMATION= es. filtri instagram, codici

KNOWLEDGE= es. fare filtri instagram/codici

WISDOM= es. creare qualcosa di mai visto

Es. Adv Nikkie Makeup Course contro il make-up alla guida

Es. Quell’incubo di sporco (pubblicità per LG) (https://www.youtube.com/watch?v=NuGIO5uMfOg )à una delle pochissime pubblicità che non è stata skippata. Gli

utenti sono ciechi alla pubblicità, qualunque cosa che appaia come pubblicità viene skippata sul web. Bisogna quindi inventarsi modi originali per mantenere lo

sguardo e l’attenzione dello spettatore.

2.DEVELOPMENT (Production Process)

DESIGN

Il design lo possiamo suddividere essenzialmente in 3 fasi:

• Information Design Architecture)

(Informational = progettare, scrivere informazioni ad

esempio di un sito. Nel cinema svolge tale funzione lo sceneggiatore. Definire il prodotto, il

target, pianificare il progetto, organizzare il contenuto. Generalmente lo si fa mediante

flowchart.

Q: what is the product?

• Interaction Design = progettazione dell’interazione. Nel cinema non la troviamo perché il

cinema è passive, non interactive. Interactionà Azione Tra, qualcuno sta facendo qualcosaà

ACTION, AZIONE TRA QUALCUNO e l’azione richiede ENERGIA. Fase in cui si disegna la

storyboard.

navigazione, l’interazione e i controlli. Generalmente lo si fa mediante

Q: how should it work? interazione, passive.

Il web è non è

INTER – ACTION ACTION tra DUE cose/ ENTITA’ di qualunque natura.

à

ACTION= entrambi fanno qualcosa COMUNICAZIONE BIDIREZIONALE

INTER= questa cose viene fatta tra dueà

composta da:

• ACTION

• REACTION

INTERFACE=

Altra parola chiave è faccia, un qualcosa che sta tra due. Qualcosa che se le due entità sono

aiutare a

molto diverse deve comunicare. SE sono molto simili l’interfaccia potrebbe sembrare quasi assente.

Qualcosa che fa in modo che anche due entità diversissime entrino in dialogo/interazione.

L’esempio classico è l’HUMAN COMPUTER INTERACTION (HCI)

1 ENTITA’= uomo (USER)

2 entità= computer (HW= hardware/SW= software)

interfaccia= monitor, tastiera e mouse

CODING:

di

tipi

3

Esistono codici

in

istruzioni

di

sequenza

tutta

scritta

=

zero’

‘da

programmazione

Program:

✗ programma,

altro

un

dentro

programma

un

utilizza

si

=

semplificata

programmazione

Script:

✗ istruzioni

dare

di

ma

zero

da

processo

tutto

scrivere

dover

non

di

permette

quale

il completo.

e

semplice

più

modo

in

scriverle

a

aiuta

programma

L’altro

semplificate. Python,…]

C++,

C#;

(JavaScript),

Java

[es. annotazione,

=

ecc..)

sottolineature,

tipografi,

di

segni

(es.

segni

dei

fare

marcare,

Mark-up:

✗ marcatura

descrizione, HTML)

(es.

documento

del

logica

struttura

=

strutturale

Mark-up CSS)

(es.

documento

del

visuale

parte

la

struttura

=

visuale

Mark-up

IL LINGUAGGIO HTLM

[HYPER TEXT MARK-UP LANGUAGE]

É il linguaggio che si utilizza per scrivere pagine web o siti. Esso descrive tramite marcatura

degli ipertesti (pagine web).

Ciò che fa é mettere ‘segnetti’ sul testo per definirne alcune caratteristiche, al esempio che é in

grassetto. Come lo fa? Utilizzando i cosiddetti <TAG> si chiama “parentesi angolare”

elemento lessicale utilizzato nell’HTML per

definire che si sta utilizzando un’etichetta

Alcuni esempi:

<TAG> il mio testo </TAG> / = fine di questa proprietà

<B> il mio testo </B> B = testo in grassetto

<I> il mio testo </I> I = testo in corsivo

<U> il mio testo </U> U = testo sottolineato

<I> mio <B> testo </I> <B> mio sarà in corsivo, testo sarà sia in corsivo che in grassetto

Tramite tag, é possibile fare anche collegamenti, ad esempio:

<A HREF = “http://www.iulm.it”> il mio testo </A>

A (ancora), H (Hyper) -REF (riferimento) A: definisce un Hyperlink = il testo che sta di mezzo

fungerà da link che reindirizzerà ad un’altra pagina

…UN PROGETTO É DUNQUE COMPOSTO DA…

Tho

TERRIERE

+ Hyper Link

Gli Hyper-link (hyper collegamenti) sono ciò che

rendono i media “hyper”.

Quando infatti abbiamo un ipertesto significa che il

primo testo rimanda a un secondo testo. [Es:

Wikipedia è un ipermediale - rimanda con diversi link

ad altri testi per approfondire determinati concetti]

TRASFORMAZIONI

→•ˢᵈᵗ

← EEees--•aagE

IMMAGINE IN 2D (Griglia, reticolo)

Enomoto

OCR: Nel caso del testo il tracciamento, mediante un riconoscimento del caratteri, associa le forme a lettere.

OCR: Nel caso del testo il tracciamento, mediante un riconoscimento del caratteri, associa le forme a lettere.

(“Riconoscimento Ottico Caratteri”)

IMMAGINE + TEMPO Tecnica di

elaborazione

dell'immagine che

SUONO

G- permette di inserire

fotogrammi

intermedi tra due

key-frames

SSA

TEXTURE - DA SAMPLES A OBJECTS

Per poter tenere il vantaggio della manipolazione geometrica e, contemporaneamente, il realismo, uno dei modi che si possono

utilizzare é l’uso della texture.

(“tessitura”) = In questo utilizzo si prende un’ immagine sintetica, geometrica e

Ese-•agggaga-

sopra vi si mette una texture, ovvero un’immagine in pixels.

Anche nel suono vi è la texture: vado ad unire le ‘onde’ del linguaggio samples alle note degli objects, ottenendo un suono più

realistico (es. cantando non aggiungo nota, prendo onda e sposto la nota interessata per renderla migliore). Questa è chiamata

samples. RESOLUTION

E

DIMENSION

2D

IMMAGINE

BEFFEGGIARE

RESOLUTION

È il parametro di qualità. Quest’ultima ci viene data non dal numero dei pixel, ma dalla loro

grandezza.

Le unità di misura della risoluzione sono:

- nello spazio = DPI (dots per inch) / PPI (pixel per inch). L’occhio umano ha una risoluzione di

30 DPI a 40 cm di distanza.

- nel tempo = FPS (frame per second). La risoluzione temporale viene utilizzata quando si ha a

che fare con video e immagini che si muovono ( movimento = illusione:

sequenza veloce di immagini). Per le immagini in movimento l’occhio percepisce

10 FPS. a-

Risoluzione temporale al cinema: 24/25 fps

Risoluzione di una conversazione cinema/televisione americana: da 24 a 30 fps

In videogame: 60/120

ESTESASI

Per il suono, invece, sono campioni sonori al secondo, quindi sound samples per second. La

misura di campioni al secondo sono gli HZ (Herts), che significa “qualcosa al secondo”.

Color resolution = questa tipo risoluzione si misura in ‘colors’ ( color levels = numero di colori =

numero sfumature percepite).

L’occhio percepisce 10 milioni di colori circa. Per quanto riguarda i livelli di luminosità

(brightness levels, ossia quante sfumature/gradazioni di grigi - scala di colore dal bianco al

nero), l’essere umano ne percepisce 100/200 circa.

IL COLORE

MODELLI DI COLORE

Per il colore si parla di ‘’modelli colore’’ (o modelli cromatici), dove la parola modello sta per rappresentazione di

qualcosa, non è la verità.

Si hanno tre tipologie di modelli:

1) MODELLI TRICROMATICI =modelli che basano la descrizione del colore su tre colori principali. I più

noti sono RGB (Red Green Blue) e CMY (Cyan Magenta Yellow) e sono dei modelli che potremmo definire ‘’utili’’

per la tecnologia, in particolare:

RGB : viene utilizzato per tecnologie basate sulla LUCE (es. monitor,screen, […] chiamati anche modelli

ÈE emissivi o additivi). Quando realizzo il colore nero, tutti e tre i parametri (R - G - B) sono a 0; se invece ho

il bianco i parametri sono al massimo, ossia a 255.

ÈÈÉ —} non è un modello alquanto intuitivo, tuttavia é quello più utilizzato nel campo del web.

≤ CMY (ciano - Magenta - giallo) = utilizzato con tecnologie basate sulla RIFLESSIONE DELLA LUCE su

superfici (modelli riflessivi o sottrattivi - es. stampante). Al contrario del RGB, il nero si ottiene portando al

massimo tutti i parametri. Inoltre, rispetto al modello precedente, é più intuitivo.

N.B: Quando creo colore in programmi come Photoshop o GIMP, (con RGB e CMY ecc), questo può essere scritto

sotto forma di linguaggio esadecimale, ovvero ho una notazione HTML a cui corrisponde un determinato colore.

2) MODELLI QUADRICROMATICI

CMYK = formato da CMY + blacK (tipico nelle stampanti) — Alcuni colori che vedo su monitor non saranno

gli stessi in stampa e viceversa.

3) LUMA-CHROMA = descrive i colori in base a delle loro caratteristiche e non più secondo i colori base.

LUMA (luminosità) + CHROMA (intensità colore)

Come esempi di questi modelli abbiamo:

HSB (Hue Saturation Brightness)

- Hue = tonalità, vado a scegliere il colore ‘‘grezzo’’ (es. blu, rosso,…)

- Saturation = rende più pallido il colore - al minimo della saturazione tutti i colori tenderanno al grigio

- Brightness = fa diventare colore più scuro/più chiaro possibile - al minimo della luminosità si avrà

sicuramente nero mentre al massimo o bianco o colore brillante.

Il modello HSB ha la caratteristica di essere intuitivo, poiché è il più vicino alla psicologia umana, ossia più

vicino al nostro modo di descrivere i colori, a differenza del RGB, il quale non lo è affatto.

L*a*b*= modello biologico che descrive i colori che l’occhio é in grado di vedere. Ogni occhio ha tre sensori

RGB: un sensore vede il rosso, uno il verde e uno blu.

Le fotocamere sono state infatti sviluppate sulla base dell’occhio umano.

GAMUT: range of colors gamut

Il di un dispositivo o di una periferica è l’insieme dei colori

che il dispositivo o la periferica è in grado di produrre, riprodurre o

catturare ed è un sottoinsieme dei colori visibili.

LAB device-independent (whole visible spectrum)

RGB device-dependent (es. monitor gamuts)

diverso monitor= diverso RGB gamut

CMY (K) device-dependent (es. printer gamuts)

diversa stampante= diverso CMY gamut

RGB e CMY possono verificare 4 situazioni: coincidono

CMYK

CMY IO

RGB

IL GAMUT e

1: ok eye, no monitor, no print , COMPLEMENTARI

, )

(

NELL' ALTRO RGB CMY

L' SONO

Ne

2: ok eye, ok monitor, no print UNO e

INCLUSI

SONO = .

3: ok eye, no monitor, ok print

4: ok eye, ok monitor, ok print

I programmi grafici (es. Photoshop) spesso mi indicano

quando i colori sono fuori gamma rispetto la stampa

con punto esclamativo”).

mediante un “triangoli Utile è,

da

quando apro il programma, indicare le capacità di colore

della stampante e del monitor così che i colori siano

personalizzati su di noi.

Seppur indicando ciò, i colori non saranno mai perfettamente come indicati, pertanto è utile controllare su

“Avvertimento gamma”.

Nel menùà Visualizzaà Avvertimento gammaà tale impostazione mi colora di grigio le aree del disegno/foto che non

verranno stampate come vediamo (mi mostra direttamente sul selettore colore le gamme di colore che ne risentiranno.

colori”

Le cose cambiano in base al tipo di stampante). C’è anche volendo un “prova che ci fa vedere direttamente

come verrebbero. Sappiamo come stamperemo.

COLOR CORRECTION

Possibilità di trasformare un’immagine in qualunque colore

BARRISS

io voglia. Avremo a adisposizione su cui giocare:

Avremo, come impostazioni, per effettuare ciò:

• Brightness (LUMA): prima cosa che dobbiamo

gestire (Istogramma Livelli Luminosità)

• RGB (non molto intuitivo): Color Balance

• HSB (principalmente solo per regolare la

saturazione, per rendere quindi le cose più sature

o meno sature)

Il modo più semplice è utilizzare semplicemente un

catalogo di colore (palette), ovvero un catalogo esistente (es. Pantone, Palette Mac, Windows, “Web safe”…). Modo

semplice ma sin troppo banale.

Histogram: Brightness

Per lavorare sulla brightness, lavoriamo sui Livelli di colore mediante l’utilizzo dell’istogramma, ovvero una

rappresentazione della luminosità dell’immagine. Questa tecnica mi permette di decidere con più raffinatezza cosa

schiarire o scurire senza modificare tutto, spostare tutti i valori o su chiaro o su scuro, posso quindi cambiare dei punti

.

mantenendo fermi altri Istogramma= rappresentazione statistica dell’immagine.

pixels per ogni livello di luminosità.

Le barrette mostrano il numero di (indicano come è

distribuita la luminosità)

Importante! BRIGHTNESS LEVEL (livello di luminosità): corrisponde al livello del grigio nelle foto in bianco e nero, e al

canale di luminosità nelle immagini colorate (es. B in HSB, Y in YUV …). Per le immagini colorate possono essere

realizzati dei livelli separati per ogni livello di colore (es. R|G|B)

Histogram: Tone ran