12월의 주제

2시간만에 끝내는

콘텐츠 앱 개발!

2013년 12월 11일
한국마이크로소프트 11층
2시간만에 끝내는
콘텐츠 앱 개발!

테크데이즈 미니 앱개발 세미나 웹페이지

테크데이즈 미니 토요세미나 웹페이지

http://aka.ms/techdaysminiappdev
• 지난 세션 자료 열람
• 1월 센서활용 ...
12월의 주제

2시간만에 끝내는
콘텐츠 앱 개발

Windows 8.1 핵심 API와 실전!
- 윈도우 앱 개발자 그룹 서학수 팀장
12월의 주제

2시간만에 끝내는
콘텐츠 앱 개발

콘텐츠 앱 이해와 개발!
- 한국마이크로소프트 김영욱 에반젤리스트
Location Infomation
Sensor Fusion inputs and outputs (9-Axis)
국내 지도 서비스
다양한 웹 기반 API 제공
Javascript classes
http://dna.daum.net
검색 API Key 신청
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum 지도 API v3 예제...
function moving(latitude, longitude){
map.panTo(new daum.maps.LatLng(latitude, longitude));
}
function zoomIn() {
var leve...
Windows.Data.Pdf
PdfDocument

Represents a Portable Document Format (PDF) document.

PdfPage

Represents a single page in ...
StorageFile pdfFile = await
Windows.ApplicationModel.Package.Current.InstalledLocation.GetFileAsync(fileName);
this.PDFDoc...
Windows.Storage
Windows.Storage

KnownFolders

Provides access to common locations that contain user content

StorageFile

Represents a fi...
CameraRoll

읽기 전용

Gets the Camera Roll folder.

DocumentsLibrary

읽기 전용

Gets the Documents library.

HomeGroup

읽기 전용

G...
StorageFolder tempFolder = ApplicationData.Current.TemporaryFolder;
StorageFile jpgFile = await
tempFolder.CreateFileAsync...
DisplayImageFileAsync(StorageFile file)
{
BitmapImage src = new BitmapImage();
src.SetSource(await file.OpenAsync(FileAcce...
Arrary
ItemTemplate
public class PDFPage
{
public uint PageNumber { get; set; }
public string ImagePath { get; set; }
public PDFPage(uint page...
<FlipView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImagePath}"/>
</DataTemplate>
</FlipView.ItemTemplate>
gsvThumbnail.Items.Add(new Controls.userThumbnail(pageNumber, src));
Image img = new Image();
img.Source = src;
flvMain.It...
public userThumbnail(uint pageNumber, BitmapImage image)
{
this.InitializeComponent();
this.PageNumber = pageNumber;
txtPa...
ManipulationCompleted

UIElement 개체에서 조작이 완료되고 활동이 없게 될 때 발생합니다.

ManipulationDelta

입력 장치에서 조작 중에 위치를 변경하면 발생합니다.

Manipu...
None
TranslateX
TranslateY

0
1
2

TranslateRailsX

4

TranslateRailsY

8

Rotate
Scale
TranslateInertia
RotateInertia
Sca...
생성자()
this.InitializeComponent();
this.flvMain.SelectionChanged += flvMain_SelectionChanged;
_transformGroup = new Transfo...
None
TranslateX
TranslateY

0
1
2

TranslateRailsX

4

TranslateRailsY

8

Rotate
Scale
TranslateInertia
RotateInertia
Sca...
img.ManipulationMode = ManipulationModes.TranslateX
| ManipulationModes.TranslateY
| ManipulationModes.ScaleInertia
| Mani...
void img_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
_previousTransform.Matrix = _transformGrou...
double aw = ((Image)e.OriginalSource).ActualWidth *
_previousTransform.Matrix.M11;
double movePoint = aw + _previousTransf...
this.PreviousPageNumber = this.CurrentPageNumber;
this.CurrentPageNumber = flvMain.SelectedIndex;
_previousTransform.Matri...
2시간만에 끝내는
콘텐츠 앱 개발

경품추첨

블루투스이어폰

손난로 겸용 충전기

Notice
• 행사 종료 후 설문지를 작성하여 등록 데스크에 제출해 주세요. 소정의 기념품을 드립니다.
http://sdrv.ms/11igPnr

THANK YOU
20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발
20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발
20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발
20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발
20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발
20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발
20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발
20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발
Upcoming SlideShare
Loading in …5
×

20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발

465 views

Published on

techdaysmini 앱개발 세미나 시리즈의 12월 주제는 '콘텐츠 앱개발'입니다. eBook, Podcast, Youtube 앱 등 다양한 콘텐츠를 소비할 수 있도록 하는 콘텐츠 앱 제작 기법을 소개합니다.

8인치 윈도우 태블릿들이 시장을 엄습하면서, 태블릿 시장의대중화에 대한 기대가 높습니다. 다양한 콘텐츠를 소비할 수 있도록 하는 콘텐츠 앱 제작 기법을 소개해 드립니다.


김영욱 부장 / 한국마이크로소프트 에반젤리스트



소개된 샘플은 http://sdrv.ms/11igPnr 여기에서 받을 수 있습니다.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
465
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • The 9-axis system is standard equipment in Windows 8 tablets (designed and certified) .. Accelerometer == acceleration due to gravity.. Gyro == rotational speeds around x,y,z of the device.. Magnetometer == magenetic field strenghts.. Pass-through data is easy.. Hardware accelerometer data is given to you via an accelerometer API.. The interesting magic happens when we get to sensor fusion.. Compass is a tilt-compensated compass you can use to always know where north is.. Inclinomenter = yaw pitch and raw.. Representing device orientation in 3D space.. DeviceOrientation exposes rotation matrix data..
  • The 9-axis system is standard equipment in Windows 8 tablets (designed and certified) .. Accelerometer == acceleration due to gravity.. Gyro == rotational speeds around x,y,z of the device.. Magnetometer == magenetic field strenghts.. Pass-through data is easy.. Hardware accelerometer data is given to you via an accelerometer API.. The interesting magic happens when we get to sensor fusion.. Compass is a tilt-compensated compass you can use to always know where north is.. Inclinomenter = yaw pitch and raw.. Representing device orientation in 3D space.. DeviceOrientation exposes rotation matrix data..
  • 20131211 Techdays mini 앱개발 세미나(2) - 콘텐츠 앱에 대한 이해와 개발

    1. 1. 12월의 주제 2시간만에 끝내는 콘텐츠 앱 개발! 2013년 12월 11일 한국마이크로소프트 11층
    2. 2. 2시간만에 끝내는 콘텐츠 앱 개발! 테크데이즈 미니 앱개발 세미나 웹페이지 테크데이즈 미니 토요세미나 웹페이지 http://aka.ms/techdaysminiappdev • 지난 세션 자료 열람 • 1월 센서활용 앱 개발 사전등록 가능 http://aka.ms/techdaysminisat • “Visual Studio 제대로 파헤쳐보기” 1탄, 2탄 다시보기 • 12월 21일 <3탄 C# 완벽분석 원샷 올킬!> 사전등록 가능
    3. 3. 12월의 주제 2시간만에 끝내는 콘텐츠 앱 개발 Windows 8.1 핵심 API와 실전! - 윈도우 앱 개발자 그룹 서학수 팀장
    4. 4. 12월의 주제 2시간만에 끝내는 콘텐츠 앱 개발 콘텐츠 앱 이해와 개발! - 한국마이크로소프트 김영욱 에반젤리스트
    5. 5. Location Infomation
    6. 6. Sensor Fusion inputs and outputs (9-Axis)
    7. 7. 국내 지도 서비스 다양한 웹 기반 API 제공 Javascript classes
    8. 8. http://dna.daum.net
    9. 9. 검색 API Key 신청
    10. 10. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Daum 지도 API v3 예제: 기본 지도 생성하기</title> <script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=DAUM_MAPS_DEMO_APIKEY" char set="utf-8"></script> <script type="text/javascript"> var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng(37.537123, 127.005523), level: 3 }); } </script> </head> <body onload="init()"> <div id="map" style="width:600px;height:400px;"></div> </body> </html>
    11. 11. function moving(latitude, longitude){ map.panTo(new daum.maps.LatLng(latitude, longitude)); } function zoomIn() { var level = map.getLevel(); if(level != 1) map.setLevel(--level); } function setLevel(level) { map.setLevel(level); }
    12. 12. Windows.Data.Pdf PdfDocument Represents a Portable Document Format (PDF) document. PdfPage Represents a single page in a Portable Document Format (PDF) document. PdfPageDimensions Represents the dimensions of a single page in a Portable Document Format (PDF) document. PdfPageRenderOptions Represents display settings for a single page of a Portable Document Forma t (PDF) document, such as the page's background color and its encoding typ e.
    13. 13. StorageFile pdfFile = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFileAsync(fileName); this.PDFDoc = await PdfDocument.LoadFromFileAsync(pdfFile); if (this.PDFDoc != null && this.PDFDoc.PageCount > 0) { for (uint i = 0; this.PDFDoc.PageCount > 0;i++) { await SetPages(i); } }
    14. 14. Windows.Storage
    15. 15. Windows.Storage KnownFolders Provides access to common locations that contain user content StorageFile Represents a file. Provides information about the file and its content, and ways to manipulate them. StorageFolder Manipulates folders and their contents, and provides information about them. StorageLibrary Lets you add and remove folders from a library like Music or Videos and lets you g et a list of folders included in the library.
    16. 16. CameraRoll 읽기 전용 Gets the Camera Roll folder. DocumentsLibrary 읽기 전용 Gets the Documents library. HomeGroup 읽기 전용 Gets the HomeGroup folder. MediaServerDevices 읽기 전용 Gets the media server (Digital Living Network Alliance (DLNA)) devi ces folder. MusicLibrary 읽기 전용 Gets the Music library. PicturesLibrary 읽기 전용 Gets the Pictures library. Playlists 읽기 전용 Gets the play lists folder. RemovableDevices 읽기 전용 Gets the removable devices folder. SavedPictures 읽기 전용 Gets the Saved Pictures folder. VideosLibrary 읽기 전용 Gets the Videos library.
    17. 17. StorageFolder tempFolder = ApplicationData.Current.TemporaryFolder; StorageFile jpgFile = await tempFolder.CreateFileAsync(Guid.NewGuid().ToString() + ".png", CreationCollisionOption.ReplaceExisting); var pdfPage = this.PDFDoc.GetPage(pageNumber); IRandomAccessStream randomStream = await jpgFile.OpenAsync(FileAccessMode.ReadWrite); await pdfPage.RenderToStreamAsync(randomStream); randomStream.Dispose(); pdfPage.Dispose(); await DisplayImageFileAsync(pageNumber + 1, jpgFile);
    18. 18. DisplayImageFileAsync(StorageFile file) { BitmapImage src = new BitmapImage(); src.SetSource(await file.OpenAsync(FileAccessMode.Read)); Image img = new Image(); img.Source = src; flvMain.Items.Add(img); }
    19. 19. Arrary ItemTemplate
    20. 20. public class PDFPage { public uint PageNumber { get; set; } public string ImagePath { get; set; } public PDFPage(uint pageNumber, string imagePath) { this.PageNumber = pageNumber; this.ImagePath = imagePath; } }
    21. 21. <FlipView.ItemTemplate> <DataTemplate> <Image Source="{Binding ImagePath}"/> </DataTemplate> </FlipView.ItemTemplate>
    22. 22. gsvThumbnail.Items.Add(new Controls.userThumbnail(pageNumber, src)); Image img = new Image(); img.Source = src; flvMain.Items.Add(img);
    23. 23. public userThumbnail(uint pageNumber, BitmapImage image) { this.InitializeComponent(); this.PageNumber = pageNumber; txtPageNumber.Text = pageNumber.ToString(); image.DecodePixelHeight = 140; image.DecodePixelWidth = 100; imgMain.Source = image; }
    24. 24. ManipulationCompleted UIElement 개체에서 조작이 완료되고 활동이 없게 될 때 발생합니다. ManipulationDelta 입력 장치에서 조작 중에 위치를 변경하면 발생합니다. ManipulationInertiaStarting 입력 장치에서 조작 중에 UIElement 개체와의 연결이 끊어져 활동이 없게 될 때 발생합니다. ManipulationStarted 입력 장치가 UIElement 개체에서 조작을 시작할 때 발생합니다. ManipulationStarting 조작 프로세서가 처음으로 만들어지면 발생합니다.
    25. 25. None TranslateX TranslateY 0 1 2 TranslateRailsX 4 TranslateRailsY 8 Rotate Scale TranslateInertia RotateInertia ScaleInertia 16 32 64 128 256 All 65535 System 65536 조작 이벤트와의 그래픽 상호 작용을 제공하지 않습니다. X 축에서 대상을 좌표 이동하는 조작 작업을 허용합니다. Y 축에서 대상을 좌표 이동하는 조작 작업을 허용합니다. 레일 모드를 사용하여 X 축에서 대상을 좌표 이동하는 조작 작업을 허용합 니다. 레일 모드를 사용하여 Y 축에서 대상을 좌표 이동하는 조작 작업을 허용합 니다. 대상을 회전하는 조작 작업을 허용합니다. 대상의 배율을 조정하는 조작 작업을 허용합니다. 변환 작업에 관성을 적용합니다. 회전 동작에 관성을 적용합니다. 배율 작업에 관성을 적용합니다. Windows 8에서 직접 조작이 가능한 모드를 제외하고 모든 조작 상호 작용 모드를 활성화합니다. Windows 8.1부터는 모든 조작 상호 작용 모드를 사 용하도록 설정합니다. Direct Manipulation을 통해 지원되는 시스템 기반 터치 상호 작용을 활성화 합니다.
    26. 26. 생성자() this.InitializeComponent(); this.flvMain.SelectionChanged += flvMain_SelectionChanged; _transformGroup = new TransformGroup(); _ previousTransform = new MatrixTransform() { Matrix = Matrix.Identity }; _compositeTransform = new CompositeTransform(); _transformGroup.Children.Add(_previousTransform); _transformGroup.Children.Add(_compositeTransform); flvMain.ManipulationCompleted += flvMain_ManipulationCompleted;
    27. 27. None TranslateX TranslateY 0 1 2 TranslateRailsX 4 TranslateRailsY 8 Rotate Scale TranslateInertia RotateInertia ScaleInertia 16 32 64 128 256 All 65535 System 65536 조작 이벤트와의 그래픽 상호 작용을 제공하지 않습니다. X 축에서 대상을 좌표 이동하는 조작 작업을 허용합니다. Y 축에서 대상을 좌표 이동하는 조작 작업을 허용합니다. 레일 모드를 사용하여 X 축에서 대상을 좌표 이동하는 조작 작업을 허용합 니다. 레일 모드를 사용하여 Y 축에서 대상을 좌표 이동하는 조작 작업을 허용합 니다. 대상을 회전하는 조작 작업을 허용합니다. 대상의 배율을 조정하는 조작 작업을 허용합니다. 변환 작업에 관성을 적용합니다. 회전 동작에 관성을 적용합니다. 배율 작업에 관성을 적용합니다. Windows 8에서 직접 조작이 가능한 모드를 제외하고 모든 조작 상호 작용 모드를 활성화합니다. Windows 8.1부터는 모든 조작 상호 작용 모드를 사 용하도록 설정합니다. Direct Manipulation을 통해 지원되는 시스템 기반 터치 상호 작용을 활성화 합니다.
    28. 28. img.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY | ManipulationModes.ScaleInertia | ManipulationModes.Scale; img.ManipulationDelta += img_ManipulationDelta;
    29. 29. void img_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) { _previousTransform.Matrix = _transformGroup.Value; Point center = _previousTransform.TransformPoint(new Point(e.Position.X, e.Position.Y)); //중심 위치를 설정 _compositeTransform.CenterX = center.X; _compositeTransform.CenterY = center.Y; //변화된 X, Y 좌표를 적용한다. _compositeTransform.TranslateX = e.Delta.Translation.X; _compositeTransform.TranslateY = e.Delta.Translation.Y;
    30. 30. double aw = ((Image)e.OriginalSource).ActualWidth * _previousTransform.Matrix.M11; double movePoint = aw + _previousTransform.Matrix.OffsetX; double movePersent = movePoint / flvMain.ActualWidth * 100; //변화된 크기를 적용한다. _compositeTransform.ScaleX = _compositeTransform.ScaleY = e.Delta.Scale; } e.Handled = true;
    31. 31. this.PreviousPageNumber = this.CurrentPageNumber; this.CurrentPageNumber = flvMain.SelectedIndex; _previousTransform.Matrix = new Matrix(1, 0, 0, 1, 0, 0); ((Image)flvMain.Items[this.PreviousPageNumber]).RenderTransform = null; ((Image)flvMain.Items[this.CurrentPageNumber]).RenderTransform = _transformGroup; txtPageView.Text = this.CurrentPageNumber.ToString() + " / " + flvMain.Items.Count().ToString();
    32. 32. 2시간만에 끝내는 콘텐츠 앱 개발 경품추첨 블루투스이어폰 손난로 겸용 충전기 Notice • 행사 종료 후 설문지를 작성하여 등록 데스크에 제출해 주세요. 소정의 기념품을 드립니다.
    33. 33. http://sdrv.ms/11igPnr THANK YOU

    ×