Silverlight PhotoSlider

Date: giovedì gennaio 29, 2009
Posted in: Controls

English VersionEnglish Version

Questo è un applicativo per poter includere sul proprio sito web una sequenza di immagini correlate di testo descrittivo e di un link. Viene in genere utilizzata nelle Home Page per dare risalto a delle news o a delle pagine in particolare.

Nell’esempio che segue vengono riassunte tutte le applicazioni sviluppate nel presente blog.

Get Microsoft Silverlight

Aggiungere questa applicazione alle vostre pagine web è piuttosto semplice, basta seguire i seguenti passi:

  1. Scaricare il PhotoSlider da questo link. Potete anche scaricare l’esempio completo visibile sopra da questo link.
  2. Scompattate l’archivio zip scaricato in una cartella e copiate il file PhotoSlider.xap in una cartella del vostro sito web.
  3. Aggiungete in una pagina web il seguente codice, nel punto i cui vogliate che appaia il PhotoSlider
    <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="400" height="270">
    <param name="source" value="PhotoSlider.xap"/>
    <param Name="initParams" value="TextLoading=Caricamento Immagini...,UrlXmlSlides=blog_images.xml,TimeToSlide=5" />
    <param name="onerror" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="2.0.30923.0" />
    <param name="autoUpgrade" value="true" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
    </a>
    </object>
  4. Modificate i seguenti tags secondo le vostre esigenze:
    • &lt;object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”400″ height=”270″>
      Rispettivamente larghezza ed altezza (in pixels) del PhotoSlider (Si possono anche specificare delle percentuali: width=”100%” height=”80%”).
    • &lt;param name=”source” value=”/ontheroad/photoslider/PhotoSlider.xap“/&gt;Il path dove è posizionato il file PhotoSlider.xap nel vostro sito
      Esempio: se caricate il file PhotoSlider.xap in una cartella come http://www.yoursite.com/folder/PhotoSlider.xap allora il tag andrà modificato in questo modo&lt;param name=”source” value=”http://www.yoursite.com/folder/PhotoSlider.xap“/&gt;
    • &lt;param name=”background” value=”white” /&gt;Rappresenta il colore di background del PhotoSlider durante il primo caricamento
    • &lt;param Name=”initParams” value=”TextLoading=Caricamento Immagini…,UrlXmlSlides=blog_images.xml,TimeToSlide=5″ /&gt;
      TextLoading indica il testo che apparirà durante il caricamento delle immagini.
      UrlXmlSlides indica il path del file XML che descriverà le immagini da visualizzare.
      TimeToSlide indica l’intervallo di tempo in secondi tra un’immagine e l’altra.
  5. Creare il file XML che descrive le immagini da utilizzare. Il formato è il seguente:
    <images>
      <picture>
        <title>FlipBook</title>
        <image>blog_gallery/flipbook.png</image>
        <description>Permette di realizzare delle animazioni frame per frame e di includerle nel proprio sito web.</description>
    	<linkUrl>http://www.silverlight-blog.it/?p=60</linkUrl>
      </picture>
      <picture>
        <title>PhotoGallery</title>
        <image>blog_gallery/photogallery.jpg</image>
        <description>Includere una fotogallery sul proprio sito web non è mai stato così facile.</description>
    	<linkUrl>http://www.silverlight-blog.it/?p=63</linkUrl>
      </picture>
       <picture>
        <title>Podcast Player</title>
        <image>blog_gallery/podcastplayer.png</image>
        <description>Permette di ascolare alcuni podcast soltanto utilizzando un Browser.</description>
    	<linkUrl>http://www.silverlight-blog.it/?page_id=27</linkUrl>
      </picture>
       <picture>
        <title>MinoPlayer</title>
        <image>blog_gallery/videoplayer.png</image>
        <description>Tramite questo video player è possibile aggiungere filmati sul proprio sito web.</description>
    	<linkUrl>http://www.silverlight-blog.it/?p=59</linkUrl>
      </picture>
       <picture>
        <title>Previsioni del tempo</title>
        <image>blog_gallery/weather.png</image>
        <description>Windget per inserire le previsioni del tempo, personalizzabili per ogni singolo visitatore.</description>
    	<linkUrl>http://www.silverlight-blog.it/?page_id=25</linkUrl>
      </picture>
    </images>

    Dove title indica il titolo, image il path dell’immagine, description la descrizione e linkUlr la pagina da aprire quando si clicca sull’immagine (linkUrl può anche essere lasciato vuoto, in questo l’immagine non sarà cliccabile).

  6. Infine caricate tutte il file XML e le immagini sul vostro sito.


Nuovo Silverlight Toolkit

Date: giovedì ottobre 30, 2008
Posted in: Controls

Pochi giorni fa è stato rilasciato il nuovo Silverlight Toolkit. Quest’ultimo è una collezione di nuovi controlli che possono essere utilizzati in concomitanza a quelli già presenti in Silverlight.
Questo è un elenco dei nuovi controlli disponibili:

Tra questo quelli di cui io sentivo una particolare mancanza ci sono i ViewBox, i WrapPanel e i TreeView. Con questi ultimi le potenzialità di Silverlight si avvicinano moltissimo a WPF.
Considerazioni invece a parte vanno fatte per i Chars, cioè la possibilità di creare facilmente grafici di vario tipo con un notevole impatto visivo. Invece che “semplici” controlli questi possono essere considerati una vera e propria killer application per la costruzione di reportisica. In questa pagina potrete vedere un esaustivo esempio di Charts.
In questa pagina invece troverete un esempio che mostra tutte le caratteristiche dei nuovi controlli.
Spero presto di riuscire a creare un applicazione che li utilizzi per potervi dare un feedback sulla loro implementazione.


English VersionEnglish Version
Ecco a voi la nuova versione 1.2 di MinoPlayer, un Player di Video sviluppato in silverlight

Get Microsoft Silverlight

Questa nuova versione supporta i Markers. I markers sono dei messaggi di testo che possono essere inseriti all’interno dei video in determinati punti.
Con i markers oltre a poter realizzare sottotitoli si possono anche creare dei messaggi pubblicitari testuali, oppure didascalie.Potete facilmente inserirlo all’interno del vostro sito web seguendo queste semplici istruzioni

  1. Scaricate il player da questo link, pesa solo 26Kb :-)
  2. Scompattatelo e copiate il file MinoPlayer_Ver1_2.xap in una cartella del vostro sito web
  3. Aggiungere il seguente codice HTML nella pagina del vostro sito nel punto in cui volete venga posizionato il player:
    <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”500″ height=”330″>
    <param name=”source” value=”ClientBin/MinoPlayer_Ver1_2.xap”/>
    <param name=”onerror” value=”onSilverlightError” />
    <param name=”background” value=”black” />
    <param Name=”initParams” value=”VideoSource=http://silverlight.services.live.com/60107/HD%20Future%20Markers/video.wmv,AutoPlay=false,EnableScrubbing=true,InitialVolume=1,PreviewImage=http://www.silverlight-blog.it/vid/HD_future_Thumb.jpg,LogoImage=http://www.silverlight-blog.it/vid/Logo.png,MarkersTimeView=5″ />
    <param name=”minRuntimeVersion” value=”2.0.31005.0″ />
    <param name=”autoUpgrade” value=”true” />
    <a href=”http://go.microsoft.com/fwlink/?LinkID=124807″ style=”text-decoration: none;”>
    <img src=”http://go.microsoft.com/fwlink/?LinkId=108181″ alt=”Get Microsoft Silverlight” style=”border-style: none”/>
    </a>
    </object>
    <iframe style=’visibility:hidden;height:0;width:0;border:0px’></iframe>
  4. Modificare i seguenti tags secondo le vostre esigenze:
  5. <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”500″ height=”330″>
    Rispettivamente larghezza ed altezza (in pixels) del video player (Si possono anche specificare delle percentuali: width=”100%” height=”80%”).
  6. <param name=”source” value=”ClientBin/MinoPlayer.xap“/>
    Il path dove è posizionato il file MinoPlayer.xap nel vostro sito
    Esempio: se caricate il file MinoPlayer.xap in una cartella come http://www.yoursite.com/folder/MinoPlayer.xap allora il tag andrà modificato in questo modo <param name=”source” value=”http://www.yoursite.com/folder/MinoPlayer.xap“/>
  7. <param name=”background” value=”black” />
    Rappresenta il colore di background del player
  8. <param Name=”initParams” value=”…parametri…“/>
    I Parametri sono delle coppie chiave=valore separate da virgola:
    VideoSource=.. url del video da visualizzare
    AutoPlay=.. true o false, attiva o disattiva l’autoplay del video [OPTIONAL]
    EnableScrubbing=.. true o false, attiva o disattiva la possibilità di spostare il video in avanti o indietro [OPTIONAL]
    InitialVolume=.. un valore numerico compreso tra 0 e 1 (ex. 0.4) che indica il volume iniziale del player (1=100% del volume) [OPTIONAL]
    PreviewImage=.. un url per l’immagine di preview del video[OPTIONAL]
    LogoImage=.. un url per l’immagine del Logo (il logo bianco “Silverlight-Blog.it” nel player sopra è una “Logo Image”) [OPTIONAL]
    MarkersTimeView=.. un intero che indica il numero di secondi da attendere prima che un marker scompaia (di default è 5 secondi). [OPTIONAL]


MinoPlayer, Silverlight Video Player

Date: venerdì giugno 13, 2008
Posted in: Controls, Downloads

English VersionEnglish Version
Ecco a voi un Player di Video sviluppato in silverlight

Get Microsoft Silverlight

Potete facilmente inserirlo all’interno del vostro sito web seguendo queste semplici istruzioni

  1. Scaricate il player da questo link, pesa solo 26Kb :-)
  2. Scompattatelo e copiate il file MinoPlayer.xap in una cartella del vostro sito web
  3. Aggiungere il seguente codice HTML nella pagina del vostro sito nel punto in cui volete venga posizionato il player:
    <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”500″ height=”330″>
    <param name=”source” value=”ClientBin/MinoPlayer.xap”/>
    <param name=”onerror” value=”onSilverlightError” />
    <param name=”background” value=”black” />
    <param Name=”initParams” value=”VideoSource=http://silverlight.services.live.com/60107/HD%20Future/video.wmv,AutoPlay=false,EnableScrubbing=true,InitialVolume=1,PreviewImage=http://www.silverlight-blog.it/vid/HD_future_Thumb.jpg,LogoImage=http://www.silverlight-blog.it/vid/Logo.png” />
    <param name=”minRuntimeVersion” value=”2.0.31005.0″ />
    <param name=”autoUpgrade” value=”true” />
    <a href=”http://go.microsoft.com/fwlink/?LinkID=124807″ style=”text-decoration: none;”>
    <img src=”http://go.microsoft.com/fwlink/?LinkId=108181″ alt=”Get Microsoft Silverlight” style=”border-style: none”/>
    </a>
    </object>
    <iframe style=’visibility:hidden;height:0;width:0;border:0px’></iframe>
  4. Modificare i seguenti tags secondo le vostre esigenze:
  5. <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”500″ height=”330″>
    Rispettivamente larghezza ed altezza (in pixels) del video player (Si possono anche specificare delle percentuali: width=”100%” height=”80%”).
  6. <param name=”source” value=”ClientBin/MinoPlayer.xap“/>
    Il path dove è posizionato il file MinoPlayer.xap nel vostro sito
    Esempio: se caricate il file MinoPlayer.xap in una cartella come http://www.yoursite.com/folder/MinoPlayer.xap allora il tag andrà modificato in questo modo <param name=”source” value=”http://www.yoursite.com/folder/MinoPlayer.xap“/>
  7. <param name=”background” value=”black” />
    Rappresenta il colore di background del player
  8. <param Name=”initParams” value=”…parametri…“/>
    I Parametri sono delle coppie chiave=valore separate da virgola:
    VideoSource=.. url del video da visualizzare
    AutoPlay=.. true o false, attiva o disattiva l’autoplay del video [OPTIONAL]
    EnableScrubbing=.. true o false, attiva o disattiva la possibilità di spostare il video in avanti o indietro [OPTIONAL]
    InitialVolume=.. un valore numerico compreso tra 0 e 1 (ex. 0.4) che indica il volume iniziale del player (1=100% del volume) [OPTIONAL]
    PreviewImage=.. un url per l’immagine di preview del video[OPTIONAL]
    LogoImage=.. un url per l’immagine del Logo (il logo bianco “Silverlight-Blog.it” nel player sopra è una “Logo Image”) [OPTIONAL]