Feed RSS

Archive for October, 2008

Rolloboy

Posted by daniele on 10.30.08

rolloboy

E’ finalmente on line un grande aggregatore di prodezze, il mio blog personale: rolloboy.com. Se vi va dateci un’occhiata. Ci ho importatato dentro il vecchio blog rollino.splinder.com, quindi ci sono un po’ di post vecchi che non volevo perdere… La grafica ed il tema (che ovviamente ho realizzato io, basandomi sul mio tema greenlips che ha perso una certa dose di – ehm – sobrietà) sono ancora da perfezionare, ma già si respira una certa follia e l’atmosfera che avevo in mente.

Comunque tenetelo d’occhio, sarà un luogo di sperimentazione (oltre che di svago) per soluzioni meno tecniche e magari più social: se volete immettervi nel flusso di prodezze a go go senza perdere un colpo, l’indirizzo del feed rss è qui.

Wordpress: elencare le sottopagine della pagina corrente nella sidebar

Posted by daniele on 10.29.08

In Worpdress è possibile creare pagine e sottopagine. Nel momento in cui si crea una pagina è possibile infatti specificare una pagina “madre”. Più pagine quindi possono avere in comune la stessa “madre”, che è un altro modo per dire che più sottopagine dipendono dalla stessa pagina.
E’ un modo per ordinare gerarchicamente i propri contenuti e può essere molto utile.

Vediamo come visualizzare, all’interno di una pagina, nella sidebar, un elenco di link a tutte le pagine “sorelle” di quella corrente, ed il link alla pagina madre.
Ecco un esempio di quello che andremo a realizzare: nella sidebar sotto il modulo per la ricerca compare un elenco delle sottopagine della pagina che state visualizzando.

Verificheremo che la pagina corrente sia una sottopagina: in questo caso recupereremo l’ID della pagina madre e visualizzeremo un link a tutte le “figlie” di questa. Se invece la pagina corrente non è una sottopagina faremo in modo di visualizzare tutte le pagine figlie.

Alla variabile $parentId assegneremo l’ID della pagina di cui verrano visualizzate le figlie (o sottopagine). Quindi se quella corrente è una pagina “figlia”, $parentId conterrà l’ID della rispettiva pagina madre. Se la pagina corrente invece non ha “madre” il valore da assegnare a $parentId sara proprio l’ID della pagina corrente, in modo che ne vengano visulizzate le figlie.

global $wp_query;
 
if( empty($wp_query->post->post_parent) ) {
$parentId = $wp_query->post->ID;
$linktop=false;
$parenttitle = $wp_query->post->post_title;

} else {
$parentId = $wp_query->post->post_parent;
$parenttitle = $wp_query->post_parent->post_title;
$linktop=true;

}

La variabile $linktop ci servirà per produrre o meno un link alla pagina madre: se già ci troviamo in una pagina di questo tipo il link è inutile, poichè la pagina madre è proprio quella che stiamo visualizzando.
Recuperato l’ID della pagina madre, dobbiamo procurarci il titolo di questa, per visualizzarlo in testa al menu.

$postparentvalues = get_post($parentId);
$parenttitle = $postparentvalues->post_title;

Ricaveremo anche il permalink, ma solo nel caso in cui quella corrente non sia la pagina madre stessa perchè – come detto – solo in quest’ultimo caso è necessario il link. Ed è proprio per questa verifica che abbiamo specificato $linktop, come TRUE o FALSE.
Ecco allora il primo output con il titolo della pagina madre, ed eventualmente un link ad essa (se quella corrente è una pagina figlia).

<?php if ($linktop) { ?><a href="<?php echo get_permalink($parentId); ?>"><?php } ?>
<?php echo $parenttitle; ?>
<?php if ($linktop) { ?></a><?php } ?>

A questo punto non resta che utilizzare la funzione wp_list_pages() per visualizzare la lista con tutte le sottopagine della “madre” già individuata. A questo scopo è stato previsto il parametro child_of, al quale assegneremo ancora una volta il valore di $parentId.

wp_list_pages(title_li=&child_of='.$parentId.'&sort_column=menu_order);

Tutto qui, aggiungiamo solo la condizione if (is_page) in modo che questo “menu” compaia nella sidebar solo se ci troviamo all’interno di una pagina.
Ecco il codice completo, con un minimo di html:

<?php if (is_page()) {
global $wp_query;
 
if( empty($wp_query->post->post_parent) ) {
$parentid = $wp_query->post->ID;
$linktop=false;
$parenttitle = $wp_query->post->post_title;

} else {
$parentId = $wp_query->post->post_parent;
$parenttitle = $wp_query->post_parent->post_title;
$linktop=true;

}


$postparentvalues = get_post($parentId);
$parenttitle = $postparentvalues->post_title;
?>
<h3>
<?php if ($linktop) { ?><a href="<?php echo get_permalink($parentId); ?>"><?php } ?>
<?php echo $parenttitle; ?>
<?php if ($linktop) { ?></a><?php } ?>
</h3>
<ul>
wp_list_pages('title_li=&child_of='.$parentId.'&sort_column=menu_order');
</ul>
<?php } ?>

Un’ultima avvertenza: questo script non funziona per qualche strano motivo con le sotto-sotto pagine, ed è un vero peccato… se qualcuno sa perchè o come risovere il problema, lo aspetto nei commenti .
E infine qualche link utile per comprendere a pieno questo tutorial:
la funzione wp-query()
la funzione wp_list_pages()

Modificare checkbox, radiobutton, e select con jQuery: due plugin

Posted by daniele on 10.24.08

Assolutamente da mettere alla prova questo plugin per jQuery che permette di modificare l’aspetto del campo SELECT di un form. Nell’immagine si vede un SELECT così come apparirebbe normalmente (in questo caso su firefox) e – a destra – un possibile “dopo la cura” fatta con jQuery e Linkselect.

Per intervenire sull’aspetto di radiobutton e checkbox si può usare invece Pretty Checkbox.
Ecco il risultato:

A parte gli innegabili vantaggi estetici, soluzioni come queste, che passano per javascript, consentono di controllare l’aspetto di questi elementi del form in modo che risultino identici su tutti i principali browsers, che come è noto li renderizzano in maniera totalmente differente.

Wordpress helper: un estensione di Firefox per blogger e developer

Posted by daniele on 10.24.08

Qualche tempo avevo segnalato alcune delle estensioni per firefox utili al webdesigner. In questo caso voglio presentarvi Wordpress Helper, un’addon che potreste trovare utile, sia come blogger, sia come sviluppatori.
Se utilizzate Wordpress come piattaforma di blogging, questa estensione per Firefox potrebbe tornarvi molto utile. Cliccando sull’icona di Wordpress helper in basso, nella barra di stato, si può accedere rapidamente alle pagine principali del backend dei blog wordpress che gestite (al menu è infatti possibile aggiungere più di un blog, oltre che link personali a risorse specifiche).

wordpress helper screenshot

L’estensione può essere utile anche nel caso in cui sviluppiate per wordpress: un click con il tasto destro vi permette di scegliere tra le varie risorse presenti on line per ottenere informazioni, o effettuare la ricerca per il testo selezionato all’interno della documentazione di WP.

Io ho cominciato ad usarla, e la trovo decisamente utile.

Ecco i link: Wordpress Helper tra i firefox addons, oppure la pagina sul sito dell’autore.

Tab con jQuery: il plugin idTabs

Posted by daniele on 10.15.08

Esistono diverse risosrse per creare tab più o meno sofisticate con jQuery: Tabs 3 per esempio, incluso nella jQuery U.I, e che dovrebbe riuscire a soddisfare tutte le vostre esigenze (parlo di tab s’intende), fino ad arrivare a qualcosa di più corposo come Coda slider, un plugin che tra le altre cose è in grado di generare delle tab. Se invece avete bisogno di una soluzione semplice e che vi costi solo qualche kbyte di javascript potete provare il plugin idTabs.

Qui c’è una live demo

Il funzionamento del plugin è abbastanza semplice: innanzitutto come al solito includiamo jQuery ed il plugin stesso nella pagina.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script>

A questo punto i link presenti all’interno dell’elemento con la classe idTabs funzionano da pulsanti per la navigazione: l’attributo href di questi specifica quale div deve essere visualizzato. il markup è semplicissimo:

<div class="tabcontainer">
<ul class="idTabs">
	<li><a href="#lorem">Lorem...</a></li>
	<li><a href="#morbi">morbi!</a></li>
	<li><a href="#fermentum">fermentum</a></li>
</ul>
<div id="lorem">contenuto del primo div</div>
<div id="morbi">contenuto del secondo div</div>
<div id="fermentum">contenuto del terzo div</div>
</div>

Evidentemente sarà necessario impostare lo stile degli elementi in gioco. Bisognerà specificare la classe selected, che il plugin assegna automaticamente alla tab corrente.

ul.idTabs li a {float: left; padding:  5px;
text-decoration: none; background: #444; color: #fff}
.tabcontainer div {clear:left; padding: 10px; background: #fff}
ul.idTabs li a.selected {background: #fff; color: #444}

Ecco il link: idTabs.

Faccio siti

Posted by daniele on 10.13.08

(clicca per ingrandire)

Grazie a Lauryn per questo schema che riassume perfettamente la situazione in cui molti di noi si trovano alla domanda che lavoro fai?

Flash e content management

Posted by daniele on 10.13.08

Eric Holter pubblica un post su Agency Critique dal titolo abbastanza esplicito: Agency Website Gaffes: #3. Flash. Già in passato su questo blog avevo espresso le mie perplessità sulla validità di Flash per realizzare interi siti internet, soprattutto dal punto di vista SEO. Ovviamente la difficoltà con cui i motori di ricerca indicizzano i contenuti flash è anche al centro del post di Holter, ma questa volta, tra i tanti svantaggi che Ageny Critique ricorda mi preme sottolineare l’aspetto del content management e dell’aggiornamento delle pagine:

Flash a volte viene utilizzato non perchè è la migliore piattaforma per il sito, ma perchè è lo strumento che il designer padroneggia meglio. Cosa che si traduce presumbilmente in un CMS povero, e quindi in meno update sui contenuti.

Ed in effetti – aggiungo io – molte volte chi si ritrova un mirabolante sito in flash è orgoglioso del suo sito, ma capita anche che qualcuno si lamenti della difficoltà con cui riesce ad aggiornarlo.
Il post di Holter continua ipotizzando le ragioni per cui le webagency preferiscono proporre Flash ai loro clienti, vale la pena leggerlo: Agency Website Gaffes: #3. Flash

(A questo punto devo dirlo: se c’è qualcosa che non sopporto nella vita sono i blog in flash).

Scroller RSS con jQuery e Simplepie: variante #3

Posted by daniele on 10.08.08

Ho realizzato una nuova semplice variante dello scroller Rss, che abbiamo visto in questo post. In questo caso lo scroller visualizza un solo item per volta: la differenza sostanziale rispetto al primo esempio è che lo scrolling avviene in senso orizzontale. Non mi soffermo ancora sul codice necessario per parsare il feed, sul markup, il foglio di stile, e le poche (grazie a jQuery) righe di codice javascript necessarie per creare questo scroller, per il semplice fatto che tutte le informazioni (e tutti i link del caso) si trovano sempre nel primo post della serie, mentre dalla pagina della live demo è scaricabile tutto il codice. Ecco il link allo scroller n.3

Mentre qui trovate la live demo n.1 e qui la n.2
Qui il primo post con il tutorial dettagliato.

Rendere più accattivante l’interfaccia con jQuery: quattro utili risorse

Posted by daniele on 10.08.08

Con jQuery è un gioco da ragazzi rendere più accattivanti le pagine web che stiamo realizzando (e porre un limite alle richieste di clienti che vorrebbero un sito tutto in flash…). Ecco quattro link (un tutorial e tre plugin) in cui mi sono imbattutto negli ultimi giorni e sui quali è ormai evidente che non scrivero mai un post più approfondito.

Sample Wordpress Content: mai più ‘lorem ipsum’ scritti a manina

Posted by daniele on 10.03.08

Ogni volta che si realizza un tema per Wordpress capita di dover pubblicare post di prova contenenenti una serie di elementi, come immagini allineate in un certo modo, liste, link, citazioni, ecc.: esclusivamente per mettere alla prova il foglio di stile ed il design che stiamo realizzando. Capita anche di dover inserire commenti, creare categorie e sottocategorie ad hoc, pagine e sottopagine piene di lorem ipsum, post su post con timestamp modificato in modo da creare archivi mensili: tutto con il semplice scopo di vedere se il tema che stiamo progettando funziona a dovere.

Non importa quanti temi Wp uno abbia alle spalle, ogni volta questa fatica sembra inevitabile.

Ecco perchè Wpcandy in questi giorni ha deciso di pubblicare Sample Wordpress Content. Importando questo file XML in WP (manage > import > wodpress) una serie di post e pagine vengono automaticamente pubblicate sul blog, contenenti tutto (o quasi tutto) quello di cui abbiamo bisogno per mettere alla prova il tema che stiamo realizzando. Fatemielo dire: come ho fatto a non pensarci prima.

Uno strumento utilissimo ed assolutamente da provare: Sample Wordpress Content.