Simple Modal: finestre di dialogo personalizzate
Pubblicato il 10/2/2010 alle 16:12

Se vogliamo utilizzare nei nostri progetti finestre di dialogo personalizzate nella grafica, animate ed assolutamente accattivanti, abbiamo davvero tante soluzioni a disposizione.
Basti pensare a ModalBox, MoodalBox, ShadowBox e via dicendo.
Vi consiglio di dare comunque un’occhiata a SimpleModal sul sito di Eric Martin. Trovate alcuni esempi di finestre personalizzate che si avvalgono di jQuery, scaricabili liberamente.
Table sorter: ordinare una tabella html con jQuery
Pubblicato il 24/7/2009 alle 16:19

Vediamo col seguente mini-tutorial come implementare un sistema per permettere l’ordinamento dei valori in una tabella HTML utilizzando un plugin per jQuery: tablesorter
Scaricate il plugin dalla pagina ufficiale: http://tablesorter.com/docs/index.html
Includete nella vostra pagina il plugin e il pacchetto jQuery:
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”tablesorter.js”></script>
Tra i tag head della pagina inserite il codice js:
<script type=”text/javascript”>
$(document).ready(function()
{
$(”table“).tablesorter();
}
);
</script>
Ecco fatto
La tabella ovviamente deve avere un ID univoco, in questo esempio l’ID è table. Potete associare alla tabella la classe “tablesorter” per rendere più accattivante la grafica della stessa ma potete anche personalizzare la grafica CSS alla mano.
Potete scaricare i files dell’esempio.
|
|
download: Tablesorter (24.93KB) added: 24/07/2009 clicks: 166 description: Table sorter è un plugin per jQuery con cui si può implementare un sistema per ordinare i valori in una tabella HTML. |
I migliori post della settimana #32
Pubblicato il 12/7/2009 alle 11:16

Come ogni settimana ecco i posts più interessanti:
01) Vacanze 2.0: I Social Network Per Pianificare Il Tuo Viaggio
02) Guida di apprendimento di Flash Video
03) I Migliori Plugin Jquery Con Effetto Lightbox
04) Cos’è la risoluzione di un’immagine
05) Una Raccolta di SEO Tools Sempre Utili
06) Come vendere pubblicità tramite le concessionarie pubblicitarie online
07) Pubblicità su Facebook: come fare
08) La longevità dei social network
09) Alcuni Grandi Fraintendimenti nella SEO
Inserire un calendario nel proprio sito grazie a jQuery
Pubblicato il 9/7/2009 alle 09:20

In questo breve tutorial vedremo come inserire il widget di un calendario nel proprio sito web utilizzando un plugin jQuery.
Per prima cosa, scarichiamo il plugin dalla pagina ufficiale: dynDateTime: calendar date and time picker
Scompattiamo l’archivio ZIP nella cartella del nostro sito e includiamo i files del plugin e di jQuery:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.dynDateTime.js”></script>
<script type=”text/javascript” src=”lang/calendar-en.js”></script>
<link rel=”stylesheet” type=”text/css” media=”all” href=”css/calendar-blue.css” />
Inseriamo nella pagina un DIV con ID univoco contenente un campo di testo e un button. Subito prima del div incolliamo il codice jQuery associandolo al div che in questo esempio ha id uguale a “timePicker“:
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(”#timePicker input“).dynDateTime({
button: “.next()” //next sibling
});
});
</script>
Abbiamo finito
Ecco il widget in azione: timePicker
Nella cartella CSS ci sono diverse skin da utilizzare per il calendario, se non ci piacciono possiamo sempre realizzarcela da soli
I migliori post della settimana #29
Pubblicato il 21/6/2009 alle 11:33

Di seguito i post più interessanti di questa settimana:
1) Miti e leggende del mondo freelance
2) PageFlip: I Migliori componenti Flash e servizi 2.0
3) Affiliazioni: 10 Programmi Top Per Guadagnare Con Internet
4) 26 Ottimi Menu di Navigazione in jQuery
5) Introducing iPhone-style Checkboxes
6) Creare un Testo che Colpisca lo Sguardo in Illustrator
I migliori post della settimana #28
Pubblicato il 14/6/2009 alle 16:15

Di seguito i posts più interessanti di questa settimana:
1) Interagire con il Database di Wordpress in php
2) Framework a confronto: jQuery, MooTools, Prototype
3) Nicchia popolare vs. nicchia specifica: pro e contro
4) Il miglior file manager in PHP
5) Posizionamento sui motori di ricerca: 10 errori da evitare!
6) Oltre 50 Loghi di Successo che utilizzano gradienti
Implementare un color picker con un plugin per jQuery
Pubblicato il 5/6/2009 alle 11:17

In un sito dinamico o un CMS, per necessità o anche solo per offrire una funzionalità in più, possiamo prevedere di lasciare all’utente la possibilità di impostare il colore di un componente del sito web, ad esempio, il colore di sfondo del menu di navigazione.
Soprattutto se il cliente in questione è un professionista che vuole personalizzare un sito/servizio/prodotto in base ad una sua esigenza anche momentanea.
Vediamo come implementare un color picker utilizzando un plugin per jQuery.
Scaricate il plugin da questa pagina.
Dopo aver scompattato l’archivio nella directory del progetto, includete i files necessari per il funzionamento del color picker:
<link rel=”stylesheet” href=”css/colorpicker.css” type=”text/css” />
<link rel=”stylesheet” media=”screen” type=”text/css” href=”css/layout.css” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/colorpicker.js”></script>
<script type=”text/javascript” src=”js/eye.js”></script>
<script type=”text/javascript” src=”js/utils.js”></script>
<script type=”text/javascript” src=”js/layout.js?ver=1.0.2″></script>
Ora inserite nella pagina web un campo di testo e il codice js ricordandovi di settare l’identificatore univoco (l’ho evidenziato con colore rosso):
Color <input type=”text” maxlength=”6″ size=”6″ id=”cp” value=”ffffff” />
<script type=”text/javascript”>
$(’#cp‘).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind(’keyup’, function(){
$(this).ColorPickerSetColor(this.value);
});
</script>
Ecco il color picker in azione, potete visionarlo qui (per attivare il color picker basta cliccare sul campo di testo).
Infine un consiglio, una funzionalità del genere non la proponete mai a un cliente inesperto o con dubbi gusti grafici o ne combinerà “di tutti i colori”
Realizzare animazioni con JavaScript, ecco come fare
Pubblicato il 21/4/2009 alle 12:15

Sono lontani i tempi in cui, per realizzare animazioni sul web, si usava il buon vecchio Flash.
Oggi la stragrande maggioranza di web developer, per inserire animazioni nelle proprie pagine web, si affida a uno dei tanti framework JavaScript, i più famosi sono jQuery, MooTools e Scriptaculous.
I meno esperti penseranno che dietro questi framework c’è qualcosa di “magico” che anima elementi di pagine HTML sulla base di complessi algoritmi sviluppati da chissà quali “geni” della programmazione. Come è possibile realizzare animazioni senza fotogrammi, movieclip e interpolazioni?
In realtà, animare un elemento di una pagina html con JavaScript, è qualcosa di semplice che si basa sull’utilizzo del DOM.
Vediamo un esempio pratico dove utilizzerò la funzione setTimeout per far muovere orizzontalmente un div da sinistra verso destra.
Tramite CSS definiamo lo stile del div che avrà ID uguale a “content“:
<style type=”text/css”>
#content {
position:absolute;
left:10px;
top:10px;
width:300px;
background:#336699;
border:1px solid #003366;
padding:5px;
color:#FFFFFF;
}
</style>
Passiamo al JS e specifichiamo tre variabili globali:
var div = null;
var msec = 30;
var id = 0;
L’oggetto associato al div, il numero di millisecondi per cui si ripeterà l’azione di spostamento e l’id associato alla funzione setTimeout. La funzione setTimeout richiama la funzione specificata come primo parametro dopo tot tempo dichiarato (in millisecondi) come secondo parametro:
setTimeout(”funzione da richiamare”, tempo in millisecondi);
Vediamo ora le funzioni necessarie per animare il div:
function init() {
div = document.getElementById(’content’); //DIV da animare
div.style.left = ‘0px’; //Punto di partenza dell’animazione
animate(); //Chiamata alla funzione che anima il div
}
function animate() {
div.style.left = parseInt(div.style.left)+1+’px’;//Sposta il div verso destra di un pixel alla volta
id = setTimeout(animate,msec);//Ripete lo spostamento per tot millisecondi
}
I commenti per ogni riga spiegano tutto, l’animazione partirà completato il caricamento della pagina:
window.onload = init;
Se vogliamo permettere l’interruzione dell’animazione possiamo inserire un pulsante che richiama una funzione clearTimeout. La funzione clearTimeout cancella un timeout precedentemente inizializzato con setTimeout:
function stopAnimate() {
clearTimeout(id);//Cancella l’animazione avviata da setTimeout
}
Se volete spostare il div dall’alto verso il basso non dovete fare altro che agire sulla proprietà top invece di left, a voi la scelta dell’animazione da eseguire.
Potete vedere il risultato qui: animazione in javascript
Sotto potete scaricare il file di questo tutorial
|
|
download: Animazioni in JavaScript (101B) added: 21/04/2009 clicks: 452 description: Realizzare animazioni con javascript senza utilizzare alcun framework |
Implementare un sistema tipo Google Suggest con jQuery
Pubblicato il 20/3/2009 alle 16:30

Un sistema di autocompletamento automatico tipo Google Suggest è sicuramente qualcosa di molto utile. Personalmente, quando digito qualcosa per una ricerca, ritengo utile digitare le prime lettere per poi scegliere la keyword o keyphrase suggerita (che poi il 99% delle volte è esattamente quella che intendevo digitare).
Per informazioni e alcune riflessioni sui pro e contro di Suggest ti invito a leggere questo post di Davide Tagliaerbe Pozzi.
Vediamo come implementare questo sistema in un nostro progetto personale utilizzando jQuery.
Per prima cosa scarichiamo il plugin “Autocomplete” da qui.
Carichiamo la cartella jquery-autocomplete nella stessa directory del file HTML dove implementeremo autocomplete.
Includiamo tra i tag <head> ed </head> i files necessari:
<script src=”jquery-autocomplete/lib/jquery.js”></script>
<link rel=”stylesheet” href=”jquery-autocomplete/jquery.autocomplete.css” type=”text/css” />
<script type=”text/javascript” src=”jquery-autocomplete/lib/jquery.bgiframe.min.js”></script>
<script type=”text/javascript” src=”jquery-autocomplete/jquery.autocomplete.js”></script>
Includiamo anche il codice:
<script>
$(document).ready(function(){
var data = “web,web 2.0,web design,web developing,grafica,grafica pubblicitaria,grafica vettoriale,grafica 3d”.split(”,”);
$(”#example”).autocomplete(data);
});
</script>
Analizziamo il codice. Nella variabile data ho memorizzato le kywords che verranno poi “suggerite” da autocomplete. Ho scelto come separatore la virgola ed ho associato lo script al campo di testo con ID uguale a “example“. Tutto qui
Potete personalizzare la grafica modificando il file CSS jquery.autocomplete.css e scegliere le keywords che ritenete più opportune. Possiamo rendere il tutto più complesso (e più utile) realizzando uno script che memorizzi le kywords digitate in un database. Questo per far sì che le stesse vengano caricate nella variabile data (magari con una chiamata Ajax) al caricamento della pagina web.
Mi vengono in mente subito due contro da valutare con attenzione:
1) Per non appesantire la pagina in fase di caricamento bisognerà prevedere di richiamare un numero finito di keywords, magari ordinate per rilevanza.
2) Ci vorrà un sistema di moderazione in quanto qualche simpaticone che digiterà cavolate arriverà prima o poi
.
Qui potete visionare lo script.
I migliori post della settimana #13
Pubblicato il 15/2/2009 alle 16:54

Di seguito i posts più interessanti di questa settimana:
2) h1 h2 h3: come utilizzare gli heading nelle pagine web
Chi si occupa di Internet e/o ha un Blog difficilmente non avrà mai sentito parlare di questi heading. In effetti sono degli elementi html, dei tag, in cui racchiudere per ordine di importanza: h1 per i testi più importanti, fino ad h6 i testi con poca importanza…
3) File uploaders collection for web developers
5) Alternativa a SWFObject per attivare contenuto Flash
Chi lavora con tecnologia Adobe Flash conoscerà sicuramente il problema verificatosi a causa dell’aggiornamento di Internet Explorer riguardante l’attivazione dei filmati swf in Internet Explorer 6…
6) L’importanza del codice semantico
7) Soluzioni: creare un semplice sito multilingua in PHP
8 ) jQuery Tutorial – imparare ad usare jQuery da zero
























