View Full Version : [HTML5 - CSS - JSP - JSTL - SVG] Web Application UI Design
evil_stefano
18-01-2014, 13:09
Ciao a tutti,
non so se è la sezione giusta, nel caso chiedo scusa.
Sto cercando di farmi un'idea su come impostare l'interfaccia grafica per l'utente di una web application che devo costruire. La web application servirebbe a gestire un inventario/magazzino (se non ho capito male in inglese si traduce in warehouse management system WMS), senza la parte di fatturazione, spedizione etc etc.. diciamo più un inventario semplice.
Attualmente sono ancora in fase di progettazione, non ho bisogno espressamente di codice, ma di consigli sull'usabilità e sulla grafica che dovrebbe avere la UI.
La UI dovrebbe avere:
- un albero di navigazione, o dei menù. (un nav il più chiaro possibile)
- una parte centrale in cui far vedere lo scaffale, con i vari articoli contenuti, disegnato magari in SVG interattivo (tipo visuale 360, scomponimento dei pezzi.. etc).
- un parte laterale in cui far vedere le proprietà dell'elemento selezionato. (è utile? esistono altre soluzioni? dove potrei far vedere alternativamente le proprietà dell'oggetto?)
Nello header e del footer sinceramente oltre al logo e ai crediti non saprei cosa metterci.
La UI tipica di HTML 5, se non ho capito male, è questa:
http://www.html.it/guide/esempi/html5/imgs/lezione_header/header.jpg
Quella che avevo in mente io era più come questa:
http://www.codeproject.com/KB/HTML/semanticHtml5PageLayout/html5pagelayout.png
Il mio primo dubbio era sull'albero di navigazione: questo dovrebbe contenere l'alberatura a livelli in cui navigare (es: Magazzino X -> Locale A -> Settore Y -> Scaffale Z ), solo che non so se è meglio, per l'usabilità, mettere il NAV a sx del riquadro centrale (come un esplora risorse) o se lasciarlo in alto con un comodo menù a tendina.
L'albero di navigazione alla esplora risorse maniera è superato? esiste qualcosa di più valido?
Il secondo dubbio riguarda il ASIDE: è possibile farlo a scomparsa? o in alternativa, dove dovrei far vedere le proprietà dell'oggetto?
L'ultimo dubbio riguarda il disegno interattivo: può contenere dei dati nascosti (campi custom) in cui metto ad esempio l'identificativo dell'oggetto sul database o altro? Perché ho idea che mi servono per l'ASIDE, in pratica se clicco su un componente dentro l'SVG nell'aside devo far vedere le proprietà di quel componente.
Ad esemio, se nell'svg ho uno scaffale con 3 pezzi diversi (una matita, una penna e un evidenziatore) se clicco sulla matita nell'aside si deve vedere le proprietà della matita.
Grazie. :)
PS:
Qualcuno conosce qualche tool di inventario da cui prendere ulteriori spunti?
il web è 95% tipografia dicono :)
oltre a questo sul dubbio del menu laterale o top a tendina, io mi focalizzerei su ll'importanza.
è importante che abbiano a vista le categorie?le useranno molto? o viceversa il focus è sulla parte centrale dove faranno svariate operazioni?
prova a pensare ad un utilizzo tipico, le funzioni più usate ecc...
a quel punto se hai una specie di gerarchia potrai valutare.
esempio: se le funzioni si svolgono prevalentemente nella parte centrale, la barra laterale porta via un sacco di spazio e a quel punto meglio avere un menù a scomparsa.
viceversa, se l'utilizzo è principalmente la navigazione nelle categorie allora valuta di invertire il "peso" del contenuto centrale con la barra laterale.
non sono un designer, vado un pò a buon senso.
per poi sviluppare utilizzerei un framework a scelta tra:
http://getbootstrap.com/
http://foundation.zurb.com/
http://purecss.io/
http://www.getuikit.com/
evil_stefano
19-01-2014, 11:23
il web è 95% tipografia dicono :)
oltre a questo sul dubbio del menu laterale o top a tendina, io mi focalizzerei su ll'importanza.
è importante che abbiano a vista le categorie?le useranno molto? o viceversa il focus è sulla parte centrale dove faranno svariate operazioni?
prova a pensare ad un utilizzo tipico, le funzioni più usate ecc...
a quel punto se hai una specie di gerarchia potrai valutare.
esempio: se le funzioni si svolgono prevalentemente nella parte centrale, la barra laterale porta via un sacco di spazio e a quel punto meglio avere un menù a scomparsa.
viceversa, se l'utilizzo è principalmente la navigazione nelle categorie allora valuta di invertire il "peso" del contenuto centrale con la barra laterale.
non sono un designer, vado un pò a buon senso.
per poi sviluppare utilizzerei un framework a scelta tra:
http://getbootstrap.com/
http://foundation.zurb.com/
http://purecss.io/
http://www.getuikit.com/
bè.. dal mio punto di vista l'alberatura è ugualmente importante al contenuto.
Va usata spesso, altrimenti non si riesce a navigare per trovare gli item.
La parte centrale serve da visualizzazione per capire dove trovare l'item fisicamente nel magazzino (ad esempio se prendo un ripiano, l'item si trova tutto a dx o sx rispetto ad altri presenti sempre sullo stesso ripiano). Inoltre serve per poter visualizzare le info del signolo item (se uno seleziona l'item nell'ASIDE vengono visualizzate le info) ed editarle.
Io sono propenso al 70% nel mettere la barra laterale, detto questo dove posso trovare una raccolta di navigation tree per farmi un'idea di come realizzarla?
Grazie !
PS: Grazie per i link, non li conoscevo, li passerò in rassegna per vedere come funzionano.
evil_stefano
21-01-2014, 12:27
ok, ho deciso per alberatura NAV laterale.
Avete alcuni link a javascript/css/AJAX/etc etc con degli esempi di navbar (alberatura)?
se fossero anche belli esteticamente non sarebbe male..
Per far si che a fronte di un aggiornamento dell'alberatura la pagina non venga ricaricata (il NAV) basta usare i metodi AJAX giusto?
Grazie !
Tuvok-LuR-
21-01-2014, 14:31
cercati javascript treeview e ne trovi a quintali, ma io me la farei da solo è abbastanza semplice.
il caricamento dinamico delle sottocategorie non è strettamente necessario, a meno che tu non abbia un numero di scaffali nell'ordine delle migliaia, puoi semplicemente caricare tutto all'inizio ed amen.
Poi al click su uno scaffale carichi via ajax il contenuto e lo fai vedere nell'area predisposta
Daniels118
21-01-2014, 14:40
Come albero da utilizzare con ajax posso consigliarti jstree, può essere modificato direttamente con una logica drag&drop (si possono trascinare anche oggetti esterni) e menu contestuali, bisogna spendere solo un po' di tempo ad implementare il codice lato server per adattarlo al tuo DB, oppure puoi partire dagli esempi già esistenti. Supporta tipi di nodo personalizzati con varie icone e regole di nidificazione.
Io l'ho utilizzato per modificare le categorie di un sito di ecommerce, da poco è uscita la nuova versione ma non l'ho provata, suppongo che semplifichi ulteriormente l'utilizzo.
evil_stefano
21-01-2014, 15:26
Grazie a entrambi !
con 'javascript treeview' effettivmente ne trovo a vagonate, ma districarmi tra licenze a pagamento, Json, librerie stane et simila vedo che è abbastanza difficile.
jstree devo dire che è quello che mi è piaciuto di più.
il problema non è il caricamento dinamico, il problema è piuttosto la modifica del nome di una sottocategoria o l'aggiunta di nuove sottocategorie, se succedono non volevo refreshare il nav, quindi ho pensato ad ajax.. tutto qui.
Adesso provo a cercare altri esempi che non implementino librerie complesse o no siano a pagamento.
Per il corpo centrale invece, c'è un sito con degli esempi di SVG o un sito per costruire un SVG partendo da un'immagine?
o che almeno mi aiuti a fare i primi disegni complessi..
Grazie.
Daniels118
21-01-2014, 15:43
Potresti utilizzare delle variabili per salvare lo stato di visualizzazione dell'albero e lo ripristini ad ogni refresh (nei limiti del possibile).
Oppure puoi implementare sul server una coda con timestamp dove inserisci ogni modifica fatta all'albero; lato client con un js a tempo ti fai restituire dal server tutte le modifiche più recenti rispetto all'ultimo aggiornamento e le applichi all'albero, in questo modo aggiorni solo le voci effettivamente modificate.
La prima soluzione ovviamente è più semplice ed efficiente da implementare.
Per quanto riguarda la grafica SVG non ho esperienza, ma suppongo che potresti partire da qui:
http://www.w3schools.com/svg/
Tuvok-LuR-
21-01-2014, 15:44
gli svg puoi farli benissimo con illustrator o inkscape, la cosa piu semplice è usare una foto o altra immagine e disegnarci sopra, poi puoi caricare gli stessi file .svg via ajax o usarli come stringhe nel js.
Raphael.js è la libreria classica e supporta IE<9 (VML) mentre Snap.svg é per la nuova generazione, più snella e con funzionalità più avanzate (è ancora alle prime versioni quindi non 100% bugfree, ma certamente utilizzabile)
ok, ho deciso per alberatura NAV laterale.
Avete alcuni link a javascript/css/AJAX/etc etc con degli esempi di navbar (alberatura)?
se fossero anche belli esteticamente non sarebbe male..
Per far si che a fronte di un aggiornamento dell'alberatura la pagina non venga ricaricata (il NAV) basta usare i metodi AJAX giusto?
Grazie !
http://jsfiddle.net/jhfrench/GpdgF/
evil_stefano
22-01-2014, 08:03
gli svg puoi farli benissimo con illustrator o inkscape, la cosa piu semplice è usare una foto o altra immagine e disegnarci sopra, poi puoi caricare gli stessi file .svg via ajax o usarli come stringhe nel js.
Raphael.js è la libreria classica e supporta IE<9 (VML) mentre Snap.svg é per la nuova generazione, più snella e con funzionalità più avanzate (è ancora alle prime versioni quindi non 100% bugfree, ma certamente utilizzabile)
grazie !
ho visto i siti di Raphael e Snap, adesso è da capire quale è il browser aziendale predefinito, anche se punterei al progresso con Snap..
http://jsfiddle.net/jhfrench/GpdgF/
Grazie, interessante esempio, mi piace.
Adesso devo elaborare un po' tutte queste info. :)
evil_stefano
23-01-2014, 23:07
Ciao,
Ho un paio di domande sui context menù: quello che avrei in mente è un menù personalizzato da applicare all'intera pagina, in base all'oggetto cliccato dovrebbe inibire/abilitare determinate azioni.
Ad esempio, se sono sull'immagine del nostro solito ripiano, se clicco con il destro vorrei vedere [ Aggiungi ], mentre se clicco su un oggetto sul ripiano dovrebbe comparire [ Elimina - Sposta - Dettagli] .. etc etc.
Ho visto alcuni context menù, tra i quali mi ha colpito questo:
http://medialize.github.io/jQuery-contextMenu/demo.html
Volevo però capire se questo menù custom è applicabile a tutta la pagina (nel caso la risposta fosse no, userei la logica contraria: il tasto destro è inibito tranne nei punti in cui ho il context).
E secondo, non capisco come fa il context a capire su quale oggetto ho cliccato, o pe rmeglio dire, come faccio a differenziare 30 oggetti diversi da cliccare con menù probabilmente diversi?
Altra domanda: JQuery + autocompletamento di un campo. Ho visto l'esepio base:
http://jqueryui.com/autocomplete/
Solo che la base dati è un db, quindi ho trovato questo articolo:
http://www.simonbattersby.com/blog/jquery-ui-autocomplete-with-a-remote-database-and-php/
Ma non mi chiaro un paio di punti: ogni volta che aggiungo/tolgo una lettera viene rifatta la query al db? se si, non esiste un modo per usare unq qualche cache a cui attingere?
Grazie ! :)
Ciao,
Ho un paio di domande sui context menù: quello che avrei in mente è un menù personalizzato da applicare all'intera pagina, in base all'oggetto cliccato dovrebbe inibire/abilitare determinate azioni.
Ad esempio, se sono sull'immagine del nostro solito ripiano, se clicco con il destro vorrei vedere [ Aggiungi ], mentre se clicco su un oggetto sul ripiano dovrebbe comparire [ Elimina - Sposta - Dettagli] .. etc etc.
Ho visto alcuni context menù, tra i quali mi ha colpito questo:
http://medialize.github.io/jQuery-contextMenu/demo.html
Volevo però capire se questo menù custom è applicabile a tutta la pagina (nel caso la risposta fosse no, userei la logica contraria: il tasto destro è inibito tranne nei punti in cui ho il context).
E secondo, non capisco come fa il context a capire su quale oggetto ho cliccato, o pe rmeglio dire, come faccio a differenziare 30 oggetti diversi da cliccare con menù probabilmente diversi?
Altra domanda: JQuery + autocompletamento di un campo. Ho visto l'esepio base:
http://jqueryui.com/autocomplete/
Solo che la base dati è un db, quindi ho trovato questo articolo:
http://www.simonbattersby.com/blog/jquery-ui-autocomplete-with-a-remote-database-and-php/
Ma non mi chiaro un paio di punti: ogni volta che aggiungo/tolgo una lettera viene rifatta la query al db? se si, non esiste un modo per usare unq qualche cache a cui attingere?
Grazie ! :)
il context menù lo userei solo se STRETTAMENTE necessario.
riguardo la query dipende un pò, se parliamo di "pochi" dati puoi effettuare la query di tutte le righe ed esportarla in formato JSON che poi andrai a richiedere dalla pagina tramite una chiamata ajax, in questo modo ti salvi il JSON e poi il campo viene popolato a partire da questo, non che ogni volta deve rifare la query.
però se parliamo di dozzilioni di dati non ha senso quell'approccio.
evil_stefano
24-01-2014, 00:37
il context menù lo userei solo se STRETTAMENTE necessario.
riguardo la query dipende un pò, se parliamo di "pochi" dati puoi effettuare la query di tutte le righe ed esportarla in formato JSON che poi andrai a richiedere dalla pagina tramite una chiamata ajax, in questo modo ti salvi il JSON e poi il campo viene popolato a partire da questo, non che ogni volta deve rifare la query.
però se parliamo di dozzilioni di dati non ha senso quell'approccio.
mmm.. come mai limiteresti l'uso del context?
i dati sarebbero sul migliaio, se li carico nel JSON e poi l'utente modifica alcuni di essi, devo ricaricare completamente il JSON giusto?
Quindi devo prevedere in fase di aggiornamento/inserimento di un qualunque dato di ricaricarlo sempre, corretto?
se ho più utenti concorrenti, in teoria sarei sulla 10-20ina di sessioni contemporanee, come gestisco la "freschezza" dei dati del JSON che ogni utente vede? un'unico file che ad ogni azione di modifica di ogni utente viene ricaricato?
Grazie.
Tuvok-LuR-
24-01-2014, 00:40
Altra domanda: JQuery + autocompletamento di un campo. Ho visto l'esepio base:
http://jqueryui.com/autocomplete/
Solo che la base dati è un db, quindi ho trovato questo articolo:
http://www.simonbattersby.com/blog/jquery-ui-autocomplete-with-a-remote-database-and-php/
Ma non mi chiaro un paio di punti: ogni volta che aggiungo/tolgo una lettera viene rifatta la query al db? se si, non esiste un modo per usare unq qualche cache a cui attingere?
Grazie ! :)
Devi settare un delay
http://api.jqueryui.com/autocomplete/#option-delay
ad esempio se setti 500 la query viene fatta solo se non hai digitato altro negli ultimi 500 millisecondi.
In termini generici si indica come debouncing
mmm.. come mai limiteresti l'uso del context?
i dati sarebbero sul migliaio, se li carico nel JSON e poi l'utente modifica alcuni di essi, devo ricaricare completamente il JSON giusto?
Quindi devo prevedere in fase di aggiornamento/inserimento di un qualunque dato di ricaricarlo sempre, corretto?
se ho più utenti concorrenti, in teoria sarei sulla 10-20ina di sessioni contemporanee, come gestisco la "freschezza" dei dati del JSON che ogni utente vede? un'unico file che ad ogni azione di modifica di ogni utente viene ricaricato?
Grazie.
direi che in questo caso non ha senso l'approccio json.
segui il consiglio dell'utente qui sopra ;)
evil_stefano
28-01-2014, 09:33
qualcuno conosce uno strumento per disegnare mockup alternativo a WireframeSketcher ma con la stessa grafica? (matitata non a linee perfette)
inoltre, cosa si usa solitamente per rappresentare l'architettura (pagine - database ..) del sito?
non ditemi visio.. ho trovato DIA, ma non so se è il migliore da usare.
devo fare una documentazione sul progetto e sinceramente non ho un template preciso da seguire.. requisiti, specifiche funzionali, uml, casi di test, architettura, mockup... :mc:
Grazie !
http://www.divshot.com/ ?
evil_stefano
28-01-2014, 10:56
grazie, ma mi sono dimenticato :doh: di aggiungere: per linux e open source.
di alternative a pagamento ne ho trovate anche io, ma cercavo qualcosa di open. Come distro ho Mint, quindi un qualsiasi pacchetto debian va bene.
per la seconda domanda hai qualche suggerimento in particolare?
Grazie !
divshot è web-based, non devi installare nulla ti basta un browser moderno (chromium/firefox)
per quanto riguarda il resto non saprei che dirti, mi è capitato solo una volta di rilasciare una documentazione su un progetto che avevo sviluppato e ho utilizzato il template della documentazione di bootstrap:
http://getbootstrap.com/getting-started/
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.