Embed Size (px)
Citation preview
Kim YoungWookMicrosoft KOREA / DPEEnterprise Developer EvangelistBlog: 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 Expression Web
Expression BlendExpression MediaExpression Design
XNA Game studio 2.0
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 BusinessProvide 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 the company, its services, and its products. The first requirement for an exemplary 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 customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, 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 UXWPF로 만들어진 UX적용 소프트웨어들..
2. WPF vs Silverlight같은 기술 다른 용도
Property
Engine
Input /
Eventing
System
.NET Framework 2.0
Desktop Windows Manager
Media Integration Layer
DirectX
Windows Vista Display Driver (LDDM)
Windows Media
Foundation
Composition
Engine
Print Spooler
ManagedUnmanaged
Application
Services
Deployment
Services
Databinding
USER INTERFACE SERVICES
XAML
Accessibility
Property System
Input & Eventing
BASE SERVICES
DOCUMENT SERVICES
Packaging Services
XPS Documents
Animation
2D
3D
AudioImaging
Text
VideoEffects
Composition Engine
MEDIA INTEGRATION LAYER
Controls
Layout
Win
dow
s P
rese
nta
tio
n F
ou
nd
atio
n
XP
S V
iew
er
3. WPF Architecture
• WPF는 기존의 닷넷 응용프로그램과는달리 GDI+를 사용하지 않는다. 대신 Milcore라는 형태의 중간 레이어를통해서 Direct X에 직접 접근한다.
• Milcore는 WPF에서 유일하게Unmanaged 파일이다.
3. WPF Architecture
XAML
Browser Host
Integrated Networking Sta
ck
DOM Integration
InstallerJavaScript En
gine
Presentation Core
.NET for Silverlight
Inputs
Keyboard
MouseInk
Media
WMV / VC1
WMAMP3
Controls
Layout
Editing
UI Core
2D Vectors
AnimationText
Images
Transforms
DRM
Media
Dynamic Languages
Ruby Python
BCL
Generics Collections
Web Services
RESTRSS
SOAP
POXJSON
Data
LINQ LINQ-to-XML
WPF for Silverlight
Extensible Controls
Common Language Runtime
ASP.NET AJAX Libs
<asp:xaml>
<asp:media>
Server Silverlight 1.0
Silverlight 2.0
Legend
3. Silverlight Architecture
- Full WPF Application
- XBAP
- Silverlight
3. Microsoft UX 3종 셋트
-WPF의 모든 성능을 이끌어 낼 수 있는 형태
-Smart Client방식으로 활용 가능
-.NET Framework 3.x 반드시 설치
-Windows XP 이상의 운영체계에서만 실행
3. WPF Windows Application
-XBAP(XAML Browser Application)(IE상에서 실행되는 WPF)
-실행에 필요한 코드를 모두 HTTP로 전송받음
-Sendbox 보안모델 적용받음
-.NET Framework 3.x 필요
-Windows XP 이상의 운영체계에서만 실행
-Internet Explorer에서 실행
3. XBAP
-웹 브라우저의 실버라이트 플래이어에서 실행
-실버라이트 플레이어 필요
-Sendbox 보안모델 적용받음
-운영체계 상관없슴
-대부분의 브라우저 모두 지원
3. Silverlight
C#, VB.NET, ….. • Highly productive development framework
– Multi-language support
– 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
LINQAnders Hejlsberg
3. Silverlight
3. WPF & SilverlightProgramming
Expression Studio + Visual Studio 2008
• Microsoft Tools for Designer &
Developers
• Declarative Programming through
XAML
• Third Party Tools (e.g. Aurora by
Mobiform, ZAM 3D by Electric Rain)Designers design
With XAML designers &
developers can streamline their
collaboration
Developers add business logic
4. Expression Studio& Visual Studio 2008
WPF Tools
Expression Design Expression Blend
Expression Media
Expression Web
Microsoft Expression Studio
WPF Tools
Expression Design Expression Blend
Expression Media
Expression Web
Microsoft Expression Studio
WPF Tools
Expression Design Expression Blend
Expression Media
Expression Web
Microsoft Expression Studio
WPF Workflow
Microsoft ExpressionDesign
Microsoft ExpressionBlend
Microsoft Visual Studio
2DZAM3D
3DXAML
XAML
XAML
3D Studio MAX
ZAM3D3DS
3D Studio MAX
WPF Workflow
ZAM3D
3D Studio MAXMicrosoft ExpressionBlend
Microsoft Visual Studio
3D
WPF Workflow
ZAM3D
3D Studio MAXMicrosoft ExpressionBlend
Microsoft Visual Studio
3D- Electric Rainhttp://www.erain.com
- Swift 3D, Swift3D Plug-ins
5. XAMLExtensible Application Markup
Language
Button b1 = new Button();
b1.Content = "OK";
b1.Background = new SolidCo
lorBrush(Colors.LightBlue);
b1.Width = 100;
Compile and Run
<Button Width="100"> OK
<Button.Background>
LightBlue
</Button.Background>
</Button>
Load, Parse, Display
01010100101010
BAMLParse Load, Display
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>
„Code Behind‟
Class
Partial ClassPublic Button b1;Public Button b2;
Load (“My.Baml”)
01010100101010
My.BamlParse & Generate
Compile and Run
5. Expression Studio& Visual Studio 2008
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 / OutZoom In
Zoom Out
<ScaleTransform /> 사용해서 표현
Zoom In / Out<ScaleTransform ScaleX=x ScaleY=y />
Value
ScaleTransform
ScaleX
ScaleY
DataBinding
Zoom In / OutScaleTransform sale =
new ScaleTransform(sliZoom.Value, sliZoom.Value);imgMain.RenderTransform = sale;
Zoom In / Out<ScaleTransform ScaleX=x ScaleY=y />
<ScaleTransformScaleX="{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 / OutBinding 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/OutBinding Class
8. Move
MoveMove
< TranslateTransform /> 사용해서 표현
Move
TranslateTransform (50, 50)
Click
_BeginPoint = 50, 50
Move
CurrentPoint - BeginPoint = 50, 50100, 100 50,50
Move사용할 Events
MouseLeftButtonDownMouseLeftButtonUpMouseMove
Movevoid Window4_MouseLeftButtonDown
(object sender, MouseButtonEventArgs e){
_BeingPoint = e.GetPosition(this);_IsMoving = true;
}
Click
_BeginPoint = 50, 50
Movevoid Window4_MouseMove(object sender, MouseEventArgs e){
if (!_IsMoving)return;
TranslateTransform trans = new TranslateTransform(e.GetPosition(this).X - _BeingPoint.X,e.GetPosition(this).Y - _BeingPoint.Y);
imgMain.RenderTransform = trans;}
Move
CurrentPoint - BeginPoint = 50, 50100, 100 50,50
TranslateTransform (50, 50)
Movevoid 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에서 지원
Silverlight2 로드맵• Silverlight V1
• Silverlight V2
– 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) / 스킨(Skin)
• UI를 변경
• 동작은 유지
Silverlight2 스타읷(Style) / 스킨(Skin)
• 쉬운 스타읷과 스킨 변경을 위해 디자읶됨
• 디자이너 / 개발자간 협업 모델
• WPF로 쉽게 포팅 가능
Silverlight2 스타읷(Style) / 스킨(Skin)
• Styling
– 목적:
• 비교적 적은 UI변경을 필요로 핛때
• 예) font, color, corner radius
– 구현:
• 컨트롤의 UI속성을 설정
• <Style>, 또는 Control.Style 설정
<Grid><Grid.Resources>
<Style x:Key="ButtonStyle" TargetType="Button" ><Setter Property="FontWeight" Value="Bold"/><Setter Property="FontFamily" Value=“Stencil"/>
</Style>
</Grid.Resources>
<Button Style="{StaticResource ButtonStyle}">Test
</Button></Grid>
Silverlight2 네트워크• WCF / REST, WS*/SOAP, POX, RSS, 표준 HTTP
• Socket
Silverlight2 네트워크• WebClient
– 사용 편이
– 이벤트 처리 비동기 방식
– 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에 비해 다양핚 기능 제공
• GET / POST / Headers …private void MakeAsyncRequest(){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}
Silverlight2 네트워크• Socket
– 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 및 토롞
