Marco Bellinaso

La funzionalità di upload di file è richiesta in gran parte delle applicazioni web. Se i file da ricevere sono nell'ordine di qualche KB non ci sono grandi problemi, e il controllo FileUpload di ASP.NET (oppure il relativo <input type="file" ... /> di HTML, con l'invio diretto tramite la richiesta POST sul server) va benissimo. Spesso però è necessario poter gestire upload di grosse dimensioni: PDF particolarmente lunghi o più probabilmente immagini, video, o file di dati. In questi casi le cose si complicano, perchè bisogna trovare un modo per dare un feedback all'utente ed evitare che questo resti in attesa per 10 minuti con una pagina bianca mentre il file viene spedito sul server -- cosa che comunque *non* avverrebbe mai...l'utente si chiederebbe se qualcosa è andato storto, premendo Refresh (con ovvi problemi di invio duplicato) o premendo Stop e riprovando da capo. Implementare a mano tutto il meccanismo è cosa piuttosto complessa, e nel 99% dei casi non ne vale la pena visto che si trovano in giro varie soluzioni già pronte all'uso. Io ne ho provate davvero parecchie, ma qui vi segnalo solo quelle che mi sono sembrate le migliori:

• RADActive I-Load: me lo ha fatto scoprire Alberto tramite questo post, e si è rivelato così buono che dopo qualche test ho subito comprato la versione Enterprise. E' un wizard di upload pensato specificatamente (ed esclusivamente) per le immagini: permette non solo di farne l'upload (mostrando ovviamente la barra di progressione, un'indicazione sui byte caricati e mancanti, e una stima dei tempi), ma anche di ridimensionarle in vari formati, farne il crop, selezionare delle regioni con specifiche proporzioni, zoomare, mostrare delle thumbnail, e altro ancora. Io lo uso in Pet-files, per consentire agli utenti di caricare le foto dei propri animali e per fargliene selezionare una regione quadrata che poi uso per mostrare delle miniature con la stessa dimensione, facilmente disponibili in una griglia dalle dimensioni prevedibili. Se avete bisogno di caricare sul server solo immagini, questa è decisamente la soluzione che fa per voi. L'unica nota negativa riguarda l'impossibilità di localizzare gran parte della UI del wizard (a parte un paio di label), ma la mancanza verrà colmata con la prossima versione già annunciata (che aggiungerà anche altre manipolazioni alle immagini). Al momento il controllo non sembra funzionare quando il locale della pagina è impostato il cinese, ma mi aspetto che anche questo venga risolto quando aggiungeranno il supporto per la localizzazione.
• Telerik RadUpload: a differenza di I-Load, questo controllo permette di caricare file di qualsiasi tipo, non solo immagini, e potrebbe quindi essere preferibile nel caso vogliate acquistare un singolo componente che vada bene in tutte le situazioni (ma perdete però tutte le feature specifiche per le immagine, che nel mio caso ad esempio erano un must). Il feedback viene mostrato in un pannello aggiornato tramite AJAX, e il look & feel del pannello è ovviamente personalizzabile tramite CSS. Anche le informazioni mostrate sono in parte personalizzabili tramite template. Sul sito del produttore trovate una serie molto complete di esempi che mostrano live tutte le feature.

I due controlli descritti sono specifici per ASP.NET, ma oggi leggendo il blog di Jon Galloway ho trovato un componente che può essere usato con qualsiasi tecnologia (ASP.NET, ASP, PHP, JSP, RoR ecc.). Si chiama SWFUpload e, come suggerisce il nome stesso, si tratta di un componente Flash. SWFUpload ha vari parametri che permettono di specificare la dimensione massima dell'upload, personalizzare l'aspetto, specificare funzioni JavaScript di callback per alcuni eventi (file selezionato, upload iniziato, upload in corso, upoload terminato), e filtrare i tipi di file mostrati nella dialog di selezione (una cosa che non si può invece fare usando il controllo HTML standard, comunque usato come base per tutti i controlli basati solo su HTML + JavaScript). Quest'ultima caratteristica e la possibilità di validare la dimensione del file *prima* di spedirlo sul server potrebbero da sole essere dei buoni motivi per scegliere questo componente. Ma, cosa sempre apprezzabile, il componente è anche gratuito al 100%!

Sebbene la parte client-side sia sviluppata in Flash+JavaScript, serve comunque del codice server-side che gestisca il ricevimento del file, salvandolo da qualche parte, elaborandolo ecc. Sempre dal sito dell'autore potete scaricare una demo completa per ASP.NET, che mostra come caricare immagini JPEG e mostrarne le miniature.  

Ieri sera mi sono messo a cercare qualche servizio web-based che mi permettesse di creare dei bigliettini da visita personalizzati con il logo e la grafica di Pet-files. Dopo aver perso un po' di tempo tra siti scadenti e preventivi non troppo emozionanti, il mio amico e collega Alberto mi è venuto in soccorso linkandomi VistaPrint. A detta sua ero l'unico pirla a non conoscerli ancora...e considerando che sul loro sito si legge che hanno più di 11 milioni di clienti in tutto il mondo, Alberto aveva probabilmente ragione.

VistaPrint permette di stampare una gran quantità di roba, tra cui biglietti da visita, carta intestata, blocchi per appunti, post-it, calendari, timbri, cartoline promozionali, brochure e altro ancora. Il tutto o personalizzando uno dei centinaia di template grafici già pronti e messi a disposizione da VistaPrint, o creando con PhotoShop (o simile) i propri modelli e caricandoli online. La seconda scelta offre ovviamente una personalizzazione più spinta, ed è quella che ho scelto io...riuscendo alla fine a rimetterci mezza nottata!!! (anche su questo Alberto aveva visto giusto)

Ho creato dei biglietti da visita con l'effetto "metallizzato", ovvero con il logo stampato su una pellicola metallica che lo fa brillare e riflettere, allo stesso modo di certe figurine. Sarà forse un po' pacchiano, ma è davvero simpatico e di sicuro colpisce...non sono riuscito a resistere! Per realizzarlo, una volta creato il PSD standard con la grafica del biglietto, bisogna creare anche un'immagine in B/N che faccia da maschera e che indichi cosa verrà stampato con effetto metallizzato. Una preview del risultato la vedete proprio in questo post. 

Complimenti per l'idea, e anche per la realizzazione tecnica del sito: dopo aver caricato online i due PSD è immediatamente possibile vedere la preview animata. A proposito, il sito è realizzato con ASP.NET

NOTA: originariamente ho ordinato solo i biglietti da visita...ma poche ore dopo mi è arrivata una mail con l'invito a ordinare un sacco di altra cancelleria (tutta personalizzabile al 100%) al solo costo di spedizione. Alla fine ho fatto un ordine da 112€ spendendo solo i 10€ di spedizione. Sarò allocco io a cascare nelle offerte speciali, ma questa mi pareva davvero irresistibile (e poi timbro, cartoline, calendari e brochure mi servivano davvero per promuovere il sito )

Qualche giorno fa ho avuto per l'ennesima volta la necessità di duplicare sul DB remoto di produzione n record che avevo creato sul DB locale di sviluppo di un sito. Sebbene sia possibile tramite gli strumenti di SQL Server esportare dei dati dal DB locale ed importarli direttamente in uno remoto, o sia comunque possibile esportare i dati in formato CSV importandoli poi altrove, l'opzione che ho sempre preferito (perlomeno nel caso abbia solo bisogno di replicare altrove n record da un'unica tabella, senza dover mantenere ID e integrità referenziale con altre tabelle) è di creare automaticamente un file con tanti statement INSERT quanti sono i record da copiare. Questa opzione è perfetta anche nel caso in cui la vostra applicazione sia venduta come pacchetto che il cliente si installa in casa, e abbiate bisogno di creargli gli script per auto-popolare il suo DB con dei dati di test, o comunque dei dati di base - non occorrerà infatti spiegargli procedure più o meno complesse per importare i dati da un file csv o da un DB remoto raggiungibile online...basterà solo fargli aprire il file .sql tramite il Query Analyzer, e farlo eseguire sul DB di destinazione.

Lo strumento che uso io è SQL Scripter, tool gratuito sviluppato tra l'altro con VB2005. E' molto ricco di opzioni, e permette ad esempio di specificare i campi da includere nella INSERT, i filtri condizionali (WHERE) che identificano i record per cui generare le INSERT (utile se voglio esportare solo i record inseriti negli ultimi n giorni, o solo quelli che fanno riferimento ad una certa categoria), la tabella di destinazione, l'utilizzo di transazioni ecc.

Sicuramente anche a voi capita di copiare nella Clipboard un Url o un pezzo di testo, ma di finire per sovrascriverlo per sbaglio prima di averlo incollato da qualche parte, dovendo quindi tornare indietro alla ricerca della pagina/documento sorgente. A me capitava di continuo, ed ecco perchè ho preso l'abitudine di tenere sempre aperta un'istanza di Notepad per incollare indirizzi e testi che mi serviranno "tra un po', ma non prima di aver letto ancora qualche altra pagina...". Solo da qualche giorno ho (ri)scoperto l'acqua calda installando ClipX, un utilissimo (e free) programmino che implementa una clipboard "multi-spazio". Una volta attivo, fate pure CTRL+C di qualsiasi cosa (immagini incluse) per un certo numero di volte; poi invece di premere CTRL+V per incollare l'ultima cosa copiata premete CTRL+SHIFT+V (ma la hotekey è ridefinibile a piacere) e si aprirà un menu contestuale dal quale scegliere cosa incollare:

La cosa assurda (e che mi fa un po' preoccupare) è che quando quasi 10 anni fa studiavo il C e l'SDK di Windows, avevo pure sviluppato qualcosa di molto simile per testare gli hotkey globali di Windows...come ho fatto poi a non pensare che qualcuno avesse implementato per bene una cosa così semplice ed essenziale? Meglio tardi che mai, consoliamoci così...

Nel post precedente ho elencato le 14 regole del libro "High Performance Web Sites" per sviluppare un front-end performante. Avrete notato che parecchie di queste hanno a che fare con l'ottimizzazione del codice javascript - quanto più sviluppati siti con effetti dinamici moderni (menu a cascata, slideshow, popup ecc.), tanto più importanti sono queste regole. Ripeto di seguito le regole relative al JavaScript, commentandole dove necessario:

• Make Fewer HTTP Requests: il tempo che il browser impiega a scaricare un singolo file da 1kb non è uguale al tempo che impiega a scaricare 10 file da 100b, ma è sensibilmente inferiore. Perchè, se la dimensione totale del contenuto scaricato è la stessa? Beh, perchè al download di ciascun file separato corrisponde un nuovo round trip al server, il che introduce una latenza sensibile se ci sono molti file da scaricare. Pertanto è meglio avere un unico file .js da 1kb piuttosto che 10 da 100b. E' anche vero che soprattutto in fase di sviluppo è più comodo avere più di un file .js, in modo da separare fisicamente classi e funzioni appartenenti a componenti e funzionalità indipendenti. Prima di andare in produzione tuttavia si può facilmente copiare e incollare il contenuto di ciascun file all'interno di un unico file, linkare quest'unico file nel file .aspx / .php / .htm che usa le funzioni javascript, e caricare sul server quell'unico file.
• Put Scripts at the Bottom: se gli script stanno sul fondo della pagina, il browser potrà scaricare prima le immagini, i css e il testo HTML della pagina, cosicchè la pagina possa essere mostrata almeno parzialmente mentre si scaricano gli script. Viceversa, se gli script stanno in cima, l'utente vedrà solo una pagina bianca nel frattempo.
• Make JavaScript and CSS External: poichè i file statici vengono salvati nella cache locale una volta scaricati la prima volta, se mettiamo tutto il codice javascript in un file esterno riusciremo a sfruttare tale cache. Viceversa inserendo gli script inline,  direttamente nel corpo del file .aspx / .php, gli script verranno scaricati ad ogni richiesta della pagina, in quanto sono una parte integrante del contenuto della pagina stessa. Per script piuttosto complessi, la differenza nei tempi di download diventa sicuramente sensibile.
• Minify JavaScript: è una tecnica che riduce / minimizza il codice degli script togliendo spazi e commenti, e cambiando i nomi delle variabili, funzioni e costanti in modo che siano più brevi (di solito diventano di 1 o 2 lettere) di quelli originali. Il risultato varia da caso a caso ovviamente, ma quasi certamente ne varrà la pena.

Mentre cercavo di seguire queste regole, un tool che ho trovato comodissimo (direi addirittura provvidenziale) è stato Packer for .NET. Questo tool open source è costituito da un eseguibile console, che si prende in input un elenco di file .js e genera un singolo .js che ingloba tutti gli script in forma minimizzata. Essendo un programma da riga di comando (parametrizzabile quindi) è facile integrarlo nel proprio processo di built ad esempio come azione custom di Post-Build (questo è quello che ho fatto io), oppure tramite le azioni custom presenti per MSBuild.

High Performance Web Sites è un libro scritto da Steve Souders con l'intento di insegnare a chi sviluppa il front-end di siti web come renderli veloci e scalabili. Il testo evidenziato sta ad indicare come il libro non tratti argomenti quali la progettazione e il tuning del DB, l'utilizzo o meno di transazioni, il caching dei dati ecc. ecc. -- ovvero tutte tecniche per lo sviluppatore server-side -- ma si concentri su ciò che riguarda HTML, CSS, JavaScript, AJAX...quello che si vede insomma. Dal momento che l'autore lavora in Yahoo! dal 2000 occupandosi proprio di questi aspetti, e a giudicare dalle recensioni presenti su Amazon, sembra proprio un ottimo libro, prezioso se il vostro sito continua ad incrementare (o sperate che incrementi in futuro) il traffico.

Detto questo, devo dire però che già leggendo il sommario si possono estrarre le "regole d'oro di base" trattate nel libro:

1) Make Fewer HTTP Requests
2) Use a Content Delivery Network
3) Add an Expires Header
4) Gzip Components
5) Put Stylesheets at the Top
6) Put Scripts at the Bottom
7) Avoid CSS Expressions
8) Make JavaScript and CSS External
9) Reduce DNS Lookups
10) Minify JavaScript
11) Avoid Redirects
12) Remove Duplicates Scripts
13) Configure ETags
14) Make Ajax Cacheable

Se non volete spendere neanche i miseri 20$ del libro, usando Google potete trovare tutte le info che vi servono per approfondire ciascuno di questi punti.

Gli ultimi due siti web che ho sviluppato, Pet-files e CentoMETRI, fanno uso pesante di varie effetti dinamici ottenuti tramite JavaScript e AJAX. Non essendo io un mostro di JS ho cercato qualcosa di pronto per le mie varie necessità, quali la creazione di popup cross-browser, menu, slideshow e altro ancora. Ho trovato veramente una montagna di ottimo materiale, tanto che il codice client-side che ho scritto personalmente è veramente ridotto. Riporto di seguito i link ai tool e alle librerie più interessanti:

• CSS Dock Menu: per creare dei menu con l'effetto lente classico del Mac OSX. A qualcuno non piace, ma di sicuro fa effetto. (nota: l'ho usato per la barra della selezione lingua in Pet-files)
• EuDock: simile alla libreria precedente, non l'ho provato direttamente, ma la demo online è molto promettente.
• JQuery: fa un po' di tutto, ed è praticamente indispensabile in un sito che voglia essere (a torto o a ragione) considerato "moderno" e "web 2.0": accedere e manipolare nodi del DOM, gestire gli eventi della pagina, creare pannelli dagli angoli arrotondati o con un'ombreggiatura, creare menu a cascata o in stile barra-sinistra-di-outlook, creare popup, associare un watermark alle textbox, e molto altro ancora. Tra l'altro, questa libreria è ormai così popolare che ci sono dei blog completamente dedicati ad essa.
• JQuery Cycle Plugin: come dice il nome, è una libreria che si basa su JQuery (da scaricare separatamente) per creare delle slideshow. L'utilizzo tipico è di far ciclare delle immagini (io ad esempio l'ho utilizzato per le slideshow delle foto del proprio animale, come vedete nella colonna di destra di questo blog) ma si possono far ciclare dei div contenenti testo (in modo da creare un news ticker). L'utilizzo è banale, ma l'effetto è assicurato, soprattutto perchè gli effetti di transizione disponibili sono veramente tantissimi.
• Highslide: eccezionale libreria per creare dei popup cross-browser (tramite i div "svolazzanti"), per mostrare lo zoom di miniature di immagini, video, del testo di help a mo' di tooltip esteso, o intere pagine esterne incastrate all'interno di un IFRAME (incastrato a sua volta nel div). Il popup si apre e si richiude con una bella animazione, è possibile trascinarlo in giro e si può passare da un popup all'altro premendo i tasti direzionali della tastiera. E' di semplice utilizzo, non ho trovato bug, è fornitissima di esempi, e per siti no-profit è pure free. Io l'ho usata un po' dappertutto nei miei siti (per fare il login, per lasciare i commenti ai post/foto, per vedere le immagini ecc.).
• MooTools: ottima libreria molto vasta, piena di componenti pronti all'uso per realizzare vari tipi di menu, pannelli espandibili/collassabili, effetti di transizione, pannelli ridimensionabili o con contenuto a scorrimento, pannelli con la gestione del drag & drop di oggetti (ad es. per implementare un carrello della spesa dove l'oggetto da comprare viene preso dal catalogo, e trascinato sull'icona del carrello...non so quanto usabile sia (poco), ma di sicuro fa colpo!), e altro ancora. Da provare...perlomeno le demo online.
• (E²) Photo Gallery: per realizzare una galleria fotografica con una strip a scorrimento con tutte le miniature, e un pannello dove vedere una per volta le foto a dimensione intera.
• Phatfusion: simile a (E²) Photo Gallery negli intenti, usa una diversa animazione per spostare la selezione sulle diverse miniature.
• (UPDATE) Interface elements for jQuery: questo è conosciuto come il miglior plug-in per jQuery, e in effetti vedendo le demo sembra veramente un must. Implementa vari effetti di animazione e movimento, il controllo Accordion, il menu in stile Mac OS X, tooltip avanzati, drag & drop in varie salse, elenchi riordinabili, ed altro ancora. Da provare!

Parlando di AJAX non si possono non segnalare perlomeno un paio di siti che offrano varie icone da mostrare durante l'attesa del partial rendering della pagina. Ecco il primo (che è un po' il riferimento del caso, con dei wizard per scegliere l'aspetto delle icone con i propri colori e stili preferiti), ed ecco il secondo (molto più semplice, con una serie di icone subito visibili e pronte per essere scaricate).

Credo che questo sia la quarta volta che tento di tenere un blog...e detta così la cosa non è molto incoraggiante, vero? Beh, il terzo blog è quello su pet-files, relativo alla mia vita con Mescal ed altri animali futuri ed eventuali - è partito da poco, e non ho intenzione di farlo morire. Gli altri invece sono quelli che ho tenuto in italiano su DotNet2TheMax.it, e in inglese su DotNet2TheMax.com. E' ormai da tempo che ho smesso di scrivere su ciascuno di questi due - i motivi sono vari, ma quello principale è che trovavo noioso dover scrivere (dato il target dei siti) solo di programmazione .NET e delle tecnologie Microsoft.

In questo nuovo blog capiterà ovviamente che parli ancora di .NET (essendo la tecnologia che per lavoro e per diletto respiro tutti i giorni) ma parlerò anche di web in generale, di gadget tecnologici, di tecnologie/piattaforme/tool/software non-MS, e forse ci sarà anche qualche post personale. Quello che intendo fare è tenere un diario delle cose interessanti che scopro, sperimento, leggo, compro, vivo. Spero che la varietà di argomenti che potrebbe saltare fuori possa risultare interessante a qualcuno (sebbene qualche blog-guru direbbe che bisogna scegliersi un target ben preciso e fare un blog super specifico...è vero se si fa il blog principalmente per vendersi o vendere qualcosa, ma in questo caso lo scopo non è quello), e che mi diverta anche...