All’articolo precedente abbiamo creato un banner estensibile usando JS e CSS, e associando il tutto ad un DIV.

Però si può fare di meglio, sfruttando la proprietà CSS del tag <A>: hover!

Ti ho incuriosito? Leggi il resto del post »

Da sempre lamento che uno dei principali difetti di Chrome è la mancanza dei plugin. Io adoro i prodotti Google, ma Chrome lo trovo veramente incompleto. Non ho ancora capito le motivazioni di uscire con un browser così scarno, senza manco la toolbar di papà Google, ma sicuramente qualcuno delle risposte le avrà.

Ma anche io ho una rispostina per voi. Direttamente dalla newsletter ufficiale di Google Adsense una ufficiale dichiarazione. Dopo aver presentato alcuni plugin per Firefox (la concorrenza!!!), che non ne capisco tanto l’utilità, ecco qualche riga di dichiarazione:

non dimenticate che presto ci saranno simili add-on anche per il nostro Chrome, che non mancheremo di condividere con i nostri lettori.

Insomma pare una cosa imminente il supporto di Chrome per i plugin. E finalmente molti affezionati al proprio Firefox come me, passeranno al nuovo Chrome: più innovativo e leggero. Per me adesso rinunciare ad alcuni plugin di firefox sarebbe veramente molto molto difficile, come rinunciare al suo debugger javascript.

Nel frattempo per chi non l’avesse ancora fatto, consiglio comunque di provare Chrome: scarica Google Chrome!

Secondo Enrico Sigurtà avere il blog multilingua è uno dei fattori che permette di guadagnare di più con il proprio blog, sfruttando Adsense. La sua proposta, diciamo economica, è quella di sfruttare gli strumenti di traduzione online gratuiti: infatti propone Babelfish, il tools da sempre usato da Altavista.

Io che sono più filogugolliano propongo invece la soluzione utilizzando Google Translate. Se andate nel sito Google stesso mette a disposizione uno script da inserire nel sito per avere un comodo gadget con menù a tendina e decine di lingue disponibili. Con un click il navigatore ottiene il sito tradotto.

Devo dire che i risultati, specie per chi spinge un po’ su linguaggio e slangy, non sono sempre affidabili. Ammetto però che sempre più spesso i risultati di Google Translate sono decisamente buoni. O almeno permettono di capire il linguo nell’idioma sconosciuto.

Soluzione alternativa

Propongo una soluzione alternativa: sfruttiamo il traduttore di Google ma con un pizzico di javascript creiamoci il nostro link personalizzato da mettere dove vogliamo. Sostanzialmente prendiamo il link che genera il tool-traduttore (menù a tendina) e facciamo in modo di creare il link con l’indirizzo della pagina in cui siamo.

<a href="javascript:location.href='http://translate.google.com/translate?client=tmpg&hl=en&u=' + encodeURIComponent(location.href) + '&langpair=it|en';pageTracker._trackEvent('gTranslate','clickFromPost','en');">English &raquo;</a><br />

Spiegazione del link:

• javascript:
  genera un link che è in realtà è una chiamata javascript
• location.href
  proprietà per il cambio pagina
• hl=en
  parametro URL che setta la lingua dell’ambiente del traduttore di Google
• encodeURIComponent()
  codifica uan stringa impedendo a caratteri speciali di rompere la stringa URL, esempio convertendo le barre "/" etc.
• location.href
  l’url della pagina in cui il navigatore è
• langpair=it|en
  parametro URL che setta il linguaggio sorgente e il linguaggio di destinazione, in cui si vuole fare tradurre il sito

Tutto chiaro? Altrimenti fate un fischio nei commenti!

 

Dopo aver provato numerosi scritp per tracciare i link uscenti vai Google Analytics, e dopo aver provato a scriverne uno io, mi sono reso conto che Blogger modificava anche dentro i widget il codice che inserivo.

Esperienza alla mano ho aperto il template di blogspot (espanso) e ho inserito questo codicillo appena prima della chiusura del </body>.

<script type="text/javascript">
    function outboundLinks(){
        links = document.getElementsByTagName("a");
        for (i=0;i<links.length;i++){
            myLink = links[i];
            if (myLink.href.toLowerCase().indexOf("www.sballato.com/") == -1){
                myLink.setAttribute(’onclick’,'pageTracker._trackPageview("outboundLinks/" + myLink.href.substring(7))’);
            }else{
                myLink.setAttribute(’onclick’,'pageTracker._trackPageview("inboundLinks/" + myLink.href.substring(7))’);
            }
        }
    }
    outboundLinks();
</script>
</body>

E tutto pare funzionare regolarmente. La conversione l’ho fatto con il tool online che uso anche per gli script adsense. Il codice originale è questo:

<script type="text/javascript">
    function outboundLinks(){
        links = document.getElementsByTagName("a");
        for (i=0;i<links.length;i++){
            myLink = links[i];
            if (myLink.href.toLowerCase().indexOf("www.sballato.com/") == -1){
                myLink.setAttribute(’onclick’,'pageTracker._trackPageview("outboundLinks/" + myLink.href.substring(7))’);
            }else{
                myLink.setAttribute(’onclick’,'pageTracker._trackPageview("inboundLinks/" + myLink.href.substring(7))’);
            }
        }
    }
    outboundLinks();
</script>

Have a good blogday

ps: attenzione, google analytics segnerà ogni Outbound link come "page view".

Una delle cose che con blogspot non si possono fare nativamente, è l’elenco degli articoli collegati. Mentre in Wordpress basta scaricare qualche plugin, la vita su blogger è molto più difficile. La soluzione però c’è e ben nota. Io però ho aggiunto un’altra simpatica funzionalità:  il tracciamento con Google Analytics.

I click sui post correllati verranno  (in inglese "related posts") salvati, in modo da poter analizzare se sono cosa utile nel blog, oppure è solo un peso in più. Condizione necessaria: avere Analytics già operativo nel blog.

Prima di tutto è necessario installare all’interno del vostro blogspot template il widget di Hoctro!
Per maggiori informazioni di cosa si tratta e come gestirlo potete anche leggere qui.

Nell’esempio ho usato lo script nuovo, per renderlo compatibile con il vecchio vi basta sostituire pageTracker._trackPageview(...) con urchinTracker(...).

Ora andiamo a cercare il punto nel widget in cui vengono creati in javascript i nodi dei link. Io per facilità ho cercato ";li" e ho trovato subito. Quello che dovrete scrivere va dopo:

var li = document.createElement(&#39;li&#39;);
var a = documnt.createElement(&#39;a&#39;);
a.href = alturl;

Aggiungete quindi questa righa:

a.onclick = function(){pageTracker._trackPageview('RelatedPostClick/' + encodeURIComponent(entry.title.$t));};

Che inserirà in Analytics, per ogni click in un post correlato, un link "virtuale" con l’indirizzo:
"RelatedPostClick/<titolo post>"

Potete personalizzare a vostro piacimento il link. Se volete mettere al posto del titolo l’URL potete usare:

a.onclick = function(){pageTracker._trackPageview(' + escape(alturl) + ');};

Have a good blog!

Secondo alcune teorie SEO, assolutamente testate, pare che la posizione dei contenuti all’interno del HTML sia piuttosto rilevante. Cambiando però punto di vista secondo le teorie dell’usabilità sarebbe buona cosa che il menù di navigazione apparisse prima di tutto. Tali teorie sono riportate anche nel documento di accessibilità della legge Stanca.

Ma sono due cose in contrasto, come fare? Dal punto di vista del codice putroppo non ci sono soluzioni, chi è sopra è sopra, chi è sotto e sotto! Dal punto di vista visuale però possiamo fare qualcosa.

Ho lanciato la provocazione tecnica anche agli amici del forum di HTML.it. Inizialmente il titolo non è proprio piaciuto, forse ho esagerato. L’argomento però si anche se purtroppo la discussione non è stata così fruttuosa. Alla fine una soluzione insieme l’abbiamo trovata, purtroppo però obbligatorio l’uso di Javascript.

L’esempio lo trovate nella pagina Vertical Switch Div. La soluzione si basa su questo CSS:

#myDiv1{
    position: absolute;
    top: 100px;
}
#myDiv2{
    position: absolute;
    top: 0;
}

E su questo script javascript richiamato dopo la lettura dei due DIV:

function myDiv1Top(){
    var d1 = document.getElementById("myDiv1");
    var d2 = document.getElementById("myDiv2");
    var margine = 10;
    d1.style.top = d2.offsetHeight + margine + "px";
}
 

Per il funzionamento completo fate riferimento alla pagina linkata sopra e al suo codice. Dopo aver letto i due DIV, viene richiamata la funzione javascript myDiv1Top, la quale prende l’altezza (d2.offsetHeight) del primo DIV  da visualizzare (myDiv2) la somma a un margine e setta l’attributo TOP al secondo div da visualizzare (myDiv1). 

Se avete esigente diverse grafiche o più DIV dovete chiaramente giocare con margini iniziali e sommatorie multiple delle altezze. Non mi sembra una grande soluzione, però sinceramente non ne ho trovate altre. Se ne conoscete sarò ben lieto di pubblicarle e riportarle su HTML.it.

 

Molto tempo fa avevo già presentato un menù fatto in javascript e css, sfruttando la possibilità di interagire tramite javascript con il DOM dei CSS e dell’HTML.

Il sistema si basava sul sotto oggetto style di un oggetto HTML, modificando gli attributi dei sotto elementi: colore, bordo, altezza…

Sappiamo tutti però che la potenza dei CSS è proprio quello di staccare la struttura HTML dalla definizione degli stili, e di gestire gli stili in modo centralizzato. Se noi andiamo a ridefinire delle proprietà di visualizzazione nella pagina via JS, andiamo a spu**anare tutto quello per cui abbiamo progettato il sito in CSS.

Avremo bisogno di un metodo per gestire il cambio della classe di un oggetto, tramite Javascript. Questa non è altro che una proprietà degli oggetti HTML, chiamata className.

Usarla è davvero banale:

document.getElementById("mioOggetto").className = "bordazzurrogrosso"

Come avete sicuramente capito abbiamo assegnato all’oggetto mioOggetto al classe bordazzurrogrosso. Se vogliamo spingerci un po’ oltre possiamo anche fare un effetto tipo questo:

<script type="text/javascript">
function divOn(o){
o.className = "classeDelDivOn";
}
function divOff(o){
o.className = "classeDelDivOff";
}
</script>
<div id="mioDiv" onmouseover="divOn(this);" onmouseout="divOff(this);">…</div>

Ora tocca a voi giocare… intanto grazie a techpatterns.

Oggi ho trovato un interessante articolo su Javascript e sulla gestione degli eventi. Uno script che secondo l’autore è un po’ datato, ma che pare sia ancora attualissimo.

Non vengono usati prototype, jQuery o altri framework javascript. Solamente un paio di funzioni: addEvent, removeEvent.

function addEvent(obj, type, fn){
if (obj.attachEvent) {
obj[’e’ + type + fn] = fn;
obj[type + fn] = function(){
obj[’e’ + type + fn](window.event);
}
obj.attachEvent(’on’ + type, obj[type + fn]);
}
else
obj.addEventListener(type, fn, false);
}

function removeEvent(obj, type, fn){
if (obj.detachEvent) {
obj.detachEvent(’on’ + type, obj[type + fn]);
obj[type + fn] = null;
}
else
obj.removeEventListener(type, fn, false);
}

Utilizzare le due funzioni è veramente molto semplice:

addEvent(document.getElementById('my_elem'),'click',foo);


Con la chiamata di addEvent, l’elemento "my_elem" avrà un evento legato al click che chiamerà la funzione foo!

via GregWolejko

Spesso quando creo i siti utilizzo pesantemente gli include server side, dapprima con coldfusion tramite <cfinclude…> poi con la chiamata di IIS <!– #include….–>, ma penso che chiunque sia interessato all’argomento conosco la cosa benissimo. Comunque piccolo esempio:

<!-- #include file="include/connection.asp" -->

Le parti che includono la maggior parte delle volte sono pezzi di layout condiviso in tutto il sito, tipo menù laterali, top, footer, etc. Uso spesso anche i template di Dreamweaver, ma se il materiale è in file esterni si rischia molto meno il cu*o in caso di rottura del template. E’ un attimo fare danni, specie se editiamo qualcosa fuori di DW.

Uno dei problemi nel caso di menù "esternizzati" è il precarimento delle immagini. Se facciamo tutto su DW alla fine più o meno si arrangia lui a sistemare il preload dentro al window.load, se però ce l’abbiamo in file diversi dobbiamo gestirlo a mano.

Partiamo da un concetto, dichiarazioni multiple di window.onload, non sono additive. Quindi l’ultima dichiarazione caricata dal browser è chiaramente quella che lui esegue. Per risolvere questo "conflitto" ho trovato uno script molto utile, niente di particolarmente complesso, ma sicuramente una ottima idea: Window Onload Manager (WOM).

Il funzionamento è molto semplice. Invece di caricare le varie azioni da fare al caricamento direttamente sull’evento onLoad, le carichiamo su un’array che alla fine richiamerà tutto le funzioni all’onload.

//questa funzione dice di caricare la funzione womGo all'onload
function womOn(){
  window.onload = womGo;
}
//wowGo, quando è chiamato, esegue tutte le funzioni inserite nell’array
function womGo(){
  for(var i = 0;i < woms.length;i++)
    eval(woms[i]);
}
//wowAdd aggiunge una funzione all’array
function womAdd(func){
  woms[woms.length] = func;
}
//dichiarazione globale dell’array
var woms = new Array();
//esempio…
womAdd(’hideDiv("rightBox")’);
womAdd(’ajaxInit()’);
womAdd(’setHandler("tr","mo","onmouseover","rowHightlight")’);
womOn();

Penso sia tutto chiarissimo. Vero?

Sto rifacendo tutta una serie di tool che avevo già pronti, traducendoli da quella meraviglia di linguaggio che è coldfusion, a quella cosa destrutturata che è ASP (vbscript). Oggi mi sono imbattuto nel mio vecchio ImageViewer.

Già che c’ero gli ho dato pure una rinfrescata, in modo di aver un tool universale per ingrandire le immagini, in puro js + css, compatibile. Obiettivo quello di ottenere un image viewer, che funzionasse in pop over, e non in popup, ma che fosse compatibile anche con flash.

Ho trovato un ottimo javascript, basato su prototype, che faceva al caso mio. Con pochissime modifiche è diventato perfetto.
Lo script originale è di dynamicdrive. Sul loro sito trovate la demo di come funziona: è veramente facile. Copiate i 3 file (un javascript, un css e una immagine), volendo li adattate alle vostre esigenze e il gioco è fatto. Il javascript modificato lo trovate qui: thumbnailviewer.js. Per info sull’utilizzo preciso del js originale, fate riferimento al loro sito.

Per associare il plugin all’immagine è sufficiente linkare il thumbnail all’immagine originale grande, impostando come attributo REL uguale a "thumbnail". Esempio:

<a href="_file/newsImg/<%= menuSxNews("immagine") %>" rel="thumbnail"><img src="_file/newsImg/th_<%= menuSxNews("immagine") %>" class="thDx" /></a>

Io immagine lo tiro su da un ResultSet di DB.

 

Le mie modifiche a questo script si sono rese necessarie in quanto nel sito ho del FLASH e come tutti voi sicuramente sapete, nessuno DIV con all’interno semplice HTML, può sovrastare (z-index) un oggetto Flash. L’unico sistema è nascondere tutto il sito sotto - o la parte che infastidisce.

In un buon progetto di sito, soprattutto Table-less, è buona norma racchiudere tutto il sito in un macro layer, in modo da poter impostare proprietà CSS a tutto il sito, in modo facilissimo (css o js). Nel mio js aggiornato ho inserito questa feature. Nella creazione dell’oggetto originale thumbnailviewer, ora ci sono due nuove proprietà:

• mainDivName (id): il nome del nostro DIV contenitore di tutto il sito, o della parte che vogliamo nascondere. Se è vuoto (cioè "") enableFullMask è come fosse a FALSE
• enableFullMask (true | false): abilita la cancellazione del DIV chiamato sopra

Le modifiche effettuate sono state pochissime. Ho aggiunto le due proprietà nell’oggetto thumbnailviewer:

mainDivName: "main", //The main DIV
enableFullMask: true, //Enable main div "main" hiddening

Nella funzione init ho inserito la dichiarazione del nostro DIV da nascondere:

if (this.enableFullMask && (this.mainDivName!="")) {mainDiv = document.getElementById(this.mainDivName)}

Al caricamento dell’immagine nascondo il DIV dichiarato sopra:

if (this.enableFullMask && (this.mainDivName!="")){mainDiv.style.visibility="hidden"}

Nella funzione closeit ho riabilitato la visibilità del DIV nascosto e ho forzato (per lo stron*o di IE7) il rendering:

if (this.enableFullMask && (this.mainDivName!="")){
    mainDiv.style.visibility="visible"
    //enforse new rendering for IE7
    mainDiv.innerHTML += ""
}

Il bello è che funziona benissimo