Tutti i sabato mattina, quando sono ancora rintronato per il venerdì sera, vedo sempre su Rai Tre la trasmissione TV Talk, che trovo molto interessante perchè diversi personaggi discutono di televisione. Personaggi che la televisione la fanno, la producono, la organizzano e la studiano. Mi sono affezionato al professor Simonelli, a Cinzia Bancone, ed Erica Brenna, al conduttore e così via. TV Talk fa parte del circuito RAI Educational diretta da Giovanni Minoli, il che per me equivale a qualità e competenza. Tra le molte cose di cui si parla particolare attenzione viene posta sui palinsesti televisivi: come mai una certa trasmissione viene messa in onda alle 11 e non alle 12? come mai la conduttrice è Milly Carlucci e non un’altra? come mai il festival di Sanremo viene visto dai 30enni e non dai 60enni? C’è un’analista molto brava, la Erika Brenna di cui sopra che, armata di software dedicato, studia ed analizza gli ascolti delle trasmissioni e trae determinate conclusioni.

Una delle cose più interessanti che saltano fuori è che i canali televisivi RAI e Mediaset predispongono i loro palinsesti televisivi in modo tale da coprire tutte le fasce d’età, tutti i gradi di scolarizzazione (dalla scuola elementare ai laureati), tutte le fasce orarie, ed ottimizzando ovviamente la messa in onda degli spot pubblicitari. Ad esempio, sarebbe assurdo che Italia 1 facesse solo cartoni animati, perchè così facendo verrebbe guardato solo da studenti. Sarebbe assurdo che Rai 3 facesse solo documentari storici, perchè così facendo verrebbe guardato solo da gente interessata a quel tipo di argomenti. Capita a volte che una emittente televisiva metta in onda su due reti differenti due diverse tramissioni che attirano lo stesso tipo di pubblico: concorrenza in casa, praticamente. Le due trasmissioni si sovrappongono, si rubano gli ascoltatori a vicenda, salta fuori che per esempio i 30enni vorrebbero guardare due programmi mentre i 60anni si stanno annoiando, e così via. Ovviamente questa è una situazione da evitare il più possibile, e la gente che sistema i palinsesti fa proprio questo lavoro.

Credo che questa situazione anomala accada in qualche caso anche per i siti Web. Per esempio, mi sapete dire la differenza sostanziale tra FolderShare o SkyDrive??? Ok, ci saranno pure differenze, ma non sarebbe meglio farne uno ma completo? Ambedue permettono di mettere on-line files, chi più chi meno, tutti e due permettono di condividerli con altri, o di mantenerli disponibli in forma privata. Tutti e due sono accessibili tramite un account Windows Live. L’unica vera differenza consiste nel fatto che FolderShare permette di sincronizzare un folder locale sul PC con i folder in rete (con un’utility installata sul PC), mentre l’altro no. Capisco se uno fosse di Google e l’altro di Yahoo, oppure uno di AOL e l’altro di Netscape…ma qui si parla di Microsoft!

Dal punto di vista meramente commerciale, o pubblicitario, secondo me vengono messi in piedi due sistemi analoghi, vicini nel tempo, con lo stesso obiettivo, molto simili fra loro, ma con nomi diversi. Tra l’altro, lo stesso risultato lo possiamo facilmente ottenere con un hosting Sharepoint come WH4L e Groove (di Office 2007), cosa che personalmente faccio da mesi: ma qui si tratta di prodotti a pagamento.

Per dovere di cronaca, ecco i link ai due siti di cui ho parlato:
https://www.foldershare.com/
http://skydrive.live.com

Mah, certe cose non le capisco! Ditemi cosa mi è sfuggito, vi prego, e cancellerò questo post.

Technorati Tags: windows live sharing SkyDrive FolderShare

Send to Kindle

Un’altra modalità con cui è possibile esportare un’immagine da Expression Design è quello di generare un file XAML contenente al suo interno un ResourceDictionary. Lo scopo è quello di avere un file XAML che potete riutilizzare in più progetti. Oppure all’interno dello stesso progetto potete far riferimento alla stessa immagine, perchè questa viene inserita fra le risorse globali definite all’interno della stessa applicazione. Vediamo in pratica come fare.

Esportare un progetto Expression Design in un file XAML
Apriamo Expression Design, poi apriamo il file .design che contiene il nostro progetto. Andiamo sotto il menù File e poi clicchiamo sulla voce Export. Dopo aver scelto la locazione ed il file del file XAML da generare, appare una dialog box che ci permette di impostare alcuni valori:

In questa dialog box, attiviamo l’option button relativa a Resource dictionary. La cosa interessante è che possiamo decidere come deve essere esportato il contenuto del nostro progetto:

1. Document: significa che il ResourceDictionary conterrà un solo oggetto relativo al documento nella sua interessa. Il mio logo VivendoByte di cui vi ho parlato l’altra volta viene esportato in un unico oggetto DrawingBrush con x:Key =”VivendoByteLogo_design”.
2. Layers: se nel progetto avete definito più layers, nel ResourceDictionary vengono inseriti tanti oggetti quanti sono i layers, ciascuno con un sua Key per poterli referenziare singolarmente
3. Objects: nel ResourceDictionary vengono inseriti tanti oggetti quanti ne compaiono nel progetto. Anche in questo caso, ogni oggetto ha una propria Key univoca

Nel mio caso, ho deciso di esportare il tutto come unico Document. Lo XAML in forma abbreviata appare più o meno così:

<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DrawingBrush x:Key="VivendoByteLogo_design">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <DrawingGroup.Children>
                ...
                ...
                ...
                </DrawingGroup.Children>
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</ResourceDictionary>

All’interno del blocco <DrawingGroup.Children></DrawingGroup.Children> vengono inseriti tutti gli elementi necessari per disegnare in formato vettoriale l’immagine grafica disegnata con Expression Design.

Lo scopo di tutto questo è quello di importare il ResourceDictionary all’interno di un progetto Expression Blend, in modo tale da poter inserire l’immagine – in questo caso il mio logo – nelle Window del progetto. Possiamo farlo senza mettere mano al codice XAML? Certo che sì: questa volta Blend non crasha e fa tutto come si deve. Come? Stiamo per scoprirlo.

Importiamo in un progetto Expression Blend il ResourceDictionary

Apriamo Expression Blend, poi apriamo o creiamo il progetto sul quale vogliamo lavorare. Poi clicchiamo con il destro sul nome del progetto e clicchiamo sulla voce Add Existing Item e andiamo a selezionare il file XAML che abbiamo creato al passaggio precedente. Questa operazione fa essenzialmente due cose fondamentali:

1. aggiunge il file XAML al progetto Blend: banale
2. modifica automaticamente il file App.xaml, aggiungendo fra le risorse disponibili globalmente nell’applicazione il ResourceDictionary appena aggiunto al progetto. Il file App.xaml appare come segue:

<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="StudioConIlLibro.App" StartupUri="Window3.xaml">
    <Application.Resources>
        <!-- Resources scoped at the Application level should be defined here. -->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="VivendoByteLogo.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

A questo punto, la faccenda è abbastanza semplice. Basta aprire una Window, o crearne una nuova, per vedere fra le risorse diverse cose interessanti. Se espandiamo il nodo relativo al file App.xaml, Blend ci dice che abbiamo definito un collegamento al file VivendoByteLogo.xaml. Se espandiamo quest’ultimo invece, appare la nostra immagine: Blend ci dice qual’è la sua Key, e ci fa vedere l’anteprima dell’immagine. Possiamo regolarne alcune proprietà, come il Tile Mode e lo Stretch.

Per inserire l’immagine su una Window è sufficiente farne un bel drag’n’drop. Dipendentemente dall’oggetto sul quale rilasciate il pulsante, Blend vi chiede a quale proprietà volete associare il DrawingBrush. Questa è davvero una cosa carina, funzionale e intuitiva da usare. Per esempio, se trascinate l’immagine su un semplice Button, potete selezionare Background, BorderBrush, Foreground o OpacityMack. Potete inoltre decidere se creare da zero un nuovo oggetto Rectangle fillato al suo interno con l’immagine vettoriale. Lo XAML generato è banale ed efficiente:

<Rectangle
   HorizontalAlignment="Left" Width="100"
   Fill="{DynamicResource VivendoByteLogo_design}"
   Stroke="#FF000000"/>

Questo è l’esempio di un oggetto Rectangle. Se avessimo deciso di usare l’immagine su un Button la proprietà bindata sarebbe stata ad esempio Background e così via.

Technorati Tags: blend wpf XAML resources

Send to Kindle

Se dovete creare grafica vettoriale complessa potete usare Expression Design, un altro strumento della famiglia Expression. Questo software permette di disegnare grafica vettoriale in 2D: rettangoli, circonferenze, testo, ellissi, disegno a mano libera, etc. etc. Il tutto sfruttando le potenzialità di WPF, quindi effetti grafici come gradienti, drop shadows, emboss, mosaic e chi ne ha più ne metta.

Per esempio, oggi pomeriggio, prima di andare in ospedale, ho ridisegnato il logo VivendoByte che qualche mese avevo creato con Corel Draw 12 proprio con Expression Design. Ecco qual’è il vantaggio: potete esportare l’immagine vettoriale che avete creato in codice XAML, e quindi importabile per esempio in Expression Blend.

Ecco qui sotto uno screensho del logo visto con Kaxaml:

Nella parte superiore si vede il logo, nella parte inferiore il codice XAML corrispondente. L’esportazione da Expression Design è piuttosto semplice: basta andare sul menù File e poi cliccare su Export. Appare una dialog box dove potete settare alcune impostazioni:

Potete decidere se esportare in un Canvas, in un ResourceDictionary oppure in formato Silverlight (che si occupa di eliminare tutti i componenti non supportati, per esempio il BitmapEffect che ho impostato per l’ombra azzurrina che si vede nella scritta “vivendoByte.net” nello screenshot di prima. Mentre giocate con gli option button, date un’occhiata all’anteprima che vedete sulla sinistra, perchè è piuttosto fedele al risultato finale. Dopo aver impostato il tutto, fate click sul pulsante Export ed il gioco è fatto: avete ottenuto uno XAML da importare dove volete voi.

Se siete scrupolosi, date un’occhiata allo XAML con lo strumento che preferite. Io ho usato Kaxaml perchè è veloce, rapido e…non crasha. Vi accorgerete che l’ “intelligenza” applicata da Expression Design è scarsa. Ma non potrebbe essere altrimenti: un software è pur sempre un software. Ma siccome noi siamo umani, possiamo ottimizzare moltissimo lo XAML.

Per esempio, il logo VivendoByte è formato tra le altre cose da 5 semicerchi, tutti colorati con un gradiente che va da un azzurro (#FF75C5F0) al bianco (#FFFFFFFF). Nello XAML il gradiente è espresso con un blocco come questo:

1 <LinearGradientBrush StartPoint="0.5,-0.140754" EndPoint="0.5,1.61357">
2     <LinearGradientBrush.GradientStops>
3         <GradientStop Color="#FF75C5F0" Offset="0"/>
4         <GradientStop Color="#FFFFFFFF" Offset="1"/>
5     </LinearGradientBrush.GradientStops>
6 </LinearGradientBrush>

Queste 6 linee di codice XAML sono ripetute per 5 volte, una per ciascun semicerchio. A mano, possiamo inserire questo LinearGradientBrush in una risorsa del Canvas, dandogli ovviamente un nome tramite x:Key.

1 <Canvas.Resources>
2     <LinearGradientBrush x:Key="Arco" StartPoint="0.5,-0.140754" EndPoint="0.5,1.61357">
3         <LinearGradientBrush.GradientStops>
4             <GradientStop Color="#FF75C5F0" Offset="0"/>
5             <GradientStop Color="#FFFFFFFF" Offset="1"/>
6         </LinearGradientBrush.GradientStops>
7     </LinearGradientBrush>
8 </Canvas.Resources>

A questo punto, troviamo nello XAML la definizione dei 5 semicerchi, fatta con oggetti di tipo Path. La cambiamo da così:

<Path x:Name="Path_17" Width="64.5164" Height="34.749" Canvas.Left="175.463" Canvas.Top="84.1736" Stretch="Fill" StrokeThickness="5" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 177.963,116.423C 177.963,99.9927 191.287,86.6736 207.722,86.6736C 224.157,86.6736 237.48,99.9927 237.48,116.423">
    <Path.Fill>
        <LinearGradientBrush StartPoint="0.5,-0.140754" EndPoint="0.5,1.61357">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF75C5F0" Offset="0"/>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Path.Fill>
</Path>

a così:

<Path x:Name="Path_17" Fill="{StaticResource Arco}" Width="64.5164" Height="34.749" Canvas.Left="175.463" Canvas.Top="84.1736" Stretch="Fill" StrokeThickness="5" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 177.963,116.423C 177.963,99.9927 191.287,86.6736 207.722,86.6736C 224.157,86.6736 237.48,99.9927 237.48,116.423" />

La proprietà Fill fa riferimento alla risorsa denominata Arco. Il codice è molto più compatto ed efficiente; ma il vero vantaggio è che quel tipo di gradiente è definito una volta sola, all’inizio fra le risorse del Canvas, e quindi se volessimo cambiarlo dovremmo farlo in un punto solo. Lo svantaggio è che se dovessimo riesportare da Expression Design l’immagine vettoriale, dovremmo riottimizzare lo XAML, quindi…fatelo solo quando siete sicuri di aver finito!!!

Technorati Tags: XAML wpf Expression Design

Send to Kindle

Ingredienti:

• .NET Framework 3.0 minimo installato e funzionante
• Expression Blend 2 December Preview
• una Window
• un video supportato da WPF da visualizzare
• un’immagine temporanea (maggiori dettagli dopo)

Cominciamo con il dire che la difficoltà della ricetta è alta, anche solo per il fatto che Blend ha il maledetto vizio di crashare un po’ troppo. Si vede che siamo ancora in CTP con questo prodotto. Ricordatevi di premere CTRL+S ad ogni minima modifica, così potete eventualmente riprendere nel punto in cui vi siete interrotti.

Dunque, l’idea è quella di usare esclusivamente l’IDE di Blend per posizionare sullo schermo un video qualsiasi e di renderizzarlo su un piano 3D, che potete ruotare a piacimento sui tre assi XYZ. Come vedremo fra poco, l’IDE non arriva ancora a fare tutto, perciò ad un certo punto dovremo entrare nello XAML per fare qualche modifica a mano.

Cominciamo con il posizionare su una Window vuota uno StackPanel con Width=Auto, Height=Auto, HorizontalAlignment=Center e VerticalAlignment=Center, Orientation=Vertical. Così facendo, qualsiasi controllo noi andremo ad aggiungere allo StackPanel si posizionerà al centro della Window, ben in vista.

Andiamo nel tab Project, clicchiamo con il destro sul file immagine (non il video!) e selezioniamo Insert.

L’immagine, di qualsiasi cosa si tratti, compare nella artboard di Expression Blend. Nello XAML viene aggiunto un tag Image. Se dovesse essere troppo grande, è sufficiente regolare Width e Height per farcela entrare nella Window. Selezioniamo l’immagine sulla artboard, poi andiamo sul menù Tools e poi clicchiamo su Make Image 3D. Questa operazione fa una cosa importantissima: crea nello XAML una struttura complessa composta principalmente da un oggetto Viewport3D, e al cui interno vengono definiti oggetti come Camera, GeometryModel3D, DiffuseMaterial, AmbientLight, etc. La morale è che viene definito l’aspetto che deve assumere l’immagine sul piano 3D: orientamento sui tre assi, illuminazione della scena, punto di vista, distanza dell’osservatore, ampiezza del campo visivo, etc. etc. Tutte queste informazioni vengono combinate dal runtime di WPF per renderizzare l’immagine, sia quando l’applicazione è in esecuzione, sia quando siamo in design-time dentro Blend. Sta di fatto che possiamo selezionare dalla toolbox lo strumento Camera Orbit per traslare/ruotare/zoomare l’immagine.

Ma siamo arrivati ad un punto cruciale. Noi vogliamo renderizzare un video, e non un’immagine. Qui dobbiamo entrare nello XAML per due motivi:

• non sono riuscito ad usare l’IDE per impostare la proprietà Brush del DiffuseMaterial
• ad un certo punto, credevo di esserci riuscito: dal pannello Object and Timeline, esplodete il path Viewport3D/ModelContainer/Content/Model. Da qui, andate nella finestra delle Proprietà. Potete accedere alla proprietà Material. Sorpresa: appare una finestra incompleta, flottante, nella quale è impossibile lavorare in modo decente.
• Blend crasha
• Blend crasha

Alla fine mi sono arreso: sono andato nello XAML e ho impostato a mano il video invece dell’immagine. Andate nello XAML e cercate questo codice:

<GeometryModel3D.Material>
    <DiffuseMaterial>
        <DiffuseMaterial.Brush>
            <ImageBrush Stretch="Fill" ImageSource="Imagesigor_rapper_small.jpg"/>
        </DiffuseMaterial.Brush>
    </DiffuseMaterial>
</GeometryModel3D.Material>

E’ sufficiente sostituire l’oggetto ImageBrush con un oggetto VisualBrush, che questa volta deve puntare al file video che ci interessa:

<GeometryModel3D.Material>
    <DiffuseMaterial>
        <DiffuseMaterial.Brush>
            <VisualBrush>
                <VisualBrush.Visual>
                    <MediaElement Source="Videos/DotNetMarche02.avi" />
                </VisualBrush.Visual>
            </VisualBrush>
        </DiffuseMaterial.Brush>
    </DiffuseMaterial>
</GeometryModel3D.Material>

Salvate lo XAML, ritornare nella visualizzazione Design e vedrete il primo frame del video che appare nello stesso punto dove prima c’era l’immagine. Se prima avevate utilizzate lo strumento Camera Orbiter per manipolare l’oggetto sul piano 3D, vedrete lo stesso effetto applicato al video.

Se compilare ed eseguite il progetto, vedrete partire il video automaticamente.

Technorati Tags: blend Video wpf XAML

Send to Kindle

Premessa: il post è volutamente ironico. Chiedo scusa a tutti (ma proprio a tutti) i miei amici di UGIdotNET: vi prego, siate clementi nei commenti! 🙂

Molto tempo fa dissi che prima che succedesse una cosa, ne sarebbero accadute delle altre. Sono stato smentito. Quella cosa è accaduta ieri mattina.

Ieri ho programmato e ho messo on-line la mia prima pagina in ASP.Net.

E ne ho persino due prove. La prima è lo screenshot di Visual Studio 2008:

La seconda è la mia nuova home-page. Che emozione…l’estensione è .aspx.
Chi l’avrebbe mai detto???

Sapevo che VS2008 potesse creare siti Web, sapevo che esisteva una certa tecnologia chiamata ASP.Net. Lo sapevo perchè ne avevo sentito solo parlare. Da ieri invece conosco qualcosa di più concreto. Da oggi posso dire…cavolo, ho messo on-line una pagina ASP.Net funzionante!

E vi dirò di più: dopo aver letto l’articolo su MSDN Magazine di Justin Smith, ho persino sfruttato il .NET Framework 3.5 con le classi SyndicationFeed e SyndicationItem messo a disposizione da WebHosting4Life per prendere il feed del mio blog e bindarlo in una GridView.

Tutto è cominciato quando ho deciso di ridisegnare la home-page. Mi son detto…dal momento che devo e voglio rifarla, perchè non usare uno strumento che conosco già? Non mi riferisco ovviamente a ASP.Net, ma a Visual Studio. Quindi, mi sono messo di buona lena…ed il risultato non si è fatto attendere.

Che dici, Mario, mi sono riguadagnato un posto tra i soci UGIdotNET. Mi concedi un…

UgiDotNet.Members.Add(Igor);

Era parecchio che non mi occupavo di pagine Web.
Vi devo chiedere scusa: non è mica tanto male, lo sapete?
D’altronde, questo ASP.Net è eccezionale!!!!

Technorati Tags: .NET Framework Web ASP.Net

Send to Kindle