Per vederlo subito all’opera basta dare un’occhiata agli esempi che ci sono sul sito ufficiale.

Questo plugin torna veramente utile se accoppiato ai classici menù per wordpress, dove tipicamente la sintassi html è la seguente:

<ul class="sf-menu">
<li class="page_item"><a href="#" title="Home">Home</a></li>
<li class="page_item page-item-1"><a href="#" title="About">About</a>
<ul>
<li class="page_item page-item-2"><a href="#" title="Sottopagina Uno">Sottopagina Uno</a></li>
<li class="page_item page-item-3"><a href="#" title="Sottopagina Due">Sottopagina Due</a></li>
</ul>
</li>
<li class="page_item page-item-4"><a href="#" title="Contatti">Contatti</a>
</ul>

Questa sintassi viene generata dalla funzione wp_list_pages(), indicando come argomento depth=2. E’ sufficiente assegnare la classe “sf-menu” alla lista (<ul>) che compone il menù e lo script farà il resto del lavoro, individuando le liste annidate e nascondendole. Quando l’utente passerà con il mouse sulla pagina padre, allora saranno mostrate a cascata le pagine figlie.

Ovviamente per far funzionare il tutto è necessario includere nella testata della pagina qualche riga di codice, per caricare jquery, il plugin e alcuni file css:

// link al file CSS
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
// link al javascript (hoverIntent è opzonale)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// inizializzazione di Superfish, sf-menu è la classe su cui sarà attivo l'effetto
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

I temi rilasciati su eleganthemes fanno abbondantemente uso di questo plugin e gli effetti sono piuttosto gradevoli. Credo proprio che mi divertirò nei prossimi giorni.. Conoscete altri script altrettanto versatili e pronti all’uso?

In particolare sono stati risolti alcuni piccoli bug:

• Visualizzazione widget
  aggiustata la visualizzazione dei titoli del widget rss e delle sottopagine/sottocategorie
• Navigazione tra i post precedente e successivo nella testata
  risolto un problema di visualizzazione dei titoli del post precedente e successivo dalla pagina di visualizzazione del singolo post

Per chi non vuole sovrascrivere il tema, perchè magari ha apportato modifiche, è possibile aggiornare sovrascrivendo alcune parti di CSS. Basta aprire il file style.css e fare le seguenti operazioni:

1. Le ultime righe vanno sostituite con le seguenti:
/*navigation*/
.navigation {
font-size: 95%;
height: 20px;
border-top: 1px solid #dadada;
border-bottom: 1px solid #dadada;
background: #f7f7f7;
margin: 0 15px 10px 0;
overflow: hidden;
}
.nav-header {
position: absolute;
top: 182px;
font-size: 95%;
background: transparent url(images/nav-bg.gif) no-repeat top center;
margin: 0;
overflow: hidden;
width: 810px;
height: 25px;
}
.nav-header .nav-sx, .nav-header .nav-dx {
background: transparent;
color: #fff;
padding: 2px 12px 0 12px;
width: 360px;
overflow: hidden;
height: 23px;
}
.nav-header .nav-sx a, .nav-header .nav-dx a {
color: #fff;
}
.nav-header .nav-dx {
text-align: right;
}
2. Le regole sulle classi .alignleft e .alignright (dalla riga 504 alla 509) vanno aggiornate copiando il seguente codice:
.alignleft, .float-left {
float: left;
}
.alignright, .float-right {
float: right;
}
3. Tra le “additional classes” (riga 534) bisogna aggiungere il codice seguente:
/* additional classes */
a.rsswidget img { border: none; padding: 0; margin: 0; }
Se avete bisogno di una mano per l’aggiornamento, non esitate a contattarmi. ;)

In attesa del prossimo tema.. che non vedo l’ora di poter concludere!

1. Accedere al server sul quale è installato sharepoint e posizionarsi nella cartella:
   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES
2. Copiare la cartella “Simple” e rinominare la cartella copiata a piacere, in questo caso la chiameremo “Miotema”
3. Nella cartella “Miotema” rinominare il file “SIMPLE.INF” in “MIOTEMA.INF”, tutto in caratteri maiuscoli.
4. Aprire il file “MIOTEMA.INF” con un editor di testo e sostituire tutte le occorrenze di “Simple” con il termine “Miotema”. Il risultato sarà come il seguente:
   

   [info]
   title=Miotema
   codepage=65001
   version=3.00
   format=3.00
   readonly=true
   refcount=0

   [titles]
   1031= Miotema
   1036= Miotema
   1040= Miotema
   …

5. Aprire con un editor di testo il file che si trova nella posizione:
   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPThemes.xml
6. Aggiungere all’interno del tag <SPThemes> le seguenti linee di codice:
   

   <Templates>
   <TemplateID>Miotema</TemplateID>
   <DisplayName> Miotema </DisplayName>
   <Description> Tema creato da me.</Description>
   <Thumbnail>images/thlmiotema.gif</Thumbnail>
   <Preview>images/thmiotema.gif</Preview>
   </Templates>

   NB: Ovviamente se vogliamo le preview bisognerà creare le immagini gif e inserirle nella cartella images del tema.

7. Per rendere visibile il tema nella lista di quelli disponibili sarà necessario fare un issreset (dal prompt di DOS: “iisreset /noforce”).

Ora il tema è caricato, per modificare colori e quant’altro bisognerà intervenire sul file css, che si trova alla posizione:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\MIOTEMA\theme.css
Ogni volta che si fanno delle modifiche è bene fare un iisreset e dalla mia esperienza è bene evitare di fare modifiche su temi che sono attualmente in uso su qualche sito sharepoint, altrimenti queste non vengono correttamente caricate al riavvio del server.

Se invece c’è bisogno di eseguire modifiche strutturali alle pagine, per rimuovere o aggiungere blocchi, sarà necessario fare ricorso a Sharepoint Designer tramite il quale si possono costruire o elaborare le master pages, accedendo al sito in questione.
Buona customizzazione! ;)

Come noto, un feed RSS è un documento XML. La formattazione è classica:

<?xml version=”1.0″ encoding=”UTF-8″?>
<rss version=”2.0″>
<channel>
<generator>NFE/1.0</generator>
<title>obama – Google News</title>
<link>http://news.google.it/news?hl=it&ned=it&q=obama&ie=UTF-8</link>
<language>it</language>
<webMaster>news-feedback@google.com</webMaster>
<copyright>©2008 Google</copyright>
<pubDate>Mon, 15 Dec 2008 14:34:32 GMT</pubDate>
<lastBuildDate>Mon, 15 Dec 2008 14:34:32 GMT</lastBuildDate>
<image>
<title>obama – Google News</title>
<url>http://news.google.com/intl/it_it/images/news_res.gif</url>
<link>http://news.google.it/</link>
</image>
<item>
<title>USA: OBAMA ANNUNCIA OGGI NOMINE ENERGIA E AMBIENTE – La Repubblica</title>
<link>http://news.google.it/news/url?sa=T&ct=it/0-0&fd=R&url=http://www.repubblica.it/news/ired/ultimora/esteri/rep_esteri_n_3455881.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNF0go8PkbUwHKLk9BaKdp8dFCS0hg</link>
<guid isPermaLink=”false”>tag:news.google.com,2005:cluster=http://www.repubblica.it/news/ired/ultimora/esteri/rep_esteri_n_3455881.html</guid>
<pubDate>Mon, 15 Dec 2008 07:37:02 GMT</pubDate>
<description><table border=0 width= valign=top cellpadding=2 cellspacing=7><tr><td width=80 align=center valign=top><font style=”font-size:85%;font-family:arial,sans-serif”><a  href=”http://news.google.it/news/url?sa=T&ct=it/0i-0&fd=R&url=http://www.instablog.org/ultime/35898.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNFqys_EXXw7Kh4xa96o32AB49JHvw”><img src=http://news.google.it/news?imgefp=ve3DuBkpQiwJ&imgurl=www.instablog.org/blogpress/art/ultimora/obama.jpg width=80 height=51 alt=”" border=1><br><font size=-2>The Instablog</font></a></font></td><td valign=top class=j><font style=”font-size:85%;font-family:arial,sans-serif”><br><div style=”padding-top:0.8em;”><img alt=”" height=”1″ width=”1″></div><div class=lh><a href=”http://news.google.it/news/url?sa=T&ct=it/0-0&fd=R&url=http://www.repubblica.it/news/ired/ultimora/esteri/rep_esteri_n_3455881.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNF0go8PkbUwHKLk9BaKdp8dFCS0hg”>USA: <b>OBAMA</b> ANNUNCIA OGGI NOMINE ENERGIA E AMBIENTE</a><br><font size=-1><font color=#6f6f6f>La Repubblica -</font> <nobr>6 ore fa</nobr></font><br><font size=-1>Il presidente eletto, Barack <b>Obama</b>, annuncera’ oggi le nomine del segretario al Dipartimento Energia e dello ‘zar’ per l’Ambiente. Gli annunci, che verranno <b>…</b></font><br><font size=-1><a href=”http://news.google.it/news/url?sa=T&ct=it/0-1&fd=R&url=http://notizie.alice.it/notizie/esteri/2008/12_dicembre/15/usa_obama_incontra_oggi_staff_difesa_e_annuncia_nomine_ambiente,17232675.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNHg4RwSRzsrR_uvMvcY3h-S38meRg”>Usa/ <b>Obama</b> incontra oggi staff difesa e annuncia nomine ambiente</a> <font size=-1 color=#6f6f6f><nobr>Virgilio Notizie</nobr></font></font><br><font size=-1><a href=”http://news.google.it/news/url?sa=T&ct=it/0-2&fd=R&url=http://www.agenziami.it/ultime/9415/USA%2BObama%2Bpronte%2Ble%2Bnomine%2Bper%2Bl%2Bambiente/&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNGniMEyAO4lJg5HiWJCKROXee8p_g”>USA. <b>Obama</b>, pronte le nomine per l’ambiente</a> <font size=-1 color=#6f6f6f><nobr>(ami) Agenzia Multimediale Italiana</nobr></font></font><br><font size=-1><a href=”http://news.google.it/news/url?sa=T&ct=it/0-3&fd=R&url=http://www.instablog.org/ultime/36309.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNF64d7ozOXQdd8tBoaRDHWfPlBfsg”><b>Obama</b>: nomine ambiente, oggi gli annunci ufficiali</a> <font size=-1 color=#6f6f6f><nobr>The Instablog</nobr></font></font><br><font class=p size=-1><a class=p href=http://news.google.it/news?hl=it&ned=it&ie=UTF-8&ncl=1263615727><nobr>e altri 4 articoli simili</nobr></a></font></div></font></td></tr></table></description>
</item>
[...]
</channel>
</rss>

Si può formattare a dovere con un po’ di XSL per pubblicare ad esempio i titoli, rendendoli cliccabili con un link diretto all’articolo (quello contenuto nel tag <link>).

<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
<xsl:template match=”/rss”>
<html>
<head>
<!–<link href=”style.css” rel=”stylesheet” type=”text/css” />–>

</head>
<body>
<div id=”logo” style=”border-bottom: 1px solid #ccc; margin-bottom: 5px; font-size: 1.2em; font-weight: bold;”>
<xsl:element name=”a”>
<xsl:attribute name=”href”>
<xsl:value-of select=”channel/link” />
</xsl:attribute>
<xsl:value-of select=”channel/title” />
</xsl:element>
</div>
<div class=”Snippet”>
<ul style=”list-style: none; margin: 0; padding:0″>
<xsl:for-each select=”channel/item”>
<li>
<xsl:element name=”a”>
<xsl:attribute name=”href”>
<xsl:value-of select=”link”/>
</xsl:attribute>
<xsl:value-of select=”title”/>
</xsl:element>
<br/>
<small style=”color: #ccc; text-align: right”><xsl:value-of select=”pubDate” /></small>
</li>
</xsl:for-each>
</ul>
</div>
<div id=”footer” style=”display: none;”>
<xsl:value-of select=”channel/copyright” />
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Per semplificare un po’ ho aggiunto qualche regola CSS direttamente in linea, ma nulla vieta di creare un foglio esterno (ho commentato la porzione di codice che richiamerebbe un foglio di stile).
L’unica vera scocciatura di Google News è che non offre un feed pulito, ma all’interno del tag <description> inserisce codice html e questo può dare problemi in fase di parsing XML.

Per chi volesse approfondire l’argomento un buon punto di partenza è questo. Buona lettura.

Quando si mette in pratica un’azione di redesign, si pensa anche alla riprogettazione strutturale delle categorie. Ultimamente sentivo sempre più forte l’esigenza di separare gli articoli “tecnici” (passatemi il termine) da quelli prettamente personali. I contenuti di un post sulle vacanze in irlanda sono decisamente diversi da quelli di un articolo sul knowledge management. E’ nell’utilità dei lettori far percepire questi articoli come diversi: una esigenza che deve necessariamente prendere forma nel design.

A parte la separazione dei feed (a cui sto lavorando), il primo passo è quello di differenziare visivamente questi contenuti. Ho quindi pensato di realizzare il calendarietto che solitamente sta a fianco del titolo in due versioni differenti: una classica e una in stile post-it.

Già con un primo colpo d’occhio sarà quindi intuibile il taglio dell’articolo (tecnico piuttosto che personale). I box grigi sotto il calendarietto servono a contenere i link all’articolo precedente e successivo.

Questo è lo screenshot di come appare una pagina di ricerca.

Per quanto riguarda il codice css e xhtml, lo riporto di seguito con commenti a lato.

Partiamo dall’xhtml:

<div class="data personale">
<span class="d">10</span> <span class="m">DIC</span>
<!--div che contiene i link agli articoli prec. e succ.-->
<div class="scroller">
<!--sui link l'attributo onclick richiama il javascript jquery-->
<a class="scroll-link scroll-up" href="#header" title="post precedente" onclick="$diplod('#header').ScrollTo(800); return false;">pre</a>
<a class="scroll-link scroll-down" href="#footer-wrap" title="post successivo" onclick="$diplod('#footer-wrap').ScrollTo(800); return false;">suc</a>
</div><!--fine div scroller-->
</div><!--fine div data-->


Ed ecco il CSS:

div.data {
float: left; /* la data fluttua a sinistra per lasciare spazio al titolo sulla destra */
clear: both;
width: 60px; /* stessa larghezza dell'immagine di sfondo*/
height: 70px;
margin: 0 5px 0 0;
text-align: center;
color: #666;
padding-bottom: 0;
background: transparent url(images/date.gif) no-repeat;
line-height: 1.3em;
}
div.personale { /*classe per riconoscere gli articoli di determinate categorie */
background: transparent url(images/date-personale.gif) no-repeat;
}
div.data span.d { /*stili per il giorno */
display: block;
height: 16px;
font-size: 150%;
font-weight: bold;
color: #666;
padding-top: 20px;
background: transparent;
}
div.data span.m { /*stili per il mese */
text-transform: uppercase;
font-size: 90%;
padding-top: 5px;
height: 15px;
}


Veniamo ora all’implementazione in wordpress, che forse è la cosa più interessante.

<?php $postcount=0; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $postcount=$postcount+1; ?>
<div id="scroll-<?php echo $postcount; ?>" class="data<?php if(in_category(260) || in_category(14) || in_category(1)) { echo(' personale'); } ?>"><span class="d"><?php the_time('j') ?></span> <span class="m"><?php the_time('M') ?></span>
<div class="scroller">
<?php if ($postcount!=1) { ?>
<a class="scroll-link scroll-up" href="#scroll-<?php echo ($postcount-1); ?>" title="post precedente" onclick="$diplod('#scroll-<?php echo ($postcount-1); ?>').ScrollTo(800); return false;">pre</a>
<?php } ?>
<?php if ($postcount!=5) { ?>
<a class="scroll-link scroll-down" href="#scroll-<?php echo ($postcount+1); ?>" title="post successivo" onclick="$diplod('#scroll-<?php echo ($postcount+1); ?>').ScrollTo(800); return false;">suc</a>
<?php } ?>
</div></div>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link a <?php the_title(); ?>"><?php the_title(); ?></a></h1>
[..]


Cosa fa il codice?

Con il tag di wordpress in_category() ci si chiede se il post appartiene a determinate categorie (in questo caso quelle con ID 1, 260 o 14), se è così si aggiunge la classe “personale” al div della data. A questo div viene assegnato poi un id univoco del tipo “scroll-2″, dove 2 è il valore del contatore $postcount, inizializzato a zero fuori dal loop e incrementato di una unità dentro al ciclo.

Gli if sui link servono per evitare di pubblicare il link “precedente” sul primo articolo o il link “successivo” sull’ultimo articolo. In questo caso ho scelto di pubblicare solo 5 articoli per pagina, quindi il controllo viene fatto su $postcount diverso da 1 e da 5.
Infine viene pubblicato il titolo del post con relativo link.

Veniamo ora al form dei commenti: volevo qualcosa di originale ma non troppo pacchiano. Qualcosa di insolito ma al tempo stesso funzionale. A parte le icone (classiche famfam), che ormai reputo insostituibili, ho pensato di mettere delle delicate sfumature sui campi di input. Che ne pensate? Sono aperte le critiche..

Questa è la demo con il risultato. (ma potete vederlo anche sotto)

Gli utenti non IE (Internet Explorer) potranno notare come selezionando il campo questo cambia colore sfumando verso il grigio.
Utilizzando una tecnica ormai nota detta CSS Fast Rollover, ho replicato l’effetto sui campi input del form. L’idea è semplicissima: mettere come background una immagine che contiene i diversi sfondi e cambiare la posizione dello sfondo con le pseudo classi css (:hover, :active). Nell’articolo di Wellstyled viene descritta la tecnica per i link, ma si può impiegare anche per la pseudo classe :focus degli elementi input del form.
Il vantaggio è che non viene caricata nessun’altra immagine quando si seleziona il campo di input, ma semplicemente viene traslata quella caricata in precedenza, in questo modo l’utente non avverte un tempo di attesa e l’efetto risultante è molto più fluido. Questo vale per i campi di input che hanno altezza fissa, mentre per la textarea è necessario caricare una seconda immagine e si avverte un leggero tempo di attesa.

Questa è l’immagine che ho utilizzato per il campo di input.

Si tratta di una immagine “doppia”. Sul :focus del campo input ho semplicemente cambiato le coordinate di posizionamento dello sfondo, traslando l’immagine di 30px. Ecco il codice css:

form.comment-form input {
padding: 5px;
margin: 0;
border: none;
background: #fff url(images/input-bg.gif) no-repeat top right; /*immagine allineata in alto */
}
form.comment-form input:focus, form.comment-form input:active {
background: #f1f9ff url(images/input-bg.gif) no-repeat bottom right; /*immagine allineata in basso*/
color: #333;
}


Unico neo: su Safari l’evidenziazione azzurrina dei campi attivi fa svanire l’effetto sfumatura, ma rende bene ugualmente.

PS: se sei arrivato fin qui a leggere, probabilmente non sei in vacanza. Un saluto dalla Sicilia (o da Pompei, Caserta, Orvieto.. non so bene dove si fermerà la macchina).. ;)

Resta sempre tutto liquido, ma i dettagli sono cambiati, chi ha l’occhio più abituato noterà le differenze.
A parte l’integrazione dei Gravatars, nei prossimi giorni illustrerò tecnicamente alcune soluzioni adottate, per continuare il lavoro iniziato a suo tempo.

Molti meno javascript inutili, per agevolare il caricamento, e una ristrutturazione del layout delle pagine singole. Anche la struttura resta simile, sia il CSS che l’XHTML sono stati riscritti da zero. Validazione W3C come garanzia e qualche bottoncino per l’accessibilità in alto a destra, anche se su quest’ultimo versante sono tante le cose che ancora devo migliorare.

Sempre nei prossimi giorni (mesi, ndr) tutti i template gratuiti per wordpress che ho rilasciato in passato verranno sistemati e aggiornati per la versione 2.6 secondo gli standard dettati dal team di wordpress, per poi essere pubblicati sul repository ufficiale dei temi. Tempo di rinnovamento.

NB: se in questi giorni incontrate qualche problemino nella navigazione segnalatelo nei commenti. I test che ho fatto sono tanti (FireFox, IE 7, Opera, Safari..) ma può sempre scappare qualcosina. Per quei testoni che ancora usano IE6, non resta che ricordare loro come fare.

Una piccola lista:

1. Thumbnail ridimensionabili con overflow: si tratta di una semplice tecnica che sfrutta la proprietà css overflow per allargare una miniatura di una immagine al passaggio del mouse sopra di essa.
   Esistono innumerevoli gallerie grafiche realizzate in javascript, ma stavolta non si tratta di javascript, nè di galleria. E’ un metodo decisamente semplice e accattivante per presentare una serie di immagini attraverso miniature. Credo proprio che lo userò per il portfolio.
2. Icone sui link esterni e sui file: la tecnica proposta da Alexander Kaiser affianca una piccola icona ai link che puntano a file sfruttando i selettori css; l’avevo già utilizzata a suo tempo per Nerino e potrebbe tornare utile.
   In pratica tutti i link a un file pdf vengono riconosciuti in questo modo:
   
a[href$='.pdf'] {
   padding-right: 18px;
   background: transparent url(icona_pdf.gif) no-repeat center right;
}

   Il simbolo $ permette di individuare se alla fine dell’attributo href dell’elemento a esiste la stringa .pdf. Ovviamente lo stesso principio si può estendere a tutti gli altri tipi di file nonchè a siti esterni, ad esempio utilizzando l’operatore ^ per riconoscere un link esterno (a patto che tutti i link interni abbiano indirizzo relativo):
   
a[href^='http'] {
   padding-right: 18px;
   background: transparent url(icona_esterna.gif) no-repeat center right;
}
3. Iniziare ad usare CSS3: è di oggi la segnalazione su edit dell’articolo di Eric Wendeling che spiega l’utilizzo dei selettori + e ~, ora supportati dai principali browser  di ultima generazione. Anche in questo caso, li utilizzerò nel nuovo design.
   Sempre a proposito di CSS3, c’è un interessante articolo dal titolo un po’ spavaldo: “Tomorrow’s CSS Today: 8 Tecniques they don’t want you to know“. Consiglio di dare un’occhiata per capire come si possono usare i nuovi costrutti.
4. Immagine di sfondo ridimensionabile: questo articolo affronta un problema all’apparenza banale e spiega come piazzare una immagine di sfondo in modo tale che questa si ridimensioni assieme alla finestra del browser. A parte le tecniche che sfruttano javascript, ce n’è una che si basa solo su CSS. Non mi convince a pieno, perchè utilizza un elemento img e in alcuni casi rende male su IE, ma può essere un buon punto di partenza e di certo una valida lettura.
5. Dare stile ai microformats con CSS: il microformat è un markup xhtml semantico, in grado di offrire quindi informazioni aggiuntive circa i dati che racchiude.
   Saranno utilizzati nella futura pagina contatti di questo blog (esistono anche comodi generatori di microformat, per chi fosse interessato); già da tempo qualcuno ha pensato di dargli stile via CSS, e qualcunaltro ha pensato di creare un template css con tutte le classi relative ai microformat, molto comodo per dare stile alle proprie carte di identità xhtml.
6. [update] Menu espandibili con CSS, e javascript per renderli usabili: creare menù di navigazione espandibili in solo css (sfruttando la proprietà :hover) è una soluzione perfetta in termini di accessibilità. Ma può risultare poco usabile: appena il mouse esce dall’area del link il sottomenù sparisce. Questa tecnica propone l’utilizzo di un javascript non intrusivo per ritardarne la scomparsa.

Conoscete altre chicche o finezze del caso?

Ci sarà il classico logo, una nuvoletta per i tag (i seguito capiremo il motivo di questa scelta), un box di destra per contenere l’icona dei feed, il link alla versione inglese e il box di ricerca; in angolo qualche utile tasto per il ridimensionamento del testo. diploD è nato liquido, e liquido deve restare. Per tradurre la bozza grafica in xhtml+css è quindi necessario spezzare l’immagine in tante sotto-immagini, da utilizzare come sfondo per i vari ‘div’ che andremo a creare. La tecnica è piuttosto banale, ma nel caso di un layout liquido è necessario fare qualche considerazione.
Update: Per chi è impaziente di vedere il risultato finale, eccolo qui.

Il box di destra, così come il menù, devono adattarsi alle dimensioni della pagina. Non è quindi possibile creare un’unica immagine di sfondo. Ho pensato di suddividere lo spazio in questo modo:

Ad ogni oggetto sono quindi state applicate come sfondo parti dell’immagine globale, che assieme rendono il tutto adattabile a diverse risoluzioni.

E’ il caso di fare qualche puntualizzazione:

1. Il logo è stata riprodotto utilizzando una tecnica di image replacement con css semplicissima. Il metodo è quello presentato da Jon Christopher: si tratta di rendere il testo dello stesso colore dello sfondo e impostare la larghezza del titolo in modo da tale da far apparire tutta l’immagine di sfondo. Quando è applicabile, è la tecnica che preferisco su tutte: non richiede nessun markup aggiuntivo e funziona anche per chi ha le immagini disabilitate.
   Guardando il codice qui sotto, si può vedere come il titolo h1 (e il relativo link) siano presenti nel markup, ma non appaiono come testo.
2. Ho scelto di inserire la nuvola dei tag nella testata perchè ritengo sia importante far percepire ai bot dei motori di ricerca qualche parola chiave ad inizio pagina. Non so bene quanto sarà proficua la scelta, ma voglio provare. Preferisco qualche parola scritta nel codice che in una immagine neutra.
3. Nel div “text-tools” di destra ho inserito i classici bottoni per il ridimensionamento del testo. Sono quei piccoli accorgimenti per facilitare la lettura e migliorare l’accessibilità del sito. Mancavano..

Ecco come si presenta il codice xhtml:


<div id="header">
<div id="header-content">
<h1 id="logo-text"><a href=#" title="home">diploD</a></h1>
<h2 id="slogan">by Davide Del Monte</h2>

<div id="nav">
<ul>
<li><a href="index.html">Archivio</a></li>
<li><a href="index.html">Contatti</a></li>
<li><a href="index.html">Servizi</a></li>
<li><a href="index.html">Foto</a></li>
<li><a href="index.html">Templates</a></li>
</ul>
</div>

<div id="header-tags">
<span class="tag1">Webdesign</span> <span class="tag4">reti</span> <span class="tag3">Ingegneria</span> <span class="tag2">Project Management</span> <span class="tag5">e-business</span> <span class="tag3">Ambiente</span> <span class="tag4">tecnologie</span> <span class="tag2">Web</span> <span class="tag5">Tortelli di Zucca</span>
</div>

<div id="header-right">
<div id="feed-icon"><a href="#" title="RSS Feed"><img src="images/feed.gif" class="no-format" alt="Feed" /></a></div>
<div id="feed-box">« <a href="#" title="RSS Feed">Segui questo blog via feed</a>.<br/><small>Non ti interessano articoli personali o non sai cosa sono i feed? <a href="#" title="come usare i feed di diploD">vedi qui</a></small> »</div>
<div id="english-flag"><a href="#" title="english info"><img class="no-format" src="images/english-flag.gif" alt="en"/></a></div>
<form action="#" method="get" class="searchform">
<input id="stringa" type="text" name="s" class="textbox" />
<input name="search" class="button" value="Cerca.." type="submit" />
</form>
</div>

<div id="text-tools">
<a href="#" title="aumenta dimensione del testo" onclick="changeFontSize(1);return false;"><img src="images/abigger.gif" alt="Text Bigger" class="no-format" /></a><a href="#" title="diminuisci dimensione del testo" onclick="changeFontSize(-1);return false;"><img src="images/asmaller.gif" alt="Text Smaller" class="no-format" /></a><br/>
<a href="#" title="resetta dimensione del testo" onclick="revertStyles(); return false;"><img src="images/areset.gif" alt="Reset" class="no-format" /></a>
</div>

</div></div>


Questo è inveceil codice css che regola i blocchi e gli elementi sopra. Come si nota ogni oggetto ha una immagine di sfondo diversa, che altro non è se non una porzione dell’immagine generale.
Le dimensioni dei testi sono espresse in px, il motivo è che in questo caso è necessario controllare al millimetro la disposizione del testo, soprattutto per quanto riguarda tag-cloud e titolo, perchè si tratta di ricomporre una testata grafica.


/* header */
#header {
height: 201px;
text-align: left;
background: #000 url(images/bg.gif) repeat-x top left;
}
#header-content {
position: relative;
margin: 0 auto;
padding: 0;
height: 201px;
background: transparent url(images/header-right-bg.gif) no-repeat top right;
overflow: hidden;
}
#header-content h1, #header-content h2 {
margin: 0;
padding: 0;
}
#header-content h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 10px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
letter-spacing: -1px;
text-decoration: none;
text-transform: uppercase;
text-align: right;
color: #272727;
background: transparent url(images/logo.gif) no-repeat top left;
width: 250px;
height: 150px;
/* posizione del titolo principale */
top: 0; left: 0;
}
#header-content h2#slogan {
position: absolute;
height: 25px;
font: bold 10px 'Trebuchet Ms', Sans-serif;
text-transform: none;
margin: 0; padding: 0;
color: #272727;
/* posizione dello slogan */
top: 15; left: 260px;
}
#header-tags {
position: absolute;
width: 200px;
height: 90px;
font: bold 12px 'Trebuchet Ms', Sans-serif;
text-transform: none;
margin: 0; padding: 30px 25px;
color: #968e81;
background: transparent url(images/header-tag-bg.gif) no-repeat top left;
overflow: hidden;
/* posizione dello slogan */
top: 0px; left: 30%;
}
#header-tags .tag1 { font-size: 18px; }
#header-tags .tag2 { font-size: 16px; }
#header-tags .tag3 { font-size: 14px; }
#header-tags .tag4 { font-size: 12px; }
#header-tags .tag5 { font-size: 10px; }
#header-tags .tag1:hover, #header-tags .tag2:hover, #header-tags .tag3:hover, #header-tags .tag4:hover, #header-tags .tag5:hover { color: #02AFE5; }
#header-right {
position: absolute;
width: 30%;
height: 120px;
font: bold 12px 'Trebuchet Ms', Sans-serif;
text-transform: none;
margin: 0; padding: 0;
background-color: #dedede;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
overflow: hidden;
/* posizione del box di destra */
top: 80px; right: 5%;
}
/* feed icon */
#feed-icon {
position: absolute;
background: transparent;
top: 5px;
left: 5px;
}
#feed-box {
position: absolute;
width: 60%;
height: 50px;
top: 10px;
left: 75px;
overflow: hidden;
}
/* text-tools e english flag*/
#text-tools {
position: absolute;
top: 158px;
right: 0.7%;
}
#english-flag {
position: absolute;
top: 0px;
right: 0px;
}
/* Navigation */
#nav {
position: absolute;
width: 70%;
height: 40px;
margin: 0 auto;
padding: 0;
overflow: hidden;
/*posizione del menu */
top: 157px; left: 5%;
}
#nav ul {
float: left;
list-style: none;
margin: 0; padding: 0;
text-align: center;
}
#nav ul li {
float: left;
margin: 0; padding: 0;
}
#nav ul li a {
display: block;
float: left;
width: auto;
margin: 0 3px;
padding: 8px 12px;
color: #333;
font: bold 14px "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
border: 1px solid #C3FE2E;
text-decoration: none;
font-variant: small-caps;
letter-spacing: 1px;
background: transparent url(images/nav-bg.gif) repeat-x bottom left;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #fff;
background: transparent url(images/nav-orange.png) repeat-x bottom left;
border: 1px solid #fff;
}


Per chi volesse approfondire la faccenda della suddivisione con photoshop dell’immagine principale, ecco il video che presenta tutte le immagine ricavate. Prendetelo come un esperimento, avevo voglia di fare qualche prova con gli screen cast. Il risultato può essere noioso (anzi forse lo è), ma si capisce bene come è stata suddivisa l’immagine in modo da rendere il caricamento veloce e la visualizzazione della pagina corretta. Buona visione.

Se poi qualcuno avesse suggerimenti o consigli, ben vengano.

UPDATE: nei commenti Angelo ha fatto notare che servirebbe una demo per vedere con mano come esce la pagina sul browser, così ho caricato tutto per renderlo visibile: ecco qui la demo.
Commenti e suggerimenti continuano ad essere ben accetti!

Form con CSS (e talvolta javascript) ne ho visti di tutti i tipi, ma non ho trovato nessuno che mi soddisfacesse in pieno.
Me ne serviva uno, così l’ho realizzato prendendo spunto qua e là. Il punto di partenza è l’articolo su A List Apart, per la costruzione di form accessibili e semanticamente corretti a livello di codice. Va bene essere pignoli, ma scomodare JQuery e avere qualche bug di visualizzazione su Mozilla mi sembra eccessivo (si veda a tal proposito lo stesso form su html.it). Preferisco la semplicità, pur rimandendo nella sfera del “semanticamente corretto” ed essere pienamente “acessibile”.

Vediamo subito il risultato, per poi analizzarlo in dettaglio.

Ci sono effetti sulle caselle di input che aiutano l’utente nella compilazione, rendendo verdi i bordi dei box, in caso di dati corretti, oppure rossi al contrario. Appaiono inoltre le istruzioni sulla destra che diventano visibili semplicemente sfruttando l’effetto “hover” sugli elementi della lista (cambiando il colore del testo da bianco a scuro). Tale tecnica è molto semplice, ma non è supportata da IE6: poco male, se pensiamo che comunque sono dati aggiuntivi e non fondamentali. Mentre chi non ha CSS e javascript attivi riesce in ogni caso a vederle.

La validazione è stata realizzata utilizzando l’utilissimo script Live Validation.

La resa cross-browser è buona, questo screenshot ad esempio rappresenta la pagina caricata sullo schermo di un palmare.

Anche senza CSS e javascript attivi il form risulta pienamente accessibile e di facile lettura. Ecco come appare a quegli utenti che non hanno nulla di attivo.

Il codice HTML

Prendendo spunto da A List Apart, il codice HTML non deve avere tabelle, ma la solita lista <ul> dove poi inseriremo i vari box di input.

Gli unici accorgimenti sono l’inserimento delle istruzioni all’interno di una classe “help” e la specifica della classe “option” per le etichette delle caselline da spuntare.


<form action="#">
<fieldset>
<legend>I campi marcati con * sono obbligatori</legend>
<ul>
<li>
<label>Nome*</label>
<span class="help">[Scrivi qui il tuo nome]</span>
<input name="ddnome" id="ddnome" value="" type="text" size="30" />
</li>
<li>
<label>Cognome*</label>
<span class="help">[Scrivi qui il tuo cognome]</span>
<input name="ddcognome" id="ddcognome" value="" type="text" size="30" />
</li>
<li>
<label>Indirizzo</label>
<span class="help">[Scrivi qui il tuo indirizzo]</span>
<input name="ddindirizzo" id="ddindirizzo" value="" type="text" size="30" />
</li>
<li>
<label>Città*</label>
<span class="help">[Scrivi qui la tua città]</span>
<input name="ddcitta" id="ddcitta" value="" type="text" size="30" />
</li>
<li>
<label>Provincia*</label>
<span class="help">[Scrivi qui la sigla della tua provincia]</span>
<input name="ddprovincia" id="ddprovincia" class="small-text" value="" type="text" size="2" />
</li>
<li>
<label>Email*</label>
<span class="help">[Scrivi qui la tua e-mail]</span>
<input name="ddemail" id="ddemail" value="" type="text" size="30" />
</li>
<li>
<label>Data di Nascita</label>
<span class="help">[Seleziona la tua data di nascita]</span>
<select id="dob-d"><option value="1">1</option><option value="2">2</option></select>
<select id="dob-m"><option value="1">Jan</option><option value="2">Feb</option></select>
<select id="dob-y"><option value="1980">1984</option><option value="1985">1985</option></select>
</li>
<li>
<label>Tuo commento</label>
<span class="help">[Scrivi qui un tuo commento]</span>
<textarea name="ddcommento" rows="5" cols="10"></textarea>
</li>
<li>
<label>Il tuo sesso?</label>
<span class="help">[Indica il tuo sesso]</span>
<label class="option"><input type="radio" name="ddsesso[key]" value="si" checked="checked" class="form-radio" />uomo</label>
<label class="option"><input type="radio" name="ddsesso[key]" value="no" class="form-radio" />donna</label>
</li>
<li>
<label class="option"><input name="ddcontratto" value="ok" type="checkbox" /> Ho letto tutti i contratti di questa terra</label>
</li>
</ul>
</fieldset>
<p><input class="button" type="submit" value="Invia Form"/></p>
</form>


Il codice CSS

Il CSS pesa in tutto 5Kb, compresa la parte per la struttura. Con una attenta formattazione si può migliorare di qualche Kb. Qui riporto solo la parte relativa al form vero e proprio.


form {
margin: 0 auto;
padding: 10px;
border: 1px solid #f3a251;
font: normal 1em Verdana, sans-serif;
background-color: #fff;
width: 800px;
text-align: left;
}
form ul {
background: transparent;
margin: 0;
padding: 0;
list-style: none;
}
form ul li {
margin: 0;
padding: .4em 0;
background: #fff;
color: #fff;
list-style: none;
font: normal 0.9em Verdana, sans-serif;
border-bottom: 1px solid #dadada;
}
form ul li:hover {
color: #333;
background: #eee;
}
form span.help {
float: right;
width: 29%;
}
fieldset {
margin: 0;
padding: 0;
border-top: 1px solid #dadada;
color: #777;
}
label {
display: block;
font-weight:bold;
margin: 0;
font: normal 1.5em Verdana, sans-serif;
color: #333;
width: auto;
}
label.option {
margin: .2em;
font: normal 1.2em/1.2em Verdana, sans-serif;
width: 60%;
}
input {
padding: .4em;
margin: 0;
border: 1px solid #dadada;
font: normal 1.5em Verdana, sans-serif;
color: #333;
background: #fafafa;
}
input.form-radio {
padding: 0;
margin: 0 .2em 0 0;
border: none;
}
textarea {
width: 66%;
padding: .4em;
font: normal 1.2em/1.2em Verdana, sans-serif;
border: 1px solid #dadada;
height: 10em;
display:block;
color:#333;
background: #fafafa;
}
textarea.small-textarea {
height: 3em;
}
select {
padding: .2em 0;
margin: 0;
border: 1px solid #dadada;
font: normal 1.5em Verdana, sans-serif;
color: #333;
background: #fafafa;
}
option {
display: block;
padding: .1em;
margin: 0;
font: normal 1em Verdana, sans-serif;
color: #333;
background: #fafafa;
}
input:focus, input:active, textarea:focus, textarea:active, select:focus, select:active {
border: 1px solid #f3a251;
background: #ffeddc;
}
input.button {
margin: .3em;
padding: .25em .3em;
border: 1px solid #f3a251;
background: #ffeddc;
font: normal 1.5em Verdana, sans-serif;
cursor: pointer;
}
input.button:hover {
background: #f3a251;
color: #fff;
}


Javascript per la validazione

La parte javascript è molto semplice, per crearla basta seguire la documentazione di LiveValidation. Tutte le validazioni avvengono dopo che l’utente ha abbandonato il box sul quale sta scrivendo. Questo è possibile specificando il parametro “onlyOnBlur: true”.

Per ogni singolo campo che deve essere validato viene costruito un oggetto LiveValidation() richiamandolo in base all’id.


<script type="text/javascript">
var valNome = new LiveValidation( 'ddnome', {onlyOnBlur: true, validMessage: "OK" } );
valNome.add( Validate.Presence, {failureMessage: "Devi inserire il nome"} );
var valCognome = new LiveValidation( 'ddcognome', {onlyOnBlur: true, validMessage: "OK" } );
valCognome.add( Validate.Presence, {failureMessage: "Devi inserire il cognome"} );
var valCitta = new LiveValidation( 'ddcitta', {onlyOnBlur: true, validMessage: "OK" } );
valCitta.add( Validate.Presence, {failureMessage: "Devi inserire una città"} );
var valProvincia = new LiveValidation( 'ddprovincia', {onlyOnBlur: true, validMessage: "OK" } );
valProvincia.add( Validate.Presence, {failureMessage: "Devi inserire la provincia"} );
valProvincia.add( Validate.Length, { minimum: 2, maximum: 4, tooShortMessage: "Almeno due caratteri", tooLongMessage: "Inserisci la sigla della provincia, al massimo 4 caratteri (ROMA)"} );
var valEmail = new LiveValidation( 'ddemail', {onlyOnBlur: true, validMessage: "OK" } );
valEmail.add( Validate.Presence, {failureMessage: "Lascia un indirizzo e-mail"} );
valEmail.add( Validate.Email, {failureMessage: "Indirizzo non valido"} );
</script>


Sia il codice CSS che quello HTML è validato W3C. Se vuoi scaricare l’esempio ecco il file zip, con licenza CC. Fammi sapere se apporti utili migliorie al codice o lo utilizzi per impieghi particolari.

Sportemplate è un tema per wordpress indirizzato a coloro con hanno un blog che tratta di sport, siano questi semplici appassionati o vere e proprie società sportive. Dalla pallavolo alla pallacanestro, dal calcio all’atletica.

Ma c’è anche una versione per il semplice blog, se ti piace il design ma non non vuoi avere lo sportivo che salta, c’è pure la versione con la classica matita.

Download e demo

Download di Sportemplate per WordPress (versione 1.5)

Per vederlo in opera potete visitare il sito del Basket Rubiera (amata squadra locale) oppure dare un occhiata alla demo online.

E’ disponibile anche la versione senza pannello di amministrazione. Sportemplate utilizza il noto toolkit open source per temi wordpress, tuttavia qualcuno ha segnalato problemi con l’editor di scrittura avanzato, per questo metto a disposizione una versione di Sportemplate senza pannello di amministrazione, tutte le personalizzazioni sono comunque effettuabili intervenendo direttamente sul file header.php (vedi istruzioni sotto).

Download di Sportemplate per WordPress (versione 1.5 senza pannello di amministrazione)

Installazione e attivazione

La procedura è sempre la solita. Si scariza il file zip e si decomprime la cartella /sportemplate/ all’interno della cartella che contiene i templates di wordpress: wp-content/themes/
Nulla di complicato.

Per attivare il tema, dal pannello di amministrazione di wordpress andare su ‘Design’ e scegliere Sport Template come tema di base.

Una volta attivato il tema, andare in ‘Design’->’Sport Template’. Questo è il pannello di amministrazione del tema, da qui si possono impostare tutte le opzioni di visualizzazione.
Chi ha scaricato la versione senza pannello può configurare le stesse cose aprendo direttamente il file header.php con un editor di testo (ad esempio notepad). Nelle prime righe del codice ci sono le istruzioni per personalizzare il tema, è sufficiente cambiare valore a qualche variabile.

Personalizzazione della testata

Per impostare la testata desiderata basta accedere al pannello di amministrazione e scegliere dal menù quella desiderata.

Ecco come appare il pannello di amministrazione del tema:

Ecco una carrellata delle diverse testate disponibili, è possibile adattare questo template a svariate esigenze:

• Blog Normale
  
• Basket
  
• Calcio
  
• Corsa
  
• Fitness
  
• Hockey
  
• Rugby
  
• Tennis
  
• Volley
  

Personalizzazione della sidebar

Il tema è widget ready, questo significa che la sidebar è completamente configurabile senza mettere mano al codice. Puoi scegliere inoltre se pubblicare in alto alla sidebar le notizie provenienti da una singola categoria, ad esempio gli ultimi risultati dal campo o le pagelle del santone. Nel pannello di amministrazione del tema devi attivare questa funzionalità e specificare:

• ID categoria: è un numero che identifica la singola categoria. Lo trovi nel link alla categoria dal pannello di amministrazione wordpress: ‘Gestione’->’Categorie’. Passando il mouse sui nomi delle categorie in basso nella barra del browser appare un link che termina con un numero, quello è l’ID. Vedi l’immagine sotto per capire meglio.
  
• Titolo da visualizzare nella sidebar: puoi scegliere il titolo da mostrare nella barra laterale, ad esempio “Ultime dal campo”
• Numero di notizie da pubblicare: puoi scegliere quante notizie far apparire in sidebar.

Extra e Licenza

Una delle peculiarità di questo tema è l’utilizzo di un foglio di stile esterno con alcune regole CSS 3 per ottenere i bordi arrotondati sui box di articoli e commenti, oltre alla selezione del testo rossa. Le tecniche utilizzate sono quelle illustrate molto bene da Alessandro Fulciniti in un articolo su html.it

Il tema è stato testato sui più diffusi browser: Firefox, IE, Opera, Safari, Chrome. Ovviamente il tema è validato W3C ed è rilasciato sotto licenza Creative Commons 2.5.

English? Go here..

Ecco qui.. Le web TV ormai imperversano, tutti a dire che il futuro è quello, che pubblicare i propri video è molto cool! Non saprei dire se le notizie debbano per forza provenire dal basso (forse no), ma perché non rilasciare un template? Eccolo.

Un template libero: scaricatelo, modificatelo, utilizzatelo. Ma abbiate cura di lasciare il link a diploD. E’ pensato per la classica tv on-line.
Cosa c’è di bello?

• La navigazione a tab tramite javascript (simil ajax, ma non proprio..)
• Le finestre fluttuanti realizzate con jQyery ed Interface, una per il video e una per la chat.
• Un box pensato per la pubblicità (quale tv non ne ha? Potete comunque levarlo in un attimo se non ve ne frega un accidente)
• Lo spazio per il codice da embeddare sul proprio sito
• Predisposizione per i più comuni tag html: form, code, blockquote, ecc..
• Dei bellissimi box laterali dove mettere ciò che vi pare
• XHTML Strict, CSS Valid
• Compatibilità coi più diffusi browser, testato su FireFox, IE, Opera; non dovrebbero esserci problemi nemmeno con Safari

Qual è il fattore in più? Le finestre Jquery. Attivando il video in una di queste finestre, l’utente può contemporaneamente vedere la diretta e navigare il sito con i tab, oltre ad aprire e imbustare la chat.
Provatelo, è molto più semplice vedere che spiegare.

Download Web TV Template (Open and Free Internet Television Design)

English

Here we are.. Internet television are the next revolution! I don’t know if news should be reported by the mass (maybe not), but I realized a template for web tv. Try it. Why not?

It’s a free template: download it, modify it, use it. But please don’t remove the link to this site, diploD. This is a layout for a standard web television.
What’s cool?
· Tab navigation whit a simple javascript (ajax like)
· Floating windows, thanks to JQuery and Interface. One window for video, one for chat.
· A box for ads (who don’t have ads? But you can remove it if you want)
· Space for “embed” code
· Support for common html tags: form, code, blockquote..
· Nice sidebar boxes
· XHTML Strict, CSS Valid
· Cross browser compatibility, tested with FireFox, IE, Opera; should work also whit Safari

JQuery windows are the best way to show your videos and your chat. The users can follow your programs on live tv and visit your site.
Open the demo to see the design in action.

Download Web TV Template (Open and Free Internet Television Design)

PS: sorry for my English :P
The video you can see in the demo is a compilation of Parmigiano Reggiano’s spots. Parmigiano Reggiano is a wonderfull italian cheese, it’s art. :)

Prima o poi doveva succedere: a Settembre si riparte, qualcuno decide di aprire un nuovo blog e qualcun altro di cambiare template. Ecco a voi Nerino 1.0, un nuovo tema per WordPress creato dal sottoscritto e rilasciato liberamente. Il nome in onore di un gattino che mi ha conquistato.

Fatene ciò che volete, instalatelo, provatelo, testatelo, modificatelo.. ma per favore lasciate sempre un link al mio sito. Se volete una versione personalizzata invece contattatemi.

Presentiamolo

Nerino è un semplice tema a due colonne, con la sidebar laterale e un footer popolato dagli ultimi articoli e dal blogroll. Il tema è widget ready, questo significa che se utilizzate i widget sul vostro blog potete personalizzare la sidebar direttamente dal pannello di amministrazione di WordPress.
L’impostazione cromatica gioca su blu, rosso e arancio. Non escludo che in futuro possano uscire altre versioni, se vi interessa fatene pure richiesta.

Le peculiarità di Nerino sono:

• Alcuni semplici pulsanti che tramite javascript modificano la dimensione del testo, per agevolare la lettura agli utenti con difficoltà nella vista
  
• Un menù che utilizza le gif animate per rendere un semplice effetto di movimento (ormai mi sono lanciato con le gif animate!)
  
• Il form dei commenti, ne vado troppo orgoglioso :)
  

A parte tutto, ecco alcune schermate dalle quali potete avere un colpo d’occhio su come si presenta il layout, si tratta dell’home page e di un post singolo con relativi commenti.

Se volete testarlo live lo potete vedere all’opera su DireFareComunicare, il blog di un amico sul quale l’ho installato (e per il quale è nato).

E adesso non vi resta che scaricarlo e iniziare ad utilizzarlo!

UPDATE: Nerino è giunto alla versione 2.0, vedi le novità e scarica la nuova versione!

Se invece desideri scaricare la vecchia versione:
Clicca qui per il download di Nerino 1.0

L’installazione è semplicissima, scompattate la cartella contenuta dentro allo zip nella cartella dei temi di wordpress: /wp-content/themes/nerino10
Andate nel pannello di amministrazione, clic su ‘Aspetto’, da qui sarà possibile selezionare Nerino come tema predefinito. Se volete gestire la sidebar tramite i widget, dopo aver installato il plugin di Automattic, basterà cliccare su ‘Sidebar Widgets’.

Il tema è stato testato e reso funzionante su FireFox 1.5, FireFox 2, IE7 e Opera (presumibilmente nemmeno Safari dovrebbe dare problemi). IE6 che fine ha fatto? Su IE6 Nerino funziona, ma ha qualche leggero difetto. Siccome il browser è vecchiotto, è ora di aggiornarsi! Le mie ore di sonno sono più importanti.. Il codice CSS e XHTML è validato W3C.
Si accettano di buon grado consigli, suggerimenti e feedback di ogni genere..

NB: WordPress theme Nerino in english? Stay tuned!

Che diavolo è?

Provate a cliccare sul bottocino “che diavolo?” in alto a questa pagina e capirete in un attimo. Si tratta di un piccolo box CSS scorrevole, all’interno del quale si può far apparire tutto ciò che ci pare..
Dopo avdd-welcome-ita.ziper scaricato il plugin e fatto l’upload dei files ‘dd-welcome.php’ e ‘dd-bg.gif’ all’interno della solita cartella ‘wp-content/plugins/’, apparirà nel menù ‘Opzioni’ un comodo pannello di amministrazione dal quale è possibile configurare il box scorrevole.

SCARICALO QUI..

A cosa serve?

Bella domanda, in teoria per avere un box figo dove poter inserire le solite informazioni su chi siamo, cosa facciamo, da dove veniamo e dove vogliamo arrivare. In pratica potete metterci ciò che meglio credete, anche gli ultimi libri letti..

Dal ‘Welcome Manager’, senza toccare il codice del nostro template, potremo impostare:

1. Il testo da far apparire all’interno del box, nel quale si possono utilizzare anche i più comuni tag HTML per fare link o inserire immagini
2. Il testo da far apparire sul bottoncino
3. Il colore di sfondo
4. Una eventuale immagine di sfondo
5. Il colore del testo
6. L’altezza in pixel del box scorrevole
7. L’allineamento del bottone (destra o sinistra)
8. Il margine dal bordo della pagina
9. La posizione del bottone (fissa o scorrevole con la pagina)

Queste sono tutto proprietà CSS regolabili senza intervenire sul codice. Vi ricorda nulla? Ma certo, il celeberrimo e decantato plugin di Francesco Fullone FCC Ribbon Manager, da quale ho preso spunto e che ringrazio.

NB: se impostate l’altezza del box a ’100%’ potrete avere una bellissima pagina nascosta, dove ad esempio si potrebbe mettere il portfolio personale.. o amenità varie.

Javascript?

Ovviamente si. Questo plugin utilizza il solito scriptaculous.. Perchè questo e non Mootools? Semplicemente perchè dalla versione 2.qualcosa di wordpress esso è incluso direttamente tra i file del programma, così la pagina si dovrebbe caricare più velocemente.
Se per caso avete una versione vecchiotta di WP e non è presente scriptaculous, potete scaricare questo zip e mettere la cartella ‘/scriptaculous/’ sul vostro server, dentro a ‘/wp-includes/js/’. Il percorso sarà quindi ‘/wp-includes/js/scriptaculous/’.

Se avete idee o suggerimenti.. scrivete pure due righe.

What’s?

Click on the button “che diavolo?” at the top of this page and you can see. It’s a little CSS sliding box, where you can insert what you prefer..
Download the plugin files and upload ‘dd-welcome.php’ and ‘dd-bg.gif’ on your server folder ‘wp-content/plugins/’, then in the Option Menu you find the ‘Welcome Manager’ where you can set your sliding box.

DOWNLOAD HERE..

Ok, but how can I use it?

It’s a good question. You have a cool box to insert the classic info text or whatever you want: portfolio, last purchases, last read books, and so on..

In the Welcome Manager, without touching the code, you can set:

1. The text that will appear in the sliding box, it supports common HTML tag to link or insert images
2. The text that will appear in the button
3. The background color
4. An opzional background image
5. The text color
6. Box height (in pixel)
7. Button align (left or right)
8. Button margin (in pixel, % or em..)
9. Button position (fixed or absolute)

NB: if you set up the height to 100%, you have a cool hidden page on your blog..

Javascript?

Obviously.. This plugin uses the classic scriptaculous. Why this and not Mootools? Simply because from the 2.1 version of wordpress it is included directly in the /wp-includes/ folder, therefore the page would have to be loaded fastly.
If you have an old version or is not present scriptaculous, you can download this zip and put the folder “/scriptaculous/” on your server, in “/wp-includes/js/”. The path will be “/wp-includes/js/scriptaculous/”.

If you have ideas or suggestions, please drop me two lines.

Impostare uno sfondo ad un oggetto quando il mouse scorre su un’altro oggetto

Può capitare, per esigenze estetiche, di aver bisogno che quando l’utente passa il mouse sopra ad un box venga cambiato lo sfondo ad un altro box. In una sorta di fanta-css sarebbe:

#div1 {
background: url(img1.gif) center;
}
#div2 {
background: url(img2.gif) center;
}
#div1:hover {
#div2-background: url(img1.gif);
}

E’ una soluzione che può tornare utile in certi casi, e ho preparato qualche esempio. Potete tranquillamente scaricarli e utilizzarli come volete, magari correggerli e migliorarli pure. Questo è il link al file zip con i tre gli esempi presentati in seguito.
Sono stati testati su IE 6 e 7, Opera, FireFox. Tutto il codice, CSS e XHTML, è stato validato secondo gli standard del W3C. Faccio notare come tutti gli esempi siano correttamente e degnamente visualizzati anche da utenti con javascript disabilitati.

Esempio 1: menu con css e javascript che spegne tutte le voci tranne quella selezionata col mouse

Da questa pagina si può vedere l’esempio. L’immagine utilizzata per le tab è una sola, viene caricata secondo la tecnica dello slittamento dell’immagine di sfondo.

Sintassi HTML:


<ul id="menu">
<li id="current"><a xhref="http://www.diplod.it/index.html" mce_href="http://www.diplod.it/index.html" >Home</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Dove Siamo</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Cosa Facciamo</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Contatti</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Dicono di Noi</a></li>
</ul>

Il codice css:

/*menu tabs*/
#menu {
margin: 80px auto 0 auto;
padding: 0;
height: 30px;
width: 880px;
list-style: none;
border-bottom: 5px solid #7ce41d;
font: bold 13px/30px Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif;
}
#menu li {
display: inline;
margin: 0;
padding: 0;
}
#menu li a {
height: 30px;
width: 140px;
float: left;
background: url(tab.gif) no-repeat center top;
margin: 0;
padding: 0;
text-decoration: none;
color: #333;
}
#menu li a:hover {
color: #336633;
background: url(tab.gif) no-repeat center top !important;
}

Il codice javascript (esterno alla pagina):

function cambiaSfondo(hover) { //cambia lo sfondo a tutte le altre tab
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
for (var j = 0; j < lis.length; j++) {
var a = lis[j].getElementsByTagName('a');
a[0].style.backgroundPosition ='0 -30px';
}
}
function ripristinaSfondo(hover) { //cambia lo sfondo a tutte le altre tab
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
for (var j = 0; j < lis.length; j++) {
var a = lis[j].getElementsByTagName('a');
a[0].style.backgroundPosition ='0 0';
}
}
//Events
function addEvent(elm, evType, fn) {
// cross-browser event handling
if(elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
}
else {
elm['on'+evType] = fn
}
}
function addListeners(e) {
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
for (var j = 0; j < lis.length; j++) {
var a = lis[j].getElementsByTagName('a');
addEvent(a[0],'mouseover',cambiaSfondo);
addEvent(a[0],'mouseout',ripristinaSfondo);
}
}
//Aggiungi gli ascoltatori degli eventi quando si carica la pagina
addEvent(window,'load',addListeners);

Esempio 2: Sfondo alternato su un unico bottone diviso in due

Da questa pagina si può vedere l’esempio. In questo caso l’immagine utlizzata è decisamente pià grande (e pesante), ma in questo modo si evita che l’utente percepisca il vuoto mentre l’immagine si carica al passaggio del mouse. Lo sfondo è relativo al box esterno che contiene i due interni (destro e sinistro) entrambi con sfondo trasparente.

Sintassi HTML:


<div id=bigbutton" >
<div id="bbleft">
<h1><a xhref="" mce_href="" >Pulsante Sinistro</a></h1>
<h2 class="on-air">Passa il mouse qui sopra</h2>
</div>
<div id="bbright">
<h1><a xhref="" mce_href="" >Pulsante Destro</a></h1>
<h2>Oppure qui sopra..</h2>
</div>
</div>


Il codice css:
Una piccola nota: il lampeggiamento del titoletto di sinistra non è opera del javascript, ma della dichiarazione css “text-decoration: blink”.

/*big-button*/
#bigbutton {
height: 130px;
width: 880px;
margin: 100px auto 0 auto;
padding: 0px;
background: transparent url(big-button-bg.gif) no-repeat center top;
}
#bbleft {
width: 420px;
margin: 0;
padding: 0;
display: inline;
float: left;
cursor: pointer;
}
#bbright {
width: 420px;
padding: 0;
margin: 0;
float: right;
display: inline;
cursor: pointer;
}
#bigbutton h1 {
font: 2em/90px Verdana, Arial, sans-serif;
letter-spacing: -3px;
font-weight: bold;
text-align: center;
margin: 0 auto;
padding: 0px;
}
#bigbutton a, #bigbutton a:hover {
color: #333;
text-decoration: none;
outline: none; /* hide dotted outline */
}
#bigbutton h2 {
font: 1.2em/20px Verdana, Arial, sans-serif;
text-align: center;
margin: 0 auto;
padding: 0px;
color: #555;
text-transform:uppercase;
}
#bigbutton h2.on-air {
text-decoration: blink;
}

Il codice javascript (esterno alla pagina):

function avvertisx() {
alert('Hai cliccato sul pulsante di sinistra!');
}
function avvertidx() {
alert('Hai cliccato sul pulsante di destra!');
}
function sfondosx() { //imposta lo sfondo quando si passa il mouse sul pulsante di sinistra
var bigbutton = document.getElementById('bigbutton');
bigbutton.style.backgroundPosition ='0 -130px';
}
function sfondodx() { //imposta lo sfondo quando si passa il mouse sul pulsante di destra
var bigbutton = document.getElementById('bigbutton');
bigbutton.style.backgroundPosition ='0 -260px';
}
function ripristinaSfondo() { //ripristina lo sfondo normale
var bigbutton = document.getElementById('bigbutton');
bigbutton.style.backgroundPosition ='0 0';
}
//Events
function addEvent(elm, evType, fn) {
// cross-browser event handling
if(elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
}
else {
elm['on'+evType] = fn
}
}
function addListeners(e) {
var bbleft = document.getElementById('bbleft');
var bbright = document.getElementById('bbright');
addEvent(bbleft,'click',avvertisx);
addEvent(bbleft,'mouseover',sfondosx);
addEvent(bbleft,'mouseout',ripristinaSfondo);
addEvent(bbright,'click',avvertidx);
addEvent(bbright,'mouseover',sfondodx);
addEvent(bbright,'mouseout',ripristinaSfondo);
}
//Aggiungi gli ascoltatori degli eventi quando si carica la pagina
addEvent(window,'load',addListeners);

Esempio 3: Sfondo alternato su due div separati

Da questa pagina si può vedere l’esempio. In questo caso si utilizza un’immagine diversa per ogni blocco, che viene fatta slittare al passaggio del mouse su uno di essi.

Sintassi HTML:


<div id="bbleft">
<h1><a xhref="" mce_href="" >Pulsante Sinistro</a></h1>
<h2 class="on-air">Passa il mouse qui sopra</h2>
</div>
<div id="bbright">
<h1><a xhref="" mce_href="" >Pulsante Destro</a></h1>
<h2>Oppure qui sopra..</h2>
</div>


Il codice css:
Nota: in questo caso i box sono posizionati in maniera assoluta, ma è possibile utilizzare qualsiasi elemento purchè esso venga identificato con un ID. Penso solo a un effetto di sfumatura su un box all’interno del quale sono presenti link nei paragrafi di testo. Credo possa essere interessante, soprattutto se consideriamo il fatto che questa soluzione non va a ledere in nessun modo gli utenti con javascript disabilitato.
/*divs*/
#bbleft {
width: 380px;
height: 130px;
margin: 0;
padding: 0;
display: inline;
cursor: pointer;
background: transparent url(bbleft.gif) no-repeat center top;
position: absolute;
top: 40px; left: 100px;
}
#bbright {
width: 380px;
height: 130px;
padding: 0;
margin: 0;
display: inline;
cursor: pointer;
background: transparent url(bbright.gif) no-repeat center top;
position: absolute;
top: 200px; right: 200px;
}
#bbleft h1, #bbright h1 {
font: 2em/90px Verdana, Arial, sans-serif;
letter-spacing: -3px;
font-weight: bold;
text-align: center;
margin: 0 auto;
padding: 0px;
}
#bbleft a, #bbleft a:hover, #bbright a, #bbright a:hover {
color: #333;
text-decoration: none;
outline: none; /* hide dotted outline*/
}
#bbleft h2, #bbright h2 {
font: 1.2em/20px Verdana, Arial, sans-serif;
text-align: center;
margin: 0 auto;
padding: 0px;
color: #555;
text-transform:uppercase;
}
#bbleft h2.on-air {
text-decoration: blink;
}

Il codice javascript (esterno alla pagina):

function avvertisx() {
alert('Hai cliccato sul pulsante di sinistra!');
}
function avvertidx() {
alert('Hai cliccato sul pulsante di destra!');
}
function sfondosx() { //imposta lo sfondo a destra quando si passa il mouse sul pulsante di sinistra
var bbright = document.getElementById('bbright');
bbright.style.backgroundPosition ='0 -130px';
}
function sfondodx() { //imposta lo sfondo a sinistra quando si passa il mouse sul pulsante di destra
var bbleft = document.getElementById('bbleft');
bbleft.style.backgroundPosition ='0 -130px';
}
function ripristinaSfondosx() { //ripristina lo sfondo normale a destra
var bbright = document.getElementById('bbright');
bbright.style.backgroundPosition ='0 0';
}
function ripristinaSfondodx() { //ripristina lo sfondo normale a sinistra
var bbleft = document.getElementById('bbleft');
bbleft.style.backgroundPosition ='0 0';
}
//Events
function addEvent(elm, evType, fn) {
// cross-browser event handling
if(elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
}
else {
elm['on'+evType] = fn
}
}
function addListeners(e) {
var bbleft = document.getElementById('bbleft');
var bbright = document.getElementById('bbright');
addEvent(bbleft,'click',avvertisx);
addEvent(bbleft,'mouseover',sfondosx);
addEvent(bbleft,'mouseout',ripristinaSfondosx);
addEvent(bbright,'click',avvertidx);
addEvent(bbright,'mouseover',sfondodx);
addEvent(bbright,'mouseout',ripristinaSfondodx);
}
//Aggiungi gli ascoltatori degli eventi quando si carica la pagina
addEvent(window,'load',addListeners);
Se avete problemi ad utilizzare questi esempi o volete capire come personalizzarli non esitate a fare domande.. Alla prossima.

Il sito è composto da una sola pagina, dove si possono impostare i parametri e i colori per poi generare una immagine png. La qualità è piuttosto buona, anche se personalmente preferisco creare questo genere di cose in autonomia col mio programma di grafica preferito.
In ogni caso non sempre è facile creare texture ripetibili e sfumature, in questo modo potremo velocizzarne la creazione.
A tal proposito segnalo anche il brevissimo tutorial di Deziner Folio per la creazione con Photoshop di questo tipo di cose.

Una piccola critica: il sottotitolo stona un pochetto.. L’avevo detto anche in altre occasioni, il web 2.0 non sono solo angoli arrotondati, trasparenze e linee oblique. Ma tant’è: beta.

Finchè ci siamo, segnaliamo anche qualche tecnica per gli angoli arrotondati, così abbiamo fatto 100.
Sempre di italianità si tratta, ecco l’ottimo articolo di Alessandro Fulciniti sui Nifty Corners (una particolare tecnica che lavora senza immagini); mentre qualcun altro ha pensato bene di mettere in piedi un generatore automatico.

Un altro tool per la generazione di angoli arrotondati è Cornershop (in questo caso si utilizzano le immagini), giusto per citare i due più noti e qualitativamente accettabili.
Possono essere dei comodi strumenti per testare velocemente alcune idee e metterle in pratica senza troppa fatica.

Per un giorno diploD si sveste, e mostra a tutti il suo ‘body‘
Oggi, 5 di Aprile, è il CSS Naked Day, ovvero il giorno in cui un sacco di siti disattiveranno i loro fogli di stile CSS e mostreranno la struttura delle pagine nuda e cruda, senza la classica veste fatta da immagini e colori. L’idea è semplice e banale: l’obiettivo è promuovere i Web Standards, il corretto uso dell’(x)html, una buona struttura gerarchica, markup semantico..
Sono arrivato un po’ tardi, perchè la notizia l’ho appresa solo oggi (grazie a samu, tra gli altri hanno partecipato anche SenzaStile, CreativeBits..). Ma non potevo lasciarla passare inosservata.. anche perchè diploD senza abiti non è poi così male. :)

IL GIORNO DOPO

Si torna ai vestiti di tutti i giorni, per la cronaca ecco come appariva diploD senza CSS.

Ho scaricato una miriade di template open source e li ho testati in locale uno ad uno, la maggior parte utilizza una tabellona a tutta pagina come base del layout; altri implementano soluzioni più eleganti, con uno schema impostato sui “div” facilmente gestibili da css. Ho impostato il mio lavoro a partire da uno di questi, ma non posso sfuggire alla tabella delle ultime notizie in home page.. A quanto pare è un problema che hanno avuto anche altri, e dovrebbe essere risolto con le prossime release di Joomla (il ramo 1.5), intanto però ci si adatta.
Joomla è stato recentemente premiato come miglior CMS, devo ammettere che il pannello di amministrazione e la gestione dei contenuti sono davvero eccezionali, ma l’impressione che ho avuto con lo sviluppo del template è che siamo anni luce indietro rispetto a WordPress. Scrodatevi le funzioni richiamabili quà e là, le personalizzazioni fino all’osso: il sito classico in Joomla è piuttosto rigido.

Tengo a precisare: sto facendo un paragone con WordPress, ma questo è da intendersi solo relativamente alla questione dello sviluppo di un template. I due sistemi, entrambi open source, non sono confrontabili tra loro in senso lato, in quanto svolgono due funzioni diverse. WordPress è una piattaforma di blogging, Joomla è un CMS completo che tra le altre cose prevede anche la registrazione degli utenti. Se dobbiamo scegliere uno strumento sul quale costruire il nostro sito, non basiamoci soltanto sul sistema template..

C’è poi un’altra faccenda che mi sta particolarmente a cuore. Il sito ufficiale di Joomla (in inglese) non ha una sezione che raccoglie tutti i template liberamente scaricabili. Anche qui il parallelismo con WordPress balza subito in testa, non esiste infatti un equivalente delll’insuperabile ThemeViewer. Una nota di merito va invece alla comunità italiana, che tiene in archivio il Calderone dei Template, dove è possibile visionare e scaricare i lavori, ma senza poterli filtrare come avviene su TW.
Quando si va alla ricerca di temi per Joomla quindi si ricorre a Google, ed è triste notare come ci sia una vera e propria anarchia, con una miriade di finti siti che dichiarano di offrire template free e poi invece ti propinano template-pro a pagamento o impongono la registrazione per poter scaricare gli zip. Una cosa che mi ha lasciato particolarmente perplesso è il tutorial per creare un template w3c valid per joomla. Se cercate su Google la stringa “joomla w3c valid template” appaiono solo link che rimandano al tutorial di Compassdesigns. Il tutorial non è poi così ben curato, per questo non vi metto nemmo il link. Due commenti su tutti:

Nice tutorial, but all of the tags in your code are missing the closing ‘>’
Fairly annoying and unintuitive.

Standards?
This page itself does not validate. Is this the best Joomla can do?

E poi: non si poteva distribuire lo zip contenente i file normalemente? Non si capisce dove si possa scaricare, e pare che lo si possa fare solo registrandosi..

Ho citato questo sito solo per trarre le mie conclusioni: le basi sono buone, Joomla è un CMS davvero user-friendly nella gestione dei contenuti e degli utenti, ma deve ancora migliorare per quanto riguarda lo sviluppo dei template. Fermo restando che la personalizzazione del layout è sempre possibile, così come la validazione W3C. Ormai però non si può più considerare un pargoletto, è sulla scena da più di un anno e la vittoria del premio come miglior CMS lo ha consacrato come esempio da imitare, allora avanti con lo sviluppo.

AGGIORNAMENTO: ho rilasciato un template gratuito per joomla, validato W3C e senza tabelle (almeno per quanto riguarda il codice scritto da me, e non quello prodotto da joomla).
Da qui potete scaricarlo e vedere l’anteprima.

Margini mangiati

Il problema è davvero particolare. Consideriamo un box con il seguente codice css:

blockquote {
margin: 15px 30px 0 10px;
padding: 2px 6px 2px 20px;
border-left: 5px solid #F8BF24;
background: #FFF6D9 url('images/quote.gif') no-repeat top left;
}

Su Firefox e Opera nessun problema, su Internet Explorer invece l’immagine di sfondo allineata a sinistra va in conflitto con il margine sinistro e si sovrappone ad esso. Tutto ciò che sta sotto al box viene poi spostato verso sinistra di qualche pixel, e finisce nascosto dietro al box esterno che lo contiene. L’effetto è a cascata: ovvero se sotto ci sarà un altro box di tipo blockquote, tutto ciò che viene dopo subisce uno spostamento verso sinistra ancora maggiore. La faccenda è ancora più strana se pensiamo che passando il mouse sopra a un link, l’allineamento delle righe prossime al link torna normale, mentre le righe sottostanti restano allineate male. Il bug si coglie bene da questi screenshot.

Il bug è stato corretto semplicemente mettendo l’immagine di sfondo a destra. Con l’immagine allineata in questo modo il problema non si manifesta più. Il nuovo codice del box risulta essere:

blockquote {
margin: 5px;
padding: 2px 26px 2px 6px;
border: 1px solid #f3dc9e;
border-left: 4px solid #F8BF24;
background: #FFF6D9 url('images/quote.gif') no-repeat top right;
overflow: auto;
}

Immagine di sfondo mangiata

Su IE (Microsoft Internet Explorer) se abbiamo a che fare con un box sul quale è impostata la regola overflow: hidden e dove una parte del contenuto viene nascosta, l’immagine di sfondo di questo box viene mangiata e si vede solo in parte.
Prendiamo ad esempio questo codice, relativo al box di sinistra dell’home page di diploD:

#homeboxleft {
float: left;
width: 53%;
padding: 10px;
margin: 20px 1% 60px 0;
overflow: hidden;
background: #fff url('images/homeboxbg_left.gif') no-repeat top right;
border: 1px solid #ccc;
} Questo box ha come immagine di sfondo l’arcobaleno a tre colori. Se all’interno andiamo a mettere un’immagine che sfora le dimensioni del box in larghezza essa viene tagliata, in virtù della regola di overflow. Lo si può vedere bene in questi screenshot. Il primo riporta l’immagine che sfora la larghezza del box mentre il secondo mette in evidenza l’immagine di sfondo “tagliata”.

Ciò che accade è sintetizzato in questo schema.

Questo problema si manifesta su Internet Explorer sia con la versione 6 che con la versione 7, anche se con quest’ultima l’immagine che sfora viene ridimensionata. Su Firefox invece è tutto normale, l’immagine di sfondo viene allineata al bordo del box mentre l’immagine più larga viene automaticamente ridimensionata all’interno del box.

Scrivo questo post per documentare una bella esperenzia. Il primo rilascio è avvenuto domenica notte, come è prassi per i siti altemente frequentati, per evitare disfunzioni e problemi al server e agli utenti. A stretto contatto con GTalk, assieme a Giovy abbiamo messo a posto le prime cose.

Il giorno dopo gli assidui lettori di Giovy hanno iniziato a postare commenti. La fase di macro-testing era ufficialmente iniziata. Grazie ai consigli e ai suggerimenti che via via venivano proposti dagli utenti ho passato tutto il lunedì mattina e buona parte del lunedì pomeriggio ad apportare modifiche al layout. Una trentina di modifiche al css e una decina di cambiamenti nei vari file php del template. Tutto questo ha fatto sì che nel giro di una giornata venissero corretti alcuni errori di visualizzazione (come quello nel modulo dei commenti, che con explorer scappava via dove nessuna regola css gli aveva imposto.. caro vecchio IE, che dire?!) e di ottimizzare diverse piccole cose: dai colori dei link agli spazi bianchi nell’header.

Ho sperimentato quindi a tutti gli effetti ciò che viene definito rilascio continuo. Nell’era del web2.0 non esiste più il rilascio per versioni ma le applicazioni, così come un template, vengono buttate fuori in beta perpetuo e le correzioni si apportano man mano che gli utenti segnalano anomalie, consigli, suggerimenti. Alcuni di questi risultano davvero preziosi. Certo alcune cose avrei potuto sistemarle in locale, e faccio il mea cupla, ma tutto sommato dopo una giornata di assestamento le cose sembrano andare per il meglio. Giusto qualche minuto fa ho inviato a giovy un’altra piccola correzione.

Era il primo grande lavoro per un sito altamente trafficato, e tutto sommato sono soddisfatto di come è stato portato a compimento.
Lavorare sulla grafica è senza dubbio un’attività più creativa che scrivere codice o capire come connettere un’applicazione java al database di SAP: ma a volte tocca fare anche quello (leggi nei prossimi mesi, ndr).
Da questa esperienza ho imparato parecchio e spero non sia una parentesi a parte. Devo ringraziare i lettori di giovy per gli interessanti consigli, i vari designer e programmatori che rendono disponibili i loro studi e lavori sul web, infine giovy che mi ha dato fiducia, e io spero di aver ripagato. Una delle cose più belle, credetemi, è stato conoscere al barcamp quello che prima era “un cliente” e si è trasformato in “persona”.
Fin da subito ci siamo parlati con il “tu”, ci siamo aggiunti ai contatti Gtalk e spesso e volentieri sono nate discussioni e scambi di riflessione spontanei. Questo metodo di lavoro è ben diverso e decisamente più proficuo rispetto al vecchio sistema “cliente-studio”, dove le comunicazioni avvengono per email utilizzando il “lei”, le relazioni sono impersonali e nello sfondo vige la regola del “fidarsi è bene ma non fidarsi è meglio”.

Tornando al template, dopo la prima fase di macro-testing è ufficialmente iniziata la fase del micro-testing, dove verranno apportati gli aggiustamenti di misura, man mano che questi si rendono necessari.

In definitiva, il portfolio si espande.. e il sottoscritto ne giova. [ok, il gioco di parole è una battuta alla De Sica.. ma passatemala!]