Archivi autore: Cippo

Aggiunto login con Facebook!

Anche se non ho scritto niente qui, negli ultimi giorni ho fatto diversi commit lavorando sulla branch del login di fb :)

Ma roba grossa eh! Grossa grossa eh! Cacchio quanto è divertente esplorare territori per me inesplorati.

Ho imparato a controllare il login col plugin facebook, ho corretto qualche bug sul backend e modificato il db mongo.

Ora ho un modulo CurrentUser che mi gestisce i login con popup che compare e scompare automaticamente quando necessario, e salvo correttamente l’id dell’utente nei disegni.

Devo ben verificare la gestione degli indici di mongoDB. Ma sono solo agli inizi, ne ho di cose da fare ed imparare! :)

Coordinate Dashboard #11

E perchè no, visto che l’ottimizzazione non è mai troppa, ho pensato a come fare meno calcoli possibili durante gli update della cache.

Qualche variabile privata in più a livello di modulo, e i calcoli fatti solo quando quei valori cambiano (zoom) invece che ad ogni loro utilizzo.

Ora il metodo di controllo _isVisible è tornato semplice come in origine nonostante lavori in coordinate assolute.

Ciò mi ha richiesto anche una modifica lato server, ma ne è risultata un’ulteriore ottimizzazione nonché un bugfix, quindi ben venga.

Devo decidermi a procedere sull’integrazione di Facebook!

Bug Coordinate Dashboard #10

Cazzo se solo lo avessi saputo prima! :D

getBoundingClientRect funziona! Anche per gli elementi all’interno di un svg! E questo rivoluziona tutto il calcolo delle coordinate dei disegni in cache.

Intanto ora le coordinate dell’origine del tag G le calcolo così, e mi ritrovo coordinate affidabili al 110%.

Seconda cosa, posso usare lo stesso sistema anche per le due funzioni updateCacheForDrag / Zoom, che non hanno più senso di esistere separate! (Ovviamente per tutte queste modifiche mi tengo commentato anche il vecchio codice, perchè non ho ancora studiato la compatibilità di svg.element.getBoundingClientRect su tutti i browser).

Ora basterà fare una sola funzione che va a cercare nel dom tutte le immagini presenti in cache, e aggiorna pax pxy pxw pxh della cache coi valori presi da getBoundingClientRect. E non sarà nemmeno obbligatorio chiamarla per ogni drag o zoom! Potremo chiamarla ogni tot tempo, o quando ci serve per selezionare il disegno su click, o quando vogliamo rimuovere disegni dal svg.

Bella!

Bug Coordinate Dashboard #9

Il mio problema di salvataggio molto probabilmente nasce dagli arrotondamenti del calcolo delle coordinate del tag G.
Sto provando a sfruttare getBoundingClientRect che a quanto pare funziona sul tag G anche su safari.

PRO: tiene nativamente traccia di tutti gli spostamenti e trasformazioni subite da un elemento, anche trasformazioni.

CONTRO: prende le coordinate attuali del tag G, guardando solo quello che contiene, non le coordinate da cui tutto è partito (quindi 0, 0);

QUINDI: posso provare a mettere su init un px bianco alle coordinate (0, 0) e usare getBoundingClientRect su questo elemento per prendere le coordinate in px dell’origine di tutto il tag g.

FUTURO: devo vedere come va in quanto a performance, ma di sicuro sarebbe più comodo ed affidabile anche per calcolare le coord e dimensioni attuali di ogni immagine in cache dopo drag e zoom.

Bella!

Mi manca il vento

Per 6 mesi ho posseduto il vento.

Lei era mio. Per 6 mesi il vento ha preferito la mia compagnia alla sua naturale libertà. Per sei mesi ha preferito una gabbia, perché la gabbia ero io.

Avere per se qualcosa di forte e libero come il vento è una grandissima fortuna, che ti cambia la vita. E ora che di quella sensazione mi restano solo i ricordi e le sensazioni, desidero un viaggio nel tempo che mi riporti li e mi ridia quell’incredibile opportunità che non ho saputo apprezzare appieno.

Per 6 mesi ho avuto tutto quello che potevo desiderare. Vorrei riaverne un piccolo assaggio ora. Poter leggere nei suoi occhi che preferisce stare con me alla sua stessa natura. E vivere intensamente tutta la bellezza di quel momento. Insieme.

Spero di avere imparato qualcosa. Spero di riavere questa grande fortuna. Spero di riaverla di nuovo mio un giorno, il vento. E questa volta renderla felice. Crescendo, insieme.

Obiettivi #2 – Essere un vero Social Network

Alle pagine utenti (all’idea che ho adesso di come dovranno essere) manca il fattore contatto umano.

Facebook ti permette di seguire dall’esterno la vita delle persone, di trarne informazioni utili, e di farne parte inviando messaggi e aggiungendo foto. Twitter abbatte le barriere verso tutte le persone che vuoi seguire, mettendotele a distanza di un sms. YouTube ti permette di chiacchierare come nel salotto di casa con persone sconosciute nella vita reale.

E Noi? Se le pagine social si limitano a raggruppare i disegni di una persona perdono presto di attrattiva e sembreranno presto tutte uguali al cervello degli utenti avido di informazioni sociali.

Quella pagina deve essere una sottile finestra attraverso cui guardare la vita creativa della persona. Ovviamente non ci aspetteremo di scoprire cosa fa il sabato sera e chi sta frequentando. Per quello sappiamo che c’è Facebook. Ma vogliamo trarne comunque molte informazioni su che persona sia, dove abita e che vita fa. Capire cosa c’è dietro quei disegni, perchè ha quello stile e cosa cerca di trasmettere. Questo è ciò che penso seguendo disegnatori su youtube. Mostrare solo i loro disegni non avrebbe niente di sociale.

In fondo si tratta dello stesso fattore X inventato da Facebook, che lo rese infinitamente più attrattivo di ogni cosa esistente allora.

Obiettivi #1 – La (difficile) visione da realizzare

Di designer non ne vogliamo.

Non è una cosa per professionisti, o anzi, non è una cosa professionale.

YouTube ha avuto un clamoroso e meritatissimo successo perchè ha dato la possibilità a chiunque di improvvisarsi video maker, creatore di contenuti. Con risultati che ovviamente non sono paragonabili a niente di professionale dal punto di vista tecnico, ma è bello proprio per quello. È la creatività il motivo per cui andiamo su youtube, non la qualità delle riprese e del montaggio.

Questo è il fattore virale. Se fossimo rivolti a dei professionisti del design al pc varremmo meno di zero.

L’utente medio deve avere l’illusione che grazie alla tecnologia possa diventare anche lui un artista come quelli seduti sullo sgabello in piazza a Montmartre. Quello è lo stereotipo che va modernizzato nella testa degli utenti.

È nato! (in alpha)

Ci siamo. È online su 20segmenti.it/socialart

È stato strafico veder comparire qualcosa fatto in diretta da Pat!

Ovviamente mi rendo subito conto che prima di essere pronto per un grande numero di utenti ci sono enormi problemi da risolvere, sia tecnici che ergonomici.

Ma intanto posso farlo vedere agli amici vicini e chiedere il loro parere. Non so per il discorso di lasciare il trasparente al posto del bianco. Per ora mi limiterò a mettere un bg al canvas che dia l’effetto trasparente, così da invitare gli utenti a mettere bianco dove vogliono bianco. Poi in futuro potrei adottare soluzioni migliori per aggiungere io il bianco dove desiderato. Immagino possa far incazzare parecchio vedere il proprio disegno rovinato da qualcosa al di sotto.

Ora sono al livello di tutte le altre demo che ho visto online! Faccio le stesse cose offerte dal chrome experiment, ma con la parte editor migliore! (e con qualche bug in più ehm ehm).

Ma che Figata! Giorno importante il 19 maggio 2015. Parte la versione Alpha di Social.Art!

Ergonomia #1 ColorPicker

Ordunque… da quando le coordinate hanno smesso di essere un problema si è passati a discutere sull’esperienza utente :D

ColorPicker tanto per cominciare, che in fin dei conti costituirà da solo il 50% dell’esperienza utente in fase di disegno.

La vecchia versione comprendeva un pop up per scegliere il colore, altrimenti sempre random. Poi Ricca durante la creazione di quello che passerà alla storia come il primo disegno creato su Social.Art mi ha fatto notare qualche punto sconveniente secondo lui:

– non sai quale colore ti ritroverai ad usare in modalità casuale, e non puoi cambiarlo;

– per rimettere colore casuale sarebbe intuitivo un bottone sempre a portata di 1 click, invece che aprire il popup, click sul bottone, chiudi il popup;

– non è strettamente necessario aprire un popup per avere un solo strumento, perché potremmo mettere il ColorPicker sempre a schermo in un angolo e dimezzare i click necessari per la creazione di un disegno “con cognizione di causa”;

Tutte cose veramente intelligenti che in effetti è importante aver pensato. Le ho subito implementate tutte ottenendo meno elementi nel dom, ed una creazione dei disegni semplificata. Ma forse in questo senso mi sento di dire Troppo semplificata.

Lo so, è strano. Mi spiego. Ora il ColorPicker è li bello bello in basso a dx dello schermo, ed il pulsante 5 (tra l’altro con una nuova e bellissima icona “random color” con un dado che su ogni faccia ha diversi colori) permette di selezionare il “colore casuale” e ogni volta che viene premuto ne riseleziona uno diverso. E l’anteprima del prossimo colore è visibile nella preview del CP. Il random è migliorato, ma ora passa in secondo piano rispetto al CP. Cioè, ti ritrovi a voler selezionare un colore specifico, o anche a voler testare il CP, e poi non ne esci più. A quel punto diventa più intuitivo rimanere sullo stesso colore o ricacciare sul CP per selezionarne uno nuovo. E addio random. Addio magia della semplicità con cui chiunque può creare qualcosa di figo. Addio effetto “zero sbatti”.

Quindi credo che farò comunque un passo indietro, mantenendo un passaggio in più per visualizzare il CP e selezionare un colore (tipo la preview sempre visibile, e su click compare il CP o qualcosa del genere), ma col pulsante numero 5 specificatamente dedicato al Random.