Silverlight

Luka AbrusTechnology Specialist lukaa@microsoft.comMicrosoft Hrvatska http://lukaa.bloger.hr/

Sadržaj

Što je i kako radi Silverlight? Glavne prednosti Silverlighta Alati i izrada aplikacija Silverlight danas i sutra Video streaming

Što je Silverlight?

Tehnologija za izradu multimedijalnih sadržaja i bogatih interaktivnih aplikacija

Dodatak za web-preglednike, podržan na više platformi i više preglednika

Windows, Mac OS Internet Explorer, Firefox, Safari U razvoju: Linux, Nokia, Windows Mobile, Opera… 1.5+ milijuna instalacija dnevno

Silverlight 1.0 i Silverlight 2.0

Silverlight 1.0 Finalna verzija dostupna od rujna 2007. Veličina oko 1.3 MB Razvoj: programiranje u JavaScriptu, sučelje u XAML-u

Silverlight 2.0 Trenutno u Beta 1 verziji

Beta 2 = lipanj; Finalna verzija = poslije ljeta

Veličina oko 4.3 MB Razvoj: isto kao SL 1.0 + podrška za .NET

DEMO

Silverlight TV Silverlight

Advertising Silverlight Puzzle

Kako rade Silverlight aplikacije?

Izvršavaju se u pregledniku Neovisne o poslužitelju

Koriste poznate tehnologije XAML za opisivanje sučelja JavaScript za programiranje (1.0 i 2.0) .NET za programiranje (2.0)

Potpuna integracija u web-stranicu

XAML – eXtensible Application Markup Language

Deklarativni jezik – čisti XML Opisuje izgled i ponašanje Generiraju ga Microsoft Expression alati

+ Adobe Illustrator, Fireworks, Autodesk… Koristi ga Windows Presentation Foundation

Odvojenost sučelja od programskog koda

Suradnja developera i dizajnera

XAML primjeri (1/3) Pozicioniranje elemenata

<Canvas xmlns="..." xmlns:x="..." Background="Light Gray"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" /> <Canvas Canvas.Top=“50" Canvas.Left="50" Width="150" Height="100" Background="Orange"> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="150" Height="75" Fill="Red" /> </Canvas></Canvas>

<Canvas xmlns="..." xmlns:x="..." Background="Light Gray"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" /> <Canvas Canvas.Top=“50" Canvas.Left="50" Width="150" Height="100" Background="Orange"> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="150" Height="75" Fill="Red" /> </Canvas></Canvas>

XAML primjeri (2/3)

Vektorski oblici <Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path />

XAML primjeri (3/3)

Transformacije <RotateTransform /> <ScaleTransform /> <SkewTransform /> <TranslateTransform /> <MatrixTransform />

Silverlight 1.0 - Arhitektura

XML opis sučelja (XAML) Korištenje tekstualnih datoteka Odvojenost sučelja od koda

Programiranje u JavaScriptu Integracija s DOM-om Korištenje poznatih metoda, klasa, AJAX-a…

Silverlight 1.0 - Video

Video je običan element u XAML-u Rotacija, prozirnost, transformacije, preklapanje,

više simultanih video-zapisa… Implementiran industrijski standard – VC-1

Podrška za WMV, WMA, MP3 Besplatan Encoder SDK Integracija s Windows Media Serverom

Besplatan hosting video-zapisa (10 GB) http://silverlight.live.com/

Silverlight 1.0 - Razno

Rad s fontovima - TTF Uključite u projekt posebne TTF-ove

WPF model animacija Temeljen na vremenu (početak / kraj)

Downloader objekt Dohvaćanje eksternih elemenata (XAML, TTF…) Pakiranje u ZIP datoteke

AJAX kao funkcionalni pokretač

Alati za razvoj Silverlight 1.0 aplikacija

Expression Blend Verzija 2.0 ili novija Alat prvenstveno namijenjen dizajnerima za izradu

XAML-a Vaš omiljeni web-editor

Podrška za JavaScript, HTML Expression Web

Zapravo… Dovoljan je i Notepad

DEMO

Izrada Silverlight 1.0 aplikacije Animacija Eventi JavaScript XAML HTML VideoBrush

Silverlight 2.0 – programiranje

.NET programiranje Podskup .NET klasa Donosi funkcionalnosti kao što su…

LINQ, Generics, Threading, DataBinding Klase za dohvaćanje podataka

REST, SOAP/WS*, RSS, JSON, XML HTTP, Sockets API

… i mnoge druge za koje ima smisla u web-okruženju Prvi put .NET na Linuxu, Macu…

Silverlight 2.0 – Razne funkcionalnosti

Novosti u XAML-u Pozicioniranje elemenata (Grid, StackPanel) Korištenje stilova (slično HTML/CSS-u) Niz dostupnih kontrola

Izrada vlastitih, customizacija postojećih Tehnikalije

Potpuna dvosmjerna integracija s HTML-om i JavaScriptom Pristup JavaScript funkcijama iz .NET-a i obrnuto

Open File Dialog za pristup datotekama korisnika IsolatedStorage za spremanje podataka kod korisnika

Evolucija cookiea Deep Zoom tehnologija

Alati za razvoj Silverlight 2.0 aplikacija

Expression Blend Trenutno aktualna verzija 2.5 March Preview Alat prvenstveno namijenjen dizajnerima

Visual Studio 2008 + Silverlight Tools Beta 1 for VS 2008 Alat prvenstveno namijenjen programerima

Međusobno kompatibilni i neovisni Omogućavaju rad na istim projektima

DEMO

Kontrole Deep Zoom

tehnologija

DesktopDesktop

MediaMedia& RIA& RIA

WebWeb

Microsoftove razvojne tehnologije

Linux

JSP / PHPColdFusio

n

LAMP

AJAX Libraries

“Apollo”

Mac OS

Flash &Flex

Quicktime& drugi

Microsoft

Drugi

Server Vista

Video – načini dostave

Progressive Download Za: Datoteka na HTTP serveru, malo korištenje resursa,

lako upravljanje, rad preko SSL-a, vatrozida, cache servisa, proxya…

Protiv: Nema live broadcasta, ne podržava napredno “premotavanje” naprijed i natrag, dugo bufferiranje kad je bitrate video zapisa veći od brzine veze

Streaming Za: Mnogo naprednih mogućnosti, optimizacija

bandwidtha, live broadcasting Protiv: Posebna infrastruktura, nemoguće dostaviti sadržaj

kodiran na većem bitrateu nego što je brzina veze

Progressive Streaming - danas

IIS7 Media Pack

Sustav za dostavu multimedijalnog sadržaja na Windows Serveru 2008 i IIS-u 7 Bit Rate Throttling, Web Server Playlist Poboljšanja za progressive download model Besplatno preuzimanje - www.iis.net

Progressive Download - sutra

Resursi

http://silverlight.net

Microsoft Expression alati (180-day trials)http://www.microsoft.com/Expresssion

SDKhttp://msdn2.microsoft.com/bb188266.aspx

DEMO

Popfly Mashups Popfly Game

Creator