Cristian Galletti

Facebook ora supporta le citazioni stile Twitter

// ottobre 7th, 2009 // No Comments » // Accade nel Web, Lezioni di Internet, Per un web migliore, Sviluppo e tips

Da qualche giorno Facebook ha integrato una nuova funzionalità per gli utilizzatori: quando scrivete qualcosa nel vostro stato potete “citare” contatti della vostra lista degli amici aggiungendo il carattere “@”. Il sistema aprirà una finestra in cui sarà possibile scegliere gli amici da associare a questo messaggio. Presto questa funzionalità sarà estesa anche alle applicazioni.

Un avviso sarà inviata automaticamente all’amico citato.
Cosa ne pensate?

Condividi su...

Profili creativi su Facebook: personalizza l’immagine del tuo profilo in modo originale

// luglio 28th, 2009 // No Comments » // Creatività e Design, Per un web migliore, Sviluppo e tips

Per deformazione professionale tendo sempre ad avere un approccio aperto alle cose, cercando di andare oltre l’impatto iniziale e gli schemi precostituiti. Non sono un rivoluzionario, sia chiaro, anche se sono indubbiamente un testardo. Così anche per quel che riguarda il mio profilo su Facebook ho sempre cercato di personalizzarlo con una immagine creativa che potesse sottolineare la mia indole fantasiosa.

Portroppo Facebook ad oggi non supporta l’utilizzo di immagini PNG trasparenti come immagini del profilo quindi se provate a caricare una PNG di questo tipo inevitabilmente viene visualizzato un riquadro bianco attorno al disegno… così l’unico sistema per ovviare a questo “limite” è quello di creare una immagine “ad hoc” che riprenda anche lo sfondo.

Vediamo come

Come potete vedere nell’immagine qui a fianco (click per ingrandire) l’area a disposizione per la foto è un rettangolo largo 200 pixel e alto a piacere.
Questo rettangolo è posizionato in modo da iniziare nella parte azzurro chiaro in alto nella pagina e continuare sotto dove la pagina diventa bianca.

Lo stacco da bianco ad azzurro può sembrare un muro bianco oltre quale si intravvede il cielo…
non vi pare?

Ecco perché ho pensato di personalizzare la mia pagina come nell’immagine qui a fianco…
una sorta di tentativo di evadere. :-)

Per iniziare è necessario partire da una base grafica che comprenda il “muro” bianco, il bordino e la zona azzurra in alto: ho creato un template di Photoshop utile per chi ha capacità grafiche ma anche una immagine JPG sulla quale i meno ferrati possono intervenire a piacere.
Scaricatele e iniziate a lavorarci come descritto di seguito.

Partite dal template vuoto e pensate a come poterlo personalizzare: si presta a una miriade di interpretazioni…
io amo il surrealismo e mi piace interpretare l’immagine del profilo in questa chiave.
Supponiamo di utilizzare l’immagina di una rana che si arrampica sul muro (vedi immagine a fianco).

Aprite il template che avete scaricato e inserite l’immagine della rana nella parte bianca dell’immagine.

Se l’immagine ha uno sfondo di altro colore basta intervenire su curve, livelli e correzione colore per adattarla al meglio (saperne un po’ di grafica aiuta).

Per concludere tagliate l’immagine in basso in modo da togliere eventuale spazio bianco in eccesso.

Attenzione: non tagliate mai in alto!

Ed ecco qui a fianco il risultato finale.

Altre immagini di profilo realizzate

Mi sono divertito a creare diverse immagini che abbiamo pensato di condividere nella pagina dedicata alla mia azienda su Facebook.
Visitate la pagina, diventate fan e usate le immagini.

Se le utilizzate abbiate la cura di lasciare un messaggio!

Segnalate le vostre personalizzazioni nei commenti e contribuite alla diffusione di questo nuovo modo creativo di interpretare Facebook.
Buon divertimento!

Condividi su...

Shines… come farli in Flash?

// giugno 8th, 2009 // 1 Comment » // Per chi il Web lo fa, Sviluppo e tips

Sono molte le persone che mi hanno contattato per capire come è stata realizzata la header in Flash del vecchio template del mio blog, ma che Alessandro usa ancora e che abbiamo utilizzato anche su shines.it

Shines appunto: l’idea è quella di simulare luci o bagliori con un movimento del tutto casuale e quanto più naturale e come spesso accade le cose semplici sono le più efficaci!
Infatti si tratta solo dell’applicazione della sintesi additiva dei colori… una idea e pochissimo codice… vediamo.

Beh, facciamo così… diciamo che non vi svelo proprio tutto tutto… ma quello che sta alla base: poi metteteci del vostro ok?

1. Aprite un nuovo progetto su Flash, impostate lo sfondo su nero e create tre cerchi senza bordo a cui date un riempimento di tipo gradiente: uno rosso, uno blu e uno giallo.
2. Trasformateli in movieClip selezionateli tutti e dal pannello delle proprietà selezionate come proprietà Blend “Add”.
3. Ora scrivete due righe di ActionScript per far muovere a piacere i tre clip sullo stage e guardate cosa accade quando si sovrappongono.

Ed ecco qui il risultato!

Semplice no?

Condividi su...

File Upload con Flash e PHP

// marzo 6th, 2008 // 2 Comments » // Sviluppo e tips

Già da diverso tempo è stata introdotta la classe actionscript flash.net.FileReference che permette la gestione degli upload/download da Flash Player.
Abbiamo già usato in Webgriffe questa classe per diversi progetti web, in particolare per backoffice e web applications, ma recentemente ci siamo scontrati con un malfunzionamento di questo tipo di implementazione su un sito in Flash ospitato su TopHost al quale dovevamo permettere l’upload di curricula tramite form.
Accadeva che all’atto dell’upload il file non veniva scritto sul server ma veniva restituito un HTTPError 406.
Il problema si presentava solo sul server di TopHost e consultando le FAQ e la guida tecnica fornita dal mantainer abbiamo concluso che era causato da impostazioni di sicurezza. In pratica TopHost blocca l’attribuzione di permessi a file e cartelle superiori al chmod 0750.

Per completezza di informazione riporto il code actionscript utilizzato:

import flash.net.FileReference;var fileTypes:Array = new Array();
var allowedTypes:Object = new Object();
allowedTypes.description = "Documenti (*.pdf, *.doc, *.rtf, *.txt)";
allowedTypes.extension = "*.pdf; *.doc; *.rtf; *.txt";
fileTypes.push(allowedTypes);
var fileRef:FileReference = new FileReference();
var listener:Object = new Object();
listener.onComplete = function() {
trace("CURRICULUM FILE UPLOADED!");
};

listener.onHTTPError = function(file:FileReference, error:Number):Void {
trace("onHTTPError: " + file.name + " Error: " + error);
}

fileRef.addListener(listener);
curriculaForm.btn_browse.btn.onRelease = function() {
fileRef.browse(fileTypes);
};

e il codice PHP invece

if ($_FILES['Filedata']['name']) {$uploadDir = "/uploadedfiles/curricula/";
$uploadFile = $uploadDir.$_FILES['Filedata']['name'];
move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile);
}

Per aggirare il problema ci sono sostanzialmente due soluzioni da provare.

1. Dal pannello di controllo di TopHost cliccare il pulsante “Ripristina spazio web” che reimposta i permessi corretti alle cartelle e ai file del sito.
2. Modificare il codice PHP precedente aggiungendo il comando chmod($uploadFile, 0644) subito dopo move_uploaded_file(...)

Condividi su...

Dynamic textField kerning in Flash8

// febbraio 7th, 2008 // 1 Comment » // Sviluppo e tips

UPDATE: Click here for the english version (by Bob Walton)

Stiamo lavorando alla nuova versione del sito web aziendale (tempo permettendo) e come è giusto ci si pone sempre degli obiettivo complessi, delle soluzioni nuove e complicate.
All’atto del progetto grafico in Photoshop alcuni campi di testo sono stati pensati con il font Adobe Garamond Pro con un corpo molto grande e un kerning di -50 che in Flash si traduce in -3.

Andando a realizzare il codice Flash si è verificato il seguente problema: create un textField sullo stage con font e kerning impostati a piacere e dategli come instance name my_text

Poi via actionscipt settate:

my_text.text = "Hello world!"

Come noterete non viene visualizzato il kerning settato nel pannello delle proprietà del textField (vedi prima riga della figura sottostante).

Leggendo la guida di Flash (F1) ci viene consigliato di incorporare il font in libreria e utilizzare TextFormat… ma assolutamente non ne vuole sapere di funzionare.
Una soluzione (ridicola) c’è ed è stata frutto di prove e, diciamolo, fortuna. Si tratta di creare un textField dinamico identico a quello che ci servirà nella nostra applicazione, in una zona non visibile dello stage (ad esempio a x:-2000 y:-2000) con qualcosa scritto dentro (ad esempio “Test”) e gli diamo con instance name tf_test. A questo punto scriviamo la seguente riga di codice:

var fmt:TextFormat = tf_test.getTextFormat();

Poi sullo stage mettiamo un textField con instance name my_text con le stesse proprietà di quello di test e scriviamo:

my_text.setTextFormat(fmt);

my_text.setNewTextFormat(fmt);

my_text.text = "Hello World!";

Il risultato è quello che vedete nella seconda riga della figura precedente.
Se scoprite altre soluzioni interessanti fatemi sapere.

Condividi su...