Appunti Laboratorio di scritture multimediali e web design

RAPPRESENTAZIONE DELLA REALTA

Prospettiva geometrica:

• PITTURA (2D) realismo pittorico
• FOTOGRAFIA (2D) fotorealismo
• MOTION PICTURE (2D + tempo) fotorealismo, movimento passivo e predefinito (connessione - spazio-tempo)
• REALTA VIRTUALE (3D + interattività + tempo) fotorealismo, movimenti attivi e interattivi, immersione fisica, visiva, uditiva

Interattività = action + inter (tra) media + hyper links

• REALTA AUMENTATA (AR = Real Reality + VR) elemento virtuale in un ambiente reale (es. pokemon go)
• VIRTUALITA AUMENTATA elemento reale in ambiente virtuale
• MIXED REALITY

VRML (virtual reality motion language): X3D

Ambiente / oggetto

FOTOGRAFIA A 360 OIL SUONO

FISICA

Onde sonore (meccaniche e longitudinali)

A = ampiezza

T = periodo f = 1/f f oscillazioni di molecole, -1 -1 =condensazione, compressione/espansione, disturbi derivanti da vibrazioni

F = frequenza 1/T = V/ V = velocità  = lunghezza d’onda V.T =

e intensità possono avere timbri diversi) saturation

e rumorosità ma diversi)→ saturation

TECNOLOGIASINTESI DEL SUONO E STRUMENTI MUSICALI

Intonazione Timbro

SCENA UDITIVA

IL SUONO DIGITALE

SAMPLES vs OBJECT

SAMPLE BASED SOUND wave→Sequenza strutturata di valori di pressione/densità (samples, onde)

La pesantezza dipende dalla risoluzione (temporale)

OBJECT BASED SOUND MIDI→Descrizione matematico – musicale di suoni (oggetti, note, strumenti)

La pesantezza non dipende dalla risoluzione

SAMPLE BASED SOUND

DIMENSIONE E RISOLUZIONE

Dimensione sonora continua = suoni fisici (percezione analoga, continue variazioni di pressione) seconds→Dimensione sonora continua = suoni digitali samples→Risoluzione del suono (informazioni archiviate con i dati del suono) e del device (fisica o simulata) = dim.discreta (samples) / dim. continua (secondi) Hz (hertz, samples per second)→Esempi:Orecchio = 20 Hz – 20 kHz (20.000 Hz)Voce = 100 Hz – 4 kHz

FILE SIZE AND RATE- SAMPLING = samples per second

Durata =

dimensione in secondi o in samples

QUANTIZING = levels per sample

ENCODING = bit (codici) per sample

Dimensione del file (non compresso) bit, bytes→Bit rate (non compresso) bit/seconds→

COMPRESSIONE (lossy o lossless)

Dimensione del file (compresso) bit, bytes→Bit rate (compresso) bit/seconds→

CANALI = fonti del suono (mono, stereo, surround…)

Dimensione del file (compresso) bit, bytes→Bit rate (compresso) bit/seconds→

Esempi: Case studies

FORMATI DI FILE

MIDI (per il compositing) musical instrument digital interface (protocollo di comunicazione + specifiche HW)→

Sequenza di istruzioni, descrizione di eventi/oggetti (note, strumenti, azioni) flessibile, facilmente programmabile

suono sintetizzato su una tessera o archiviato su disco come un sample (banca di suoni)

In origine ideato come un protocollo standard per la comunicazione tra attrezzature elettroniche (interfaccia HW + istruzioni)

Sequencer: device programmabile

• usato per controllare gli strumenti con una sequenza di istruzioni MIDI daun’interfaccia built-in a un MIDI basato su computer

TESTO DIGITALE E IPERTESTO

INFORMAZIONI GENERALI

• Network = elementi connessi (internet: inter-network)
• BROWSER = programma
• SOFTWARE (sistema operativo e app) le web app non vengono scritte in linguaggio HTML→Nel web 2.0 i social network consentono facilità nell’utilizzo (one button publishing)
• FIRMWARE = software scritto in hardware (forma intermedia tra i due)
• SURFACE WEB = porzione del WWW i cui contenuti sono indicizzati e accessibili da un normale motoredi ricerca
• DEEP WEB = è l’insieme delle delle risorse informative del World Wide Web non indicizzate dai normalimotori di ricerca
• DARK WEB = anonimo, tecnologia che si usa per definire i contenuti del World Wide Web nelle Darknet(reti oscure) che si raggiungono via internet attraverso specifici software, configurazioni

Un esempio di contenuto dinamico è un sito web che mostra le ultime notizie in tempo reale. Questo tipo di contenuto viene generato dal server utilizzando scripting languages come PHP e viene visualizzato sul client utilizzando JavaScript o jQuery. Alcuni esempi di tecnologie server-side sono: - PHP: un linguaggio di scripting ampiamente utilizzato per la creazione di siti web dinamici. - SQL: un linguaggio di interrogazione dei database utilizzato per gestire e manipolare i dati all'interno di un database. Alcuni esempi di tecnologie client-side sono: - JavaScript: un linguaggio di programmazione che consente di aggiungere interattività e funzionalità avanzate ai siti web. - jQuery: una libreria JavaScript che semplifica la scrittura di codice JavaScript e offre una vasta gamma di funzionalità predefinite. Queste tecnologie consentono agli sviluppatori di creare siti web interattivi e dinamici che possono adattarsi alle esigenze degli utenti e fornire un'esperienza personalizzata.visibilità sui motori di ricerca• CMS (content management system) per la gestione dei contenuti di un sito web• HTML (hypertext markup language) linguaggio di markup per la creazione di pagine web• CSS (cascading style sheets) per la formattazione e lo stile delle pagine web• JavaScript linguaggio di programmazione per rendere le pagine web interattive• PHP (hypertext preprocessor) linguaggio di scripting lato server per la creazione di applicazioni web dinamiche• SQL (structured query language) linguaggio per la gestione dei database• XML (extensible markup language) linguaggio di markup per la rappresentazione dei dati• JSON (javascript object notation) formato di scambio dati leggero e leggibile per le macchine• API (application programming interface) insieme di regole e protocolli per l'interazione tra software• MVC (model-view-controller) pattern architetturale per lo sviluppo di applicazioni web• Agile (agile software development) metodologia di sviluppo software basata su iterazioni rapide e collaborazione tra team• DevOps (development and operations) approccio che integra lo sviluppo e l'operatività del software• Cloud computing modello di erogazione di servizi tramite internet• Big data gestione e analisi di grandi quantità di dati• Machine learning tecnica di intelligenza artificiale per l'apprendimento automatico da dati• IoT (internet of things) interconnessione di oggetti fisici tramite internet• Blockchain tecnologia di registrazione distribuita e sicura• Cybersecurity sicurezza informatica per proteggere i sistemi e i dati• Social media piattaforme online per la condivisione di contenuti e l'interazione sociale• E-commerce commercio elettronico tramite internet• Mobile app applicazioni per dispositivi mobili• Virtual reality realtà virtuale simulata tramite computer• Augmented reality sovrapposizione di elementi virtuali alla realtà fisica• Artificial intelligence intelligenza artificiale per simulare il pensiero umano• Data mining estrazione di informazioni utili da grandi quantità di dati• User interface design progettazione dell'interfaccia utente per un'esperienza intuitiva• Web design progettazione grafica e funzionale di siti web• Web development sviluppo di siti web e applicazioni web• Software engineering ingegneria del software per la progettazione e lo sviluppo di software• Information architecture organizzazione e strutturazione delle informazioni in un sistema• Usability testing test di usabilità per valutare l'esperienza utente• Responsive design progettazione di siti web adattabili a diversi dispositivi• Mobile-first design approccio di progettazione che parte dal mobile per adattarsi ai dispositivi desktop• Content strategy strategia di gestione e creazione dei contenuti di un sito web• User research ricerca e analisi delle esigenze e dei comportamenti degli utenti• A/B testing test comparativo tra due versioni di un elemento per valutarne l'efficacia• Wireframing creazione di bozze schematiche per la progettazione di un'interfaccia• Prototyping creazione di prototipi interattivi per testare e validare un'idea• Agile manifesto manifesto che definisce i principi dell'approccio agile• Scrum framework agile per la gestione di progetti• Kanban metodo visuale per la gestione del lavoro• Lean startup approccio di sviluppo basato sulla creazione di un prodotto minimale funzionante• Continuous integration integrazione continua per un rilascio frequente e affidabile del software• Version control controllo delle versioni del software per la gestione delle modifiche• Code review revisione del codice per garantire la qualità e l'efficienza• Test-driven development sviluppo guidato dai test per garantire la correttezza del software• Pair programming programmazione in coppia per migliorare la qualità del codice• Refactoring miglioramento del codice senza modificarne il comportamento esterno• Debugging individuazione e correzione degli errori nel codice• Deployment rilascio del software in produzione• Continuous delivery consegna continua del software per ridurre i tempi di rilascio• Scalability scalabilità del software per gestire un aumento di utenti e carico di lavoro• Performance optimization ottimizzazione delle prestazioni del software• Security testing test di sicurezza per individuare vulnerabilità e difetti di sicurezza• Documentation documentazione del software per facilitarne la comprensione e l'utilizzo• Project management gestione del progetto per garantire il raggiungimento degli obiettivi• Teamwork lavoro di squadra per la collaborazione e il successo del progetto• Communication comunicazione efficace per la condivisione di informazioni e il coordinamento• Problem solving risoluzione dei problemi per superare le sfide del progetto• Time management gestione del tempo per rispettare le scadenze• Leadership leadership per guidare e motivare il team• Creativity creatività per trovare soluzioni innovative• Adaptability adattabilità per affrontare i cambiamenti e le sfide• Continuous learning apprendimento continuo per rimanere aggiornati e migliorare le competenze• Professionalism professionalità per un comportamento etico e responsabile• Work-life balance equilibrio tra lavoro e vita personale per il benessere• Career development sviluppo della carriera per raggiungere obiettivi professionali• Networking creazione e gestione di relazioni professionali• Job interview colloquio di lavoro per valutare le competenze e l'idoneità• Freelancing lavoro autonomo come libero professionista• Remote work lavoro da remoto senza la presenza fisica in ufficio• Startup azienda emergente con un'idea innovativa• Entrepreneurship imprenditorialità per la creazione e gestione di un'azienda• Freelance marketplace piattaforma online per la ricerca e l'offerta di lavori freelance• Coding bootcamp corso intensivo per apprendere programmazione in breve tempo• Online learning apprendimento online tramite corsi e risorse digitali• Tech community comunità di professionisti del settore tecnologico• Tech conference conferenza sulle tematiche tecnologiche• Hackathon maratona di programmazione per lo sviluppo di soluzioni innovative• Open source software software con codice sorgente aperto e condiviso• Tech blog blog dedicato alle tematiche tecnologiche• Podcast podcast audio su argomenti tecnologici• Webinar seminario online su tematiche tecnologiche• Tech news notizie e aggiornamenti sul mondo tecnologico• Tech trends tendenze tecnologiche in continua evoluzione• Digital transformation trasformazione digitale delle aziende e dei processi• Artificial intelligence revolution rivoluzione dell'intelligenza artificiale• Internet of things revolution rivoluzione dell'internet delle cose• Cybersecurity challenges sfide della sicurezza informatica• Future of work futuro del lavoro nell'era digitale• Ethical considerations considerazioni etiche nell'utilizzo delle tecnologie• Data privacy privacy dei dati personali nell'era digitale• Technological advancements avanzamenti tecnologici e impatto sulla società• Innovation and creativity innovazione e creatività come motore del progresso tecnologico• Digital divide divario digitale tra chi ha accesso alle tecnologie e chi no• Technological literacy alfabetizzazione tecnologica per l'utilizzo consapevole delle tecnologie• Tech ethics etica nell'utilizzo delle tecnologie• Tech for social good tecnologie per il bene sociale• Tech for education tecnologie per l'istruzione e l'apprendimento• Tech for healthcare tecnologie per la salute e il benessere• Tech for environment tecnologie per la tutela dell'ambiente• Tech for business tecnologie per l'efficienza e l'innovazione aziendale• Tech for entertainment tecnologie per l'intrattenimento e il divertimento• Tech for communication tecnologie per la comunicazione e l'interazione sociale• Tech for transportation tecnologie per il trasporto e la mobilità• Tech for finance tecnologie per il settore finanziario• Tech for agriculture tecnologie per l'agricoltura e la produzione alimentare• Tech for energy tecnologie per l'energia e la sostenibilità• Tech for manufacturing tecnologie per l'industria manifatturiera• Tech for retail tecnologie per il settore del commercio al dettaglio• Tech for tourism tecnologie per il settore del turismo• Tech for sports tecnologie per lo sport e l'attività fisica• Tech for art and culture tecnologie per l'arte e la cultura• Tech for gaming tecnologie per i videogiochi• Tech for music tecnologie per la musica• Tech for film and television tecnologie per il cinema e la televisione• Tech for fashion tecnologie per la moda• Tech for design tecnologie per il design• Tech for architecture tecnologie per l'architettura• Tech for transportation tecnologie per il trasporto e la mobilità• Tech for finance tecnologie per il settore finanziario• Tech for agriculture tecnologie per l'agricoltura e la produzione alimentare• Tech for energy tecnologie per l'energia e la sostenibilità• Tech for manufacturing tecnologie per l'industria manifatturiera• Tech for retail tecnologie per il settore del commercio al dettaglio• Tech for tourism tecnologie per il settore del turismo• Tech for sports tecnologie per lo sport e l'attività fisica• Tech for art and culture tecnologie per l'arte e la cultura• Tech for gaming tecnologie per i videogiochi• Tech for music tecnologie per la musica• Tech for film and television tecnologie per il cinema e la televisione• Tech for fashion tecnologie per la moda• Tech for design tecnologie per il design• Tech for architecture tecnologie per l'architetturavisibilità attraverso l'utilizzo di tag html. SMM (social media marketing) / SMO (social media optimization) per la promozione di un brand sfruttando i social network.
SOCIAL MEDIA MONITORING = per misurare la quantità e la qualità di una conversazione online riguardo un brand.
NEUROMARKETING = neuroscienza applicata alla UX che studia i comportamenti dell'utente, misura l'attenzione grazie a eyetracker, mappa di calore, focus map, scan path e misura l'emozione attraverso sensori: EEG (elettro encefalo grafia) cervello→EMG (elettro mio grafia) muscoli→ECG (elettro cardio grafia) cuore→EDA (elettro dermo attività) pelle→gesti ed espressioni faccia e corpo.
Mobile optimization = consente di ottimizzare la visualizzazione del mio sito su ogni tipo di dispositivo. Le soluzioni possibili sono: fixed layout, adaptive layout, responsive layout.
METAFORA DI INTERFACCIA = sfrutta la visibilità attraverso l'utilizzo di tag html.conoscenza di altri domini dell'utente

• DESIGN USER CENTERED = ottimizza il prodotto in base a come l'utente intende utilizzarlo
• DESIGN PERSONA = personaggio finzionale che rappresenta l'utente
• ERGONOMIA = ottimizza interazione tra utente e sistema
• HTTP (hyper text transfer protocol)
• IP (internet protocol) indirizzo IP in forma xxx.xxx.xxx.xxx
• DOMAIN NAME (es iulm.it)
• CODE =markup (HTML)scripting ovvero programmare con un programma (JavaScript che è diverso da Java)programming ovvero sequenza di istruzioni (Java, Python, C, C++...)
• HTML (hyper text markup language)il mio primo sitoes: grassetto fine grassetto posiziono questi Tag prima e dopo la parola "primo" Risultato: primo in grassetto

<HTML><HEAD> (= testa, intestazione)<TITLE>Cioccolatoso</TITLE><META NAME = "Keywords" CONTENT = "cioccolato,...

il mio primo sito
con altro testo di fantasia 0000 00e con il mio primo collegamento RG Boppure (inviare messaggi) SAMPLES vs OBJECTSAMPLE BASED TEXT (psicologicamente distinto dall'immagine)Griglia strutturata di elementi colorati (sample, pixel)La pesantezza dipende dalla risoluzioneOBJECT BASED TEXTDescrizione matematica di forme (oggetti, caratteri, linee, curve)Pesantezza indipendente dalla risoluzioneTIPOGRAFIAFONTCollezione di glifi = rappresentazioni visive della forma dei caratteri- Monospace = stesso spazio orizzontale per ciascun carattere → CIAO- Proporzionato = spazio proporzionale- Serif = forma

finale alla fine di un tratto → CIAO- Sans serif = senza serif caratteri più moderni→ → CIAOSerif e sans serif sono entrambi utilizzabili per un testo quando la point size,la lunghezza della linea e lo spazio lineare sono scelti attentamente.Serif = adatto per caratteri sta