Ecco 8 errori comuni nella programmazione Ajax da tenere sempre presenti
(No Ratings Yet)
Loading ...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 
DOM: getElementsByTagName alternativo con PHP
(No Ratings Yet) Loading ...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.
|
download: DOM Alternativo in PHP (720B) added: 07/07/2009 clicks: 115 description: Accedere a un elemento della pagina web utilizzando PHP invece del DOM (getElementsByTagName) |
15 tecniche per implementare autosuggest tramite Ajax
(No Ratings Yet) Loading ...Pubblicato il 2/7/2009 alle 08:26
Nel post “Implementare un sistema tipo Google Suggest con jQuery” vi illustrai come implementare, tramite un plugin per jQuery, un sistema di completamento automatico tipo Google Suggest.
Tutzone ci segnala ben 15 tecniche per implementare un sistema del genere, alcune sono davvero accattivanti dal punto di vista grafico.
Ecco il link all’articolo: 15 Best Techniques For Implementing Autosuggest With AJAX Into Your Site
DOM: verificare se una checkbox è stata selezionata
(No Ratings Yet) Loading ...Pubblicato il 25/4/2009 alle 12:16
Vediamo come si può controllare se una checkbox è stata “spuntata” tramite DOM:
Inseriamo in una pagina web un campo di tipo checkbox con id uguale a opzione:
<input type=”checkbox” id=”opzione” /><input type=”button” value=”Verifica” onclick=”check()” />
Quindi un pulsante che richiama la seguente funzione:
function check() {
var status = document.getElementById(”opzione”).checked;
alert(status);
}
Premendo il pulsante la funzione richiamata stamperà, in questo esempio tramite alert, lo stato della checkbox precedentemente memorizzato nella variabile status.
Semplicissimo
Implementare un sistema tipo Google Suggest con jQuery
(3 votes, average: 4 out of 5) Loading ...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.
Visualizzare un messaggio in un DIV per un dato numero di secondi con Ajax
(No Ratings Yet) Loading ...Pubblicato il 3/3/2009 alle 15:28
Ecco una funzione che tramite Ajax visualizza un messaggio in un div per un dato numero di secondi (specificato in millisecondi):
function temp(div,msg,time) {
var string = document.getElementById(div).innerHTML=msg;
var myHandler = function() {
document.getElementById(div).innerHTML=”";
};
setTimeout(myHandler, time);
}
Esempio di chiamata:
temp(”nome_div”,”Operazione completata con successo”,3000);
Come creare applicazioni interattive con Ajax
(No Ratings Yet) Loading ...Pubblicato il 11/2/2009 alle 16:47
Per Blographik ho scritto un guest-post dove parlo di Ajax, tecnologia oggi utilizzatissima dagli sviluppatori web. Se volete avere info in merito vi consiglio di leggere l’articolo: Come creare applicazioni interattive con Ajax
I migliori post della settimana #12
(No Ratings Yet) Loading ...Pubblicato il 8/2/2009 alle 17:48
Di seguito alcuni post interessanti di questa settimana:
1) Firefox Bug Flash wmode transparent: Ecco come risolvere
2) Frog, un Cms semplice per qualsiasi sito o Blog
Qualche settimana fa avevamo parlato di Cms Gratuiti, in cui compariva anche Frog Cms.Frog è un Cms molto semplice, open source, adattabile per qualsiasi sito, scritto in php, e con un codice molto semplice che ricorda vagamente quello di WordPress…
3) Free Textures Per i Tuoi Design – 17 Account Flickr Da Tenere A Portata Di Mano
4) Come Integrare Gli SMS Nelle Web Application Grazie Agli SMS Gateway
Le piattaforme hardware/software che offrono questo tipi di servizio si chiamano SMS gateway. Ne esistono diversi anche in italia e permettono di gestire gli SMS esattamente come parametri di un modulo HTML tramite il metodo GET…
6) Best Image Croppers ready to use for web developers
7) La navigazione di un sito web per il SEO: una utile checklist
I migliori post della settimana #9
(No Ratings Yet) Loading ...Pubblicato il 11/1/2009 alle 17:30
Ecco un pò di posts interessanti raccolti in questa settimana:
1) Web Form Design: Modern Solutions and Creative Ideas
Ecco un bel pò di risorse segnalate da Smashing Magazine su come creare design accattivanti per i web form.
2) Come trovare il perfetto nome di dominio
Vi propongo un esperimento: andate sul sito di un registrar di domini (per e sempio Arsys.es che ha una ricerca comoda), nella sezione di verifica della disponibilità di un dominio…
3) Mapeed.AddressChooser
Script JavaScript che permette di cercare un indirizzo e visualizzarne la mappa.
4) Wordpress, commenti paginati, contenuti duplicati e ottimizzazione SEO
L’ultima versione di Wordpress, la 2.7, tra le tante novità ha introdotto una vera e propria rivoluzione nella gestione dei commenti…
6) jQuery Plugin Easy Slider: Creare Slider di Contenuti
Easy Slider è un Plugin jQuery che permette di creare slider di contenuti orizzontali e verticali in modo davvero molto semplice…
7) Una tipica richiesta di scambio link
8 ) Creare gocce d’acqua in photoshop
9) Very short trick: addEventListener() AS3, un handler più eventi
In Actionscript 3.0 è necessario utilizzare addEventListener() per intercettare un qualsiasi evento…
Intervista al creatore di jQuery su javascript.html.it
(No Ratings Yet) Loading ...Pubblicato il 24/11/2008 alle 23:22
Volete qualche info e/o curiosità su jQuery e sullo sviluppo di codice JavaScript? Riccardo Degni ha intervistato John Resig (team leader di jQuery).
L’intervista è disponibile su html.it ecco il link: Intervista a John Resig
