Se da un lato si è più efficienti perché si evitano errori dovuti a comunicazioni ambigue, è anche vero che se il progetto è abbastanza corposo diventa conveniente suddividere il lavoro in sotto-problemi da affidare a persone diverse.

Bisogna stare molto attenti a suddividere per bene il lavoro ma, sopratutto, evitare come la peste i fraintendimenti: spesso è difficile comunicare chiaramente un concetto che a noi sembra tanto semplice.

Come tentare di arginare questo problema e forse anche risolverlo? Servirebbe uno strumento in grado di tener traccia di tutte le task e che nel contempo metta a disposizione potenti strumenti comunicativi e decisionali.

Qualcuno c’ha pensato ed ha realizzato Trello.

Trello, attraverso una veste grafica semplice ed abbastanza intuitiva, ci permette di gestire le azioni da compiere per il completamento di un lavoro/progetto. L’applicazione ordina i concetti appena espressi grazie all’utilizzo delle liste.

Ogni lista può contenere le famigerate task che possono essere associate a uno o più partecipanti. Avremo, quindi, sempre sotto controllo i nomi di chi sta lavorando su cosa.

Nelle task è possibile inserire dei commenti, domande a risposta multipla ed anche allegati. C’è anche la facoltà di inserire dei labels colorati, utili per marcare la loro urgenza o, eventualmente, il completamento.

Come avrete potuto notare il servizio è ottimo per lo sviluppo di software, ma la sue possibili applicazioni spaziano anche in altri campi, come ad esempio l’editoria online. Trello si presta bene anche nel caso in cui i partecipanti lavorino a distanza.

Per gruppi piccoli di persone non ne vale la pena, ma quando si perde il controllo della situazione è meglio chiedere aiuto a Trello. Conoscete altri sistemi per non impazzire durante un lavoro di gruppo?

Trello, per collaborare online
Fortunecat.it Web Marketing

• “Come funziona questo?”;
• “Come posso fare per ottenere le stesse cose?”;
• “Come posso migliorare queste funzioni?”.

Spesso ne passa di acqua sotto i ponti prima che trovi una risposta. Proprio in queste settimane ho finalmente scovato una soluzione a questa domanda: “Come fa Facebook a cambiare l’URL senza ricaricare l’intera pagina?“.

Se ci fate caso, quando scorrete le foto di un’album o cambiate pagina all’interno di un profilo, noterete che la pagina non viene ricaricata, eppure l’URL si modifica. Tutti sanno che ajax ci viene in contro per cambiare il contenuto di una pagina, ma quanti sanno come cambiare l’URL?

Ansiosi di conoscere la risposta? Vi accontento subito: si tratta di un’API di HTML5, per essere più precisi la “HTML5 History API“.

Immaginate di inviare ad un vostro amico un link ad una foto appena vista in un album. Senza questa API vedrà la sua bacheca principale o cose simili. Comprenderete ora l’importanza di questa nuova funzione introdotta nell’HTML5.

Tutto bello, anzi bellissimo, ma c’è un ma… Cosa fare per browser come le vecchie versioni di Internet Explorer (che dio le abbia in gloria) che non sanno minimamente cosa sia l’HTML5? In questo caso ci viene in soccorso un ottimo plugin disponibile per jQuery, Mootools, Right.js e Zepto. Si chiama History.js.

Come prima cosa, importiamo il plugin inserendo nella pagina queste due stringhe:

<script src="http://balupton.github.com/history.js/vendor/jquery.js"></script>
<script src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>

Per cambiare l’URL sarà necessario utilizzare la funzione:

History.pushState(data,titolo,url);

Dove “titolo” ed “url” sono rispettivamente il titolo della pagina ed il nuovo URL mostrato dal browser, mentre “data” sono informazioni che vogliamo passare (fra poco sarà più chiaro).

In questo modo si creeranno delle task nella cronologia. Cliccando il pulsante del browser per andare nella pagina precedente si ritorna all’URL precedente, ma il contenuto della pagina? Come accorgersi che lo stato (URL e titolo della pagina) è cambiato? Rispondo subito con questa funzione:

    History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
        var Data = State.data;
        var Titolo = State.title;
        var URL = State.url;
    });

Questa funzione va in esecuzione quando lo stato del browser cambia e registra informazioni come “Data” passati in precedenza dalla funzione “History.pushState”, “Titolo” che è il nuovo titolo della pagina e “URL” che è l’URL appena cambiato.

Starà a noi, poi, creare delle funzioni che cambino il contenuto della pagina. Ora si spiega come mai cliccando su una foto su Facebook, si apre una cornice nella pagina stessa, senza ricaricarla, ma se si prova ad andare all’indirizzo indicato dall’URL, si approda in una zona totalmente diversa (quella della foto senza effetto modal).

Ci sono anche altri due siti che conosco e che usano questo sistema: Google+ e GitHub. Ne conoscete altri?

Abbonatevi al feed della sezione Hi-Tech per scoprire altri trucchi simili a questo.

History API: cambia l’url senza ricaricare la pagina
Fortunecat.it Web Marketing

Credo che converrete con me nel pensare al “principio” come la parte più dura della nostra vita da programmatori.

Iniziare a programmare è molto difficile, insomma…

Non mi riferisco a quando si decide di imparare un nuovo linguaggio, ma proprio a quando ci si affaccia per la prima volta su questo affascinante mondo.

La difficoltà principale sta nel comprendere i meccanismi che stanno alla base del “linguaggio macchina”.

Da questa fase non ne escono solo i migliori, ma già si può notare una bella scrematura dei candidati programmatori.

Molti abbandonano perché proprio non riescono a capire i concetti più semplici ma fondamentali. Le guide che si trovano in giro, solitamente, sono un po’ troppo tecniche per i “nuovi arrivati”.

Sono fermamente convinto che imparare da qualcuno che le cose te le spiega a voce e “dal vivo” sia la cosa migliore. Fare domande, ricevere immediatamente risposte, farsi ripetere in modo diverso i concetti. Queste sono cose che in una guida online non si possono ottenere.

Oggi voglio presentarvi un servizio online che tenta di riparare a questa mancanza e ci riesce anche abbastanza bene. Si chiama Codecademy.

Cosa rende questo servizio diverso da una comune guida? Semplice: utilizzandolo si avrà l’impressione di chattare con qualcuno. Infatti, i corsi sono strutturati in forma di dialogo, il programma ci dirà cosa fare e mentre lo facciamo impariamo anche qualcosa di nuovo. Impariamo a programmare, appunto.

La teoria è relativamente poca (in inglese), mentre molto spazio  viene riservato alle esercitazioni. Infatti, sarà possibile testare quello che si è appena imparato durante il corso.

Il servizio è appena nato, quindi ci sono solamente 3 corsi: uno di introduzione e gli altri 2 sul javascript. Decisamente pochini per decidere se si tratti di un buon servizio. Restiamo ad aspettare, sicuramente compariranno altri corsi a breve.

Ovviamente questo è un servizio utile solamente nella fase iniziale, non sognatevi di passare qualche giornata a studiare con Codecademy e di poter iniziare a sviluppare siti o altro.

Dopo dovrete passare settimane se non mesi a studiare in maniera più approfondita quel che Codecademy vi ha solamente introdotto.

Cosa ne pensate? E’ un valido servizio?

Come sempre vi invito ad abbonarvi al feed della sezione Hi-Tech e a ricondividere il post. Alla prossima.

Codecademy, e impari a programmare
Fortunecat.it Web Marketing

Prendiamo ad esempio Facebook: è molto complesso, eppure anche gli utenti più “all’antica” riescono ad utilizzarlo senza problemi. Forse è stata proprio questa una delle chiavi della sua incredibile diffusione.

Il Fattore Tempo

Uno dei fattori che caratterizza l’usabilità di un sito è il tempo impiegato dall’utente per compiere un’azione. Se ad esempio la registrazione è troppo lunga, aumenterà il tempo necessario al suo completamento e con esso le probabilità di un ripensamento dell’utente (ossia: perdiamo potenziali clienti).

Vi sarà sicuramente capitato, durante una registrazione, di dover scegliere la vostra nazionalità…

Personalmente clicco ripetutamente la “i” sulla tastiera per arrivare velocemente alla voce “Italia”, ma cosa succede il 70% delle volte?

Salto ciò che vorrei selezionare e ricomincio dalla prima “i”. Per farvi comprendere come mi sento quando succede, pensate al meme ”Rage Guy”.

Migliorare i campi select dei form con jQuery e Chosen

E’ proprio dei select che voglio parlare oggi. Se i valori tra cui scegliere sono al massimo una decina, allora non c’è problema, riusciamo ancora a selezionare ciò che ci serve evitando inutili perdite di tempo.

Cosa succede se invece le voci sono tante quanto gli stati del mondo? Qui qualche problemino lo incontriamo ma ci siamo – se non abituati – rassegnati.

Come possiamo risolvere questo problema che colpisce le nostre creazioni? Come donare ai nostri utenti un’esperienza innovativa e rilassante? Semplice, usando un plugin jQuery creato appositamente per risolvere questo tipo di problema: Chosen.

Chosen trasformerà gli odiosi select chilometrici in graziosi select contenenti un campo per il filtraggio che ci consentirà di trovare e selezionare ciò che vogliamo.

Anche i select multipli si trasformeranno dandoci l’impressione di “taggare” ciò che intendiamo selezionare.

Per avere questo gioiellino sui nostri siti basterà incorporare jQuery ed il file contenente lo script di Chosen. Tutto ciò che vi serve, compreso anche un esempio, lo trovate qui: https://github.com/harvesthq/chosen.

Diverse demo, invece, sono disponibili qui: http://harvesthq.github.com/chosen.

Il select che avrà la fortuna di ricevere il miglioramento dovrà essere del tipo:

<select data-placeholder="TESTO MOSTRATO QUANDO E' VUOTO." style="width:350px;" class="chzn-select"">

Ovviamente le dimensioni sono arbitrarie.

Per invocare il plugin basterà scrivere:

$(".chzn-select").chosen({no_results_text: "TESTO MOSTRATO QUANDO LA RICERCA NON PRODUCE RISULTATI"});

Credo che d’ora in poi utilizzerò sempre questo plugin per evitare “disastri da select”. Conoscete qualche sistema alternativo?

Come sempre vi invito ad abbonarvi al feed della sezione Hi-Tech e a ricondividere il post sui social.

Chosen, trasformare e migliorare i select
Fortunecat.it Web Marketing

Fortunatamente l’uomo ha trovato rimedio (o quasi) a questo problema inventando i CAPTCHA.

I CAPTCHA più diffusi sono costituiti da caratteri quasi illeggibili che dovrebbero in teoria non essere compresi dai bot. Questo è il funzionamento: semplice ma – a quanto pare – efficace.

E se invece di usare i soliti CAPTCHA utilizzassimo qualcosa di molto meno convenzionale e sicuramente più divertente? Sto infatti per presentarvi uno plugin jQuery che vi consentirà di riconoscere gli esseri umani dai bot grazie a dei disegni tanto elementari quanto divertenti.

Chi ha detto che i CAPTCHA devono essere per forza noiosi?

Stiamo parlando di MotionCAPTCHA. Permetterà ai vostri utenti di dimostrare la loro “umanità” semplicemente disegnando con il mouse delle forme che il plugin stesso indicherà. Qui trovate una demo realizzata dallo stesso creatore del plugin e qui la repository su Github.

Cominciamo

Per integrare nel nostro sito questo sistema sarà necessario, ovviamente, richiamare tutti i file necessari:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.motionCaptcha.0.2.min.js"></script>
<link href="jquery.motionCaptcha.0.2.css"></script>

Chiaramente bisognerà cambiare la directory in base alle proprie esigenze. Il file jquery.min.js è stato preso dai server di Google. I file richiesti nella seconda e terza riga li trovate andando nella repository su Github.

Il Form

Per creare il form ci serviremo del solito codice html:

<form action="#" id="MioForm" method="post">

A questo punto riempiamolo con tutti gli input che servono a noi (magari un email ed il commento per un post). Per aggiungere il CAPTCHA “speciale” bisogna inserire le seguenti righe di html:

<div id="mc">
    <p>Dimostra che sei umano, disegna la forma che vedi qui sotto:</p>
    <canvas id="mc-canvas"></canvas>
</div>

Ora aggiungiamo il pulsante disabilitato (che si attiverà al superamento della prova) e poi un input nascosto che contenga l’action del nostro form:

<input type="submit" disabled="disabled" value="Submit Form" />
<input type="hidden" id="fairly-unique-id" value="submitform.php" />

Il jQuery

Non ci rimane altro da fare che collegare il tutto e vedere il risultato. Per permettere al form di essere riconosciuto dal plugin usate le seguenti righe di codice javascript:

$('#MioForm').motioncaptcha({
    action: '#fairly-unique-id'
});

Questa qui sopra è la versione più semplice, con tutti i parametri lasciati di default. Ci sono però altre impostazioni con cui poter giocare, ecco un esempio alternativo:

$('#MioForm').motioncaptcha({
    // Basics:
    action: '#mc-action',        // L'ID dell'input contenente l'action
    divId: '#mc',                // L'ID del div contenente il CAPTCHA
    cssClass: '.mc-active',      // La classe CSS applicata quando #mc è attivo
    canvasId: '#mc-canvas',      // l'ID dell'elemento canvas MotionCAPTCHA

    // Un array contenente tutte le forme consentite:
    shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],

    // I messaggi mostrati:
    errorMsg: 'Prova ancora.',
    successMsg: 'Captcha superato!',

    // Messaggio mostrato se il browser non supporta il plugin:
    noCanvasMsg: "il tuo browser non supporta le canvas - prova Chrome, FF4, Safari o IE9."
});

Credo sia tutto, conoscete  altri metodi per provare che il vostro utente è costituito da materia organica?

Come sempre vi invito ad abbonarvi al feed della sezione Hi-Tech. Alla prossima!

MotionCAPTCHA, l’antispam geometrico
Fortunecat.it Web Marketing

Questo è un esempio elementare, ma si possono trovare situazioni molto più complesse come ad esempio quelle riscontrabili durante la realizzazione di un’agenda.

Salvare in un database una data in formato “umano” non è una buona mossa.

Diventerà difficile ordinare le tabelle utilizzando una colonna costituita da date (es.: ’22/07/1990′). Come possiamo cavarcela in maniera elegante ed efficiente? Semplice: utilizzando il tempo Unix (i secondi trascorsi dal 1° gennaio 1970).

Vedremo di creare 2 funzioni capaci di trasformare una data in tempo Unix e di riconvertire quest’ultimo in tempo umano.

La funzione DaiTempoUnix

Creiamo innanzitutto la funzione che a partire da data ed ora ci restituisce il tanto adorato tempo Unix.

Si tratterà di una funzione che in entrata richiede solamente due campi: data ed ora.

<?
function DaiTempoUnix($data,$ora){

$data_arr = explode("/", $data); //ricaviamo un array dalla data

$ora_arr = explode(":", $ora);  //ricaviamo un array dall'ora

$secondi = $ora_arr[2];
if(!$ora_arr[2]) $secondi =0; //serve nel caso in cui non siano stati scritti i secondi (spesso non sono considerati)

$UnixTime = mktime($ora_arr[0], $ora_arr[1], $secondi, $data_arr[1], $data_arr[0], $data_arr[2]); //mktime ci consente di ottenere il time Unix corrispondente alla data

return $UnixTime;

}

$TempoUnix = DaiTempoUnix("22/07/1990", "13:12:24"); // esempio di richiamo della funzione
?>

Nella funzione si è ipotizzato che le componenti della data siano separate da “/” e le componenti dell’ora da “:”. Per impostare altri simboli basterà applicare una piccola modifica all’explode.

Passiamo ora alla seconda funzione.

La funzione DaiData

Questa funzione è anche più semplice della prima. In ingresso avrà il tempo Unix mentre in uscita conterrà un array con due valori: data ed ora.

<?
function DaiData($UnixTime){

$data = date("d/m/Y", $UnixTime); //da time unix a data
$ora = date("H:i:s", $UnixTime);//da time unix a ora
$row_data = array('data' => $data, 'ora' => $ora); // Creo l'array
return $row_data;

}

$row_data = DaiData("1033902472"); //esempio di utilizzo della funzione

$data = $row_data[data];
$ora = $row_data[ora];

?>

Come potete vedere sono bastate pochissime righe di codice.

Utilizzando queste due funzioni sarà più semplice organizzare e gestire le date nelle nostre applicazioni. Forse l’unica nota dolente che vale la pena citare è che questo script potrebbe dare problemi dal 19 gennaio 2038 alle ore 03:14:08 (GMT).

In quel giorno, infatti, il tempo unix raggiungerà i 2³¹ caratteri (troppi per i sistemi operativi a 32bit). Questo evento è noto come Bug dell’anno 2038.

Conoscete altre soluzioni?

PS: Perdonate la scarsa fantasia dimostrata nel dare un nome alle due funzioni…

Trasformare una data in tempo Unix in PHP
Fortunecat.it Web Marketing

Pixmac è un noto servizio di microstock, dotato di un archivio di ben 11 milioni di foto da scaricare. Vuoi ricevere i 100 crediti gratuiti? Nulla di più semplice, ti basta partecipare al nostro contest.

Per iscriverti è necessario seguire questa semplicissima procedura:

1. Segui @fortunecat_it e @PixmacIT su Twitter.
2. Ritwitta questo articolo.

Il vincitore verrà estratto il  22 Novembre, quindi stay tuned.

Fortunecat e Pixmac: 100 immagini free in regalo!
Fortunecat.it Web Marketing

Ci sono immagini ad alta risoluzione come le foto (e in quei casi più che comprimere non si può fare niente) ed immagini che appartengono alla categoria delle componenti grafiche del sito come ad esempio: pulsanti, icone, ecc…

In questo post vedremo come creare degli elementi diagonali in puro codice CSS, senza l’uso di alcuna immagine. Il risultato finale sarà il seguente:

Per crearlo useremo un “accrocco” con i bordi. Se ci riflettete tra un bordo inferiore ed un bordo laterale si crea una linea di separazione che guarda caso è diagonale! Ecco un esempio di due bordi colorati in modo diverso per rendere visibile quanto appena descritto.

Probabilmente avrete già intuito che basterà rendere invisibile il bordo rosso ed il gioco è fatto. Vediamo ora passo passo cosa bisogna fare per ottenere questo effetto.

HTML

Come prima cosa scriviamo l’HTML necessario a tenere in piedi la struttura:

<html>
 <head>
 <meta charset="utf-8">
 </head>
 <body>
 <a href="#">Titolo Paletta</a>
 <div>
 <p>
 Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
 </p>
 </div>
 </body>
</html>

Come potete vedere nulla di complicato. C’è un div che contiene il testo ed un link che rappresenta il nostro elemento diagonale.

CSS

Nel foglio di stile inseriremo le regole relative al div ed al link.

a {
 padding: 10px;
 text-decoration: none;
 color: white;
 font-weight: bold;
 text-shadow: 0 1px 0 #005E91;
 border-right: 25px solid transparent;
 border-bottom: 25px solid #47BDFC;
 margin-bottom: -4px;
 height: 0;
 }
div {
 border: 1px solid #47BDFC;
 border-top: 2px solid #47BDFC;
 padding: 20px;
 width:400px;
 }

E’ stata creata la paletta ed un sottile bordo che contiene il testo d’esempio. Il risultato però è ancora troppo lontano dalle nostre aspettative:

Mancano un paio di regole che costringano il titolo (elemento “a” nel css) a rimanere all’interno del suo spazio:

line-height:50px;
display: inline-block;

A questo punto il risultato sarà ottimale come visto ad inizio post. Qui potrete trovare una versione interattiva di quanto appena presentato: http://jsfiddle.net/middleman90/gBrGE/1/

Conoscete un metodo alternativo?

Ricordatevi di condividere il post e di abbonarvi al feed della sezione Hi-Tech per scoprire nuovi trucchi per migliorare i vostri siti web.

Come creare linee diagonali con il CSS
Fortunecat.it Web Marketing

Magari non lo utilizzano per la grafica dell’intero sito ma – almeno per il momento – solo per le parti più piccole, in modo da non creare un sito completamente illeggibile su Internet Explorer e simili.

In questo post vedremo come creare un pulsante in 3D utilizzando le regole CSS3.

La base: definiamo un div

Per creare il nostro pulsante 3D partiremo da un semplice div contenente un link.

<div class="button"><a href="#">FortuneCat</a></div>

Cominciamo a scrivere le prime regole che renderanno visibile il pulsante.

.button a {
 padding: 4px 15px 7px 15px;
 width: auto;
 height: auto;
 background: #0099FF;
 color: #fff;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 font-weight: bold;
 font-style: normal;
 text-decoration: none;
 cursor: pointer;
 }

Per il momento il risultato è questo (decisamente inguardabile):

Il Rilievo

Ora proviamo a dare un po’ di forme e a donare la terza dimensione a questo povero div inanimato. Per farlo bisogna inserire altre regole al link nel div. Prima di tutto leviamo quei fastidiosi spigoli e sostituiamoli con una bella rotondità a 2 pixel.

 border-radius: 2px;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 -o-border-radius: 2px;
 -ms-border-radius: 2px;
 border: 1px solid rgba(0,0,0,0.50);
 border-top: 1px solid rgba(0,0,0,0.001);

La parte più delicata è la creazione delle ombre. Qui si gioca la riuscita dell’effetto rilievo: usare l’ombra inferiore per dare l’impressione che il pulsante esca fuori dal monitor (poi ci sono anche altre ombre “ambientali” per completare l’effetto volume).

 box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
 -o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
 -ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
 cursor: pointer;
 }

Infine aggiungiamo anche il rilievo al testo come ciliegina sulla torta.

 text-shadow: 0 -1px 1px rgba(0,0,0,0.50);

A questo punto già si può vedere un bel risultato.

Il Passaggio del Mouse ed il Click

Ora che il pulsante è pronto bisogna aggiungere gli effetti al passaggio del mouse ed al click. Ovviamente il tasto potrebbe già funzionare così, ma questi effetti renderanno l’elemento più usabile e divertente.

Vediamo prima l’effetto al passaggio del mouse.

.button a:hover {
 box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
 -o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
 -ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0pxrgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
 -webkit-animation: glow 1s infinite ease-in-out;
 cursor: pointer;
 }

Qui invece l’effetto al click.

.button a:active {
 padding: 6px 15px 5px 15px;
 border-top: 1px solid rgba(0,0,0,0.55);
 box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4pxrgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4pxrgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
 -o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4pxrgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
 -ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4pxrgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);
 -webkit-animation: none;
 cursor: pointer !important;
 position:relative;
 top:2px;
 }

Il risultato finale è visibile ed editabile a questo indirizzo: link.

Conoscete qualche altro metodo per creare un pulsante 3D?

Nei prossimi post continueremo ad esplorare le possibilità offerte dal CSS, quindi vi consiglio di abbonarvi al feed della sezione Hi-Tech.

Come creare pulsanti in 3D utilizzando il CSS3
Fortunecat.it Web Marketing

L’applicazione, se è fatta come si deve, permetterà all’utente di eseguire questa funzione restando nella stessa pagina, senza che mai questa venga ricaricata. Il modo migliore per creare un’applicazione simile è utilizzare jQuery. Grazie a questa libreria possiamo creare un form dinamico senza limiti.

Quando l’utente vuole inserire un nuovo numero gli basterà cliccare un tasto ed ecco fatto, il campo input è servito. Ma prevediamo anche un’altra possibilità: l’utente deve poter eliminare un campo appena creato. Sembra semplice, in fondo basta giocare con le parentele dei div e di un tastino elimina, ma non è tutto oro quel che luccica.

Qui un esempio di cosa succede. I blocchi rossi sono quelli preesistenti, mentre i blu sono quelli appena creati. Cliccando su un blocco è possibile eliminarlo, ma con i blu non funziona.

jQuery, infatti, non riesce a imporre dei comportamenti agli elementi creati dinamicamente (proprio quelli aggiunti dall’utente). Pare che il problema nasca dal fatto che gli “oggetti” nuovi non sono presenti fin all’inizio.

Infatti, se invece di creare nuovi elementi, semplicemente li rendessimo visibili con un semplicissimo show() (devono essere sempre presenti nella pagina ed avere display:none) seguiranno tutte le regole. Questa soluzione, però, ha due importanti svantaggi:

1. Non sarà possibile creare infiniti elementi;
2. I tempi di caricamento della pagina si allungano in modo direttamente proporzionale al numero degli elementi invisibili inseriti “staticamente”.

Poi diciamocelo… è un metodo decisamente barbaro. Studiando bene la documentazione, salta fuori una funzione che fa proprio al caso nostro: live(). Il nome ci aiuta a capire a cosa serve, in pratica darà vita agli elementi morti (quelli appena creati). Vediamo come funziona:

$(“.block”).live(“mouseover”, function(){
$(“.block”).click(function(){
$(this).remove();
});
});

Dove “block” è la classe dei div aggiunti dinamicamente. All’interno, potete vedere che c’è la funzione che dovrà eliminare il blocco al click. Il primo parametro della funzione live() ci permette di scegliere in che modo far resuscitare l’elemento. Nell’esempio è “mouseover”, ma possiamo anche scegliere “click” e “mouseout”. Il risultato è che l’utente non si accorgerà di niente, per lui tutto sarà normale, quasi non apprezzerà i nostri sforzi. Qui il risultato finale.

A me sembra la soluzione migliore. Ne avete altre?

Come sempre vi invito a condividere il post e ad abbonarvi al feed della sezione Hi-Tech.

jQuery e gli elementi creati dinamicanente
Fortunecat.it Web Marketing