domenica 11 dicembre 2011

Si può dire che il Flash sia morto?

L'Adobe ha annunciato che terminerà il supporto e lo sviluppo del Flash in versione mobile. Questo annuncio rappresenta, per la grande casa, forse il primo passo verso l'abbandono totale di uno degli strumenti che maggiormente hanno rivoluzionato la progettazione dei siti web negli ultimi 10 anni.
Il player, che permette la visualizzazione delle animazioni Flash, rappresenta il plug-in proprietario più diffuso al mondo (secondo una statistica Millward Brown condotta nel luglio 2011, il player è presente nel 99% dei computer nel mondo).
Chiunque, dal ragazzino allo sviluppatore professionista, ha studiato e utilizzato questa tecnologia, in grado di arricchire significativamente l'esperienza e il design di un sito.
La storia di Flash inizia nel 1996 quando Macromedia (tra le migliori software house per grafica e web development, poi inglobata una decina di anni più tardi da Adobe) acquisisce un software per grafica vettoriale chiamato FutureSplash. E lo fa diventare uno standard per lo sviluppo web e per la creazione di contenuti animati ed interattivi.
C'è da dire che in quegli anni navigare per internet non rappresentava un'emozionante esperienza estetica, visto l'assoluto carattere pionieristico delle tecnologie ancor oggi presenti (in primo luogo html e javascript). Potevi assistere esclusivamente a qualche spettacolino sviluppato in Java, ma obiettivamente la tecnologia per sviluppare era (e rimane) complessa, non infallibile nel caricamento e molto pesante nell'economia della macchina.
L'avvento della tecnologia vettoriale Flash ha rappresentato una vera e propria pietra angolare nello sviluppo di esperienze animate e interattive e oggi è la tecnologia su cui si basano molti dei motivi per cui si naviga (streaming, giochini on-line, etc).
Chi ha sviluppato siti web nel periodo di massima espansione di questa tecnologia (primi anni 2000) ha sempre dovuto combattere tra la seduzione di abbandonarsi ad animazioni omnipresenti e la necessità di soddisfare le necessità di aggiornabilità e gestione dei contenuti.
C'è stato un periodo in cui ti imbattevi in veri e propri film di animazione, normalmente come primo approccio ad un sito web, con la mitica voce skip intro che timidamente lampeggiava in qualche angolo dello schermo (ma che ho usato raramente, per una sorta di rispetto del lavoro dello sviluppatore). In seguito, la maggiore attenzione posta dagli sviluppatori sull'analisi dei flussi dei visitatori all'interno del sito, sullo sviluppo dei contenuti per l'indicizzazione nei nascenti motori di ricerca, sulla usabilità di un sito, lo sviluppo delle javascript e di Jquery hanno fatto sì che l'utilizzo della tecnologia nello sviluppo fosse nel tempo limitato, passando da base dell'architettura del sito ad orpello di design (qualche slideshow e niente più) e ritagliandosi una nicchia esclusiva (quasi monopolistica) nei settori user high experience. Unico concorrente è Microsoft, con il suo silverlight, che deve ancora esprimere il suo potenziale (in Italia tutto il webcasting della Rai è affidata a questa tecnologia, che dimostra un'ottima affidabilità e stabilità).
Nell'immediato futuro l'utilizzo della tecnologia Flash sarà ancora più limitato dallo sviluppo dell'Html 5 che promette una programmazione maggiormente orientata ad offrire esperienze dinamiche all'utente, grazie al supporto a Canvas che permette di utilizzare JavaScript per creare animazioni e grafica bitmap.
L'annuncio di Adobe di abbandonare lo sviluppo di Flash per il segmento che maggiormente rappresenta il futuro e l'evoluzione della navigazione internet (il mobile), rappresenta l'inizio della fine di Flash?

mercoledì 12 ottobre 2011

Anteprima di contenuti

In un'applicazione basata su un CMS che prevede un'anteprima del contenuto da visualizzare, è possibile utilizzare una funzione che tronca in maniera intelligente il contenuto di un campo.

Ipotizziamo di avere un repeater (strumento molto versatile e utile per avere una pubblicazione personalizzata di dati da un Data Source) che ha il compito di pubblicare solo un'anteprima del contenuto di una notizia.
La sorgente dati prevede due campi che per semplicità chiamiamo "titolo" e "contenuto".
Nel itemtemplate del repeater mettiamo le due label che si occuperanno di rendere a video il nostro contenuto dinamico.


Il codice, molto semplificato sarà:
<asp:Repeater ID="Repeater_anteprima_pagina" runat="server" DataSourceID="ADS_titolo_sezione">
  <ItemTemplate>
    <asp:Label ID="Label_titolo" runat="server" Text='<%# Eval("titolo") %>'></asp:Label>
    <asp:Label ID="Label_contenuto" runat="server" Text='<%# tronca(Eval("contenuto"),500) %>'/>
  </ItemTemplate>
</asp:Repeater>
Come si nota il testo delle due label è dinamico e viene utilizzato il metodo EVAL. Solo nella Label dedicata al contenuto il testo dinamico presenta delle differenze dall'applicazione del metodo classico.
     Text='<%# tronca(Eval("contenuto"),500) %>'
Nel code-behind vediamo cosa è strutturata questa funzione chiamata tronca.

 Function tronca(ByVal input As String, ByVal lunghezza As Integer)
        Dim output As String = input
        Dim ultimospazio As Integer


        If output.Length > lunghezza And lunghezza > 0 Then
            output = output.Substring(0, lunghezza)
            If input.Substring(output.Length, 1) = " " Then
                output = output & "...>>>"
            Else
                ultimospazio = output.LastIndexOf(" ")
                If ultimospazio = -1 Then
                    output = output & "...>>>"
                Else : output = output.Substring(0, ultimospazio) & " ... "
                End If
            End If

        End If

        Dim strOutput As String
        Dim opzioni As New Regex("<(.|\n)+?>")
        strOutput = opzioni.Replace(output, "")
        strOutput = Replace(strOutput, "<", "&lt;")
        strOutput = Replace(strOutput, ">", "&gt;")
        output = strOutput
        Return output


    End Function
Come si può notare la funzione prevede due valori in ingresso: l'input che è una stringa (il contenuto findamentalmente) e lunghezza che è il valore che è stato espresso quando è richiamata la funzione (nel nostro esempio 500).
La funzione come primo passo individua se la stringa da esaminare è più lunga della lunghezza desiderata. Se si, la stringa viene subito tagliata alla lunghezza desiderata con il metodo Substring. Successivamente, esamina se l'ultimo carattere della stringa tagliata è uno spazio. Se affermativo, agguinge la stringa "...>>>" che dà l'idea della continuazione della stringa stessa. In caso negativo, ricerca dal fondo della substringa la prima occorrenza del carattere spazio, lo indicizza e taglia nuovamente la stringa a quel valore.

Successivamente la funzione esamina la stringa in uscita per verificare la presenza di caratteri html (nel caso in cui si fosse riempito il contenuto con strumenti tipo Rich Text), li reinterpreta in modo che in video possano essere interpretati correttamente.
Tale funzione permette 2 risultati importanti:
  1. tronca il contenuto allo spazio, in modo da non interrompere la frase sul più bello
  2. reinterpreta i caratteri html in modo che la frase non si tronchi all'interno di un tag html, impedendo la giusta reinterpretazione a video.