Librerie in JavaScript - Unioncamere Lombardia · I CSS vengono utilizzati per associare una stile...
73
Librerie in JavaScript dedicate alla Data Visualization
Transcript of Librerie in JavaScript - Unioncamere Lombardia · I CSS vengono utilizzati per associare una stile...
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
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<h1>Titolo della pagina</h1>
<p>Hello World!!!.</p>
</body>
</html>
Il linguaggio Hypertext Markup Language viene utilizzato per strutturare il contenuto delle pagine web. La più semplice pagina HTML può apparire così:
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)
body {
background-color: white;
color: black;
}
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:
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:
<head>
<style type="text/css">
p {
font-family: sans-serif;
color: lime;
}
</style>
</head>
…oppure possono essere salvate in un file esterno con suffisso .css, e quindi referenziato nell’intestazione (head) del documento:
<head>
<link rel="stylesheet" href="style.css">
</head>
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”:
<body>
<script type="text/javascript">
alert("Hello, world!");
</script>
</body>
…oppure può essere archiviato in un file separato, e quindi referenziato direttamente all’interno della pagina HTML, solitamente all’interno dell’intestazione (head):
<head> <title>Titolo della pagina</title>
<script type="text/javascript" src="myscript.js"></script>
</head>
Librerie JavaScript Schema dei quattro
strati (layer) dello sviluppo web
Credit: Friendly Bit
Librerie 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:
<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-
width="2"/>
</svg>
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 AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// 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 <div>). All’elemento dev’essere
associato un particolare ID da utilizzare per consentire alla funzione document.getElementById() d’identificare dove inserire il grafico. <body>
<!--Div che contiene il grafico a torta-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
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/docs/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/interactive/docs/gallery/piechart#Configuration_Options
Google 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.html
D3.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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test D3</title>
<script type="text/javascript" src="lib/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// Qui andrà la ns bellissima visualizzazione D3
</script>
</body>
</html>
D3.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:
<body>
<script type="text/javascript">
var dataset = [ 19, 9, 12, 17, 16, 10 ];
</script>
</body>
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 <div> (si veda Contenitori DIV e SPAN).
In questo modo già potremmo disegnare sulla nostra pagina HTML una prima semplicissima barra:
<div style="display: inline-block;
width: 20px;height: 75px;
background-color: red;"></div>
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: <style type="text/css">
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* Questa caratteristica verrà sovrascritta in
seguito */
background-color: red; }
</style>
D3.js Rappresentare i dati: l’esempio del grafico a barre (2)
A questo punto introduciamo la logica D3:
<body>
<script type="text/javascript">
var dataset = [19, 9, 12, 17, 16, 10 ];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar");
</script>
</body>
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 <svg> giusto prima della chiusura del tag </body>, assegnandogli un’altezza pari a 100 pixel e una larghezza pari a 500
pixel.
D3.js Gallerie
Galleria d’esempi del portale d3js.org
Galleria di arte visuale, dal creatore di D3: Mike Boston
Raccolta completa di visualizzazioni elementari
D3.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
Vantaggi di D3:
• alto livello di personalizzazione
• potenziali estetiche praticamente senza confini
• compatibilità verso l’alto con le tecnologie più avanzate di visualizzazione su web
Svantaggi di D3:
• scarsa documentazione
• per il suo utilizzo occorre apprendere una serie di logiche oltre a js (vedi SVG)
Vantaggi di Google Chart Tools:
• facilità d’uso
• maggiore documentazione
• compatibilità trasversale tra versioni di browser e tecnologie disponibili
• integrabilità con altri strumenti di Google (Google Docs, Google Fusion Tables, ecc.)
Saantaggi di Google Chart Tools:
• limitatezza nelle soluzioni estetiche
• personalizzazione limitata
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.
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.
