Tuesday, April 28, 2009

Microsoft presenta Vine

. Tuesday, April 28, 2009
2 commenti


Presentato oggi un nuovo ambiente: Vine (in beta) che si pone l'obiettivo di tenere in contatto amici/familiari, collocate su un preciso territorio, durante le emergenze (uragani ecc...ma non solo).
Raccoglie informazioni locali e nazionali (USA) da circa 20000 fonti oltre ad annunci diramati da parte del United States National Ocenaic and Atmospheric Administration (NOAA).
Per maggiori informazioni e screenshot vi rimando ai seguenti due articoli:
Microsoft Vine To Connect Family, Friends When Crisis Hits
Microsoft Vine: connessioni di emergenza. Ma non solo.

Read More »»

Sunday, April 26, 2009

Link .Net #20

. Sunday, April 26, 2009
2 commenti

Siamo giunti al  ventesimo appuntamento con la rubrica Link.Net:

Guida BlogEngine.NET

Un’ottima guida sul sito Html.it di Andrea Dottor, su BlogEngine.NET; piattaforma open source di blogging sviluppata in Asp.Net 2.0.
Per chi fosse interessato ad altre applicazioni open source del mondo .Net consiglio:
Link .Net#17
Progetti Asp.Net Open Source
it

Where Am I?
Curioso articolo di S. Senthil Kumar. Attraverso la registrazione ad intervalli di informazioni sulle celle del vostro cellulare/palmare, non dotato di GPS è in grado di dirvi dove siete e di inviare anche un SMS con la vostra posizione. en

Drag and Drop with Persistence using JQuery
Come poter integrare una feature di drang and drop persistendo sul db le informazioni con l’uso di jQuery o Asp.Net Ajax. en

Deep Zoom Composer: disponibile una nuova versione del tool che abilità la pubblicazione sul nuovo servizio DeepZoomPix
Nuovi aggiornamenti sulla versione di Deep Zoom Composer, che presenta l’evoluzione di PhotoZoom in DeepZoomPix. it

Read More »»

Tuesday, April 21, 2009

Macro vs Visual Source Safe

. Tuesday, April 21, 2009
0 commenti

Recentemente ho avuto la “necessità” di creare una macro in Visual Studio che eseguisse delle operazioni di Replace in diversi file del progetto.
Come in genere accade in questi casi è sufficiente registrare la macro tramite:
Tools > Macros > Record TemporaryMacro
ed il gioco è fatto.

Anche se può sembrare assurdo, lanciando la macro non ottenevo il risultato sperato, bensì la seguente eccezione:
"The server threw an exception. (Exception from HRESULT: 0X80010105 (RPS_E_SERVERFAULT))"

ErrorMacro

A dir la verità ho subito pensato ad un bug nella macro - tale eventualità non è stata esclusa immediatamente anche se in realtà non avevo scritto neanche una riga di codice - o addirittura nell'IDE.
Il problema è causato, come mi è stato fatto notare da un mio collega, dalla mancata gestione in automatico del check out (il progetto è gestito tramite Visual SourceSafe) del file da modificare.
Sostanzialmente se i file sono preventivamente messi in check out allora la macro fa il suo lavoro - giustamente -.
A questo punto, è diventata una questione di principio, riuscire a risolvere il problema, nonostante la scarsa utilità della macro.
Nello caso specifico ho convertito, per semplicità, il tutto in tre macro distinte:

  1. eseguire una ricerca nei file del progetto tramite regular expression;
  2. eseguire il check out dei file in base ai risultati mostrati nella finestra Find Results 1, prodotti dal punto 1;
  3. eseguire la funzione di Replace per ogni file in check out.

Forse la cosa più interessante da mostrare è il codice che ho scritto per svolgere il secondo punto:

   1: DTE.Windows.Item(Constants.vsWindowKindFindResults1).Activate()
   2: Dim resultsWin As Window = DTE.Windows.Item(Constants.vsWindowKindFindResults1)
   3: Dim sel As TextSelection = resultsWin.Selection
   4: If Not sel Is Nothing Then
   5:   sel.EndOfDocument(True)
   6:   Dim countLine = sel.CurrentLine
   7:   sel.StartOfDocument()
   8:   Dim lineStr As String
   9:   While (sel.CurrentLine < countLine)
  10:    sel.StartOfLine(False)
  11:    sel.EndOfLine(True)
  12:    lineStr = sel.Text
  13:    Dim reg As Regex = New Regex("c:.*(?=\(\d)", RegexOptions.IgnoreCase)
  14:    Dim line As String = reg.Match(lineStr).Value
  15:    If line.Length > 0 And DTE.SourceControl.IsItemCheckedOut(line) = False Then
  16:      DTE.SourceControl.CheckOutItem(line)
  17:    End If
  18:    sel.LineDown(True)
  19:  End While
  20: End If
  21: Dim win As Window = DTE.Windows.Item(Constants.vsWindowKindOutput)
  22: Dim ow As OutputWindow = win.Object
  23: ow.ActivePane.Activate()
  24: ow.ActivePane.OutputString("Completo!!!")

Anche se il codice parla abbastanza da solo, alcune righe meritano di essere un minimo commentate.
In particolare le prime tre righe consentono di poter analizzare il testo presente nella finestra dei risultati: Find Results 1 frutto della ricerca precedentemente eseguita.
Dopo aver calcolato il numero di righe presenti (riga 5 e 6) eseguo un ciclo estrapolando per ognuna l'eventuale path tramite una regular expression costruita ad hoc per il mio caso(riga 13).
In caso di match eseguo il check out del file richiamando il metodo CheckOutItem (riga 16).
Per concludere nella finestra di Output mostro un messaggio di fine operazione (riga 21, 22, 23, 24).

Read More »»

Monday, April 13, 2009

Link .Net #19

. Monday, April 13, 2009
0 commenti

Nuovo appuntamento, nuovi link:

ASP.NET MVC BEST PRACTICES (PART 1)
ASP.NET MVC BEST PRACTICES (PART 2)

Una serie di best practices per Asp.Net MVC, che coprono tutta una serie di casistiche come per esempio, l’uso della cache, dell’Action Filter, l’uso di jQuery e tanto altro. en

Entity Framework ottimizzare le performance
Personalmente non ho avuto modo di fare molti esperimenti con Entity Framework, eccezione fatta per la visione di qualche screencast e webcast. Consiglio l’articolo per poter raccogliere una serie di punti interessanti su come migliorare le performance di questo nuovo modello di dati. it

Blend3 Behaviors
Corrado Cavalli ci presenta i behaviors nella nuova versione di Blend. it

Read More »»

Wednesday, April 8, 2009

Plugin Silverlight per WordPress

. Wednesday, April 8, 2009
0 commenti

WordPressSilverlight
Da qualche giorno è stato rilasciato da Tim Heuer un nuovo plugin per Wordpress che consente di inserire facilmente all’interno di post, applicazioni/contenuto Silverlight.
L’installazione sembra essere abbastanza semplice.
Attraverso una serie di parametri è possibile definire dimensione, versione, e url del file .XAP, quest’ultimo come si può intuire, unico parametro obbligatorio.
Fonte: Channel 10

Read More »»

Tuesday, April 7, 2009

.Net tra gladiatori

. Tuesday, April 7, 2009
0 commenti

Segnalo molto volentieri un nuovo User Group dedicato al mondo .Net, tutto romano, come si può facilmente cogliere dal nome:
DotNetromaCesta

"DotnetRomaCestà il primo User Group di Roma dedicato alla tecnologia Microsoft .Net. Lo scopo di quest'associazione è quella di creare un punto di riferimento per la città di Roma e per tutti gli appassionati ed utilizzatori di questa tecnologia, un modo per confrontarsi e scambiarsi le proprie esperienze. L'User Group nato dalla passione di persone, ha il compito di fornire materiale formativo, quali articoli e trucchi nonché notizie e di promuovere una serie di attività culturali e formativi volte ad accrescere la conoscenza di questa materia. Gli eventi, che intende svolgere il gruppo, far si che quest'associazione non è solo virtuale ma anche reale, permettendo in questo modo un contatto diretto con tutti i partecipanti della comunità e non."

Fanno sempre piacere iniziative di questo tipo, quindi non mi resta che fare ad Emanuele Mattei e staff un grande in bocca al lupo.

Read More »»

Sunday, April 5, 2009

Pdf in Deep Zoom

. Sunday, April 5, 2009
0 commenti

Questo post, come molti altri del mio blog, nasce da una domanda sorta all’interno dell’ufficio. Nella fattispecie la domanda riguarda la possibilità di proteggere alcuni documenti in formato pdf da eventuali modifiche, stampa, copie ecc e consentire all’utente solo la visualizzazione di quest’ultimi all’interno di un’applicazione web.
Ebbene a parte l’impossibilità di una cosa del genere nel senso che, se il documento deve giungere alla macchina dell’utente per essere letto, allora è possibile eseguire qualsiasi operazione compreso eliminare protezioni e quindi modificarlo, tra le diverse idee che ho cercato di far “passare” c’è quella di convertire il/i pdf in immagini (una per pagina) per poi darle in pasto ad un “componente” per la visualizzazione Flash o per rimanere in ambito Microsoft: Silverlight.
Certo anche in questo modo un utente potrebbe sempre eseguire dei print screen (quindi poterlo stampare facilmente) e con un semplice software di OCR convertire il testo in caratteri ASCII.
Oltre all’OCR, per la modifica… le vie dei programmi di fotoritocco sono infinite.
Ovviamente come avrete capito non c’è una procedura che assicuri un’assoluta protezione in questo preciso scenario, ma si può solo rendere più o meno complessa l’operazione di “recupero”.
Ma ritorniamo all’idea. Per raggiungere lo scopo i passi da seguire sono essenzialmente due:
1) trasformare il documento pdf in immagine (jpg, bmp, ecc).
2) creare un progetto con Deep Zoom Composer
Il primo passo si può compiere in innumerevoli modi, per esempio scaricando uno dei tanti programmi (basta eseguire una semplice ricerca con Google) che consentono di convertire pdf in altri formati.
Oppure se si preferisce esistono anche servizi web che svolgono tale compito, giusto per citarne uno (NB: non ho fatto prove in merito):
youconvertit
youconvertit 
Personalmente ho seguito un’altra strada, cioè:
1) ho convertito il file pdf in formato Xps utilizzando i driver di stampa Microsoft XPS Document Writer. Su sistemi Windows Vista non è necessario installare nulla mentre per chi possiede Windows XP o Windows Server 2003 è necessario il Framework 3.0 e Microsoft XPS Essentials Pack.
A questo punto per generare il documento Xps è sufficiente attivare la finestra di stampa e selezionare la stampante virtuale Microsoft XPS Document Writer e cliccare su stampa.
2) Convertire a sua volta, il documento Xps, in n immagini, una per ogni pagina. Per tale compito ho pensato di creare un semplice “programmino” WPF composto dalle seguenti righe di codice:

   1: XpsDocument xpsDocument = new XpsDocument( @"path xps", System.IO.FileAccess.Read);
   2: FixedDocumentSequence documentSeq = xpsDocument.GetFixedDocumentSequence();
   3: int pageCount = documentSeq.DocumentPaginator.PageCount;
   4: for (int i = 0; i < pageCount; i++)
   5: {
   6:   DocumentPage docPage = documentSeq.DocumentPaginator.GetPage(i);
   7:                 
   8:   RenderTargetBitmap render = new RenderTargetBitmap((int)docPage.Size.Width,
   9:                       (int)docPage.Size.Height, 96, 96, PixelFormats.Default);
  10:   render.Render(docPage.Visual);
  11:   
  12:   FileStream stream = new FileStream( @"path" + i.ToString() + ".jpg",
  13:                       FileMode.Create);
  14:   JpegBitmapEncoder encoder = new JpegBitmapEncoder();
  15:   encoder.Frames.Add(BitmapFrame.Create(render));
  16:   encoder.Save(stream);
  17: }


Per poter compilare il codice bisogna aggiungere all’applicazione WPF la reference all’assembly ReachFramework:


ReachFramework


ed inoltre aggiungere la direttiva:


   1: using System.Windows.Xps.Packaging;

Il codice come già accennato in precedenza non fa altro che prendere il documento Xps, ciclare sulle pagine che lo compongono, e per ognuna di questa generare un file immagine con estensione .jpg.
A questo punto ci possiamo dedicare al secondo passo del tutorial, cioè quello di creare un progetto con Deep Zoom Composer.
Dopo aver installato il programma possiamo creare un nuovo progetto:

PDFDeep


Tramite l’apposito pulsante AddImage inseriamo le immagini generate in precedenza:

PDFDeep1

Al termine dell’importazione si può iniziare a disporre come meglio preferiamo le immagini.
Tramite il pulsante Export possiamo pubblicare il lavoro indicando il tipo di output (Images, Silverlight Deep Zoom, Seadragon Ajax), un nome e il percorso in cui eseguire il salvataggio:

PDFDeep2 
Per questo tutorial ho scelto come tipologia Silverlight Deep Zoom.
Con l’esportazione viene generata una cartella Name + ProjectWeb con tutto il necessario alla pubblicazione.

PS: le immagini che si possono notare in Deep Zoom sono tratte dal catalogo Francorosso su Cina e Giappone.

Read More »»

Monday, March 30, 2009

Link .Net #18

. Monday, March 30, 2009
0 commenti

Eccoci nuovamente con un nuovo appuntamento della rubrica Link .Net:


MIX'09: Silverlight 3 Beta, Expression Blend 3 Preview e Internet Explorer 8
Una completa overview degli annunci più importanti fatti in occasione del Mix ‘09 per quanto riguarda Silverlight 3 (attualmente in beta) e la preview della nuova versione di Expression Blend 3. it

Utilizzare editor JavaScript con ASP.NET: TinyMCE
Su HTML.it, un’interessante articolo di Marco Minerva su come utilizzare, nei propri siti in Asp.Net, l’editor TinyMCE. it

Creating an Ajax Login Form With jQuery
Tutorial su come creare un login sfruttando jQuery in un’applicazione Asp.Net MVC. en

Search Engine Optimization for Silverlight Applications
Search Engine Optimization for Silverlight Applications – Part 2
Interessante articolo sull’utilizzo dei .NET RIA Services per implementare una strategia SEO. en

Perceptor: An artificially intelligent guided navigation system for WPF
Daniel Vaughan ha pubblicato su CodeProject un’articolo (con codice sorgente)
su un sistema di navigazione guidata per WPF.
Ebbene il sistema in base all’esperienza scaturita dall’osservazione delle precedenti navigazioni dell’utente, suggerisce un grafo navigazionale.
Consigliatissimo!!!
en

Read More »»

Sunday, March 29, 2009

DeepZoom al servizio delle conigliette

. Sunday, March 29, 2009
0 commenti

playboy


Fonte: Blog: Genio del Male

Read More »»

Tuesday, March 24, 2009

Mix'09: tutti i video

. Tuesday, March 24, 2009
0 commenti



Sono disponibili per il download tutte le sessioni degli interventi al Mix'09:
Mix Videos

Read More »»

Wednesday, March 18, 2009

Expression Web SuperPreview

. Wednesday, March 18, 2009
0 commenti

Dal MIX09 stanno uscendo una bordata di novità, partendo da Silverlight 3.0 Beta 1, al quasi sicuro annuncio della RTM di Asp.Net MVC (visto la possibilità di download dal sito Microsoft) e per “finire”… una nuova funzionalità per Expression Web estremamente utile per gli sviluppatori web: Expression Web SuperPreview.
Permette di semplificare notevolmente la vita degli sviluppatori web consentendo di verificare la compatibilità di visualizzazione delle pagine tra i diversi browser che tutti noi conosciamo:
 
Caratteristica sicuramente appetibile è la possibilità di sovraporre pagine renderizzate con engine diversi per poter notare a colpo d’occhio le differenze.
In più sono presenti tutta una serie di strumenti classici come DOM e CSS inspector, righelli, linee guida ecc.
La versione beta di questo software si può scaricare al seguente link:
versione trial
Mentre per la versione definitiva si dovrà attendere il lancio di Expression Web 3.
Per maggiori informazioni vi rimando al seguente post:
Expression Web SuperPreview makes cross-browser testing like moist delicious cake

Read More »»

Sunday, March 15, 2009

Link .Net #17

. Sunday, March 15, 2009
0 commenti

Due settimane ricche di interessanti articoli:

Free ASP.NET MVC eBook Tutorial

In attesa di acquistare il libro Professional ASP.NET MVC 1.0 (personalmente farò mio anche Beginning ASP.NET MVC 1.0) è possibile scaricare il primo capitolo (di ben 185 pagine) in cui viene mostrata la costruzione di una applicazione completa (NerdDinner) tramite il Framework Asp.Net MVC.
Per poter scaricare il pdf e per maggiori informazioni vi rimando al post sul blog di Scott Guthrie.
en

12+ open source projects for .NET you probably didn’t know about.
Tempo fa, in questo blog, segnalavo alcuni progetti open source scritti utilizzando il Framework .Net. Per chi è interessato nel post citato trovate altri interessanti progetti. en

Right-Clicking in Silverlight 2 -- A Refinement
In questo articolo viene mostrato come implementare la funzionalità del click con tasto destro in Silverlight 2 tramite l’uso di un metodo chiamato FindElementsInHostCoordinates. en

Select Multiple List Items in SharePoint Feature
Come implementare la selezione multipla per un ListView Web Part in Sharepoint. en

Insert Windows Media to web pages in Microsoft Expression Web
Un tutorial passo passo su come inserire Windows Media nelle proprie pagine web tramite Microsoft Expression Web 2. en

Generate Excel files without using Microsoft Excel
Far uso del formato Binary Interchange File Format per generare un file Excel senza che Microsoft Excel sia installato. en

The Art of Debugging
Ben tredici lezioni sull’arte del debugging. en

Read More »»

Wednesday, March 11, 2009

Ottimizzazione Js

. Wednesday, March 11, 2009
0 commenti

L’ottimizzazione di una applicazione web passa anche dall’ottimizzazione dei singoli elementi script Js che la compongono.
Rimuovere spazi, commenti, righe vuote ecc può ridurre dal 20% al 30% la dimensione del nostro script con un bel risparmio per il browser che lo deve scaricare.
I modi per eseguire questo tipo di ottimizzazione sono diversi.
In Visual Studio non mi risulta ci sia un tool integrato, ma nulla ci vieta di aggiungerne uno specifico. Attraverso External Tools abbiamo accesso ad una serie di strumenti esterni che ci facilitano lo sviluppo/debug. Per esempio nella lista, di default, è disponibile Create Guid che consente di generare un identificatore GUID in base ai criteri specificati.
A questi strumenti possiamo aggiungerne altri come per esempio JsTrim, un compressor Js a riga di comando.
Il componente permette essenzialmente due livelli di compressione. Il primo, basic, esegue un'eliminazione di tutto ciò che può essere superfluo, come accennavamo ad inzio post. Il secondo invece utilizza l'algoritmo di Dan Edvards che permette di ottenere un’ottimizzazione con un risparmio di più del 40%. Quest'ultimo però, è più lento nel caricamento rispetto al primo, per via della decompressione che il browser deve attuare.
I passi per aggiungere JsTrim alla lista degli strumenti:
cliccare su Tools > External Tools


JsTrim

Indicare 1) un titolo nell'apposito campo, 2) il path dell'eseguibile (per uniformità si può copiare il punto exe di JsTrim nella cartella ...\Microsoft Visual Studio 8\Common7\Tools), 3) gli argomenti (per maggiori dettagli vi rimando alla documentazione).
Per chi fosse interessato a YUI Compressor segnalo il seguente post:
Compressing and obfuscating javascript and css files with YUICompressor in Visual Studio
Per chi invece non utilizza Visual Studio, funzionalità di ottimizzazioni sono presenti in molti applicativi. Giusto per citarne uno: Aptana che avevo già segnalato tempo fa al seguente post.
Esistono anche servizi web in cui è sufficiente indicare il file js da ottimizzare e il servizio fa il resto.
Per esempio in Javascript Utility Web Site è disponibile un JavaScript Compactor (il file deve essere maggiore di 1000 bytes).
Al completamento della procedura viene mostrata la percentuale di riduzione della dimensione del file.
Altro sito estremamente interessante è Bananascript che, come il precedente, mostra tutta una serie di statistiche a fine processo ma come si può leggere dalle faq:
"Besides the common removal of comments, tabs and spaces as seen in many other tools, this tool also performs "real" compression on the files. The idea is simple, replace long recurring byte sequences by shorter ones."
non si limita ad eliminare il superfluo ma esegue una compressione reale.bananascript1

Read More »»

Saturday, March 7, 2009

Creare degli Schematics

. Saturday, March 7, 2009
0 commenti

Ritengo l’uso degli schematics estremamente importante in quanto consentono di trasmettere informazioni in modo semplice ed immediato grazie all’uso di simboli grafici facilmente interpretabili dall’utente.
Nel campo della progettazione software ma non solo, ci sono tantissimi applicativi (free e non) che ci vengono incontro.
Sicuramente il più blasonato è Office Visio della Microsoft che dispone di un’ampia gamma di diagrammi. Ovviamente facendo parte del pachetto Office è possibile generare diagrammi pivot attingendo dati da Excel, Project, Sharepoint ecc.
Un’ottima alternativa a Office Visio può essere: SmartDraw, altro prodotto commerciale.
Per chi invece vuole provare qualcosa di diverso dal solito consiglio l’uso di Inkscape (molto più simile ad Illustrator che ai due precedentemente citati), volendo in accoppiata con Graphviz.
Entrambi open source, permettono di rappresentare le informazioni in SVG o altri formati vettoriali:


inkscape-0

Personalmente ho trovato estremamente utile l’uso di yEd Graph Editor, scritto in Java. I suoi Hierarchical Layout sono di veloce utilizzo (quindi nessun tipo di rallentamento come qualcuno potrebbe pensare) e gestiti tramite un interfaccia grafica molto piacevole.


yededitor

Infine per quanto riguarda la progettazione di interfacce web si possono benissimo utilizzare i tool visti fino a questo momento, ma un software che merita la giusta attenzione è Balsamiq.
La sua funzione più peculiare  è la possibilità di creare dei mockup, ossia delle bozze di interfacce. Applicazione a dir poco geniale, è sviluppata in Flex, e rende la nostra bozza simile a quella che avremmo realizzato tramite gli strumenti tradizionali: carta e matita.


balsamiq

Esiste una versione online:
Demo Balsamiq
ma anche una versione desktop a 79$.
Un’ultima cosa importante su questo progetto: è stato realizzato da un italiano, Giacomo Guilizzoni, un motivo in più per provarlo (in questo caso un pò di patriottismo ci sta tutto).

Read More »»

Tuesday, March 3, 2009

Family Show v3.0

. Tuesday, March 3, 2009
1 commenti

Tempo fa avevo segnalato alcuni servizi web per la creazione di alberi genealogici, oggi invece vi segnalo l’ultima versione, la 3.0 di Family Show.
Creato dalla società Vertigo per conto di Microsoft, permette di gestire il proprio albero genealogico.
La cosa interessante è l’uso delle ultime tecnologie: WPF, LINQ, ecc, ma ancora più interessante è che il codice è pubblicato su codeplex (un super starter kit per comprendere al meglio Windows Presentation Foundation).
E’ installabile attraverso ClickOnce (poco più di 2 MB).
NB: sto facendo qualche test su Vista e devo dire che è superlativo.FamilyShow

Read More »»

Sunday, March 1, 2009

Link .Net #16

. Sunday, March 1, 2009
0 commenti

Un altro appuntamento con la rubrica Link .Net:

Creating RSS Feeds Using ASP.Net

Kevin Miller ci mostra come creare un RSS Feed in Asp.Net tramite le classi presenti nel nuovo namespace Syndication introdotto con il Framework .Net 3.5. en

WPF, elaborazioni lunghe e presunti memory leak
Un post da leggere assolutamente e da inserire tra i preferiti. Raffaele Rialdi ci regala un’analisi, basata su alcuni suoi test, sulla disallocazione di oggetti e risorse in WPF. it

ADO.NET Entity Framework : Working with Stored Procedure
Un semplicissimo esempio su come far uso delle stored procedure con ADO.NET Entity Framework. en

Read More »»

Wednesday, February 25, 2009

Un nuovo look per Visual Studio 2010

. Wednesday, February 25, 2009
0 commenti

In anteprima le immagini del nuovo look, basato su WPF per Visual Studio 2010:


Fonte: Blog Jason Zander's

Read More »»

Sunday, February 22, 2009

Dal wallpaper al web

. Sunday, February 22, 2009
4 commenti

Qualche giorno fa curiosando su Smashing Magazine la mia attenzione è stata catturata da un wallpaper (disegnato da Liam J Moore) del seguente post: Desktop Wallpaper Calendar: February 2009. Mi è piaciuto così tanto che ho pensato di trasformare il tutto in un calendario per il web facendo uso dell’ormai insostituibile jQuery.
Ma partiamo con ordine indicando tutti gli strumenti da lavoro:
1)jQuery per la parte JavaScript;
2)CSS;
3)un controllo calendar: jQuery Datepicker;

Il primo passo consiste nel creare il markup della pagina:

   1: <table id="pagerYear">
   2:   <tr>
   3:     <td><span id="txtYear">2009</span></td>
   4:     <td align="right"><img src="img/meno.jpg" onclick="minYear()"/> 
<img src="img/piu.jpg" onclick="plusYear()"/></td>
   5:   </tr>
   6: </table>
   7: <div style="vertical-align:bottom; height:200px; position:absolute">
   8:   <div id="mese_gennaio"><p>Gen</p></div>
   9:   <div id="mese_febbraio"><p>Feb</p></div>
  10:   <div id="mese_marzo"><p>Mar</p></div>
  11:   <div id="mese_aprile"><p>Apr</p></div>
  12:   <div id="mese_maggio"><p>Mag</p></div>
  13:   <div id="mese_giugno"><p>Giu</p></div>
  14:   <div id="mese_luglio"><p>Lug</p></div>
  15:   <div id="mese_agosto"><p>Ago</p></div>
  16:   <div id="mese_settembre"><p>Set</p></div>
  17:   <div id="mese_ottobre"><p>Ott</p></div>
  18:   <div id="mese_novembre"><p>Nov</p></div>
  19:   <div id="mese_dicembre"><p>Dic</p></div>
  20:   <div id="divCal" style="display:none; position:absolute">
  21:     <span id="calendar"></span>  
  22:   </div>
  23: </div>


Risultato:
CalendarWallpaper4

Per quanto riguarda il CSS usato nella pagina potete scaricarlo da qui:
CSS Page

Fin qui tutto molto semplice, si è trattato di inserire un numero di tag div pari al numero di mesi. Ma come si può, notare dal wallpaper i singoli mesi dovrebbero alla selezione dell’utente abbassarsi/alzarsi.
Personalmente ho optato per l’effetto Size che consente di ridimensionare l’elemento specificando valori per le proprietà width e height.
In prima battuta la funzione può essere così impostata:

   1: $(function() {
   2:   $("div[id^='mese_']").toggle(function() {
   3:     $(this).effect("size", {
   4:       to: {
   5:         width: 60,
   6:         height: 100
   7:         }, origin: ['200', '0']
   8:       }, 1000);
   9:     }, 
  10:     function() {
  11:     $(this).effect("size", {
  12:       to: {
  13:         width: 60,
  14:         height: 200
  15:       }, origin: ['100', '0']
  16:     }, 1000);
  17:   });
  18: });

Per ogni div la cui proprietà id inizia per “mese_” tramite l’effetto Toggle altero la visualizzazione (riga 2). La prima volta per effetto del Size la dimensione del div selezionato passerà da un’altezza pari a 200px a una di 100px. La seconda volta la sua dimensione verrà riportata a quella originaria.
Così facendo però ogni mese può essere ridimensionato ad un’altezza pari a 100px.


CalendarWallpaper1

Quello che invece mi sono proposto di ottenere è di avere solo un mese alla volta ridimensionato, tutti gli altri devono riconquistare la loro dimensione originaria: 200px.

Questo risultato si può ottenere agendo sui Trigger. La funzione vista in precedenza si arricchisce nel seguente modo:

   1: var idOldDivSized = '';
   2: $(function() {
   3:   $("div[id^='mese_']").toggle(function() {
   4:     if (idOldDivSized != "") {
   5:       $("#" + idOldDivSized + "").trigger('click');
   6:     }
   7:     $(this).effect("size", {
   8:       to: {
   9:         width: 60,
  10:         height: 100
  11:       }
  12:       , origin: ['200', '0']
  13:     }, 1000);
  14:     idOldDivSized = this.id;
  15:     }, function() {
  16:     $(this).effect("size", {
  17:       to: {
  18:         width: 60,
  19:         height: 200
  20:       }, origin: ['100', '0']
  21:     }, 1000);
  22:     idOldDivSized = "";
  23:     $(this).parent().css("bottom", "0px");
  24:   });
25:});

Le nuove righe sono: 1, 3, 4, 5, 14, 22 e 23. Sostanzialmente tramite il trigger possiamo innescare l’evento sul div precedentemente selezionato (riga 4 e 5). Quest’ultima informazione viene salvata in una variabile globale: idOldDivSized (riga 14 e 22). La riga 23 è un fix per il browser IE.

In questo modo ottengo:CalendarWallpaper2
Non rimane che dare uno sguardo ai passi necessari a far comparire il controllo calendario al di sotto del mese. Per semplicità ho scelto un controllo già bello e pronto: Datepicker. Per chi fosse interessato ad una collezione di controlli
caldendar in JavaScript vi rimando al seguente post:
A collection of 14 Excellent JavaScript Date Pickers
Il controllo nella fattispecie è personalizzabile in mille aspetti. Per esempio si può decidere se visualizzare una dropdownlist contenente gli anni/mesi, modificare lo stile ecc.
Nel mio caso il calendario deve mostrare solo i giorni. I parametri da settare sono ben documentati:

   1: $("#calendar").datepick({ changeMonth: false,
   2:     changeYear: false
   3: });

Per eliminare la parte superiore del controllo in cui vengono mostrati gli elementi prev e next l’unica soluzione che ho trovato è stata quella di intervenire sul CSS, in particolar modo sulla classe: datepick-links, settando la proprietà display a none.
Ancora una volta modifichiamo la funzione vista fino a questo momento:

   1: var idOldDivSized = '';
   2: $(function() {
   3:   $("div[id^='mese_']").toggle(function() {
   4:   if (idOldDivSized != "") {
   5:     $("#" + idOldDivSized + "").trigger('click');
   6:   }
   7:   $(this).effect("size", {
   8:     to: {
   9:       width: 60,
  10:       height: 100
  11:     }
  12:     , origin: ['200', '0']
  13:   }, 1000);
  14:   idOldDivSized = this.id;
  15:   modifyCal($(this).parent().css("left"), idOldDivSized);
  16:   }, function() {
  17:     $('#divCal').css("display", "none");
  18:     $(this).effect("size", {
  19:       to: {
  20:         width: 60,
  21:         height: 200
  22:       }, origin: ['100', '0']
  23:     }, 1000);
  24:     idOldDivSized = "";
  25:     $(this).parent().css("bottom", "0px");
  26:   });
27:});

Le nuove righe sono: 15 e 17. La riga 17 non merita di essere commentata più di tanto, nel senso che non fa altro che rendere non visibile il div che contiene il controllo calendario.

Invece la riga 15 è estremamente interessante. In essa richiamo la funzione modifyCal (responsabile della visualizzazione del calendario), passando come parametri una posizione e l’id del div selezionato (es: “mese_marzo”).
Qualcuno forse avrà notato che la posizione che passo come parametro è quella dell’oggetto parent e non come ci si può immaginare quella dell’oggetto div/mese scelto:
$(this).css(“left”)
Il motivo è da ricercare nell’effetto Size. Non sono andato troppo in profondità con l’analisi ma osservando quello che accade tramite Firebug sembra che il div da ridimensionare viene incapsulato in un div contenitore il quale contiene le informazioni di posizione (per chi fosse interessato consiglio di iniziare col guardare lo script dell’effetto):
CalendarWallpaper3 
Ecco la funzione modifyCal:

   1: function convertMonths(month) {
   2:   switch (month){  
   3:     case "mese_gennaio":  
   4:       return 1;  
   5:     case "mese_febbraio":  
   6:       return 2;
   7:     case "mese_marzo":  
   8:       return 3;
   9:     case "mese_aprile":
  10:       return 4;
  11:     case "mese_maggio":
  12:       return 5;
  13:     case "mese_giugno":
  14:       return 6;
  15:     case "mese_luglio":
  16:       return 7;
  17:     case "mese_agosto":
  18:       return 8;
  19:     case "mese_settembre":
  20:       return 9;
  21:     case "mese_ottobre":
  22:       return 10;
  23:     case "mese_novembre":
  24:       return 11;
  25:     case "mese_dicembre":
  26:       return 12;
  27:   }
  28: }
  29:  
  30: function modifyCal(positionLeft, month) {
  31:   $('#divCal').css("top", "200px");
  32:   $('#divCal').css("display", "block");
  33:  
  34:   var da = new Date(parseInt($('#txtYear').html()), convertMonths(month) - 1, 1);
  35:   $("#calendar").datepick('destroy');
  36:   $("#calendar").datepick({ changeMonth: false,
  37:       changeYear: false,
  38:       defaultDate: da
  39:    });
  40:    $('#theme').attr('href', "jquery.datepick." + month + ".css");
  41:    $("#divCal").animate({
  42:        left: positionLeft
  43:    }, 1500);
  44: }

Viene generata una data di default da assegnare al calendario ( riga 34). Il div viene spostato tramite animazione nella posizione indicata attraverso il parametro positionLeft (riga 41 a 43). Infine viene caricato il CSS del calendario modificando l’attributo href del tag style (riga 40):


   1: <link href="jquery.datepick.css" rel="stylesheet" type="text/css" id="theme"/>

Significa che ogni mese è corredato di un file CSS (modificati opportunamente). Il nome di questo file è composto da “jquery.datepick.” più l’id del div/mese più l’estensione css.
Infine la pulsantiera in alto che permette di andare avanti ed indietro con gli anni si basa su due semplici funzioni: minYear e plusYear:


   1: function minYear() {
   2:   $('#txtYear').html(parseInt($('#txtYear').html()) - 1);
   3: }
   4:  
   5: function plusYear() {
   6:   $('#txtYear').html(parseInt($('#txtYear').html()) + 1); 
   7: }

Personalmente ho trovato l’esercizio notevolmente stimolante e l’uso di jQuery ha reso tutto molto più divertente:
CalendarWallpaper6
Come al solito buono studio!!!.
NB: test effettuati sui principali browser:
IE 7, Firefox 3, Chrome ed Opera 9.

Read More »»