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 »

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

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.

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.