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…)

Development 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 sono 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/ ENTITÀ 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 entità= uomo (USER)

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

Interfaccia= monitor, tastiera e mouse

Coding

Coding: di tipi 3

Esistono codici

• Program: ✗ programmazione da zero = scritta tutta sequenza di istruzioni in programma
• Script: ✗ programmazione semplificata = si utilizza un programma dentro un altro programma, il quale permette di non dover scrivere tutto processo da zero ma di dare istruzioni semplificate. L’altro programma aiuta a scriverle in modo più semplice. completo. [es. Java (JavaScript), C#; C++, Python,…]
• Mark-up: ✗ marcatura, fare dei segni (es. disegni, tipografi, sottolineature, ecc..) = annotazione, descrizione, Mark-up strutturale = struttura logica del documento (es. HTML) Mark-up visuale = struttura la parte visuale del documento (es. CSS)

Il linguaggio HTML [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…

ThoTERRIERE + 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. (“Riconoscimento Ottico Caratteri”)

Immagine + tempo Tecnica di elaborazione dell'immagine che SUONO G- permette di inserire fotogrammi intermedi tra due key-frames SSATEXTURE - 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.

Risoluzione

RESOLUTIONEDIMENSION2DIMMAGINEBEFFEGGIARERESOLUTION

È 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 (Hertz), 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)

Esempi di modelli luma-chroma

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

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 CMYKCMY IORGBIL GAMUT e1: ok eye, no monitor, no print, COMPLEMENTARI, )(NELL' ALTRO RGB CMYL' SONONe2: ok eye, ok monitor, no print UNO eINCLUSISONO = .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 BARRISSio voglia. Avremo a a disposizione 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