SAL040214

1. Registrazione utente SOCIAL, persona fisica. Come da Screenshot1 c'è sempre una
sovrapposizione tra il nome utente e password in memoria e le indicazioni di inserimento.
Al posto di Acconsento e Non Acconsento userei i termini Accetto e Non accetto. Al
momento della registrazione appare il messaggio "La registrazione è avvenuta con successo.
Ora potrà usufruire del nostro servizio. Per proseguire è necessario compilare tutti i campi
obbligatori." che dovrà essere aggiornato con il seguente e box in verde: La registrazione
GRATUITA al profilo SOCIAL è avvenuta con successo. Ora potrai utilizzare la nostra
piattaforma. Per proseguire è necessario compilare i campi obbligatori .
2. Dato che rimangono sempre le stesse indicazioni se sono privati o imprese possiamo
cambiare i testi PACCHETTO in questo modo?
Dati fatturazione in DATI (maiuscolo)
Sede legale in INDIRIZZO/SEDE LEGALE (maiuscolo)
Anche "Italia" all'inizio del blocco indirizzo dovrà esser in rosso vista l'obbligatorietà.
3. PROFILO E SCHEDE
 I testi indicanti le informazioni da inserire in PROFILO e SCHEDE li mettiamo in
maiuscolo.
Profilo==PROFILO
Scheda==SCHEDA
Logo==LOGO
Immagini== IMMAGINI
Social==SOCIAL
Riferimenti==RIFERIMENTI
Allegato==ALLEGATO
Audio==AUDIO
Video==VIDEO






Il box per l'inserimento del testo descrittivo si può ridurre in altezza in modo che la
colonna sx sia abbastanza allineata in fondo con la colonna dx?
L'editor di testo dovrebbe essere integrato con la grandezza carattere.
"Torna all'elenco" lo si può trasformare in pulsante come il "Salva".
Con il click sulla scheda dovrebbe attivarmi l'anteprima come succede nella sezione
QR3.
Il box di inserimento testo con editor non si vede con Ipad.
lo spazio tra queste due sezioni (vedi immagine) deve essere ridotto
4. QR3
 prevedere il campo "nessun messaggio" per il campo "messaggio" (quindi lasciare
in bianco).
 "Torna all'elenco" lo si può trasformare in pulsante come il "Salva".
 Aggiungere il testo che spiega il link web:
URL per la scheda QR3: http://qr3.clientibodi.it/it/profilo/daniele-gulic/
 cliccando sul pulsante salva dall'immagine QR3 mi deve esportare la stessa
immagine presente nella stampa e non il solo qr.
 le condivisioni non sono ancora attive?
5. VISUALIZZAZIONE SCHEDE
 per la visualizzazione web, riportare tutti i titoletti in maiuscolo ed inserire sotto ogni
titolo una riga orizzontale che va ad occupare l'ampiezza del blocco (come da CSS
elaborato).
 Al posto della dicitura "CONTATTI", "CONTACT" nella visualizzazione mobile di
mettiamo "TOOLS".
 Inseriamo sempre tutti i contenuti. Quando non ci sono video o audio mettiamo uno
di default (che possiamo cambiare). Quando mancano le altre informazioni di
contatto (Tools) inserire sempre i pulsanti e quando l'informazione è mancante
farla trasparente 50%.
 Le immagini devono essere su una riga sola e nel caso ci siano più immagini
prevedere le frecce di scorrimento (presenti nella grafica, mentre per il mobile con il
movimento del dito dovrebbero scorrere).
 Le schede devono avere la grafica come da CSS. Bordo grigio (come da CSS),
immagine e titolo e, nel caso di più schede, devono comparire le frecce di
scorrimento. Come da CSS, quando si riduce la visualizzazione, la grafica cambia.
 quando sono all'interno di una scheda, devo avere l'evidenza del profilo e delle
altre schede presenti.
STRUTTURA GRAFICA QR3 – LATO UTENTE CONSULTAZIONE
4 layout:
1) Desktop/tablet orizzontale grande
2) Tablet verticale grande (tablet piccolo orizzontale)
3) Smartphone orizzontale (tablet piccolo verticale)
4) Smartphone verticale
Desktop – Tablet orizzontale
Larghezza complessiva orizzontale degli elementi: Circa 900px
Logo utente in alto a sinistra, in fianco al logo QR3
Titoli in maiuscolo (AUDIO, CONTATTI, IMMAGINI, SCHEDE)
Aggiunta linea grigia sotto i titoli
Blocco CONTATTI:
1) Sostituzione icone con quelle nuove.
2) Le icone dei contatti dovranno riempire lo spazio a disposizione (in teoria 320 px).
3) Lo spazio a disposizione per descrizione e mappa ridotto a 532 px (invece di 550
px).
4) Nuove icone telefono, indirizzo e allegato: icona rettangolare. All’interno della zona
grigio chiaro dell’icona va inserito il numero di telefono o l’indirizzo o il nome
dell’allegato (con estensione). Allineamento del testo da decidere.
5) Dimensioni icone:
a. Quelle quadrate dovrebbero andar bene 80x80 px.
b. Icone telefono e indirizzo dovrebbero andar bene 80x200 px
c. Icona allegato, dovrebbe andar bene 80x320px
6) Per riempire lo spazio a disposizione, dovrebbe andar bene una spaziatura tra le
icone di 40 px.
7) Ordine icone:
a. Sito web + telefono
b. Email + indirizzo
c. Allegato
d. I tre social
e. Gli altri tre social
8) Le icone non utilizzate/prive di link, rimarranno visibili ma in trasparenza 50%
(questo per ogni layout).
9) Mappa:
a. Sotto la mappa andrà il blocco degli orari di apertura (se esistente)
b. L’altezza della mappa più l’altezza del blocco orari apertura dovrebbe essere
comparabile con l’altezza complessiva del blocco delle icone dei contatti. Se
non ci sono orari di apertura la mappa dovrebbe coprire anche lo spazio per
il blocco orari.
Blocco IMMAGINI
Unico rettangolo contenente 5 immagini. Il rettangolo avrà 2 frecce di scorrimento (una a
destra e una a sinistra) per poter scorrere sulle altre immagini nel caso fossero più di 5 (o
spostamento con trascinamento da mobile).
Attorno a ogni immagini ci deve essere un bordo grigio (come da CSS/html esempio)
Blocco SCHEDE
Idem come per il blocco IMMAGINI.
Attorno a ogni preview di scheda ci deve essere un bordo grigio come le immagini. Il nome
scheda deve essere centrato orizzontalmente e verticalmente, colore nero.
Tablet grande verticale (tablet piccolo orizzontale)
Larghezza complessiva orizzontale degli elementi: circa 550px
Ordine elementi, uno sotto l’altro:
1) Descrizione azienda
2) CONTATTI con Icone contatti
3) Mappa
4) VIDEO
5) AUDIO
6) IMMAGINI
7) SCHEDE
Icone contatti:
1) Nuova icone allegato: icona rettangolare grande (in sviluppo)
2) Dimensioni icone:
a. Quelle quadrate dovrebbero andar bene 80x80 px.
b. Icone telefono e indirizzo dovrebbero andar bene 80x220 px
c. Icona allegato, dovrebbe andar bene 170x222px
3) Per riempire lo spazio a disposizione, dovrebbe andar bene una spaziatura tra le
icone di 14 px.
4) Ordine icone:
a. Sito web + telefono
b. Email + indirizzo
c. Allegato
d. I tre social
e. Gli altri tre social
IMMAGINI
Come la parte desktop ma con lo spazio occupato da tre e non cinque immagini alla volta
SCHEDE
Idem come IMAGINI
Idem come IMAGINI
Smartphone orizzontale (tablet piccolo verticale)
Larghezza complessiva orizzontale degli elementi: circa 350px
Ordine elementi, uno sotto l’altro:
1) Descrizione azienda
2) CONTATTI con Icone contatti
3) Mappa
4) VIDEO
5) AUDIO
6) IMMAGINI
7) SCHEDE
a.
b.
c.
d.
e.
Icone contatti:
1) Nuova icona allegato: icona rettangolare grande
2) Dimensioni icone:
a. Quelle quadrate dovrebbero andar bene 90x90 px.
b. Icone telefono e indirizzo dovrebbero andar bene
90x220 px
c. Icona allegato, dovrebbe andar bene 90x350 px??
3) Per riempire lo spazio a disposizione, dovrebbe andar bene
una spaziatura tra le icone di 40 px.
4) Ordine icone:
Sito web + telefono
Email + indirizzo
Allegato
I tre social
Gli altri tre social
IMMAGINI
Come la parte desktop ma con lo spazio occupato da una immagine alla volta
SCHEDE
Le schede non appariranno come immagini ma solo come titolo (allineato a sx, colore
nero), inserito in una tabella con 5 righe( vedi figura a fianco per ripresa della grafica). Se
ci sono più di 5 schede, l’utente dovrà poter interagire per visualizzare le altre a blocchi di
5.
Se si è nella pagina profilo si vedranno solo le altre schede, se si è in una scheda si vedrà
come primo record della tabella il profilo con carattere rosso grassetto e a seguire le altre
schede con la distribuzione a blocchi da 5.
Smartphone verticale
Larghezza complessiva orizzontale degli elementi: circa 300px
Ordine elementi, uno sotto l’altro:
1) Descrizione azienda
2) CONTATTI con Icone contatti
3) Mappa
4) VIDEO
5) AUDIO
6) IMMAGINI
7) SCHEDE
Icone contatti:
1) Nuova icona allegato: icona rettangolare
2) Dimensioni icone:
a. Quelle quadrate dovrebbero andar bene 90x90 px.
b. Icone telefono e indirizzo dovrebbero andar bene 90x195 px
c. Icona allegato, dovrebbe andar bene 90x300 px
3) Per riempire lo spazio a disposizione, dovrebbe andar bene una spaziatura tra le
icone di 30 px.
4) Ordine icone:
a. Sito web + telefono
b. Email + indirizzo
c. Allegato
d. I tre social
e. Gli altri tre social
IMMAGINI
Come la parte desktop ma con lo spazio occupato da una immagine alla volta
SCHEDE
Le schede non appariranno come immagini ma solo come titolo (allineato a sx, colore
nero), inserito in una tabella con 5 righe(come prima evidenziato). Se ci sono più di 5
schede, l’utente dovrà poter interagire per visualizzare le altre a blocchi di 5.
Se si è nella pagina profilo si vedranno solo le altre schede, se si è in una scheda si vedrà
come primo record della tabella il profilo con carattere rosso grassetto e a seguire le altre
schede con la distribuzione a blocchi da 5.
LATO AMMINISTRAZIONE
Nella Categoria QR Code devo prevedere l'immagine anche per la versione in inglese o
per le altre lingue che poi si aggiungeranno.
Lato amministrativo per le schede, profilo e web marketing (per cosa si differenzia dalle
altre tab?) devo aver la possibilità di gestire l'editor nella forma più completa, anche con
codice html per tutte i profili.
Anche i testi da inserire nella descrizione dei pacchetti e costi devono avere l'editor
completo e html.
La scritta "Lo strumento per raggiungere i tuoi obiettivi" deve essere editabile e prevedere
la versione inglese o altre lingue future.
Il blocco "Ulteriori informazioni " con la freccia deve essere spostato più in basso e deve
essere seguito da una linea grigia di taglio come succede nel sito di Dropbox (che usa
CSS liquid come quello di Dermap).
Le schede del profilo "CUSTOM" devono essere personalizzabili. Decidere i campi da
tenere e quelli da aggiungere. Paradossalmente potrei avere una sola descrizione con un
pulsante.
La geolocalizzazione CUSTOM, deve prevedere l'inserimento di un iFrame proveniente
dal nostro SOCIAL GIS.
Vi alleghiamo immagine di come deve essere la mail di risposta dopo la registrazione (I
testi devono essere editabili).