Se anche voi avete perso ore del vostro tempo a capire perchè un campo di un form non viene inviato alla pagina destinataria (action del form) quando usate NicEdit, invece normalmente si, forse ho la soluzione. Leggi tutto…

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…

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…

L’accoppiata blogger adsense ha sempre creato un po’ di problemi a tutti i neofiti della blogosfera firmata google, che non hanno molta dimestichezza con il metalinguaggio blogspot e con l’HTML.

Qualche tempo fa avevo creato una facile guida su come inserire la pubblicità Adsense su Blogger, indicando come deve essere codificato (riscritto) il codice affinchè non dia problemi di compatibilità con il codice di Blogger. L’articolo è "Pubblicità Adsense in Blogger".

L’articolo di oggi vuole invece dare un approccio più generale all’inserimento di script all’interno del codice di blogger, rispondendo alle seguenti domande:

• come pubblicare solo nella homepage
• come pubblicare solo nella pagina di un singolo post
• come inserire qualsiasi tipo di script

Nota bene: l’articolo tratta su come gestire il template di blogger con i widget espansi. Per ottenere tale codice dovete accedere all’interfaccia riservata di blogger > Layout > Modifiche HTML, quindi checkare "Espandi i modelli widget" e copiarsi il codice in un editor di testo / html. Leggi tutto…

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…

Nel fantastico mondo tableless dei CSS di sono due attributi (ce ne sono anche altri???) che si possono definire in modo implicito o in modo esplicito. Nel modo implicito abbiamo una definizione quadridimensionale.

Gli attributi sono padding e margin, il primo che indica lo spazio interno di un oggetto che non deve essere "riempito". Il secondo lo spazio esterno dell’oggetto.

Definizione esplicita

margin-top: v1;
margin-right: v2;
margin-bottom: v4;
margin-left: v4;

Per ogni dimensione definiamo la misura: in pixel, em, % o auto (solo per left e right).

Definizione implicita

margin: v1 v2 v3 v4;

La definizione quadridimensionica esprime rispettivamente i valori per top, right, bottom, left. Però è possibile esprimersi definendo anche meno valore, vediamo come si comporta…

margin: v1;
viene assegnato il valore v1 a tutte le dimensioni

margin: v1 v2;
viene assegnato il valore v1 a top e bottom, v2 a left e right

margin: v1 v2 v3;
viene assegnato v1 al top, v2 al right e al left, v3 al bottom

Buon CSS World… capito Franz adesso???

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

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 spesso i CSS vengono senza approfondire realmente le loro possibilità. O peggio ancora si usano (magari sempre quegli attributi) facendo copia e incolla e adattando il codice site by site.

Uno degli elementi più bistrattati dei CSS è la position property. Questo attributo può assumere 4 diversi valori:

• STATIC: valore di default. L’elemento con position:static, viene visualizzato nella posizione in cui è stato inserito nel codice, quindi in base ai propri container (parent)
• RELATIVE: con questo valore la posizione dell’elemento dipende da quanto dichiarato negli attributi LEFT o RIGHT o TOP o BOTTOM. I valori fanno riferimento alla posizione STATIC dell’elemento. Esempio:
  .myRelative{position:relative;top:10px;left:100px}
  dichiara una classe posizionata più in basso di 10px e più a destra di 10px rispetto alla sua posizione originale
• ABSOLUTE: lo spostamento di chiarato in LEFT (…) fa riferimento alla posizione dell’elemento "contenitore" dell’elemento dichiarato.
• FIXED: lo spostamento di chiarato in LEFT (…) fa riferimento alla finestra del brower. Esempio:
  .myRelative{position:fixed;top:10px;right:100px}
  dichiara una classe posizionata a 100px dall’angolo destro del browser e a 10px dal bordo superiore.

Per maggiori informazioni date una occhiata anche su dozarte e su blog.

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.