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 »

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.

Molti amici mi chiedono come si faccia ad inserire in blogger un annuncio adsense. Il problema è di inserire un annuncio pubblicitario di Google all’interno del template di Blogger, riconosciuti come uno dei codici più delicati della terra..

Il codice di Adsense va inserito all’interno del

<DIV class="post"> ... </DIV>

e consiglio di creare un DIV all’interno del quale posizionare l’Adsense.

A questo punto il codice di google originale deve essere leggermente "adattato". Quindi se questo è il codice originale:

<script type="text/javascript"><!--
google_ad_client = "pub-yyy";
google_ad_slot = "xxx";
google_ad_width = 468;
google_ad_height = 60;
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Dovete farlo diventare:

<script type='text/javascript'>
google_ad_client = &quot;pub-xxx&quot;;
google_ad_slot = &quot;yyy&quot;;
google_ad_width = 468;
google_ad_height = 60;
</script>
<script src=’http://pagead2.googlesyndication.com/pagead/show_ads.js’ type=’text/javascript’>
</script>

Cosa è stato modificato? Nulla di sostanziale:

• tolti i marcatori per la compatibilità di javascript: <!– e //–>
• sostituite le " dei tag script con ‘
• sostituite le " del codice javascript con &quot;

E il gioco è fatto! Grazie a Vito per la stimolazione neurale/editoriale.

Visual Studio 2005 ha una utile funzione che permette di rinominare automaticamente gli ID doppi nel caso di un copia incolla.

Se vuoi avete un DIV con id="pippo" lo copiate e lo reincollate in altre parti del codice, Visual Studio 2005 rinominerà il nuovo ID automaticamente. E’ tutto corretto. Secondo le regole dell’HTML non possono esserci più Oggetti nel DOM (Document Object Model) con lo stesso ID.

Il problema però sorge quando state facendo dei layout HTML ottimizzati, e vi capita di avere lo stesso oggetto, riscritto in più parti, magari all’interno di IF o SWITCH. La cosa diventa molto molto fastidiosa.

Per risolvere il problema dell’auto renaming on paste, dovete andare in:

tools > options > Text Editor > HTML > Miscellanous > Auto ID elements on paste in source view

e assicurarvi che non sia Checkato!

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

Ho appena constatato che i Fieldset , struttura HTML di vecchia data, sono veramente poco conosciuti, anche da molti sviluppatori HTML. Non parliamo poi di chi sviluppa nascendo con .net: più di qualcuno è convinto che in HTML esistano i PANEL e altre strane strutture, frutto di centinaia, o a volte migliaia, di righe di codice tra HTML, CSS e soprattutto Javascript!

Il nonno diceva: impara l’html con il notepad, al massimo proprio con il notepad++

La bellezza dei fieldset è creare dei box per i contenuti, e sul bordo degli stessi si può aggiungere un titolo. Figo no? E senza nemmeno 1 Byte di Gif. Il codice:

<fieldset>Io adoro Sara Varone</fieldset>

Produce:

Se invece vogliamo mettere il titolino dobbiamo aggiungere il tag Legend, e così diverrà:

<fieldset><legend>Tette Grosse?</legend>Io adoro Sara Varone</fieldset>

Questo il risultato:

Così oggi abbiamo imparato a usare un nuovo tag e abbiamo fatto contento anche quei porcelli di Sono Sballato! Però per quanto concerne come si adattano Fieldset e Legend con i CSS, quelli ve li smazzate voi!

La sintassi completa e ufficiale la trovate sul sito del W3C, ricordate che è nato per i FORM e per il raggruppamento dei campi.