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.

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ì..

Se avete voglia di sperimentare un po’, ecco come fare.

Ci sono due tipologie di application template:

• Site admin (file .stp): si tratta di template custom che si aggiungono alla template Gallery, per installarli è sufficiente avere diritti di site owner  (sono esclusivamente in inglese).
• Server admin (file .wsp): hanno funzionalità più avanzate che si integrano con la piattaforma Sharepoint, per installarli è necessario avere i permessi di amministratore sul server (sono tradotti in diverse lingue, tra cui anche l’italiano).

INSTALLAZIONE TEMPLATE .STP

1. Scompattare il file exe, verrà creato un file .stp
2. Accedere al sito sharepoint come membro del gruppo site owners
3. Cliccare ‘Site Actions’ (in alto a destra) e successivamente su ‘Site Settings’
4. Sotto la sezione Galleries, cliccare su ‘Site Templates’
5. Se non c’è questa funzione, probabilmente siamo un sito di secondo livello, bisogna andare nelle Site Settings del sito padre
6. Cliccare su Upload per caricare il nuovo site template, selezionando il file .stp precedentemente scompattato

Ora è possibile creare un nuovo sito con i template appena caricati, nella schermata di creazione nuovo sito, sotto a ‘Custom’ troveremo tutti quelli installati (vedi immagine sopra).

INSTALLAZIONE TEMPLATE .WSP

La prima operazione, da fare una sola volta, è l’installazione dell’ApplicationTemplateCore.
Questo è un pre-requisito per poter caricare tutti gli altri, ecco come fare:

1. Caricare il file ApplicationTemplateCore.wsp sul server
2. Accedere via prompt dos alla cartella:
   C:\program files\common files\microsoft shared\web server extensions\12\bin
3. Digitare il comando:
   ‘stsadm -o addsolution -filename <file_path>\ApplicationTemplateCore.wsp’
   Dove al posto di ‘<file_path>’ metteremo il percorso della directory dove abbiamo caricato il file
4. Poi digitare il comando:
   ‘stsadm -o deploysolution -name ApplicationTemplateCore.wsp -allowgacdeployment’
5. Poi digitare il comando:
   ‘stsadm -o copyappbincontent’

Dopo aver installato il core, per caricare un application template wsp si devono compiere le seguenti operazioni:

1. Scompattare il file exe
2. Caricare il file .wsp del template da installare nella cartella del server:
   C:\program files\common files\microsoft shared\web server extensions\12\bin
   Usiamo questa cartella per comodità, perché qui si trova il tool stsadm che useremo per l’installazione e il deployment del template.
3. Accedere via prompt dos a tale cartella e digitare il comando:
   ‘stsadm -o addsolution -filename <template_name>.wsp’
   Dove al posto di ‘<template_name>.wsp’ metteremo il nome del file
4. Poi digitare il comando:
   ‘stsadm -o deploysolution -name <template_name>.wsp –allowgacdeployment -immediate’
   Anche in questo caso, al posto di ‘<template_name>.wsp’ metteremo il nome del file
5. Per verificare l’avvenuta installazione accedere alla Central Administration di Sharepoint e navigare in ‘Operations  -> Global Configuration -> Solution Management’
   Qui si vedono tutte le soluzioni installate, se è andato tutto bene saranno marcate come ‘Globally Deployed’
6. Da linea di comando è bene lanciare un ‘iisreset’

Ora è possibile creare un nuovo sito con i template appena caricati, nella schermata di creazione nuovo sito, sotto ad ‘Application Templates’ troveremo tutti quelli installati (vedi figura sopra).

RIMOZIONE DI UN TEMPLATE .WSP

1. Via prompt digitare il comando:
   ‘stsadm -o retractsolution -name <template_name>.wsp -immediate’
   Dove al posto di ‘<template_name>.wsp’ metteremo il nome del file
   Questa operazione rimuove il template dalla lista di quelli disponibili in fase di creazione di un nuovo sito
2. Per eliminarlo completamente dal server, digitare il comando:
   ‘stsadm -o deletesolution -name <template_name>.wsp’
   Dove al posto di ‘<template_name>.wsp’ metteremo il nome del file

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.

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.

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

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

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

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

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

Partiamo dall’xhtml:

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


Ed ecco il CSS:

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


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

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


Cosa fa il codice?

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

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

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

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

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

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

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

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


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

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

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

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

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

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

Una piccola lista:

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

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

Conoscete altre chicche o finezze del caso?

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

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

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

E’ il caso di fare qualche puntualizzazione:

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

Ecco come si presenta il codice xhtml:


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

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

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

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

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

</div></div>


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


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


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

Se poi qualcuno avesse suggerimenti o consigli, ben vengano.

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

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.

E’ un po’ di tempo che non parlo di javascript, forse perché effettivamente ne scrivono tutti, e per qualche strana attitudine personale tendo a rigettare gli argomenti troppo inflazionati.
Fatto sta che javascript è una tecnologia sempre più utilizzata per gestire effetti e transizioni particolari sulle pagine web. Un anno fa tutti sembravano concordi sul fatto che Adobe Flex avrebbe soppiantato javascript, ajax e compagnia bella.
Di questo Air c’è in giro qualcosa (esistono diverse applicazioni interessanti..), ma ancora non si è verificata la diffusione di massa; ancora resta una tecnologia valida sulla carta ma non sfruttata in pieno, forse perchè è un sistema proprietario. Parlo da ignorante, non ho mai avuto modo di approfondire, e se qualcuno è in grado di smentirmi sono qui per ascoltarlo, mi piacerebbe sapere. Probabilmente l’espansione c’è, ma come tutte quelle che si rispettino è lenta e inesorabile. [Update: ma questo è tutto un altro discorso..]

Javascript è invece sempre più omnipresente, da Flickr al blog meno noto di tutti, le soluzioni e le proposte si sprecano.
Nell’utilizzare questi script bisogna stare molto attenti a garantire l’usabilità del sito anche per chi ha javascript disattivato e a non creare conflitti. L’integrazione dei diversi framework è ben lontana, spesso si finisce per costruire template con effetti accattivanti che poi vanno in difficoltà se abbinati a plugin che utilizzano framework differenti rispetto a quelli preventivati in fase di design. A tal proposito può risultare utile consultare questo articolo di edit che offre utili consigli per la scelta del framework più adatto; se poi si vuole avere un’idea più completa delle offerte possibili ci viene in aiuto questa esaustiva guida.

Qui invece vorrei fare il punto, raccogliendo tutte le cose che ho visto in giro negli ultimi mesi. Qualcuno probabilmente già ne avrà sentito parlare, per altri potrebbe essere un buon punto di partenza per farsi un’idea di ciò che il “mercato” offre.. Si tratta in genere di plugin o script a se stanti rilasciati dagli sviluppatori gratuitamente, quindi liberamente utilizzabili.

Framework più noti

• Mootools
• JQuery – JQuery UI (user interface) – Interface (framework per gli effetti)
• Prototype – Scriptaculous
• YUI

Gallerie multimediali

• Shadowbox (funziona con tutti i framewokr e carica diversi tipi di media)
  
• Thickbox (jquery)
  
• Slimbox (mootools)
• Lightbox (scriptaculous)
• prettyPhoto

• In questo sito invece è possibile trovare la raccolta di tutti i cloni di lightbox disponibili: attualmente ne conta ben 38

Utility

• Modalbox: per creare dialog-box
• VirtualTour: tour virtuali di ambienti (jquery)
• Markitup: editor javascript (jquery)
• Timeframe: calendario javascript
• Websnapr: bubble tooltip
• Spoiler Revealer: per far apparire un testo (jquery)
• Accordion solo CSS e javascript

Inutility

• Cubescape: per creare le tue composizioni cubiformi
• Supermario in javascript
• Supermario Kart

Menu di navigazione

Riporto solo i più interessanti, ce ne sono davvero una marea..

• Fisheye menu con mootools
• Fisheye menu con jquery
• Fisheye menu senza l’utilizzo di frameworks
• Fancy Menu
• iPod menu
• TabbedPane: menu a tab (prototype)

Ultima segnalazione per il post di Tom, che ha fatto una carrellata di alcuni effetti presenti su siti web, accompagnandoli con valide considerazioni.

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

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.

C’è un po’ di italian style, un po’ di innovazione, un po’ di eco-sensibilità nella joint venture Pininfarina-Bollorè. Nascerà un’auto totalmente elettrica, zero emissioni di CO2, sulla carta prestazioni degne di rispetto.

• Autonomia di 250 Km su percorsi urbani (quelli più duri, perchè pieni di accelerazioni)
• 5 ore per la carica completa
• 5 minuti di carica per effettuare 25 Km di strada
• vita utile che permette di oltrepassare 200.000 Km percorsi
• 4,9 secondi per raggiungere i 50 km/h
• velocità massima di 130 Km/h

Nel comunicato ufficiale del gruppo Bollorè si legge:

Bolloré and Pininfarina are teaming up to create a 50/50 joint venture to produce a 100% electric vehicle. The vehicle will be marketed under the Pininfarina brand. The total capital investment is estimated at 150 million euros. The vehicle will be manufactured in Italy and will benefit from Pinninfarina’s extensive track record in design and the production of top-of-the range vehicles. It will be equipped with the revolutionary Lithium Metal Polymer battery developed by the Bolloré Group.

Ovvero:

Bollorè e Pininfarina stanno collaborando alla creazione di una joint venture, con partecipazione 50/50, per produrre un’auto elettrica al 100%. Questo veicolo sarà commercializzato con il marchio Pininfarina. L’investimento totale è stimato in 150 milioni di euro. La vettura sarà prodotta in Italia e trarrà beneficio dalle competenze di Pinifarina nel design e nella produzione di veicoli di alta gamma. Sarà equipaggiata con la rivoluzionaria batteria “Lithium Metal Polymer” sviluppata dal gruppo Bollorè (dopo 15 anni di ricerche).

Quindi una partecipazione al 50% e la produzione in Italia. Il comunicato prosegue informando che le prime vetture saranno disponibili nell’estate 2009 (ordinabili già da Dicembre 2008). Sarà una vettura di alta gamma, sul costo ancora non trapela nulla, anche se Repubblica parla di indiscrezioni sui 20.000 euro. Il fatto che venga disegnata da Pininfarina dovrebbe essere una garanzia sul design, generalmente le vetture ecologiche hanno linee improponibili e decisamente poco attraenti. La speranza è che queste automobili abbiano successo e si inizino a vedere sempre più punti di ricarica, luoghi in cui è possibile allacciarsi alla corrente elettrica per fare “rifornimento”.

Anche se diversi problemi restano:

• Un’auto elettrica non è a impatto zero. Serve comunque energia elettrica per il suo funzionamento, questa deve essere prodotta da qualche centrale con relative emissioni inquinanti.. Sarebbe meglio vedere sul mercato l’auto a idrogeno o l’improbabile auto ad aria compressa.
• Sarà comunque una vettura di alta gamma (quindi con alti costi), che difficilmente potrà avere una diffusione di massa.
• Resta il problema delle infrastrutture, mancano le aree di servizio per la carica.

Sinceramente, dopo tanti annunci di auto futuristiche dalle mille possibilità, inizio a essere pessimista. Ben vengano queste notizie, ma finchè non uscirà qualcosa di veramente utilizzabile sul mercato, finchè queste fantastiche vetture non avranno costi paragonabili a quelle tradizionali (a parità di gamma), finchè non ci sarà un chiaro intento dei governi per spingere le case automobilistiche alla produzione di vetture ecologiche, resterò nel dubbio.

Intanto, ho scoperto che esiste una “associazione di cultori, ricercatori, innovatori e appassionati di fonti energetiche rinnovabili e di tecnologie efficienti“: EnergoClub. Hanno messo in piedi una lodevole iniziativa, per la costituzione di un gruppo di acquisto di auto elettriche, finalizzato alla “creazione di un consistente gruppo formato da persone che dichiarano il proprio interesse ad acquistare un’auto elettrica” con determinate caratteristiche. Fateci un salto!

Una demo?

Ecco la versione di prova con Nerino.

Da oggi Nerino ha un pannello di amministrazione tramite il quale si possono personalizzare diverse cose e gestire la pubblicazione degli annunci ad sense.

Le caratteristiche di Nerino:

• widget ready – puoi personalizzare la barra laterale in base alle tue esigenze tramite i widget
• adsense ready – puoi pubblicare annunci pubblicitari adsense senza mettere mano al codice
• possibilità di attivare le icone sui link a files (doc, pdf, ecc..), foto e filmati compresi Flickr e YouTube
• possibilità di avere il tema san-serif (ovvero i titoli coi caratteri senza grazie)
• comodi pulsanti per ingrandire il testo
• gestione degli archivi (per categorie, mese, tag..)
• Supporto ai Gravatars. Commenti ridisegnati, con l’aggiunta del numero del commento
• commenti dell’autore del blog evidenziati
• top-menù con un effetto gradiente
• tag alla fine dei singoli post
• favicon
• pagina 404 per la gestione degli accessi a pagine inesistenti
• comoda navigazione tra post precedenti e successivi quando ci si trova all’interno del singolo articolo
• barra di navigazione tra pagine precedenti e successive nella home-page e nelle pagine di archivio
• varie cosette e dettagli..

Download, Installazione e personalizzazione

Scarica Nerino – Template per wordpress gratuito (versione 2.3)

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

Scarica Nerino – senza pannello di amministrazione (versione 2.3)

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

Una volta attivato il tema comparirà la tab ‘Nerino‘ dalla quale si accede al pannello di amministrazione del tema. Chi ha la versione senza pannello può aprire il file header.php con un editor di testo (ad esempio notepad). Da qui è possibile:

• Attivare/Disattivare le icone sui link ai media e a documenti esterni
• Attivare/Disattivare i titoli con le grazie
• 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.

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

Ovviamente restano valide tutte le funzionalità della precedente versione.

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

Licenza

Questo tema è distribuito con licenza Creative Common (attribuzione): http://creativecommons.org/licenses/by/2.5/it/
Potete liberamente utilizzare e modificare il template a patto che venga citato l’autore con un link a diploD.

Qualche ringraziamento

Un grazie speciale a Daniele Salamina, che mi ha offerto validissimi consigli e ha contribuito attivamente allo sviluppo di Nerino. Le migliorie in ottica SEO e la gestione del messaggio 404 sono solo alcune delle “dritte” impartite da Daniele.

Un’altra persona che devo ringraziare è Paolo di 4exp, uno tra i primi utilizzatori del template, con il quale ci siamo spesso scambiati commenti sulle migliorie da fare..

La chicca..

Sono le icone sui link a files, filmati e immagini. E’ stato integrato nel tema il pacchetto Iconize, che permette di visualizzare le icone a fianco dei link che puntano a diversi tipi di files. Anche i link verso foto su Flickr o filmati di YouTube e delle più famose piattaforme di video e foto sharing vengono “iconizzati”.
Giusto per avere un’idea, i link su Nerino appaiono così.

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

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

Download e demo

Download di Sportemplate per WordPress (versione 1.5)

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

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

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

Installazione e attivazione

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

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

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

Personalizzazione della testata

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

Ecco come appare il pannello di amministrazione del tema:

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

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

Personalizzazione della sidebar

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

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

Extra e Licenza

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

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