Un tema italiano, professionale, versatile: con uno slideshow di presentazione degli articoli

Si chiama DiploMagazine ed è nato per chi utilizza wordpress come motore per realizzare un sito evoluto: non un semplice blog, ma un notiziario, il sito di un quotidiano, di un magazine online o un sito dove lo notizie sono organizzate in maniera professionale e non come un semplice elenco di articoli in ordine cronologico.

La demo è visibile qui, dai un’occhiata per renderti conto.

Download del Tema

Scarica diploMagazine – Template per wordpress gratuito (versione 1.0)

Uno Slideshow centrale dove mostrare foto e titoli a rotazione

Come tutti i magazine che si rispettino, è possibile impostare il tema per mostrare al centro uno slideshow con le immagini di articoli provenienti da una determinata categoria. Nessun campo aggiuntivo, nessun nome obbligatorio per la categoria: puoi scegliere tu quanti e quali articoli mostrare. Il titolo e il breve riassunto del post saranno inseriti nel caption delle immagini.

Per impostare la categoria, è sufficiente andare nel pannello di amministrazione del tema (vedi sotto) e impostare l’ID della categoria interessata.

Per ricavare l’ID di una categoria andare nella pagina di gestione delle categorie wordpress, cliccare col tasto destro sul titolo della categoria interessata e scegliere “Copia collegamento”. In questo modo, facendo incolla sulla barra degli indrizzi o su un qualsiasi file di testo, si otterrà il link completo della categoria. Sarà un url simile a questo: http://lab.diplod.it/demo/wp-admin/categories.php?action=edit&cat_ID=25

L’ultimo numero in fondo al link è l’ID della categoria in questione, da riportare nel campo “ID Categoria per Slideshow”.

Un pannello di amministrazione per costruire l’home page e organizzare le notizie

diploMagazine ha un pannello di amministrazione tramite il quale è possibile personalizzare il tema e costruire l’home page a proprio piacere. Per accedervi cliccare sul link “diploD Magazine Option” sotto alle impostazioni di Aspetto del pannello di amministrazione WordPress (vedi figura).

Impostare le parole chiave del sito e l’immagine di sfondo della testata

Se non utilizzi nessun plugin di gestione delle keywords (come ad esempio All in One SEO Pack), puoi impostare direttamente nel pannello di amministrazione del tema le parole chiave del tuo sito, utili per ottenere un buon posizionamento sui motori di ricerca.

Puoi inoltre impostare una immagine di sfondo della testata. Il tema ne ha già una utilizzabile. Inserendo infatti l’indirizzo http://lab.diplod.it/demo/wp-content/themes/diplo-magazine/images/header-photo.png si ottiene una testata come quella nella foto sottostante.

Puoi caricare online la tua immagine personalizzata da utilizzare come sfondo della testata del sito, basta riportarne l’url.

Attivare Google Adsense sul proprio sito

E’ possibile attivare la pubblicità di Google sul tema, senza mettere mano al codice. Basta riportare il proprio Google Adsense ID (lo puoi trovare in alto a destra quando entri nel pannello di amministrazione di Google) e i colori desiderati per i propri banner.

Impostare le colonne e le categorie da visualizzare in home page

L’home page può essere a colonna singola, a due colonne, con o senza lo slideshow centrale (nell’immagine sopra sono visualizzate tutte le possibilità).

Impostando il “Numero di Categorie in Rilievo nella Home Page” a zero, sarà visualizzata una sola colonna centrale, mentre cambiando tale numero saranno visualizzate due colonne. Nella colonna laterale è possibile pubblicare articoli provenienti da diverse categorie, basta indicare l’ID delle categorie e il numero di articoli desiderati.
Per ricavare l’ID di una categoria, come descritto sopra, andare nella pagina di gestione delle categorie wordpress, cliccare col tasto destro sul titolo della categoria interessata e scegliere “Copia collegamento”. In questo modo, facendo incolla sulla barra degli indrizzi o su un qualsiasi file di testo, si otterrà il link completo della categoria. Sarà un url simile a questo: http://lab.diplod.it/demo/wp-admin/categories.php?action=edit&cat_ID=25

L’ultimo numero in fondo al link è l’ID della categoria in questione, da riportare nel campo “ID Categoria #”

E’ inoltre possibile pubblicare una galleria di immagini proveniente da un articolo wordpress oppure un video di youtube nel footer. Per fare ciò, è sufficiente compilare i campi “Galleria Immagini” con l’ID del post al quale è associata la galleria e “Video Youtube” con l’URL embedded del video.

Per ricavare l’ID dell’articolo, dalla pagina di amministrazione degli articoli, cliccare col tasto destro sul titolo e scegliere “Copia collegamento”. In questo modo, facendo incolla sulla barra degli indrizzi o su un qualsiasi file di testo, si otterrà il link completo dell’articolo. Sarà una url simile a questo: http://lab.diplod.it/demo/wp-admin/post.php?action=edit&post=52
L’ultimo numero dell’url è l’ID dell’articolo, nel caso dell’esempio sopra è 52. Inserendo questo numero, saranno visualizzate nel footer di sinistra tutte le foto caricate in quell’articolo.

Per ricavare il link del video youtube è necessario partire dal codice embedded del video, quello offerto da youtube per inserire un video nel proprio sito. Qui sotto, in grassetto, è evidenziato l’url da inserire nel pannello di amministrazione del tema.

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/W7HNEfOf-Rw&hl=it_IT&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/W7HNEfOf-Rw&hl=it_IT&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Quattro spazi widget ready, tra sidebar e footer

Il tema dispone di ben quattro sidebar dinamiche, dove è possibile inserire widget direttamente dal pannello di amministrazione di wordpress. La sidebar numero 1 è relativa alla colonna laterale destra del sito, mentre le numero 2, 3 e 4 sono relative alle tre colonne del footer.

Archivi, commenti e altro

Il tema è organizzato secondo le categorie degli articoli wordpress, che compaiono come menù della testata; le sottocategorie sono gestite nelle stesso menù fino al secondo livello.

I link alle pagine vengono invece pubblicati nel menù in alto, sulla prima barra nera del tema.

diploMagazine dispone inoltre di una professionale gestione delle pagine di archivio e di ricerca, mentre i commenti agli articolo supportano i Gravatar.

Non resta che provarlo e lasciare commenti, suggerimenti, feedback o l’url del sito dove viene utilizzato.

NB: Questo lavoro è rilasciato con Licenza Creative Commons: puoi modificarlo e riutilizzarlo, purchè venga citata la fonte.

Mammaimperfetta.it si aggiunge al portfolio, già da un paio di mesi è online il nuovo sito di Silvia. Una migrazione da iobloggo e un nuovo design wordpress, al quale ha collaborato per l’azzeccatissima illustrazione in testata Daria Manenti.

Silvia è una mamma blogger che parla di figli e vita. Dopo appena un mese dalla sua pubblicazione, mammaimperfetta.it è stato segnalato su Repubblica come uno tra più accreditati blog delle mamme italiane. Per me è stato un onore contribuire alla realizzazione.

La particolarità di questo lavoro? Il menù. Ho utilizzato un divertentissimo script basato su jQuery: superfish menu. Per chi vuole studiarselo un po’, sul sito del plugin si trovano tutti gli esempi del caso.

Per i più curiosi, una pillola di css image replacement per rendere il link all’home page sulla testata del blog.

Questo il codice php:

<h1 id="logo-text"><a href="<?php bloginfo('url'); ?>" title="Mamma Imperfetta Home">MammaImperfetta</a></h1>

E questo il codice CSS:

#header 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-align: left;
color: #f2f0f1;
background: transparent url(images/logo.gif) no-repeat top left;
width: 357px;
height: 79px;
/* posizione del titolo principale */
top: 15px; left: 185px;
}

Più compatibile di così.. WordPress è sempre più bello! E i lavori statici di styleshout continuano ad offrire ottimi spunti. :)

Ovviamente consigli e suggerimenti sono sempre ben accetti.

Quante volte abbiamo visto siti di magazine dotati di spettacolari slideshow a centro pagina che presentano gli ultimi articoli con immagini a ripetizione? Basta guardare il sito di wired o dell’Economist.. Molti temi wordpress per magazine presentano soluzioni di questo tipo, spesso però pescano le immagini da presentare tra i custom fields di wordpress.

La soluzione che propongo in questo articolo pubblica invece la prima foto allegata al post e la fa girare a rotazione assieme al titolo e all’excerpt (il riassunto). Il risultato finale è visibile in questa demo.

Per fare il tutto ho scelto un javascript gratuito: Slideshow2! Grazie a questa splendida classe per Mootools è possibile creare in pochi istanti effetti davvero accattivanti.
Ci sono diversi plugin per wordpress in giro che utilizzano i più noti script per generare slideshow e gallerie, ma tutti quelli che ho visto servono per creare una gallery a partire da un singolo post. Il mio obbiettivo era diverso: creare uno slideshow con la prima immagine degli ultimi articoli pubblicati. Vediamo come fare..

Prima di tutto il codice.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/slideshow.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slideshow.js"></script>


Questa prima parte va aggiunta nell’elemento <head>, nel file header.php del template wordpress. Non fa altro che caricare un file CSS, la libreria mootools e lo script slideshow. Sempre all’interno dell’elemento <head> va inserito il codice sottostante. Si può posizionare questa porzione di codice anche appena prima del div in cui si desidera far apparire lo slideshow, tipicamente nel file index.php del template wordpress.

<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
<?php $temp_query3 = $wp_query; ?>
<?php query_posts('showposts=5&cat=4'); ?>
<?php if (have_posts()) : ?>
<?php $conta=0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php
// Rileva ID del post
$iPostID = $post->ID;
// Rileva immagini per questo post
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
// Se esistono immagini allegate al post
if($arrImages) {
// Rileva array con le chiavi che rappresentano le immagini allegate
$arrKeys = array_keys($arrImages);
// Rileva la prima immagine allegata
$iNum = $arrKeys[0];
// Rileva url thumbnail
// $sThumbUrl = wp_get_attachment_thumb_url($iNum);
// Rileva url full-size
$sUrl = wp_get_attachment_image_src($iNum,'full');
// Rileva excerpt - riassunto del post
$descrizione = get_the_excerpt();
// Rimpiazza caratteri particolari
$descrizione = str_replace("'", "\'", $descrizione);
$descrizione = str_replace("\n", " ", $descrizione);
?>
<?php if ($conta>0) { ?>, <?php } ?><?php } ?><?php $conta++; ?>
'<?php echo($sUrl[0]) ?>': { caption: '<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link a <?php the_title(); ?>"><?php the_title(); ?></a><br/><?php echo($descrizione) ?></p>' }

<?php } ?>
<?php endwhile; ?>
<?php endif; ?>
<?php //Reset Query
wp_reset_query(); ?>
};
var myShow = new Slideshow('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 780});
});
//]]>
</script>

Questa seconda parte serve per far apparire lo slideshow nel div con ID=”show”. All’inizio vengono indicati il numero di post e la categoria relativa che si desidera far apparire, nella funzione query_posts(). Il codice è ben commentato e non fa altro che rilevare la prima immagine di ogni post per pubblicarla assieme al titolo e al riassunto del post.
La parte HTML necessaria all’interno del <body> è questa:

<div id="show">
<img src="<?php bloginfo('template_url'); ?>/images/default.jpg" alt="welcome" />
</div>

Dove come default.jpg verrà caricata una immagine standard, utile nel caso non ci siano articoli da visualizzare oppure l’utente abbia disabilitato javascript.
Per aggiungere l’effetto di zoom in movimento è possibile utilizzare l’estensione kenburns dello script Slideshow. Caricando nell’ <head> un altro javascrip:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slideshow.kenburns.js"></script>

e modificando le ultime righe dello script sopra in questo modo:

var myShow = new Slideshow.KenBurns('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 670, zoom: 50, pan: [25, 75]});

Le proprietà di zoom e pan sono da regolare per ottenere effetti diversi.

Il risultato HTML è il seguente:

<script type="text/javascript" src="http://lab.diplod.it/demo/wp-content/themes/diplo-magazine/js/slideshow.kenburns.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
//avvio slideshow
var data = {
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691087551_74e61f4da0_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/campo-di-grano/" rel="bookmark" title="Permanent Link a Campo di Grano">Campo di Grano<\/a><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691896442_cafb3a1487_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/le-braccia-del-costruttore/" rel="bookmark" title="Permanent Link a Le braccia del Costruttore">Le braccia del Costruttore<\/a><br/>Le braccia del costruttore ha un riassunto molto breve..<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3166795508_d5cd33c968_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/secondo-articolo-in-rilievo/" rel="bookmark" title="Permanent Link a Secondo Articolo in Rilievo">Secondo Articolo in Rilievo<\/a><br/>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691094985_4327680ea2_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/primo-articolo-in-rilievo/" rel="bookmark" title="Permanent Link a Primo articolo in Rilievo">Primo articolo in Rilievo<\/a><br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat [...]<\/p>' },
};
var myShow = new Slideshow.KenBurns('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 670, zoom: 50, pan: [25, 75]});
});
//]]>
</script>

Per quanto riguarda il CSS, quello proposto assieme allo script è sicuramente un buon punto di partenza, da sistemare se si vogliono cambiare le dimensioni del div che presenta lo slideshow.

Buon design a tutti..

PS: Nel caso in cui qualcuno si stesse domandando da dove provenga il design della demo sopra.. beh: seguite questo blog, prossimamente arriverà un tema wordpress in stile magazine, completamente personalizzabile dal pannello di amministrazione e soprattutto italianissimo. ;)

La funzione è semplice: permette di aggiungere campi personalizzati al profilo utente base. In questo modo è possibile strutturare la pagina di registrazione per chiedere ai nuovi iscritti informazioni extra, come ad esempio la volontà di iscriversi ad una newsletter, attraverso un campo checkbox, far inserire un avatar, richiedere la data di nascita o l’indirizzo.. 

Altra esigenza comune è quella di risistemare graficamente il form di registrazione e login, a partire dal logo. Spesso è utile uniformarlo alla grafica del proprio sito web, nei colori e nella formattazione. I file su cui intervenire si trovano nelle cartelle wp-admin/css e wp-admin/images; nella prima vi sono tutti i css di base (il consiglio è sempre quello di farsi un backup prima di apportare modifiche) mentre nella seconda le immagini che utilizza wordpress.

Il logo si trova al path wp-admin/images/logo-login.gif; è sufficiente sovrascrivere questa immagine per cambiare il logo che sta sopra al form di registrazione e di login. Una volta sostituito è bene mettere mano al css per sistemare l’altezza del box che lo contiene, intervenendo sul file wp-admin/css/login.css:

h1 a {
background: url(../images/logo-login.gif) no-repeat;
width: 292px;
height: 166px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}
#login { 
width: 680px; 
margin: 1em auto; 
}

Già queste semplici regole sono sufficienti ad allargare il form di login e cambiare le dimensioni del logo.

Unica cosa che manca, a questo punto, è la possibilità di creare un’area riservata per gli utenti registrati. Altra pecca dell’attuale versione di wordpress. Poco male, anche in questo caso ci può venire in aiuto un valido plugin: Disclose Secret.
Può essere utilizzato per proteggere gli articoli e le pagine del blog. Una volta che l’articolo è protetto dal plugin, l’intero articolo incluso il titolo, l’excerpt, il contenuto e i commenti verranno visualizzati solo se il visitatore ha effettuato l’accesso e rispetta i criteri di sicurezza stabiliti per quel determinato articolo. La protezione avviene sia sul singolo articolo che sulle pagine di ricerca, sui feed, sugli archivi e sulla home page.

Combianando i due plugin è quindi possibile spingere wordpress su una gestione avanzata degli utenti: impostando profili ad hoc e aree riservate. Ne conoscete altri? Sono sempre più convinto della bontà di questo CMS.

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!

Dopo qualche mese di apnea causa tesi, ecco un aggiornamento al portfolio: il nuovo tema per maestroalberto. Il buon Alberto ha deciso di rinnovare il vestito del suo blog, mi ha chiesto di dargli una mano e ho accettato volentieri. E’ nato così un tema pulito ed essenziale, con 6 sidebar gestite tramite widget (3 laterali e 3 nel footer).

Dal punto di vista tecnico, la cosa a mio avviso più interessante è il modulo di ricerca Google, riadattato alla grafica del tema. Per i curiosi, riporto il css utilizzato:

#header form#quick-search {
position: absolute;
top: 175px; right: 20px;
padding: 0; margin: 0;
border: 1px solid #fff;
width: 320px; height: 33px;
background: #e5e5e3 url(images/header-search.gif) no-repeat top left;
z-index: 999999;
overflow: hidden;
}
#header form#quick-search p {
margin: 0; padding: 0; border: none;
}
#header form#quick-search input {
border: none;
background: transparent;
color: #bababa;
float: left;
margin: 0; padding: 5px;
}
#header form#quick-search .tbox {
margin: 6px 0 0 5px;
width: 216px;
display: inline;
border: none;
}
#header #search form#quick-search .btn{
width: 25px; height: 25px;
border: none;
}
#header form#quick-search label {
float: right;
font-size: 10px;
line-height: 11px;
border: none;
padding: 2px 2px 0 2px;
margin: 0;
}
#header form#quick-search input.radio {
float: right;
clear: right;
height: 12px;
margin: 2px 2px 0 0;
padding: 0;
border: none;
}

Ecco come appare il modulo in questione:

L’unica criticità era far rientrare i label che veicolano la ricerca su google o sul web nel piccolo spazio a disposizione nel form, l’unico modo per far diregire a IE questa cosa è forzare le dimensioni del campo di input del radio button. Con Firefox o Safari nessun problema; con IE, nonostante i margini e il padding, il bottone continuava ad andare per i fatti suoi. Dando una regola di height a 12px tutto è tornato come voluto.

Altra cosa interessante del tema è l’utilizzo del 960 grid system: un framework css molto comodo per dimensionare e strutturare un template con dimensione fissa di 960 pixel. E’ un modo rapido e veloce per impostare gli spazi, il framework permette di utilizzare un sistema a 12 o 16 colonne, grazie a una serie di classi preconfezionate e pronte all’uso, sicuramente da approfondire.

Per quanto riguarda la validazione invece, il CSS è privo di errori, mentre il codice XHTML risulta inquinato dai vari plugin.. Mi chiedo: ha ancora senso correre dietro ai mille errori che si presentano quando questi non dipendono da te? La politica che ho adottato è quella di costruire codice valido nella parte che realizzo in prima persona e infischiarsene di ciò che scrivono gli altri, finchè questo non intacca le prestanzioni globali..

Ne approfitto per fare un in bocca al lupo ad Alberto e ringraziarlo per avermi dato fiducia.
Commenti e suggerimenti sono ben accetti.

• Per articolo: ad esempio 10 euro ogni articolo che scrivi
• Tramite adsense: l’autore inserisce il proprio annuncio pubblicitario adsense e viene pagato in base ai clic

Generalmente il secondo è quello più utilizzato, saranno gli utenti stessi, coi loro accessi e i loro clic, a decretare il successo o meno di un articolo. Il concetto è semplice: ogni autore possiede un account Google Adsense e gli viene concesso di inserire un annuncio relativo al proprio Publisher ID all’interno dell’articolo che scrive.
Il Publisher ID si trova in alto a destra nel pannello di amministrazione di Google Adsense, tipicamente è una stringa del tipo pub-1234567890. Questa stringa appare nel codice html degli annunci, nell’esempio seguente è evidenziata in grassetto:

<script type=”text/javascript”><!–
google_ad_client = “pub-1234567890“;
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = “468x60_as”;
google_ad_type = “text”;
google_ad_channel = “”;
google_color_border = “FFFFFF”;
google_color_bg = “FFFFFF”;
google_color_link = “CCCCCC”;
google_color_text = “000000″;
google_color_url = “666666″;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Per costruire un sito web write to paid, potremmo utilizzare i campi personalizzati di wordpress. Se chiediamo agli autori di creare un campo dal nome adsenseID e compilarlo con il proprio publisher ID, ogni volta che scrivono un nuovo articolo, potremo andare poi a ripescarlo nel tema di wordpress per pubblicare il suo gruppo di annunci.

Creare un campo personalizzato è molto semplice: dall’editor di scrittura, sotto alla finestra di testo, basta aggiungere nome e valore e premere il tasto “Aggiungi campo personalizzato”.

I modi per visualizzare i campi personalizzati nel tema sono descritti molto accuratamente qui: http://codex.wordpress.org/Using_Custom_Fields
La funzione che ci interessa è get_post_meta($post_id, $key, $single)

• $post_id è l’ID odel post per il quale vogliamo visualizzare il campo personalizzato. Si può usare $post->ID per ricavare quello del post attuale all’interno del loop
• $key è la stringa che identifica l campo personalizzato, nel nostro caso sarà adsenseID (creato in precedenza)
• $single è un valore booleano (vero/falso). Se impostato a true la funzione restituisce un risultato singolo, come stringa. Se impostato a false, o non impostato, la funzione restituisce un array coi campi personalizzati

Dove vogliamo far apparire gli annunci bastarà scrivere, nel file del tema (ad esempio in single.php):

<?php $key=”adsenseID”; ?>
<script type=”text/javascript”><!–
google_ad_client = “<?php echo get_post_meta($post->ID, $key, true); ?>”;
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = “468x60_as”;
google_ad_type = “text”;
google_ad_channel = “”;
google_color_border = “FFFFFF”;
google_color_bg = “FFFFFF”;
google_color_link = “CCCCCC”;
google_color_text = “000000″;
google_color_url = “666666″;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Non è altro che il codice precedente, dove al posto del pub-1234567890 abbiamo messo la funzione php che stampa l’ID relativo al post. Ovviamente è possibile personalizzare il fomato e i colori del blocco di annunci, modificando gli opportuni parametri.

Se poi volessimo in qualche modo tenere traccia degli articoli più popolari, per valorizzarli e riconoscere un premio agli autori in grado di scrivere contenuti validi, potremmo utilizzare il Popularity Contest Plugin, che permette di impostare una serie di parametri tramite i quali valutare un post.

Semmai un giorno vorrete fare un sito tipo Ewrite.us o MondoInformatico.info, potete provare così..

Il browser, e di conseguenza il dispositivo, con cui l’utente fa accesso a un sito web è riconoscibile attravero lo User Agent.

Oltre ai browser, gli user agent del web possono essere i crawler dei motori di ricerca, i telefoni cellulari, i lettori di schermo ed i browser braille usati da persone non vedenti.
Quando gli utenti di Internet visitano un sito web, una stringa di testo è solitamente inviata per fare identificare al server lo user agent. Questo fa parte della richiesta HTTP, con prefisso “User-agent:” o “User-Agent:” e tipicamente include informazioni come il nome dell’applicazione client, la versione, il sistema operativo e la lingua. I bot spesso includono anche l’indirizzo web e la mail del proprietario, in modo tale che l’amministratore del sito possa contattarlo.
La stringa dell’user-agent è uno dei criteri per i quali alcuni bot possono essere esclusi da alcune pagine usando il file robots.txt. Questo permette ai webmaster, che ritengono che alcune parti del loro sito (o tutto il sito) non debba essere incluso nei dati raccolti da un particolare bot o che quel particolare bot stia usando troppa banda, di bloccare l’accesso alle pagine. [wikipedia]

E’ arrivato dunque il momento di pensare al design del blog, fondamentalmente ci sono due modi per scremare opportunamente gli utenti che accedono al sito web: tramite il file .htaccess o tramite php. Noi ci concentreremo sulla seconda soluzione.

Esistono due interessanti plugin per formattare un blog in versione mobile:

1. WP-PDA: riconosce in automatico un sacco di user agent relativi a dispositivi mobili windows mobile, playstation portatile, cellulari, ecc..), è possibile aggiungerne altri tramite il pannello di amministrazione. Per l’iPhone carica un tema particolare, concepito appositamente secondo il design apple. Nelle immagini sottostanti potete vedere la versione di questo blog vista rispettivamente su iPhone e su un browser Nokia.
   
2. WP Touch: è ottimizzato per formattare le pagine quando vi si accede con l’iPhone. Il design è delizioso, ma il grosso limite è che riconosce sono lo user agent dell’iPhone e non quelli degli altri dispositivi mobili. Nell’immagine sottostante la versione di un mio blog di test.
   

Il principio di funzionamento è uguale per entrambi i plugin: in base allo user agent viene caricato un tema apposito. Il tema è in tutto e per tutto uguale agli altri temi wordpress, utilizza gli stessi file php, ma viene semplificato il layout: meno div, meno classi css, meno fronzoli..
Nei prossimi giorni ho intenzione di rilasciare qualche tema gratuito appositamente pensato per i dispositivi mobili, da caricare nelle relative cartelle dei plugin per personalizzare ulteriormente il proprio sito.

Per testare la visualizzazione sui diversi dispositivi, senza possederli (daltronde costano davvero caro..), esiste una comodissima estensione di firefox che cambia a piacimento gli user agent: User Agent Switcher.

Per chi volesse divertirsi a fare tesi, qui c’è una esaustiva lista di user agent string, per estendere la lista di quelli disponibili nell’estensione di firefox.
E’ arrivato il momento di concentrarsi anche su questi aggeggini, via con le customizzazioni.

Qualche tempo fa Camu illustrava un metodo semplice ed efficace per aggiungere questa funzione a un sito web, attraverso un javascript che agisce sull’onclick. Lo stesso concetto viene sfruttato da questo plugin, che offre inoltre diverse funzionalità:

• Si possono monitorare i soli domini sui quali gli utenti vengono indirizzati oppure gli url di destinazione completi
• Si può sapere se qualcuno clicca dal testo dell’articolo, dai link degli autori dei commenti o dal testo dei commenti stessi
• Si può monitorare il numero di download dei files che mettiamo a disposizione sul nostro blog, specificandone l’estensione (.pdf, .zip, .doc, ecc..)
• Le parole chiave tramite le quali salvare il numero di click le decidiamo noi, specificando ad esempio la stringa uscenti per i link in uscita dal blog o downloads per i link ai file

Non c’è bisogno di aggiungere nulla al codice, il plugin monitorizza tutto in automatico.

Come leggere queste statistiche?
Dal pannello di Google Analytics, sulla sinistra, cliccando su Content e poi su Content Drilldown si apre una schermata dove sono visualizzate tutte le pagine che hanno avuto accessi, divise in base ai criteri che erano stati impostati in precedenza nel pannello di amministrazione del plugin su wordpress.

Buone statistiche a tutti..

Su questo blog è attivo il mio plugin: WP COinS. Non fa altro che inserire una riga di codice invisibile all’interno dell’articolo in modo che i software in grado di ricoconoscere i COinS ne ricavino le informazioni. Per chi non sa cosa siano i COinS, qui potete capirci qualcosa in più.

Download e Installazione

Potete scaricare lo zip da questo link: wp-coins

Installare il plugin è semplicissimo, basta copiare il file wp-coins.php nella cartella dei plugin (wp-content/plugins/) e attivarlo dal pannello di amministrazione.

Una volta attivo (se avete zotero) sarà visibile un’icona nella barra degli indirizzi, che permette l’archiviazione dell’articolo nella bibliografia: vedi screenshot sottostante.

Per onor di cronaca: esiste già un plugin di wordpress sviluppato dal team di zotero: allora perchè ne ho fatto uno io? Per due motivi, sono partito a svilupparlo senza guardare se in giro c’era già (pirla!) e avevo voglia di fare pratica con la realizzazione da zero di un plugin (un plugin in più è pur sempre qualche conoscenza in più..).
Inoltre, motivo più utile: è progettato per i blog in italiano. La lingua, le descrizioni, sono tutte in lingua nostrana. Motivo per cui non sarà diffuso in inglese ne distribuito sul repository ufficiale, ciò non toglie che sia pienamente testato sulla più recente versione di wordpress.
Che di inglese ne abbiamo già un sacco.. :)

Se poi la reperibilità dei vostri articoli vi sta particolarmente a cuore, non perdetevi il plugin di undolog che aggiunge il descrittore XML dello standard open search al vostro sito.

L’occasione è l’apertura del repository comune per i temi wordpress: dopo i plugin, anche i temi hanno la loro casa ufficiale. Per esserci bisogna rispettare alcuni requisiti. Ho messo mano a tutti i temi che avevo rilasciato in passato per renderli perfettamente compatibili alle nuove versioni di wordpress e sistemare alcuni bug che erano presenti.

La vera grande novità è che da oggi tutti i temi hanno il loro bravo pannello di amministrazione, dal quale è possibile settare opzioni e personalizzare colori e testata. Altra grande novità: Nerino e diploDgeek sono diventati adsense ready, tramite il pannello di amministrazione è possibile gestire la pubblicazione degli annunci pubblicitari sul proprio blog.

Tutti i temi da oggi supportano i Gravatar, avatar globalmente riconosciuti. Per intenderci: le icone che vedete a lato dell’autore di ogni commento, anche su questo blog.

Un restyling più sostanziale riguarda diploDgeek, che nella nuova versione può ospitare anche un video di youtube nella sidebar.

Sulle pagine dei rispettivi temi ho aggiornato le istruzioni di installazione e configurazione, rimando quindi alle singole pagine se siete interessati al download. In attesa che il repository ufficiale diventi localizzato, così anche i temi in italiano avranno il loro risalto.

• Nerino
• diploDGeek
• Sport Template

A tutti coloro che utilizzano questi temi, il mio consiglio è di aggiornare.
Come al solito, commenti e suggerimenti sono ben accetti.

Piccola nota: se non te ne frega niente del codice ma vuoi semplicemente sapere quali strumenti usare per geotaggare i tuoi post e il tuo feed, vai direttamente a leggere la parte relativa a feedburner o al plugin di wordpress Geopress.

Localizzare un sito web

Ci sono degli standard non formalizzati per rappresentare i metadati geografici all’interno delle pagine web.  Uno è quello proposto da GeoUrl:
<meta name="ICBM" content="latitudine, longitudine" />

L’altro è quello proposto da GeaoTags:
<meta name="geo.position" content="latitudine; longitudine" />
<meta name="geo.placename" content="Nome del luogo" />
<meta name="geo.region" content="Codice del Paese" />


I meta tag hanno valore se sono accettati e interpretati dai motori di ricerca, questi sembrano essere lo standard de facto. Per ricavare i dati relativi al nostro luogo è bene usare servizi come il Getty Thesaurus of Geographic Names, dove inserendo ad esempio “Reggio Emilia” si ricavano i dati di latitudine e longitudine oltre al Paese di appartenenza. Per il codice del Paese è bene utilizzare invece lo standard ISO, per l’Italia è il classico “IT”.

Un esempio? Da quando è stato fatto il redesign, tra i meta tag dell’home page di questo sito ci sono anche i seguenti:

<meta name="ICBM" content="44.6167,10.6167" />
<meta name="geo.position" content="44.6167;10.6167" />
<meta name="geo.placename" content="Reggio Emilia" />
<meta name="geo.region" content="IT" />

Sono appunto i meta tag che descrivono la posizione geografica del sito: Reggio Emilia. La geolocalizzazione con questi meta tag richiede di importare anche il riferimento allo schema, con il seguente codice:
<link href=”http://geotags.com/geo/” rel=”schema.geo” />

Localizzare i feed RSS

Per quanto riguarda i singoli post di un blog, invece, potrebbe essere utile posizionarli in base al contenuto. Se ad esempio stiamo parlando delle ultime vacanze in Sicilia, è meglio localizzare questa pagina a Palermo. Oltre ai meta tag descritti precedentemente, si possono utilizzare costrutti nel feed RSS degli articoli.

E’ possibile assegnare una posizione geografica all’intero feed, in questo modo:

<rdf:RDF>
<geo:Point>
<geo:lat>55.701</geo:lat>
<geo:long>12.552</geo:long>
<geo:alt>52.4</geo:alt>
</geo:Point>
</rdf:RDF>


Quello presentato sopra è lo stesso codice proposto anche dal W3C, sebbene non si tratti di una standardizzazione formale, ma di indicazioni ancora in fase di discussione. Il W3C Geospatial Incubator Group ha accettato il codice proposto da Georss.
Un altro modo, alternativo, è il seguente codice:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
<title>Il mio blog</title>
<link>http://diplod.com</link>
<description>Descrizione</description>
<icbm:latitude>44.6167</icbm:latitude>
<icbm:longitude>10.6167</icbm:longitude>
<copyright>Copyright 2005</copyright>
<pubDate>Wed, 05 Jan 2005 18:54:47 +0000</pubDate>
<generator>http://wordpress.org/?v=2.5</generator>
<item>
<title>Titolo di esempio</title>
<link>http://highearthorbit.com/index.php?p=121</link>
<pubDate>Wed, 05 Jan 2005 18:54:47 +0000</pubDate>
<category>Categoria di esempio</category>
<guid>http://diplod.com/category/esempio/</guid>
<description>Descrizione</description>
<geo:Point>
<geo:lat>44.6167</geo:lat>
<geo:long>10.6167</geo:long>
</geo:Point>
<icbm:latitude>44.6167</icbm:latitude>
<icbm:longitude>10.6167</icbm:longitude>
</item>
</channel>
</rss>

In grassetto ho evidenziato la parte di codice relativa alla localizzazione, le righe 7 e 8 si riferiscono all’intero feed mentre il codice contenuto tra il tag <item> e </item> riguarda il singolo post. Anche in questo caso quindi abbiamo due modi differenti: col tag geo oppure icbm.

Geotag con Feedburner

Per chi utilizza feedburner invece il geotagging del feed è semplicissimo, dal pannello di amministrazione del feed basta cliccare sulla tab “Optimize” poi nel menù a sinistra sulla voce “Geotag your feed”.

Da questa schermata basta inserire latitudine e longitudine e Feedburner aggiungerà il codice all’intero feed in automatico.

GeoPress: plugin per wordpress

Geopress è un plugin di wordpress che permette di localizzare i post o le pagine del blog direttamente dal pannello di amministrazione. Basta installarlo e durante la scrittura di un post sarà possibile indicare nell’apposito campo il luogo al quale l’articolo fa riferimento, inserendo il nome della città, le coordinate o semplicemente selezionando sulla mappa il punto esatto.

E’ inoltre possibile inserire all’interno di un post la cartina di gmap e altre mappe, tra cui Microsoft, OpenStreetMap, 3DGlobe.. senza toccare il template o il codice. Oltre a inserire queste informazione nel feed RSS o Atom, Geopress fornisce anche i link KML per la visualizzazione su Google Earth o GPX per la visualizzazione sui navigatori GPS.

Per attivare Geopress, è necessario inserire la Google Map Api Key, ottenuta semplicemente fornendo il proprio indirizzo del blog. Questo è necessario per poter visualizzare la mappa interattiva nel pannello di amministrazione o sulle proprie pagine.

In sostanza si tratta di un tool completo per dare al feed del blog e ai singoli articoli una perfetta geolocalizzazione.
Per chi vuole ottenere il massimo, il plugin offre alcune interessanti funzioni da sfruttare all’interno del tempate. Se volessimo pubblicare i meta tag di geolocalizzazione visti in precedenza, per ogni singolo post, sulla base della località assegnata tramite il plugin, possiamo usare questo codice:

<?php if ((is_single() || is_page()) && function_exists('has_location')) {
if (has_location()) {
$coordinate=array(the_coord());
$coordinateICBM=str_replace(' ',',',$coordinate[0]);
$coordinateGEO=str_replace(' ',';',$coordinate[0]);
?>
<meta name="ICBM" content="<?php echo($coordinateICBM) ?>" />
<meta name="geo.position" content="<?php echo($coordinateGEO) ?>" />
<meta name="geo.placename" content="<?php echo(the_location_name()) ?>" />
<?php }
} ?>


Non fa altro che controllare se si tratta di una pagina singola o di un post in cui è stata assegnata la località e il plugin geopress è attivo, per poi pubblicare le coordinate sottoforma di metatag. Questo codice va inserito nel file header.php del template tra i tag <head> e </head>.

Conclusioni

I servizi che mettono a disposizione informazioni e cintenuti su base geografica aumentano di giorno in giorno, si arriverà quindi all’accettazione di uno standard per poterli integrare e uniformare. Dalle mappe di Google oggi possiamo fare ricerche per trovare attività commerciali e siti web. Del resto anche la nuova BlogBabel utilizza i dati geografici per pubblicare informazioni circa le discussioni di un particolare luogo, pochi giorni fa ad esempio ho aggiunto al mio aggregatore il feed che monitorizza le notizie relative alla mia zona. Adottare questi accorgimenti nel proprio blog potrebbe rivelarsi molto utile per catturare quelle persone che vanno alla ricerca di informazioni su base geografica.

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.

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!

Ormai i siti di social bookmark sono come funghi, anche gli italiani si sono appassionati. Lavorando alla nuova grafica ho cercato un set di icone da utilizzare sotto ad ogni post per segnalare gli articoli ai siti di bookmarking sociale. Nulla, solo tante belle icone inglesi..

Così ho fatto in casa, ecco il risultato: un set di 13 icone da scaricare e utilizzare gratuitamente, come meglio credete. Nello zip sono disponibili i formati png 40×40 e 20×20. Ho inserito anche i file photoshop, se qualcuno è interessato ad aggiungere icone al set può partire da quelli.

Scarica il set di icone “social bookmark italia”

Quali sono i siti “iconizzati”?

• OkNotizie
• Segnalo
• Wikio
• Upnews
• ZicZac
• FaiNotizia
• Diggita

Più gli immancabili stranieri:

• Delicious
• Digg
• Furl
• Newsvine
• StumbleUpon
• Technorati

I tempi? Non ci sono.. diploD non ha una scadenza, quando arriva arriva (anche se spero di farcela per l’estate). Devo inevitabilmente dare la priorità ai progetti di lavoro.

Ringrazio pubblicamente MrBunne per avermi dato fiducia su questo progetto e aver sopportato i miei tempi, per lui un grande in bocca al lupo.. i blog sono avviati da un po’ e hanno già numeri interessanti!
Se avete voglia di dare una sbirciatina e lasciare consigli o suggerimenti, ben venga. ;)

Ne ha parlato tom qualche giorno fa. Oltre ad essere cross-browser e compatibile agli standard, il vero punto di forza di questa galleria è il supporto a diversi framework javascript, questo permette di utilizzarla in tutti i contesti: supporta infatti YUI, Prototype + Scriptaculous, jQuery, Ext, Dojo e MooTools. Una meraviglia, visto che generalmente è proprio la difficile integrazione tra i diversi framework a impedire l’utilizzo di questi eleganti metodi di presentazione.

Ho cercato un plugin che integrasse su wordpress questa galleria, per utilizzarla nella presentazione del portfolio. Detto fatto: Shadowbox JS Plugin. Per onor di cronaca esiste pure un plugin italiano con lo stesso intento, ma non c’è la possibilità di scegliere quale framework javascript utilizzare. Questo è fortemente limitante, dato che l’arma vincente di shadowbox è proprio la possibilità di utilizzo sui diversi framework.

Ho fatto quindi una traduzione in italiano del suddetto plugin, nulla di travolgente: ho semplicemente modificato i commenti al file del plugin per impostare i parametri e cambiato le scritte “next” “prev” e “close”. Su un sito completamente italiano sta meglio la scritta “chiudi”.. ;)

Se volete provarlo, potete scaricare il plugin dal sito ufficiale e sovrascrivere questi files (tradotti in italiano):

Shadowbox – zip con files in italiano

Installazione

1. Caricare la cartella `shadowbox-js` in `/wp-content/plugins/`
2. Attivare il plugin dal ‘Plugins’ menu in WordPress
3. Aprire il file shadowbox-js.php e modificare $jsLib e $lightCSS in base alle istruzioni presenti nel file.

Utilizzo

Per far apparire un media all’interno di shadowbox basta inserire un link in questa forma:

<a href="http://domain.tld/directory/to/image.jpg" rel="shadowbox[album]">Image</a>

Il link può puntare a immagini, siti web, file flash, video su youtube, contenuto in linea. Basta assicurarsi di inserire `rel=”shadowbox”` poichè questo codice attiva il plugin.
Inserendo il codice `rel=”shadowbox[album]“` si possono inoltre raggruppare più immagini all’interno dello stesso album.

Integrazione con lightbox: se state già utilizzando lightbox sul vostro sito, non dovrete modificare nulla. Il plugin legge in automatico il codice ‘rel=”lightbox”‘ e lo interpreta normalmente.