Una delle caratteristiche dei moderni siti web è senz’altro la possibilità di poter trascinare gli elementi di una pagina e distribuirli in essa come meglio preferisce.

Un sistema del genere prende il nome di Drag and Drop, ovvero trascina e rilascia. Realizzare un effetto simile può sembrare complicato, ma solo fino ad un certo punto. Per chi non avesse idea di cosa io stia parlando può vedere e provare la pagina di esempio che ho preparato qui: Drag and Drop.

Continua a leggere »

Come già detto in un post precedente, ecco qui qualche trucchetto per realizzare un effetto fade (o sfumatura) su gli elementi di una pagina web mediante il linguaggio javascript. Per apprendere bene il procedimento che mostrerò è consigliato avere almeno una conoscenza base di CSS, Javascript e Html.

Per avere una idea più chiara di cosa si stia facendo visita la pagina di esempio.

Per realizzare l’effetto dobbiamo vedere la sfumatura del nostro elemento (ad esempio un <div>) come un variare di opacità dello stesso. Fortunatamente abbiamo una proprietà dei CSS che ci permette di impostare l’opacità di un elemento a nostro piacere.

Detto questo dobbiamo effettuare alcune considerazioni:

1. Compatibilità Crossbrowser: Purtroppo non tutti i browser supportano alla stessa manierà le proprietà dei CSS, quindi dovremmo fare una distinzione. Nel mio esmpio prendo in considerazione firefox ed internet explorer.
2. Durata Effetto: Potremmo scegliere quanto tempo deve durare la transazione ed esprimeremo questo valore in milli secondi.

Ci serve una funzione che imposti l’opacità dell’elemento ad un valore da noi scelto. Alla nostra funzione dovremmo passare l’id dell’elemento da sfumare ed il valore di opacità da impostare. Il valore dell’opacità deve essere compreso fra 0 e 100.

Nella prima linea la funzione “prende” un riferimento all’elemento da sfumare. Successivamente si esegue un test che serve a riconoscere il browser perchè l’opacità con internet explorer si imposta in un modo diverso (vedi codice).

Continua a leggere »

Fra gli sviluppatori web si sente sempre parlare dei nuovi framework javascript: jQuery, mootools, scrip.aculo.us ed altri ancora aiutano il programmatore fornendogli un’ampia varietà di funzioni pronte per l’uso (drag and drop, fade in testo, effetti sulle immagini etc…) compatibili con i browser più popolari in commercio.

Usando i framework mi rendo conto che quello che normalmente scrivo in 50 righe di codice javascript lo scrivo in circa 20. Questo è reso possibile non solo dalla varietà di funzioni già pronte, ma anche da un sub-linguaggio javascript creato appositamente. Quindi bastano conoscenze minime del linguaggio e qualche tutorial per permettere di implementare effetti grafici ed ajax su un sito web.

Un bravo programmatore con l’utilizzo di un framework javascript può creare cose veramente sorprendenti. Oggigiorno molti siti e CMS fanno utilizzo di questi framework (anche wordpress).

Io per adesso sono concentrato su mootools, semplice ed essenziale offre una buona documentazione e qualche dimostrazione della sua potenza, se siete interessati fateci un pensierino. Di sotto riporto un esempio di richiesta asicrona al server (ajax) eseguita con mootools.

Ok.. questo codice non vi dice nulla e sopratutto non ha alcuna utilità, ma posso assicurarvi che per scrivere un codice javascript da 0 che esegua questa semplice funzione ci avrei perso più tempo e sicuramente avrei usato molte più linee di codice.

Conclusione? Per chi è già avvezzo alla programmazione l’uso di un buon framework fornisce tutti gli strumenti necessari alla realizzazione di un sito in puro stile Web 2.0. Se invece sei un programmatore alle prime armi io consiglio di studiare quello che sta dietro ad un framework, effetti grafici, eventi, funzioni etc…

Avere queste conoscenze aiuta molto anche nella stesura del codice e nella fase di debug. So che su internet è difficile trovare qualcosa che parli di effetti ajax in maniera chiara e semplice, più avanti dedicherò qualche post su questi argomenti accompagnandoli con qualche esempio di codice commentato.

Per chi è alle prima armi con ajax e vuole imparare di più sul web 2.0 può rivolgersi a sack (acronimo di simple ajax code kit) . Sack è una libreria javascript pronta all’uso che ci permette di gestire ed integrare la tecnologia ajax nelle nostre pagine web.

Ovviamente ci vuole un minimo di preparazione teorica su ajax prima di poter iniziare ad apprezzare i vantaggi di questa libreria che fa risparmiare tempo al programmatore garantendogli una buona efficenza.

Fra le altre cose questa è la libreria usata dalla piattaforma blog wordpress per poter integrare ajax nei propri plugin. Studiandola mi sono accorto che in realtà è composta da poche righe di codice, nulla di complesso, ma ottime per rendere più semplice l’integrazione di questa tecnologia che ormai sta spopolando su molti siti web.

Realizzare un conto alla rovescia con javascript ho scoperto che è una cosa semplicissima. Come si vede nella colonna di sinistra ho già realizzato il mio che conta il numero di giorni, ore, minuti e secondi mancanti all’uscita del nuovo lavoro della Rowling. Su internet ho trovato una funzione che esegue il contdown con javascript, e mi son messo a modificarla rendendola più semplice e compatibile con il browser firefox (penso sia compatibile anche con altri, io ho provato solo Internet Explorer 7 e Mozilla Firefox). Ecco il risultato:

Per vedere il countdown nella vostra pagina dovete inserire il seguente codice nel tag body

Ed inserire quest’altro codice nel punti in cui volete visualizzare il conto alla rovescia.