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.

EWD Flash Embed una comoda classe JS per embeddare filmati Flash

Pubblicato il 3/12/2009 alle 16:27

Oggi ho deciso di condividere una risorsa che potrebbe risultare molto utile soprattutto per chi lavora con Flash e i file SWF. Si tratta di una classe JavaScript, che ho realizzato con il paradigma OOP (programmazione orientata agli oggetti), di soli 4KB con cui potrai embeddare filmati Flash nelle tue pagine web in modo davvero semplice e veloce.

Il nome di questa classe è EWD Flash Embed ed è una valida alternativa ad altre risorse già note come SWFObject.

La classe JS è semplicissima da utilizzare (basta leggere la documentazione per tutti i dettagli) è cross-browser, W3C compliant e soprattutto è gratuita: la licenza con cui la rilascio è la Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia.

Ecco un esempio di utilizzo:

var fl = new flash();
fl.width(200);//Larghezza filmato
fl.height(200);//Altezza filmato
fl.src(”filmato_flash.swf”);//Nome del file
fl.align(”middle”);//Allineamento
fl.play(true);
fl.scale(”showall”);
fl.noplugin(”Per visualizzare correttamente questa pagina hai bisogno del Flash Player!”,true);
fl.embed(”mio_div”);//ID dell’elemento dove embeddare il filmato

Per scaricare la classe e per tutte le info e i dettagli potete visualizzare la pagina ufficiale: EWD Flash Embed

Ecco un semplice menu accordion con MooTools

Pubblicato il 30/10/2009 alle 13:37

Oggi vi metto a disposizione un semplice menu accordion che ho realizzato utilizzando MooTools.

Oserei definire il menu estremamente “basilare”, sarà un gioco da ragazzi renderlo graficamente accattivante o anche cambiarne struttura semplicemente modificando il file CSS.

Per utilizzare il menu includete nella vostra pagina web i seguenti files:

<script type=”text/javascript” src=”mootools.js”></script>
<script type=”text/javascript” src=”accordion.js”></script>
<link rel=”stylesheet” href=”style.css” type=”text/css” />

Inserite i DIV:

<div id=”container_accordion”> il contenitore
<div id=”accordion”> il menu

e quindi le varie voci con i rispettivi contenuti (non dimenticate gli identificatori toggler ed element):

<h3 class=”toggler“>Voce 1</h3>
<div class=”element“>
<a href=”#”>Link 01</a><br />
<a href=”#”>Link 02</a><br />
<a href=”#”>Link 03</a>
</div>

Potete vedere il menu in azione qui.

Di seguito potete scaricare il pacchetto ZIP contenente tutti i files

download: Menu Accordion (28.43KB) added: 30/10/2009 clicks: 110 description: un semplice menu accordion realizzato con MooTools

I migliori post della settimana #43

Pubblicato il 25/10/2009 alle 11:55

Di seguito i migliori posts di questa settimana:

1) Come costruire URL SEO-friendly

2) Vale la pena inserire un link a pagamento sul tuo blog?

3) Creare una piccola libreria standalone – La teoria

4) Youtube e SEO: ecco alcune regole per i tuoi video

5) Googlebot legge 97KB: test e suggerimenti

6) Codice wordpress: mostrare gli ultimi articoli di una determinata categoria o tag

7) Come gli italiani usano i motori di ricerca

Ecco 8 errori comuni nella programmazione Ajax da tenere sempre presenti

Pubblicato il 19/10/2009 alle 16:11

Nello sviluppo di applicazioni Ajax spesso si commettono errori molto comuni che, invece, si possono evitare tenendoli a mente in fase di progettazione. Ecco una lista di otto errori comuni da tenere sempre a mente:

01) Pagina aggiunta ai bookmarks/segnalibri, che fare?

In una pagina Ajax possono esserci molte quantità di contenuti dinamici restituiti in base alla richiesta dell’utente. Cosa succede se si vuole salvare in un segnalibro un particolare contenuto piuttosto che un altro? Il salvataggio della URL non servirebbe a nulla. Questo è un grosso problema, può essere parzialmente risolto in fase di progettazione prevedendo link permanenti ai vari stati della pagina.

02) Non informare l’utente sullo stato delle richieste

In una pagina Ajax, per ogni interazione o richiesta dell’utente, bisogna informare lo stesso su quello che sta accadendo dopo la sua richiesta visto che la pagina non cambia e rimane sempre la stessa. Per evitare che l’utente pensi che non stia accadendo nulla bisogna presentargli output temporanei come un messaggio testuale o una gif animata che simula un loader.

03) Non prevedere contenuto alternativo ad Ajax/Javascript

In una pagina che utilizza javascript o Ajax bisogna verificare che tali tecnologie siano supportate dal browser usato dall’utente. Se non supportate, gli utenti, devono essere reindirizzati su un’alternativa non Javascript/Ajax o almeno informarlo che deve attivare javascript o utilizzare un browser che supporta tali tecnologie.

04) Dimenticarsi degli Spider

Prima di realizzare un’applicazione Ajax bisogna ricordare che gli spider dei motori di ricerca potrebbero non avere accesso ai contenuti dinamici e, quindi, ovviare prevedendo una sitemap o una pagina statica che contenga i contenuti altrimenti non indicizzabili.

05) Dimenticarsi della cache

Fare diverse richieste GET alla stessa URL spesso può portare a una risposta proveniente dalla cache del browser invece che dal server. Questo problema può essere risolto aggiungendo un numero casuale alla URL a cui si invia la richiesta.

06) Trascurare una cosa importantissima come la sicurezza

Le applicazioni Ajax contengono una grossa quantità di codice lato client. Questa parte di codice può essere visualizzata senza difficoltà da chiunque è quindi importante che non contenga informazioni con dati sensibili o importanti. Le questioni delicate vanno gestite lato server.

07) Non effettuare test

Come per i CSS anche per Javascript, i diversi browser, possono avere interpretazioni diverse. Soprattutto il DOM viene gestito in modo diverso non solo tra i diversi browser ma anche tra le diverse versioni di uno stesso browser. E’ importante testare le proprie applicazioni su più piattaforme e più browser possibili.

08) Non dotare la propria applicazione Ajax di un’interfaccia user-friendly

Forse quest’aspetto è da ricordare più al designer che al programmatore ma, in alcuni casi (come il mio), le due figure coincidono. Ogni applicazione Ajax deve avere un’interfaccia semplice e intuitiva. Gli utenti devono immediatamente comprendere quali sono gli elementi della pagina su cui fare click o con i quali interagire per effettuare una richiesta.

Tu ricordi altri errori comuni che si possono commettere nella programmazione Ajax? Segnalali con un commento

Sostituire una stringa con un’altra in JavaScript

Pubblicato il 18/9/2009 alle 14:18

Con JavaScript possiamo sostituire una stringa con un’altra utilizzando la funzione replace nel seguente modo:

var str=”ciao a tutti”;
var result = str.replace(”ciao”,”arrivederci”);
alert(result);

Un metodo alternativo prevede l’utilizzo delle funzioni split e join:

var str=”ciao a tutti”;
var result = str.split(”ciao”).join(”arrivederci”);
alert(result);

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

DOM: getElementsByTagName alternativo con PHP

Pubblicato il 7/7/2009 alle 12:21

Oggi aguzziamo l’ingegno (che per un programmatore è cosa buona e giusta) e vediamo come accedere a un elemento di una pagina web utilizzando PHP invece del DOM (getElementsByTagName).

Realizziamo un file HTML contenente un numero definito di DIV che non hanno un id univoco ma una stessa classe CSS:

<div class=”list”>Elemento 1</div>
<div class=”list”>Elemento 2</div>
<div class=”list”>Elemento 3</div>
<div class=”list”>Elemento N</div>

Per ogni DIV ci sarà un button che richiamerà una funzione javascript passando il numero del div, stampato dinamicamente grazie a PHP con un ciclo FOR:

<input type=”button” value=”Seleziona” onclick=”javascript:seleziona(<?php echo($i); ?>)” />

La funzione JS stampa con un alert (o il DOM se preferite ) l’elemento selezionato.

Ecco lo script in azione

download: DOM Alternativo in PHP (720B) added: 07/07/2009 clicks: 114 description: Accedere a un elemento della pagina web utilizzando PHP invece del DOM (getElementsByTagName)

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

I migliori post della settimana #27

Pubblicato il 7/6/2009 alle 11:37

Come ogni domenica vi segnalo alcuni post interessanti di questa settimana:

1) Monitorare Link In Ingresso: Perché Può Aiutarti A Migliorare Il Traffico Del Tuo Sito Web

2) I 13 consigli di Stephen King per bloggare

3) Un menu duttile, con un po’ di javascript e css

4) Un tema Wordpress per tutti

5) I link in JavaScript ora passano PageRank!

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.