1 / 17

Technológiai áttekintés

Technológiai áttekintés. Bátorfi Zsolt zbatorfi@microsoft.com | http://batorfizsolt.spaces.live.com Fejlesztési és Platform Üzletág Microsoft Magyarország. Prezentációs technológiák. DirectX. Flash. HTML (CSS). Ajax. WPF XBAP. WPF. OpenGL. Silverlight. Professzionális grafikus

conor
Download Presentation

Technológiai áttekintés

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Technológiai áttekintés Bátorfi Zsolt zbatorfi@microsoft.com | http://batorfizsolt.spaces.live.com Fejlesztési és Platform Üzletág Microsoft Magyarország

  2. Prezentációs technológiák DirectX Flash HTML (CSS) Ajax WPF XBAP WPF OpenGL Silverlight Professzionális grafikus futtató környezet Széles körben elérhető Trend’07

  3. A következő lépés az interakció felé

  4. http://silverlight.net/samples/1.0/Page-Turn/default.htmlhttp://silverlight.net/samples/1.0/Grand-Piano/default.htmlhttp://silverlight.net/fox/http://silverlight.net/samples/1.0/Page-Turn/default.htmlhttp://silverlight.net/samples/1.0/Grand-Piano/default.htmlhttp://silverlight.net/fox/

  5. Architektúra • Plug-in: ~1.5 MB • Fullscreen támogatás • Sync/Async downloader komponens (ala’ XMLHttpRequest) • Dinamikus DOM manipuláció

  6. XAML: az új interfészleíró nyelv • XAML = XML Application Markup Language • A vizuális „fa” leírása • Bármely alkalmazás (pl. webszerver) előállíthatja • Expression Design export támogatás • Dinamikus DOM építés (createFromXaml) • Minden elem azonosítható • {x:Name=„objNév”} • var myPath = Canvas.findName(„objNév”) • Input kezelés minden elemre • Egér mozgás (pl. MouseEnter, MouseLeave) • Billentyűzet (KeyDown, KeyUp) • <Rectangle ... MouseLeftButtonDown=„javascript: myClickHander” />

  7. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Loaded=„javascript:canvasOnLoaded”> <Rectangle {x:Name=„rect01”}Width="100" Height="100> <Rectangle.Fill> <SolidColorBrush /> </Rectangle.Fill> </Rectangle> <Path Stroke="Black" Fill="Gray" Canvas.Left=„10” Canvas.Top=„10” Data="M 10,100 C 10,300 300,-200 300,100" /> </Canvas>

  8. Szolgáltatások #1: vektorgrafika • Canvas • Felbontás független vászon • Vektor alakzatok 2D-s felülete • Egymásba ágyazható • Vektoros objektumok • Ellipse • Rectangle • Line • Polygon • Path (simple/quadratic Bezier) • Vonal és kitöltés • Solid, Gradient, Image • Átlátszóság • Opacity Mask • Transzformációk • Rotate, Translate, Skew, Scale • Kivágás <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="200" Background="LimeGreen"> <Ellipse Canvas.Left="30" Canvas.Top="30" Height="200” Width="200" Stroke="Black„ StrokeThickness="10" Fill="SlateBlue" /> <Canvas> ... </Canvas> </Canvas> <Canvas xmlns=http://schemas.microsoft.com/client/2007 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/> <Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5" Stroke="Black„ StrokeThickness="10" Fill="SlateBlue"/> <Line X1="280" Y1="10" X2="10" Y2="280" Stroke="black" StrokeThickness="5"/> </Canvas> <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z" Stroke="Black" Fill="SlateBlue" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 10,100 C 10,300 300,-200 250,100z" Stroke="Red" Fill="Orange" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 0,200 L100,200 50,50z" Stroke="Black" Fill="Gray" Canvas.Left="150" Canvas.Top="70" /> </Canvas> <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="1,0"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="30„ Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"> <Rectangle.OpacityMask> <LinearGradientBrush> <GradientStop Offset="0.25" Color="#00000000"/> <GradientStop Offset="1" Color="#FF000000"/> </LinearGradientBrush> </Rectangle.OpacityMask> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130" Fill="Green"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="45"/> <ScaleTransform ScaleX=".5" ScaleY="1.2"/> <SkewTransform AngleX="30"/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle>

  9. Szolgáltatások #2: média • WMV/WMA/MP3 lejátszás 1.5 MB-ban... • Progresszív letöltés • Streaming • DRM! • Tulajdonságok • Width/Height, Volume, IsMuted, Position • Események • MediaOpened/MediaEnded • DownloadProgressChanged • BufferingProgressChanged • Vizuális testreszabás • Egyedi alakzat (clip geometry) • Átfedés • Átlátszóság (Opacity/Mask) • Kifeszítés (Stretch) • Animáció <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300„ CurrentStateChanged="javascript:state_changed" />

  10. Szolgáltatások #3: animáció • Tulajdonság szintű • Időzítés alapú • Duration=„1:30:5.5” • Double/Point/ColorAnimation • AutoReverse • RepeatBehavior • Típusok • From/To/By • <Type>AnimationUsingKeyframes • Nem lineáris animáció: Spline<Type>KeyFrame • Triggerekre indulnak

  11. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Rectangle x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0" Duration="0:0:5" FillBehavior="Stop" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> </Canvas>

  12. Silverlight 1.1 architektúra HTML DOMIntegration Framework Browser Host MS AJAX Library Media DRM Inputs Controls Integrated Networking Stack Media Editing Keyboard WMA MP3 Mouse Ink VC1 Layout .NET for Silverlight DLR BCL Data WPF UI Core Vector Text Extensible Controls CLR Execution Engine Generics Ruby Python Collections LINQ XLINQ Animation Images Application Services Networking XAML REST POX Presentation Core Legend Legend RSS JSON V1.1 V1.0 Installer

  13. http://silverlight.net/samples/1.1/chess/run/default.htmlhttp://silverlight.net/samples/1.1/SilverlightAirlines/Run/default.htmlhttp://silverlight.net/samples/1.1/chess/run/default.htmlhttp://silverlight.net/samples/1.1/SilverlightAirlines/Run/default.html

  14. Whether you are designing rich standards-based websites, ultimate experiences on the desktop, or managing digital assets and content, Expression professional design tools give you the flexibility and freedom to bring your vision to reality. The professional Webdesign tool The professional Interactive design tool The professional Graphicdesign tool The professionalAsset Managementtool

  15. Silverlightroadmap

  16. Seadragon

  17. További információk • www.silverlight.net /tematikus oldal/ • silverlight.live.com /streaming szolgáltatás/ • channel9.msdn.com/tags/Silverlight /videók/ • channel9.msdn.com/Showforum.aspx?forumid=38&tagid=209 /oktatóanyagok/

More Related