Progettazione Multimediale 2 UX/UI Design, NABA, Presentazione

NABA Nuova Accademia di Belle Arti

NABA
NUOVA ACCADEMIA
DI BELLE ARTINABA
NUOVA
ACCADEMIA
DI BELLE ARTI

Progettazione
multimediale 2
UX/UI Design
A.A. 2023 24

Docenti
Francesco Di Muro e Tommaso BiondoCC
cc
C
BY NC
SA

Queste slides fanno parte del corso "UX
& UI Design".
Il presente materiale è pubblicato con
licenza Creative Commons "Attribuzione
- Non
commerciale - Condividi allo stesso
modo - 3.0" (http://
creativecommons.org/licenses/
by-nc-sa/3.0/it/deed.it)
La licenza non si estende alle immagini
provenienti da altre fonti
e alle screen shots, che, ove possibile,
sono stati indicati.

Programma del Corso

Dettaglio Settimanale

Week
Argomento
10
WEB 1
Elementi integrativi per creare un buon progetto, CSS3, Form, Before & After,
Animazioni.
11
WEB 2
Gestire un layout responsive, Media Query Viewport.
12
Revisione in co-docenza con UX Content Strategy
13
WEB 3
L'interattività nel mondo web, Javascript. Introduzione a jQuery.
13
WEB 4
Utilizzare librerie javascript
WEB 5
15
Integrare effetti interattivi complessi. Caricare un sito/app online
UX
UI
Development
UX/UI Content Strategy

JavaScript: Interattività e Dinamicità

Cos'è JavaScript?

Interattività e Dinamicità nei contenutiCosa è JavaScript?
È un linguaggio di programmazione, nato nel 1997, orientato agli oggetti ed
agli eventi, eseguito lato client dal browser e utilizzato per la creazione,
modifica di contenuti web. Nel nostro caso sarà fondamentale per la
gestione delle interazioni e degli effetti dinamici dei nostri elementi.
Essendo un linguaggio di programmazione completo possiede elementi
come variabili, oggetti, strutture di controllo e funzioni.
JS

Curiosità su JavaScript

Curiosità
JavaScript ha la pretesa di essere il linguaggio di programmazione più frainteso del mondo.
Benché spesso considerato come un giocattolo, la sua semplicità nasconde alcune potenti caratteristiche
che ad oggi lo hanno reso uno dei linguaggi di programmazione più usati.
Gran parte dei fraintendimenti nascono dal nome, infatti nel 1995 il primo nome fu Mocha ma
successivamente divenne JavaScript per una questione di marketing che tentava di approfittare della
popolarità del linguaggio Java della Sun Microsystem ma con il quale non condivide nulla.

JavaScript in HTML

Per inserire del codice javascript in una pagina
HTML, è necessario, come avviene per i fogli di stile
CSS, l'utilizzo di un tag specifico "script".
Questo tag non è parte del linguaggio JavaScript in
sé, serve solo come "contenitore" all'interno di una
pagina HTML.
Il tag può essere utilizzato in due modalità.

1. <script type="text/ javascript">
   Codice interno
   </ script>
2. <script type="text/javascript" src="script. js"></script>

Document Object Model (DOM)

DOM
il Document Object Model (spesso abbreviato
come DOM), è lo standard ufficiale del W3C per
la rappresentazione dei documenti strutturati,
tra i quali HTML, come modello orientato agli
oggetti.
In pratica definisce una copia virtuale strutturale
della nostra pagina web ed offre la possibilità di
manipolarne il contenuti.
Questo concetto è alla base di quello dei
"selettori" già utilizzati nei CSS perché permette
appunto rintracciare i nostri tag all'interno della
nostra interfaccia.

Window
Texturea
navigator
Text
Plugin
Frame
Layer
FileUpload
Mime Type
Link
Password
document
Image
Hidden
Area
Submit
Anchor
Reset
Location
Applet
Radio
Plugin
Checkbox
History
Form
Button
Select
Option

Eventi in JavaScript

Eventi
Il linguaggio porta con se diverse funzionalità
necessarie per gestire le interazioni utente.
La funzionalità più importante e quella di "seguire"
gli eventi che un utente compie durante la
navigazione come ad esempio il click, il movimento
del mouse o la pressione sui tasti della tastiera.

Esempio
<script type="text/ javascript">
document . body . addEventListener ('click', function ( ) { alert ('Hai cliccato' ) } ) ;
</script>

jQuery: "Write less, do more."

Definizione di jQuery

jQuery
Write less, do more."jQuery è una libreria JavaScript per applicazioni web,
distribuita come software libero. Nasce con l'obiettivo di
semplificare la selezione, la manipolazione, la gestione
degli eventi di elementi in pagine HTML, la
manipolazione degli stili CSS e semplificare l'uso di
funzionalità AJAX."
Wikipedia

Perché utilizzare jQuery?

Perche jQuery?
Esistono molte librerie e frameworks javascript,
alcune onnicomprensive alcune invece che si
focalizzano su certi aspetti come la velocità o le
animazioni.
jQuery si è rivelata una delle più usate per diversi
motivi:

• Utilizza i selettori CSS per la ricerca degli
  elementi nel DOM
• Ha una sintassi semplice
• È compatibile tra i vari browser
• Supporta estensioni e plugin
• Lavora con i sets (gruppi di oggetti)
• É leggera, meno di 100KB
• È opensource e gratuita

Codice javascript puro
var d = document.getElementsByClassName ( "goodbye") ;
var i;
for (i = 0; i < d.length; i++) {
d[i] . className = d[i].className + " selected";
}
Equivalente jQuery
$ ( " . goodbye" ) . addClass ( "selected" ) ;

Come utilizzare jQuery

</>
index.html
My
Website
CSS
{ }
JS
();
Come facciamo con i file CSS dobbiamo iniziare
a strutturare il nostro progetto al fine di
accogliere tutte le librerie e file con codice
JavaScript.
Creiamo quindi una cartella "js" dove salveremo
la libreria presente a questo link
https://jquery.com/download/
(La versione compressa ovviamente)
Successivamente possiamo importarlo nel
nostro file HTML usando il tag <script>
<script type="text/javascript" src="js/jquery . js"></script>

Struttura del Codice jQuery

Struttura codice
La sintassi delle istruzioni jQuery è fatta per
selezionare elementi ed eseguire azioni su di essi,
istantaneamente o su determinati eventi.
$(selettore) . action ( ) ;
- $ indica l'utilizzo di jQuery per eseguire l'istruzione di codice.
- (selettore) come nella sintassi CSS permette di filtrare gli elementi nel DOM e quindi nella pagina
HTML. É possibile usare id, classi e tag concatenando più selettori con la "virgola".
- action(): funzione o più semplicemente azione che deve essere eseguita.
IMPORTANTE !!!
È davvero importante includere tutte le funzioni all'interno dell'evento
principale "document ready". Questo bloccherà ogni script da eseguire
fino a quando l'intero documento non sarà stato caricato.
$ ( document ) . ready ( function ( ) {
$ ( selettore) . action ( ) ;
} ) ;

Concetti Chiave di jQuery

Concetti chiave
Come visto l'utilizzo di jQuery e del codice
Javascript per manipolare le nostre pagine HTML si
basa su 3 concetti fondamentali:
- Selezionare gli oggetti
- Interpretare degli eventi
- Eseguire dei metodi e quindi delle funzioni

Selettori in jQuery

Selettori
1.
jQuery utilizza principalmente i selettori css per trovare e applicare azioni agli elementi HTML.
Quindi possiamo usare i selettori di tipo, classe, id proprio come nel css.
Ad esempio:
- $("p").hide(): nasconde tutti gli elementi di tipo paragrafo
-$(".test").hide(): nasconde tutti gli elementi con classe "test"
-$("#test").hide(): nasconde tutti gli elementi con id "test"
- $("p.intro").hide(): nasconde tutti gli elementi di tipo paragrafo con classe "test"
- $("*").hide(): nasconde tutti gli elementi
All'interno dei metodi e delle funzioni è possibile richiamare anche l'elemento corrente con il
selettore $(this)
$ ( "a" ) .click ( function ( ) {
$ (this ) . css ( 'color' , ' green' ) ;
} ) ;

Eventi in jQuery

Eventi
2
Tutte le diverse azioni che i visitatori possono eseguire all'interno di una pagina web
corrispondono generalmente a degli eventi.
Un evento rappresenta quindi il momento preciso in cui accade qualcosa, ad esempio;

• Spostare il mouse su un elemento
• Selezionare un input all'interno di un form
• Cliccare su un bottone

Gli eventi più comuni sono:
Mouse events: click, dblclick, mousedown, mouse, mouseenter, mouseleave, hover
Keyboard events: keypress, keydown, keyup
Form events: submit, focus, blur
Document/Window events: resize, scroll

Metodi in jQuery

Metodi
3.
I metodi possono essere definiti banalmente come "l'insieme di tutto ciò che accade al selettore
e, se definito, dopo un determinato evento" .
Poiché jQuery è una libreria javascript in realtà possiamo utilizzare tutti i metodi propri del
linguaggio.
I più utilizzati possono essere suddivisi in tre ambiti:
Animazioni: hide, show, toggle, slide, fade
Manipolazione CSS: addClass, removeClass, toggleClass, css
Generici: alert
Documentazione

Ringraziamenti

NABA
NUOVA
ACCADEMIA
DI BELLE ARTI
Grazie
Francesco Di Muro e Tommaso Biondo