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:

1) 10 Siti per Imparare Gimp

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

4) 750 Pixel CSS Layouts

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

EmaWebDesign :: Web Programming / Web Design / SEO utilizza WordPress con tema EWD 2.0 :: Articoli (RSS) e Commenti (RSS)



Questo blog (e tutti i suoi contenuti) è pubblicato sotto una Licenza Creative Commons. Leggi il disclaimer per tutte le info.

L'autore del blog è Emanuele Calì, web developer, web designer e SEO specialist. Per maggiori info sull'autore potete visualizzare la pagina about. Per informazioni su servizi inerenti siti web, grafica o SEO & Web Marketing potete visualizzare la pagina servizi.