E' un luogo comune il fatto che gli script javascript vadano inclusi dentro il tag head della pagina. Con l'approdo di ajax sul web, javascript è più utilizzato che mai e il caricamento di tutti i javascript nell'header della pagina rallenta il completamento della pagina. Per questo possono essere inclusi anche dopo, dentro al body, semplicemente prima del loro utilizzo. Certo che inserirli tutti insieme nell'header rende il codice più ordinato, ma in questo modo almeno parte della pagina si è già caricata e l'utente non deve attendere troppo per vedere qualcosa.
Dipende anche dall'utilizzo che se ne fa di questi script; per esempio uno script di validazione delle form come JSValidate è inutile caricarlo nel file header del vostro sito perchè è utile solo dove ci sono delle form, basterà caricarlo nelle pagine opportune. Script come quello di Google Analytics possono essere caricati tranquillamente nel vostro file di footer, prima della chiusura del body, così sarà presente in tutte le pagine e non inficierà sul caricamento del resto della pagina. Se usate script grafici in tutta la pagina, come scriptaculous o mootools, converrà includerli nell'header, in modo che la pagina sia interattiva il prima possibile rispetto ai tempi di visualizzazione della stessa.
Un'altro stratagemma per evitare il rallentamento dei javascript è l'uso dell'attributo defer nel richiamo dello script:
<script type="text/javascript" defer="defer" src="library.js"></script>
Dopo l'euforia iniziale che si è diffusa col divulgarsi del web 2.0, sorgono delle riflessioni: ma serve tutto questo 2.0?
Certamente una cosa meravigliosa che offre il nuovo web è la fornitura di qualsiasi servizio digitalmente fruibile, e molto spesso in modo gratuito, al contrario di buona parte delle applicazioni desktop. Parliamo però dei social network...ma quanti ce ne sono? Ci servono realmente tutti? Lo ammetto, anch'io mi faccio prendere e mi iscrivo ovunque capito, e finalmente posso dire "ci sono anch'io" in ogni qualsivoglia sito. Ma cosa me ne faccio di tutti questi account, che tra sì e no ne userò un quarto? Credo proprio, come tanti altri, di rientrare nella categoria "prezzemolini del web".
A tal proposito, condivido con questo articolo l'idea che le killer application del 2008 saranno gli aggregatori di identità digitali, che permettono di loggarsi ad un unico servizio che li comprende tutti quanti.
La versione 5 dell'applicativo è finalmente pronta per il rilascio, dopo un periodo di testing.
Spese 2008 introduce qualche nuova funzionalità, ma lo sviluppo si è incentrato soprattutto verso la semplificazione della logica preesistente.
Vediamo in breve le novità introdotte:
In Thickbox css code there are some hacks that doesn't validate the code (only css, rather xhtml is valid).
Invalid code is javascript inline css document. So, I changed invalid code with a js function call. Take an example:
* html #TB_overlay { /* ie6 hack */
position: absolute;
/*height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); NOT VALID*/
height: expression(fixHeight(document.body.scrollHeight, document.body.offsetHeight)); //VALID
}
* html #TB_window { /* ie6 hack */
position: absolute;
/* margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); NOT VALID */
margin-top:expression(fixMarginTop(this.offsetHeight,document.documentElement,document.body.scrollTop)); //VALID
}
function fixHeight(scrollHeight, offsetHeight)
{
return (scrollHeight > offsetHeight ? scrollHeight : offsetHeight + 'px');
}
function fixMarginTop(offsetHeight,documentElement,scrollTop)
{
return (0 - parseInt(offsetHeight / 2) + (TBWindowMargin = documentElement && documentElement.scrollTop || scrollTop) + 'px');
}
<script type="text/javascript" src="/lib/thickbox/jquery.js"></script>
<script type="text/javascript" src="/lib/thickbox/thickbox.js"></script>
<style type="text/css"> @import "/lib/thickbox/thickbox.css"; </style>
I found several ways to preload :hover images, to avoid bad winkles and loading waiting time: the most appropriate way are from maratz.com and netmechanic.com, but I think that the better and cleaner way is the following.
We simply declare in css images with their rollover file, and a class for a hidden div:
style.css
a { background:url(image.jpg) }
a:hover { background:url(rollover-image.jpg) }
.preload_img { display:none }
<div class="preload_img">
<img src="http://www.blogger.com/rollover-image.jpg" alt="rollover" />
</div>
