Archivio

Articolo taggato ‘javascript’

Popover e elementi fissi

January 8th, 2010 No comments

Bikini Contest coperto da simpatici popoverNegli ultimi mesi i web designer, o chi ne fa le veci, si stanno sbizzarrendo inserendo nei layout elementi fissi o elementi in sovraimpressione, tecnicamente chiamati popover.

Una vera e propria moda, che sfrutta un particolare attributo di stile, che è sempre esistito ma che improvvisamente è stato ripescato ed oggi si sta inflazionando parecchio. Bando alle chiacchiere e vediamo come creare un elemento fisso o un popover. Leggi tutto…

Categorie: Web Programming Tag: , , ,

IE6: LI height bug

December 9th, 2009 31 comments

IE6: spazzatura, ancora usata però!Appena risolto un altro problema di incompatibilità di quello stron*o di IE6, il peggior browser che il mondo informatico e web abbia mai visto: non per problemi prestazionali, ma per problemi di compatibilità con le direttive del W3C!

Uno di questi problemi l'ho chiamato "LI Height bug" ovvero problema della gestione delle altezze di liste (UL>LI), gestite visivamente via CSS, per creare un menù di navigazione verticale.

 

Leggi tutto…

Script: cosa vede Google

October 19th, 2009 26 comments

Google cane da tartufo!Qualche giorno fa mi sono incuriosito per cercare di capire cosa vede Google in merito a commenti e script. Ho quindi creato una pagina dove pubblicavo parole non presenti nell’archivio di Google: invece di inserirle nell’HTML, le ho fatte uscire tramite diversi Javascript e anche via commento.

Dopo qualche giorno è possibile analizzarne i risultati. Premetto che per fare il test ho verificato due importanti cose:

Non dovevano esserci link a quella pagina contententi quelle parole, non dovevano essere parole presenti nel DB di Google.

 

Leggi tutto…

Categorie: Web SEO Tag: , ,

Banner ingrandibili SOLO css

May 20th, 2009 8 comments

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!

Leggi tutto…

Chrome e i plugin

January 30th, 2009 2 comments

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!

Blog multilingua col “g” traduttore

January 13th, 2009 11 comments
Lingue Diverse Per Esprimere Una Sola Parola di ° Lιттlε вυттεяҒly °

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!

 

Blogspot analytics e link uscenti

November 18th, 2008 4 comments

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>.

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

Categorie: Web Mania Tag: , ,

Blogspot articoli simili

November 7th, 2008 2 comments

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(&#39;RelatedPostClick/&#39; + 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(&#39; + escape(alturl) + &#39;);};

Have a good blog!

CSS: Invertire il posizionamento verticale dei div

October 29th, 2008 8 comments

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.

 

Categorie: Web Mania Tag: , , , ,

Stili classi e javascript

September 23rd, 2008 No comments

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.

Categorie: Web Mania Tag: , , , ,