Librerie in JavaScript - dedicate alla Data Visualization
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Librerie in JavaScript dedicate alla Data Visualization
Librerie JavaScript Introduzione Per implementare un qualsiasi progetto di Data Visualization su web, occorre prevedere come indispensabile la possibilità di fornire all’utilizzatore finale l’esperienza dell’interattività (vedi cap. “Interattività e Web” dell’Introduzione). Per rendere interattiva una visualizzazione su web, le soluzioni alternative maggiormente praticate ad oggi prevedono l’impiego di: • software progettati per uno sviluppo di visualizzazioni, a scopo di esplorazione e presentazione. Tali software prevedono l’installazione su locale ed il successivo caricamento delle visualizzazioni su server web (ad es., Tableau e RStudio Shiny) • librerie in codice sorgente, progettate per uno sviluppo quasi esclusivamente su ambienti web e per fini di presentazione (ad es., Google Charts, D3, Datawrapper)
Librerie JavaScript
Presentazione ed Esplorazione
Le librerie JavaScript sono generalmente pensate per funzionare come
strumento di visualizzazione per scopi di presentazione, e non di
esplorazione.
Gli strumenti pensati per scopi di esplorazione aiutano l’utente a
scoprire/individuare tendenze significative nei dati. Software come
Tableau e ggplot2 sono concepiti per consentire agli utenti di generare
rapidamente viste multiple del medesimo insieme di dati. Questo tipo di
approccio differisce da quello di presentazione, in quanto non si
sofferma sulla rappresentazione di quanto già scoperto per evidenziarne
al meglio i particolari informativi centrali. Gli strumenti di presentazione
sono maggiormente vincolati e più limitati, ma anche più focalizzati,
essendo progettati per comunicare solo gli aspetti importanti.
Librerie JavaScript Introduzione: i
quattro strati (layer) dello sviluppo web
Strato dati (Data layer)
Lo strato dati è lo strato più importante, ma allo stesso tempo è quello
sul quale, per contro, la gente fa maggiore confusione. Una pagina web
in HTML non rappresenta in sé non è uno strato dati: quando si parla di
strato dati si fa riferimento ai contenuti. Lo strato dati è costituito dal
dato grezzo, che a sua volta si può presentare in diverse forme (testo,
immagine, suono, video, ecc.).
Per i siti più grandi, i dati sono spesso immagazzinati in database o in file
XML per essere quindi elaborati su lato server ogni volta che qualcuno vi
accede.
Librerie JavaScript
Introduzione: lo strato dati
Lo strato dati può essere integrato
come no all’interno di una pagina
HTML. Nell’esempio qui presente, lo
strato dati è implementato
all’interno del sito web sotto forma
di codice in JavaScript.
Credit: Google Developers
Librerie JavaScript Introduzione: i
quattro strati (layer) dello sviluppo web
Strato strutturale (Structural layer)
HTML gioca un ruolo fondamentale in corrispondenza dello strato
strutturale, ovvero sia quello di prendere i dati ricevuti dallo strato dati
per aggiungervi una struttura.
Con la definizione dello strato strutturale vengono indicate intestazione
(header), corpo (body) e le altre parti fondamentali di una pagina HTML,
senza le quali una pagina web non può essere pubblicata.
Per comprendere appieno la natura struttura e gerarchica dell’HTML si
veda la definizione di DOM (Document Object Model).
Librerie JavaScript
Introduzione: lo strato strutturale
Il linguaggio Hypertext Markup Language viene utilizzato per strutturare
il contenuto delle pagine web. La più semplice pagina HTML può
apparire così:
Titolo della pagina
Titolo della pagina
Hello World!!!.
Librerie JavaScript Introduzione: i
quattro strati (layer) dello sviluppo web
Strato di design (Design layer)
Il lato di design è lo strato che consente di definire l’aspetto che
dovranno avere i dati. Il design, per essere applicato, ha bisogno che la
struttura sia definita al meglio. Su web, il linguaggio più utilizzato per
definire il design è CSS.
CSS consente di associare agli elementi della pagina l’aspetto
corrispondente: senza una solida struttura è quindi impossibile produrre
pagine dal design accettabile.Librerie JavaScript
Introduzione: lo strato di design (1)
I CSS vengono utilizzati per associare una stile ai diversi contenuti di un pagina
HTML. Un semplicissimo esempio di foglio CSS di stile (CSS stylesheet) potrebbe
essere il seguente:
body {
background-color: white;
color: black;
}
Gli stili CSS consistono in selettori e regole. I selettori identificano specifici
elementi ai quali applicare gli stili:
h1 /* Identificano le intestazioni di livello 1 */
p /* Identifica i paragrafi */
.caption /* Identifica gli elementi con classe "caption" */
#subnav /* Identifica gli elementi con ID "subnav" */
Le regole sono proprietà che formano in modo cumulativo gli stili:
color: pink;
background-color: yellow;
margin: 10px;
padding: 25px;Librerie JavaScript
Introduzione: lo strato di design (2)
Le regole associate ad un selettore sono delimitate da parentesi graffe:
p {
font-size: 12px;
line-height: 14px;
color: black;
}
Le regole CSS possono inserite direttamente all’interno dell’intestazione (head) di
un documento:
p {
font-family: sans-serif;
color: lime;
}
…oppure possono essere salvate in un file esterno con suffisso .css, e quindi
referenziato nell’intestazione (head) del documento:Librerie JavaScript Introduzione: i
quattro strati (layer) dello sviluppo web
Strato interattivo (Behavioral layer)
La strato interattivo è in un certo senso quello meno importante: i dati, la
struttura ed il design, se bene applicati, sono sufficienti a veicolare il
messaggio. Nondimeno, una funzionalità interattiva può risultare molto
potente se eseguita nel modo più appropriato.
JavaScript è il linguaggio più utilizzato per creare nuove interazioni
all’interno di un sito web. Con l’introduzione del Web 2.0 e più in
particolare di tecnologie quali AJAX e HTML5, l’esperienza di utilizzo dei
siti web è notevolmente migliorata, grazie alla disponibilità di numerose
facilitazioni funzionali e accorgimenti estetici.
Prima d’implementare un qualsiasi strato interattivo è buona norma
verificare se le sue caratteristiche possano introdurre problemi di
accessibilità dovute ad incompatibilità principalmente con versioni poco
aggiornate dei web browser.Librerie JavaScript
Introduzione: lo strato interattivo
JavaScript è un linguaggio di programmazione dinamico che può istruire al
browser di applicare dei cambiamenti alla pagina dopo che questa è già stata
caricata.
Il codice può essere incluso direttamente all’interno del documento HTML tra due
tag “script”:
alert("Hello, world!");
…oppure può essere archiviato in un file separato, e quindi referenziato
direttamente all’interno della pagina HTML, solitamente all’interno
dell’intestazione (head):
Titolo della paginaLibrerie JavaScript Schema dei quattro
strati (layer) dello sviluppo web
Credit: Friendly BitLibrerie JavaScript SVG Da Wikipedia Scalable Vector Graphics abbreviato in SVG, indica una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente. La migliore espressione visiva esprimibile dalle librerie JavaScript dedicate alla visualizzazione grafica è data dall’impiego della tecnologia SVG. SVG è un formato immagine su base testuale. Ciò significa che è possibile creare un’immagine SVG con la stessa logica con cui si creare un documento HTML dotato di tag. Infatti, il codice SVG può essere incluso direttamente dentro una qualsiasi pagina HTML. Il piccolo esempio che segue crea un piccolo cerchio di colore blu:
Librerie JavaScript Caratteristiche
comuni
•Il codice viene implementato direttamente dentro alla pagina HTML.
•La librerie consistono essenzialmente in funzioni predefinite
•Le funzioni consentono di selezionare elementi, creare oggetti SVG,
gestire gli stili, e aggiungere transizioni, effetti dinamici e suggerimenti
(tooltip) alle visualizzazioni.
•Negli oggetti SVG possono essere integrati grandi dataset, per scopi di
rappresentazione grafica e testuale.
•I dati possono essere di diverso formato: principalmente JSON, CSV, e
GeoJSON.Google Chart Tools
Google Charts Introduzione Google Chart Tools è un set di strumenti che consente agli sviluppatori di pagine web di creare grafici sulla base di dati specifici, per scopi di visualizzazione su web. In principio, Google dava possibilità di produrre grafici in formato d’immagini PNG attraverso la specificazione di un semplice indirizzo internet (URL) dotato di parametri. Dall’Aprile 2012, per la creazione dei grafici Google utilizza tecnologia SVG.
Google Charts Caricamento librerie
Un Google Chart richiede tre librerie:
Google JSAPI API
La libreria Google Visualization
La libreria relativa al grafico specifico.
// Carico Visualization API ed il pacchetto relativo al grafico a torta.
google.load('visualization', '1.0', {'packages':['corechart']});
// Chiamo l’esecuzione una volta caricato Google Visualization API.
google.setOnLoadCallback(drawChart);
// Definisco la funzione che consente di creare la tabella dati,
// inizializzare il grafico a torta, passare i dati
// e rappresentarli
function drawChart() {Google Charts Preparazione dei dati
Tutti i grafici richiedono dati. Google Chart Tools richiede che i dati identidicati
tramite una classe in Javascript cihamata google.visualization.DataTable.
Questa classe è definita nella libreria Google Visualization caricata in precedenza.
// Creo la tabella dati.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[‘Pasta', 4],
[‘Carne', 2],
[‘Pesce', 2],
[‘Frutta e verdura', 6],
[‘Dolce', 3]
]);Google Charts Personalizzazione del
grafico
Ogni grafico dispone di un numero di opzioni di personalizzazione, che includono la
possibilità di scelta dei colori, dello spesso delle linee, del riempimento di sfondo, e
così via. E’ possibile aggiungere, ad esempio anche titoli e le etichette degli assi.
Ecco un esempio di semplice personalizzazione:
// Definisco le opzioni del grafico
var options = {'title':‘La mia dieta settimanale',
'width':400,
'height':300};
Per un grafico a torta, ad esempio, esiste un numero di opzioni tra cui scegliere: si
veda a questo proposito la sezione Opzioni di configurazione del Grafico a torta di
Google.Google Charts Inizializzare il grafico
A questo punto l’unica cosa che rimane da fare è tracciare il grafico. Per prima
cosa occorre definire un’istanza della particolare classe di grafico che si desidera
utilizzare, e quindi richiamarla tramite la chiamata draw().
Ad ogni tipo di grafico corrisponde una classe differente. Per esempio, al grafico a
torta corrisponde la classe google.visualization.PieChart, al grafico a barre
corrisponde la classe google.visualization.BieChart, e così via.
// Creo un’istanza e traccio il grafico, passandogli dati e opzioni.
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);Google Charts Visualizzare il grafico Per terminare definitivamente la procedura di realizzazione del grafico occorre solo inserire un riferimento all’interno della pagina web attraverso l’impiego di uno specifico elemento HTML (come ad esempio un ). All’elemento dev’essere associato un particolare ID da utilizzare per consentire alla funzione document.getElementById() d’identificare dove inserire il grafico.
Google Charts Ta-daaaaa
Google Charts Galleria dei grafici https://developers.google.com/chart/interactive/docs/gallery
Google Charts Esempi avanzati e
Playground
Esiste una galleria di esempi di come le Google API
dedicate alla visualizzazione vengono implemetate
per i più diversi scopi:
https://developers.google.com/chart/interactive/doc
s/examples
Playground è un’interfaccia web di Google
che consente di creare al volo
visualizzazioni di Google Charts partendo
da esempi già disponibili e agendo
direttamente sul codice:
https://developers.google.com/chart/inter
active/docs/gallery/piechart#Configuratio
n_OptionsGoogle Charts in Google Docs Da Wikipedia Google Documenti (in inglese Google Docs) è un'applicazione Web e di Office automation (o suite per ufficio). È un diretto concorrente del pacchetto Microsoft Office. Esso permette di salvare documenti di testo e fogli di calcolo nei formati .doc, .odt e .pdf, creare delle presentazioni, fogli di calcolo e moduli HTML. Google Documenti è implementato in Google Drive.
D3.js Data-Driven Documents
D3.js Introduzione D3.js è una libreria open source JavaScript progettata per la visualizzazione di dati in forma grafica, dinamica ed interattiva. Si tratta di uno strumento che implementa i più noti formati standard utilizzati nell’ambito della data visualization: SVG, JavaScript e CSS. È il successore del framework Protovis. Il suo ideatore è Mike Bostock.
D3.js Setup
Il metodo più “convenzionale” per il setup di D3 è certamente quello di creare una
directory di progetto, all’interno della quale creare una sottodirectory che ospiterà
la libreria d3.js vera e propria. Per questo scopo è possibile scaricare l’ultima
versione (d3.v3.js).
D3 è disponibile anche in versione “minimizzata” (d3.v3.min.js): in questo caso il
codice JavaScript è depurato dagli spazi in modo da ridurre la dimensione e
velocizzare il caricamento. Le funzionalità sono le stesse.
La struttura del progetto potrà presentarsi quindi nel seguente modo:
Cartella di progetto/
lib/
d3.v3.js
d3.v3.min.js (optional)
index.htmlD3.js Aggiungere elementi
Uno dei primi step è creare un nuovo elemento DOM. In genere, questo ciò
consiste nell’introduzione di un elemento SVG da visualizzare. La struttura che
dovrà avere la nostra pagina index.html per ospitare tale elemento dovrà essere
la seguente:
Test D3
// Qui andrà la ns bellissima visualizzazione D3D3.js I dati
D3 consente d’integrare i dati di diverso formato (stringhe di testo, numeri,
oggetti) attraverso diversi tipi di tecnologie (CSV, JSON, GeoJSON).
Tuttavia in questo caso ci limiteremo ad integrare un semplice vettore di dati
direttamente in JavaScript:
var dataset = [ 19, 9, 12, 17, 16, 10 ];D3.js Rappresentare i dati:
l’esempio del grafico a barre (1)
L’esempio che verrà illustrato adesso è semplicissimo e si basa sulla creazione di
un semplice grafico a barre. I grafici a barre sono essenzialmente costituito da una
serie di rettangoli (barre) l’uno affiancato all’altro. Per lo scopo utilizzeremo
l’elemento HTML (si veda Contenitori DIV e SPAN).
In questo modo già potremmo disegnare sulla nostra pagina HTML una prima
semplicissima barra:
Dato che si tratta di un elemento HTML, caratteristiche quali altezza e larghezza
possono essere difinite come stili CSS. Perché ogni barra del nostro grafico
condivda quindi le medesime proprietà occorre definire uno stile corrispondente ad
una classe chiamata bar:
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* Questa caratteristica verrà sovrascritta in
seguito */
background-color: red; }D3.js Rappresentare i dati:
l’esempio del grafico a barre (2)
A questo punto introduciamo la logica D3:
var dataset = [19, 9, 12, 17, 16, 10 ];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar");
Dove d3.select("body") individua il body nel DOM
.selectAll("div") seleziona tutti i div nel DOM
.data(dataset) individua i dati sulla base dei quali creare la visualizzazione
.enter().append("div") questo metodo consente di stabilire esattamente dove
collocare i nostri dati (in questo caso all’interno del div)
.attr("class", "bar"); attributo che consente di associare una particolare
caratteristica (class) ad un particolare elemento (bar)D3.js Rappresentare i dati:
l’esempio del grafico a barre (3)
Per rappresentare correttamente i dati occorre intervenire nuovamente sugli stili a
livello di codice JavaScript, introducendo un ultimo elemento al DOM appena visto:
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
/* introduciamo un nuovo elemento che serve ad associare
i nostri dati con lo stile “height” */
.style("height", function(d) {
return d + "px";
});
Quando D3 cicla attraverso i dati, al valore d viene assegnato il vettore di dati. A
questo punto non rimane che indicare che questi dati corrispondano alla
caratteristica height più l’unità di misura (px sta per pixel). Il grafico risultante
sarà quindi:D3.js Rappresentare i dati:
il “vecchio” grafico a barre
Il “vecchio” grafico a barre (“vecchio” nel senso di meno innovativo) è una
rappresentazione in cui per la costruzione delle barre viene utilizzato, come detto.
il tag div:
var dataset = [19, 9, 12, 17, 16, 10, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});D3.js Rappresentare i dati:
il “nuovo” grafico a barre
Il “nuovo” grafico a barre consiste nell’utilizzo della tecnologia SVG, ma secondo
una logica di scrittura del codice del tutto simile a quanto visto in precedenza.
Il principio prevede la specificazione di alcune variabili di base, quali ad esempio,
larghezza e altezza:
//Larghezza e altezza
var w = 500;
var h = 100;
Dopodiché sarà possibile dire a D3 di creare un elemento SVG da aggiungere al
DOM:
//Creo un elemento SVG
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
In questo modo noi inseriamo un elemento giusto prima della chiusura del
tag , assegnandogli un’altezza pari a 100 pixel e una larghezza pari a 500
pixel.D3.js Ta-daaaaa Credit: Scott Murray
D3.js Gallerie
Galleria d’esempi del portale d3js.org
Galleria di arte visuale, dal creatore di
D3: Mike Boston
Raccolta completa di visualizzazioni
elementariD3.js Esempio di dashboard
http://nickqizhu.github.io/dc.js/D3.js Tutorials
Rickshaw nasce come un toolkit per la visualizzazione di
serie storiche, ciò nonostante la sua documentazione è
così chiara da risultare utile per l’apprendimento delle basi
fondamentali per ogni tipo di visualizzazione.
Scott Murray ha realizzato forse il miglior tutorial su d3 in quanto a combinazione
di chiarezza e completezza. Il suo Interactive Data Visualization for the Web è
disponibile in formato cartaceo così come – parzialmente – su web. Esiste una sua
versione più semplificata qui.
Raccolta completa di tutti i tutorial ed introduzioni
segnalati all’interno del portale ufficiale dedicato a d3.Google Chart e D3.js Un confronto
In termini generali il maggior vantaggio di una soluzione rappresenta allo
stesso tempo il principale svantaggio dell’altra. Google Chart Tools è uno
strumento appositamente progettato per la visualizzazione di dati: proprio
per questo offre una gamma di visualizzazioni “pre-confenzionate”
praticamente già pronte per l’uso. D3 è invece una libreria di
visualizzazione dinamica in formato grafico, e per questo non
specificamente costruito per la rappresentazione dei dati: questo aspetto
conferisce a D3 una possibilità di personalizzazione maggiore.
Vantaggi di Google Chart Tools: Vantaggi di D3:
• facilità d’uso • alto livello di personalizzazione
• maggiore documentazione • potenziali estetiche praticamente
senza confini
• compatibilità trasversale tra versioni
di browser e tecnologie disponibili • compatibilità verso l’alto con le
tecnologie più avanzate di
• integrabilità con altri strumenti di
visualizzazione su web
Google (Google Docs, Google Fusion
Tables, ecc.) Svantaggi di D3:
Saantaggi di Google Chart Tools: • scarsa documentazione
• limitatezza nelle soluzioni estetiche • per il suo utilizzo occorre
apprendere una serie di logiche oltre
• personalizzazione limitata
a js (vedi SVG)Alternative a Google Charts e a D3.js
Alternative Google Chart Tools e D3 potrebbero non risultare perfetti per ogni progetto. Potrebbe accadere di aver bisogno di creare grafici in modo più rapido, o che non si possa scrivere grandi quantità di codice. In tali occasioni è opportuno conoscere altri strumenti simili a Google Chart Tools o a D3. Segue una lista selezionata.
Alternative DataWrapper DataWrapper è un ottimo web service che consente di caricare i dati e generare rapidamente un grafico da poter pubblicare anche altrove o integrare nel proprio sito web. Originariamente ideato per scopi di data journalism, in realtà è utile per molti utilizzi. Le visualizzazioni si basano su grafici interattivi per le ultime versioni di browser, mentre crea immagini statiche per le vecchie versioni. Opzionalmente è possibile scaricare il codice in modo da implementarlo in applicazioni su un proprio server.
Alternative Flot Flot è una libreria basata su JQuery, particolarmente adatta quando si desidera ottenere una compatibilità con browser più vecchi (anche IE 6!!!). Dispone di una gamma piuttosto limitata di visualizzazioni (grafici a linee, grafici a barre, aree), ma è facile da utilizzare.
Alternative gRaphaël gRaphaël è una libreria basata su Raphaël. Raphaël a sua volta impiega le tecnologie SVG e VML come strumenti per la creazione dei grafici. L’obiettivo degli sviluppatori di Raphaël è quello di creare una libreria quanto più compatibile col maggior numero di versioni e tipi di browser.
Alternative Highcharts JS Highcharts JS è un’ottima libreria con molti temi predefiniti e tipi di grafici a disposizione. Utilizza la tecnologia SVG quando si tratta di ottenere una visualizzazione sui più moderni browser, mentre adotta VML su versioni più vecchie di IE, incluso IE6 e successivi. Gratuita solo per usi non commerciali.
Alternative JavaScript InfoVis Toolkit JavaScript InfoVis Toolkit offre un’ampia gamma di stili di visualizzazione. Dispone di molti esempi anche se purtroppo la documentazione è alquanto tecnica. Il livello di trasversalità del supporto alle versioni e ai tipi di browser non è ben chiaro.
Alternative jqPlot jqPlot è un plugin per la visualizzazione dei dati di JQuery. I suoi grafici sono estremamente semplici: più che sufficienti solo se non si hanno grandi pretese sugli stili. Supporta da IE7 in su.
Glossario
AJAX Da Wikipedia In informatica AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo software per la realizzazione di applicazioni web interattive (Rich Internet Application). Lo sviluppo di applicazioni HTML con AJAX si basa su uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente. AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente. Normalmente le funzioni richiamate sono scritte con il linguaggio JavaScript. Tuttavia, e a dispetto del nome, l'uso di JavaScript e di XML non è obbligatorio, come non è necessario che le richieste di caricamento debbano essere necessariamente asincrone.
Contenitore DIV e SPAN Da allwebfree Sia il tag Div che il tag Span sono contenitori. Tutto quello che è incluso fra il tag iniziale e quello di chiusura reagisce secondo gli stili o comandi che gli sono stati associati. Nel caso contengano stili css possono essere ereditari. I tag div e span possono anche essere associati a delle funzioni javascript, e tutto ciò che contengono reagisce di conseguenza allo script. Entrambi contengono un nome dichiarato con il parametro id="". tale parametro NON è obbligatorio. Il nome che associamo a tale parametro servirà al browser per far riconoscere i tag ai css o agli script. Mentre il tag SPAN solitamente è utilizzato per variare parti di testo (con associazioni di colore e tipo), il tag DIV è utilizzato per racchiudere blocchi di tag, che possono essere elenchi, il testo stesso, o perfino parti intere della pagina come i menù, l'intestazione ed il contenuto. Proprio per questo motivo i tag DIV sono utilizzati con i CSS per la costruzione del box model, ossia un sito strutturato utilizzando soltanto i tag DIV ed escludendo le tabelle.
CSS Da Wikipedia Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio informatico usato per definire la formattazione di documenti HTML, XHTML e XMLad esempio in siti web e relative pagine web. L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.
CSV Da Wikipedia comma-separated values (abbreviato in CSV) è un formato di file basato su file di testo utilizzato per l'importazione ed esportazione (ad esempio da fogli elettronici o database) di una tabella di dati.
Data Journalism Da ahref.eu Il data journalism, (giornalismo basato sui dati) è un approccio a cavallo tra ricerca e inchiesta giornalistica che fa un uso intensivo di database, mappe digitali e software per analizzare, raccontare e visualizzare un fenomeno o una notizia, spesso producendo dei mashup di elementi diversi. La digitalizzazione dei dati e lo sviluppo di Internet sono considerate un'opportunità senza precedenti per l'innovazione del giornalismo che negli ultimi anni ha già prodotto diversi premi Pulitzer e sta facendo emergere nuove figure di giornalisti- programmatori.
Document Object Model Da Wikipedia Il Document Object Model (spesso abbreviato come DOM), letteralmente modello a oggetti del documento, è una forma di rappresentazione dei documenti strutturati come modello orientato agli oggetti. DOM è lo standard ufficiale del W3C per la rappresentazione di documenti strutturati in maniera da essere neutrali sia per la lingua che per la piattaforma. DOM è inoltre la base per una vasta gamma delle interfacce di programmazione delle applicazioni; alcune di esse sono standardizzate dal W3C.
GeoJSON Da Wikipedia GeoJSON è un formato aperto impiegato per la codifica di una varietà di dati geografici. Ha questo nome in quanto è basato su JSON. Infatti, ogni struttura dati GeoJSON è un oggetto JSON.
Google Drive Da Wikipedia Google Drive è un servizio di storage online introdotto da Google il 24 aprile 2012 che permette il file hosting di documenti fino a 5 GB estensibili fino a 16 TB in totale. Il servizio può essere usato via Web, caricando e visualizzando i file tramite il browser, oppure tramite l'applicazione installata su computer che sincronizza automaticamente una cartella locale del file system con quella condivisa. Su Google Drive sono presenti anche i documenti creati con Google Docs.
HTML5 Da Wikipedia L'HTML5 è un linguaggio di markup per la strutturazione delle pagine web. Le novità introdotte dall'HTML5 rispetto all'HTML 4 sono finalizzate soprattutto a migliorare il disaccoppiamento tra struttura, definita dal markup, caratteristiche di resa (tipo di carattere, colori, eccetera), definite dalle direttive di stile, e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre l'HTML5 prevede il supporto per la memorizzazione locale di grosse quantità di dati scaricati dal web browser, per consentire l'utilizzo di applicazioni basate su web (come per esempio le caselle di posta di Google o altri servizi analoghi) anche in assenza di collegamento a Internet.
JavaScript Da Wikipedia JavaScript è un linguaggio di scripting orientato agli oggetti comunemente usato nella creazione di siti web (programmazione Web).
JQuery Da Wikipedia jQuery è una libreria di funzioni (framework) javascript, cross-browser per le applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML […]. Tramite l'uso della libreria jQuery è possibile, con poche righe di codice, effettuare svariate operazioni, come ad esempio ottenere l'altezza di un elemento, o farlo scomparire con effetto dissolvenza.
JSON Da Wikipedia JSON, acronimo di JavaScript Object Notation, è un formato adatto per lo scambio dei dati in applicazioni client-server.
Lato server Da Wikipedia Nelle reti informatiche, l'espressione lato server (server-side in inglese) fa riferimento a operazioni compiute dal server in un ambito client- server contrapponendosi a tutto ciò che viene eseguito sul client (lato client). Di solito un server è un programma software (ad es. un server web), che gira su una macchina remota (chiamata per estensione "server") rimanendo in ascolto su determinate porte e raggiungibile da un computer client. Alcune operazioni devono essere compiute dal lato server perché richiedono l'accesso a informazioni o funzionalità non disponibili sul client, o richiedono misure di sicurezza che sarebbero inaffidabili se eseguite lato client.
Plugin Da Wikipedia Il plugin in campo informatico è un programma non autonomo che interagisce con un altro programma per ampliarne le funzioni. Ad esempio, un plugin per un software di grafica permette l'utilizzo di nuove funzioni non presenti nel software principale.
PNG Da Wikipedia In informatica, il Portable Network Graphics (abbreviato PNG) è un formato di file per memorizzare immagini.
URL Da Wikipedia In telecomunicazioni e informatica un Uniform Resource Locator o URL è una sequenza di caratteri che identifica univocamente l'indirizzo di una risorsa in Internet, tipicamente presente su un host server, come ad esempio un documento, un'immagine, un video, rendendola accessibile ad un client che ne fa richiesta attraverso l'utilizzo di un web browser.
SVG Da Wikipedia Scalable Vector Graphics abbreviato in SVG, indica una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente. Più specificamente si tratta di un linguaggio derivato dall'XML, cioè di un'applicazione del metalinguaggio posto a base degli sviluppi del Web da parte del consorzio W3C, che si pone l'obiettivo di descrivere figure bidimensionali statiche e animate.
Tag (metadato) Da Wikipedia Un tag è una parola chiave o un termine associato a un'informazione (un'immagine, una mappa geografica, un post, un video clip ...), che descrive l'oggetto rendendo possibile la classificazione e la ricerca di informazioni basata su parole chiave. I tag sono generalmente scelti in base a criteri informali e personalmente dagli autori/creatori dell'oggetto dell'indicizzazione.
Tooltip Da Wikipedia Con tooltip (letteralmente: consiglio su un oggetto) si intende un comune elemento dell'interfaccia grafica dell'utente. È utilizzato assieme ad un cursore, di solito il puntatore del mouse. L'utente passa col cursore sopra un oggetto, senza cliccarlo e appare un piccolo "box" con informazioni supplementari riguardo l'oggetto stesso.
Vector Markup Language Da Wikipedia Vector Markup Language (VML) è un linguaggio XML aperto, destinato alla creazione di grafica vettoriale elaborate in 2D o 3D (statiche o animate) sulle pagine Web.
Web 2.0 Da Wikipedia l Web 2.0 è un termine utilizzato per indicare uno stato di evoluzione del World Wide Web, rispetto a una condizione precedente. Si indica come Web 2.0 l'insieme di tutte quelle applicazioni online che permettono un elevato livello di interazione tra il sito web e l'utente come i blog, i forum, le chat, i wiki, le piattaforme di condivisione di media come Flickr, YouTube, Vimeo, i social network come Facebook, Myspace, Twitter, Google+, Linkedin, Foursquare, ecc. ottenute tipicamente attraverso opportune tecniche di programmazione Web afferenti al paradigma del Web dinamico in contrapposizione al cosiddetto Web statico o Web 1.0.
Web Service Da Wikipedia In informatica un Web Service (servizio web), secondo la definizione data dal World Wide Web Consortium (W3C), è un sistema software progettato per supportare l'interoperabilità tra diversi elaboratori su di una medesima rete; tale caratteristica si ottiene associando all'applicazione un'interfaccia software (descritta in un formato automaticamente elaborabile quale, ad es., il Web Services Description Language) utilizzando la quale altri sistemi possono interagire con il Web Service stesso attivando le operazioni descritte nell'interfaccia (servizi o richieste di procedure remote) tramite appositi "messaggi" di richiesta inclusi in una "busta" (la più famosa è SOAP): tali messaggi di richiesta sono formattati secondo lo standard XML e incapsulati e trasportati tramite i protocolli del Web (solitamente HTTP), da cui appunto il nome web service.
XML Da Wikipedia XML (sigla di eXtensible Markup Language) è un linguaggio di markup, ovvero un linguaggio marcatore basato su un meccanismo sintattico che consente di definire e controllare il significato degli elementi contenuti in un documento o in un testo. Costituisce il tentativo di produrre una versione semplificata di Standard Generalized Markup Language (SGML) che consenta di definire in modo semplice nuovi linguaggi di markup da usare in ambito web.
Puoi anche leggere
