In attesa di tempi migliori per poter tornare a scrivere su queste pagine con più intensità (mi sono segnato davvero un sacco di appunti..), segnalo questo incantevole grafico fatto con sapienza. Si tratta del Better Life Index. Descrive l’indice di desiderabilità di una nazione in base ai propri valori, tenendo conto di una serie di indicatori sociali. Ecco il video di presentazione dell’iniziativa.

Tutte le informazioni sull’iniziativa sono disponibili a questa pagina; per farla breve: vengono confrontati i 34 Paesi facenti parte dell’OCSE, l’Organizzazione per la Cooperazione lo Sviluppo Economico. Non è soltanto un mero gioco di javascript, da questo sito si possono imparare svariate cose, cliccando sul “fiore” della nazione è infatti possibile leggere un report sulle performance in generale e sulle politiche messe in atto nei singoli aspetti del Better Life Index.

Si può creare il proprio Better Life Index e condividerlo come ho fatto sopra, sia su un blog che via Facebook o Twitter. Perchè provare e condividere? Ogni volta che si crea un indice, entrerà in una banca dati accessibile al pubblico. Nel corso del tempo, questo aiuterà l’OCSE a costruire un quadro di quello che i cittadini di tutto il mondo considerano come forme di benessere. Buona condivisione..

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!

Come ti sembra questo grafico? Prova a cliccare sugli elementi della legenda e vedrai che è interattivo, potresti utilizzarlo per simulare il rispetto degli obiettivi in assenza di fatturato ottenuto su alcune zone.. Prova a selezionare col mouse una zona del grafico e vedrai puoi fare lo zoom sui dati che ti interessano.. Queste e tante altre funzionalità si possono ottenere grazie ad Highcharts, un validissimo javascript open source che lavora con jQuery per renderizzare grafici più o meno complessi e molto accattivanti.

Il tutto senza flash, cosa a cui difficilmente si poteva rinunciare in era pre-jQuery se si volevano ottenere i medesimi risultati. Le tipologie di grafici sono molteplici: si va dalla immancabile torta alla più ricercata rappresentazione demografica, dal grafico a barre al potente grafico zoomabile sull’andamento delle quotazioni in borsa. E’ inoltre possibile caricare i dati direttamente da una tabella definita in HTML all’interno della pagina, con poche righe di codice javascript.

Sotto è riportato il codice, opportunamente commentato, dell’esempio mostrato in questo articolo.
//Carico il javascript di highcharts, dopo aver caricato jQuery
<script src="js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[

Data la sua natura di puro css e javascript, questo grafico è agilmente fruibile anche da dispositivi mobili come iPhone o Android, inoltre è ben renderizzato dai principali browser. Si tratta di un prodotto davvero interessante che potrebbe tornare utile in diverse applicazioni stand-alone, a costo zero. Ben diverso dal classico Google Charts, servizio comodissimo che però pecca in quanto ad interattività: all’utente viene infatti restituita in quel caso una immagine statica.

Cosa Manca? Mancano i “geo-grafici“, ovvero la possibilità di visualizzare i dati su una cartina; mancano i tachimetri, per visualizzare in un colpo d’occhio l’andamento più o meno positivo di un indicatore. Sono comunque cose a cui si può sopperire spulciando bene l’elenco dei plugin jQuery..
E voi? Che cosa utilizzate in questi casi?

Per chi non vuole impazzire con le classiche funzioni javascript, che sono utili ma non sempre funzionali, esiste questo comodo js da includere nei propri lavori per agire in maniera efficace sulle date. La funzione più importante è sicuramente il DateDiff(), comodissimo per fare somme e differenze al volo sulle date.

Ecco un po’ di giochetti che si possono fare grazie a questo script, lo schema esplicativo sottostante è stato preso direttamente dal sito dell’autore.

3) Ottieni questo risultato:

Volete stupire con componenti dinamici pronti all’uso? Creare applicazioni web avanzate non è poi così laborioso, oggi si trovano un sacco di risorse in rete. Una di queste è il DHTMLX UI Toolkit, una serie di librerie javascript corredate da tantissimi esempi. La documentazione è ciò che fa la differenza: gli script non documentati e con pochi esempi sono quasi inutilizzabili, se non perdendo un sacco di ore per studiarseli. UI Toolkit viene distribuito in uno zip con diverse pagine di pratiche demo.

Per chi lavora in ambiente .NET molto interessante è questo Ajax Control Toolkit, un insieme di controlli utilizzabili direttamente in Visual Studio con il drag and drop, per costruire form e applicazioni accattivanti. Da Codeplex si possono scaricare anche i sorgenti, corredati da diversi esempi. In questa pagina si può avere una panoramica di tutte le funzionalità disponibili, sono davvero parecchie:

• Accordion
• AlwaysVisibleControl
• Animation
• AsyncFileUpload
• AutoComplete
• Calendar
• CascadingDropDown
• CollapsiblePanel
• ColorPicker
• ComboBox
• ConfirmButton
• DragPanel
• DropDown
• DropShadow
• DynamicPopulate
• FilteredTextBox
• HoverMenu
• HTMLEditor
• ListSearch
• MaskedEdit
• ModalPopup
• MultiHandleSlider
• MutuallyExclusiveCheckBox
• NoBot
• NumericUpDown
• PagingBulletedList
• PasswordStrength
• PopupControl
• Rating
• ReorderList
• ResizableControl
• RoundedCorners
• Seadragon
• Slider
• SlideShow
• Tabs
• TextBoxWatermark
• ToggleButton
• UpdatePanelAnimation
• ValidatorCallout

Per chi vuole essere indipendente da javascript e piattaforma tecnologica, esiste questo Vaadin, tutto basato su Java. Quest’ultimo molto più simile ai più noti framewok come Mootools o JQuery: dispone di diversi componenti elementari che opportunamente combinati tra loro danno vita ad applicazioni web avanzate.

Da segnalare infine questo iWebKit, utile per chi vuole cimentarsi nella realizzazione di siti e applicazioni concepite specificatamente per iPhone.

Risorse di questo tipo ne esistono davvero a bizzeffe, ma non è facile distinguere quelle che sono effettivamente utilizzabili out of the box da quelle che invece necessitano di altro e magari nascondono limiti tali da sconsigliarne l’utilizzo. Personalmente ho utilizzato in un ambiente di produzione l’UI Toolkit di DHTMLX e posso confermare che si tratta di librerie pronte all’uso, davvero comode e funzionali. Ho intenzione di provare a breve l’Ajax Control Toolkit per .NET e vi farò sapere le mie considerazioni. Mi piacerebbe ovviamente sentire le vostre e capire se esistono altri strumenti oltre a quelli citati, che magari avete utilizzato direttamente.

Alcune utili consigli per chi sviluppa applicazioni ajax destinate ad essere fruibili attraverso dispositivi mobili:

• Blackberry: il browser deve essere abilitato per usare javascript. Inoltre, se si fa largo uso dello script lato client, è bene evitare di spuntare tra le opzioni il flag “Termina script in esecuzione lenti”, un semplice Bubble Sort lo manderebbe in tilt.
• Nokia (symbian): nel browser standard il metodo open(“GET”,”xml/test2.xml”,true) funziona solo in modalità asincrona, ovvero con l’ultimo parametro settato a true; scaricando il browser Opera Mini invece non ci sono problemi in entrambi i casi: sincrono/asincrono.
• iPhone: che dire.. finora nessun problem riscontrato: browser e processore appartengono a una categoria superiore.

Purtroppo non ho ancora avuto modo di fare test su dispositivi con Android..

Ma veniamo al dunque.. Tutto prende il via dagli esempi sul sito W3C, utilissimi per fare pratica.

L’obiettivo è realizzare una applicazione che va a interrogare un file xml, riportante i dati di produzione (magari estratti direttamente dal gestionale aziendale), visualizzandoli in maniera ottimizzata per schermi di modeste dimensioni.

L’esempio con il risultato finale è visibile qui.

Questa è la struttura dela file XML:
<?xml version="1.0" encoding="UTF-8"?>
<db>
<item>
<period>04.2010</period> <!-- Periodo: mese o giorno -->
<logunit id="0010">Italy Milan</logunit> <!-- Divisione di produzione-->
<delivered matcode="000123">268</delivered> <!-- Quantita' spedita -->
<finished matcode="100123">265</finished> <!-- Quantita' versata -->
<description>Product One</description> <!-- Descrizione codice materiale  -->
<update>15.04.2010 - 16:43</update> <!-- Ultimo aggiornamento -->
</item>
</db>

Supponiamo di voler offrire all’utente un menù per selezionare la divisione logistica su cui fare l’analisi e filtrare così i dati relativi alla singola divisione raggruppati in righe in base agli intervalli temporali, cliccando sulla singola riga è poi possibile vedere il dettaglio.

Ecco il codice della pagina web, con il suo javascript:
<html>
<head>
<title>Mobile Web Access</title>
<script type="text/javascript">
var xmlDoc;
var x; //array dove memorizzo la risposta xml
//inizio chiamata
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
if (xhttp.overrideMimeType) {
xhttp.overrideMimeType('text/xml');
}
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = alertContents; //gestione eventuali errori
xhttp.open("GET","xml/test2.xml",true); //chiamata asincrona
xhttp.send("");
// Questo metodo viene eseguito in modo asincrono quando arriva la risposta dal server
function alertContents() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
processResponse(); //gestione risposta
}
else {
document.write('<small>There was a problem with the request, sorry. Try later or contact your system administrator..</small>');
}
}
}
function processResponse() {
xmlDoc=xhttp.responseXML;
x=xmlDoc.getElementsByTagName("item");
}
//mostra i dati nel div in alto
function show(i) {
logunit=(x[i].getElementsByTagName("logunit")[0].childNodes[0].nodeValue);
logunitID=(x[i].getElementsByTagName("logunit")[0].getAttribute("id"));
period=(x[i].getElementsByTagName("period")[0].childNodes[0].nodeValue);
description=(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
delivered=(x[i].getElementsByTagName("delivered")[0].childNodes[0].nodeValue);
deliveredCode=(x[i].getElementsByTagName("delivered")[0].getAttribute("code"));
finished=(x[i].getElementsByTagName("finished")[0].childNodes[0].nodeValue);
finishedCode=(x[i].getElementsByTagName("finished")[0].getAttribute("code"));
update=(x[i].getElementsByTagName("update")[0].childNodes[0].nodeValue);
txt="<strong>Logistic Unit</strong>: "+logunitID+" - "+logunit+"<br /><strong>Period</strong>: "+period+"<br /><strong>Description</strong>: "+description+"<br /><img style='float:left; margin-right: 2px;' src='icon.png' alt='icon'/><strong>Delivered</strong>: "+delivered+"<br /><strong>Finished</strong>: "+finished+"<br /><div style='border: 1px dotted #fff; padding: 2px; background: #f9f9f9; color: #666;'><small><em>Last update: "+update+"</em></small><br/><small><a href='#item"+i+"'>Go Down To List..</a> | <a href='#show' onclick='show(" + (i-1) + ")'>Prev..</a> | <a href='#show' onclick='show(" + (i+1) + ")'>Next..</a></small></div>"  ;
document.getElementById("show").innerHTML=txt;
}
//crea tabella coi record relativi alla singola divisione
function createTable(t) {
document.getElementById("show").innerHTML="<em>"+t+": click on a table row to display the full production information.</em>";
txt="<table style='border: 2px solid #ccc; width: 100%;'>";
altStyle=0;
for (var i=0;i<x.length;i++)
{
if (x[i].getElementsByTagName("logunit")[0].getAttribute("id")==t) {
altStyle++;
if (altStyle % 2 == 0) { txt=txt+"<tr style='background: #e3efff;' onclick='show(" + i + ")'>"; }
else { txt=txt+"<tr style='border-bottom: 1px dotted #ccc;' onclick='show(" + i + ")'>"; }
txt=txt+"<td id='item"+i+"'><img src='cal.png' alt='ico'/><a href='#show'>";
txt=txt+(x[i].getElementsByTagName("period")[0].childNodes[0].nodeValue);
txt=txt+"</a></td><td><img src='car.png' alt='ico'/><a href='#show'>";
txt=txt+(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
txt=txt+"</a></td></tr>";
}
}
txt=txt+"</table>";
document.getElementById("table-content").innerHTML=txt;
}
</script>
</head>
<body>
<img src='mobile-logo.gif' alt='logo' /><br/>
<div id='show' style='background: #e3efff; padding: 3px; margin: 3px 0; border: 2px solid #ccc;'><em>Select Logistic Unit then click on a table row to display the full production information.</em></div>
<!--Per aggiungere una divisione, modificare questo menu -->
<img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0010")'>Italy Milan</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0020")'>Italy Rome</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0030")'>USA</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0040")'>Germany</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0050")'>China</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0060")'>Brasil</a>
<!-- fine menu selezione divisione -->
<div id='table-content'></div>
</body>
</html>


Il codice è interamente commentato, e più che descriverlo a parole vale la pena scorrerlo e leggere i commenti. Se vuoi scaricare l’esempio completo, con sorgenti e immagini: ecco lo zip.

La scelta di incorporare css e javascript all’interno della stessa singola pagina è voluta, per ottimizzare il caricamento da parte di dispositivi mobili. Certo questa è solo una base di partenza, dalla quale si potrebbero sviluppare altre funzionalità: l’esigenza di avere dati disponibili anche su dispositivi mobili è sempre più sentita; è inevitabile che in futuro si debba far fronte a queste richieste.
In fondo è pure divertente!

Che ci sarà di così difficile? Nulla, se non il fatto che WSS è davvero poco user friendly quando si tratta di date.

Le prime cose da sapere riguardano la manipolazione delle date con XSL, bisogna partire dalle basi e poi da qualche esempio. Le date gestite su Sharepoint sono la @EventDate (data di inizio) e la @EndDate (data fine) e vengono restituite generalmente nel formato seguente: 2009-25-19T11:15:02Z.

Ovviamente l’ambiente di lavoro è Sharepoint Designer. Per prima cosa, una volta creata la nuova dataview webpart, bisogna associargli un form (una DataForm WebPart) tramite il quale passare gli intervalli di selezione delle date. Pubblico subito il codice sorgente di questo form:

<SCRIPT type="text/javascript" src="dhtmlgoodies_calendar/dhtmlgoodies_calendar.js?random=20060118"></script>
<link type="text/css" rel="stylesheet" href="dhtmlgoodies_calendar/dhtmlgoodies_calendar.css?random=20051112" media="screen"></LINK>
<table>
<script language="JavaScript">
function setStartTimeNow()
{
var d = new Date();
var currYear = d.getFullYear();
var currMonth = d.getMonth() + 1;
var currDate = d.getDate();
var currHour = d.getHours();
var currMin = d.getMinutes();
timeA = currYear + "" + currMonth + "" + currDate + "0001";
timeB = currYear + "" + currMonth + "" + currDate + "2359";
theInputA = document.getElementById('dataa');
theInputA.value = timeA;
theInputB = document.getElementById('datab');
theInputB.value = timeB;
}
</script>
<tr><td>Data e ora Inizio: </td><td><td><input id="dataa" type="text" value="" readonly name="T1"><input type="button" value="Seleziona data e ora.." onclick="displayCalendar(document.getElementById('dataa'),'yyyymmddhhii',this,true)"></td></tr>
<tr><td>Data e ora Fine: </td><td><td><input id="datab" type="text" value="" readonly name="T2"><input type="button" value="Seleziona data e ora.." onclick="displayCalendar(document.getElementById('datab'),'yyyymmddhhii',this,true)"></td></tr>
</table>
<br/>
<input type="button" value="Voglio sapere gli assenti di oggi.." onclick="setStartTimeNow()"/>
<input type="button" value="Mostra Risultati" onclick="javascript:_SFSUBMIT_"/>

Per creare questo form ho utilizzato il comodissimo javascript dhtmlgoodies_calendar, che permette di avere il classico calendarietto tramite il quale selezionare la data. La particolarità è che il formato della data passato all’input element del form è del tipo yyyymmddhhii, ovvero vengono passate data e ora sottoforma di numero. Ad esempio, la data 25/12/2009 – 13:52, viene passata come 200912251352. In questo modo sarà possibile confrontarla con altre date tramite gli operatori logici (maggiore, minore, uguale..).
T1 e T2 sono i parametri del form che verranno connessi alla web part XML.

Veniamo ora al dunque della web part che deve mostrare i dati, tramite Sharepoint Designer è necessario attivare due parametri: che chiameremo per comodità T1 e T2 (esattamente come gli elementi del form).

Una volta fatto ciò, il grosso del lavoro sta tutto nell’impostare correttamente il filtro attraverso una espressione XSL. Prima il codice, poi i commenti:

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[ ( ddwrt:FormatDateTime(string(@EventDate) ,1033 ,'yyyyMMddHHmm') &lt;= $T1 and ddwrt:FormatDateTime(string(@EndDate) ,1033 ,'yyyyMMddHHmm') &gt;= $T1 )  or  ( ddwrt:FormatDateTime(string(@EventDate) ,1033 ,'yyyyMMddHHmm') &lt;= $T2 and ddwrt:FormatDateTime(string(@EndDate) ,1033 ,'yyyyMMddHHmm') &gt;= $T2 )  or  ( ddwrt:FormatDateTime(string(@EventDate) ,1033 ,'yyyyMMddHHmm') &gt;= $T1 and ddwrt:FormatDateTime(string(@EndDate) ,1033 ,'yyyyMMddHHmm') &lt;= $T2 ) ]"/>

Cosa fa questa funzione? Posto che i parametri T1 e T2 identificano rispettivamente la data di inizio e la data di fine dell’intervallo di selezione (il periodo per cui vogliamo sapere chi era assente), il codice del filtro trasforma tutte le date nel formato numerico descritto sopra, e le confronta in base ai parametri T1 e T2, verificando se esistono eventi iniziati prima della data T1 e ancora in corso nell’intervallo [T1;T2], iniziati e conclusi all’interno dell’intervallo oppure iniziati in [T1;T2] e con conclusione dopo T2. In questo modo si ottiene la lista di tutti gli assenti all’interno di un determinato periodo, anche degli assenti per solo alcuni giorni e non per tutto l’intervallo stesso.

Nota bene, in linea di massima anche questo filtro dovrebbe essere corretto:

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[ ( substring(translate(translate(translate(translate(@EventDate,'-',''),':',''),'T',''),'Z',''),1,12) &lt;= $T1 and substring(translate(translate(translate(translate(@EndDate,'-',''),':',''),'T',''),'Z',''),1,12) &gt;= $T1 )  or  ( substring(translate(translate(translate(translate(@EventDate,'-',''),':',''),'T',''),'Z',''),1,12) &lt;= $T2 and substring(translate(translate(translate(translate(@EndDate,'-',''),':',''),'T',''),'Z',''),1,12) &gt;= $T2 )  or  ( substring(translate(translate(translate(translate(@EventDate,'-',''),':',''),'T',''),'Z',''),1,12) &gt;= $T1 and substring(translate(translate(translate(translate(@EndDate,'-',''),':',''),'T',''),'Z',''),1,12) &lt;= $T2 ) ]"/>

La funzione translate depura la stringa della data dai vari caratteri e lascia solo 14 numeri, la funzione substring leva gli ultimi due numeri (relativi ai secondi dell’ora della data). Ma così non funziona, per un qualche strano motivo Sharepoint anticipa di un’ora la data di tutti gli eventi, e ciò che concettualmente era infallibile, decade durante la prova effettiva, con buona pace per tutto il tempo trascorso sopra a ragionarci.. Argh!

L’utilità? Lasciare ai soli amministratori la possibilità di editing di determinati campi.

Questo il codice di base proposto:

<script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("avvioControlli");
function avvioControlli() {
hideFields();
}
function findacontrol(FieldName) {
   var arr = document.getElementsByTagName("!");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {         return arr[i];      }
   }
}
function hideFields() {
   var control = findacontrol("Stato");
   control.parentNode.parentNode.style.display="none";
   control = findacontrol("Comments");
   control.parentNode.parentNode.style.display="none";
}
</script>

Dove si mette? Appena soto al PlaceHolderMain, nella pagina NewForm.aspx della relativa lista, tramite Sharepoint Designer: una figura vale più di mille parole. Dopo aver aperto l’albero della lista su Sharepoint Designer, è sufficiente editare il codice della pagina.

L’approccio è perfetto e geniale, il javascript non fa altro che ricercare nel documento i commenti per poi oscurare tramite una proprietà CSS la visualizzazione. Ci sono però alcuni difetti su questo codice: piace a internet explorer e non agli altri browser.
Ecco allora come modificarlo per renderlo compatibile con i vari Firefox, Chrome e compagnia bella:

<script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("avvioControlli");
function avvioControlli() {
hideFields();
}
function findacontrol(FieldName) {
//se browser Internet Explorer cerco i commenti
if (navigator.userAgent.indexOf("MSIE")!=-1) {
   var arr = document.getElementsByTagName("!");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {         return arr[i];      }
   }
   }
//se browser diverso da Internet Explorer cerco i titoletti
   else {
   var arr = document.getElementsByTagName("H3");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {         return arr[i];      }
   }
}
}
function hideFields() {
   var control = findacontrol("Stato");
   control.parentNode.parentNode.style.display="none";
var control = findacontrol("Comments");
   control.parentNode.parentNode.style.display="none";
}
</script>

Se poi volessi piazzare da qualche parte un pulsantino per far riapparire questi campi, magari solo per determinati utenti, sarà sufficiente creare questa funzione:

function showFields() {
   var control = findacontrol("Stato");
   control.parentNode.parentNode.style.display="block";
var control = findacontrol("Comments");
   control.parentNode.parentNode.style.display="block";
}

Buona personalizzazione!

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

Google Earth è diventato ormai uno strumento dalle mille potenzialità: esplorazione degli oceani, fotografie, edifici e terreni in 3D, visione dei luoghi nel tempo, registrazione dello schermo, sono solo alcune delle meraviglie del prodotto.

La possibilità di utilizzare file KML generati da altri è un’altra delle cose che rendono Google Earth uno strumento eccezionale per far visualizzare percorsi, itinerari, foto dei luoghi e quant’altro. Le informazioni geolocalizzate permettono di dare al fruitore un contributo unico: vedere i posti vale molto di più che descriverli.

Ebbene, da qualche tempo è disponibile un plugin che permette di portare Google Earth direttamente sulle pagine web, grazie alle Google Earth API. E’ infatti possibile inserire in una pagina web una finestra che visualizza il famoso mondo 3D, caricando un file KML.
Nel futuro non saremo più legati al 2D delle famosissime mappe di Google, ma potremo creare mashup direttamente in 3D. Gli esempi di codice sono davvero vasti e ben documentati.

Ecco il codice dell’esempio sotto, commentato nel javascript che carica il plugin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
<head>
<title>Esempio Plugin Google Earth con file KML</title>
<script src="http://www.google.com/jsapi?key=LaTuaAPIKey"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
//inizializza la mappa prendendo come riferimento l'ID del div che la contiene: map3d
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// aggiunge i controlli di navigazione
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// aggiunge alcuni livelli: confini e strade
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
// codice per caricare e far visualizzare il file KML
function finished(object) {
if (!object) {
// Gestione degli errori per prevenire i deadlock di alcuni browsers
setTimeout(function() {
alert('Bad or null KML.');
}, 0);
return;
}
ge.getFeatures().appendChild(object);
// imposta latitudine, longitudine e zoom
var la = ge.createLookAt('');
la.set(44.258300, 10.411550, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 70, 400);
ge.getView().setAbstractView(la);
}
// carica il file KML
var url = 'http://www.diplod.it/wp-content/uploads/2009/08/AlbaCusna.kml';
google.earth.fetchKml(ge, url, finished);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="width: 500px; height: 380px;"></div>
</body>
</html>
Ovviamente per far andare il tutto è necessario ottenere una API Key, fornita gratuitamente da Google per il proprio dominio.
Il giochino è davvero meraviglioso, ecco come appare il tutto:

Se vi interessa sapere come ho fatto a generare questo file KML, provate a sbirciare qui: con un cellulare Nokia potrebbe aprirsi un altro mondo.. ;)

Per vederlo subito all’opera basta dare un’occhiata agli esempi che ci sono sul sito ufficiale.

Questo plugin torna veramente utile se accoppiato ai classici menù per wordpress, dove tipicamente la sintassi html è la seguente:

<ul class="sf-menu">
<li class="page_item"><a href="#" title="Home">Home</a></li>
<li class="page_item page-item-1"><a href="#" title="About">About</a>
<ul>
<li class="page_item page-item-2"><a href="#" title="Sottopagina Uno">Sottopagina Uno</a></li>
<li class="page_item page-item-3"><a href="#" title="Sottopagina Due">Sottopagina Due</a></li>
</ul>
</li>
<li class="page_item page-item-4"><a href="#" title="Contatti">Contatti</a>
</ul>

Questa sintassi viene generata dalla funzione wp_list_pages(), indicando come argomento depth=2. E’ sufficiente assegnare la classe “sf-menu” alla lista (<ul>) che compone il menù e lo script farà il resto del lavoro, individuando le liste annidate e nascondendole. Quando l’utente passerà con il mouse sulla pagina padre, allora saranno mostrate a cascata le pagine figlie.

Ovviamente per far funzionare il tutto è necessario includere nella testata della pagina qualche riga di codice, per caricare jquery, il plugin e alcuni file css:

// link al file CSS
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
// link al javascript (hoverIntent è opzonale)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// inizializzazione di Superfish, sf-menu è la classe su cui sarà attivo l'effetto
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

I temi rilasciati su eleganthemes fanno abbondantemente uso di questo plugin e gli effetti sono piuttosto gradevoli. Credo proprio che mi divertirò nei prossimi giorni.. Conoscete altri script altrettanto versatili e pronti all’uso?

Per chi sviluppa siti web, l’inclusione di un visualizzatore è semplicissima. E’ disponibile un wizard tramite il quale si può generare in automatico il codice da inserire nell’HTML, basta fare un copia&incolla ed il gioco è fatto. Il risultato lo potete vedere qui sotto:

Ma le possibilità di personalizzazione vanno al di là del semplice javascript esterno, gli sviluppatori possono infatti intervenire direttamente sul codice seguento le istruzioni fornite nella pagina di documentazione delle API, che illustra in maniera chiara come utilizzare le API. L’esempio base si capisce al volo:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Book Search Embedded Viewer API Example</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("books", "0");
function initialize() {
var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
viewer.load('ISBN:0738531367');
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="viewerCanvas" style="width: 600px; height: 500px"></div>
</body>
</html>


Uno script richiamato nell’head e un div nel quale caricare il visualizzatore, impostandone le dimensioni. In questo modo si può integrare il lettore direttamente nel proprio layout, i libri da caricare sono identificabili tramite diversi parametri:

• codice ISBN (come nell’esempio sopra): è il codice internazionale che identifica una pubblicazione
• OCLC: è il numero assegnato da OCLC quando il libro viene pubblicato su WorldCat
• LCCN: codice assegnato dal Library of Congress
• codice di Google Books Search: sia tramite l’id univoco che tramite l’url di visualizzazione del libro su Books Search.

Chi vuole sbizzarrirsi è libero di farlo..

La digitalizzazione dei libri da parte di Google partì in sordina tra mille polemiche, oggi invece si rivela in tutta la sua utilità. Se penso alla biblioteca cittadina, o ancora meglio alla biblioteca universitaria; se solo avesse un sito che permetta la consultazione a distanza di un libro a catalogo, sarebbe sicuramente un valore aggiunto.

All’interno di un indirizzo web vengono passati i dati per la costruzione del grafico, sottoforma di parametri, e Google ci restituisce una immagine realizzata a partire da quei dati. Quale migliore occasione dei dati elettorali per fare qualche prova?

La documentazione (in inglese) è impeccabile, sono presenti un sacco di esempi che aiutano lo sviluppatore. Ho costruito la torta dei risultati elettorali del mio paese, sulla base di questo url.

Vediamolo commentato:

chs=800x300 <!--dimensioni del grafico in pixel-->
&chd=t:4.1,2.96,23.69,6.69,2.19,4.55,52.33,0.37,3.12 <!--serie di dati: percentuali-->
&cht=p3 <!--tipo di grafico: a torta-->
&chco=ebebeb,ff0000,0090ff,1db000,373737,db4aff,31a142,bc424b,ffcc00 <!--colori delle fette--> &chl=UDC|SINISTRA%20L'ARCOBALENO|POPOLO%20DELLA%20LIBERTA'|LEGA%20NORD|LA%20DESTRA|ITALIA%20DEI%20VALORI|PARTITO%20DEMOCRATICO|PARTITO%20SOCIALISTA|ALTRI <!--etichette dei dati-->

Per ottenere l’immagine direttamente sulla pagina web, basta inserire l’url appena costruito nel tag <img> avendo cura di convertire i caratteri ‘&’ in ‘&’, in questo modo:

<img src="http://chart.apis.google.com/chart?
chs=800x300
&chd=t:4.1,2.96,23.69,6.69,2.19,4.55,52.33,0.37,3.12
&cht=p3
&chco=ebebeb,ff0000,0090ff,1db000,373737,db4aff,31a142,bc424b,ffcc00
&chl=UDC|SINISTRA%20L'ARCOBALENO|POPOLO%20DELLA%20LIBERTA'|LEGA%20NORD|LA%20DESTRA|ITALIA%20DEI%20VALORI|PARTITO%20DEMOCRATICO|PARTITO%20SOCIALISTA|ALTRI" alt="risultati senato" />


Ed ecco il risultato finale, per i voti al Senato della Repubblica.

Se vi interessa anche la Camera dei Deputati.. Tanto ormai avrete capito che vivo in Emilia. :)

Decisamente comodo il servizio, soprattutto se dobbiamo trattare dati variabili, magari estratti da un database: come dati finanziari o altro. Non a caso infatti il servizio è utilizzato su Google Finance.
L’unica cosa che mi lascia perplesso è l’impossibilità di scrivere i valori sul grafico, cosa che potrebbe essere utile soprattutto per i grafici a torta. Nei grafici a barre invece è possibile assegnare valori sugli assi.

Google fornisce anche un esempio di javascript per la realizzazione automatica di un grafico a partire da un array di dati. Se invece volete qualcosa di più visuale, c’è già chi ha pensato al Google Chart Generator oppure al Google Graph Builder, dove è possibile ottenere il codice dell’url grazie a un comodo editor on-line.

Ma non è finita qui, le APIs Chart permettono anche di creare grafici sulla base di cartine geografiche. Il concetto è sempre quello: un url con diversi parametri. Ed ecco che cosa si può ottenere:

Questo il codice:

<img src="http://chart.apis.google.com/chart?cht=t&chs=440x220&chd=s:Af9&chtm=europe&chco=ffffff,edf0d4,13390a&chld=FRITNL&chf=bg,s,EAF7FE" alt="cartina europa" />


Si potrebbe sfruttare per segnalare la presenza di dispositivi mobili su un’area geografica, colorando con un gradiente le aree più dense.. Insomma: in tutte quelle situazioni in cui c’è esigenza di mappare in maniere automatica dati in evoluzione.

Se penso al diffondersi dei palmari e alle crescenti esigenze di geolocalizzazone gli scenari sono molteplici. Ma anche senza vagare troppo con l’immaginazione, basta pensare alla monitorizzazione degli accessi a una pagina web, a sondaggi, alla pubblicazione di dati finanziari.. Quello di Google Charts è un servizio veloce (i tempi di risposta sono immediati) e soprattutto gratuito.

L’unico limite sono 250000 chiamate al giorno, se pensate di superarle meglio avvisare via mail.

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

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

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

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

Shadowbox – zip con files in italiano

Installazione

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

Utilizzo

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

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

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

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

Mi pare giusto scrivere due righe su alcuni gadget da domenica pomeriggio. Quelle cose che provi ad installare così per gioco e poi scopri che nella loro inutilità le consiglieresti ad altri.

Piclens

Piclens è la classica cosa che ti suggerisce l’amico, una estensione per il browser meravigliosa, esiste per Firefox, Internet Explorer o Safari. Se siete soliti navigare e fare ricerche su Flickr ne capirete immediatamente l’utilità. Se non lo siete, ma la installate ugualmente, ne coglierete subito l’eleganza.
In sostanza si tratta di un esploratore per siti che contengono immagini, funziona in automatico su Flickr, Google Images, Yahoo Image Search, SmugSmug, Photobucket, DeviantArt.. Quando si esegue una ricerca su questi siti e si clicca sul bottocino play che appare in alto a destra (in firefox), si apre un ambiente 3D sul quale si ha una panoramica completa delle fotografie che la ricerca ha restituito come risultato. Provatelo, e capirete avrete pietà per il mio entusiasmo.

Piclens Plugin per WordPress

Esiste pure un plugin per wordpress per riproporre ai propri visitatori l’eleganza di uno slideshow con piclens. Da questa pagina è possibile scaricarlo e trovare le istruzioni per l’installazione ed il suo utilizzo. Mi sarebbe piaciuto utilizzarlo sul mio blog ma purtroppo Aruba (la mia compagnia di hosting) ad oggi ha ancora la versione 4.4.7 di php, e questo plugin richiede la 5.1 o superiore.. Attenderò con pazienza.

Per la cronaca, esiste pure il programmino (win e mac) che permette di creare una galleria da aggiungere a qualsiasi pagina html, con tanto di javascript bello pronto. Utile ad esempio per inserire una galleria ad effetto su un sito che non giri con wordpress.

Google Screensaver

Google Scrensaver viene distribuito assieme al Google Pack (pacco a tutti gli effetti, nel suo complesso) e non è altro che uno screensaver che fa ruotare le fotografie quando il pc va in pausa. Funziona divinamente in parallelo a Picasa, dove è possibile marcare le foto per aggiungerle all’album “Salvaschermo”. Inoltre è possibile assegnare un feed di immagini dal quale pescare le foto e metterle in rotazione, quello predefinito di Google ad esempio offre fotografie d’autore di tutto rispetto.
Nulla di travolgente, solo qualche effetto un po’ più curato rispetto al salvaschermo classico di windows e la possibilità di aggiungere le immagini senza spostarle in una cartella apposita tutte assieme fanno di questo prodottino qualcosa a cui mi sono affezionato.
NB: per scaricarlo è necessario accedere alla pagina del google pack in inglese, in italiano infatti pare non esista..

Picasa

E’ tutta colpa delle compatte! Da quando ho questa benedetta fotocamera digitale le immagini sono al tempo stesso cruccio e passione. Mi piace catalogarle, ritoccarle, ma non troppo, ordinarle e naturalmente visualizzarle. Picasa è lo strumento ideale per tenere in armonia l’archivio delle fotografie: vacanze, gite domenicali e uscite con gli amici. E’ indicato sopratutto per un utilizzo personale, non è un software da professionisti, pochi semplici tasti che rispecchiano basilari funzioni: quando c’è troppa fretta un bel “mi sento fortunato” e la foto gode di nuovo vigore.
Probabilmente già lo conoscete, ma se non l’avessi citato mi sarei sentito in colpa.

Form con CSS (e talvolta javascript) ne ho visti di tutti i tipi, ma non ho trovato nessuno che mi soddisfacesse in pieno.
Me ne serviva uno, così l’ho realizzato prendendo spunto qua e là. Il punto di partenza è l’articolo su A List Apart, per la costruzione di form accessibili e semanticamente corretti a livello di codice. Va bene essere pignoli, ma scomodare JQuery e avere qualche bug di visualizzazione su Mozilla mi sembra eccessivo (si veda a tal proposito lo stesso form su html.it). Preferisco la semplicità, pur rimandendo nella sfera del “semanticamente corretto” ed essere pienamente “acessibile”.

Vediamo subito il risultato, per poi analizzarlo in dettaglio.

Ci sono effetti sulle caselle di input che aiutano l’utente nella compilazione, rendendo verdi i bordi dei box, in caso di dati corretti, oppure rossi al contrario. Appaiono inoltre le istruzioni sulla destra che diventano visibili semplicemente sfruttando l’effetto “hover” sugli elementi della lista (cambiando il colore del testo da bianco a scuro). Tale tecnica è molto semplice, ma non è supportata da IE6: poco male, se pensiamo che comunque sono dati aggiuntivi e non fondamentali. Mentre chi non ha CSS e javascript attivi riesce in ogni caso a vederle.

La validazione è stata realizzata utilizzando l’utilissimo script Live Validation.

La resa cross-browser è buona, questo screenshot ad esempio rappresenta la pagina caricata sullo schermo di un palmare.

Anche senza CSS e javascript attivi il form risulta pienamente accessibile e di facile lettura. Ecco come appare a quegli utenti che non hanno nulla di attivo.

Il codice HTML

Prendendo spunto da A List Apart, il codice HTML non deve avere tabelle, ma la solita lista <ul> dove poi inseriremo i vari box di input.

Gli unici accorgimenti sono l’inserimento delle istruzioni all’interno di una classe “help” e la specifica della classe “option” per le etichette delle caselline da spuntare.


<form action="#">
<fieldset>
<legend>I campi marcati con * sono obbligatori</legend>
<ul>
<li>
<label>Nome*</label>
<span class="help">[Scrivi qui il tuo nome]</span>
<input name="ddnome" id="ddnome" value="" type="text" size="30" />
</li>
<li>
<label>Cognome*</label>
<span class="help">[Scrivi qui il tuo cognome]</span>
<input name="ddcognome" id="ddcognome" value="" type="text" size="30" />
</li>
<li>
<label>Indirizzo</label>
<span class="help">[Scrivi qui il tuo indirizzo]</span>
<input name="ddindirizzo" id="ddindirizzo" value="" type="text" size="30" />
</li>
<li>
<label>Città*</label>
<span class="help">[Scrivi qui la tua città]</span>
<input name="ddcitta" id="ddcitta" value="" type="text" size="30" />
</li>
<li>
<label>Provincia*</label>
<span class="help">[Scrivi qui la sigla della tua provincia]</span>
<input name="ddprovincia" id="ddprovincia" class="small-text" value="" type="text" size="2" />
</li>
<li>
<label>Email*</label>
<span class="help">[Scrivi qui la tua e-mail]</span>
<input name="ddemail" id="ddemail" value="" type="text" size="30" />
</li>
<li>
<label>Data di Nascita</label>
<span class="help">[Seleziona la tua data di nascita]</span>
<select id="dob-d"><option value="1">1</option><option value="2">2</option></select>
<select id="dob-m"><option value="1">Jan</option><option value="2">Feb</option></select>
<select id="dob-y"><option value="1980">1984</option><option value="1985">1985</option></select>
</li>
<li>
<label>Tuo commento</label>
<span class="help">[Scrivi qui un tuo commento]</span>
<textarea name="ddcommento" rows="5" cols="10"></textarea>
</li>
<li>
<label>Il tuo sesso?</label>
<span class="help">[Indica il tuo sesso]</span>
<label class="option"><input type="radio" name="ddsesso[key]" value="si" checked="checked" class="form-radio" />uomo</label>
<label class="option"><input type="radio" name="ddsesso[key]" value="no" class="form-radio" />donna</label>
</li>
<li>
<label class="option"><input name="ddcontratto" value="ok" type="checkbox" /> Ho letto tutti i contratti di questa terra</label>
</li>
</ul>
</fieldset>
<p><input class="button" type="submit" value="Invia Form"/></p>
</form>


Il codice CSS

Il CSS pesa in tutto 5Kb, compresa la parte per la struttura. Con una attenta formattazione si può migliorare di qualche Kb. Qui riporto solo la parte relativa al form vero e proprio.


form {
margin: 0 auto;
padding: 10px;
border: 1px solid #f3a251;
font: normal 1em Verdana, sans-serif;
background-color: #fff;
width: 800px;
text-align: left;
}
form ul {
background: transparent;
margin: 0;
padding: 0;
list-style: none;
}
form ul li {
margin: 0;
padding: .4em 0;
background: #fff;
color: #fff;
list-style: none;
font: normal 0.9em Verdana, sans-serif;
border-bottom: 1px solid #dadada;
}
form ul li:hover {
color: #333;
background: #eee;
}
form span.help {
float: right;
width: 29%;
}
fieldset {
margin: 0;
padding: 0;
border-top: 1px solid #dadada;
color: #777;
}
label {
display: block;
font-weight:bold;
margin: 0;
font: normal 1.5em Verdana, sans-serif;
color: #333;
width: auto;
}
label.option {
margin: .2em;
font: normal 1.2em/1.2em Verdana, sans-serif;
width: 60%;
}
input {
padding: .4em;
margin: 0;
border: 1px solid #dadada;
font: normal 1.5em Verdana, sans-serif;
color: #333;
background: #fafafa;
}
input.form-radio {
padding: 0;
margin: 0 .2em 0 0;
border: none;
}
textarea {
width: 66%;
padding: .4em;
font: normal 1.2em/1.2em Verdana, sans-serif;
border: 1px solid #dadada;
height: 10em;
display:block;
color:#333;
background: #fafafa;
}
textarea.small-textarea {
height: 3em;
}
select {
padding: .2em 0;
margin: 0;
border: 1px solid #dadada;
font: normal 1.5em Verdana, sans-serif;
color: #333;
background: #fafafa;
}
option {
display: block;
padding: .1em;
margin: 0;
font: normal 1em Verdana, sans-serif;
color: #333;
background: #fafafa;
}
input:focus, input:active, textarea:focus, textarea:active, select:focus, select:active {
border: 1px solid #f3a251;
background: #ffeddc;
}
input.button {
margin: .3em;
padding: .25em .3em;
border: 1px solid #f3a251;
background: #ffeddc;
font: normal 1.5em Verdana, sans-serif;
cursor: pointer;
}
input.button:hover {
background: #f3a251;
color: #fff;
}


Javascript per la validazione

La parte javascript è molto semplice, per crearla basta seguire la documentazione di LiveValidation. Tutte le validazioni avvengono dopo che l’utente ha abbandonato il box sul quale sta scrivendo. Questo è possibile specificando il parametro “onlyOnBlur: true”.

Per ogni singolo campo che deve essere validato viene costruito un oggetto LiveValidation() richiamandolo in base all’id.


<script type="text/javascript">
var valNome = new LiveValidation( 'ddnome', {onlyOnBlur: true, validMessage: "OK" } );
valNome.add( Validate.Presence, {failureMessage: "Devi inserire il nome"} );
var valCognome = new LiveValidation( 'ddcognome', {onlyOnBlur: true, validMessage: "OK" } );
valCognome.add( Validate.Presence, {failureMessage: "Devi inserire il cognome"} );
var valCitta = new LiveValidation( 'ddcitta', {onlyOnBlur: true, validMessage: "OK" } );
valCitta.add( Validate.Presence, {failureMessage: "Devi inserire una città"} );
var valProvincia = new LiveValidation( 'ddprovincia', {onlyOnBlur: true, validMessage: "OK" } );
valProvincia.add( Validate.Presence, {failureMessage: "Devi inserire la provincia"} );
valProvincia.add( Validate.Length, { minimum: 2, maximum: 4, tooShortMessage: "Almeno due caratteri", tooLongMessage: "Inserisci la sigla della provincia, al massimo 4 caratteri (ROMA)"} );
var valEmail = new LiveValidation( 'ddemail', {onlyOnBlur: true, validMessage: "OK" } );
valEmail.add( Validate.Presence, {failureMessage: "Lascia un indirizzo e-mail"} );
valEmail.add( Validate.Email, {failureMessage: "Indirizzo non valido"} );
</script>


Sia il codice CSS che quello HTML è validato W3C. Se vuoi scaricare l’esempio ecco il file zip, con licenza CC. Fammi sapere se apporti utili migliorie al codice o lo utilizzi per impieghi particolari.

English? Go here..

Ecco qui.. Le web TV ormai imperversano, tutti a dire che il futuro è quello, che pubblicare i propri video è molto cool! Non saprei dire se le notizie debbano per forza provenire dal basso (forse no), ma perché non rilasciare un template? Eccolo.

Un template libero: scaricatelo, modificatelo, utilizzatelo. Ma abbiate cura di lasciare il link a diploD. E’ pensato per la classica tv on-line.
Cosa c’è di bello?

• La navigazione a tab tramite javascript (simil ajax, ma non proprio..)
• Le finestre fluttuanti realizzate con jQyery ed Interface, una per il video e una per la chat.
• Un box pensato per la pubblicità (quale tv non ne ha? Potete comunque levarlo in un attimo se non ve ne frega un accidente)
• Lo spazio per il codice da embeddare sul proprio sito
• Predisposizione per i più comuni tag html: form, code, blockquote, ecc..
• Dei bellissimi box laterali dove mettere ciò che vi pare
• XHTML Strict, CSS Valid
• Compatibilità coi più diffusi browser, testato su FireFox, IE, Opera; non dovrebbero esserci problemi nemmeno con Safari

Qual è il fattore in più? Le finestre Jquery. Attivando il video in una di queste finestre, l’utente può contemporaneamente vedere la diretta e navigare il sito con i tab, oltre ad aprire e imbustare la chat.
Provatelo, è molto più semplice vedere che spiegare.

Download Web TV Template (Open and Free Internet Television Design)

English

Here we are.. Internet television are the next revolution! I don’t know if news should be reported by the mass (maybe not), but I realized a template for web tv. Try it. Why not?

It’s a free template: download it, modify it, use it. But please don’t remove the link to this site, diploD. This is a layout for a standard web television.
What’s cool?
· Tab navigation whit a simple javascript (ajax like)
· Floating windows, thanks to JQuery and Interface. One window for video, one for chat.
· A box for ads (who don’t have ads? But you can remove it if you want)
· Space for “embed” code
· Support for common html tags: form, code, blockquote..
· Nice sidebar boxes
· XHTML Strict, CSS Valid
· Cross browser compatibility, tested with FireFox, IE, Opera; should work also whit Safari

JQuery windows are the best way to show your videos and your chat. The users can follow your programs on live tv and visit your site.
Open the demo to see the design in action.

Download Web TV Template (Open and Free Internet Television Design)

PS: sorry for my English :P
The video you can see in the demo is a compilation of Parmigiano Reggiano’s spots. Parmigiano Reggiano is a wonderfull italian cheese, it’s art. :)

Che diavolo è?

Provate a cliccare sul bottocino “che diavolo?” in alto a questa pagina e capirete in un attimo. Si tratta di un piccolo box CSS scorrevole, all’interno del quale si può far apparire tutto ciò che ci pare..
Dopo avdd-welcome-ita.ziper scaricato il plugin e fatto l’upload dei files ‘dd-welcome.php’ e ‘dd-bg.gif’ all’interno della solita cartella ‘wp-content/plugins/’, apparirà nel menù ‘Opzioni’ un comodo pannello di amministrazione dal quale è possibile configurare il box scorrevole.

SCARICALO QUI..

A cosa serve?

Bella domanda, in teoria per avere un box figo dove poter inserire le solite informazioni su chi siamo, cosa facciamo, da dove veniamo e dove vogliamo arrivare. In pratica potete metterci ciò che meglio credete, anche gli ultimi libri letti..

Dal ‘Welcome Manager’, senza toccare il codice del nostro template, potremo impostare:

1. Il testo da far apparire all’interno del box, nel quale si possono utilizzare anche i più comuni tag HTML per fare link o inserire immagini
2. Il testo da far apparire sul bottoncino
3. Il colore di sfondo
4. Una eventuale immagine di sfondo
5. Il colore del testo
6. L’altezza in pixel del box scorrevole
7. L’allineamento del bottone (destra o sinistra)
8. Il margine dal bordo della pagina
9. La posizione del bottone (fissa o scorrevole con la pagina)

Queste sono tutto proprietà CSS regolabili senza intervenire sul codice. Vi ricorda nulla? Ma certo, il celeberrimo e decantato plugin di Francesco Fullone FCC Ribbon Manager, da quale ho preso spunto e che ringrazio.

NB: se impostate l’altezza del box a ’100%’ potrete avere una bellissima pagina nascosta, dove ad esempio si potrebbe mettere il portfolio personale.. o amenità varie.

Javascript?

Ovviamente si. Questo plugin utilizza il solito scriptaculous.. Perchè questo e non Mootools? Semplicemente perchè dalla versione 2.qualcosa di wordpress esso è incluso direttamente tra i file del programma, così la pagina si dovrebbe caricare più velocemente.
Se per caso avete una versione vecchiotta di WP e non è presente scriptaculous, potete scaricare questo zip e mettere la cartella ‘/scriptaculous/’ sul vostro server, dentro a ‘/wp-includes/js/’. Il percorso sarà quindi ‘/wp-includes/js/scriptaculous/’.

Se avete idee o suggerimenti.. scrivete pure due righe.

What’s?

Click on the button “che diavolo?” at the top of this page and you can see. It’s a little CSS sliding box, where you can insert what you prefer..
Download the plugin files and upload ‘dd-welcome.php’ and ‘dd-bg.gif’ on your server folder ‘wp-content/plugins/’, then in the Option Menu you find the ‘Welcome Manager’ where you can set your sliding box.

DOWNLOAD HERE..

Ok, but how can I use it?

It’s a good question. You have a cool box to insert the classic info text or whatever you want: portfolio, last purchases, last read books, and so on..

In the Welcome Manager, without touching the code, you can set:

1. The text that will appear in the sliding box, it supports common HTML tag to link or insert images
2. The text that will appear in the button
3. The background color
4. An opzional background image
5. The text color
6. Box height (in pixel)
7. Button align (left or right)
8. Button margin (in pixel, % or em..)
9. Button position (fixed or absolute)

NB: if you set up the height to 100%, you have a cool hidden page on your blog..

Javascript?

Obviously.. This plugin uses the classic scriptaculous. Why this and not Mootools? Simply because from the 2.1 version of wordpress it is included directly in the /wp-includes/ folder, therefore the page would have to be loaded fastly.
If you have an old version or is not present scriptaculous, you can download this zip and put the folder “/scriptaculous/” on your server, in “/wp-includes/js/”. The path will be “/wp-includes/js/scriptaculous/”.

If you have ideas or suggestions, please drop me two lines.

Impostare uno sfondo ad un oggetto quando il mouse scorre su un’altro oggetto

Può capitare, per esigenze estetiche, di aver bisogno che quando l’utente passa il mouse sopra ad un box venga cambiato lo sfondo ad un altro box. In una sorta di fanta-css sarebbe:

#div1 {
background: url(img1.gif) center;
}
#div2 {
background: url(img2.gif) center;
}
#div1:hover {
#div2-background: url(img1.gif);
}

E’ una soluzione che può tornare utile in certi casi, e ho preparato qualche esempio. Potete tranquillamente scaricarli e utilizzarli come volete, magari correggerli e migliorarli pure. Questo è il link al file zip con i tre gli esempi presentati in seguito.
Sono stati testati su IE 6 e 7, Opera, FireFox. Tutto il codice, CSS e XHTML, è stato validato secondo gli standard del W3C. Faccio notare come tutti gli esempi siano correttamente e degnamente visualizzati anche da utenti con javascript disabilitati.

Esempio 1: menu con css e javascript che spegne tutte le voci tranne quella selezionata col mouse

Da questa pagina si può vedere l’esempio. L’immagine utilizzata per le tab è una sola, viene caricata secondo la tecnica dello slittamento dell’immagine di sfondo.

Sintassi HTML:


<ul id="menu">
<li id="current"><a xhref="http://www.diplod.it/index.html" mce_href="http://www.diplod.it/index.html" >Home</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Dove Siamo</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Cosa Facciamo</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Contatti</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Dicono di Noi</a></li>
</ul>

Il codice css:

/*menu tabs*/
#menu {
margin: 80px auto 0 auto;
padding: 0;
height: 30px;
width: 880px;
list-style: none;
border-bottom: 5px solid #7ce41d;
font: bold 13px/30px Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif;
}
#menu li {
display: inline;
margin: 0;
padding: 0;
}
#menu li a {
height: 30px;
width: 140px;
float: left;
background: url(tab.gif) no-repeat center top;
margin: 0;
padding: 0;
text-decoration: none;
color: #333;
}
#menu li a:hover {
color: #336633;
background: url(tab.gif) no-repeat center top !important;
}

Il codice javascript (esterno alla pagina):

function cambiaSfondo(hover) { //cambia lo sfondo a tutte le altre tab
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
for (var j = 0; j < lis.length; j++) {
var a = lis[j].getElementsByTagName('a');
a[0].style.backgroundPosition ='0 -30px';
}
}
function ripristinaSfondo(hover) { //cambia lo sfondo a tutte le altre tab
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
for (var j = 0; j < lis.length; j++) {
var a = lis[j].getElementsByTagName('a');
a[0].style.backgroundPosition ='0 0';
}
}
//Events
function addEvent(elm, evType, fn) {
// cross-browser event handling
if(elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
}
else {
elm['on'+evType] = fn
}
}
function addListeners(e) {
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
for (var j = 0; j < lis.length; j++) {
var a = lis[j].getElementsByTagName('a');
addEvent(a[0],'mouseover',cambiaSfondo);
addEvent(a[0],'mouseout',ripristinaSfondo);
}
}
//Aggiungi gli ascoltatori degli eventi quando si carica la pagina
addEvent(window,'load',addListeners);

Esempio 2: Sfondo alternato su un unico bottone diviso in due

Da questa pagina si può vedere l’esempio. In questo caso l’immagine utlizzata è decisamente pià grande (e pesante), ma in questo modo si evita che l’utente percepisca il vuoto mentre l’immagine si carica al passaggio del mouse. Lo sfondo è relativo al box esterno che contiene i due interni (destro e sinistro) entrambi con sfondo trasparente.

Sintassi HTML:


<div id=bigbutton" >
<div id="bbleft">
<h1><a xhref="" mce_href="" >Pulsante Sinistro</a></h1>
<h2 class="on-air">Passa il mouse qui sopra</h2>
</div>
<div id="bbright">
<h1><a xhref="" mce_href="" >Pulsante Destro</a></h1>
<h2>Oppure qui sopra..</h2>
</div>
</div>


Il codice css:
Una piccola nota: il lampeggiamento del titoletto di sinistra non è opera del javascript, ma della dichiarazione css “text-decoration: blink”.

/*big-button*/
#bigbutton {
height: 130px;
width: 880px;
margin: 100px auto 0 auto;
padding: 0px;
background: transparent url(big-button-bg.gif) no-repeat center top;
}
#bbleft {
width: 420px;
margin: 0;
padding: 0;
display: inline;
float: left;
cursor: pointer;
}
#bbright {
width: 420px;
padding: 0;
margin: 0;
float: right;
display: inline;
cursor: pointer;
}
#bigbutton h1 {
font: 2em/90px Verdana, Arial, sans-serif;
letter-spacing: -3px;
font-weight: bold;
text-align: center;
margin: 0 auto;
padding: 0px;
}
#bigbutton a, #bigbutton a:hover {
color: #333;
text-decoration: none;
outline: none; /* hide dotted outline */
}
#bigbutton h2 {
font: 1.2em/20px Verdana, Arial, sans-serif;
text-align: center;
margin: 0 auto;
padding: 0px;
color: #555;
text-transform:uppercase;
}
#bigbutton h2.on-air {
text-decoration: blink;
}

Il codice javascript (esterno alla pagina):

function avvertisx() {
alert('Hai cliccato sul pulsante di sinistra!');
}
function avvertidx() {
alert('Hai cliccato sul pulsante di destra!');
}
function sfondosx() { //imposta lo sfondo quando si passa il mouse sul pulsante di sinistra
var bigbutton = document.getElementById('bigbutton');
bigbutton.style.backgroundPosition ='0 -130px';
}
function sfondodx() { //imposta lo sfondo quando si passa il mouse sul pulsante di destra
var bigbutton = document.getElementById('bigbutton');
bigbutton.style.backgroundPosition ='0 -260px';
}
function ripristinaSfondo() { //ripristina lo sfondo normale
var bigbutton = document.getElementById('bigbutton');
bigbutton.style.backgroundPosition ='0 0';
}
//Events
function addEvent(elm, evType, fn) {
// cross-browser event handling
if(elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
}
else {
elm['on'+evType] = fn
}
}
function addListeners(e) {
var bbleft = document.getElementById('bbleft');
var bbright = document.getElementById('bbright');
addEvent(bbleft,'click',avvertisx);
addEvent(bbleft,'mouseover',sfondosx);
addEvent(bbleft,'mouseout',ripristinaSfondo);
addEvent(bbright,'click',avvertidx);
addEvent(bbright,'mouseover',sfondodx);
addEvent(bbright,'mouseout',ripristinaSfondo);
}
//Aggiungi gli ascoltatori degli eventi quando si carica la pagina
addEvent(window,'load',addListeners);

Esempio 3: Sfondo alternato su due div separati

Da questa pagina si può vedere l’esempio. In questo caso si utilizza un’immagine diversa per ogni blocco, che viene fatta slittare al passaggio del mouse su uno di essi.

Sintassi HTML:


<div id="bbleft">
<h1><a xhref="" mce_href="" >Pulsante Sinistro</a></h1>
<h2 class="on-air">Passa il mouse qui sopra</h2>
</div>
<div id="bbright">
<h1><a xhref="" mce_href="" >Pulsante Destro</a></h1>
<h2>Oppure qui sopra..</h2>
</div>


Il codice css:
Nota: in questo caso i box sono posizionati in maniera assoluta, ma è possibile utilizzare qualsiasi elemento purchè esso venga identificato con un ID. Penso solo a un effetto di sfumatura su un box all’interno del quale sono presenti link nei paragrafi di testo. Credo possa essere interessante, soprattutto se consideriamo il fatto che questa soluzione non va a ledere in nessun modo gli utenti con javascript disabilitato.
/*divs*/
#bbleft {
width: 380px;
height: 130px;
margin: 0;
padding: 0;
display: inline;
cursor: pointer;
background: transparent url(bbleft.gif) no-repeat center top;
position: absolute;
top: 40px; left: 100px;
}
#bbright {
width: 380px;
height: 130px;
padding: 0;
margin: 0;
display: inline;
cursor: pointer;
background: transparent url(bbright.gif) no-repeat center top;
position: absolute;
top: 200px; right: 200px;
}
#bbleft h1, #bbright h1 {
font: 2em/90px Verdana, Arial, sans-serif;
letter-spacing: -3px;
font-weight: bold;
text-align: center;
margin: 0 auto;
padding: 0px;
}
#bbleft a, #bbleft a:hover, #bbright a, #bbright a:hover {
color: #333;
text-decoration: none;
outline: none; /* hide dotted outline*/
}
#bbleft h2, #bbright h2 {
font: 1.2em/20px Verdana, Arial, sans-serif;
text-align: center;
margin: 0 auto;
padding: 0px;
color: #555;
text-transform:uppercase;
}
#bbleft h2.on-air {
text-decoration: blink;
}

Il codice javascript (esterno alla pagina):

function avvertisx() {
alert('Hai cliccato sul pulsante di sinistra!');
}
function avvertidx() {
alert('Hai cliccato sul pulsante di destra!');
}
function sfondosx() { //imposta lo sfondo a destra quando si passa il mouse sul pulsante di sinistra
var bbright = document.getElementById('bbright');
bbright.style.backgroundPosition ='0 -130px';
}
function sfondodx() { //imposta lo sfondo a sinistra quando si passa il mouse sul pulsante di destra
var bbleft = document.getElementById('bbleft');
bbleft.style.backgroundPosition ='0 -130px';
}
function ripristinaSfondosx() { //ripristina lo sfondo normale a destra
var bbright = document.getElementById('bbright');
bbright.style.backgroundPosition ='0 0';
}
function ripristinaSfondodx() { //ripristina lo sfondo normale a sinistra
var bbleft = document.getElementById('bbleft');
bbleft.style.backgroundPosition ='0 0';
}
//Events
function addEvent(elm, evType, fn) {
// cross-browser event handling
if(elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
}
else {
elm['on'+evType] = fn
}
}
function addListeners(e) {
var bbleft = document.getElementById('bbleft');
var bbright = document.getElementById('bbright');
addEvent(bbleft,'click',avvertisx);
addEvent(bbleft,'mouseover',sfondosx);
addEvent(bbleft,'mouseout',ripristinaSfondosx);
addEvent(bbright,'click',avvertidx);
addEvent(bbright,'mouseover',sfondodx);
addEvent(bbright,'mouseout',ripristinaSfondodx);
}
//Aggiungi gli ascoltatori degli eventi quando si carica la pagina
addEvent(window,'load',addListeners);
Se avete problemi ad utilizzare questi esempi o volete capire come personalizzarli non esitate a fare domande.. Alla prossima.

Il Flash

Due classici casi in cui mezzo e fine vanno d’accordo sono il Photodiary di Webgriffe e il Fluidbook di Cubedesigners. Sono entrambi prodotti a pagamento, il primo è un diario on-line con il quale è possibile pubblicare proprie foto, i visitatori poi possono lasciare commenti che appaiono su foglietti volanti tipo post-it; il secondo è uno strumento per pubblicare libri più in generale presentazioni e testi scritti, con efficaci strumenti per la navigazione, lo zoom, la stampa, ecc.
Così a prima vista sembrano prodotti in qualche modo confrontabili, mi ha stupito il fatto che quello made in italy costi solamente 49 euro mentre il secondo va dai 600 ai 3000 euro. Sono gli americani cari o noi troppo economici?

La schermata di PhotoDiary

La schermata di FluidBook

Javascript

I miei bookmarks su ajax e javascript sono ormai sterminati. Esistono librerie già pronte in grado di simulare effetti e transizioni davvero stupefacenti. In molti conoscono Mootools-Moo.fx, Prototype-Scriptaculous, jQuery e derivati: Smoothbox, Thickbox, Modalbox, MOOdalbox, Slimbox e chi più ne ha più ne metta.. L’ultima scoperta è stato un template per joomla che simula un sistema operativo. Non mi chiedete se e a cosa possa servire: ma tant’è che qualcuno ha pensato bene di divertirsi.

Tutto questo per fare un ragionamento: sempre pù spesso mi capita di navigare su siti che propogono soluzioni graficamente accattivanti mantenendo quella linearità e quella pulizia di codice che a mio parere flash non può garantire.
Ci sono combinazioni di CSS e Javascript che mi lasciano piacevolmente stupito, due esempi su tutti: il sito di Coda e HorizontalWay.