Giulio Ganci

Drag and Drop con Javascript

Giulio — Mon, 21 Jul 2008 12:28:43 +0000

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.

Potete anche scaricare l’esempio visto precedentemente:

download: Drag and Drop with javascript (1.32KB)
added: 21/07/2008
clicks: 8
description: Semplice script per realizzare il drag and drop con javascript. Non è adatto per usi professionali, ottimo per lo studio.

Per realizzare un questo sistema usiamo la potenza del linguaggio javascript, un linguaggio di programmazione (client-side) che risiede nativamente sul nostro web browser. Ecco il codice che ho scritto per questo esempio:

var Drag = {

elm: null,

get: function(id) {
return document.getElementById(id);
},

init: function(id) {
Drag.elm = Drag.get(id);
Drag.elm.style.position = ‘relative’;
Drag.elm.style.cursor = ‘move’;
Drag.elm.style.left = ‘0px’;
Drag.elm.style.top = ‘0px’;
Drag.elm.onmousedown = Drag.start;
},

start: function(e) {
e = e || window.event;
Drag.elm.lastX = e.clientX;
Drag.elm.lastY = e.clientY;
document.onmousemove = Drag.move;
Drag.elm.onmouseup = Drag.end;
Drag.setOpacity(‘0.5′);
return false;
},

move: function(e) {
e = e || window.event;
var ex = e.clientX;
var ey = e.clientY;
var currentX = parseInt(Drag.elm.style.left);
var currentY = parseInt(Drag.elm.style.top);
Drag.elm.style.left = currentX + (ex - Drag.elm.lastX) + ‘px’;
Drag.elm.style.top = currentY + (ey - Drag.elm.lastY) + ‘px’;
Drag.elm.lastX = ex;
Drag.elm.lastY = ey;
return false;
},

end: function() {
Drag.setOpacity(‘1′);
document.onmousemove = null;
Drag.elm.onmouseup = null;
},

setOpacity: function(value) {
Drag.elm.style.opacity = value;
Drag.elm.style.filter = ‘alpha(opacity=’ + value * 100 + ‘)’;
}

}

Lo script non è molto grande, ed io non ho la pretesa di spiegarlo perchè mi perderei in paroloni e rischierei di confondere ancora di più le idee.

Mi rendo conto che su internet si trovano altri script incomprensibili (ma molto efficenti), io ho voluto soltanto mostrare un punto di partenza semplice. E’ chiaro che per chi ha la passione, da questo semplice script può portare avanti qualcosa di più serio ed efficente.

Google Custom Search

Giulio — Tue, 15 Jul 2008 14:33:43 +0000

Ho da poco scoperto questo interessante servizio che Google mette a disposizione degli utenti e permette di inserire un motore di ricerca google powered sul proprio sito.

A vederla così non c’è proprio nulla di nuovo, già da tempo Google da la possibilità di inserire il suo modulo di ricerca nei siti, la novità con Google Custom Search è quella di poter personalizzare i risultati della ricerca.

Per fare un esmpio io sono andato su Google Custom Search ed ho creato un motore di ricerca personalizzato e l’ho sostituito a quello di wordpress presente su questo sito. Durante la creazione del modulo viene chiesto in quali siti effettuare la ricerca, io ovviamente ho specificato il mio, ma è chiaro che è possibile specificare più siti.

Altra cosa importante è l’integrazione delle API Google AJAX (che paroloni) che danno la possibilità di modificare il modo e l’aspetto con cuoi vengono visualizzati i risultati della ricerca. Qui ci sono parecchi esempi per chi ne vuole saperne di più.

Se siete curiosi usate il motore di ricerca personalizzato sul mio blog

Anteprima macTheme

Giulio — Sat, 12 Jul 2008 12:27:16 +0000

E’ ormai estate, e nell’attesa di ritornare in sicilia ho dedicato alcune ore delle mie giornate a creare un tema per wordpress.

Son partito dall’idea di creare un tema simile al sistema operativo di casa apple integrando magari qualche effetto ajax. Ancora è molto grezzo e mancano numerose parti, per vedere un ateprima cliccate qui.

E’ possibile cliccare sulla mela in alto a sinistra che apre un menù a tendina come in macosx, dove è possibile selezionare alcune opzioni in base ai permessi utente di chi naviga sul blog.

Appena sistemati tutti i difetti nella grafica inizierò a lavorare sul modulo di ricerca in alto a destra, integrando il sistema “live search”, ovvero i risultati della ricerca vengono mostrati mentre si digita la parola che si sta cercando.

Per adesso è tutto, speriamo venga un bel tema.

Firma dinamica per wordpress

Giulio — Fri, 27 Jun 2008 15:12:48 +0000

Che cos’è una firma dinamica (dynamic sign)? Nei forum, nelle mail è abitudine lasciare una traccia di se nei propri messaggi con un immagine o una citazione. Una firma dinamica è una particolare immagine che cambia il suo contenuto secondo certe regole stabilite da noi.

Questa è la mia firma dinamica. Perchè dinamica? Questa immagine tiene traccia degli ultimi 5 post scritti su questo blog e li mostra. Per questo viene detta dinamica, prima di generarsi estrare i titoli degli ultimi post.

Come posso crearla?

Per creare la firma dinamica come la mia è necessario disporre di soli 2 file. Il primo è l’immagine che volete usare come sfondo ed il secondo è uno script php. Il file php (sign.php) che ho creato eccolo mostrato di seguito:

/****************
CONFIGURAZIONE
****************/

### Percorso alla tua immagine
$your_image = ’sign.jpg’;

### Spaziatura tra una riga e l’altra in pixel
$height = 60;

### Quanti titoli devo estrarre da wordpress?
$limit = 5;

/********************
CREAZIONE IMMAGINE
********************/

### Manda al browser l’header per visualizzare l’immagine
header(‘Content-Type: image/jpeg’);

### Include le funzioni di wordpress
require_once(‘./wp-config.php’);

### Crea una nuova immagine da una già esistente (la vostra)
$image_src = imagecreatefromjpeg($your_image);

### Colore bianco per il testo
$white = ImageColorAllocate($image_src, 255, 255, 255);

### Stringa stampata sull’immagine
imagestring($image_src, 3, 5, 40, "Ultimi Post dal Blog", $white);

### Query: Estrae gli ultimi titoli dei post da wordpress
$posts = $wpdb->get_results("SELECT post_title FROM ".$table_prefix."posts WHERE post_type = ‘post’ AND post_status = ‘publish’ ORDER BY id desc limit $limit ");

### Per ogni post estratto stampa il titolo
foreach($posts as $post) {
imagestring($image_src, 2, 20, $height, ‘> ‘.remove_accents($post->post_title), $white);
$height = $height + 12;
}

### Invio l’immagine al browser
imagejpeg($image_src, null, 100);

### Svuoto la memoria
imagedestroy($image_src);

Un esempio funzionante della firma dinamica lo potete scaricare qui

download: Firma dinamica per Wordpress (12.02KB)
added: 27/06/2008
clicks: 10
description: Un semplice script php che permette di creare un immagine dinamica che visualizza gli ultimi post del vostro blog wordpress

Estrate i file e caricateli nella directory (root) della vostra installazione wordpress. Consiglio di cambiare l’immagine sign.jpg visto che in quella che vi ho dato c’è scritto l’indirizzo di questo blog.

Raggiungete la vostra immagine all’indirizzo www.mioblog.com/sign.php

Ho fatto la mia parte

Giulio — Wed, 18 Jun 2008 16:00:58 +0000

Manca ormai un’ora abbondante alla fine del download day per firefox 3, ed in questo istantante nel quale sto scrivendo il post siamo a quota 7,264,996 download in sole 24 ore.

Complimenti veramente dovuti all’intero staff che sviluppa questo browser web al quale tutti ormai siamo affezzionati per le sue funzioni, la sua stabilità e sopratutto la libertà di usarlo senza dover pagare fastidiose licenze.

I miei complimenti vanno anche agli utenti che anno aderito a questo simpatico evento.

Firefox ha voluto premiarci rilasciando un piccolo certificato che attesta la tua solidarietà, se vuoi ottenere il tuo clicca qui.

Buona navigazione a tutti con firefox 3

Il Download day è arrivato

Giulio — Tue, 17 Jun 2008 12:39:33 +0000

Oggi 17 giugno 2008 è finalmente arrivato il tanto atteso download day per il nuovo browser web della famiglia mozilla, il quale promette maggior velocità, stabilità e nuove funzioni per quel che riguarda la navigazione su internet .

Firefox 3 verrà rilasciato pubblicamente oggi a partire dalle 19:00 (ora italiana) e per l’evento si è organizzato il download day che ha lo scopo di far entrare il browser web nel guinness dei primati per il maggior numero di download in un solo giorno.

Per aderire alla causa basta cliccare qui e dare la tua disponibilità a scaricare firefox, ti verrà chiesta la mail per avvisarti.

Questa procedura non crea alcun vincolo all’utente, è solo un modo carino di festeggiare un avvenimento e avere una chiara idea su quanti dowonlod dovrà gestire il server.

Puoi scegliere di non aderire e scaricare ugualmente firefox, il download sarà aperto a tutti coloro che ne vorranno usufruire.

Banshee 1.0 rilasciato

Giulio — Thu, 12 Jun 2008 15:09:05 +0000

Il 5 giugno dopo tanta attesa è stato rilasciato banshee 1.0: un riproduttore di file multimediali basato su mono (molti non saranno daccordo su questo), capace di catalogare/riprodurre file audio/video ed interagire con i dispositivi iPod. Di seguito riporto qualche immagine presa dal mio computer (nel video c’è il mio cagnolino )

Per poter ottenere banshee 1.0 è necessario eseguire alcune operazioni sul terminale, apriamone uno e digitiamo i seguenti comandi:

sudo gedit /etc/apt/sources.list

In coda a questo file di testo inseriamo queste righe:

## Banshee repository deb http://ppa.launchpad.net/banshee-team/ubuntu hardy main deb-src http://ppa.launchpad.net/banshee-team/ubuntu hardy main

Salvare e chiudere il file. In questo modo abbiamo aggiunto un repository alla nostra lista, ovvero la sorgente dove ubuntu scaricherà banshee.

Nota: Se avete una vecchia versione di banshee installata dovete rimuoverla. Banshee 1.0 non è un aggiornamento della vecchia versione.

Adesso installiamo il software, sempre nel terminale digitare:

sudo apt-get update sudo apt-get install banshee-1

Non mi resta che augurarvi buon divertimento, so che queste procedure sono un po macchinose, ma non posso veramente farne a meno

Emesene cresce sempre di più

Giulio — Mon, 09 Jun 2008 14:42:04 +0000

Emesene il client di messaggistica instantanea multi-piattaforma clone di windows live messenger cresce ogni giorno di più. Da qualche mese è stata rilasciata la versione 1.0 che ha accolto i consensi di molti utenti, specialmente “linuxiani”.

Già in precedenza avevo parlato di questo progetto e giusto l’altro giorno ho scaricato tramite svn la versione instabile per vedere qualcosa di nuovo, e con mia sorpresa sulle finestre dei miei contatti è apparsa l’icona della webcam (solo per la ricezione video).

Se avete intenzione di provare la versione instabile di emesene dovete scaricarla tramite il programma subversion, in caso non lo aveste digitate sul terminale:

sudo apt-get install subversion

Una volta installato possiamo scaricare emesene svn ed installarlo. Digitare le seguenti istruzioni in un terminale:

svn co https://emesene.svn.sourceforge.net/svnroot/emesene/trunk/emesene emesene cd emesene python setup.py build sudo python setup.py install

Dopo aver eseguito queste procedure troverete la vostra icona di emesene sul desktop, doppio click ed il gioco è fatto. Se cercate bene sul forum di emese potete trovare il plugin per ricevere ed inviare i suoni di msn plus.

Un vero fan di linux dovrebbe scoraggiare l’uso di protocolli chiusi come msn ed incitare l’uso dei protocolli aperti (es: jabber) , ma ormai difronte a noi si trova un mondo di utenti che usa windows live messenger almeno 2 ore al giorno, realizzare un programma come emesene potrebbe essere un incentivo per convincere più persone a fare il grande salto verso il software libero.

Resize immagini automatizzato

Giulio — Wed, 28 May 2008 10:21:21 +0000

Senza dubbio la maggior parte di voi conosce o ha per lo meno sentito parlare di gimp, un programma opensource capace di realizzare e ritoccare immagini a livelli professionali paragonabile all’adobe photo shop.

Una mia esigenza è quella di ridimenzionare grandi quantità di foto scattate con la mia fotocamera digitale, e tramite gimp posso farlo in pochissimi click. Bisogna installare un pacchetto che contiene delle funzioni aggiuntive per gimp, quindi basta aprire il terminale e digitare:

sudo apt-get install gimp-plugin-registry

per installare questi componenti extra. Terminata l’installazione avviate gimp e cliccate sul menù a tendina Xtns, ed avviate Batch Process…

Ecco qui, una volta comparsa la finestra potete caricare tutte le immagini che volete e scegliere quale azione eseguire, io ho scelto resize ma come vedete ci sono moltre altre operazioni possibili.

Effettuando il resize l’immagine di partenza non viene alterata, ma ne viene creata una copia ridimenzionata con i parametri che avete stabilito.

Cosa è successo?

Giulio — Sat, 24 May 2008 10:52:57 +0000

Collegandosi all’indirizzo http://giulioganci.netsons.org/ si viene reindirizzati qui sul mio novo dominio acquistato presso netsons.org . Nulla è cambiato, a parte il tema realizzato da me che è ancora in una fase di beta sperimentale visto che mancano molte cose.

Ogni post del vecchio blog riporta esattamente al corrispettivo sul nuovo blog, per fare questo mi è bastato aggiungere una riga nel file .htaccess presente nella root del vecchio sito. Il file ora si presenta così:

# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
redirectMatch 301 ^(.*)$ http://giulio.ganci.eu$1
# END WordPress

Molte cose ancora non funzionano, pian piano ripristinerò tutto e rendere il sito funzionale al 100%.