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.
Aggiungere questa applicazione alle vostre pagine web è piuttosto semplice, basta seguire i seguenti passi:
- Scaricare il PhotoSlider da questo link. Potete anche scaricare l’esempio completo visibile sopra da questo link.
- Scompattate l’archivio zip scaricato in una cartella e copiate il file PhotoSlider.xap in una cartella del vostro sito web.
- Aggiungete in una pagina web il seguente codice, nel punto i cui vogliate che appaia il PhotoSlider br>
<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>
- Modificate i seguenti tags secondo le vostre esigenze:
- <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%”). - <param name=”source” value=”/ontheroad/photoslider/PhotoSlider.xap“/>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<param name=”source” value=”http://www.yoursite.com/folder/PhotoSlider.xap“/> - <param name=”background” value=”white” />Rappresenta il colore di background del PhotoSlider durante il primo caricamento
- <param Name=”initParams” value=”TextLoading=Caricamento Immagini…,UrlXmlSlides=blog_images.xml,TimeToSlide=5″ />
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.
- <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”400″ height=”270″>
- 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).
- Infine caricate tutte il file XML e le immagini sul vostro sito.
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:
- TreeView
- AutoCompleteBox
- DockPanel
- WraPanel
- Label
- Expander
- HeaderedItemControl
- HeaderedContentControl
- NumericUpDown
- ViewBox
- ButtonSpinner
- ImplicitStyleManager
- Charts (Pie, Bar, Column, Scatter e Line)
- Vari temi
MinoPlayer Ver. 1.2, Silverlight Video Player, nuova versione
Date: mercoledì giugno 25, 2008Posted in: Controls, Downloads
English Version
Ecco a voi la nuova versione 1.2 di MinoPlayer, un Player di Video sviluppato in 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
- Scaricate il player da questo link, pesa solo 26Kb :-)
- Scompattatelo e copiate il file MinoPlayer_Ver1_2.xap in una cartella del vostro sito web
- 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> - Modificare i seguenti tags secondo le vostre esigenze:
- <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%”). - <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“/> - <param name=”background” value=”black” />
Rappresenta il colore di background del player - <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]
English Version
Ecco a voi un Player di Video sviluppato in silverlight
Potete facilmente inserirlo all’interno del vostro sito web seguendo queste semplici istruzioni
- Scaricate il player da questo link, pesa solo 26Kb :-)
- Scompattatelo e copiate il file MinoPlayer.xap in una cartella del vostro sito web
- 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> - Modificare i seguenti tags secondo le vostre esigenze:
- <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%”). - <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“/> - <param name=”background” value=”black” />
Rappresenta il colore di background del player - <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]
