Leggere i dati di un documento XML è un’operazione semplice e veloce, farli visualizzare su una pagina web è altrettanto rapido, ma è bene sapere alcune nozioni per potersi muovere con tranquillità e sicurezza.

Andiamo con ordine e vediamo subito un esempio di un file XML che vogliamo trattare:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
<data>
[..]
</data>
</DataSet>

Questo file potrebbe rappresentare dei dati produttivi, riguardanti ad esempio i materiali entrati in magazzino, i materiali prodotti e il venduto.

Il modo più rapido e banale per leggere questo file e farlo visualizzare su una pagina ASPX è tramite il seguente codice:

DataSet ds = new DataSet();
ds.ReadXml(@"C:\test.xml", XmlReadMode.Auto);
DataView MyDataView = new DataView(ds.Tables[0]);
MyDataGrid.DataSource = MyDataView;
MyDataGrid.DataBind();

Il codice non fa altro che creare un nuovo DataSet per contenere i dati che andremo a leggere, leggere il file tramite il metodo ReadXml(), creare una DataView con la tabella creata nel dataset e assegnare quest’ultima come DataSource per la DataGrid.

All’interno della pagina .aspx ci sarà quindi una DataSource così fatta:

<asp:DataGrid id="MyDataGrid" runat="server" >
    <HeaderStyle CssClass="th">
    </HeaderStyle>
</asp:DataGrid>

Tralasciamo lo stile attribuito alla testata della datagrid, ciò che è importante in questo caso è solo l’ID. 

Così facendo però ottengo una tabella di questo tipo:

E tutti gli altri dati che fine hanno fatto? Sono stati salvati in altre tabelle del DataSet, assieme a tutti gli attributi dell’xml; queste tabelle avranno come riferimento il data_Id e potrò utilizzarle come meglio credo.

Se infatti cambiamo il primo codice, mettendo una tabella diversa, in questo modo:

DataView MyDataView = new DataView(ds.Tables[1]);

Verrà visualizzata una pagina con la seguente tabella:

Se cambio e metto la terza tabella:

DataView MyDataView = new DataView(ds.Tables[2]);

Il risultato sarà:

Mentre per le tabelle successive, avrò questi risultati visualizzati:

Incrociando queste tabelle attraverso il campo data_Id potrei ricavare tutti i dati contenuti nell’XML, attributi e testi all’interno dei tag.
Il mio obiettivo era però quello di far visualizzare questi dati senza gli attributi riportati nell’XML. Ciò che mi interessa sono solo i dati riportati all’interno dei tag. Vorrei avere un risultato di questo tipo:

In questo caso potrebbe fare al caso nostro l’ XML Schema. Si tratta di un file con estensione XSD, che descrive i dati contenuti in un file XML. Ogni file XML può avere uno schema associato che lo descrive. Esistono diversi tool che possono creare un file XSD a partire da un XML, uno di questi, che trovo molto pratico è quello di Flame-Ware completamente on-line. 

Il nostro file XML iniziale potrebbe essere descritto da questo XSD, supponendo che tutti i campi siano stringe.

<?xml version="1.0"?>
<!-- Generated using Flame-Ware Solutions XML-2-XSD v2.0 at http://www.flame-ware.com/Products/XML-2-XSD/ -->
<xs:schema id="DataSet" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="DataSet" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="data">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="period" type="xs:string" minOccurs="0" />
              <xs:element name="description" type="xs:string" minOccurs="0" />
              <xs:element name="updated" type="xs:string" minOccurs="0" />
              <xs:element name="note" type="xs:string" minOccurs="0" />
              <xs:element name="logunit" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="logunit_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="id" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="entered" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="entered_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="produced" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="produced_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="delivered" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="delivered_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>

Per associare questo schema al file XML, è necessario dichiararlo nell’intestazione, in questo modo:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="schema.xsd">
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
</DataSet>

Così facendo però, se rilanciamo la pagina costruita in precedenza, il risultato sarà identico: un unico dataset con diverse tabelle collegate tra loro dal campo data_Id.

Quindi? La soluzione c’è. Dobbiamo solo definire uno schema XSD semplificato all’interno dell’XML stesso. In questo modo:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet>
<xs:schema id="NewDataset" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="NewDataset" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="data">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="period" type="xs:string" minOccurs="0" />
              <xs:element name="description" type="xs:string" minOccurs="0" />
              <xs:element name="updated" type="xs:string" minOccurs="0" />
              <xs:element name="note" type="xs:string" minOccurs="0" />
              <xs:element name="logunit" type="xs:string" minOccurs="0" />
              <xs:element name="entered" type="xs:string" minOccurs="0" />
              <xs:element name="produced" type="xs:string" minOccurs="0" />
              <xs:element name="delivered" type="xs:string" minOccurs="0" />
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
</DataSet>

Il risultato finale sarà quindi una DataGrid che può essere visualizzata come sotto, utilizzando pari pari il codice C# definito all’inizio di questo articolo.

Buon divertimento con l’XML..

Come noto, un feed RSS è un documento XML. La formattazione è classica:

<?xml version=”1.0″ encoding=”UTF-8″?>
<rss version=”2.0″>
<channel>
<generator>NFE/1.0</generator>
<title>obama – Google News</title>
<link>http://news.google.it/news?hl=it&ned=it&q=obama&ie=UTF-8</link>
<language>it</language>
<webMaster>news-feedback@google.com</webMaster>
<copyright>©2008 Google</copyright>
<pubDate>Mon, 15 Dec 2008 14:34:32 GMT</pubDate>
<lastBuildDate>Mon, 15 Dec 2008 14:34:32 GMT</lastBuildDate>
<image>
<title>obama – Google News</title>
<url>http://news.google.com/intl/it_it/images/news_res.gif</url>
<link>http://news.google.it/</link>
</image>
<item>
<title>USA: OBAMA ANNUNCIA OGGI NOMINE ENERGIA E AMBIENTE – La Repubblica</title>
<link>http://news.google.it/news/url?sa=T&ct=it/0-0&fd=R&url=http://www.repubblica.it/news/ired/ultimora/esteri/rep_esteri_n_3455881.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNF0go8PkbUwHKLk9BaKdp8dFCS0hg</link>
<guid isPermaLink=”false”>tag:news.google.com,2005:cluster=http://www.repubblica.it/news/ired/ultimora/esteri/rep_esteri_n_3455881.html</guid>
<pubDate>Mon, 15 Dec 2008 07:37:02 GMT</pubDate>
<description><table border=0 width= valign=top cellpadding=2 cellspacing=7><tr><td width=80 align=center valign=top><font style=”font-size:85%;font-family:arial,sans-serif”><a  href=”http://news.google.it/news/url?sa=T&ct=it/0i-0&fd=R&url=http://www.instablog.org/ultime/35898.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNFqys_EXXw7Kh4xa96o32AB49JHvw”><img src=http://news.google.it/news?imgefp=ve3DuBkpQiwJ&imgurl=www.instablog.org/blogpress/art/ultimora/obama.jpg width=80 height=51 alt=”” border=1><br><font size=-2>The Instablog</font></a></font></td><td valign=top class=j><font style=”font-size:85%;font-family:arial,sans-serif”><br><div style=”padding-top:0.8em;”><img alt=”” height=”1″ width=”1″></div><div class=lh><a href=”http://news.google.it/news/url?sa=T&ct=it/0-0&fd=R&url=http://www.repubblica.it/news/ired/ultimora/esteri/rep_esteri_n_3455881.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNF0go8PkbUwHKLk9BaKdp8dFCS0hg”>USA: <b>OBAMA</b> ANNUNCIA OGGI NOMINE ENERGIA E AMBIENTE</a><br><font size=-1><font color=#6f6f6f>La Repubblica -</font> <nobr>6 ore fa</nobr></font><br><font size=-1>Il presidente eletto, Barack <b>Obama</b>, annuncera’ oggi le nomine del segretario al Dipartimento Energia e dello ‘zar’ per l’Ambiente. Gli annunci, che verranno <b>…</b></font><br><font size=-1><a href=”http://news.google.it/news/url?sa=T&ct=it/0-1&fd=R&url=http://notizie.alice.it/notizie/esteri/2008/12_dicembre/15/usa_obama_incontra_oggi_staff_difesa_e_annuncia_nomine_ambiente,17232675.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNHg4RwSRzsrR_uvMvcY3h-S38meRg”>Usa/ <b>Obama</b> incontra oggi staff difesa e annuncia nomine ambiente</a> <font size=-1 color=#6f6f6f><nobr>Virgilio Notizie</nobr></font></font><br><font size=-1><a href=”http://news.google.it/news/url?sa=T&ct=it/0-2&fd=R&url=http://www.agenziami.it/ultime/9415/USA%2BObama%2Bpronte%2Ble%2Bnomine%2Bper%2Bl%2Bambiente/&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNGniMEyAO4lJg5HiWJCKROXee8p_g”>USA. <b>Obama</b>, pronte le nomine per l’ambiente</a> <font size=-1 color=#6f6f6f><nobr>(ami) Agenzia Multimediale Italiana</nobr></font></font><br><font size=-1><a href=”http://news.google.it/news/url?sa=T&ct=it/0-3&fd=R&url=http://www.instablog.org/ultime/36309.html&cid=1263615727&ei=92pGScbgOJmmwAGz5pzbDg&usg=AFQjCNF64d7ozOXQdd8tBoaRDHWfPlBfsg”><b>Obama</b>: nomine ambiente, oggi gli annunci ufficiali</a> <font size=-1 color=#6f6f6f><nobr>The Instablog</nobr></font></font><br><font class=p size=-1><a class=p href=http://news.google.it/news?hl=it&ned=it&ie=UTF-8&ncl=1263615727><nobr>e altri 4 articoli simili</nobr></a></font></div></font></td></tr></table></description>
</item>
[...]
</channel>
</rss>

Si può formattare a dovere con un po’ di XSL per pubblicare ad esempio i titoli, rendendoli cliccabili con un link diretto all’articolo (quello contenuto nel tag <link>).

<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”>
<xsl:template match=”/rss”>
<html>
<head>
<!–<link href=”style.css” rel=”stylesheet” type=”text/css” />–>

</head>
<body>
<div id=”logo” style=”border-bottom: 1px solid #ccc; margin-bottom: 5px; font-size: 1.2em; font-weight: bold;”>
<xsl:element name=”a”>
<xsl:attribute name=”href”>
<xsl:value-of select=”channel/link” />
</xsl:attribute>
<xsl:value-of select=”channel/title” />
</xsl:element>
</div>
<div class=”Snippet”>
<ul style=”list-style: none; margin: 0; padding:0″>
<xsl:for-each select=”channel/item”>
<li>
<xsl:element name=”a”>
<xsl:attribute name=”href”>
<xsl:value-of select=”link”/>
</xsl:attribute>
<xsl:value-of select=”title”/>
</xsl:element>
<br/>
<small style=”color: #ccc; text-align: right”><xsl:value-of select=”pubDate” /></small>
</li>
</xsl:for-each>
</ul>
</div>
<div id=”footer” style=”display: none;”>
<xsl:value-of select=”channel/copyright” />
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Per semplificare un po’ ho aggiunto qualche regola CSS direttamente in linea, ma nulla vieta di creare un foglio esterno (ho commentato la porzione di codice che richiamerebbe un foglio di stile).
L’unica vera scocciatura di Google News è che non offre un feed pulito, ma all’interno del tag <description> inserisce codice html e questo può dare problemi in fase di parsing XML.

Per chi volesse approfondire l’argomento un buon punto di partenza è questo. Buona lettura.

Su questo blog è attivo il mio plugin: WP COinS. Non fa altro che inserire una riga di codice invisibile all’interno dell’articolo in modo che i software in grado di ricoconoscere i COinS ne ricavino le informazioni. Per chi non sa cosa siano i COinS, qui potete capirci qualcosa in più.

Download e Installazione

Potete scaricare lo zip da questo link: wp-coins

Installare il plugin è semplicissimo, basta copiare il file wp-coins.php nella cartella dei plugin (wp-content/plugins/) e attivarlo dal pannello di amministrazione.

Una volta attivo (se avete zotero) sarà visibile un’icona nella barra degli indirizzi, che permette l’archiviazione dell’articolo nella bibliografia: vedi screenshot sottostante.

Per onor di cronaca: esiste già un plugin di wordpress sviluppato dal team di zotero: allora perchè ne ho fatto uno io? Per due motivi, sono partito a svilupparlo senza guardare se in giro c’era già (pirla!) e avevo voglia di fare pratica con la realizzazione da zero di un plugin (un plugin in più è pur sempre qualche conoscenza in più..).
Inoltre, motivo più utile: è progettato per i blog in italiano. La lingua, le descrizioni, sono tutte in lingua nostrana. Motivo per cui non sarà diffuso in inglese ne distribuito sul repository ufficiale, ciò non toglie che sia pienamente testato sulla più recente versione di wordpress.
Che di inglese ne abbiamo già un sacco.. :)

Se poi la reperibilità dei vostri articoli vi sta particolarmente a cuore, non perdetevi il plugin di undolog che aggiunge il descrittore XML dello standard open search al vostro sito.

Piccola nota: se non te ne frega niente del codice ma vuoi semplicemente sapere quali strumenti usare per geotaggare i tuoi post e il tuo feed, vai direttamente a leggere la parte relativa a feedburner o al plugin di wordpress Geopress.

Localizzare un sito web

Ci sono degli standard non formalizzati per rappresentare i metadati geografici all’interno delle pagine web.  Uno è quello proposto da GeoUrl:
<meta name="ICBM" content="latitudine, longitudine" />

L’altro è quello proposto da GeaoTags:
<meta name="geo.position" content="latitudine; longitudine" />
<meta name="geo.placename" content="Nome del luogo" />
<meta name="geo.region" content="Codice del Paese" />


I meta tag hanno valore se sono accettati e interpretati dai motori di ricerca, questi sembrano essere lo standard de facto. Per ricavare i dati relativi al nostro luogo è bene usare servizi come il Getty Thesaurus of Geographic Names, dove inserendo ad esempio “Reggio Emilia” si ricavano i dati di latitudine e longitudine oltre al Paese di appartenenza. Per il codice del Paese è bene utilizzare invece lo standard ISO, per l’Italia è il classico “IT”.

Un esempio? Da quando è stato fatto il redesign, tra i meta tag dell’home page di questo sito ci sono anche i seguenti:

<meta name="ICBM" content="44.6167,10.6167" />
<meta name="geo.position" content="44.6167;10.6167" />
<meta name="geo.placename" content="Reggio Emilia" />
<meta name="geo.region" content="IT" />

Sono appunto i meta tag che descrivono la posizione geografica del sito: Reggio Emilia. La geolocalizzazione con questi meta tag richiede di importare anche il riferimento allo schema, con il seguente codice:
<link href=”http://geotags.com/geo/” rel=”schema.geo” />

Localizzare i feed RSS

Per quanto riguarda i singoli post di un blog, invece, potrebbe essere utile posizionarli in base al contenuto. Se ad esempio stiamo parlando delle ultime vacanze in Sicilia, è meglio localizzare questa pagina a Palermo. Oltre ai meta tag descritti precedentemente, si possono utilizzare costrutti nel feed RSS degli articoli.

E’ possibile assegnare una posizione geografica all’intero feed, in questo modo:

<rdf:RDF>
<geo:Point>
<geo:lat>55.701</geo:lat>
<geo:long>12.552</geo:long>
<geo:alt>52.4</geo:alt>
</geo:Point>
</rdf:RDF>


Quello presentato sopra è lo stesso codice proposto anche dal W3C, sebbene non si tratti di una standardizzazione formale, ma di indicazioni ancora in fase di discussione. Il W3C Geospatial Incubator Group ha accettato il codice proposto da Georss.
Un altro modo, alternativo, è il seguente codice:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
<title>Il mio blog</title>
<link>http://diplod.com</link>
<description>Descrizione</description>
<icbm:latitude>44.6167</icbm:latitude>
<icbm:longitude>10.6167</icbm:longitude>
<copyright>Copyright 2005</copyright>
<pubDate>Wed, 05 Jan 2005 18:54:47 +0000</pubDate>
<generator>http://wordpress.org/?v=2.5</generator>
<item>
<title>Titolo di esempio</title>
<link>http://highearthorbit.com/index.php?p=121</link>
<pubDate>Wed, 05 Jan 2005 18:54:47 +0000</pubDate>
<category>Categoria di esempio</category>
<guid>http://diplod.com/category/esempio/</guid>
<description>Descrizione</description>
<geo:Point>
<geo:lat>44.6167</geo:lat>
<geo:long>10.6167</geo:long>
</geo:Point>
<icbm:latitude>44.6167</icbm:latitude>
<icbm:longitude>10.6167</icbm:longitude>
</item>
</channel>
</rss>

In grassetto ho evidenziato la parte di codice relativa alla localizzazione, le righe 7 e 8 si riferiscono all’intero feed mentre il codice contenuto tra il tag <item> e </item> riguarda il singolo post. Anche in questo caso quindi abbiamo due modi differenti: col tag geo oppure icbm.

Geotag con Feedburner

Per chi utilizza feedburner invece il geotagging del feed è semplicissimo, dal pannello di amministrazione del feed basta cliccare sulla tab “Optimize” poi nel menù a sinistra sulla voce “Geotag your feed”.

Da questa schermata basta inserire latitudine e longitudine e Feedburner aggiungerà il codice all’intero feed in automatico.

GeoPress: plugin per wordpress

Geopress è un plugin di wordpress che permette di localizzare i post o le pagine del blog direttamente dal pannello di amministrazione. Basta installarlo e durante la scrittura di un post sarà possibile indicare nell’apposito campo il luogo al quale l’articolo fa riferimento, inserendo il nome della città, le coordinate o semplicemente selezionando sulla mappa il punto esatto.

E’ inoltre possibile inserire all’interno di un post la cartina di gmap e altre mappe, tra cui Microsoft, OpenStreetMap, 3DGlobe.. senza toccare il template o il codice. Oltre a inserire queste informazione nel feed RSS o Atom, Geopress fornisce anche i link KML per la visualizzazione su Google Earth o GPX per la visualizzazione sui navigatori GPS.

Per attivare Geopress, è necessario inserire la Google Map Api Key, ottenuta semplicemente fornendo il proprio indirizzo del blog. Questo è necessario per poter visualizzare la mappa interattiva nel pannello di amministrazione o sulle proprie pagine.

In sostanza si tratta di un tool completo per dare al feed del blog e ai singoli articoli una perfetta geolocalizzazione.
Per chi vuole ottenere il massimo, il plugin offre alcune interessanti funzioni da sfruttare all’interno del tempate. Se volessimo pubblicare i meta tag di geolocalizzazione visti in precedenza, per ogni singolo post, sulla base della località assegnata tramite il plugin, possiamo usare questo codice:

<?php if ((is_single() || is_page()) && function_exists('has_location')) {
if (has_location()) {
$coordinate=array(the_coord());
$coordinateICBM=str_replace(' ',',',$coordinate[0]);
$coordinateGEO=str_replace(' ',';',$coordinate[0]);
?>
<meta name="ICBM" content="<?php echo($coordinateICBM) ?>" />
<meta name="geo.position" content="<?php echo($coordinateGEO) ?>" />
<meta name="geo.placename" content="<?php echo(the_location_name()) ?>" />
<?php }
} ?>


Non fa altro che controllare se si tratta di una pagina singola o di un post in cui è stata assegnata la località e il plugin geopress è attivo, per poi pubblicare le coordinate sottoforma di metatag. Questo codice va inserito nel file header.php del template tra i tag <head> e </head>.

Conclusioni

I servizi che mettono a disposizione informazioni e cintenuti su base geografica aumentano di giorno in giorno, si arriverà quindi all’accettazione di uno standard per poterli integrare e uniformare. Dalle mappe di Google oggi possiamo fare ricerche per trovare attività commerciali e siti web. Del resto anche la nuova BlogBabel utilizza i dati geografici per pubblicare informazioni circa le discussioni di un particolare luogo, pochi giorni fa ad esempio ho aggiunto al mio aggregatore il feed che monitorizza le notizie relative alla mia zona. Adottare questi accorgimenti nel proprio blog potrebbe rivelarsi molto utile per catturare quelle persone che vanno alla ricerca di informazioni su base geografica.

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.

Al giorno d’oggi Macromedia/Adobe continua a proporre questo codice per l’inserimento di file flash all’interno di pagine web (datato Novembre 2004):

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" id="myMovieName"><PARAM
NAME=movie VALUE="myFlashMovie.swf"><PARAM NAME=quality
VALUE=high><PARAM NAME=bgcolor
VALUE=#FFFFFF><EMBED
xsrc="/support/flash/ts/documents/myFlashMovie.swf" mce_src="/support/flash/ts/documents/myFlashMovie.swf" quality=high
bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>

Un vero mostro: informazioni ripetute, maiuscole e minuscole a caso, valori degli attributi espressi senza le virgolette e chi più ne ha più ne metta. Inutile dire che questo codice non supera la validazione W3C.

Il sito di Adobe, tanto per citarne uno, utilizza un javascript per richiamare il file .swf, ma gli errori di validazione restano..
Esiste una soluzione per ottenere un codice valido e funzionante su tutti i browser, ma non è perfetta. In soldoni, si tratta di scrivere tutte le informazioni all’interno del tag “object“:

<object type="application/x-shockwave-flash"
data="mioFileFlash.swf"
width="400" height="300">
<param name="movie"
value="mioFileFlash.swf" />
<img xsrc="noflash.gif" mce_src="noflash.gif"
width="200" height="100" alt="" /><p>Qui si
possono aggiungere info per chi non ha il plugin flash</p>
</object>


Su Html.it un articolo di Alessandro Fulciniti (sempre datato 2004) affronta queste tematiche e presenta diverse tecniche, anche tramite l’utilizzo di javascript.
Sto usando il flash per un nuovo progetto, e siccome mi piace far le cose per bene, non posso accettare che un’operazione banale come l’inserimento di un filmato sia una faccenda da guru internazionale degli standard web.

Succede poi che scopri per caso che YouTube se ne infischia della validazione W3C, e con lui la stragrande maggioranza dei “mostri sacri“; finisci così su un articolo recentissimo di A List Apart dove si propone di coinvolgere maggiormente le grosse compagnie all’interno del movimento sui web standard.

Leggi che è tutto un batti becco fra esperti che non arrivano al dunque: c’è quello che propone le sue cose, quello che vorrebbe i css 2.2, quelli che vogliono l’HTML 5 e quelli che prefrirebbero l’XHTML 4.. Insomma, leggi questo e questo, poi sopraggiunge quello stress da validazione, che ti assale ogni volta che fai un nuovo progetto e ti vien voglia di lasciar perdere tutto: tanto ai “grandi” non interessa manco di striscio!

Morale

Le giuste conclusioni le trae Peter Paul Koch sull’articolo citato in precedenza.
I sostenitori degli standard web sono le piccole agenzie, gli sviluppatori freelance e le istituzioni come le università o le organizzazioni di ricerca. Al giorno d’oggi l’interna infrastruttura è supportata da questi gruppi. Non è una coincidenza: queste persone hanno bisogno degli standard per farsi un nome e acquisire più clienti. E’ un bene, perchè loro hanno bisogno degli standard così come questi hanno bisogno di loro. Resta un dato di fatto: finchè non si coinvolgeranno pienamente nel movimento le grandi aziende, allora sarà difficile imporre delle direttive che poi vengono rispettate e implementate dai produttori di browser.

Quando avere un sito validato sarà motivo di vanto, sia per Mtv che per la Tv locale, sia per Adobe che per il negozio di informatica sotto casa, allora si potrà dire di aver fatto passi avanti. E i produttori di browser si adegueranno.. si adegueranno?

Margini mangiati

Il problema è davvero particolare. Consideriamo un box con il seguente codice css:

blockquote {
margin: 15px 30px 0 10px;
padding: 2px 6px 2px 20px;
border-left: 5px solid #F8BF24;
background: #FFF6D9 url('images/quote.gif') no-repeat top left;
}

Su Firefox e Opera nessun problema, su Internet Explorer invece l’immagine di sfondo allineata a sinistra va in conflitto con il margine sinistro e si sovrappone ad esso. Tutto ciò che sta sotto al box viene poi spostato verso sinistra di qualche pixel, e finisce nascosto dietro al box esterno che lo contiene. L’effetto è a cascata: ovvero se sotto ci sarà un altro box di tipo blockquote, tutto ciò che viene dopo subisce uno spostamento verso sinistra ancora maggiore. La faccenda è ancora più strana se pensiamo che passando il mouse sopra a un link, l’allineamento delle righe prossime al link torna normale, mentre le righe sottostanti restano allineate male. Il bug si coglie bene da questi screenshot.

Il bug è stato corretto semplicemente mettendo l’immagine di sfondo a destra. Con l’immagine allineata in questo modo il problema non si manifesta più. Il nuovo codice del box risulta essere:

blockquote {
margin: 5px;
padding: 2px 26px 2px 6px;
border: 1px solid #f3dc9e;
border-left: 4px solid #F8BF24;
background: #FFF6D9 url('images/quote.gif') no-repeat top right;
overflow: auto;
}

Immagine di sfondo mangiata

Su IE (Microsoft Internet Explorer) se abbiamo a che fare con un box sul quale è impostata la regola overflow: hidden e dove una parte del contenuto viene nascosta, l’immagine di sfondo di questo box viene mangiata e si vede solo in parte.
Prendiamo ad esempio questo codice, relativo al box di sinistra dell’home page di diploD:

#homeboxleft {
float: left;
width: 53%;
padding: 10px;
margin: 20px 1% 60px 0;
overflow: hidden;
background: #fff url('images/homeboxbg_left.gif') no-repeat top right;
border: 1px solid #ccc;
} Questo box ha come immagine di sfondo l’arcobaleno a tre colori. Se all’interno andiamo a mettere un’immagine che sfora le dimensioni del box in larghezza essa viene tagliata, in virtù della regola di overflow. Lo si può vedere bene in questi screenshot. Il primo riporta l’immagine che sfora la larghezza del box mentre il secondo mette in evidenza l’immagine di sfondo “tagliata”.

Ciò che accade è sintetizzato in questo schema.

Questo problema si manifesta su Internet Explorer sia con la versione 6 che con la versione 7, anche se con quest’ultima l’immagine che sfora viene ridimensionata. Su Firefox invece è tutto normale, l’immagine di sfondo viene allineata al bordo del box mentre l’immagine più larga viene automaticamente ridimensionata all’interno del box.