LOD Viz

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