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

Angelo Ferrera mi ha inviato qualche proposta per ovviare alla “pesantezza” del lato destro della sidebar, indicando possibili alternative.

Ecco le sue proposte:

Inutile dire che mi ha fatto immensamente piacere sapere che qualcuno si era spinto a “produrre” soluzioni; ma ringraziamenti a parte trovo decisamente interessante la soluzione con le foto a caduta dall’alto ma sopratutto le proposte per la nuvoletta dei tag.

Credo che adotterò una di queste soluzioni, ma sono profondamente indeciso su quale. Voi che dite?

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!