Redesign del blog: attenzione sui dettagli

Pubblicato da Davide, Aggiornato martedì 29 luglio 2008 5 Commenti »

Questo articolo e' stato scritto piu' di 6 mesi fa.. In teoria non cambia nulla, sed panta rei: se trovi link o informazioni datate segnalalo pure. :)

Si torna a parlare del redesign di diploD: ero partito dalla testata, questa volta mi soffermerò su alcuni dettagli come il form per i commenti o la data a fianco dei post.

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.

data data personale

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.

esempio

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.

input-bg

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

5 Commenti »

Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.

Vuoi essere il primo a lasciare un commento per questo articolo? Utilizza il modulo sotto..

Lascia il tuo commento

 

http://livregratis.fr/ - http://club-ebook.fr/

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi