Le mappe di Google sono un must per qualsiasi pagina contatti, ma possono diventare anche un accattivante elemento di design di una pagina web, se non addirittura l’elemento fondamentale di un sito. Ogni tanto è bello poterle personalizzare, coi propri colori e il proprio design. Con la versione 3 delle API di Google Maps, è possibile cambiare lo stile alle mappe e personalizzarle.. ma bisogna perderci tempo, per i pigri coloro che credono nella condivisione ecco Snazzy Maps, una raccolta di mappe pronte all’uso modificate nei colori e negli elementi visualizzati, ad esempio togliendo il nome delle città o delle strade, cambiando il colore all’acqua e quant’altro..

Questo è il mio personale elenco di stili da tenere in considerazione:

• Subtle Grayscale: va bene sempre, una mappa sulla scala dei grigi, non c’è luogo in cui non si possa mettere.
• Blue Water: sempre scala di grigi, ma il blu dell’acqua accende tutto.
• Lunar landscape: dark style, una mappa nera nera per chi non può rinunciare alla notte.
• Paper: da architetto, punto.
• Unimposed topography: senza nulla, nemmeno le strade.

Buone mappe a tutti.

Immagina che questa band voglia avere una sezione dove presenta i propri dischi, magari un widget sulla sidebar o una pagina dedicata. Servirà quindi un tipo di post personalizzato: non sono articoli semplici, non sono pagine. Sono dischi. E a questi dischi verranno associati anche una serie di campi personalizzati, come ad esempio l’anno di produzione, l’etichetta, i crediti per il missaggio. E poi, perchè no, anche il video di youtube, se questo esiste. Infine, questi dischi possono appartenere a due diverse categorie: album o singoli.

Si tratta insomma di un oggetto a parte, da usare nel pannello di amministrazione di wordpress, che poi apparirà come rappresentato nell’immagine sotto.

Per fare ciò, il punto centrale è il famoso file di template functions.php, vediamo quali sono le cose da fare.

Dovremo innanzi tutto dichiarare il nuovo tipo post, dicendo che questo nuovo oggetto sarà “catalogabile” con due tassonomie: i tag e le tipologie. I tag sono i conosciuti tag nativi di wordpress che vengono utilizzati anche nei normali post del blog, mentre le tipologie sono una nuova tassonomia custom, che andremo a definire in seguito, e ci servirà per contraddistinguere i singoli dagli album, o comunque per creare una sorta di categorie per i post di tipo disco. Partiamo quindi aggiungendo il codice qui sotto:

/*******************************
DISCHI
aggiunge un tipo post custom dal nome "disco"
che avrà un titolo, un contenuto esteso, un riassunto,
il riferimento all'autore e una immagine in evidenza,
oltre ad alcuni attributi custom
********************************/

add_action( 'init', 'register_cpt_disco' );
function register_cpt_disco() {
$labels = array(
'name' => _x( 'Dischi', 'disco' ),
'singular_name' => _x( 'Disco', 'disco' ),
'add_new' => _x( 'Aggiungi Nuovo', 'disco' ),
'add_new_item' => _x( 'Aggiungi Nuovo Disco', 'disco' ),
'edit_item' => _x( 'Modifica Disco', 'disco' ),
'new_item' => _x( 'Nuovo Disco', 'disco' ),
'view_item' => _x( 'Visualizza Disco', 'disco' ),
'search_items' => _x( 'Cerca Dischi', 'disco' ),
'not_found' => _x( 'Nessun disco trovato', 'disco' ),
'not_found_in_trash' => _x( 'Nessun disco trovato nel cestino', 'disco' ),
'parent_item_colon' => _x( 'Disco Padre:', 'disco' ),
'menu_name' => _x( 'Dischi', 'disco' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => false,
'description' => 'Dischi della Band',
//specifico quali proprietà avrà questo nuovo tipo di post
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields' ),
'taxonomies' => array( 'tipologie', 'post_tag' ),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type( 'disco', $args );
}
/* aggiungo dei custom fields (year_completed, videoid, labelc,credits) al tipo post "disco"
il primo (year_completed) lo aggiungo come "year_completed-meta"
gli altri (videoid, labelc,credits) li aggiungo come "credits_meta" */
add_action("admin_init", "admin_init");
function admin_init(){
add_meta_box("year_completed-meta", "Year Completed", "year_completed", "disco", "side", "low");
add_meta_box("credits_meta", "Credits", "credits_meta", "disco", "normal", "low");
}
function year_completed(){
global $post;
$custom = get_post_custom($post->ID);
$year_completed = $custom["year_completed"][0];
?>
<label>Year:</label>
<input name="year_completed" value="<?php echo $year_completed; ?>" />
<?php }
function credits_meta() {
global $post;
$custom = get_post_custom($post->ID);
$videoid = $custom["videoid"][0];
$labelc = $custom["labelc"][0];
$credits = $custom["credits"][0]; ?>
<p><label>Youtube Video ID:</label><br />
<textarea cols="50" rows="5" name="videoid"><?php echo $videoid; ?></textarea></p>
<p><label>Label credits:</label><br />
<textarea cols="50" rows="5" name="labelc"><?php echo $labelc; ?></textarea></p>
<p><label>Mastering credits:</label><br />
<textarea cols="50" rows="5" name="credits"><?php echo $credits; ?></textarea></p>
<?php } ?>

Ora dobbiamo invece definire una nuova tassonomia per questo tipo di post, servirà quindi aggiungere anche il codice sottostante:

add_action( 'init', 'register_taxonomy_tipologie' );
function register_taxonomy_tipologie() {
$labels = array(
'name' => _x( 'Tipologie', 'tipologie' ),
'singular_name' => _x( 'Tipologia', 'tipologie' ),
'search_items' => _x( 'Cerca Tipologie', 'tipologie' ),
'popular_items' => _x( 'Tipologie Principali', 'tipologie' ),
'all_items' => _x( 'Tutte le Tipologie', 'tipologie' ),
'parent_item' => _x( 'Parent Tipologia', 'tipologie' ),
'parent_item_colon' => _x( 'Parent Tipologia:', 'tipologie' ),
'edit_item' => _x( 'Modifica Tipologia', 'tipologie' ),
'update_item' => _x( 'Aggiorna Tipologia', 'tipologie' ),
'add_new_item' => _x( 'Aggiungi nuova Tipologia', 'tipologie' ),
'new_item_name' => _x( 'Nuova Tipologia', 'tipologie' ),
'separate_items_with_commas' => _x( 'Separate tipologie with commas', 'tipologie' ),
'add_or_remove_items' => _x( 'Add or remove tipologie', 'tipologie' ),
'choose_from_most_used' => _x( 'Choose from the most used tipologie', 'tipologie' ),
'menu_name' => _x( 'Tipologie', 'tipologie' ),
);
$args = array(
'labels' => $labels,
'public' => true,
'show_in_nav_menus' => true,
'show_ui' => true,
'show_tagcloud' => false,
'hierarchical' => true,
'rewrite' => true,
'query_var' => true
);
register_taxonomy( 'tipologie', array('disco'), $args );
}
// al salvataggio dei post i valori dei custom fields devono essere memorizzati
add_action('save_post', 'save_details');
function save_details(){
global $post;
update_post_meta($post->ID, "year_completed", $_POST["year_completed"]);
update_post_meta($post->ID, "videoid", $_POST["videoid"]);
update_post_meta($post->ID, "labelc", $_POST["labelc"]);
update_post_meta($post->ID, "credits", $_POST["credits"]);
}

Si può scrivere questo codice a mano, oppure possono venirci in aiuto due comodissimi tool on line (entrambi di themergency):

• WordPress Custom Post Types Generator
• WordPress Custom Taxonomies Generator

A questo punto non resta che installare il nostro tema e popolare il sito di contenuti custom, che poi potranno essere utilizzati per creare layout specifici. Questo è un argomento che non viene trattato qui, ma giusto per dare un’imbeccata, basti pensare a come è possibile impostare la funzione query_posts() indicando di estrarre dei custom post types:


<?php
//prendo gli ultimi 16 dischi nella categoria album
query_posts('showposts=16&post_type="disco"&tipologie="album"');
?>


Per chi volesse approfondire il tema, ecco alcune utili risorse:

• http://net.tutsplus.com/tutorials/wordpress/rock-solid-wordpress-3-0-themes-using-custom-post-types/
• http://wp.tutsplus.com/tutorials/quick-tip-3-tools-for-making-instant-custom-post-types/
• http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress
• http://designwoop.com/2012/05/quality-tutorials-for-creating-wordpress-custom-post-types/
• http://wptheming.com/2011/11/event-posts-in-wordpress/

Per capire come utilizzare lo slideshow di immagini si può dare un’occhiata alle demo sul sito ufficiale, ma credo che il meglio di questo slider sia nelle possibilità di utilizzo con pezzi di codice formattato (con testo e immagini), per poter creare fluide e accattivanti presentazioni di news o quant’altro.

Andiamo subito al sodo e vediamo come si può utilizzare all’interno di un tema wordpress per presentare articoli o elementi di altro tipo.

Ci sono tre cose fondamentali: il codice javascript, il codice html e il codice CSS. Partiamo con javascript; all’interno del tag <head> dovremo mettere questo pezzo di codice:

<script type="text/javascript">
$(window).load(function() {
$('#flexslider').flexslider({
animation: "slide",
controlsContainer: "#flex-container",
prevText: "Prec",
nextText: "Succ"    });
});


Mentre nel codice php che presenta gli articoli, ad esempio nel file home.php, dovremo utilizzare questo:


<?php query_posts('showposts=6&cat=3'); //prendo gli ultimi 6 articoli delle top news ?>
<?php if (have_posts()) : ?>
<div>
<div id="flex-container">
<div id="flexslider">
<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<div>
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium', array('class' => 'img-news')); ?>
<?php endif; ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Leggi tutto...</a>
<div><div data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-font="lucida grande"></div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
</div>
<?php endif; ?>
<?php // Reset Query
wp_reset_query(); ?>


Il mestiere di questo pezzo di codice non è altro che recuperare gli ultimi 6 articoli di una determinata categoria (con ID=3), tramite la function query_posts(); per poi presentare ogni articolo con la sua immagine in evidenza e il suo riassunto. Al di là delle classi css attribuite agli elementi, che sono comunque poco rilevanti per il nostro esempio, ciò che mi preme far notare è che tutti questi elementi stanno racchiusi in un elemento di lista <li>, che sarà uno dei 6 slide che ruoteranno.

Veniamo ora al bello: il foglio di stile. Di seguito il mio CSS riadattato partendo da quello di default.

/* jQuery FlexSlider v2.0 */
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
/*.flexslider .slides img {width: 100%; display: block;} */
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flex-container { position: relative;}
.flexslider {margin: 0 0 5px 0; position: relative;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
/* Direction Nav */
.flex-direction-nav { display: block; position: absolute; top: 50%; background: transparent; width: 100%;
opacity: 0.2;
transition:opacity 1s;
-moz-transition:opacity 1s; /* Firefox 4 */
-webkit-transition:opacity 1s; /* Safari and Chrome */
-o-transition:opacity 1s; /* Opera */ }
.flex-container .flex-direction-nav:hover { opacity: 1; }
.flex-direction-nav a {width: 30px; height: 30px; margin: -30px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; cursor: pointer; text-indent: -9999px; }
.flex-direction-nav .next {background-position: 100% 0; right: 5px;}
.flex-direction-nav .prev {left: 5px;}
/* Control Nav */
.flex-control-nav {width: 100%; position: relative; bottom: 0px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-nav li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-nav li a.active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .active {opacity: 1; cursor: default;}


Con un pizzico di CSS3 è possibile fare in modo che le frecce di navigazione appaiano evidenti solo al passaggio del mouse, mentre rimangano in trasparenza mentre scorrono le notizie. Il risultato finale si può vedere qui.

Buono slideshow a tutti. ;)

Si chiama Projekktor, ed è davvero ciò che cercavo da tempo. Un player senza fronzoli, che funzioni su tutti i browser. Senza flash, che quegli aggeggi piccoli e cool così come gli attrezzi grossi e prestanti non supportano. jQuery certo, ma anche il pulitissimo HTML5.

Adoro questo pezzo di codice:

<video id="player_a" poster="intro.png" title="this is Projekktor" width="640" height="385" controls>
<source src="intro.ogv" type="video/ogg" />
<source src="intro.mp4" type="video/mp4" />
<source src="intro.webm" type="video/mp4" />
</video>
<script type="text/javascript">$(document).ready(function() {projekktor('#player_a'); // instantiation
});</script>

Chiaro e leggibile, grazie al nuovo tag <video> HTML5 ormai supportato da diversi browser. In sostanza viene specificata nell’attributo poster una immagine di partenza da far visualizzare al caricamento dell’oggetto e diverse sorgenti video, questo per garantire una maggiore compatibilità sui diversi sistemi.

Il plugin jQuery si occupa del resto: playlist, gestione dei temi grafici.. ci sono pure le API disponibili.

Perfetto insomma!

Ricerche Maestre è un motore di ricerca per bambini, genitori e maestri che seleziona siti scelti da esperti insegnanti della Scuola Primaria. Si possono trovare risorse scolastiche per la scuola elementare e si può navigare all’interno di siti adatti a bambini dai 3 ai 14 anni, cercando contenuti educativi e di svago. La ricerca è immediata ed efficace. Il motore va dritto al bersaglio, tecnologia Google.

E il design? Una paginetta che mi ha dato un sacco di soddisfazioni. Nulla di sconvolgente, ma c’era una piccola sfida da affrontare: mettere tutto  su una stessa pagina html, dal form di ricerca ai risultati, compresi i testi informativi e di corredo. Con un po’ di javascript, si può.

Innanzi tutto, un plugin di jQuery per riprodurre il famoso effetto del sito di Coda. Una valida alternativa potrebbe essere questo coda-slider, anch’esso plugin jquery, con una buona documentazione sugli esempi demo. In secondo luogo alcuni div che contengono i risultati di ricerca ed il gioco è fatto!

Questo fantastico effetto è facilmente replicabile, l’idea è quella di riutilizzarlo per il prossimo tema wordpress, è un’anteprima!

Insomma, Ricerche Maestre è un motore di ricerca personalizzato a cura del Maestro Alberto Piccini, al quale collaborano Paola Limone, Lidia Pantaleo, Annarita Ruberto, Renato Murelli. Ricerche Maestre al momento indicizza circa 3.000 siti selezionati tra i migliori reperibili in rete, per bambini e famiglie, a carattere divulgativo e informativo, educativi, scolastici e di insegnanti.

Se avete bambini: il luogo giusto per iniziare le esplorazioni della rete!

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

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

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

Download del Tema

Scarica diploMagazine – Template per wordpress gratuito (versione 1.0)

Uno Slideshow centrale dove mostrare foto e titoli a rotazione

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

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

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

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

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

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

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

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

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

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

Attivare Google Adsense sul proprio sito

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

Impostare le colonne e le categorie da visualizzare in home page

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

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

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

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

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

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

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

Quattro spazi widget ready, tra sidebar e footer

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

Archivi, commenti e altro

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

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

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

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

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

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

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

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

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

Questo il codice php:

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

E questo il codice CSS:

#header h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 10px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
letter-spacing: -1px;
text-decoration: none;
text-align: left;
color: #f2f0f1;
background: transparent url(images/logo.gif) no-repeat top left;
width: 357px;
height: 79px;
/* posizione del titolo principale */
top: 15px; left: 185px;
}

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

Ovviamente consigli e suggerimenti sono sempre ben accetti.

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

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

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

Prima di tutto il codice.

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


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

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

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

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

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

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

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

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

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

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

Il risultato HTML è il seguente:

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

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

Buon design a tutti..

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

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.

Esistono fondamentalmente due tipi di presentazioni: 

I think that the reason the experts disagree is that they are talking at cross-purposes: they are talking about entirely different types of presentation. To understand this, it helps to understand the idea of presentation idiom. A presentation idiom is a form of expression with an associated set of design principles. I call the two main types of presentation idiom Ballroom style and Conference Room style. Ballroom style presentations are what most typical PowerPoint presentations are trying to be: colorful, vibrant, attention-grabbing, and (sometimes) noisy. They typically take place in a large, dark room—such as a hotel ballroom. Conference room style presentations are more understated: they have less color, with more details on each page; they are more likely to be on printed handouts than projected slides, and they are more suited to your average corporate conference room. [http://www.extremepresentation.com/crsbrs/]

Per farla breve, c’è la presentazione che deve catturare l’attenzione (ballroom style), con tanti colori e belle immagini; e quella che deve incentivare l’interazione (conference room), stimolare gli interventi dei partecipanti e descrivere nel dettaglio le cose. Nel caso di una tesi di laurea credo sia decisamente più azzeccata la prima: risvegliare le attenzioni di una commissione assorta e poco coinvolta. Se invece stiamo preparando una presentazione aziendale da discutere col proprio team, è sicuramente meglio la seconda tipologia.

Il metodo proposto da Abela prevede 10 passi, la lettura è veloce e snella.. se siete alle prese con una presentazione e volete fare le cose per bene, ne consiglio la lettura.

Molto comodo a mio avviso lo schema di selezione dei grafici, sulla base delle variabili in gioco e del messaggio da comunicare. Chi ha voglia di tradurlo in italiano?

Se poi oltre alla teoria si vuole vedere la pratica, meglio passare su slideshare: ci sono davvero un sacco di presentazioni accattivanti (ma questo era scontato).

Se lo fanno loro possiamo farlo anche noi..

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.

1. Accedere al server sul quale è installato sharepoint e posizionarsi nella cartella:
   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES
2. Copiare la cartella “Simple” e rinominare la cartella copiata a piacere, in questo caso la chiameremo “Miotema”
3. Nella cartella “Miotema” rinominare il file “SIMPLE.INF” in “MIOTEMA.INF”, tutto in caratteri maiuscoli.
4. Aprire il file “MIOTEMA.INF” con un editor di testo e sostituire tutte le occorrenze di “Simple” con il termine “Miotema”. Il risultato sarà come il seguente:
   

   [info]
   title=Miotema
   codepage=65001
   version=3.00
   format=3.00
   readonly=true
   refcount=0

   [titles]
   1031= Miotema
   1036= Miotema
   1040= Miotema
   …

5. Aprire con un editor di testo il file che si trova nella posizione:
   C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPThemes.xml
6. Aggiungere all’interno del tag <SPThemes> le seguenti linee di codice:
   

   <Templates>
   <TemplateID>Miotema</TemplateID>
   <DisplayName> Miotema </DisplayName>
   <Description> Tema creato da me.</Description>
   <Thumbnail>images/thlmiotema.gif</Thumbnail>
   <Preview>images/thmiotema.gif</Preview>
   </Templates>

   NB: Ovviamente se vogliamo le preview bisognerà creare le immagini gif e inserirle nella cartella images del tema.

7. Per rendere visibile il tema nella lista di quelli disponibili sarà necessario fare un issreset (dal prompt di DOS: “iisreset /noforce”).

Ora il tema è caricato, per modificare colori e quant’altro bisognerà intervenire sul file css, che si trova alla posizione:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\MIOTEMA\theme.css
Ogni volta che si fanno delle modifiche è bene fare un iisreset e dalla mia esperienza è bene evitare di fare modifiche su temi che sono attualmente in uso su qualche sito sharepoint, altrimenti queste non vengono correttamente caricate al riavvio del server.

Se invece c’è bisogno di eseguire modifiche strutturali alle pagine, per rimuovere o aggiungere blocchi, sarà necessario fare ricorso a Sharepoint Designer tramite il quale si possono costruire o elaborare le master pages, accedendo al sito in questione.
Buona customizzazione! ;)

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

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!

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

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

Scarica il set di icone “social bookmark italia”

Quali sono i siti “iconizzati”?

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

Più gli immancabili stranieri:

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