Davide: Che cosa dovrebbe avere una buona intranet?
Jane: Una buona intranet deve avere 3 cose:

1. essere incentrata sull’utente,
2. avere una strategia allineata al business
3. Avere una governance e politiche di gestione integrate al modo con cui viene gestita l’impresa

Davide: Quali sono le best practices per adottare l’enterprise 2.0? Esiste una roadmap comune?
Jane: Ma dispiace ma non esistono roadmap comuni e collaudate. Alcune aziende definiscono prima la strategia, poi la implementano. Altre iniziano con sperimentazioni dal basso, poi ufficializzano ciò che funziona. Altri mettono in campo un minimo di strategia e un po’ di sperimentazione dal basso, per poi farne una sintesi!

La chiave del successo è iniziare da ciò che è necessario al business, non dalla tecnologia. Fate progetti pilota dove c’è allo stesso tempo un bisogno e una sfida.

Davide: Wiki e blog dovrebbero essere utilizzati in una intranet? Se si, esiste un approccio da consigliare per spiegare agli utenti qual è il tool migliore da utilizzare , in base ai contenuti da pubblicare e al feedback che si desidera ricevere?
Jane: I Wiki servono per la co-creazione: fare cose assieme, fornendo uno strumenti per  “la voce del popolo”. Sono di proprietà del popolo o del singolo gruppo. Sono multi-dimensionali: i contenuti si creano spontaneamente. Potrebbero emergere talvolta anche cose inattese.
I blog servono per fare esprimere una voce individuale, il punto di vista di un team, per condividere l’esperienza. Si fanno portatori del punto di vista di un singolo o di un gruppo di persone. Sono bi-dimensionali: viene riportato un certo punto di vista o una notizia, mentre tutte le altre persone possono commentare o fare domande.
E’ interessante notare che le mie ricerche degli ultimi anni, condotte per la Global Intranet Strategies survey, evidenziano che solo nell’ultimo anno i blog hanno assunto rilevanza al pari dei wiki nelle aziende. Entrambi hanno raggiunto il 45 % dell’utilizzo nell’inchiesta del 2009, su un campione di circa 300 organizzazioni in tutto il mondo.
Fino all’anno scorso, i wiki la facevano da padrone. Credo che le società stiano famigliarizzando coi blog. I blog ottengono spesso più visibilità: persone che esprimono punti di vista. Richiedono probabilmente maggior tempo per la gestione rispetto ai wiki, basati sulla collaborazione, cosa che le imprese fanno da diverso tempo.

Davide: Connessioni col sistema ERP: è utile averle all’interno della intranet?
Jane: Assolutamente. Più che utile, è essenziale. E’ la chiave di volta per far sì che la intranet diventi il luogo di lavoro all’interno dell’impresa.

Davide: Credi che esista una killing application? Si parla spesso di Sharepoint.. Lavoro su Sharepoint da quasi due anni, credo che sia una buona piattaforma per realizzare applicazioni web, molto malleabile per poter mappare i processi di business
Jane: Sharepoint è solo una delle tante soluzioni. Non penso che una soluzione da sola si possa considerare una killer app.

Davide: Accesso dall’esterno e tramite dispositivi mobili: credi che sia un obiettivo primario?
Jane: Non è primario ma è molto importante. E’ uno dei 5 key trends che ho individuato per il 2010.

Davide: Qual è il miglior progetto che hai realizzato? Perchè?
Jane: Ce ne sono parecchi! I migliori sono quelli in cui la intranet ha cambiato il modo di lavorare dell’azienda, e il modo di fare business. La intranet esiste, in estrema sintesi, per servire i clienti. Per clienti, intendo i clienti esterni.
Le intranet aiutano le organizzazioni a lavorare meglio: le aziende lavorano per servire i loro clienti.

Davide: Grazie mille per questa intervista Jane, spero di sentire qualche utile consiglio all’E2.0 Forum!

Enterprise 2.0 per chi è sul pezzo, nuovi strumenti lavorativi per chi semplicemente li usa. Fatto sta che sono sempre più diffusi, all’interno delle organizzazioni, strumenti come i blog e i wiki; utilissimi ai team di lavoro per la gestione quotidiana delle attività, altrettanto utili all’azienda per conservare traccia del lavoro svolto e rendere questa conoscenza riutilizzabile in futuro. Sono arrivati già da tempo anche i software di instant messaging, un altro noioso compagno d’ufficio dopo il telefono. In fondo si tratta di tools per comunicare, ma non solo.

E’ sempre difficile la scelta su quale strumento utilizzare, soprattutto per chi ne è a digiuno; vi sono strumenti più o meno adatti in base alle informazioni da condividere e ai feedback necessari. La tipologia della relazione spesso fa la differenza sul raggiungimento dei risultati.
Per scrivere le riflessioni seguenti ho preso spunto da una discussione sul tema che ho letto via LinkedIn, dove veniva citato questo interessante contributo.

Veniamo al dunque, quando è meglio usare uno strumento piuttosto che un altro?

• Blog: è uno strumento informativo più che collaborativo. E’ particolarmente indicato per team di lavoro distribuiti, dove il project manager deve tenere informati i vari attori, talvolta pure il cliente. Dagli articoli possono scaturire discussioni, ma generalmente si tratta di discussioni operative, destinate a perdersi col tempo poichè non sono strutturate. La discussione è asincrona. Le informazioni possono essere catalogate con tag e categorie, ma la componente cronologica è sempre prevalente e prima o poi le notizie finiscono nel dimenticatoio.
• Wiki: è un contenitore di conoscenza. Un repository all’interno del quale memorizzare la conoscenza, sia quella esplicita che tacita. L’informazione può essere strutturata attraverso menù di navigazione, link tra pagine ed eventualmente con una tassonomia. Il contenuto è vivo, viene continuamente modificato dagli utenti ma si conserva la traccia dell’evoluzione. Non è certamente adatto per sviluppare discussioni sulle faccende più operative e non si presta nemmeno come luogo di scambio col cliente, a meno di particolari situazioni. E’ un luogo dove archiviare cose che possono tornare necessarie in futuro, come le best practices per lo sviluppo di un prodotto o per l’archiviazione di istruzioni operative.
• Instant Messaging: è perfetto per chiedere informazioni al volo senza disturbare troppo i colleghi o chi per loro. E’ certamente meno invadente del telefono pur svolgendo la medesima funzione. La comunicazione è rallentata ma efficace: sincrona. Va usato con moderazione, ma è forse uno degli strumenti più rivoluzionari. Con i software di IM è inoltre possibile condividere file o la propria sessione del desktop, si tratta di funzionalità spesso poco utilizzate.
• Email: la rogna più grossa dei nostri tempi. Serve solo ed esclusivamente per comunicazioni ufficiali, come ad esempio la notifica di un appuntamento o l’assegnazione di un task. Sviluppare discussioni dove si chiede il parere di più persone così come collaborare su un file tramite mail è la cosa più sbagliata che si possa fare. Quando serve un feedback “evoluto”, mai usare la mail.
• Telefono: serve per chiedere “Dove sei?” ed eventualmente comunicare al volo alcune cose, come il classico “Arrivo più tardi!”. A volte, se servono molte informazioni immediatamente è meglio parlarsi, perchè l’instant messaging potrebbe rubare tempo ad entrambi. Si tratta di comunicazione sincrona; in fondo a volte è anche piacevole scambiarsi informazioni in modo naturale.

A questi strumenti, inoltre, dobbiamo aggiungere i cosidetti workspace. Tipicamente siti web che raccolgono una o più funzionalità citate sopra e ne estendono le potenzialità con calendari o cartelle condivisi, dove archiviare file sui quali è richiesto l’intervento di più persone.

L’ultima frontiera della collaborazione è sicuramente il buon Google Wave, che ancora in pochi utilizzano (me compreso) ma che alla lunga credo andrà a sostituire la mail, o perlomeno quel modo errato di usarla, che tutti prima o poi sperimentano. In sostanza unifica l’IM, l’editing collaborativo e la mail, aprendosi verso quel mondo infinito di applicazioni web: mappe, video, ecc..

E voi, cosa ne pensate? Avete mai provato a spiegare a qualcuno che sia a digiuno di tutti quando è il momento di usare una cosa piuttosto che un’altra?
Nell’ottica della gestione delle informazioni, credo che sia importante istruire gli utenti circa gli strumenti che hanno a disposizione. Ma come farlo? Attraverso lunghe pagine descrittive del servizio? Può essere utile moderare i contributi e spostarli da un blog a un wiki e viceversa? Io sono ancora in fase di studio dei comportamenti..

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.

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.

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.

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?

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!

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.

Sempre più spesso vedo in giro siti web che vendono template per wordpress a prezzi accessibilissimi: da 45 a 99 dollari e hai un tema di qualità, originale e adeguato alla tue esigenze. Chiaramente questi siti “funzionano” perché hanno un volume di vendita ragionevole, che permette agli sviluppatori di fare prezzi decisamente concorrenziali. Generalmente si tratta di siti statunitensi, o al massimo indiani; ma in Italia c’è mercato per una attività come questa?

C’è davvero tutto questo bisogno di personalizzazione da parte di chi gestisce un blog quasi amatoriale? I template gratuiti, sotto creative commons, di certo non mancano: io stesso sono tra i “produttori”. Generalmente con qualche semplice modifica si riescono ad ottenere personalizzazioni interessanti.

Qual è il livello di personalizzazione che può spingere una persone ad acquistare un determinato tema? Io credevo fosse semplicemente l’unicità. Avere un tema unico, diverso da tutti e progettato sul proprio sito, permette di essere riconoscibile immediatamente e di fidelizzare gli utenti, abituandoli al proprio design.

Ma in alcuni casi c’è chi paga 99 dollari pur sapendo di non avere un tema unico, perché sarà acquistato anche da altri, esattamente uguale. C’è chi è disposto a pagare anche senza l’unicità: cosa cerca (e cosa trova) quindi in un tema a pagamento?

Sono domande aperte, che pongo a voi innanzi tutto per capire, oltre che per discutere. Io ho una vaga idea, ma prima di esprimermi mi piacerebbe sapere cosa ne pensate.

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

Arrivo al lavoro, verso le 9. La mia è un’azienda con un centinaio di dipendenti, abbiamo tre sedi: due in Emilia e una in Lombardia. Collego il notebook e accedo al portale aziendale. Stamattina sono sereno, è lunedì ma non ho scadenze stringenti. Controllo gli ultimi post pubblicati dai colleghi: ne trovo uno molto utile, che probabilmente mi aiuterà a risolvere un problemino col progetto avviato sul cliente Rossi. Lascio un commento entusiasta e voto l’articolo: 5 stelline.
Ho voglia pure di vedere che stanno combinando quei pazzi della ricerca e sviluppo, vado a leggere gli articoli sul blog della R&D. Come al solito tante belle cose ma ancora nessuna applicazione reale. Staremo a vedere..
Ah, c’è un tizio che propone un aperitivo tra colleghi martedì prossimo: io ci sono! Il bar chi lo scieglie?
Mario è stato promosso, i miei complimenti; Carla, neolaureata, è appena entrata in azienda, le lascio un messaggio per farle presente che nella sezione dedicata ai nuovi dipendenti ci sono un sacco di informazioni utili.
Basta, sono le 10 e un quarto, è ora di fare qualcosa.. Il forum lo consulterò nel pomeriggio, adesso non sono in vena di dispensare consigli.

Concetto di impresa 2.0, detta all’americana: enterprise 2.0.
In sostanza si tratta di concedere qualche ora ai dipendenti per il libero svago sulla intranet interna, il tutto a discapito della produttività. A discapito della produttività? Non esattamente.
Strumenti come wiki e blog, che hanno reso possibile l’evoluzione di internet, possono rendere possibile pure l’evoluzione di una azienda. Delle relazioni lavorative: possono facilitare la comunicazione orizzontale e spianare la strada per nuovi scenari produttivi. Soprattutto per le organizzazioni che prevedono un costante lavoro per team e che consideraziono la conoscenza interna un bene da proteggere e coltivare (knowledge management per gli anglofoni).
E chi se ne frega se finisce che la gente pubblica le foto del capo con le gote rossicce all’ultima cena aziendale oppure parla della birra fatta in casa, succede sempre anche alla macchinetta del caffè. Nella maggior parte dei casi invece una intranet aziendale ben strutturata sarà utile per risolvere problemi, scambiarsi informazioni sui clienti, lasciare per iscritto cose che altrimenti andrebbero perdute nel tempo, comunicare con gente che non sta nello stesso ufficio; e questo alla macchinetta del caffè difficilmente avviene.

Tutto questo potrebbe essere interessante, ma chi lavora con questi strumenti? E soprattutto chi ti installa queste cose in azienda? E i costi?
Rispondere a queste domande non è per niente semplice, perchè il settore è appena nato acerbo. Perchè esistono una marea di esperimenti, ma non una killer application. Esistono casi studio più o meno ecclatanti, ma nessuno sarà mai abbastanza esplicativo. Innanzi tutto serve cultura aziendale. Se un’organizzazione è per natura verticale e verticistica, difficilmente riusciremo a sfruttare al meglio questi sistemi.
Alla seconda domanda si può rispondere in questi termini: non esiste ancora la suite completa e definitiva. Quella in grado di adattarsi a tutte le esigenze e soddisfare ogni bisogno. Esistono però aziende che offrono soluzioni più o meno specifiche, che vanno opportunamente valutate in una prima fase di selezione del software. A tal proposito il punto di partenza è sicuramente il “quadrante magico” di Forrester.

I principali attori del settore sono:

• Suite 2.0 di Spikesource: Si pubblicizza come la piattaforma completa per l’enterprise 2.0. In effetti i componenti che la costituiscono sono i più noti del settore, su un’unica piattaforma sono integrati Movable Type (blog) e Social Text (wiki), oltre ad altri strumenti per la gestione RSS.
  E’ da valutare però attentamente la piattaforma, non sono infatti disponibili demo esplicative, questo può far pensare che l’interfaccia e l’usabilità siano ancora un po’ acerbe; almeno questa sensazione traspare dalla consultazione del sito ufficiale
• Movable Type Community Solution: A mio parere è tra le piattaforme più indicate se si vuole realizzare una community aziendale, dove ogni utente/dipendente dispone di un proprio blog personale. L’idea vincente è che l’utente interagisce coi vari strumenti in una logica bottom/up: i contenuti migliori vengono votati col sistema di ranking dagli altri utenti (lettori) fino a raggiungere notorietà.
  Ogni utente dispone di una pagina personale che può gestire come meglio crede. C’è la possibilità di aggiungere campi personalizzati al profilo utente, quindi ad esempio si possono inserire campi come “progetti avviati”, “clienti seguiti”, ecc..
  Per ogni utente viene tenuta traccia della sua attività all’interno della community, è quindi possibile vedere i commenti fatti, le risposte ai post nel forum, gli articoli pubblicati sul blog..
  E’ possibile creare dei blog multi-utente (sui quali più utenti possono scrivere – ideale per blog di progetto e per team di lavoro/ricerca), dispone inoltre dei forum.
  E’ presente una parte CMS, attraverso la quale è possibile pubblicare contenuti standard.
• Blogtronix: Un’altra piattaforma per creare un social network aziendale. A differenza di Movable Type, dispone anche di un wiki. Non ho ancora avuto modo di approfondirne le funzionalità ma a giudicare dallo screencast dimostrativo ha tutte le carte in regola.
• SocialText (enterprise wiki)
  
• ToughtFarmer (enterprise wiki)
  
• Cogenz (enterprise social bookmarking)
• Liferay (enterprise open sourceportal)
• TikiWiki
• Confluence Wiki

Alla terza domanda, quella sui costi, si risponde così: se vogliamo la suite bisogna pagare. Il mondo dell’open source non ha ancora una offerta affidabile rivolta alle aziende, o almeno nella mia esperienza ancora non mi è capitato nulla tra le mani.

Se qualcuno conosce e ha provato queste o altre applicazioni, in ottica aziendale, è il benvenuto. Sono curioso di scambiare opinioni e capire le esperienze fatte sul campo. Sono alle prese con uno studio di intranet per una azienda medio grande e mi piacerebbe condividere qualche battuta.

Piccola nota finale, nel valutare queste piattaforme spesso ci si dimentica della fatidica equazione: semplice=meglio.

Da quando ho creato il design per Geekissimo mi piovono in email un sacco di richieste per avere un tema simile. Ecco dunque che ho deciso di rilasciare un nuovo tema per wordpress, liberamente utilizzabile e modificabile. Si ispira appunto a Geekissimo, ma non è proprio uguale. Prima di tutto perchè quello è stato sviluppato su misura, in secondo luogo perchè ho voluto dare un tocco di colore. Resta il pezzo forte, ovvero la possibilità di salatare tra un articolo e l’altro con i comodi tasti “vola su” “vola giù”. Si tratta di un effetto ottenuto con jQuery, javascript che dalla versione 2.3 di wordpress viene distribuito direttamente nel core, ma che il tema carica direttamente per garantire la retrocompatibilità.
Per capire come rende non c’è niente di più semplice che dare un occhio alla demo.

Sfondo scuro, colori arcobaleno, con la possibilità di scegliere lo sfondo della testata. Ma andiamo con ordine..

Download

Scarica diplodGeek – Tema wordpress gratuito (versione 2.2)

Qui puoi vedere una demo di diploDGeek.

E’ disponibile anche la versione senza pannello di amministrazione. Diplodgeek 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 Diplodgeek senza pannello di amministrazione, tutte le personalizzazioni sono comunque effettuabili intervenendo direttamente sul file header.php (vedi istruzioni sotto).

Scarica diplodGeek – senza pannello di amministrazione (versione 2.2)

Installazione e attivazione

La procedura è sempre la solita. Si scariza il file zip e si decomprime la cartella /diplodgeek/ 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 diplodGeek come tema di base.

Una volta attivato il tema, andare in ‘Design’->’diploDgeek’. 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.

Cambio colori della testata

La testata è disponibile in 5 colori: azzurro, verde, giallo, viola, rosa.

Per cambiare colore alla testata è succifiente andare nel pannello di amministrazione del tema e scegliere la tipologia. Oltre ai colori base, è possibile caricare una immagine personalizzata nella cartella /images/ del tema, col nome “testata-personale.jpg”. Le dimensioni dell’immagine devono essere 890×200 pixel, ce n’è una di esempio già presente nella cartella.

Per i fanatici di geekissimo c’è anche l’opzione ‘geek-style’, che renderà il vostro blog simile al famoso blog geek.

Widget e video Youtube in sidebar

Il tema è widget ready, in questo modo sarà possibile modificare il contenuto della sidebar laterale direttamente dal pannello di amministrazione, senza intervenire sul codice. Sono state previste tre aree per i widget, la prima riguarda la colonna intera, la seconda interessa la semi-colonna di sinistra, mentre la terza incide sulla semi-colonna di destra.
Vedi l’immagine sottostante per maggiori dettagli.

E’ inoltre possibile pubblicare un video youtube direttamente in sidebar senza mettere mano al codice. Potete farlo dal pannello di amministrazione inserendo l’url embedded del video. Questo url si trova nell’attributo value del codice che youtube offre per inserire i propri video in pagine esterne. Per capire, nell’esempio sotto l’url interessato è evidenziato in grassetto.

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

Copiando solamente l’url nell’apposito campo del pannello di amministrazione del tema, apparirà sulla barra laterale anche il video youtube.
Questa funzionalità potrebbe tornare utile per pubblicare il classico video esplicativo che illustra il funzionamento dei feed rss..

Adsense

Dal pannello di amministrazione del tema è possibile impostare l’ID del proprio account adsense e decidere il colore dei link pubblicitari, in questo modo si attiveranno gli annunci adsense sul blog. Per disattivarli lasciare vuoto il campo relativo all’ID.

Footer

Il footer è espandibile cliccando sul bottoncino in basso a destra “dippiù”, contiene gli ultimi articoli pubblicati e l’archivio suddiviso per mesi. E’ possibile cambiare ciò che appare nel footer intervenendo sul file footer.php, è necessario però essere un minimo pratici con le funzioni di wordpress, con html e php per capire dove modificare il codice.

Qualche nota

Il tema è stato testato con wordpress 2.6, ma dovrebbe girare senza problemi anche sulle altre versioni. Supporta i tag e ha un template apposito per la pagina di archivio (che si può assegnare ad una pagina di wordpress). Viene rilasciato sotto licenza GPL, potete modificarlo, aggiustarlo, rivoluzionarlo. Vi chiedo solo di lasciare un link a questo sito.