Basi ed esempi di Tecnologie Web, Appunti di Fondamenti di informatica

Scarica Basi ed esempi di Tecnologie Web e più Appunti in PDF di Fondamenti di informatica solo su Docsity! 1 Char Encoding Shift: codice per cambio mappa Codici Liberi: Non associati a caratteri Codici di controllo: associati alla trasmissione ASCII (American Standard Code for Information. Interchange) – 128 caratteri (0-31 e 127 di controllo). No codici liberi, gli altri 95 alfab. latino numeri e punteggiatura. 7 bit su 8, da 128 a 255 usati per le code page delle varie lingue. Unicode: standard unico ISO/IEC n° versione a lunghezza fissa (UCS-2 UCS-4) o variabile (UTF-8, UTF-16 e UTF 32), la versione 12.1 descrive 127.934 caratteri diversi, TUTTO, più 140.000 per privati. Unicode è - Universale - Efficiente - Caratteri non glifi (no encoding font ) - Semantica (Personale di ogni carattere) - Testo semplice (no bold) - Ordine logico (Ordine naturale) - Unificazione (Caratteri comuni se possibile vengono unificati) - Composizione dnamica (Cinese, Giapponese) - Stabilità (Codici immutabili) - Convertibilità (Facile Unicode->Altro_Encoding) Spesso si utilizza un alfabeto per volta => UCS spreca memoria => UTF meglio Content Encoding Non si possono usare sempre tutti i caratteri in ambienti informatici (caratteri dedicati), si ricorre ad - Escaping: il carattere proibito viene preceduto da caratteri speciali che definiscono lo scopo di solo utilizzo - Encoding: viene fornita tramite un carattere iniziale la codifica numerica del carattere Per mandare mail SMTP è molto limitante, MIME da una mano rendendo la lunghezza dei messaggi arbitraria e non imponendo limiti su ASCII obbligatorio, MIME dichiara il ”Content-Type” per evitare problemi di encoding, possibili anche tipi diversi nello stesso messaggio (sottomessaggi). Ha header specifici. URI UNIFORM RESOURCES IDENTIFIER – Una risorsa è una qualsiasi struttura che sia oggetto di scambio tra applicazioni nel WWW, molti URI fanno riferimento a file memorizzati in file-system ma non sempre è così: Potrebbe essere la chiave di ricerca in un Database, oppure il risultato di un elaborazione da parte di un applicazione che prenda come parametro l’URI, ecc.. (Risorsa NON File). 2 Fondamentali per includere immagini e oggetti in HTML, Link ipertestuali nei documenti, identificatori di risorse su cui esprimere affermazioni, ecc.. Gli URI sono accessibili mediante protocolli esistenti, inventati appositamente, o ancora da inventare, tutte le informazioni di accesso sono rappresentate dalla stringa URI. Sono: - Uniform Resource Locator (URL): Tramite il quale si accede direttamente alla risorsa. - Uniform Resource Names (URN): Identificazione permanente e non ripudiabile della risorsa, non necessariamente riportano info. sull’accesso. Gli URI possono essere TRASCRIVIBILI, oppure possono FORNIRE IDENTIFICAZIONE, NON INTERAZIONE, oppure possono FORNIRE SPAZI DI NOMI GERARCHICI. Struttura di un URI: schema:[//authority] path [?query] [#fragment] Es. http://www.ietf.org/rfc/rfc2396.txt oppure file://Documenti/corsi/tw04/slides/l1.html - schema è il protocollo - se c’è l’authority rappresenta l’organizzazione gerarchica, authority = [userinfo @] host: [:port] o userinfo: presente solo se c’è identificazione personale o host: nome di dominio o indirizzo IP o port: numero di porta, se è well-known-port può essere omessa - path è l’identificativo della risorsa nello spazio dei nomi identificato da schema (e se c’è dall’auth.) - query individua ulteriormente la risorsa nello spazio di nomi (Es. ?nome1=valore1&nome2=valore2=valore+in+molte+parole) - fragment individua una risorsa secondaria, associata o un frammento della risorsa primaria (Es. #fragment) ROUTE: una Route è un’associazione della parte path di un URI ad una risorsa gestita o restituita dal server web, - Managed Route: Il server associa ongi URI ad una risorsa attraverso il file- system locale oppure generate attraverso computazione (risorse statiche o dinamiche) (node.js express.js) - File-system Route: Il server associa la radice della parte path ad una directory del file system locale e ogni filename valido all’interno di quella directory genera un URI corretto e funzionante (Apache) Un URI può essere risolto (Resolution) quando da esso viene generato un URL corrispondente all’URI oppure può essere dereferenziato (Dereferencing) quando si ottiene la risorsa puntata dall’URL 5 - Che venga definita ogni entità come risorsa a cui viene associato un URI (nome) - Che ogni interazione con applicazioni sia esprimibile con un metodo http (verbo) - Che ciò che viene scambiato sia uno stato della risorsa specificato attraverso un Content-Type (formato) REST vede impiegati due concetti: collezioni e individui, ad entrambi viene associato un URI Ogni operazione avviene su uno solo di questi concetti Ciò che passa come corpo di una richiesta/risposta è una rappresentazione della risorsa, non la risorsa Un API è RESTful se utilizza i principi REST nel fornire accesso ai servizi:  Descrive gli end-point (URI / route) che supporta (separando collezioni ed elementi singoli)  Descrive i metodi HTTP di accesso (cosa succede con GET, PUT, POST, DELETE, ecc..)  Descrive le rappresentazioni in Input e Output (Con un esempio fittizio e sufficientemente complesso)  Descrive tutte le condizioni di errore e i messaggi che restituisce in questi casi La documentazione di un API rappresenta il meccanismo più affidabile è manutenibile per creare un contratto e un collegamento affidabile tra servizi offerti da un server e applicazioni realizzate da un client. Swagger e Open API sono ecosistemi di tools per la creazione, documentazione e l’accesso ad API soprattutto in ambito REST MARKUP Il markup serve a render esplicita una particolare semantica del testo, specifichiamo tramite il markup le modalità esatte di utilizzo del testo nel sistema stesso. Esistono vari tipi di markup: - Puntazionale: Insieme di segni per fornire info sintattiche sul testo (punteggiatura) - Presentazionale: Indicare effetti grafici o di altro tipo, per rendere più chiara la presentazione del contenuto - Procedurale: Indicare con precisione ad un sistema automatico, che effetto attivare nella visualizzazione di un contenuto. - Descrittivo: Identificare Strutturalmente il tipo e il ruolo di ogni elemento del contenuto - Referenziale: Fare riferimento ad entità esterne al documento per fornire significato o effetto grafico ad elementi del documento. - Metamarkup: Fornire regole di interpretazione del markup che permettano di estendere o controllare il significato del markup Linguaggi di Markup: 6 SGML - Standard Generalized Markup Language: Markup leggibili, generici, strutturati e gerarchici, è uno standard ISO (International Standard Organization) la più importante organizzazione mondiale degli standard. SGML è un meta-linguaggio, un linguaggio usato per definire altri linguaggi. Un documento in un linguaggio di markup definito sulla base SGML e sempre composto da: - Dichiarazione SGML - Dichiarazione di documento (DOCTYPE) - Istanza del documento Un documento con markup di derivazione SGML (HTML, XML, ecc..) contiene: - Elementi: Hanno senso proprio, titolo, autore, paragrafi ecc.. individuati da tag iniziale, contenuto e tag finale - Attributi: Informazioni aggiuntive sugli elementi e non fanno parte del contenuto, posti dentro il tag iniziale - Entità Frammenti di documento memorizzati separatamente e richiamabili nel documento, possono essere riutilizzati garantendo la coerenza dei dati (Es. &egrave;) - Testo O #PCDATA è il contenuto effettivo del documento - Commenti Note dell’autore che non fanno parte del contenuto del documeto (<!-- -->) - Processing Instructions Elementi particolari posti dall’autore o dall’applicazione per dare ulteriori indicazioni su come gestire il documento (XML) (Quando cambiare pagina ) XML 1.0 è raccomandato dal W3C notazione Extended BNF. In XML un documento per essere rilevante per le applicazione o è valido o è ben formato, affinché sia valido è necessario un DTD, tramite il quale si possono, per l’appunto, validare i documenti Ma un documento senza DTD con struttura sufficientemente regolare può essere controllato comunque. JSON è un formato (JavaScript Object Notation) derivato dalla notazione usata da JS per gli oggetti (La controparte di Python è YAML) HTML 7 <!DOCTYPE html>: Segnala il tipo di markup usato nel documento e la versione NON case-sensitive a meno che si usi XHTML <html>: La radice dell’albero <head>: Informazioni globali su documento <body>: Il contenuto Gli elementi inline (o di carattere) non spezzano il blocco e quindi non vanno a capo, si includono uno dentro l’altro senza vincoli, si dividono in fontstyle e elementi phrase - Gli elementi fontsyle forniscono specifiche di rendering, da non usare, meglio css (<b>, <u>, <i> <tt>, <s>, <big> e <small>) - Gli elementi phrase definiscono una semantica per l’elemento e ne suggeriscono un rendering diverso (<em>, <strong>, <code>, <span>, <q>, <abbr>, ecc..) Gli elementi di blocco, definiti dai tag di blocco, definiscono l’esistenza di blocchi di testo che contengono elementi inline fra cui - Blocchi Fondamentali (<div>, <p>, <pre>[blocco preformattato*], <address>[autore], <blockquote> ) - Blocchi con Ruolo strutturale (<h1>, <h2>, ..., <h5>, <h6>) Elementi di lista: - <ul>: Unordered List – Lista non ordinata di elementi <li> Attributo ‘type’ (disc, square, circle, none) - <ol>: Ordered List – Lista ordinate di elementi <li> Attributi ‘start ‘ (valore iniziale) e type (1, a, A, i, I) - <dl> Definition List – Lista di definizioni di elementi <dt> (definition term) e <dd> (definition data) <div> e <span> sono elementi generici, privi di semantica o caratteristiche presentazionali - <div> Mantiene la natura di elemento blocco - <span> Mantiene la natura di elemento inline <hr> - Horizontal Rule: linea sottile che attraversa lo schermo <br> - Break: andata a capo forzata (solo grafica) Con HTML5 <section> : contenitore generico annidabile <article> : parte del documento auto-contenitiva <aside> : sezione collegata al testo per le note a margine, graficamente separata <header> e <footer> di una sezione 10 - Id: Identificativo UNIVOCO dell’elemento - style: stile css scritto direttamente nel tag - class: una lista separata da spazi di nomi di classe, per attribuzione di semantica e di css - title: un testo secondario associato all’elemento per fini di accessibilità o info aggiuntive Attributi i18n, classe di attributi per l’internazionalità del documento - lang: codifica dei linguaggi umani (a due lettere: it, fr, en, ecc..) - dir: uno dei due valori ltr (left-to-right) o rtl (right-to-left) per indicare la direzione di flusso di testo Attributi di Evento, per associare script a particolari azoni sul documento o sugli elementi: onclick , ondoubleclick, onmouseover, onkeypress, ecc… BIZZARRIE <p id=’center’> può essere scritto come <p id=center> senza virgolette a patto che il valore passato sia un token ovvero parole di caratteri e numeri senza spazi che inizino per un carattere <head> contiene informazione rilevanti per tutto il documento: - <title> - <link> (link di documenti per tutto il documento) - <script> - <style> - <base> (URL da usare come base per gli URL relativi - <meta> (meta-informazioni sul documento) Attributi per meta  charset codifica utilizzata nel file  name identifica un altro attributo specifico Es. <meta name=”viewport” content=”width=…, initial-scale=1”> Con questo tag imponiamo al device le caratteristiche da utilizzare per il viewport invece di quelle fisiche, in modo che il contenuto sia accedibile anche da smartphone alla peggio scrollando la pagina, con width e initial-scale=1 stiamo dicendo quanto larga considerare la pagina (in px) e che 1px in css deve essere proprio 1px su quello smartphone. (la grandezza dei px varia di device in device) HTML5 Fornisce tag per interagire al meglio con l’applicazione client-side a livello multimediale, <canvas> definisce un’area rettangolare in cui disegnare direttamente immagini bidimensionali e modificarle in base ad eventi tramite javascript. Attributi widht e height, ovviamente, e le coordinate; (0,0) è l’angolo in alto a sinistra dello schermo. Gli oggetti disegnati sono recuperati tramite un metodo javascript getContext(), parte di una vasta libreria utile a disegnare figure, trasformalre e colorarle. <video> specifica un meccanismo generico per il caricamento di file e stream video senza plug-in, più alcune proprietà del DOM per controllarne l’esecuzione. Ogni tag <video> può contenere diversi tag <source> che specificano file diversi, tra i quali il browser sceglie quello da eseguire <audio> e usato allo stesso modo per contenuti sonori 11 DOM: Document Object Model è un’interfaccia di programmazione API per documenti HTML e XML, definisce la struttura logica dei documenti ed il modo in cui si accede e si manipola il documento. Utilizzando il DOM si possono costruire dei documenti, navigare attraverso la loro struttura e aggiungere, modificare o cancellare ogni elemento di documento HTML o XML. *il core del DOM definisce delle classi fondamentali per i documenti e ne specifica proprietà e metodi. La classe principale è DOMNode (Nodo generico dell’albero che rappresenta il documento HTML), le sottoclassi derivanti sono DOMDocument, DOMElement, DOMAttr, DOMText, ecc.. DOMNode specifica i metodi per accedere a tutti gli elementi di un nodo di un documento, inclusi il nodo radice, il nodo documento, i nodi elemento, ecc.. [Es. insertBefore(), removeChild(), appendChild()] DOMDocument specifica i metodi per accedere al documento principale completo [Es. createElement(), createTextNode(), getElementById(), getElementsByTagName()] DOMElement specifica i metodi per accedere a qualunque elemento del documento * [Es. getAttribute(), setAttribute(), removeAttribute(), getElementById, ecc..] *Le funzioni sopra riportate si applicano come segue nomeNodo.setAttribute(), ecc… Classi diverse richiedono un utilizzo diverso. Alcuni metodi (o funzioni) della classe DOMNode per esempio si applicano ai figli del nodo come segue all’insieme dei figli di un dato nodo: figliNodo.appendChild(), per saperne di più: lucido 12-HTML (II parte), slides 58-60. Esempio programmatico (JavaScript) di creazione di un <div> contenente un <p> con scritto “suka” var root = document.dcoumentElement; myDiv = root.createElement(‘div’); divElement.createTextNode(‘suka’); Nota* per classe in questo argomento non si fa riferimento alle classi in css, non c’è nessun collegamento, se non il concetto stesso di classe di appartenenza CSS Gli stili in Cascading Style Sheet possono essere assegnati in tre modi 1. A tutti gli elementi dello stesso tipo 2. A tutti gli elementi della stessa classe 12 3. Ad uno specifico elemento tramite id 1. div { … } 2. .class-name { … } 3. #id-name { … } Il termine cascata nel nome css descrive come vengano considerate tutte le regole specificate, e come tutte contribuiscano allo styling degli elementi in cascata. Es. p { color:red; font-size:1000px;} p { color:green;} risulterà nel colore verdee nella dimensione d 1000px per il testo di tutti i p nel documento.  Id assume un valore unico per ogni elemento, in modo da identificare con l’id associato ad un elemento solo e sicuramente quell’elemento  class assume un valore qualunque che identificherà tutti gli elementi facenti parte di quella classe, si possono specificare più classi per uno stesso elemento Unità di misura: NON USARE MAI I PX IN CSS PERCHE’ NON E’ PREDICIBILE IL RISULATO Lunghezze assolute - cm, mm, in (cm, mm, pollici) - pt (1/72 pollice) - pc (1/6 pollice) - px (Dipende dalla risoluzione) Lunghezze relative - em (larghezza ‘M’) - ex (altezza ‘x’) - ch (larghezza ‘0’) - lh(altezza della riga) - vh, vw (percentuale dell’altezza o larghezza della viewport) - fr (una frazione dello spazio rimasto nel contenitore [esclusi gli elementi non flessibili]) Colori - ##RRGGBB - rgb(x,y,z) con x,y,z fra 0 e 255 - rgba(x,y,z,o) con o tra 0 e 1 (0 trasparente 1 opaco) In css ogni elemento è presentato da una scatola che ne contiene il contenuto le scatole sono in relazione fra loro e sono caratterizzate da flusso e posizione Flusso: proprietà display: 15 Gli stili sono applicati a cascata, uno dopo l’altro e normalmente l’ultimo sovrascrive quello precedente se c’è conflitto, ma non sempre è così, viene infatti seguito un ordine di importanza nel definire quale regola debba essere applicata, infatti abbiamo selettori più importanti di altri: 1. media-type 2. importanza (!important posto dopo la regola, es. color: blue !important) 3. origine (utente, autore, user-agent [browser]) 4. specificità del selettore (es. div viene sovrascritto da div > p, in questo modo i p dei div verranno modificati) 5. ordine di dichiarazione JavaScript Come eseguire script JS: Client-side – Lato utente: Ogni elemento del documento ha alcuni eventi associati (click, doppio-click, mouse-over, tasto-premuto, ecc…) e degli attributi associati ad essi (on+nome_event, es: onclick=”nomeFunzione()”) Inserendo istruzioni JS o chiamate di funzione nel valore dell’attributo si crea una callback, ovvero una o più istruzioni che verranno eseguite quando quell’evento si verificherà. DUE EVENTI IMPORTANTI: load (della finestra) e ready (del documento), ne riparliamo dopo. Server-side: I servizi lato server corrispondono a degli URI, aprendo una connessione ad uno specifico URI viene invocato ed eseguito lo script corrispondente all’URI NodeJS fornisce un mezzanisco per associare funzioni javascript ad ogni tipo di URI, senza che esso corrisponda necessariamente ad un file Uno SCRIPT può essere eseguito: - appena lo script viene letto in un tag <script> o in un file – maniera SINCRONA - associando il codice ad un evento event-oriented processing – maniera ASINCRONA, usualmente si fa così, clicchi su un bottone e viene eseguita la funzione specificata nell’attributo onclick - associando il codice al completamento di un’operazione di rete – maniera ASINCRONA, le operazioni ajax ( $.ajax({ … }); ) sono gestite tramite callback, la funzione indicata viene eseguita nel momento in cui la richiesta al server viene completata e i dati sono stati ricevuti o si è verificato errore - associando il codice ad un timeout – maniera ASINCRONA QUANDO UNO SCRIPT VIENE ESEGUITO IL BROWSER E’ BLOCCATO E NON RISPONDE AGLI INPUT DELL’UTENTE, E’ IMPORTANTE CHE DURINO POCO HTML permette di visualizzare l’output degli script in 4 modi 1. document.write(stringa); 2. console.log(stringa); - scrive sulla console di utilità (ctrl + shift + I ) 16 3. alert(stringa); - scrive comparire il risultato in una finestrella pop-up 4. document.getElementById(id).innerHTML = string; - modificando il contenuto del DOM, per esempio la scritta dentro un <p> Codice JS può essere scritto direttamente nell’attributo di un evento, oppure nel tag <script> oppure in un file puntato dal tag <script> Tipi di dato: Ci sono pochi tipi di dato, un dato può essere una stringa di caratteri (‘abc’, ‘c’, ‘ ‘, ‘*%’, ecc..), un numero intero o un numero floating point ovvero con la virgola (10, 10.2345, ecc…) e booleani ovvero vero (true) e falso (false). Inoltre esistono anche i tipi null e undefined TUTTI I TIPI DI DATO COMPOSTI E PIU’ ELABORATI (oggetti ottenuti da JSON, array, ecc..) sono di tipo object Mentre i dati hanno tipo, le variabili no: var anna; anna=10; anna=’minanna’; anna= [‘anna’, ‘cirasole’]; anna= [1, 2, 3, 4, 5]; Si potrebbe pensare che una variabile che abbia contenuto un numero non possa contenere una stringa, ma invece è consentito. Ci sono 2 modi di definire una variabile:  var pippo; / var pippo = 5; - definisce una variabile nello scope (visibile) della funzione in cui si trova o nel file in cui si trova, a seconda che venga scritto dentro o fuori da una funzione rispettivamente.  let pippo; / let pippo = 5; - definisce una variabile visibile (nello scope) del blocco parentetico o della riga in cui si trova (blocco parentetico: ‘{ … }’) *NOTA: per una lista completa di tutte le operazione (+, -, *, %, ++, --, ==, !=, &&, ||, ecc..) sui tipi di dato consultare Lucido 16-JavaScript (parte I) – slides 14-15 Controllo e Comandi: IF: if ( a==5 ) { 17 istruzione_1; istruzione_2; } else { istruzione_3; } istruzione_4; Le istruzioni 1 e 2 verranno eseguite se e solo se la variabile ‘a’ contiene il valore ‘5’ in seguito ad un assegnamento o ad una computazione, l’istruzione 3 verrà eseguita ‘’altrimenti’’, else, quindi se ‘a’ non fosse uguale a 5, l’istruzione_4 invece verrà eseguita sempre Es. var a=5; oppure var a=10; a=a/10; E’ possibile valutare più casi con il comando else if che va necessariamente dopo un if, esempio: If (condizione) { … } else if (condizione_diversa) {… } else {… } COSE INTERESSANTI MA NON ESSENZIALI: ‘switch’, ‘break’, ‘operatore ternario’. FINO A ##### Se ci si trova a valutare molte condizioni possibili è meglio usare uno switch, esempio: switch(a) { case 5: istruzione_1; istruzione_2; … break; case 10: … break; } L’istruzione break; di sopra è importante, significa “esci da questo blocco parentetico” all’esecuzione del programma. Se mancasse il break; potrebbero essere valutate come vere due condizioni, per esempio a < 10 e a==3 sono condizioni che non si escludono a vicenda. L’operatore ternario è un modo compatto di scrivere if then else e si scrive come segue: 20 nomi.indexOf(‘Francesco’) = 2 nomi.push(‘Anna’)  nomi[3]=’Anna’, nomi=[‘Andrea’, ‘Luca’, ‘Francesco’,’Anna’] nomi.pop() = ‘Anna’  nomi = [‘Andrea’, ‘Luca’, ‘Francesco’] nomi.shift() = ‘Andrea ‘  nomi=[‘Luca’, ‘Francesco’] nomi.unshift(‘Sara’) = ‘Sara’  nomi=[‘Sara’,‘Luca’, ‘Francesco’] nomi.slice(0,2) = [‘Sara’, ‘Luca’], restituisce un array da start ad end escluso nomi.join(“, “) =”Sara, Luca, Francesco”. Restituisce una stringa composta dal contenuto dell’array separando un elemento dall’altro tramite il contenuto di (“ “) Oggetti possono contenere array e array possono contenere oggetti liberamente, attenzione alle parentesi JSON: E’ un formato dati derivato dalla notazione usata per gli oggetti in JS { "nome": ["Giuseppe", "Andrea", "Federico"], "cognome": "Rossi", "altezza": 180, "nascita": "1995-04-11T22:00:00.000Z", "indirizzo": { "via": { "strada": "Via Indipendenza", "numero": "15" }, "citta": "Bologna", "nazione": "Italia" }, "telefono": [ { "tipo": "casa", "numero": "051 123456"}, { "tipo": "cell", "numero": "335 987654"} ] } CARATTERSTICHE:  valori solo string, boolean, array, number o object  anchhe i nomi delle proprietà sono fra virgolette  solo virgolette doppie “ “  no commenti Ci sono solo due metodi per i JSON: var x = { nome: ‘Lucio’, voto:10 } x = JSON.stringify(x);  x ora vale la stringa ‘{ “nome” : “Lucio”, “voto” : “10” }’ x = JSON.parse(x);  x ora vale l’oggetto {nome:”Lucio”, voto: 10} L’oggetto Date è un oggetto predefinito di JS, scrivendo var d = new Date(); d conterrà la data attuale e potremo accedere ai vari campi tramite getDay(), getMonth(), ecc… e manipolarla tramite toDateString(), ecc… Ogni browser ha degli oggetti predefiniti, i principali sono: window: oggetto top-level con proprietà e metodi della finestra principale fra cui la posizione, le dimensioni, e la possibilità di aprire altre finestre 21 navigator: oggetto con le proprietà del client come nome, numero di versione, plug-in installati, supporto cookie, ecc.. location: URL del documento corrente, modificandolo il client accede a un nuovo URL: window.location history: l’array degli URL acceduti durante la navigazione document: rappresenta il contenuto del documento ed ha proprietà e metodi per accedervi: document.title, document.forms[0] che accede al primo form del documento document.form[0].elements[0].value che accede al valore del primo elemento nel primo form e così via Inoltre è possibile accedere agli eventi tramite ad esempio window.onkeypress = pressed e definendo la funzione pressed come segue : function pressed(e) { alert(“Hai premuto il tasto ” + e.which ) } siamo in grado di dire quale tasto è stato premuto Teniamo a mente il seguente HTML: <div id=”d”><p>HEI</p></div> Due funzioni interessanti sono  document.innerHTML che legge/scrive il contenuto di un sottoalbero escluso il tag radice  document.outerHTML che legge/scrive il contenuto di un elemento compreso il tag radice Es. myElement = document.getElementById(“d”); alert(myElement.innerHTML);  Mostrerà a schermo ‘<p>HEI</p>’ alert(myElement.outerHTML);  Mostrerà a schermo ‘<div id=”d”><p>HEI</p></div>’ E questo è uno dei modi possibili per modificare la pagina in maniera programmatica I metodi in DOM per accedere ai nodi del documento sono essenzialmente - getElementById: solo l’elemento con quell’id - getElementsByName: se l’elemento ha attributo name (anche più di uno) - getElementsByTagName: tutti gli elementi con nome specificato Dato il successo di jquery anche - getElementsByClassName: cerca tutti gli elementi della classe - querySelector: accetta un qualunque selettore CSS e restituisce il primo trovato - querySelectorAll: accetta un qualunque selettore CSS e restituisce tutti quelli trovati AJAX – Asynchronous JavaScript And XML: Tecnica per la creazione di app Web interattive, permette l’aggiornamento asincrono di porzioni di pagine HTML, quindi senza aspettare e senza cambiare pagina. 22 Non è un linguaggio di programmazione o una terminologia, è un termine che indica l’utilizzo di una combinazione di tecnologie comunemente usate sul web: - XHTML e CSS - DOM modificato attraverso JavaScript per la manipolazione dinamica dei contenuti e dell’aspetto - XMLHttpRequest (XHR) per lo scambio di messaggi asincroni fra browser e web server - XML o JSON come meta-linguaggi di scambio dati Un applicazione AJAX si divide in 3 momenti 1. Creazione e configurazione delle richieste per il server 2. Esecuzione e memorizzazione delle risposte (o errori) 3. Modifiche al DOM 1a. Creazione dell’oggetto XMLHttpRequest varia a seconda del browser, ma generalmente: http_request = new XMLHttpRequest(); 1b. Inizializzazione della richiesta ovvero bisogna specificare la funzione che si occuperà di gestire la risposta e poi bisogna aprire la connessione al server: http_request.onreadystatechange = nome_della_funzione; http_request.open(‘GET’,’http://www.suka.org/some.file’, true ); I parametri della open specificano: - Il metodo della richiesta (GET) - L’URL a cui inviare la richiesta - Un booleano che indica se la richiesta è asincrona - Eventualmente nome utente e password 1c. Invio della richiesta tramite send http_request.send(null); il parametro contiene il body della risorsa da inviare al server - Per una POST ha la forma di una query-string: name=value&anothername=othervalue&so=on - Per una GET ha valore null perché i parametri sono passati nell’URL della open precedente 2a. Gestione della risposta tramite la funzione incaricata: function nome_della_funzione() { if(http_request.readyState == 4){ //Risposta ricevuta } else { //Risposta non ancora ricevuta } I valori di readyState sono: 0 = uninitialize, 1=loading, 2=loaded, 3=interactive, 4=complete Poi è necessario controllare lo status di risposta http if(http_request.status == 200) 25 Programmazione asincrona 1. Una richiesta Ajax viene eseguita asincronicamente rispetto alla navigazione della pagina HTML 2. La gestione dei dati ricevuti via Ajax viene eseguita asincronicamente rispetto all’emissione della richiesta 3. La gestione degli eventi viene eseguita asincronicamente rispetto alla specifica della funzione callback 4. setTimeout(n) posticipa di n millisecondi l’esecuzione di una funzione Es. d’esame: function test() { $("#test").append("Ho messo "); var ajax = $.ajax({ "url": "http://www.google.com", "success": function(data) { $("#test").append("l'arrosto "); }, "error": function (data) { $("#test").append("la verdura "); } }); $("#test").append("nel forno ") ; } Qual è il contenuto dell’elemento con id test alla fine dell’esecuzione della funzione test se la chiamata ajax restituisce status 200? La risposta è ‘Ho messo nel forno l’arrosto’, non ‘Ho messo l’arrosto nel forno’ perché la funzione del risultato della chiamata ajax (success o error ) viene eseguita in maniera asincrona rispetto allo script di invocazione (‘test’); La modalità asincrona è l’approccio utilizzato per evitare lunghi momenti di attesa client-side, analizzeremo lo stesso esempio con approcci diversi nel quale viene richiesto un insieme di commenti da un dataBase (DB) per poterlo scrivere in un documento HTML. Abbiamo esigenze di asincronicità ogni volta che abbiamo l'esigenza di chiamare un servizio sulla cui disponibilità o sui cui tempi di esecuzione non abbiamo controllo. var database = remoteService.setDatabaseAccessData() ; var result = database.query("SELECT * FROM hugetable"); var output = prepareDOM(result); document.getElementById(“display").appendChild(output); 26 Non ho controllo sui tempi di esecuzione del comando database.query, che potrebbe metterci molto tempo. Nel frattempo il processo è bloccato in attesa del ritorno della funzione, e l'utente percepisce un'esecuzione a scatti, non fluida, non responsive. Nella situazione descritta dal codice di sopra l’attesa potrebbe essere enorme e il sito o l’app sarebbe bloccato per tantissimo tempo. Soluzioni: 1. Logica server-side fare un’unica richiesta al server che si occuperà di tutti i dettagli, c’è comunque molta attesa e non ci sono vantaggi nell’utilizzo di Ajax, inoltre la logica dell’applicazione è divisa in due luoghi virtuali, server e client, con evidenti difficoltà di gestione. function searchProducts(query) { var DB = services.setDBAccess('all') ; var allData = DB.search(query); var output = prepareDOM(allData.products, allData.opinions, allData.tweets); document.getElementById(“display").appendChild(output); } 2. L’approccio più comune è la gestione tramite codice asincrono callback: passo una funzione callback come argomento di chiamata a funzione, che viene eseguita alla conclusione del servizio. function searchProducts(query) { var productDB = services.setDBAccess('products') ; productDataBase.search(query_identifier, function(products) { var out = prepareDOM(products); document.getElementById("products").appendChild(out); }); } Però le callback: - non possono restituire valori al chiamante, ma solo eseguire azioni con i dati ottenuti - sono funzioni indipendenti e vengono eseguite alla fine dell’esecuzione della funzione cha la chiama - Non hanno accesso alle variabili locali della funzione chiamante, solo alle variabili globali e di closure 3. Le promesse sono oggetti che, si promette, tra un po’ conterranno un valore. La promessa viene creata dalla funzione chiamante e mantenuta dalla funzione chiamata: function search(query) { var db = 'products' ; return new Promise(function(resolve) { var DB = services.setDBAccess(db); DB.search(query, function(data) { resolve(data); } }); } search(query).then(function(data) { var output = prepareDOM(data); document.getElementById("display").appendChild(output); }); 27 4. generator/yield: Il generatore è una meta-funzione che restituisce una funzione che può essere chiamata ripetutamente ed interrotta fino a che ne hai nuovamente bisogno. Ha una sintassi particolare con * dopo function. Il comando yield mette in attesa l’assegnazione di valore fino a che non si chiude l’esecuzione della funzione chiamata. La funzione next() fa proseguire l’esecuzione della funzione fino al prossimo yield. function *main(query) { var products = yield productDB.search(query) ; var opinions = yield opinionDB.search(products); var tweets = yield twitter.search(opinions); var output = prepareDOM(products, opinions, tweets); document.getElementById("display").appendChild(output); } var m = main(); m.next(); 5. async/await si antepone async alla chiamata che deve essere eseguita in maniera asincrona e await a tutte le chiamate all’interno del corpo della funzione asincrona che devono restituire dei dati 6. promise.all: se ho molte chiamate asincrone indipendenti (cioè in cui non debbo aspettare il risultato di una per richiedere la seconda), posso usare Promise.all() var p1 = new Promise(productDB.search(query)); var p2 = new Promise(opinionDB.search(query)); var p3 = new Promise(twitter.search(query)); Promise.all([p1, p2, p3]).then(function(values) { var output = prepareDOM(values[0],values[1],values[2]); document.getElementById(“display").appendChild(output); }); Framework JavaScript I Framework Ajax sono librerie JS che semplificano la vita nella creazione di applicazioni Ajax anche complesse, hanno tre scopi fondamentali: - Astrazione: gestiscono le differenze tra browser e forniscono un modello di programmazione quasi unico che funziona quasi su tutti i browser - Struttura dell’applicazione: forniscono un modello di progettazione dell’app omogeneo indicando con esattezza come e dove fornire le caratteristiche dell’applicazione - Libreria di widget: forniscono una ricca collezione di elementi di interfaccia liberamente assemblamenti per creare velocemente interfacce sofisticate e modulari Tutti i framework hanno caratteristiche comuni: - Accesso al DOM, quindi la possibilità di navigare il documento, di selezionare elementi per nome, id, class, path, ecc…, possono modificare dinamicamente il contenuto degli elementi e dello stile CSS (Posizione, Comparsa/Scomparsa, Caratteristiche tipografiche). - La possibilità di effettuare comunicazioni asincrone con il server (Ajax), quindi gestione asincronicità e callback, successo ed errori e conversione da e per JSON. - Gestiscono eventi tramite selezione, associazione, Bubbling degli eventi - Libreria di widget, quindi layout complessivo della pagina, elementi dei form, animazione, tabelle intelligenti e alberi, e templating JQuery: La prima peculiarità sintattica di JQuery è l’utilizzo della keyword $ per ogni comando della libreria 30 MEAN Stack è un termine molto importante adesso: - MongoDB: un database NoSQL che fornisce pemanenza ai dati delle applicazioni - ExpressJS: un framework per applicazioni web - AngularJS: un framework MVC per creazione di template sofisticati di pagine HTML - NodeJs: una piattaforma software per applicazioni server-side Lo scopo evidente dello stack MEAN è di ripetere il successo e sotituirsi allo stack LAMP che ha costituito il set fondamentale di tecnologie per lo svilupo di app web negli anni 2000. NodeJs e npm: Servono a fornire bidirezionalità alle app. web (tecnologia push) Si tratta di un’applicazione nativa server-side che permette di fare chiamate I/O guidate da eventi non bloccanti. Per uniformare la realizzazione di applicazioni miste server/client, decide di usare motore JS anche server- side, ad esso viene aggiunto un package manage: npm, che permette di installare velocemente librerie e pacchetti associati. SINGLE-THREAD NON-BLOCKING EXECUTION Invece di dedicare un thread ad ogni connessione ricevuta dalla rete, l’applicazione nodeJS utilizza un solo thread in cui tutte le richieste ricevono attenzione condivisa. Mantenere tutto in un unico stack porta nodejs a non avere limiti dati dalla memoria allocabile, il limite teorico di nodejs infatti è di circa 1Milione di richieste correnti. NodeJS è quasi esclusivamente basato su funzioni asincrone e callback. La convenzione suggerisce di creare funzioni che prendano come ultimo parametro una funzione callback asincrona che per convenzione usa sintassi error-first. Node.js è molto modulare. E’ Possibile includere file di codice javascript da eseguire su necessità, caricare un modulo è molto semplice: - Un modulo è un file JS - Quando si richiede tramite require(‘module_name’) il file viene cercato localmente o globalmente secondo un modello determinato. Express.js (app.method): E’ un modello di server web node.js, si dedica al routing, alla gestione delle sessioni, all’autenticazione degli utenti e molto altri fondamenti delle connessioni http. ACCEDERE AI DATI DI UN POST: La libreria bodyparser (integrata con express) permette di accedere al corpo dei dati spediti dal POST nel body della richiesta, questi middleware si occupano di recuperare e elaborare i dati sottomessi da un form via post e li convertono in oggetti accessibili dall’applicazione come segue: <request>.body.<post_variable> Express ha poche funzionalità proprie (routing) ma utilizza un grande numero di librerie middleware personalizzabili in uno stack di servizi più complessi. Per aggiungere un middleware allo stack si usa: app.use(<middleware>). Un’app. Express è essenzialmente una sequenza di ciamate di funzioni middleware tra la richiesta e la risposta. Il middleware può: - Accedere agli oggetti di richiesta e risposta - Cambiarli ed eseguire del codice di modifica - Chiamare la prossima funzione del middleware ( next() ) - Uscire dal ciclo e mandare la risposta Metadati 31 L’inconfrontabilità del sapere deriva principalmente dalla differenza, molteplicità e ambiguità intrinseca di molti termini usati nella ricerca sul web. I linguaggi di markup in tal senso forniscono una soluzione, chiara ed indipendentemente dall’applicazione, ad alcuni problemi nella gestione di dati: - Delimitazione: i tag sono chiaramente e visibilmente diversi dai dati. Sono metadati che non fanno parte del contenuto e hanno delimitatori con chiari meccanismi di escaping. - Etichettatura: i documenti sono organizzati gerarchicamente e aggiungono ai dati etichette che permettono di dare senso ai frammenti e di includere e gestire anche le eccezioni. - Codifica: il markup basato su SGML, XML e HTML fornisce uno modello chiaro, non ambiguo e universale per la codifica di caratteri, assumendo un modello universale per default (UTF-8) e un meccanismo di ordinamento dei dati privo di dipendenze dall’hardware. Il significato non sta nei dati, non sta nel markup (tag), non sta nel documento che specifica il vocabolario ristretto e i suoi vincoli e non sta nello strumento HTML. Il significato sta nell’applicazione che gestisce il contenuto del documento di markup e nella mente dell’essere umano che scrive o legge il contenuto del doc. di markup, sia formato sorgente che nel formato reso dal browser. Il Semantic Web La soluzione è il semantic web: astratto, sintattico privo di significati e comportamenti predefinti una definizione delle cose basata su affermazioni su qualche classe o dominio. Richiede strumenti software per fornirsene: - RDF: Meccanismo generico per esprimere affermazioni - OWL: Meccanismo generico per organizzarle e strutturarle Le meta-informazioni consentono di rendere le informazioni sui documenti non soltanto leggibili ma anche interpretabili in maniera intelligente dalle applicazioni di rielaborazione e dai motori di ricerca PICS – Platform for Internet Content Selection nasce dal W3C per il controllo dei contenuti in rete: vengono coinvolte associazioni di consumatori in un meccanismo di rating dei contenuti di siti e applicazioni web e individua nel singolo utente il compito di attivare o meno un controllo, viene adottato dai principali Browser immediatamente. Non forniva un sistema fisso di categorie e valori che potevano essere definiti dalle singole associazioni , né forniva un meccanismo centralizzato per memorizzare il rating di ciascun sito, ma un’architettura distribuita secondo la quale il consumatore si abbonava ad un particolare sito di rating, stabiliva le politiche di selezione del contenuto visibile ed era autorizzato a visitare soltanto quel sottoinsieme di pagine fornite dalle soglie del rating. PICS tuttavia richiedeva di identificare a priori le categorie rilevanti e tutti i valori da assegnare a qualunque categoria, questo più il successo di XML più il Semantic Web portano ad RDF. L’organizzazione delle Informazioni: I METADATI: dato a proposito di qualcosa (es. informazioni sul documento nella sua interezza, informazioni che non appartengano originariamente al documento). Sono: - Esterni : Parla di una risorsa terza a cui da significato 32 - Interni : E’ contenuto nel documento stesso - Riflessivo : E’ interno e parla del documento e di se stesso - Autoriale : Vengono forniti dall’autore del documento - Redazionale : Forniti da membri della catena di produzione del documento - Oggettivo : Sono informazioni oggettive - Soggettivi : Che rappresentano un’interpretazione personale - Dissettivi : Che si applica ad ogni parte del documento - Anti-dissentivi : Che non si applica ad ogni parte del documento VOCABOLARIO CONTROLLATO O linguaggio di indicizzazione: mentre alcuni metadati richiedono un vocabolario infinito (es. nomi propri di persona per l’autore), altri valori di metadato possono essere compresi in un insieme finito di valori precisi dotati di significato e applicabilità, non ridondanti o ambigui e completi rispetto al dominio dei valori possibili La tassonomia crea una gerarchia tra i termini di un vocabolario controllato mettendoli in relazione di specificità o generalità, la tassonomia non cambia il metadato né i valori possibili ma fornisce un ordine ed una organizzazione dei termini. La tassonomia introduce termini non istanziabili come valori di metadato con l’unico scopo di creare raccordo tra i valori possibili (magari perché troppo generici, per es. un mammifero non può essere solo un mammifero, ma è anche un canide, primate, felino, ecc..). In OOP si chiamano classi astratte. Un tesauro è una tassonomia a cui si aggiungono relazioni di pari livello tra i termini, consente di trovare un punto di incontro tra lessico dell’autore e lessico dell’utente e propone una relazione biunivoca tra termine e concetto in modo da ottenere unicità semantica: un termine per ogni concetto e viceversa. L’unicità semantica dei tesauri elimina i problemi legati all’uso del linguaggio naturale (ambiguità, ridondanza, omonimie, ecc..) che rendono difficile il compito dei motori di ricerca. Inoltre generalizzano la gerarchia tra termini della tassonomia in un generico insieme di relazioni tra termini che non siano solo gerarchiche: - Relazioni gerarchiche: Subordinazione in uno stesso albero gerarchico - Relazioni preferenziali o sinonimiche : Termine preferito o equivalente per il concetto cercato - Relazioni associative: Una relazione né di equivalenza né di subordinazione ma evidente. Relazione preferenziale: Identifica un gruppo di equivalenza tra termini, tra i quali si sceglie quello preferito, gli altri vengono detti non preferiti o sinonimi La relazione tra termine non preferito e preferito (NPT e PT) si chiama USE la relazione inversa si chiama UF (Use For) Rientrano in questa categoria: - Sinonimia propria - Varianti Ortografiche 35 E’ un’organizzazione a priori che non può essere riorganizzata e la struttura è dipende fortemente dall’organizzatore, non flessibile. PMEST: L’inventore della classificazione a faccette aveva anche identificato le 5 faccette primarie (PMEST) - Personality: Ciò di cui si parla - Matter: Materiale fisico con cui si agisce sulla Personality - Energy: L’azione che si compie - Space: Il luogo fisico in cui si compie l’azione - Time: Il tempo in cui si compie l’azione Ogni faccetta può essere usata più volte con valori in gerarchia generica (is_a). Ad esempio, i libri sulla cura della tubercolosi ai polmoni con raggi X nell’india deli anni cinquanta verrebbero resi come: - Personality: Medicina:Polmoni - Matter: Tubercolosi - Energy: Cura - Space: India - Time: ‘50 MARC21 - Machine Readable Cataloging, inventato per la catalogazione informatica. 24 byte ciascuno dei quali contiene codici di catalogazione, descrizione e controllo (21 fa riferimento alla versione attualmente in uso). C’è corrispondenza numerica tra le etichette della scheda e il campo corrispondente al valore dell’etichetta. C’è suddivisione in sottocampi per aggiungere informazioni sull’entità dell’etichetta rappresentata. Dublin Core Etichette ragionevoli alle risorse di rete, è una classificazione a faccette considerata come un’ontologia attraverso la creazione di una classe documento a cui tutte le proprietà di classificazione fanno riferimento. E’ indipendente da qualunque sintassi ma si usa bene con RDF, la versione 2 ha introdotto un meccanismo di sottoclassi delle categorie ed ha introdotto un elenco iniziale di qualificatori DC – Categorie e Classificazione Quindici categorie che descrivono meta-informazioni di tre tipi Contenuto Proprietà intellettuale Istanza Title Creator Date Subject Publisher Format Description Contributor Identifier Type Rights Language Source Relation Coverage I qualificatori permettono di specificare ulteriormente informazioni di queste categorie, secondo questi criteri: 36  Raffinamento dello schema: fornire alcuni significati più precisi sui termini (es. Date: created/valid/available/issued/modified)  Supporto per codifiche specifiche: permettere di usare i valori di particolari codifiche usate all’interno del DC (es. Subject: LCSH – Library of Congress Subject Headings /MeSH – Medical Subject Headings /DDC – Dewey Decimal Classification) DC - ENTITA’ - Titolo (Title): nome dato alla risorsa con la quale sarà conosciuta - Autore (Creator): Entità che ha la responsabilità della produzione del contenuto della risorsa - Soggetto (Subject): Argomento principale della risorsa, in particolare un soggetto può essere espresso da parole o frasi chiave (Scelti fra un vocabolario controllato o schema di class. formale). - Descrizione (Description): Spiegazione del contenuto della risorsa. Testo con contenuto libero. - Editore (Publisher): Entità responsabile della risorsa. - Autore di contributo subordinato (Contributor): Entità responsabile della produzione di un contributo al contenuto della risorsa - Data (Date): Data associata ad un evento del ciclo di vita della risorsa. Normalmente associata al momento della creazione o di disponibilità della risorsa (YYYY-MM-DD) - Tipo (Type): Natura o genere del contenuto della risorsa. Include termini che descrivono categoria generali, funzioni, generi, o livelli di aggregazione per contenuto (da vocabolario controllato). - Lingua (Language): Lingua del contenuto intellettuale della risorsa (<linguaggio>[ - <paese>]) - Copertura (Coverage): Estensione o scopo del contenuto della risorsa. Normalmente include lo spazio, il tempo o una giurisdizione - Gestione dei diritti (Rights Management): Informazioni sui diritti esercitati sulla risorsa, normalmente contiene un indicazione sula gestione dei diritti di una risorsa o un riferimento al servizio che fornisce questa informazione. Comprende Intellectual Property Rights (IPR), il copyright e altri diritti di proprietà, se assente non si possono fare ipotesi. DC - Esempio in JSON-LD: { "@context": { "dc": "http://purl.org/metadata/dublin_core#" }, "@id": "http://www.dlib.org", "dc:Date": "2009-01-07", "dc:Description": "Bla Bla", "dc:Format": "text/html", "dc:Language": "en", "dc:Publisher": "Corp. For National Research Initiatives", "dc:Subject": [ "Research; statistical methods", "Education, research, related topics", "Library use Studies" ] 37 } DC - Esempio in Turtle: @prefix dc: <http://purl.org/metadata/dublin_core#> . <http://www.dlib.org> dc:Date "2009-01-07" ; dc:Description "Bla Bla" ; dc:Format "text/html" ; dc:Language "en" ; dc:Publisher "Corp. For National Research Initiatives"; dc:Subject "Library use Studies" , "Education, research, related topics" , "Research; statistical methods" . DC - Esempio in XML-RDF: <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/metadata/dublin_core#"> <rdf:Description rdf:about="http://www.dlib.org"> <dc:Title>D-Lib Program</dc:Title> <dc:Description>Bla Bla</dc:Description> <dc:Publisher> Corp. For National Research Initiatives </dc:Publisher> <dc:Date>2009-01-07</dc:Date> <dc:Subject><rdf:Bag> <rdf:_1>Research; statistical methods</rdf:_1> <rdf:_2>Education, research, related topics</rdf:_2> <rdf:_3>Library use Studies</rdf:_3> </rdf:Bag></dc:Subject> <dc:Type>World Wide Web Home Page</dc:Type> <dc:Format>text/html</dc:Format> <dc:Language>en</dc:Language> </rdf:Description> </rdf:RDF> FRBR Functional Requirement for Bibliographic Records nata con lo scopo di definire concetti di catalogazione. Con lo scopo di elaborare un modello che permetta ad ogni utente di reperire informazioni in base alla propria lingua ed esigenze, identificare documenti e riutilizzare i dati ottenuti. La gerarchia IFLA FRBR: - Work: una creazione intellettuale distinta - Identita - Expression: la forma specifica in cui un’opera viene realizzata - Contenuto - Manifestation: La rappresentazione di un espressione sulla base dei requisiti di un medium - Forma