Feb
12
Posted on 12-02-2008
Filed Under (ajax, html, javascript, ottimizzazione) by Mat on 12-02-2008

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 src="library.js" type="text/javascript" defer="defer"></script>

che però funziona diversamente a seconda del browser. Inizialmente era stato pensato per caricare lo script al termine del caricamento della pagina; IE invece ha reinterpretato quest’attributo, caricando il file nel momento del richiamo, ma eseguendo il codice all’interno dello script in differita, solo quando la pagina è stata caricata.
Personalmente utilizzo defer solo quando non posso farne a meno, preferisco il primo metodo che è cross-browser e più performante.

Vedi anche:
quirksmode.org
hunlock.com

(1) Comment    Read More   
Feb
11
Posted on 11-02-2008
Filed Under (ajax, google, guida, html, javascript) by Mat on 11-02-2008
  1. Cercare la locazione in cui punterà la mappa in maps.google.com
  2. Cliccare su “Link to this page” e prelevare il parametro ll dal codice dell’iframe, che sarà tipo ll=12.325678,34.567890
  3. Recarsi su code.google.com/apis/maps/ e cliccare “Sign up for a Google Maps API key”, aderire e inserire il dominio di destinazione della mappa
  4. Prelevare la chiave e il codice per quel dominio
  5. Il codice consiste in:
    • Due tag script; la chiave è già quella giusta, sostituire in GLatLng latitudine e longitudine prima prelevate (il parametro ll)
    • funzione load
    • chiamate a load e unload nel body
    • tag div dove inserire la mappa

Voilà, il codice per la mappa è pronto, copiare la nuova pagina generata nel vostro sito o inserire gli elementi citati nel punto 5 in una pagina esistente.
Per aggiungere funzionalità aggiuntive, si può consultare la documentazione.

(0) Comments    Read More   
Feb
01
Posted on 01-02-2008
Filed Under (html, ottimizzazione, trucco) by Mat on 01-02-2008

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 }

and in html file we preload in the hidden div all hover images, before tag, so we don’t slow down loading of the page contents:

index.php

<p class="preload_img"><img src="rollover-image.jpg" alt="rollover" /></p>

(0) Comments    Read More   
Nov
16
Posted on 16-11-2007
Filed Under (css, html) by Mat on 16-11-2007

Do you have a <div> empty block with only a background-image and you want to make it linkable? Maybe you tried in this way:

—CSS—

.linkable_block { background:url(back.jpg); width:200px; height:100px; }

—HTML—

<a href="#"><div id="linkable_block"></div></a>

but it isn’t valid. So this is the solution, just put the link inside and set it a style, it will fit the block size also if you change the block size:

—CSS—

.linkable_block {background:url(back.jpg); width:200px; height:100px; }
.linkable_block a { width:100%; height:100%; display:block; }

—HTML—

<div id="linkable_block"><a href="#"></a></div>

(0) Comments    Read More   
Ott
01
Posted on 01-10-2007
Filed Under (google, html, spam, web 2.0) by Mat on 01-10-2007

Esiste un attributo nel tag <a>, che è “rel”, il quale se valorizzato con “nofollow” penalizza il link indicato.
Per togliere/omettere il tag nofollow basta una semplice ragione: i link esistono per essere indicizzati, non ha senso chiedere ai motori di ricerca di non utilizzarli, dato che il loro funzionamento si basa in buona parte in base a questo meccanismo di backlinks.
La ragione per cui indicare il nofollow è per i link che non c’entrano nulla con la pagina o il sito in questione, cosa che difficilmente accadrà dato che un link si presume che se esiste abbia un senso di esistere, e abbia senso nel contesto in cui è collocato. Dunque l’unico motivo per cui applicare il nofollow è evitare che lo spamming di links abbia successo, ma il nofollow non risolve il problema, semplicemente lo evita (malamente) e inficia sul PageRank, penalizzando quindi gli utenti non-spammer. Quindi un consiglio agli utilizzatori di wordpress: usate il plugin che toglie il nofollow dai links.

(0) Comments    Read More