css, javascript, ajax, design, web2.0

Javascript per "Low Performance"

noreply@blogger.com (Ska) — Fri, 12 Jun 2009 13:37:00 +0000

In quest' articolo vedremo alcune ottimizzazioni che è possibile apportare al codice javascript allo scopo di migliorare le prestazioni in termini di esecuzione, specie in contesti "low-performance".
Il tool più utilizzato per testare le performance del codice Javascript è indubbiamente Firebug.

Iterazioni

Un primo problema di performance è creato dai cicli for; questo genere di iterazioni posso essere migliorate in termini di speed up, sostituendoli dove possible (purtroppo questo non è sempre possibile) con un ciclo do ... while con decremento. Cioè



for(i=0:i < data.length;i++){
// iteration code ...
}

diventa


j=data.length;
do{
// iteration code ...
}while(--j);

Chiamate a funzioni

La maggiore quantità di overhead è generato dalle chiamate a funzioni.
Se ad esempio una funzione è richiamata all' interno di un ciclo iterativo, questo può creare un maggior tempo di processamento.
In questo caso il problema si può risolvere evitando la chiamata a funzione e spostando fisicamente il corpo della funzione all' interno del ciclo iterativo.
Ovviamente questa modifica se da un lato migliora le performance rispetto al' esecuzione del codice, dall' altro peggiore la leggibilità del codice, introducendo spesso ridondanze nel codice.


for(i=0:i < data.length;i++){
    doSomething();
}

doSomethink(){
// body code ...
}

diventa


for(i=0;i < data.length;i++){
// body code ...
}

Divisioni e parte intera

In javascript per ottenere la parte intera di una divisione si ricorre a Math.floor; una chiamata a funzione che come si è detto sopra produce un overhead non indifferente.
La stessa operazione, ragiondando in binario, può essere fatta effettuata con uno "bit-shift".


var numb = 10;
var res = Math.floor(numb/4);

diventa


var numb = 10;
var res = numb >> 2;

Come si può vedere sopra si fa a meno della chiamata a funzione ottenendo lo stesso risultato.

Ovviamente quelli descritti qui sopra vogliono solo essere degli spunti; sono applicabili tante altre migliorie al codice per ottimizzarne le risorse impiegate, sia in termini di CPU che in termini di memoria Ram.

10 Ajax plugin per Wordpress

noreply@blogger.com (Ska) — Mon, 04 Aug 2008 10:10:00 +0000

Quello che distingue Wordpress dalle altre piattaforme per Blogger facendone di questo un vero punto di forza, è la possibilità di poter aggiungere plugin e widget al proprio blog, arricchendolo di funzionalità e contenuti utili alla navigazione dell' utente (commenti, ricerche, ecc ...), ma anche all' amministratore (statistiche, ranking, ecc ...).
Qui sotto sono elencati 10 plugin "ajax style" e relativi link:

Ajax comment preview: Permette ad un lettore di vedere un' anteprima dell' invio definitivo.
Gregarious: Plugin per Social Bookmarking per aggiungere i bottoni "digg it", reggit, Feedburner, FeedFlare ed altri ancora.
WP-Polls: Consente di aggiungere sistemi di sondaggio completamente personalizzabili.
WP-Post Rating: Per dare la possibilità al lettore di esprimere un giudizio su un post o su una pagina.
FireStats: sistema molto completo si statistiche. Qui è possibile vedere una demo.
XDTalk: Aggiungendo questo plugin gli utenti on-line potranno conversare in realtime tra loro; un altro plugin di questo tipo è AJAX Shoutbox che aggiunge anche funzionalità di notifiche sui messaggi ricevuti.
Crossroads: Utilizzando le Flickr API mostra immagini proveniente da Flickr in thumbnail cliccabili.
Google Ajax Search: Consente al lettore di eseguire ricerche sui contenuti del proprio sito, su google o anche su flickr
Ajax Comment 2.0: I commenti per un post vengono aggiornati in tempo reale, senza bisogno di ricare la pagina
Plug 'n' Play Google Map: Questo plugin permette di indicare un valore di longitudine ed uno di latitudine per ogni post, così da poterli avere segnati su una google map. Molto utile per blog che trattano di eventi.

Smarty: Introduzione

noreply@blogger.com (Ska) — Sat, 26 Jul 2008 06:47:00 +0000

Smarty è un motore di template per PHP che consente di separare la logica dal contenuto grafico dell' applicazione. Per capire l' utilità di una motore di template bisogna mettersi nella situazione in cui il programmatore PHP ed il web designer abbiamo ruoli diversi e non coincidano necessariamente nella stessa persona. Attuando questa separazione il programmatore PHP è libero di cambiare l' implementazione, ad esempio del codice responsabile del recupero dei dati da un database, senza influire sul codice html responsabile della formattazione e quindi della presentazione. Dualmente per il web designer. L' unico requisito per l' utilizzo di Smarty è avere un web service su cui gira PHP 4.0.6 o superiore. Scaricato Smarty da qui, bisogna prendere i file contenuti nella directory /libs/ della distribuzione:

Smarty.class.php Smarty_Compiler.class.php Config_File.class.php debug.tpl /internals/*.php (tutti) /plugins/*.php (tutti)

In Smarty è possibile settare il path di sistema contenente le directory delle librerie, attraverso la costante SMARTY_DIR; questa andrà settata se l' applicazione che si sta scrivendo non è in grado di trovare Smarty.class.php. Viceversa possiamo creare un' istanza di Smarty in questo modo:

<?php require('/usr/local/lib/php/Smarty/Smarty.class.php'); $smarty = new Smarty; ?>

altrimenti bisognerà settare la costante SMARTY_DIR come detto sopra:

<?php define('SMARTY_DIR', '/usr/local/lib/php/Smarty/'); require(SMARTY_DIR . 'Smarty.class.php'); $smarty = new Smarty; ?>

Una volta sistemate le librerie, bisogna creare le directory richieste da Smarty per il suo corretto funzionamento; Smarty necessita di quattro directory chiamate (per default) templates, templates_c, configs e cache. Queste sono definite dalle proprietà della classe Smarty $template_dir, $compile_dir, $config_dir, e $cache_dir rispettivamente. I nostri template andranno posti nella directory /templates. Proviamo a creare un semplice template di esempio.
Creiamo il template index.tpl che andremo a mettere dentro la directory /templates:

Hello, {$name}!

Come si può capire quella tra parentesi graffe è una variabile Smarty. Il significato di questo è avere un template che visualizzi sempre la frase "Hello, ....!". In questo modo il template, e quindi la presentazione resterà sempre uguale, mentre l' assegnazione della variabile name sarà a carico del programmatore PHP, o comunque a carico del codice PHP contenente la logica della presentazione. Ora creiamo il file index.php:

<?php // caricamento delle librerie di Smarty require('Smarty.class.php'); $smarty = new Smarty; $smarty->template_dir = './templates/'; $smarty->compile_dir = './templates_c/'; $smarty->config_dir = './configs/'; $smarty->cache_dir = './cache/'; $smarty->assign('name','Ska'); $smarty->display('index.tpl'); ?>

Nell' ordine:

Si caricano le librerie di Smarty
Si istanzia l' oggetto Smarty
Si settano le directory per il funzionamento di Smarty
Si assegna la variabile name
Si mostra il template con le variabili settate

Nel punto 4 e nel punto 5 si vede l' utilizzo dei due metodi più usuali di Smarty: assign e display. Con assign si assegnano le variabili; richiede due argomenti di tipo stringa, il primo è il nome della variabile Smarty, mentre il secondo è il valore che vogliamo assegnare alla variabile.
Con display si visualizza il template; l' unico argomento richiesto da questo metodo è il nome del file di template. Richiamando da browser il file index.php vedremo la formattazione html del template creato con la variabile assegnata; cioè vedremo:

Hello, Ska!

ExtJS: Widget

noreply@blogger.com (Ska) — Wed, 23 Jul 2008 21:24:00 +0000

ExtJS include un ampia gamma di widget javascript da utilizzare per la realizzazione di interfacce utente. In questo esempio ne vedremo solo alcuni, rimandando al sito per una conoscenza più completa di tali widget.
Il primo widget che prenderemo in esame è MessageBox.

Ext.onReady(function() { Ext.get('mb1').on('click', function(e){ Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult); }); Ext.get('mb2').on('click', function(e){ Ext.MessageBox.show({ title: 'Address', msg: 'Please enter your address:', width:300, buttons: Ext.MessageBox.OKCANCEL, multiline: true, fn: showResultText, animEl: 'mb2' }); }); function showResult(btn){ var strMsg = 'You clicked the '+btn+' button'; Ext.MessageBox.show({ title: 'Button Click', msg: strMsg }); }; function showResultText(btn, text){ var strMsg = 'You clicked the '+btn+' button and entered the text '+text+'.'; Ext.MessageBox.show({ title: 'Button Click', msg: strMsg }); }; });

Nel listato di sopra (qui è possibile vedere il risultato finale) si vedono due esempi di uso di MessageBox; il primo è una semplice MessageBox di tipo Yes/No. In questo caso si usa il metodo Ext.MessageBox.confirm() passandogli come argomenti il titolo della MessageBox, il messaggio all' interno e l' azione da intraprendere sulla scelta di Yes.
La seconda MessageBox è invece una inputbox nella quale è possibile avere l'inserimento di un input da parte dell' utente. In questo caso si usa il metodo Ext.MessageBox.show(), nel quale i parametri vengono specificati usando un "letterale oggetto" che contiene un insieme di proprietà e valori. Un letterale oggetto è un particolare pattern di javascript che consente di creare dinamicamente un oggetto generico che contenga al suo interno una lista di coppie nome/valore rappresentanti le proprietà di tale oggetto.
La demo completa è scaricabile qua (bisogna scompattare il file rar allo stesso livello della directory contenente ExtJS)
Un altro widget molto interessante è Grid che consente di creare una tabella in pieno stile ajax.

Ext.onReady(function() { var myData = [ [1, 'Sergio','Mania',30,'9/1'], [2, 'Mario','Rossi',28,'9/12'], [3, 'Giovanni','Italia',24,'10/1'], [4, 'Mauro','Franceschini',34,'7/4'], [5, 'Sebastiano','Schiavone',29,'5/22'] ]; var myReader = new Ext.data.ArrayReader({}, [ {name: 'id', type: 'int'}, {name: 'nome'}, {name: 'cognome'}, {name: 'eta', type: 'int'}, {name: 'data', type: 'date', dateFormat: 'n/j'} ]); var grid = new Ext.grid.GridPanel({ store: new Ext.data.Store({ data: myData, reader: myReader }), columns: [ {header: 'Id', width: 50, sortable: true, dataIndex: 'id'}, {header: 'Nome', width: 150, sortable: true, dataIndex: 'nome'}, {header: 'Cognome', width: 150, sortable: true, dataIndex: 'cognome'}, {header: 'Età', width: 50, sortable: true, dataIndex: 'eta'}, {header: 'Data', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'data'} ], renderTo: 'grid-example', title: 'My First Grid', width: 517, frame: true }); grid.getSelectionModel().selectFirstRow(); });

Dal codice di esempio di sopra si può vedere come sia semplice creare una tabella con extjs, comprendente le funzioni di ordinamento per colonna.
La demo dell' esempio di sopra è visualizzabile qui, mentre i sorgenti sono scaricabili da qui.

ExtJS: Introduzione

noreply@blogger.com (Ska) — Tue, 22 Jul 2008 07:23:00 +0000

ExtJS è un framework in javascript client-side per la realizzazione di applicazioni web.
Il cuore di questa libreria è l' oggetto Element con il quale potremo referenziare un elemento sulla nostra pagina; sostanzialmente è quello che faremmo con il seguente codice in javascript classico:

var myDiv = document.getElementById('myDiv');

In ExtJS invece scriveremo:

var myDiv = Ext.get('myDiv');

E' da sottolineare che:

* Usando il javascript classico, non è garantito il cross-browser, che al contrario è garantito da ExtJS
* Element.get() tramite una cache interna assicura che chiamate multiple allo stesso oggetto siano molto veloci
* Le azioni più comunemente applicate ai nodi DOM sono garantite da metodi diretti e cross-browser

La selezione di un nodo DOM, può venire agevolmente tramite una libreria autonoma compresa in ExtJS chiamata DOMQuery. Il metodo Element.select() usa internamente questa libreria.
Ad esempio potremo scrivere:

Ext.select('p').highlight();

per selezionare contemporaneamente tutti i paragrafi p presenti nella pagina.
Diamo un occhiata alla gestione degli eventi.
L' evento più importante, che sicuramente sarà presente in ogni pagina dove vorremo utilizzare ExtJS, è sicuramente Ext.onReady(); questo viene invocato automaticamente non appena il DOM finisce di essere caricato, garantendo così, che tutti gli elementi della pagina che andrete a referenziare siano disponibili al momento dell'esecuzione dello script.
Se invece siamo interessati a programmare la risposta ad un evento, ad esempio di un click su un pulsante:

Ext.get('myButton').on('click', function(){ alert("Hai fatto click sul pulsante"); });

Quindi considerando il seguente blocco di codice:

Ext.onReady(function() { Ext.get('myButton').on('click', function(){ alert("Hai fatto click sul pulsante"); }); });

Avremo che questo verrà caricato all' inizio, ma la funzione all' interno del metodo 'on' verrà eseguita solo allo scatenarsi dell' evento di click sul pulsante 'myButton'; cioè la funzione all' interno di on è definita sin dall' inzio, ma non eseguita fino allo scatenarsi dell' evento.
Naturalmente si può anche fare a meno della sintassi in-line, cioè della definizione della funzione all' interno della stessa chiamata del metodo, e scrivere più ordinatamente:

Ext.onReady(function() { var buttonClicked = function() { alert("Hai fatto click sul pusante myButton"); } Ext.get('myButton').on('click', buttonClicked); });

OpenSocial

noreply@blogger.com (Ska) — Fri, 18 Jul 2008 14:41:00 +0000

OpenSocial è un inseme di API comuni che consentono la realizzazione di "social application" per molto siti web, cioè dal punto di vista dello sviluppatore è possibile scrivere un' applicazione che funzioni contemporaneamente su più siti che rispettano le specifiche dettate da OpenSocial (MySpace, Hi5, iLike, Orkut ...).
L' approccio per la scrittura di una applicazione OpenSocial è sostanzialmente quello dei google gadget, ovvero un documento xml contenente al proprio interno un frammento HTML/Javascript; la differenza con google gadget sta nel fatto che le OpenSocial API offrono l' ambiente necessario per accedere facilmente hai dati dei social network.
Vediamo un esempio. Supponiamo di voler realizzare un widget che recuperi la friends list.
Per prima cosa creiamo il file js che dovrà contenere il codice javascript.

gadgets.util.registerOnLoadHandler(init); function init() { loadFriends(); }

In questo modo abbiamo creato una funzione di init che viene richiamata quando l' applicazione viene caricata.
Definiamo ora loadFriends():

function loadFriends() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest('VIEWER'), 'viewer'); req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends'); req.send(onLoadFriends); }

Con opensocial.newDataRequest() possiamo creare un oggetto di tipo richiesta, per poi popolarlo con i data di cui abbiamo bisogno; nel nostro caso 'viewer' e viewer' s friends.
Tramite la send usiamo una funzione di callback, pre prendere i dati ritornati dal server e mostrarli sulla pagina.
Quindi creiamo onLoadFriends():

function onLoadFriends(data) { var viewer = data.get('viewer').getData(); var viewerFriends = data.get('viewerFriends').getData(); html = new Array(); html.push('<ul>'); viewerFriends.each(function(person) { html.push('<li>' + person.getDisplayName() + "</li>"); }); html.push('</ul>'); document.getElementById('friends').innerHTML = html.join(''); }

Come si vede abbiamo raccolto i dati provenienti dal server in risposta alla nostra richiesta, e li stiamo formattando in HTML per inserirli dentro il div 'friends' che andremo a creare nella parte html del file xml:

<module> <moduleprefs title="Gifts part 1 - Friends"> <require feature="opensocial-0.7"> </require> <content type="html">  </content> </moduleprefs> </module>

Xml Request con Prototype

noreply@blogger.com (Ska) — Thu, 13 Sep 2007 17:53:00 +0000

Prototype è un framework che consente di sviluppare applicazioni web dinamiche. In particolare, come si può leggere anche su wikipedia, offre supporto per l' utilizzo di AJAX e per la programmazione ad aoggetti in javascript, nonchè per dei toolkits sviluppati con questo framework, che contengono effetti già pronti per ogni evenienza, come ad esempio script.aculo.us.
In questo post vedremo come poter fare semplicemente una richiesta xml con prototype, risparmiando tempo e fatica, e guadagno in leggibilità del codice.
In Prototype la request è fatta creando l' istanza all' oggetto Ajax.Request:

new Ajax.Request('/some_url', { method:'get' });

Per gestire il responso alla request, saranno necessarie le callback, questi metodi di callback saranno passati nelle opzioni quando si crea la request, nel seguente modo:

new Ajax.Request('/some_url',
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
onFailure: function(){ alert('Something went wrong...')}
});

Nell' esempio di sopra sono specificati solo due callback, onSuccess e onFailure, le altre disponibili sono le seguenti:

onUninitialized,
onLoading,
onLoaded,
onInteractive,
onComplete and
onException.

Un' altra opzione di cui possiamo disporre nella creazione della request, è parameters. Questo è necessario nel caso di variabile GET o POST da passare alla pagina php responsabile della request.
Un esempio completo è il seguente:

Nell' esempio di sopra si può vedere che la stringa pars che verrà poi assegnata all' opzione parameters, rappresenta le varibili get ( nel nostro caso abbiamo specificato get nell' opzione method ). Inoltre abbiamo specificato la callback onSuccess, al verificarsi della quale verrà mostrato il risultato dello script php; la callback onLoading, con la quale verrà mostrata una gif di caricamento durante l' attesa dei risultat; la callback onFailure che mostrerà un alert nel momento in cui la richiesta non dovesse andare a buon fine.
Da notare l' uso dell' operatore $('...') di prototype, equivalente a document.getElementById('...') e con il quale è possibile accedere a qualsiasi elemento della pagina con un id impostato.

Google Gadget

noreply@blogger.com (Ska) — Mon, 09 Apr 2007 07:53:00 +0000

Come recita l' index di google gadgets API, si tratta di un semplice modo per creare piccole applicazioni utilizzabili su molti siti. Google provvede a fornire hosting e banda gratuiti ed una semplice maniera per inviare i gadget nella public directory.
Inoltre è presente una ottima documentazione, molto completa e dettagliata.
Sostanzialmente un google gadget non è altro che un file xml, con la seguente struttura:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="MyFirstGadget" height="250" scaling="false" />
<Content type="html">
<![CDATA[
.
.
.
]]>
</Content>
</Module>

Come si può intuire il corpo del gadget andrà tra i puntini di sospensione.
Il corpo del gadget si costruisce in HTML e javascript come una normalissima pagina web.
Ad esempio supponiamo di voler fare un applicazione che abbia una scritta, e che questa al click di un pulsante cambi colore:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="MyFirstGadget" height="250" scaling="false" />
<Content type="html">
<![CDATA[

<table>
<tr>
<td><label id="color_label">Check on this button</label></td>
<td><input type="button" name="btnchange" value="Change!" onclick="change();"></td>
</tr>
</table>

<script type="text/javascript">
function change(){
document.getElementById("color_label").style.color = "red";
}
</script>

]]>
</Content>
</Module>

Questo naturalmente è un semplice esempio, ma solo seguendo la guida allo sviluppo, ci si può rendere conto delle funzionalità e delle potenzilità di queste API, quindi rimando ad una lettura di tale documentazione.
Qui puoi aggiungere alla tua home page un gadget per prendere note al volo che ho creato io (Postit).
Per pubblicare un gadget, bisogno per prima cosa disporre di uno spazio sul web dove poter ospitare il file xml ed eventuali altri file ( immagini, altri xml, ecc ... ) a cui fa riferimento l' xml principale. Il link deve essere inserito in questa pagina, dopo aver seguito scrupolosamente le istruzioni sui campi obbligatori.

XMLHttpRequest, POST Request

noreply@blogger.com (Ska) — Mon, 26 Mar 2007 10:58:00 +0000

In un post precedente si è visto come usare l' oggetto XMLHttpRequest per effettuare una richiesta di tipo GET ad un script lato server e recuperare i risultati.
Ora si vedrà invece un esempio di richiesta di tipo POST che potrà tornare utile nel caso si abbia a che fare con form.

Naturalmente tutto quanto detto sopra è solo un esempio per dare una spiegazione su come utilizzare l' oggetto XMLHttpRequest.
Il discorso si può estendere all' explorer, modificando lo script js nel seguente modo:

Il codice scritto sopra è uguale a quello del post precedente e può rimare uguale per l' esempio. Ora dobbiamo creare una funzione per fare la richiesta post:

function doPost(){
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("POST", "prova.php", true);
myRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var body="f1="+document.frm.field1.value+"&f2="+document.frm.field2.value;
myRequest.setRequestHeader("Content-length", body.length);
myRequest.setRequestHeader("Connection", "close");
myRequest.send(body);
}

Per finire l' esempio creiamo lo script php dal lato server:

<?php
echo "f1=".$_POST['f1']." e f2=".$_POST['f2'];
?>

Per testare l' esempio possiamo includere lo javascript descritto sopra in una pagina html e creare all' interno di questa un form come questo:

Ed il div per visualizzare il risultato:

XMLHttpRequest

noreply@blogger.com (Ska) — Sat, 10 Mar 2007 00:11:00 +0000

XMLHttpRequest è un oggetto di javascript che permette di fare richieste HTTP in background sia di tipo GET che di tipo POST. L' utilità di questo oggetto deriva dal fatto di poter visualizzare il risultato di una richiesta al server da parte del browser senza la necessità di dover aggiornare la pagina web.
Quindi, per grandi linee, quello che si fa è creare una pagina html che tramite l' oggetto XMLHttpRequest fa una richiesta ad un' applicazione server che può essere scritta in un qualsiasi linguaggio server-side, che risponde alla richiesta.
Nella seguente figura si può vedere la differenza tra il metodo classico e l' ultilizzo di XMLHttpRequest e quindi di Ajax:

Vediamo ora come si crea l' oggetto XMLHttpRequest:

function CreateXMLHttpRequest(handler){
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

Quanto detto sopra non vale per l' internet explorer ( vedremo più avanti come adattarlo anche per questo ).
La funzione che abbiamo creato, prende in ingresso un solo argomento, il nome della funzione che vogliamo sia chiamata quando la richiesta viene eseguita.
Ora che abbiamo la funzione per creare l' oggetto XMLHttpRequest vediamo come utilizzarla:

function esempio(){
var myRequest = CreateXmlHttpReq(handler);
myRequest.open("GET","prova.php");
myRequest.send(null);
}

La terza riga di codice setta l' oggetto creato nella seconda riga in modo da far eseguire una richiesta GET al file prova.php, mentre nell' ultima riga la richiesta viene inviata.
Ora bisogna creare la funzione handler che verrà chiamata per gestire la richiesta:

function handler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
alert(myRequest.responseText);
}
}

La proprietà readState ci dice per quale motivo è stato chiamato in base al valore che assume secondo questi possibili valori che può assumere:

0 - uninitialized
1 - loading
2 - loaded
3 - interactive
4 - complete

Nel nostro frammento di codice, nell' if, controlliamo che la richiesta sia stata eseguita e completata, a questo punto verrà settata anche la proprietà status, contenente il valore dello stato della risposta HTTP, che è 200 per le richieste avvenute con successo.
Per provare l' esempio creiamo nella pagina html un pulsante che richiami la funzione di sopra esempio():

e, infine, creare uno script php che accolga la richiesta e restituisca una risposta.
Quindi creeremo il file prova.php:

<?php echo "questa scritta è nello script php; >

E' molto importante notare, nella funzione esempio(), la riga:

myRequest.open("GET","primo.php&rand="+escape(Math.random());

Il motivo della modifica di questa riga di codice, è sempre per sistemare la situazione con l' explorer.
Infatti questo fa il caching delle richieste HTTP con metodo GET, quindi richieste diverse fatte in questo modo potrebbero ritornare sempre lo stesso risultato.
Per evitare questo usiamo una variabile, passata in modo GET allo script php, che abbia come valore un numero generato casualmente, in modo che l' explorer pensi di aver a che fare con una pagina diversa ad ogni richiesta.
L' esempio completo è scaricabile da qui.

Ombre in Css

noreply@blogger.com (Ska) — Mon, 05 Mar 2007 11:10:00 +0000

In questo post vedremo una tecnica che permette di applicare le ombre utilizzando i css. Per prima cosa si dovrà creare con Photoshop o Gimp un' ombra ( oppure prelevarla gia pronta da qui ).
La tecnica, per grandi linee, consiste nell' inserire un immagine all' interno di un div che ha come sfondo l' ombra di cui sopra, e poi si gioca sulla proprietà margin dell' immagine per creare l' effetto di ombra.

#divimg{
background: url('./shadowAlpha.png') no-repeat bottom right;
}

#divimg img{
border: 2px solid white;
margin: -4px 4px 4px -4px;
}

Quindi nella pagina html ci dovrà essere un div con id divimg ed all' interno il tag img. In questo modo:

Usando questa tecnica si può separare l' immagine dall' effetto, e quindi evitare di applicare ad ogni immagine l' ombra.
L' esempio completo è scaricabile da qui

Trasparenza con i css

noreply@blogger.com (Ska) — Sun, 25 Feb 2007 00:47:00 +0000

Spesso per creare degli effetti di trasparenza, si usa sovrapporre dei livelli, dove ognuno dei quali ha un immagine di sfondo creata appositamente con un effetto di trasparenza. Naturalmente, queste immagini si vanno a sommare a tutte le altre già presenti nella pagina, gravando ulteriormente su di essa.
In questo post si vedrà come si possa realizzare una trasparenza utilizzando esclusivamente i css, senza utilizzare alcuna immagine.
Il seguente frammento css verrà interpretato correttamente sia dall' explorer che dal firefox:

.opacity50{
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}

la prima dichiarazione verrà utilizzata dall' explorer e ignorata dal firefox, che invece interpreterà le successive due dichiarazioni.
Da notare che la proprietà filter accetta valori da 0 a 100, dove quest' ultimo rappresenta il colore di sfondo del livello ( o l' immagine di sfondo del livello se presente ) reale senza alcuna trasparenza, mentre le altre due proprietà accettano valori tra 0.01 e 0.99.

Soluzione al problema del box model

noreply@blogger.com (Ska) — Fri, 23 Feb 2007 12:18:00 +0000

Quando esplicitiamo la larghezza di un elemento, se facciamo riferimento alle specifiche css, il valore indica l' area utile dell' elemento, escluso i bordi ed il padding. Purtroppo l' internet explorer, a differenza del firefox, non ha un corretto doctype e questo interpreterà tale valore erroneamente come la larghezza totale dell' elemento, quindi con bordi e padding compresi.
Esistono vari modi per poter superare questo problema. Un dimensionamento coerente può essere ottenuto in uno dei due modi seguenti:

Evitando di specificare le larghezze degli elementi, bordi e padding

Usando il box model hack

Naturalmente la prima soluzione non è sempre applicabile.
La seconda soluzione può essere realizzata prendondo in considerazione l' utilizzo della keyword "!important".
Consideriamo il seguente esempio:

div{
width: 300px;
width: 400px;}

In questo modo in qualsiasi browser la larghezza del div sarà 400px, perchè è l' ultima larghezza specificata, quindi ci sarà il problema accennato sopra; il firefox interpreterà 400px come larghezza dell' area utile, mentre l' explorer, intenderà con 400px, l' area dell' elemento compreso di bordi, margini e padding.
Con l' uso della keyword "!important", si può dare priorità ad una dichiarazione css.
Questo si può sfruttare per risolvere il problema del box model descritto.
Supponiamo di voler creare un div di 400px con 50px di padding ai lati, e che questo sia interpretato coerentemente in tutti i browser ( internet explorer compreso ).
L' utilità di "!important" sta nel fatto che questa keyword è interpretata da firefox , ma non da explorer, quindi se modifichiamo l' esempio di sopra nel seguente modo:

div{
width: 300px !important;
width: 400px;
padding: 0 50px;}

otterremo in entrambi i casi di 400px.
Questa soluzione andrebbe bene nel caso della versione 5.x di explorer, ma affinchè vada bene anche per la versione 6, si deve ulteriormente modificare, in quando dalla versione 6 l' explorer rispetta le specifiche css sulle dimensioni.
Quindi per non avere una larghezza totale di 500px nel explorer 6, bisogna usare un altro piccolo hack.
Quest' ultimo consiste nel cercare di far vedere la seconda dichiarazione alla versione 5.x dell' explorer, nascondendola invece alla versione 6. Per far questo è necessario mettere un commento vuoto prima dei ":" nella seconda dichiarazione:

div{
width: 300px !important;
width /**/: 400px;
padding: 0 50px;}

Questa tecnica si può usare anche per l' altezza ed è un metodo abbastanza semplice per ottenere un dimensionamento coerente con tutti i browser.

Box model

noreply@blogger.com (Ska) — Wed, 21 Feb 2007 12:49:00 +0000

Ogni elemento in una pagina html, oltre che l' area utile, può avere bordi, margini e padding. Con la seguente figura si può vedere cosa si intende:

Il box è quello indicato dal bordo con la scritta rossa, che è anche il border. La distanza tra il suo bordo e il suo contenitore (con bordo nero in grassetto, quello più esterno) è il margin. Il bordo nero solido è il border. Infine, la zona tra l'area del contenuto ed il bordo ( scritta in rosso ) rappesenta il padding.
Gli elementi CSS2 presentano due livelli primari di layout:

Elementi a livello di blocco

Elementi a livello in-line

Un elemento css a livello di blocco genera un riquadro rettangolare ( riquadro dell' elemento ) che descrive la quantità di spazio occupata da un elemento. Per questo tipo di elemento lo sfondo si estende fino al limite esterno del bordo e le proprietà width e height si riferiscono alla sola larghezza del contenuto; padding, bordi e margini si aggiungono a tale valore.
Per quanto riguarda gli elementi inline, essi hanno una line-height, ovvero l'altezza della riga che si può valutare facendo riferimento alla seguente:

Come si vede è presente l'area del contenuto, rappresentata dalla striscia in bianco, ed il riquadro inline rappresentato dalle striscette in griggio sopra e sotto l' area del contenuto.