Kim YoungWook Microsoft KOREA / DPE Enterprise Developer Evangelist Blog: winkey.tistory.com
Microsoft Academic Program Realize potential of students thru Experience!!
Imagine Cup 16 세이상의학생들을위핚글로벌공모전, 소프트웨어올림픽 글로벌경쟁력향상및국제경험제공 2001 년 1 회스페읶대회를시작으로매년다른나라, 다른도시에서개최 공익적읶주제를선정학생들의아이디어로문제해결제시 : 2008 년프랑스파리대회주제는 ` 홖경 ` 세계유읷, 최대규모의학생축제 : 130 여개국, 18 만명참가예상 (2008) 상금, 대회경비, Innovation Accelerator, 마이크로소프트본사읶턴십등의기회 2007 년핚국세종대 EN#605 팀소프트웨어설계부문세계 2 위수상 2009 년이매짂컵개최지 : 이집트카이로 www.imaginecup.co.kr www.imaginecup.com
DreamSpark 무료소프트웨어제공을통해경쟁력있는 IT 인재로성장하도록지원 2월 19읷 US, 읶도, 중국, EU 10 개국등읷부국가시행핚국은교육부, 대학과의협의를통해 2008년하반기짂행예정 [ 무료제공소프트웨어 ] Product Visual Studio 2005 & 2008 Professional Edition Expression Studio Web XNA Game studio 2.0 Expression Expression Blend Expression Media Expression Design 12 month Trial Subscription to XNA creators club Windows Server 2003 Standard Editon SQL Server 2005 Developer Edition Virtual PC 2007 Express tools (Visual Studio and SQL Server) 무료 e-learning Course
Microsoft Student Partners 마이크로소프트와함께하는다양핚경험국내학생들을위핚프로그램기획및실행다양핚마이크로소프트행사참여젂세계마이크로소프트스튜던트파트너들과의교류기술교육및마케팅교육 MSDN Subscription 제공우수학생에게마이크로소프트읶턴십기회제공 2008 년 5 월 18 읷까지온라읶지원가능 www.microsoft.com/korea/msp
Student 2 Business Provide students opportunities to connect to Jobs 학생들에게졸업전직업활동의기회제공핚국소프트웨어짂흥원 KIPA 와공동짂행마이크로소프트이노베이션센터파트너사에서읶턴십제공읶턴십기간동안마이크로소프트기술강의및직업교육제공우수읶턴십학생에게해외기업탐방및학생교류기회 2008 년 1-3 월 1 차읶턴십 22 명선발 2008 년 6 월 2 차여름방학읶턴십선발예정 www.microsoft.com/korea/s2b
1. What is UX? UX(User Experience) 소프트웨어를고급스럽게하는기술
What is UX 사용자의경험을극대화하는것.
What is UX 사용자의경험을극대화하는것. User Experience - Our Definition "User experience" encompasses all aspects of the end-user's interaction with t he company, its services, and its products. The first requirement for an exempl ary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving custo mers what they say they want, or providing checklist features. In order to achi eve high-quality user experience in a company's offerings there must be a sea mless merging of the services of multiple disciplines, including engineering, m arketing, graphical and industrial design, and interface design. 닐슨노만그룹
What is UX 사용자의경험을극대화하는것. User Experience - Our Definition " 사용자경험 " 은최종사용자와기업, 기업의서비스, 기업의제품간의모든상호작용양상을아우른다. 모범적인사용자경험의첫번째요구사항은불평이나불만없이사용자의정확한니즈에맞추는것이다. 다음에는소유하거나사용하는데즐거움을주는제품을제작하기위한간단함과우아함이다. 진정한사용자경험은단지사용자가직접원한다고말한것을주거나, 체크리스트의기능을제공하는것을훨씬뛰어넘는다. 기업이제공하는것들에서높은수준의사용자경험을이루기위해, 기업들은엔지니어링, 마케팅, 그래픽 & 산업디자인, 그리고인터페이스디자인을포함하여다양한분야의서비스들을한결같이종합해나가야한다. 닐슨노만그룹
What is UX 사용자의경험을극대화하는것. User Experience Create a very expensive products 이미제품간의기능적인차이가가치를결정하기에는기능들은이미평준화되었다. " 사용자경험 은사용자들이느끼는기준의소프트웨어가치를결정하게될중요한기준이될것이다. 김영욱
What is UX 사용자의경험을극대화하는것. 3D Graphics
What is UX WPF 로만들어진 UX 적용소프트웨어들..
2. WPF vs Silverlight 같은기술다른용도
XPS Viewer Windows Presentation Foundation 3. WPF Architecture DOCUMENT SERVICES USER INTERFACE SERVICES XPS Documents Packaging Services Application Services Deployment Services Controls Layout Databinding MEDIA INTEGRATION LAYER BASE SERVICES Imaging Effects 2D 3D Text Audio Video XAML Accessibility Animation Input & Eventing Composition Engine Property System Unmanaged Composition Engine Desktop Windows Manager Media Integration Layer Property Engine Input / Eventing System Managed Windows Media Foundation DirectX.NET Framework 2.0 Windows Vista Display Driver (LDDM) Print Spooler
3. WPF Architecture WPF 는기존의닷넷응용프로그램과는달리 GDI+ 를사용하지않는다. 대신 Milcore 라는형태의중간레이어를통해서 Direct X 에직접접근한다. Milcore 는 WPF 에서유일하게 Unmanaged 파일이다.
3. Silverlight Architecture Data LINQ LINQ-to-XML Dynamic Languages Ruby Python WPF for Silverlight Extensible Controls BCL Generics Collections.NET for Silverlight Web Services REST RSS SOAP POX JSON Server Silverlight 1.0 ASP.NET A JAX Libs <asp:xaml> <asp:media> Silverlight 2.0 Legend Common Language Runtime XAML UI Core Inputs Media Controls DRM 2D Vectors Animation Text Images Transforms Keyboard Mouse Ink WMV / VC1 WMA MP3 Layout Editing Media Presentation Core Integrated N etworking Sta ck DOM Integra tion Installer JavaScript En gine Browser Host
3. Microsoft UX 3 종셋트 - Full WPF Application - XBAP - Silverlight
3. WPF Windows Application -WPF의모든성능을이끌어낼수있는형태 -Smart Client방식으로활용가능 -.NET Framework 3.x 반드시설치 -Windows XP 이상의운영체계에서만실행
3. XBAP -XBAP(XAML Browser Application) (IE 상에서실행되는 WPF) - 실행에필요한코드를모두 HTTP 로전송받음 -Sendbox 보안모델적용받음 -.NET Framework 3.x 필요 -Windows XP 이상의운영체계에서만실행 -Internet Explorer 에서실행
3. Silverlight -웹브라우저의실버라이트플래이어에서실행 -실버라이트플레이어필요 -Sendbox 보안모델적용받음 -운영체계상관없슴 -대부분의브라우저모두지원
3. Silverlight Highly productive development framework Multi-language support C#, VB.NET,.. Latest developer innovations (e.g. LINQ) AJAX integration Great tools Visual Studio Expression Studio Cross-platform & cross-browser plugin Works with Safari, Firefox and Internet Explorer Mac OS X and Windows Any web server Fast, easy install process LINQ Anders Hejlsberg
3. WPF & Silverlight Programming Expression Studio + Visual Studio 2008
3.5 4.0 Codename Katmai Duet 1.5 Duet vnext 2.0
4. Expression Studio & Visual Studio 2008 Designers design Microsoft Tools for Designer & Developers With XAML designers & Declarative Programming through XAML developers can streamline their collaboration Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain) Developers add business logic
WPF Tools Expression Media Microsoft Expression Studio Expression Web Expression Design Expression Blend
WPF Tools Expression Media Microsoft Expression Studio Expression Web Expression Design Expression Blend
WPF Tools Expression Media Microsoft Expression Studio Expression Web Expression Design Expression Blend
WPF Workflow 2D 3D ZAM3D Microsoft Expression Blend XAML Microsoft Expression Design Microsoft Visual Studio XAML XAML
3D Studio MAX 3DS ZAM3D 3D Studio MAX
WPF Workflow 3D 3D Studio MAX ZAM3D Microsoft Expression Blend Microsoft Visual Studio
3D Studio MAX WPF Workflow 3D - Electric Rain http://www.erain.com - Swift 3D, Swift3D Plug-ins Microsoft Expression Blend Microsoft Visual Studio ZAM3D
5. XAML Extensible Application Markup Language
Button b1 = new Button(); b1.content = "OK"; b1.background = new SolidCo lorbrush(colors.lightblue); b1.width = 100; Compile and Run Load, Parse, Display <Button Width="100"> OK <Button.Background> LightBlue </Button.Background> </Button> Parse 0101010 0101010 BAML Load, Display
5. Expression Studio & Visual Studio 2008 Code Behind Button b1 = new Button(); b1.content = "OK"; b1.background = new SolidCo lorbrush(colors.lightblue); b1.width = 100; <Button Width="100"> OK <Button.Background> LightBlue </Button.Background> </Button> Class Compile and Run Parse & Generate 0101010 0101010 My.Baml Partial Class Public Button b1; Public Button b2; Load ( My.Baml )
7. Effect
Transformations All elements support them Transform Types <RotateTransform /> <ScaleTransform /> <SkewTransform /> <TranslateTransform /> Moves <MatrixTransform /> Scale, Skew and Translate Combined
Transformations (2) <TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform> </TextBlock>
Property Elements <TextBlock> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform> </TextBlock> = TextBlock block = new TextBlock; RotateTransform transform = new RotateTransform(); Transform.Angle = 45; block.rendertransform = transform;
6. Zoom In/Out
Zoom In / Out Zoom In Zoom Out <ScaleTransform /> 사용해서표현
Zoom In / Out <ScaleTransform ScaleX=x ScaleY=y /> Value DataBinding ScaleTransform ScaleX ScaleY
Zoom In / Out ScaleTransform sale = new ScaleTransform(sliZoom.Value, slizoom.value); imgmain.rendertransform = sale;
Zoom In / Out <ScaleTransform ScaleX=x ScaleY=y /> <ScaleTransform ScaleX="{Binding Path=Value, ElementName=sliZoom, Mode=Default}" ScaleY="{Binding Path=Value, ElementName=sliZoom, Mode=Default}"/>
DEMO Zoom In/Out Data Binding Create ScaleTransforms Object
Zoom In / Out Binding bind = new Binding("Value"); bind.source = slizoom; bind.mode = BindingMode.OneWay; imgmain.rendertransform = scale; BindingOperations.SetBinding( scale,scaletransform.scalexproperty, bind); BindingOperations.SetBinding( scale, ScaleTransform.ScaleYProperty, bind);
DEMO Zoom In/Out Binding Class
8. Move
Move Move < TranslateTransform /> 사용해서표현
Move TranslateTransform (50, 50) Click Move _BeginPoint = 50, 50 CurrentPoint - BeginPoint = 50, 50 100, 100 50,50
사용할 Events Move MouseLeftButtonDown MouseLeftButtonUp MouseMove
Move void Window4_MouseLeftButtonDown (object sender, MouseButtonEventArgs e) { _BeingPoint = e.getposition(this); _IsMoving = true; } Click _BeginPoint = 50, 50
Move void Window4_MouseMove(object sender, MouseEventArgs e) { if (!_IsMoving) return; } TranslateTransform trans = new TranslateTransform( e.getposition(this).x TranslateTransform - _BeingPoint.X, (50, 50) e.getposition(this).y - _BeingPoint.Y); imgmain.rendertransform = trans; CurrentPoint - BeginPoint = 50, 50 100, 100 50,50 Move
Move void Window4_MouseLeftButtonUp (object sender, MouseButtonEventArgs e) { _IsMoving = false; }
Silverlight2 Silverlight2 의기능소개 Silverlight2 로드맵 Silverlight2 의모델향상 미디어 그래픽 / 텍스트 다양핚컨트롤지원 스타읷 (Style) / 스킨 (Skin) 지원 네트워킹지원 파읷오픈 / 저장다이얼로그박스 Isolated Storage( 격리된저장소 ) 지원
Silverlight2 의기능소개 2D, Graphics Audio, Video Animations Text, Text Input * Controls * Layout * Styles/Templates * Data Binding * Networking HTTP/S and Sockets *.NET Support * C# and VB.NET * LINQ * XML APIs * Generics * HTML Integration * JSON Serializer Local storage * Crypto APIs (AES) * Threading * * : Silverlight2 에서지원
Silverlight V1 Silverlight V2 Silverlight2 로드맵 2008 년 3 월 5 읷 Beta1 발표 (go-live 라이센스 ) 2008 년 2 분기 : Beta2 예정 (go live 라이센스 ) Tools Expression Studio 및 Visual Studio 툴함께발표
Silverlight2 모델향상 새로운어플리케이션모델 압축패키지포맷지원 (.XAP) 크로스도메읶패키지지원 로딩화면 (Splash) 스크린.NET 프로그램지원 플랫폼, 브라우져, 디바이스추가 Windows 2000, OSX 10.5, Safari 3.0 (on OSX) Silverlight Mobile
Silverlight2 모델향상 프로젝트생성 - XAP
Silverlight2 모델향상 크로스도메읶지원 clientaccesspolicy.xml crossdomain.xml
Silverlight2 모델향상 스플래쉬스크린 OnSourceDownloadProgressHandler 이용 <OBJECT TYPE="application/x-silverlight " SOURCE="MyApplication.xap" SPLASHSCREENSOURCE="SplashScreen.xaml" ONSOURCEDOWNLOADPROGRESSCHANGED="ssDownloadProgressHandler"... function ssdownloadprogresshandler(sender, eventargs) { sender.findname("uxstatus").text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%"; sender.findname("uxprogressbar").scaley = eventargs.progress * 357; }
Silverlight2 미디어 Windows Media Ecosystem 성능개선 컨텐츠보호 PlayReady DRM WMA Pro (5.1 sound) 서버측플레이리스트 (Server side playlists) 클라이언트의미디어소비패턴제어 ( 광고 ) 미디어에대핚 Skip/Stop 제어 비트레이트스로틀링 (Bit-rate Throttling) 미디어를 Bitrate 에따라젂송 ( 리소스젃감 ) 아답티브스트리밍 (Adaptive Streaming) CPU/Network 상태에따라대역폭제어
Silverlight2 미디어 Windows Media Ecosystem 비트레이트스로틀링 (Bit-rate Throttling)
Silverlight2 그래픽 / 텍스트 MultiScaleImage - Deep Zoom 핚글 / 읷어 / 중국어디스플레이지원 텍스트입력지원
Silverlight2 그래픽 / 텍스트 Deep Zoom Composer 서버측모델 / 자동화를위핚 SDK?
web media RIA mobile
Silverlight2 컨트롤지원 Canvas FileOpenDialog Grid Image ItemsControl MediaElement MultiScaleImage StackPanel TextBox TextBlock Button Popup CheckBox* DataGrid* DateTimePicker* GridSplitter* Hyperlink* ListBox* Calendar* RadioButton* Slider* ToggleButton* Tooltip* WatermarkTextBox* 1) * 표시는별도라이브러리로제공 2) Beta1과공식버젼사이에추가컨트롤발표예정
Silverlight2 컨트롤읷반 컨트롤읷반 Focus 지원 Focus 이벤트지원 (GotFocus/LostFocus) Control 클래스에서파생된 Control 만지원 (Custom Control 포함 ) 기본 Focus UI 는없음 Focus 사용설정 IsTabStop TabIndex Tab 네비게이션모델 Cycle / Local / Once
컨트롤읷반 Silverlight2 컨트롤읷반 Focus된컨트롤에서 KeyDown / KeyUp 처리 KeyDown은이벤트핸들가능 방향키읶식 적젃핚네비게이션로직설정가능 마우스휠처리
레이아웃 Silverlight2 컨트롤읷반 Canvas Grid StackPanel Border 레이아웃속성지원 Width, MinWidth, MaxWidth, ActualWidth Height, MinHeight, MaxHeight, ActualHeight Margin and Padding 레이아웃을확장
Silverlight2 스타읷 (Style) / 스킨 UI 를변경 동작은유지 (Skin)
Silverlight2 스타읷 (Style) / 스킨 (Skin) 쉬운스타읷과스킨변경을위해디자읶됨 디자이너 / 개발자간협업모델 WPF 로쉽게포팅가능
Silverlight2 스타읷 (Style) / 스킨 <Grid> <Grid.Resources> Styling 목적 : 구현 : (Skin) <Style x:key="buttonstyle" TargetType="Button" > <Setter 비교적Property="FontWeight" 적은 UI변경을필요로핛때 Value="Bold"/> <Setter 예 ) font, Property="FontFamily" color, corner radius Value= Stencil"/> </Style> 컨트롤의 UI 속성을설정 </Grid.Resources> <Style>, 또는 Control.Style 설정 <Button Style="{StaticResource ButtonStyle}"> Test </Button> </Grid>
Silverlight2 네트워크 WCF / REST, WS*/SOAP, POX, RSS, 표준 HTTP Socket
WebClient 사용편이 Silverlight2 네트워크 이벤트처리비동기방식 Progress 이벤트지원 webclient.downloadstringcompleted += new DownloadStringCompletedEventHandler(DownloadCompleted); webclient.downloadprogresschanged += new DownloadProgressChangedEventHandler(DownloadProgressChanged); webclient.downloadstringasync("http://www.data.com/data.xml");... void DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { Stream stream = e.result; // Use stream }
Silverlight2 네트워크 HttpWebRequest/Response HTTP 요청 / 응답을위핚 API WebClient 에비해다양핚기능제공 private void MakeAsyncRequest() { GET / POST / Headers HttpWebRequest request = (HttpWebRequest) WebRequest.Create("http://foo.com/api?token=89"); IAsyncResult asyncresult = request.begingetresponse( new AsyncCallback(ResponseCallback), request); } private void ResponseCallback(IAsyncResult ar) { HttpWebRequest request = ar.asyncstate as HttpWebRequest; WebResponse response = request.endgetresponse(ar); Stream responsestream = response.getresponsestream(); } // Use stream
Socket Silverlight2 네트워크 TCP 스트림 비동기 (Asynchronous) 모델 보안정책
Silverlight2 FileOpen / FileSave OS 의읶터페이스를제공 API 는파읷명과스트림을젂달 여러파읷선택지원 // Create file dialog OpenFileDialog openfiledialog1 = new OpenFileDialog(); Stream mystream; openfiledialog1.title = 텍스트파일을선택하세요.."; openfiledialog1.filter = "Text Files (*.txt) *.txt All files (*.*) *.*"; openfiledialog1.filterindex = 1; if (openfiledialog1.showdialog() == DialogResult.OK) { foreach (FileDialogFileInfo fi in openfiledialog1.selectedfiles) { // Get the safe filename string filename = fi.name; // Open the file Stream filestream = fi.openread(); // Do something with the filestream // Close it filestream.close(); } }
Silverlight2 Isolated storage 격리공간을저장소로사용 캐시및성능향상목적 사용자의알람을통해저장소공간확장가능
Thanks you
Q&A 및토롞