Si dice sempre che i web designer non hanno mai il tempo di lavorare sul proprio sito ed effettivamente è proprio così. Tuttavia, anche se nelle ore del giorno sono tutt’ora impegnato a tempo pieno in un progetto che andrà online nelle prossime settimane (e che non vedo l’ora di svelare), ho deciso di investire buona parte dell’ultimo week-end e le ultime due sere proprio nel rinnovare il sito di Kultmedia. L’ultima versione del sito era datata febbraio 2011 e c’era quindi bisogno di una “rinfrescata” generale.

Sono quindi lieto di presentare il nuovo sito di Kultmedia.

So cosa alcuni di voi stanno pensando: è uguale a quello vecchio. A prima vista in effetti potrebbe sembrare così, anche perché ho deciso di mantenere la stessa impostazione che tutt’ora mi piace. Ma sotto la superficie le novità sono parecchie e, a mio avviso, interessanti.

Ecco alcune delle novità:

• Layout responsive
  Sono ormai due anni che si parla di responsive web e ho deciso di muovere anch’io i miei primi passi in questa direzione. D’altronde quale migliore cavia se non se stessi? In questo modo ho potuto eliminare la diversificazione che avevo fatto in precedenza tra versione mobile e versione desktop. Il layout è uno solo, ma si adatta magnificamente alla risoluzione, come vi descriverò meglio tra poco.
• Utilizzo di @font-face
  Uno dei miei obiettivi prima di partire con questo restyling era questo: usare il meno possibile le immagini. Sicuramente uno dei primi modi per raggiungere questo risultato è stato evitare di creare titoli o elementi di menu servendomi di immagini, come nel sito precedente. Normalmente mi servo di strumenti come Cufon o delle validissime Google Web Fonts Api ma questa volta ho deciso di appoggiarmi interamente alla proprietà @font-face introdotta con CSS3, senza dover rinunciare ai miei font preferiti.
• Animazioni CSS3
  Qualcosa era già presente nel sito vecchio, ma qui l’utilizzo è decisamente più rilevante. L’effetto mouse-over sugli elementi del portfolio è gestito unicamente da CSS3, non ho utilizzato jQuery come avrei normalmente fatto in questi casi. Anche le animazioni di fade-in delle immagini (come ad esempio quella nella sezione chi siamo) sono gestite in questo modo. Magari un giorno queste cose funzioneranno anche in Firefox, io non smetto mai di crederci! ;)
• Url “SEO friendly”
  Ho deciso di impostare gli URL in modo che siano più puliti, e di non mostrare l’estensione dei file caricati. La sezione servizi, ad esempio, ora si presenta con un URL di questo tipo: www.kultmedia.com/servizi
  Niente di esagerato, semplicemente un piccolo lavoro di mod_rewrite nella configurazione del server Apache.
• Utilizzo di immagini SVG
  Dato che i nuovi dispositivi utilizzati per la navigazione web hanno definizioni mai viste prima, ho cominciato a fare i miei primi esperimenti con grafica vettoriale sul web. In alcune zone del sito ho quindi utilizzato immagini vettoriali in formato SVG e mi sono servito di Canvg per il rendering e per il parsing delle stesse. 

L’aspetto su cui vale la pena approfondire ulteriormente è quello del responsive design. Per l’impostazione di base mi sono servito di un ottimo framework CSS chiamato Skeleton. I motivi per cui reputo ottimo questo framework è che, pur essendo molto semplice e leggero, ci permette di lavorare su una griglia già ottimizzata per un design di tipo responsive e inoltre si serve di una sintassi molto semplice e facile da ricordare.

Attraverso l’utilizzo delle Media Queries ho potuto ottimizzare il mio CSS in modo che alcuni elementi si comportino in modo differente a seconda della risoluzione. Un esempio pratico: dato che nell’iPad non esiste il concetto di mouse over (non essendoci un mouse) ho fatto in modo che quel tipo di effetto sugli elementi del portfolio sia presente solo nelle risoluzioni “desktop”. Basta rimpicciolire la finestra del browser per notare subito questo comportamento.

Per testare il lavoro, man mano che procedevo, mi sono servito di due interessanti strumenti:

• Windows resizer
  Estensione per Google Chrome scaricabile qui che permette di ridimensionare la finestra del browser alle risoluzioni che desideriamo. Sono inoltre già presenti dei preset con le risoluzioni più comuni.
• Responsinator
  Un tool online che ci permette di vedere come si comporta il nostro design alle risoluzioni dei dispositivi più comuni. Ecco ad esempio la mia pagina di test: Kultmedia su Responsinator.

Naturalmente ho anche effettuato dei test sui dispositivi “veri”, in particolare su iPhone e iPad.

Screenshot da iPhone:

Screenshot da iPad

Per concludere, un paio di dettagli aggiuntivi:

• Per quanto riguarda il CMS ho naturalmente utilizzato Kult CMS, il CMS cloud da me realizzato e lanciato al pubblico a fine 2011. Attraverso il CMS posso gestire interamente tutti i contenuti presenti nel sito e generare automaticamente i feed RSS del portfolio e delle news.
• La validazione dei campi nella pagina contatti è gestita con jQuery, che è tutt’ora il sistema che preferisco per questo genere di controlli. 

Spero che il nuovo sito vi piaccia, se volete darmi del feedback potete farlo attraverso il form dei contatti oppure via Twitter: @ilkose.

Un saluto e grazie per la vostra visita!

Alcuni giorni fa mi sono ritrovato, per un progetto sul quale sto lavorando, ad avere la seguente esigenza: assicurarmi che l’utente, utilizzatore di alcune funzionalità di una webapp, abbia Javascript abilitato.

Perchè un utente dovrebbe aver disabilitato Javascript?
Bella domanda. Effettivamente disabilitarlo non porta nessuna utilità, anzi, rende buona parte del web inutilizzabile. Insomma, non è come disabilitare Flash, lì ci sono diversi vantaggi (performance del browser tanto per dirne uno) ma qui sinceramente non ne vedo.
Detto questo, il fatto che sia poco sensato non significa che un utente non possa farlo. Disabilitare Javascript è una cosa che chiunque può fare e se il nostro sistema non prevede questa eventualità potrebbero esserci dei risultati inaspettati.

Come quasi sempre accade quando mi trovo di fronte a questi dilemmi, cerco sul web e vado a caccia di informazioni. Leggendo nei vari forum e siti specializzati vedo che gli approcci a questo tipo di problema sono i seguenti:

Utilizzare il tag noscript
Tutto quello che noi scriviamo all’interno di noscript viene mostrato solo agli utenti con Javascript disabilitato, gli altri non vedono nulla.

VANTAGGI
Nessun accorgimento particolare da parte nostra: il tag noscript è supportato praticamente da sempre in tutti i browser.

SVANTAGGI
Questa soluzione è ottima per chi vuole mostrare un avviso a chi non ha Javascript. Non va invece bene per chi vuole impedire a chi non ha Javascript di eseguire determinate azioni e visualizzare alcuni contenuti.

Rilevare il browser dell’utente con uno script server side
Rilevando il browser utilizzato possiamo capire se è un browser che supporta Javascript oppure no ed eseguiredel codice in base a questa informazione.

VANTAGGI
È una soluzione relativamente semplice da implementare.

SVANTAGGI
Questo risolve il nostro problema solo in parte: in questo modo possiamo infatti capire se la versione del browser supporta Javascript (quindi fondamentalmente se non è un browser obsoleto) ma non se Javascript è attivo.

Strutturare la nostra webapp in modo che Javascript non sia essenziale
Questa è sicuramente la soluzione migliore ed è quella suggerita dai “perfezionisti”. Se strutturiamola nostra webapp in modo che Javascript serva solo a migliorare la funzionalità ma non sia determinante, possiamo realizzare un prodotto solido e compatibile con tutti. Questa è ad esempio la soluzione che adotta Facebook: se provate ad entrare senza Javascript troverete molte cose diverse (una di quelle che salta all’occhio è il pulsante “invia” sui commenti, che di solito non c’è). Tuttavia la funzionalità globale è inattaccata. Insomma, è tutto meno bello, ma comunque funziona.

VANTAGGI
È la soluzione più sicura e possiamo utilizzare degli script lato server come “backup” nel caso gli script lato client (Javascript appunto) non funzionino.

SVANTAGGI
Non sempre è possibile: se la nostra webapp è fortemente incentrata su Javascript è probabilmente meglio impedire l’utilizzo a chi non ha Javascript piuttosto che fornire una funzionalità zoppicante. Inoltre questa soluzione richiede molto lavoro in più. Si pensi ad esempio ad uno script di validazione di un form: dovremmo fare in modo che ad ogni validazione effettuata con Javascript corrisponda anche una validazione fatta con PHP (o ASP ecc.) nel caso la validazione con Javascript non funzionasse.

La mia soluzione
Dopo aver analizzato le possibilità ho deciso di procedere con una soluzione differente realizzando un mio script. L’approccio dello script è il seguente:

• Utilizzare Javascript per creare qualcosa che sia rilevabile lato server
• Utilizzare PHP per verificare la presenza di questo elemento. Se non è presente significa che Javascript non è stato in grado di generarlo e quindi che presumibilmente è disabilitato

Dopo aver riflettuto su cosa potessi creare con Javascript che potesse essere rilevato lato server ho pensato a queste due soluzioni:

• Creare un cookie con Javascript e poi utilizzare PHP per verificarne la presenza.

• Modificare il valore di un campo hidden in un form e verificare con PHP se questo valore corrisponde.

Dato che nel mio caso specifico avrei fatto questa verifica dopo l’invio di un form, ho deciso di utilizzare la seconda soluzione.

Come funziona?
All’interno del form ho aggiunto un campo hidden in questo modo:

Ora ci serviremo di jQuery per modificare il valore di questo campo.

Prima di tutto includiamo jQuery:

Dopodichè utilizziamo jQuery per scrivere il valore “yes” all’interno del nostro campo hidden:

In questo modo avremo, nella pagina di destinazione del form, una variabile POST chiamata “jscheck” che conterrà il valore “yes” solo se Javascript è stato in grado di scrivere questo valore prima dell’invio.

A questo punto possiamo eseguire del codice diverso a seconda dei due casi (Javascript attivato e Javascript disattivato).

Ecco un esempio in PHP:

Per chi volesse vedere e scaricare una versione completa e funzionante dello script, ho creato una versione liberamente scaricabile chiamata Jscheck. Ecco i link utili:

• Live Demo
• Download dello script (Github)

Diverso tempo fa un cliente mi ha chiesto di implementare, se possibile, la seguente funzionalità: mostrare gli ultimi feedback eBay ricevuti, in un box all’interno del proprio sito. Fino a quel momento era presente un link che rimandava alla pagina originale dei feedback su eBay, ma si voleva saltare questo step e mostrare direttamente i commenti. La cosa naturalmente doveva avvenire in modo automatico, niente copia/incolla per capirci.

Pensando che una cosa del genere fosse già prevista, vado alla ricerca di un widget o qualcosa del genere, più o meno come fanno Twitter o Facebook, tanto per citarne due. Scopro invece, con una certa sorpresa, che eBay non prevede nulla di tutto questo. Non solo non offre widgets per i feedback, ma non esiste neanche un feed RSS per estrarre queste informazioni in modo “pulito”.

Parte quindi la mia consueta ricerca per il web, per vedere se qualche sito o servizio esterno ha la soluzione che fa per me. Purtroppo però non trovo niente di interessante. Esistono diverse soluzioni per mostrare le inserzioni ma, a quanto pare, dei feedback non si è occupato nessuno. In realtà a dire la verità qualcuno se n’è occupato (loro) ma quello che viene mostrato è solo il numero di feedback, mentre a me serve la lista dei commenti.

Alla fine decido di fare da me e di sviluppare lo script in PHP. In qualche ora ottengo il risultato desiderato, metto online e la missione è compiuta.

Nei mesi successivi diverse persone mi chiedono come possono fare a ricreare qualcosa del genere. Mi rendo conto quindi che tutto sommato questa esigenza non era così strana e che in molti hanno bisogno di un box come quello. 

Da qui quindi la decisione di ottimizzare lo script in modo che sia personalizzabile e di rilasciarlo gratuitamente con licenza open source. A questo punto serve solo un nome: decido di chiamarlo Feedbackbox (sì lo so, non ho esagerato con la fantasia) e per condividere il codice sorgente decido di utilizzare l’ottimo GitHub.

Per chi volesse utilizzare Feedbackbox ecco i due link fondamentali:

• Live Demo
• Download (GitHub)

 <? 
 include "feedbackbox.php"; 
 feedbackbox("kultmedia", "10"); 
 ?> 

Nell’esempio riportato qua sopra kultmedia non è altro che lo username eBay, mentre 10 è il numero di commenti mostrati, che possiamo modificare a piacimento.

Lo script permette inoltre una completa personalizzazione dell’output, attraverso CSS.

Ecco le classi modificabili:

ul.feedbackboxlist  (elenco dei commenti)

ul.feedbackboxlist li (singolo commento)

ul.feedbackboxlist li a.username (nome utente / link)

ul.feedbackboxlist li span.text (testo del commento)

Nel file example.php incluso nello zip scaricabile da GitHub troverete comunque un esempio già funzionante che potrete prendere come riferimento.

Inauguro questo blog parlando della mia recente esperienza nel realizzare un url shortener personalizzato, una pratica molto “di moda” dopo la diffusione di Twitter. Il famoso vincolo dei 140 caratteri ha infatti creato la necessità di usare link il più corti possibile. Certo, ci sono vari servizi già pronti per l’uso e gratuiti come Bit.ly, TinyURL e moltissimi altri, ma la tentazione di averne uno personale era per molti geek come me irresistibile! :)

Ecco un esempio del risultato finale che ho ottenuto: http://kos.ee/kult 

Ma partiamo dall’inizio.

Il dominio

Il primo step è stato proprio la scelta del dominio. Ci sono vari tool sparsi per la rete che facilitano la ricerca dei domini disponibili, alcuni di questi specializzati proprio nella ricerca di domini corti. Il più famoso probabilmente è Domai.nr, che aiuta a trovare dei domain hack ovvero dei domini in cui l’estensione contribuisce a formare la parola o il marchio (ad esempio pep.si, youtu.be, ecc.).

Il servizio è piuttosto utile e veloce, ma presenta alcune pecche: molto spesso propone delle soluzioni con domini da uno/due caratteri mostrandole come disponibili, ma in realtà quasi sempre i registrar hanno come requisito minimo che il dominio abbia almeno 3 caratteri. Non sempre quindi ciò che ci viene mostrato da Domai.nr può essere effettivamente acquistato. Inoltre, per quanto il servizio cerchi di essere “intelligente”, non può certo competere con la nostra creatività e vi assicuro, cercare il proprio short domain richiede tutta la nostra inventiva! ;)

Ho “giocato” un po’ con questo tool, provando le parole chiave che in qualche modo hanno a che fare con me, quindi: Kultmedia, Kult, Cosentino, Kose (il mio soprannome da anni) ecc. Purtroppo non sono riuscito a trovare niente di realmente interessante e ho quindi preferito provare un approccio più “manuale” alla ricerca.

Prima di tutto ho trovato questa ottima lista su Wikipedia che ci mostra quali sono tutte le estensioni disponibili nel mondo. Spesso infatti i provider / registrar hanno una scelta piuttosto limitata. Persino Godaddy, registrar a cui mi affido spesso, ha a disposizione non più di una quarantina di estensioni.

Ho capito quindi che l’approccio corretto era:

1. Trovare l’estensione giusta
2. Trovare il registrar in grado di registrare quell’estensione

Naturalmente la difficoltà non sta solo nel trovare un dominio interessante, ma nel trovarlo anche libero. Per fare questi controlli in modo veloce mi sono servito del Bulk domain search tool offerto da 101domain, che permette di cercare anche più domini contemporaneamente.

Dopo un paio di ricerche scopro qualcosa di soprendente: il dominio co.se risultava libero. Ancora incredulo (un dominio di sole due lettere è qualcosa di veramente raro e ottimo per il nostro scopo) decido di inviare l’ordine direttamente con 101domain in quanto abilitato all’acquisto di domini .se (Svezia). Faccio quindi il mio ordine e relativo pagamento e attendo con impazienza l’attivazione.

Qui le cose si complicano… Dopo alcuni giorni senza alcuna notizia decido di aprire un ticket. L’attivazione doveva richiedere dalle 48 alle 72 ore, tempo che era già abbondantemente passato. Purtroppo anche al mio ticket seguono giorni di silenzio assoluto. Nessuna risposta, eppure anche i ticket secondo le FAQ dovevano essere gestiti entro 48 ore. Comincio a leggere un po’ di forum sparsi per la rete e scopro che a quanto pare l’assistenza di 101domain è piuttosto scadente e che c’è in giro gente molto più arrabbiata di me.

Fortunatamente avevo pagato con Paypal quindi mi appello all’unica “arma” ancora a mia disposizione: la contestazione. Apro quindi una contestazione Paypal spiegando le mie ragioni e attendo. Dopo poche ore ricevo il rimborso dell’importo pagato, l’annullamento dell’ordine e una mail che mi spiega che quel dominio, pur risultando libero, è in realtà bloccato dalle autorità svedesi e quindi non può essere acquistato. Contento di aver recuperato i miei soldi (un po’ meno dell’aver dovuto usare le “maniere forti” per farmi valere) torno alla ricerca del mio dominio.

Sono quasi sul punto di comprare kose.li quando un mio amico, Paolo, mi illumina suggerendo kos.ee (Estonia). L’idea mi sembra ottima ma anche qui trovo un ostacolo: pare infatti che per possedere un dominio in Estonia sia necessario possedere lì la residenza o un’attività. Cerco un modo per “aggirare” questo vincolo e scopro che 101domain offre un servizio di Trustee ovvero un servizio di presenza locale in Estonia. Purtroppo però non mi fido più molto di loro e proseguo la mia ricerca fino a trovare l’eccellente Marcaria.com che fin da subito si rivela la soluzione al mio problema, ad una cifra più che ragionevole. Concludo l’ordine e dopo qualche giorno sono il felice possessore del dominio kos.ee.

Il servizio

Bene, ora ho il mio dominio, ma cosa ci faccio?

Da diverso tempo Bit.ly ha reso disponibile nella versione free una funzionalità che prima era riservata ai possessori di un account Pro: i custom short domain.

Procedo quindi subito alla configurazione, molto semplice:

1. Aprire un account gratuito su Bit.ly
2. Puntare i DNS del nostro dominio sul server di Bit.ly
3. Comunicare a Bit.ly il nostro custom domain (ed eventualmente metterlo come predefinito)

Il sistema funziona alla perfezione e trovo subito alcune funzionalità davvero interessanti: la possibilità di monitorare i click sui nostri short link, la presenza di estensioni per i browser più diffusi ecc. Nel complesso un ottimo servizio.

Mi scontro però con due cose che non mi piacciono molto:

• Non è possibile fare il forward del dominio “base” (ad esempio http://kos.ee) a un sito da noi scelto. Il nostro dominio infatti rimanderà automaticamente alla homepage di bit.ly e non è possibile modificare questa impostazione (se non comprando la versione Enterprise alla cifra astronomica di $995,00 al mese, che si possono permettere solo alcuni mostri sacri come Pepsi e il New York Times).
• La stringa generata nel nostro short url non è altro che un alias della stringa col dominio bit.ly. Per rendere meglio l’idea: kos.ee/s6zkws è esattamente la stessa cosa di bit.ly/s6zkws. Questo significa che, pur avendo un dominio custom, non avremo mai delle stringhe semplici perchè la nostra stringa deve essere univoca non solo per il nostro dominio ma per tutto il database degli utenti bit.ly.

Insomma, il nostro dominio è diventato un “mirror” di Bit.ly. Il controllo che abbiamo è quindi fortemente limitato.

Decido di cercare un’alternativa e per un po’ valuto l’idea di acquistare CloudApp Pro, a una cifra ragionevole: $45,00 all’anno. Oltre all’ottimo servizio di condivisione file, infatti, viene offerto anche un url shortener personale.

C’è un altra idea che mi frulla in testa: farmelo da solo e ospitarlo su un mio server. “Sono pur sempre uno sviluppatore”, mi dico, “che sarà mai?”. Ma prima che io possa valutare seriamente l’idea di “fare da me” mi imbatto in questo fantastico script PHP open source: Yourls. 

L’installazione è piuttosto semplice, si copiano i file nello spazio web, si fanno un paio di modifiche al file di configurazione (in cui dobbiamo inserire i parametri per la connessione a un database MySql) e il gioco è fatto. Inoltre la documentazione sul sito è completa e dettagliata.

Dopo aver fatto funzionare il tutto mi rendo conto di avere davanti uno strumento ottimo, che non ha niente da invidiare ai vari servizi già provati ma col vantaggio di essere self-hosted e quindi mio al 100%. Posso creare degli indirizzi corti e semplici come ad esempio http://kos.ee/kult e inoltre ho potuto indirizzare il dominio “base” al mio sito personale. Le statistiche dei click ci sono, si possono modificare i link già creati e ci sono addirittura diversi tipi di Bookmarklet che possono essere inseriti nel nostro browser con estrema facilità. Insomma, lunga vita a Yourls, un piccolo “gioiellino” che consiglio a tutti.

Con questa storia (piuttosto lunga a quanto pare, spero di non avervi annoiato) si conclude il mio primo post su questo blog, mi auguro che la mia esperienza possa tornare utile a qualcuno! :)

P.S. alla fine quelli di 101domain hanno risposto al mio ticket. Peccato che fosse già passata più una settimana dalla chiusura del “caso”… Se non altro però hanno avuto l’accortezza di correggere l’errore nel loro tool di ricerca, ora il tentativo di registrare quel dominio dà esito negativo, com’è giusto che sia.