Nei giorni scorsi è stato rilasciato SuperPreview, un software Microsoft molto interessante. SuperPreview permette di vedere l’anteprima di una singola pagina web all’interno dei tre browser made in Redmond al momento maggiormente utilizzati: Internet Explorer 8, Internet Explorer 7 (tramite la funzione Compatibility View di IE 8) e, sopratutto, il famigerato Internet Explorer 6, tutt’ora incubo degli sviluppatori.

Perchè SuperPreview?

Il testing delle pagine web su più browser è un passaggio molto importante per chi sviluppa siti internet, necessario per eliminare eventuali inconsistenze. Le alternative sono principalmente due:

• utilizzare uno dei numerosi servizi online, come BrowserShots, che offrono, in modo gratuito o a pagamento, la possibilità di scaricare anteprime del rendering della pagina su più browser;
• tenere installate più versioni dei browser sul proprio sistema ed effettuare il test manualmente.

Entrambi le possibilità offrono vantaggi e svantaggi: se la prima elimina la necessità di avere molti browser sul proprio computer, è altrettanto vero che necessita di tempi molto più lunghi per aspettare che il rendering remoto si concluda e non offre strumenti di analisi della struttura del documento.

La seconda possibilità è sicuramente più immediata in quanto tutto il testing avviene in locale, ma presenta diversi problemi quando proviamo ad installare due versioni dello stesso browser incompatibili tra loro. Questo è particolarmente vero per Internet Explorer data l’impossibilità di avere contemporaneamente più versioni di Internet Explorer sullo stesso sistema operativo (a meno di non ricorrere ad alcuni hack). Per effettuare i test si rende necessario quindi l’utilizzo di computer diversi (o di macchine virtuali) con sopra installate le diverse versioni del browser, con tutti i problemi e i rallentamenti che questa procedura comporta.

Attraverso SuperPreview, invece, possiamo svolgere tutti i test, almeno per quanto riguarda IE, all’interno di un singolo ambiente di lavoro. Oltretutto il software è rilasciato gratuitamente, quindi perchè non dargli almeno un’occhiata? :-)

SuperPreview è una versione ridotta (e proprio per questo gratuita) del programma completo incluso nella suite Microsoft Expression Web. Pertanto sarà possibile effettuare l’anteprima delle pagine soltanto con i browser Microsoft. Con il programma completo è invece possibile avere l’anteprima anche con altri browser, ad esempio Firefox.

L’Interfaccia

Una volta scaricato e installato, il programma si presenta con una interfaccia abbastanza chiara ed intuitiva:

In alto è presente la classica la barra degli strumenti, al centro lo spazio dove verranno mostrate le anteprime della pagina e in basso lo spazio dove aggiungere nuovi browser, visualizzare la struttura DOM del documento e selezionare la risoluzione con cui effettuare l’anteprima.

La barra degli strumenti si divide in sette gruppi distinti:

1. Strumenti di selezione: per selezionare singoli elementi all’interno del DOM o scorrere il documento.
2. Modalità di selezione: selezionando la prima modalità verrà visualizzato un riquadro attorno all’elemento DOM selezionato, mentre con la seconda tutta la pagina escluso l’elemento selezionato verrà nascosta.
3. Strumenti di misurazione: nascondono o visualizzano i righelli e le linee guida, molto utili per verificare che gli elementi della pagina siano allineati.
4. Strumenti layout: le varie modalità in cui disporre le anteprime della pagina con i vari browser (orizzontalmente, verticalmente, ecc). Molto comoda la visualizzazione overlay, che sovrappone due anteprime in modo da vedere le discontinuità tra una e l’altra.
5. Barra dell’indirizzo: dove inserire l’indirizzo della pagina web da visualizzare. E’ possibile selezionare una pagina dall’hard disk premendo il pulsante con i tre puntini.
6. Zoom: livello di ingrandimento a cui visualizzare le anteprime.
7. Menu di aiuto: contiene la guida in linea e i collegamenti al sito ufficiale del programma.

Alcuni esempi: Box Model, Trasparenza PNG, CSS 3

Per testare le funzionalità di SuperPreview ho preparato un piccolo esempio che contiene alcuni scenari tipici di incompatibilità con le diverse versioni di Internet Explorer. Vi invito a scaricare il file e a provare ad effettuare i test voi stessi. L’esempio si compone di tre parti distinte:

1. Test del Box Model in Quirks Mode (IE 6 e 7) e Standard Mode (IE 8).
2. Test della trasparenza PNG (non supportata correttamente da IE 6.
3. Test della proprietà CSS 3 text-shadow non supportata da tutte le versioni di Internet Explorer.

Selezioniamo quindi i browser Internet Explorer 8 e 6 nella zona di selezione browser:

Ed inseriamo l’indirizzo della pagina. A questo punto siamo in grado di verificare le differenze di rendering nel file di esempio. In particolare, mentre IE 8 non avrà difficoltà nel visualizzare il primo esempio seguendo lo standard W3C per il Box Model, IE 6 visualizzerà la pagina in Quirks Mode utilizzando il Box Model errato. Lo stesso discorso vale per il test PNG: IE 6 non visualizza l’immagine con trasparenza.

E’ possibile ripetere i test con IE 8 in Compatibility View. In questo caso il risultato del primo test sarà esattamente identico (e quindi errato) a quello di IE 6. Internet Explorer 7 tuttavia supporta la trasparenza PNG, il secondo test avrà esito positivo.

Nessuna versione di Internet Explorer supporta le proprietà CSS 3: l’esito dell’ultimo test sarà identico per tutti e tre i browser.

Pagine Web, ma non solo

Una funzionalità molto interessante riguarda la possibilità di importare layout direttamente da file immagine .bmp, .gif, .png, .jpg, ma anche da file Adobe Photoshop (estensione .psd). Questo risulta molto utile durante il lavoro di conversione da layout grafico, sviluppato all’interno di una applicazione di grafica come appunto Photoshop, alla rappresentazione in HTML e CSS.

Per usufruire di questa funzione è suffieciente premere il pulsante Open Image all’interno della finestra principale:

Conclusioni

Se proprio vogliamo essere pignoli, dobbiamo dire che la visualizzazione delle proprietà DOM e CSS andrebbe migliorata perchè al momento non è all’altezza di altri software come Firebug. Inoltre il programma è sensibilmente lento in fase di rendering delle pagine, soprattutto nel caso di pagine abbastanza complesse.

In conclusione SuperPreview è un piccolo software estremamente interessante, gratuito e che vale la pena scaricare anche solo per la possibilità che ci offre di testare i nostri layout su IE 6 / 7 / 8 sullo stesso computer, senza dover ricorrere a servizi online o a macchine virtuali.

Il nuovo framework Asp.Net MVC (attualmente alla Preview Release 5), è stato progettato per offrire un alto grado di estensibilità: ogni suo componente può essere modificato o interamente sostituito. In molti casi, come per il motore di rendering delle viste, è addirittura possibile far convivere un sistema personalizzato assieme a quello di default, caretteristica che rende possibile utilizzare funzionalità personalizzate senza rinunciare a quelle offerte dal framework.

In questo articolo realizzeremo un catalogo dei prodotti, uno fra gli esempi più classici per MVC, utilizzando un view engine alternativo, Spark.

Come sempre vi invito alla lettura ed a lasciare scritto qui sul blog cosa ne pensate. :)

Quando parlo di estensibilità, oltre alla personalizzazione del meccanismo di routing e agli HTML Helpers, penso soprattutto alla possibilità di utilizzare motori alternativi per il rendering delle viste come: Brail, NVelocity e Spark, che è attualmente il mio preferito e per cui sto scrivendo un set di utility integrato con Visual Studio (SparkTools, che contiene per ora un compilatore e alcuni template per file e progetti) che conto di rilasciare sotto licenza open source fra breve.

In questi giorni ho trovato molto interessante una notizia per cui Microsoft sembra intenzionata ad includere, senza cambiarne la lincenza (!!!!), JQuery all’interno di Visual Studio (con tanto di Intellisense), rendendolo disponibile di default anche per MVC.

E’ la prima volta che vedo Microsoft utilizzare una tecnologia già pronta e per giunta open source invece di ricostruirla da zero con risultati spesso discutibili. Speriamo che insieme al modello di sviluppo adottato per MVC e ai finanziamenti alla fondazione Apache, la scelta di utilizzare JQuery sia un passo verso una compagnia migliore di quello che è stata in passato.

In realtà però reCAPTCHA è qualcosa di più: utilizzando il piccolo controllo, disponibile come plugin per molti linguaggi di programmazione come PHP e ASP.Net e per piattaforme come WordPress e phpBB, è possibile aiutare la digitalizzazione di testi antichi, in particolare quelli di Internet Archive. Infatti nel form di verifica sono presenti due parole da identificare: una delle due è stata letta correttamente da un programma OCR sulla pagina di un libro, mentre l’altra è di interpretazione incerta.

Identificando correttamente la prima, il software reCAPTCHA riterrà molto probabile che abbiate indovinato anche la seconda. Non appena la parola incerta sarà stata identificata correttamente da un certo numero di persone, questa verrà considerata sicura ed aggiunta al rispettivo elenco.

Il plugin per ASP.Net, si compone di una libreria da inserire all’interno del proprio progetto. All’interno della libreria è presente un controllo personalizzato che è possibile utilizzare direttamente nelle nostre pagine:

<%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>

<recaptcha:RecaptchaControl
  ID="recaptcha"
  runat="server"
  PublicKey=""
  PrivateKey=""
  />

Per sapere se l’utente ha passato il test è sufficiente utilizzare la proprietà IsValid dell’oggetto Page:

If Page.IsValid Then
	lblResult.Text = "You Got It!"
	lblResult.ForeColor = Drawing.Color.Green
Else
	lblResult.Text = "Incorrect"
	lblResult.ForeColor = Drawing.Color.Red
End If

(Gli esempi sono tratti dal sito ufficiale.)

Il servizio tuttavia presenta anche qualche problema: le parole sono solo in lingua inglese e molte volte sono talmente difficili da indovinare che sarà necessario aggiornare l’immagine fino a trovarne una più semplice, come mostrato nell’immagine.

In generale comunque mi sembra un ottimo sistema per proteggersi dallo spam e dare, senza nessuno sforzo aggiuntivo, un contributo alla digitalizzazione dei libri.

• Membership Provider con SQLite
• Role Provider con SQLite

Fatemi sapere cosa ne pensate! :)

• ASP.NET MVC Framework – Parte 1, Parte 2, Parte 3. Scott Guthrie offre una panoramica sull’utilizzo della nuova tecnologia MVC rilasciata come parte di ASP.NET 3.5 Extensions CTP Preview (scaribile da qui). Spero di riuscire fra breve a scrivere qualcosa su questa promettente tecnologia.
• LINQ to SQL – Parte 1, Parte 2, Parte 3, Parte 4, Parte 5, Parte 6, Parte 7, Parte 8 e Parte 9. Sempre dal blog di Scott Guthrie ecco una serie di interventi non molto recenti, ma che offrono un’ottima visione di insieme sul linguaggio LINQ applicato a SQL Server.
• LINQ to Video – 17 video sull’utilizzo di LINQ to SQL.

Infine vorrei segnalare un progetto che mi era rimasto sconosciuto fino ad oggi: Volta, che si propone di unificare lo sviluppo lato server e client semplificando non poco la vita a noi poveri sviluppatori.

Penso che verrà presto pubblicato anche un altro articolo che ho scritto sempre per HTML.it, dedicato ancora una volta a SQLite e in particolare alla creazione, spiegata molto dettagliatamente, di un MembershipProvider personalizzato.

Ma perchè doverla modificare? Un esempio potrebbe essere quello che segue.

Abbiamo la necessità di definire due diverse strighe di connessione, una per l’ambiente di sviluppo e l’altra per quello di produzione. Generalmente esse verranno salvate all’interno del file web.config nella sezione connectionStrings:

<connectionStrings>
        <!-- Sviluppo -->
        <add name="DebugConnString" connectionString="Data Source=ServerSviluppo;Initial Catalog=MioDatabase;" providerName="System.Data.SqlClient"/>

        <!-- Produzione -->
        <add name="ProductionConnString" connectionString="Data Source=ServerProduzione;Initial Catalog=MioDatabase;" providerName="System.Data.SqlClient"/>
</connectionStrings>

E potrebbero essere utilizzate, ad esempio, per un Membership Provider:

<membership defaultProvider="SqlProvider" userIsOnlineTimeWindow="30">
            <providers>
                <clear />
                <add
                  name="SqlProvider"
                  type="System.Web.Security.SqlMembershipProvider"
                  connectionStringName="DebugConnString"
                  applicationName="MiaApplicazione"
                  enablePasswordRetrieval="false"
                  enablePasswordReset="true"
                  requiresQuestionAndAnswer="true"
                  requiresUniqueEmail="true"
                  passwordFormat="Hashed" />
            </providers>
</membership>

Passando da un ambiente all’altro ci troviamo quindi a dover modificare manualmente il file web.config per selezionare la stringa di connessione necessaria, senza pensare ai problemi che potrebbero derivare da una eventuale dimenticanza.
La soluzione a questi problemi consiste nell’utilizzo della Reflection, che ci consente di andare a modificare le variabili di una classe, anche quando queste sono state dichiarate private. Il codice che segue va aggiunto al file Global.asax:

<%@ Application Language="C#" %>
<%@ Import Namespace="System.Reflection" %>
<%@ Import Namespace="System.Configuration" %>

<script runat="server">

    void Application_Start(object sender, EventArgs e)
    {
        // Cerco il provider
        MembershipProvider mp = Membership.Provider;
        Type t = mp.GetType();

        // Cerco la variabile privata _sqlConnectionString all'interno dell'istanza
        // del provider
        FieldInfo info = t.GetField("_sqlConnectionString", BindingFlags.Instance | BindingFlags.IgnoreCase | BindingFlags.NonPublic);

        // La modifico a seconda di quella che ci serve
        // Soltanto il codice necessario verrà effettivamente compilato
        #if DEBUG
                // Siamo in sviluppo
                info.SetValue(mp,
ConfigurationManager.ConnectionStrings["DebugConnString"].ConnectionString);
        #else
                // Siamo in produzione
                info.SetValue(mp,
ConfigurationManager.ConnectionStrings["ProductionConnString"].ConnectionString);
        #endif
    }
</script>

Anche se è da considerarsi più un “trucco” che una pratica di programmazione corretta, questo sistema funziona e può tornare utile in molte situazioni.

• Prima Parte: Creazione del Database
• Seconda Parte: Pannello di Amministrazione
• Terza Parte: Visualizzare i Post

Negli interventi precedenti sono stati trattati, dopo una rapida introduzione a SQLite, la creazione del database e della pagina di amministrazione.

In questo ultimo intervento vedremo, invece, come creare l’ultimo componente del mini-blog: una semplice pagina per visualizzare gli interventi e navigarli per categorie.
La struttura sarà molto simile a quella della pagina di amministrazione: tramite una MultiView, infatti, caricheremo o una lista degli ultimi dieci interventi, oppure una lista degli interventi appartenenti ad una determinata categoria.

Scarica il progetto completo!

Organizziamo la pagina: la colonna di sinistra

Il layout sarà costituito da due colonne, quella di sinistra conterrà il menu di navigazione e l’altra gli interventi:

<div style="width:75%;">
     <div style="float: left; width: 25%;"></div>
     <div style="float: right; width: 69%;"></div>
</div>

Per mostrare la lista delle categorie, sarà sufficiente un controllo Repeater associato ad un SqlDataSource (per la quanto riguarda la creazione della stringa di connessione al database si veda la seconda parte del tutorial):

<div style="float: left; width: 25%;">
    <span style="font-weight: bold;">Categorie</span>
    <asp:Repeater ID="Categorie" runat="server" DataSourceID="Categorie_Source">
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
        <ItemTemplate>
            <li>
                <a href="default.aspx?categoria=<%# (string)Eval("NomeCategoria") %>"
                        title="<%# (string)Eval("NomeCategoria") %>">
                      <%# (string)Eval("NomeCategoria") %></a>
            </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
</div>
<asp:SqlDataSource ID="Categorie_Source" runat="server" ProviderName="System.Data.SQLite"
    ConnectionString="<%$ ConnectionStrings:ExampleBlogConnString %>"
    SelectCommand="SELECT * FROM Categorie">
</asp:SqlDataSource>

Come potete vedere il Repeater crea una lista non ordinata di elementi che nel nostro caso saranno i nomi delle categorie, con un link che passa come parametro nella query string il nome della categoria. Questo viene recuperato nell’evento onLoad della pagina e la vista attiva all’interno del MultiView (che creeremo fra poche righe) modificata di conseguenza:

protected void Page_Load(object sender, EventArgs e)
{
   if (!this.IsPostBack)
      if (!string.IsNullOrEmpty(Request.QueryString["categoria"]))
      {
         MultiView1.ActiveViewIndex = 1;
         NomeCategoria.Text = Request.QueryString["categoria"];
      }
      else
         MultiView1.ActiveViewIndex = 0;
}

La colonna di destra: mostriamo gli interventi

Ecco qui, per concludere il controllo MultiView incaricato di mostrare gli interventi. Il codice mi sembra abbastanza semplice da non richiedere ulteriore analisi, per ogni dubbio lasciate un commento!

<asp:MultiView id="MultiView1" runat="server" activeviewindex="0">
    <asp:View ID="ListaInterventi" runat="server">
        <h1>Ultimi Interventi</h1>
        <asp:Repeater ID="Interventi" runat="server" DataSourceID="Interventi_Source">
            <ItemTemplate>
                <div>
                    <h2><%# (string)Eval("Titolo") %></h2>
                    <div style="font-weight: bold;">
                          <%# ((DateTime)Eval("Data")).ToString("dd/MM/yyyy hh:mm") %>,
                          <%# (string)Eval("NomeCategoria") %>
                    </div>
                    <div>
                        <%# (string)Eval("Testo") %>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

        <asp:SqlDataSource ID="Interventi_Source" runat="server" ProviderName="System.Data.SQLite"
            ConnectionString="<%$ ConnectionStrings:ExampleBlogConnString %>"
            SelectCommand="SELECT * FROM Interventi INNER JOIN Categorie ON Interventi.Categoria = Categorie.IDCategoria ORDER BY Data DESC LIMIT 10">
        </asp:SqlDataSource>
    </asp:View>

    <asp:View ID="InterventiPerCategoria" runat="server">
        <h1>
            Categoria:
            <asp:Literal ID="NomeCategoria" runat="server" />
        </h1>
        <asp:Repeater ID="InterventiCat" runat="server" DataSourceID="InterventiCat_Source">
            <ItemTemplate>
                <div>
                    <h2><%# (string)Eval("Titolo") %></h2>
                    <div style="font-weight: bold;">
                        <%# ((DateTime)Eval("Data")).ToString() %>
                        ,
                        <%# (string)Eval("NomeCategoria") %>
                    </div>
                    <div>
                        <%# (string)Eval("Testo") %></div>
                    </div>
            </ItemTemplate>
        </asp:Repeater>

        <asp:SqlDataSource ID="InterventiCat_Source" runat="server" ProviderName="System.Data.SQLite"
            ConnectionString="<%$ ConnectionStrings:ExampleBlogConnString %>"
            SelectCommand="SELECT * FROM Interventi INNER JOIN Categorie ON Interventi.Categoria = Categorie.IDCategoria WHERE NomeCategoria = @NomeCategoria">
            <SelectParameters>
                <asp:QueryStringParameter Name="@NomeCategoria" Type="string"
                        QueryStringField="categoria" />
            </SelectParameters>
        </asp:SqlDataSource>
    </asp:View>
</asp:MultiView>

Si conclude così questo piccolo tutorial realizzato principalmente per mostrare le potenzialità di SQLite e del provider per ADO.Net System.Data.Sqlite.

Scarica il progetto completo!

Di seguito due esempi che mostrano l’uso di entrambi gli oggetti.

CDONTS

<%
'Creo l'oggetto
Set objCDONTS = Server.CreateObject("CDONTS.NewMail")

objCDONTS.From = "mittente@tuamail.it" 'Mittente
objCDONTS.To = "destinatario@suamail.it" 'Destinatario
objCDONTS.Subject = "Oggetto della email" 'Oggetto
objCDONTS.Body = "Testo della email" 'Testo

objCDONTS.Send 'Invio del messaggio

'Pulizia
Set objCDONTS = Nothing
%>

CDO

'Creo l'oggetto
Set objCDO = Server.CreateObject("CDO.Message")

objCDO.From = "mittente@tuamail.it" 'Mittente
objCDO.To = "destinatario@suamail.it" 'Destinatario
objCDO.Subject = "Oggetto della email" 'Oggetto
objCDO.TextBody = "Testo della email" 'Testo

objCDO.Send 'Invio del messaggio

'Pulizia
Set objCDONTS = Nothing
%>