lod v iz progetto di semestre omar davide molteni stefano mondini v isualizzatore di o pen d ata
TRANSCRIPT
LOD VIZ
Progetto di semestreOmar Davide Molteni
Stefano Mondini
VISUALIZZATORE DI OPEN DATA
2
INTRODUZIONE
3
COS'È LOD VIZ? Visualizzatore grafico di open data per
il Laboratorio Sistemi Semantici e Multimediali (DTI-ISIN-LSMS)
Costruito con moderni standard web (HTML5, CSS3)
Core in JavaScript Caricamento dinamico dei dati JSON
4
COMPITI E OBIETTIVIAcquisire competenze sul
semantic webStudio di nuove tecnologie web
HTML5, JavaScript, CSS3Studio stato dell’arte
5
TECNOLOGIE UTILIZZATEJSONHTML 5CSS 3JavaScriptjQueryMustacheTwitter Bootstrap
6
STUDIO DELLE SOLUZIONI
7
STATO DELL’ARTEProgetti di diploma precedenti
EasyOnto, di Alessandro Ruggeri (A.A. 2008/09)
Brick, di Nicholas Urech (A.A. 2010/11)
Librerie graficheD3.jsRaphaël
8
RISK MANAGEMENTRitardo nelle consegneRaggiungimento degli obiettiviPerdita o danneggiamento dei
datiProblemi organizzativi o di
comunicazione
9
DESIGN E CONCEZIONE
10
FUNZIONAMENTO
11
INTERFACCIA GRAFICA Blocco centrale per le informazioni
dell’elemento scelto Blocchi periferici contenenti le risorse
Divise per tipoCollegate con frecce direzionali al blocco
centrale
12
EVOLUZIONE DELL’ INTERFACCIA
PrimaDopo
13
REALIZZAZIONE E TEST
14
ARCHITETTURAVisualizzazione
HTML (template, documentazione)Fogli di stile (CSS)
Lettura ed elaborazione datiFormattazione dei dati e
posizionamento degli oggetti
15
ARCHITETTURA (HTML)<div id='loader' class='hideCover'>
<img src='css/loader.gif'></div>
<div id="base">…</div>
16
ARCHITETTURA (CSS).circleinside {position: absolute;…
}.circleinside:hover{ … }
.circleinside.out{… }
.circleinside.out:hover{… }
17
ARCHITETTURA (CSS)#centrale {background: #EEEEEE;background: #EEEEEE -moz-linear-gradient(-45deg, #EEEEEE, #AAAAAA);
box-shadow: 2px 2px 2px 2px #666;…max-width: 360px;z-index: 100;
}
18
ARCHITETTURA (JS)$(function () {"use strict";
var Core = {…start:function(args) {
…
Core.start({base:'#base', loader:'#loader'});
19
ARCHITETTURA (JS)$.when(loadOutDataFunc).always(function (outData) {$.when(loadInDataFunc).always(function (inData) {
var outResolved = loadOutDataFunc.isResolved();
var inResolved = loadInDataFunc.isResolved();
…
20
ARCHITETTURA (JS)var ctx = this.node.getContext('2d');
ctx.beginPath();…ctx.moveTo(zerox, height - zeroy);ctx.lineTo(width - zerox, zeroy);…ctx.closePath();ctx.stroke();
21
TEST E COMPATIBILITÀFirebug per il debug e controllo
dei messaggi di avviso/errore
22
TEST E COMPATIBILITÀVerifica tramite più browser
FirefoxChromeSafariIE 9Opera
Sistemi operativiWindows 7, OS X Lion 10.7
Problema cross-domain AJAX
23
COMPATIBILITÀFirefox
24
COMPATIBILITÀChrome (18) sotto Windows 7
25
COMPATIBILITÀInternet Explorer 9
26
DEMO
27
DEMO
28
CONCLUSIONI
29
CONCLUSIONIObiettivi raggiuntiStudio e analisi con elementi di
ingegneria software 3Problemi riscontrati
Tempo studio linguaggio impegnativoSviluppi futuri
Indipendenza dati progetto BrickMiglioramento compatibilità browserMaggiore modularità
30
DOMANDE