Interfaccia grafica per visualizzazione e ricerca delle fonti monitorate

#7

Beh, direi ottimo… :slight_smile: Allora pensiamoci ancora qualche giorno e lunedì buttiamo giù l’azione, intanto se ti va condividi qui le tecnologie che conosci meglio o con cui lavori più spesso, sono curioso e poi così ci allineiamo…

#8

Certo!
Di solito lavoro a interfacce mobile, desktop e responsive con HTML, CSS e Javascript, in diverse modalità. Per comodità faccio un elenco :slight_smile:

  • HTML5. Incluse webview per app mobile, Appcache, Local Storage, Web Worker
  • CSS3. Preferendo SASS come preprocessore e usando alcuni tool di PostCSS, da compilare automaticamente con Gulp o Grunt
  • Javascript. Usando Backbone, Underscore, codice nativo o jQuery
  • Mi piace adottare Atomic Design come pattern di design e struttura degli elementi UI
    Google Maps API
  • Ho lavorato su view in PHP, anche con frameworks come CakePHP e template engines come Twig
  • Se è necessario, lancio un container Docker condiviso per l’applicativo
  • Per la parte di design, preferisco Sketch (anche per i wireframe, alternativamente a Balsamiq) e so usare Photoshop

Pensando all’interfaccia grafica delle fonti monitorate, avevo istintivamente pensato a qualcosa del genere:

  • usare Material Design come “visual language”, forse monotono ma secondo me sempre chiarissimo per mostrare dati. E diversi UI Framework (compreso uno ufficiale di Google) servono già componenti pronti, velocizzando lo sviluppo
  • come già detto, creare dei wireframe indicativi per capire bene come strutturare l’applicativo
  • potrebbe essere l’occasione per imparare a usare React? Non ho ancora avuto l’occasione di usarlo e la tipologia di progetto mi sembra adatta
  • al di là della questione “framework javascript sì o no e quale”, penso a un’app javascript che faccia chiamate ai feed, ne restituisca il contenuto e popoli o renderizzi i componenti HTML/CSS, seguendo la struttura e la logica di esperienza utente già decisa in fase di wireframing/prototyping

Se avete qualunque domanda, indicazione o suggerimento, sono qui!
Buon weekend

#9

Ok, ottimo, normalmente io uso Webpack per gestire la “compilazione” delle varie dipendenze ed essendomi un po’ specializzato in data visualization metto sempre un po’ ovunque il comodo d3js… :slight_smile: Non ho mai approfondito né React né Angular, anche perché hanno delle caratteristiche che non mi hanno mai convinto, mentre ultimamente mi sto divertendo molto con RiotJS accoppiato con Nanoflux Fusion (implementazione di Redux): viva i web components! :slight_smile:

@guenter.richter, dicci anche tu… le tue mappe sono un ottimo punto di partenza per quanto riguarda i dati geografici, naturalmente, mi chiedo però come si possano integrare in una pagina che abbia anche altri componenti… si possono embeddare solo come iframe o si può usare una libreria con una API tale da poterne integrarne i metodi in un’applicazione custom?

#10

@jenkin grazie per la chiamata :slight_smile: vedo molte cose che mi piacciono anche se, lo devo ammettere, uso solo jquery and bootstrap, forse perché mi serve solo per scrivere delle paginine per gestire i temi della mappe;

  • sono molto accordo su Material Design e usare colori significativi
  • e anche sul responsive con HTML, CSS e Javascript
  • di framework oltre a jquery, jquery ui, jquery mobile conosco solo bootstrap ma benvenuto tutto che facilita

al di là della questione “framework javascript sì o no e quale”, penso a un’app javascript che faccia chiamate ai feed, ne restituisca il contenuto e popoli o renderizzi i componenti HTML/CSS,

per popolare dashboards ho cominciato una piccola lib in Javascript per caricare dati da feed, creare un oggetto JSON con metodi di filtrare, combinare o aggregare fonti per tirare fuori i dati che servono; se avete voglia di curiosare https://github.com/gjrichter/data.js
Anche la demo è interessante, ho cannibalizzato un bootstrap dashboard template che trovato nella rete; li mi è piaciuto attributo data-path=’…’ per renderizzare valori caricati dai feed.

le tue mappe … mi chiedo però come si possano integrare in una pagina che abbia anche altri componenti… si possono embeddare solo come iframe o si può usare una libreria con una API tale da poterne integrarne i metodi in un’applicazione custom?

si - il framework ixmaps è una scatola cinese di iframe, ma ogni strato ha una API per manipolare la mappa; la scatola più esterna ha un’interfaccia REST per creare una mappa tematica completa, la scatola più piccola è un semplice oggetto SVG che contiene i layer in SVG e tutto il codice per manipolarli; normalmente carico una pagina HTML che contiene l’ogetto SVG (mappa vuota) e un DIV con la mappa di fondo (leaflet) in un iframe e un Javascript con una API, e aspetta che l’API mi dice che la mappa e pronta;
poi posso creare temi e altre cose utile con l’API; posso avere più mappe (iframes con id) e anche dire all’API di synchronizzarli; qui un jsfiddle

spero che dal esempio in jsfiddle si può vedere se la mappa possa esse integrato;

sicuramente, c’è un sacco di codice Javascript per manipolare il DOM del SVG; non mi ricordo se ho cominciato prima che esistesse D3.js, si potrebbe riscrive tutto benissimo come applicazione di D3.js; ma comunque il cuore di iXMaps e il linguaggio JSON per definire temi da dati grezzi; ( e si può pure integrare D3.js per dipingere grafici (via callback user drawn chart) che per ogni posizione ti da i dati e un gruppo SVG dove realizzare la tua grafica; poi lo script della mappa lo posiziona e adatta a zoom e pan)

Son sempre felice se ci sono domande e critiche,
a presto

#11

Ok, sono pronto finalmente a scrivere l’azione dedicata a questo lavoro, così possiamo cominciare a lavorarci seriamente… Intanto butto nella mischia anche @Giacomo , super designer in quel di Milano: http://gdepadesign.com/.

#12

Ecco fatto: Interfaccia grafica di navigazione delle fonti monitorate. Ci riusciamo per metà maggio a mettere on-line qualcosa di funzionante?

#13

Come desiderable aggiungo possibilità di classificare ogni singolo item ed ogni specifico allegato di esso

#14

Non c’entra nulla temo, questa interfaccia serve per navigare le fonti, non i documenti prodotti dalle fonti… :slight_smile:

#15

Ciao a tutti! e grazie Jenkin per avermi inserito in questo gruppo e per l’opportunità di partecipare al progetto.

#16

Ottimo :slight_smile:

Direi che per capire le tempistiche possibili è necessario mettere giù i task 1 e 2, che ci portano a definire le funzionalità del MVP.

Personalmente preciso che, lavorando 40 ore a settimana (immagino come alcuni o molti di voi), il tempo che potrò dedicare al progetto non sarà molto (in termini di ore alla settimana, intendo, non complessivamente).

Una volta chiari i task 1 e 2, e se siete d’accordo, mi piacerebbe prendere in mano il task 3 (wireframe), dando una stima quanto più precisa di quando credo di poterlo portare a termine.

Per cominciare a lavorare sui primi due task, cosa usiamo: un documento di google condiviso? Un thread di questo forum?

#17

@giovannipolimeni ho spostato qui il tuo commento, teniamo il thread dell’azione solo per aggiornamento ufficiali.

Per me possiamo continuare a parlarne qui, se serve strutturare un documento di riepilogo o archiviare dei materiali, usiamo questa cartella condivisa.

Mi pare che in questa discussioni fin qui siano uscite molte idee per finalizzare i primi due task… @giovannipolimeni, vuoi provare tu a fare un elenco puntato di sintesi in un doc?

#18

@jenkin, volentieri.
Mi daresti permesso di scrittura per quella cartella condivisa?

#19

Scusa, pensavo l’avessi, prova ora… :slight_smile:

#20

Perfetto, grazie :slight_smile:

#21

Ho buttato giù, ordinandola il più possibile, una lista di funzionalità basandomi su ciò che è stato scritto finora su questo thread.

Ovviamente vi chiedo di correggere, integrare, chiarire tutto ciò che ritenete opportuno.

#22

Ciao Giovanni,

stavo leggendo ora il documento “Task 1”. Vorrei propormi per dare una mano a disegnare gli stili per la mappa e i grafici. Se si potesse riuscire a vedere dei dati, anche in formato raw per capire che tipo di visualizzazioni pensare e come far interagire i dati con la mappa. Non mi è chiaro se pensi di impostare l’interfaccia in due aree: 1) mappa; 2) dashboard. Scusami se questo messaggio può sembrare a gamba tesa ma faccio fatica a capire questi messaggi “in codice” :slight_smile:

attendo intanto l’accesso al doc per aggiungere dei commenti, grazie

buona serata,
ciao
giacomo

#23

@Giacomo dammi la tua mail che ti condivido tutto…

Intanto ecco la prima lista corposa di fonti. Tenete conto che dall’istat_code si ottengono sia le coordinate che lo shapefile del territorio interessato, mentre dall’ipa_code si possono ottenere queste informazioni, ma anche queste e queste. L’id invece è la chiave per ottenere tutti i dati dagli atti degli albi pretori scrapati.

Insomma, tenete conto che ci sono molte più informazioni disponibili rispetto a quelle che vedete ora in quel file linkato all’inizio… :slight_smile:

#24

Ciao Giacomo,

Per quanto riguarda la mappa e la dashboard: sono due modalità di visualizzazione dei dati che, partendo da quanto scritto finora, avevo immaginato.
Il documento però vuole essere una lista di funzionalità, non di specifiche sulla resa grafica dell’interfaccia.
Per l’interfaccia, invece: via libera a qualunque cosa avessi in mente, sono contento anzi che ci sia un designer a occuparsene :slight_smile:

#25

Ciao,

grazie per l’accesso al doc, posso aggiungere commenti direttamente lì? per interfaccia intendi una versione hifi o anche dal wireframe? Scusami in anticipo se faccio queste domande

grazie!

giacomo

#26

@Giacomo, sì, intendo anche wireframe.
Io mi sarei cimentato, come mi è già capitato di fare, ma non è il mio mestiere :slight_smile:

Certo, immagino tu possa aggiungere commenti anche nel documento…