*Use HTML5~to develop user-friendly web^~!*
*사용HTML5~사용자 친화적 인웹을 개발하기^~!
*1).*已採用HTML5的實例: T客邦(語意標籤)、永豐銀行信用卡網站、
LEXUS活動網站(canvas)、NVESTO股票線圖(canvas)、
HITCON駭客年會官網(Responsive Web Design, RWD)、Fandora.tw(RWD)**
**1). has adopted HTML5 examples: T off state (semantic tags),
Sovereign Bank Credit Card website, LEXUS campaign website (canvas),
NVESTO stock chart (canvas), HITCON hackers annual official website
(Responsive Web Design, RWD) , Fandora.tw (RWD)**
**1).오프 상태 T (의미 태그), 소버린 은행 신용 카드 웹 사이트,
LEXUS 캠페인 웹 사이트 (캔버스), NVESTO 주식 차트 (캔버스),
HITCON 해커 연간 공식 웹 사이트 (대답하는 웹 디자인, RWD) :
1 HTML5 예제를 채택했다 , Fandora.tw (RWD)**
*2).*舊版瀏覽器HTML5相容:
HTML5Shiv: 使舊版瀏覽器能辨識新語意標籤，使其支援CSS
Modernizr(摩登家): 偵測HTML5/CSS3支援程度，
會在<html>加上class="no-touch no-history multiplebgs"，
CSS便可用.multiplebgs #boo { … }加入一段只有支援多重背景時---
---才套用的Style設定
HTML5 Cross Browser Polyfills: 填充物，在舊版瀏覽器用其他方式---
---實現HTML5才有的功能。
例如: 用Flash模擬canvas繪圖動作，讓IE6也能"跑"canvas .
**2). Older browser HTML5 compatibility:
◦ HTML5Shiv: that older browsers can recognize the new semantic tags
that it supports CSS
◦ Modernizr (modern home): Detects HTML5/CSS3 support ---
---level will <html> add class = "no-touch no-history multiplebgs",
CSS can be used. Multiplebgs # boo {...} Add some only support
multiple background Style settings only apply
◦ HTML5 Cross Browser Polyfills: filler in older browser with HTML5
only other way to achieve the function.
For example: Using Flash Analog canvas drawing action,
so IE6 can "run" canva .*
**2.) 이전 브라우저의 HTML5 호환성 :
◦ HTML5Shiv : 이전 버전의 브라우저가 CSS를 지원하는 새로운 의미
태그를 인식 할 수있는
◦ Modernizr는 (현대 홈) : HTML5/CSS3 지원 수준을 감지
<HTML> 추가 클래스 = "노터치 노 역사 multiplebgs",
CSS를 사용할 수 있습니다 Multiplebgs # 부가 {...} 일부만 지원을 추가합니다
여러 배경 않습니다. 스타일 설정에만 적용
◦ HTML5 크로스 브라우저 Polyfills : HTML5와 이전 브라우저의 기능을
달성하는 유일한 방법으로 필러.
예를 들어 플래시 아날로그 캔버스 그리기 작업을
사용하므로 IE6 캔버스 "를 실행"할 수 .*
**HTML5友善介面
<input type="url"> Win8/iPhone出現有".com"的鍵盤
<input type="tel"> 純數字鍵盤
<video> <audio>在不同裝置播放控制條有所差異! --
--要統一的話可借重如VIDEOJS等外掛。
上傳檔案: XHR Level2支援傳輸進度
* 進度條<progress>
* xhr.upload.onprogress 進度回報事件
* new Blob(…), JavaScript中的BLOB物件
* blob.splice(start, end) 可將檔案分割成多部分。突破瀏覽器一次上傳容量2G上限
Responsive Web Design: 翻譯: 自適應、回應式、響應式，暫無統一用語
**3.HTML5 Friendly Interface
◦ <input type="url"> Win8/iPhone appear to have ". Com" keyboard
◦ <input type="tel"> pure numeric keypad
4. <video> <audio> Playback control bar in different devices differ!
Can draw on if you want to unify such as VIDEOJS plug.
5. Upload files: XHR Level2 support transfer progress
* Progress bar <progress>
* Xhr.upload.onprogress return event schedule
* New Blob (...), JavaScript objects in the BLOB
* Blob.splice (start, end) files can be split into multiple parts.
6.Responsive Web Design: Translation: adaptive, responsive,
responsive, no unified terminology *
**3.HTML5 친화적 인 인터페이스
◦ <input type="url"> Win8/iPhone가 나타납니다 ". com"키보드
◦ <input type="tel"> 순수한 숫자 키패드
당신은 그런 VIDEOJS 플러그인으로 통합하려는 경우
4. 다른 장치에서 영상] <audio> 재생 컨트롤 막대가 서로가!에 그릴 수 있습니다.
5. 파일 업로드 : XHR 레벨 2 지원 전송 진행
* 진행률 표시 줄 <progress>
* Xhr.upload.onprogress 반환 이벤트 일정
* 새로운 한방울 (...), BLOB에서 JavaScript 객체
* Blob.splice (시작, 끝) 파일을 여러 부분으로 분할 할 수 있습니다.
획기적인 브라우저 번 크기 제한 2G 업로드
6.Responsive 웹 디자인 : 번역 : 적응, 반응, 반응, 아니 통일 된 용어
@media screen and (min-width: 400px) and (max-width: 600px)
<link href="iphone1.css" mce_href="iphone1.css" media="screen and (min-width: ….
img { max-width: 100%, height: auto; }跟著容器等比例縮放
◦ <meta name="viewport" content="width=device-width,initial-scale=1.0"> device is set to the same width and not with zoom
◦ specify a specific resolution was applied CSS:
@ media screen and (min-width: 400px) and (max-width: 600px) {font-size: ...} or
<link href = "iphone1.css" mce_href = "iphone1.css" media = "screen and (min-width: ....
◦ IE8 (included) to the need for Media Queries Polyfills
◦ Responsive Image: picture size along with automatic zoom browser
img {max-width: 100%, height: auto;} followed by scaling containers
◦ margin, font-sizs, padding: use relative size,%, em
◦ forced line breaks
◦ <meta name="viewport" content="width=device-width,initial-scale=1.0"> 장치가 동일한 너비로 설정되어 있지 줌
◦ 특정 해상도를 지정하는 것은 CSS를 적용했다 :
@ 미디어 화면 (최소 폭 : 400px) 및 (최대 폭 : 600px 눈) {글꼴 크기 : ...} 또는
<링크 HREF = "iphone1.css"mce_href = "iphone1.css"미디어 = "화면 (최소 폭 : ...
미디어 쿼리 Polyfills의 필요성 ◦ IE8 (포함)
◦ 반응성 이미지 : 자동 줌 브라우저와 함께 사진 크기
IMG {최대 폭 : 100 %, 높이 : 자동;} 스케일링 컨테이너가 다음에
◦ 여백, 글꼴 sizs, 패딩 : 사용 상대적 크기, %, EM
◦ 강제 줄 바꿈
7).模擬器
- Windows Phone SDK裝完後就會有模擬器
Tips 不用虛擬鍵盤: Alt-PgUp可關閉虛鍵盤，改用KB輸入
- Opera Mobile Emulator
- Mobilizer: 加外框而已，中間是IE
- 行動版網頁效能優化
- HTML5兩種開發模式 : 直接用Browser vs 包在原生App中(JS API呼叫手機特有功能)
- HTML4.01提供defer載入<script defer src="boo.js" mce_src="boo.js">
- 多個defer JS依序執行
HTML5提供async載入<script async src="boo.js" mce_src="boo.js"> - 載入後同時執行
- Bundling(打包) / Minification(壓縮或稱最小化)
- IIS7 靜態內容壓縮/動態內容壓縮: jQuery 1.7.1 242K –> 102K(min) –> 31K(gz)
- HTTP Cache, DOM Cache, HTML5離線應用程式(applicationCache)、IndexDB...
- XHR Lvl2 – 進度回報, Cross-Site, bufferarray
- Web Socket: Client與Server間建立連線，持續交換資料
- Web Worker: Client端的多執行緒模型
- CSS3特效: Transitions, Transforms, Border Radius, Box Shadow, 比JS順暢，可充分發揮GPU硬體威力
- 使用Sprite減少圖檔下載次數: CSS Sprite Generator, 上傳一包圖檔交由程式進行圖檔拼接並產生CSS裁切語法(.sprite-IconFileName { background-position:... })
- ASP.NET Sprite and Image Optimization(套件)
- Web Font: 減少以圖片取代字型的需求 --> 將全頁用到的字型變成單一圖檔。國內廠商justfont，提供JS，將中文字內容丟到廠商Server再抛回圖檔，原本新細明體會換成圖形美觀文字顯示(速度不甚理想)
- 使用Media Queries: 寬 / 高 / 方向(直 or 橫)
- 善用CSS3 Selector取代用JS硬幹，語法乾淨、效能更好
- MSDN訂戶取得WinPhone, Win Store, WinAzure免費帳號Token aka.ms/startmsdn
**
Tech2012 DEV203
- Windows Store(市集)的優勢:
- 直接面對消費者的有效通路(傳統做法需要高行銷成本才能說服使用者主動到網站下載安裝)，可方便地蒐集消費者回饋
- 跨x86/ARM平台的應用程式
- 直接賺取收益(購買付費、廣告、讓使用者繼續付費的API[In-App Purchase/訂閱/虛擬寶物])
- 收益
- 七三分帳: 微軟30%、開發者70%。營收超過USD $ 25,000後改為八二分帳
- 開發者亦可決定使用既有金流系統，不走微軟金流
- 開發語言
- C++/C/C#/VB.NET/HTML5+JavaScript
- Win8 + VS2012
- Chakra JavaScript引擎: IE9起把JS跟Render引擎拆開，並對Chakra不斷優化，使其充分發揮硬體效能，對其效能表現不用太擔心
- 一個開發帳號可以授權15台裝置直接安裝App，除此之外，就只能透過Win Store取得App
- 生命週期: Running / Suspended / Terminated (開發人員要處理Suspended回到Running時的狀態還原，這是與Desktop程式最大的不同)
- Blend for VS2012支援XAML/HTML5/CSS3
- 模擬器功能夠齊全(觸控/不同解析度/GPS...) 與 遠端偵錯(Remote Debugging，在Win8平板安裝Agent)
- HTML Win Store App呼叫MessageBox的寫法:
var dlg = new Windows.UI.Popups.MessageDialog(…)
dlg.showAsync(); - Windows Runtime Component(Windows執行階段元件)
- 有隱藏核心邏輯程式碼的效果(用C++寫更好)
- 使用C++, C#, VB.NET開發可與其他系統共用的元件/程式庫
- 重度運算需求用C++開發可加速
- C++元件要Build三份: x86/x64/ARM
- 元件的Method名稱在JavaScript會變成小寫開頭
- C++/CX (Extension)
- C++11, 可用STL(但不建議)
- 要用DirectX，只能用C++
- C# 5.0 / VB.NET 10.0
- 加入async/await
- WPF/Silverlight./WP經驗可沿用(XAML)
- HTML5 + JS
- 對Web開發者而言無痛移轉
- WinJS Library –> 符合Modern UI風格的視覺元素
- package.appxmanifest: 註明會用到GPS/Camera，要求使用者授權使用
- Microsoft Design Style: Charms Bar 分享/搜尋、動態磚、訊息推播(微軟的Push Notification Service結合自行開發的Cloud Service)
- Tile: 150x150, 310x150, Semantic Zoom: 30x30, Badge(磚上的數字)
- 使用Microsoft Account登入，一般App可以將資料存入RoamingSettings/RoamingFolder物件，使用者換裝置後會批次同步，可以共享同樣的狀態或設定(因為批次，不適合必須即時同步的應用)
- 本堂課程未涉及任何WP8未公開內幕及情報
- 開發抉擇: 若沒用到WP8特有功能，沿用WP7架構開發沒什麼不好
- Win8的開發經驗可以套用在WP8
- 解析度變多了! (補聲暗) WVGA 800x480 WXGA 1280x768, 720p 1280x720
- Metro Design己不可用，但Modern Design的新名詞似乎亦尚未定案
- Google警告Android開發者不要抄襲WP介面的設定風格 ==> 意味Metro Style已被大眾所接受
*Evernote Hello 完全照抄動態磚概念 - 維持標準字型, 標準大小: 不要寫死字型大小的數值，套用如PhoneTextNormalStyle等預設Style，才能隨解析度自動調適
- Top 10 programming-fonts: 字寬固定
- 系統標準色: 除非App需要依循企業識別，否則應依循系統標準色
- 考慮在Dark Theme / Light Theme下的顯示結果: 不要寫死顏色，用PhoneForegroundBrush / PhoneBackgroundBrush
- 傳說Win8有20種標準色
- PhoneAccentColor: 系統輔色，使用者可以任選，改變後App最好也能跟著變動
- 排版
- 格線系統 Grid System, Start Screen有遵循格線系統
- 創造隱藏的格線
- Windows Phone MetroGridHelper 1.11 from NuGet
MetroGridHelper.IsVisible = true; 設計View會出現隱藏格線 - 左邊界請設24px
- 對齊與接近原則:
若用網頁設計比喻: 至少用<td>分隔header及欄位值以求對齊，但<dt><dd>方式上下相接更好 - 元素間隔12px
- Panorama vs Pivot: 技術上相同，只有Template有小差異，實際試看看
- 爛設計: Panorama上方"類別", "結果"，點"類別"清單中的項目後切換到"結果"... (直接就把分類展開在最上一排比較好)
- Tile
- Icon != Tile
Icon只是靜態圖檔，Tile是App的延伸，更像是Gadget/Widget - Wide, Medium, Small三種尺寸
- Icon透明背景會顯示輔色，增加融合度。但上架用的Icon不要用透明色，因為市集背景很花(失敗案例: 台灣高鐵早鳥優惠)
- 工具: Windows Phone Icons Maker
- Portable Class Library: 確保元件在.NET 4.5, .NET for Metro, Silverlight 5, WP7.1通行
- Immo Landwerth說: Win8的API是以WP7的.NET Library為基礎開始的
* 比WP7更精簡(Namespace數由 95 –> 72，而完整.NET有447) - 第三方控制項
* Windows Phone Toolkit:
Silverlight for WP toolkit, Coding4Fun fo WP toolk這兩套算是必備
* Silverlight for WP toolkit: People Hub的Recent效果, HubTile(翻轉)
* Coding4Fun toolkit: TimeSpanPicker時間選擇器, MemoryCounter(觀察記憶體用量) - 不要自訂DialogBox: 不符合Guide，會混淆使用者對Dialog標準的認知，無法通過更嚴格的審查標準
- WP8相容性: WP7 Silverlight與XNA不用改就可相容，但建議把XNA改成MonoGame
- 提示:
- 要不要SplashScreen? 若沒有特別需求，就移掉吧! MS內建的手機App都沒在用，你真的要讓客戶覺得Loading很慢嗎?
- 不要內嵌WebBrowser控制項(iOS開網頁後回不來App才要加，WP可以按Back回App，不用這麼搞)
- 不要在ListBox加">"代表展開，iOS這樣玩，但WP裡不用
- 可按的UI元素，按了呈現沈下去的動畫，不要用改色效果以求一致
- 不要設計關閉鈕，系統本來就可以做到
【開發跨Win8 / WinPhone應用程式】
- 是"同時打造"在兩個平台上運行的App，而不是"打造同時"在兩個平台運行的App。
- 基本原則
- 熟悉WP App與Win Store App平台的不同
- 多用XAML處理UI，少用Code，較不會受限於平台
- 取出Logic變成共用類別(Portable Class)
- 跨平台的技術迷思
- Write Once Run Anywhere? 真的可能嗎?
- 不斷推出新平台、新裝置，出現新特性，不用嗎?
- 做到盡量重用程式，讓開發速度變快就好，不要奢望平台一直換程式不用改
- WinStore App與WP App不同
- 更多解析度標準
- 觸控外，還有滑鼠鍵盤操作模式
- 隨時具有連網能力
- Charms Bar
- 少了一些Namespace, 用FlipView取代Panorama或Pivot
- 控制項改變: 沒有Panorama或Pivot、ListBox vs ListView, GridView, FlipView, SemanticZoom…
- XAML 2007起就被MS當成標準，並非Silverlight專利...
XAML + C# + Full .NET = WPF
XAML + C# + Mini .NET = Silverlight
XAML + C# + WP7 .NET = WP App
XAML + C# + WinRT .NET = Win Store App - 如果已經有WPF或Silverlight基礎，用XAML開發是最佳選擇
用HTML5 + JS可以跨平台，但易失去發揮平台特性的機會，何況真要跨仍有許多眉角 - Tile: WP7 173 x 173, WinStore 150x150 or 310x150
- 記得善用async, await簡化程式寫法
- Win Store的通知變化更多: ScheduledTileNotification
- 檔案存取:
- IsolatedStorage: WP7, Silverlight, WinForm, WebForm... 同步
- Application Data: 用於WinStore App, 非同步存取(非同步用很凶，所以async/await格外重要)
分為Local/Roaming/Temporary、Settings/Files(Temporary只有Files，其餘兩種都有)
生命週期在App移除後消失 - Roaming漫遊: 信任這台裝置，資料便會同步進來
- 取Package中安裝的檔案變得比以前容易
- FileOpenPicker: 可以抓取使用者在本機空間甚至SkyDrive的檔案，不用額外寫Code
- 透過Contract可以跟其他App合作。例如: 分享、搜尋...
- 遠端資料及DataBinding的改變:
* Converter, WebClient改HttpClient, WebService可用, SyndicationClient(ATOM/RSS), Azure Mobile Service - Portable Class Library: 在WP, WinStore App, Slivelight, .NET專案中共用，
- 通常不涉及UI，只聚焦在企業邏輯上。
- 把程式邏輯寫進ViewModel類別，XAML只要設定Binding就好。
- Class由WP App搬到WinStore App，設好XAML，不用寫半行程式就實現跨平台。(最近在研究Knockout.js，完全能體會其中的美好~~ MVVM實在太棒了)
Silverlight for WP toolkit, Coding4Fun fo WP toolk both sets must be* Silverlight for WP toolkit: People Hub's Recent results, HubTile (flip)* Coding4Fun toolkit: TimeSpanPicker time picker, MemoryCounter (observe memory usage)18) Do custom DialogBox: does not meet the Guide, will confuse users Dialog standard cognition, not through a more rigorous standard of review19). WP8 Compatibility: WP7 Silverlight and XNA compatibility can not change, but it is recommended to change MonoGame XNA20) Tip:◦ To Do SplashScreen? If no special requirements, we removed to it! MS Mobile App no built-in use, do you really want customers to feel Loading very slowly?◦ Do not embedded WebBrowser control (iOS App come back until after the opening pages to add, WP can press back Back App, not so engaged)◦ Do not add the ListBox ">" represents expansion, iOS this play, but not inside WP◦ according to UI elements, according to the present sink animation, do not use the same color change effect in order to◦ Do not design the close button, the system would have been able to do【Develop cross Win8 / WinPhone app]1). "Simultaneous build" to run on both platforms App, rather than "to create both" on both platforms running App.2) Basic Principles◦ familiar with WP App and Win Store App different platforms◦ Multi XAML processing UI, less Code, representing not limited by the platform◦ Remove Logic becomes a shared category (Portable Class)3) Cross-platform technology myths◦ Write Once Run Anywhere? Really possible?◦ constantly introducing new platforms, new devices, the emergence of new features, do not you?◦ do try to reuse code, allowing developers to speed becomes faster like, do not expect the platform has not changed for the program4). WinStore App different with WP App◦ more standard resolution◦ Touch, there are mouse keyboard mode◦ always has networking capabilities◦ Charms Bar◦ a little something Namespace, Panorama or Pivot replaced with FlipView◦ Control changes: No Panorama or Pivot, ListBox vs ListView, GridView, FlipView, SemanticZoom ...5). XAML 2007 onwards by MS as a standard, not a Silverlight patent ...XAML + C # + Full. NET = WPFXAML + C # + Mini. NET = SilverlightXAML + C # + WP7. NET = WP AppXAML + C # + WinRT. NET = Win Store App6) If you already have WPF or Silverlight based development is the best choice in XAMLUsing HTML5 + JS cross-platform, but it is easy to lose the opportunity to play a platform features, not to mention you really want to cross there are still many Meijiao7). Tile: WP7 173 x 173, WinStore 150x150 or 310x1508). Remember use async, await simplify programming wording9). Win Store notice more changes: ScheduledTileNotification10). File access:◦ IsolatedStorage: WP7, Silverlight, WinForm, WebForm ... Sync◦ Application Data: for WinStore App, asynchronous access (non-synchronous with the ferocious, so async / await particularly important)Divided into Local / Roaming / Temporary, Settings / Files (Temporary Only Files, the other two are)Life cycle in the App disappears after removal11). Roaming Roaming: Trust this device, the data is synchronized to come12) Take a Package installed file becomes easier than before13). FileOpenPicker: Users can crawl space in the machine even SkyDrive files without additional write Code14) Through Contract can cooperate with other App. For example: sharing, searching ...15). Remote data and DataBinding changes:* Converter, WebClient change HttpClient, WebService available, SyndicationClient (ATOM / RSS), Azure Mobile Service16). Portable Class Library: In the WP, WinStore App, Slivelight,. NET project with the Chinese Communists, usually does not involve UI, focusing only on the business logic.17) Put programmable logic written into the ViewModel class, XAML simply set Binding like. Class move by the WP App WinStore App, set a good XAML, do not write half lines of code to achieve cross-platform. (Recent study Knockout.js, can understand exactly where OK ~ ~ MVVM really great) .
**7) 시뮬레이터◦ 윈도우 폰 SDK의 전체는 시뮬레이터 이후에 발생Alt 키 PgUp 키의 가상 키보드를 닫습니다 대신 KB 입력 : 팁 가상 키보드가없는◦ 오페라 모바일 에뮬레이터◦ 모바일 라이저 : 만 프레임, 중간 IE입니다8). 모바일 웹 성능 최적화◦ HTML5 두 가지 개발 모델 : 네이티브 앱에 싸여 직접 사용하는 브라우저 대는 (JS API 전화 관련 기능을 호출)◦ HTML4.01는 src="boo.js"이 mce_src="boo.js"> 여러 JS가 순차적으로 실행 동안 연기 연기 <script 로딩을 지연 제공HTML5는 <script 비동기 src="boo.js" mce_src="boo.js">가 동시에로드 비동기 로딩을 제공합니다◦ 번들링 (패키지) / 축소에서는 (압축 또는 최소화 함)◦ IIS7 정적 콘텐츠 압축 / 동적 콘텐츠 압축 : jQuery를 1.7.1 242K -> 102K (분) -> 31K (GZ)◦ HTTP 캐시, DOM 캐시, HTML5 오프라인 애플리케이션 (applicationCache), IndexDB ...◦ XHR Lvl2 - 진행 반환, 크로스 사이트, bufferarray◦ 웹 소켓 : 클라이언트와 서버가 정보의 지속적인 교환 사이의 연결을 설정하려면◦ 웹 작업자 : 클라이언트 측 멀티 스레딩 모델◦ CSS3 효과 : 전환, 변환, JS보다 부드러운 테두리 반경, 박스 그림자, GPU 하드웨어의 성능을 활용할 수 있습니다, CSS 스프라이트 생성기를 접합하여 그래픽을 그리기위한 패키지 프로그램을 업로드하고 CSS 작물 구문 (스프라이트 IconFileName. {배경 - 위치 : ...}) 생성 : ◦ 스프라이트 그리기 다운로드를 줄이고 사용◦ ASP.NET 스프라이트와 이미지 최적화 (키트)◦ 웹 글꼴 : 글꼴 요구 사항을 대체 할 이미지로 감소 -> 하나의 도면에 사용되는 전체 페이지 글꼴 될 것이다. 국내 업체 justfont, JS를 제공하는 업체는 텍스트에 던진 후 도면 서버로 다시 던져되며, 원래의 새로운 로마 경험 아름다운 그래픽 텍스트 디스플레이 (이상보다 속도) 대체폭 / 높이 / 방향 (수직 또는 수평) : ◦ 미디어 쿼리를 사용◦ CSS3 선택기, JS 하드 건조, 문법 깨끗하고 더 나은 성능을 대체 사용9). MSDN 가입자는 WinPhone, 승리 상점, WinAzure 무료 계정 토큰 aka.ms / startmsdn을[승리 스토어 앱 개발자] 스카이 드라이브 물론 자료를 공유 할 수1) 윈도우 스토어 (마켓 플레이스)의 장점.소비자에게 직접 ◦ 효과적인 경로 (기존 관행을 사용자가 다운로드하고 설치하는 웹 사이트에 주도권을 설득하기 위해 높은 마케팅 비용을 필요로), 당신은 쉽게 소비자의 피드백을 수집 할 수 있습니다◦ 크로스 플랫폼 애플리케이션 x86/ARM◦ 직접 (사용자가 API를 계속 지불 할 수 있도록 [앱내 구매를 가상 / 보물 / 신청] 구매 유료 광고) 수익을 얻을2). 수익◦ 일흔세 원장 : 마이크로 소프트 30 %, 개발자의 70 %. 나중에 변경할 USD $ 25,000 이상을 이상 수익 팔십 원장◦ 개발자가 기존의 현금 흐름 시스템을 사용하기로 결정 수 있습니다, 마이크로 소프트의 현금 흐름을 고려하지 않습니다언어 3). 개발◦ C + + / C / C # / VB.NET/HTML5 + 자바 스크립트◦ Win8 전기 + VS20124.) 차크라 자바 스크립트 엔진 : 자신의 성능에 대해 너무 많이 걱정하지 마십시오, IE9 JS의 효과가 떨어져 렌더링 엔진을, 그리고 차크라는 지속적으로 전체 하드웨어 성능을 최적화5) 개발자 계정이 설치되어 15 개의 장치를 직접 앱이 외에도, 그것은 단지 승리 스토어 앱을 통해 얻을 수있는 권한을 부여 할 수 있습니다6) 수명주기 : / (개발자가 복원되면 다시 실행 상태 중단,이 데스크톱 프로그램과의 가장 큰 차이점은 핸들) 일시 중지 / 종료 실행VS2012 지원 XAML/HTML5/CSS3 7). 혼합8) 시뮬레이터 기능 충분히 완료 (터치 / 다른 해상도 / GPS ...) 그리고 원격 디버깅 (원격 디버깅, Win8 전기 태블릿 Agent를 설치)9.) HTML 승리 스토어 앱 호출 메시지 박스 문구 :VAR DLG는 = 새로운 Windows.UI.Popups.MessageDialog (...)dlg.showAsync ();10). Windows 런타임 구성 요소 (Windows 런타임 구성 요소)◦ 핵심 로직 코드의 숨겨진 효과 (에 C + + 잘 쓰는)◦ 사용하여 C + 다른 시스템과 공유 +, C #, VB.NET 개발 컴포넌트 / 라이브러리C + + 개발자 ◦ 무거운 컴퓨팅 요구가 가속화 할 수 있습니다◦ C 세를 구축하는 + + 구성 요소 : x86/x64/ARM자바 스크립트 구성 요소 ◦ 메서드 이름은 소문자됩니다11). C + + / CX (확장)◦ C + +11, 가능한 STL (그러나 권장하지 않음)◦ 사용의 DirectX는 단지 사용하는 C + +12). C # 5.0 / VB.NET 10.0◦ 비동기 추가 / 기다리고 있습니다◦ WPF / 실버. / WP 경험 따르도록 (XAML)13). HTML5 + JS◦ 웹 개발자, 고통 마이그레이션◦ WinJS 라이브러리 -> 충족 현대 UI 스타일의 시각적 요소14.) Package.appxmanifest를 : 국가는 GPS / 카메라를 사용하는 경우, 사용자가 사용 권한을 부여해야합니다. 15) 마이크로 소프트 디자인 작풍 : 매력 바 공유 / 검색, 동적 벽돌, 메시지 푸시 (마이크로 소프트 푸시 알림 서비스는 자체 개발 한 클라우드 서비스를 결합). 16) 타일 : 150X150, 310x150, 시맨틱 줌 : 30X30, 배지 (벽돌 그림)배치, 실시간 동기화가 적용하기에 적합하지 않기 때문에 17) 마이크로 소프트 계정 로그인을 사용하여, 당신은)는 데이터 일반적으로 앱 RoamingSettings / RoamingFolder 객체, 사용자, 일괄 변환 장치 동기화 후, 당신은 (같은 상태 나 설정을 공유 할 수 있습니다을 절약 할 수 있습니다[윈도우 폰 디자인 사례]1) 이것은 어떤 WP8 교훈 비공개 내부자 및 정보를 포함하지 않습니다2) 개발자 선택 : 사용하지 않는 WP8 독특한 특징 경우, WP7 아키텍처 개발에 아무 문제가 따를3). Win8 전기 개발 경험이 WP8에 적용 할 수4). 해상도는 많이 바뀌! (진한 칠) WVGA 800X480 WXGA (해상도 : 1280x768), 720 1280X7205). 메트로 디자인을 사용할되었지만, 현대적인 디자인의 새로운 용어는 아직 확정되지 않은 것으로 보인다6). 구글 안드로이드 개발자가 ==> 평균 Metro 스타일은 대중에 의해 받아 들여졌다 표절 WP 인터페이스의 스타일을 설정하지 경고* 에버 노트 헬로는 단순히 동적 벽돌의 개념을 복사7.) 표준 글꼴, 표준 크기 유지 : PhoneTextNormalStyle 다른 사전 설정 스타일로 적용 죽은 글꼴 크기의 수치를 쓰지 마십시오을 자동으로 해상도를 조정할 수 있습니다8.) 상위 10 개 프로그램 - 글꼴 : 고정 단어 전체9) 시스템 표준 색상 : 앱은 기업의 정체성을 따를 필요가, 또는 표준 컬러 시스템을 따라야하지 않는PhoneForegroundBrush / PhoneBackgroundBrush와 죽은 색깔을 쓰지 마십시오 : 10) 결과에 따라 어둠의 테마 / 라이트 테마를 고려11) 전설과 20 표준 색상 Win8 전기12.) PhoneAccentColor : 차 컬러 시스템, 사용자는 선택적으로 앱을 변경 한 후 최선을 변경하기 위해 수행 할 수 있습니다13). 조판◦ 그리드 시스템 그리드 시스템, 시작 화면이 그리드 시스템을 따라가◦ 숨겨진 격자를 생성NuGet에서 ◦ 윈도우 전화 MetroGridHelper 1.11MetroGridHelper.IsVisible = true를 디자인보기 격자를 숨길 나타납니다왼쪽 여백 24px 설정하십시오 ◦◦ 근접의 원칙에 부합 :만약 웹 디자인 은유를 사용하여 : <TD> 위상이 아래로 더 잘 <DT>의 <DD> 방법을 정렬하기 위해서는 적어도 헤더 필드 값으로 구분◦ 요소 간격 12px◦ 파노라마 대 피벗 : 작은 차이와 기술적으로 동일한, 단지 템플릿, 실제는 좀 봐◦ 썩은 디자인 : "분류"위의 파노라마, "결과", "결과"로 전환 할 항목의 목록에있는 지점 "카테고리"... (직접 더 나은 확장 위쪽 행 분류에 넣어)14). 타일◦ 아이콘! = 타일아이콘은 단지 정적 그래픽입니다 타일보다 가젯 / 위젯과 같은 확장 프로그램입니다◦ 와이드, 중간, 작은 가지 사이즈◦ 아이콘 투명 배경의 통합의 정도를 증가, 보조 색상을 표시합니다. 배경이 매우 꽃 시장 (대만 고속철도 조기 할인 실패 사례)입니다 때문에, 투명한 색깔 사용되는 선반의 아이콘을 사용하지 않는◦ 도구 : Windows Phone의 아이콘 메이커. 15) 휴대용 클래스 라이브러리 : 보장하는 메트로, 실버 5, WP7.1 액세스를위한 NET 4.5, NET의 구성 요소... 16) Immo를 Landwerth는 말했다 : Win8 전기의 API는 WP7에 근거 NET 라이브러리가 시작 기준.WP7보다 * 날씬 (95 네임 스페이스 번호 -> 72 동안 전체 NET 447).17) 타사 컨트롤* 윈도우 전화 툴킷 :
WP 툴킷을위한 실버, 두 세트가 있어야합니다 Coding4Fun FO WP toolkWP 툴킷에 대한 * 실버 : 사람 허브의 최근 결과 HubTile (플립)* Coding4Fun 툴킷 : TimeSpanPicker 시간 피커, MemoryCounter (메모리 사용량을 준수)18) 사용자 정의 DialogBox를 수행 가이드를 준수하지 않는, 리뷰보다 엄격한 기준을 통해 사용자에게 대화 상자 표준인지,하지를 혼동합니다19) WP8 호환성 :. WP7 실버 라이트와 XNA 호환성을 변경할 수 있지만 MonoGame XNA를 변경하는 것이 좋습니다20) 팁 :◦ SplashScreen로 작업을 수행하려면? 특별한 요구하는 경우에, 우리는 그것을 제거! MS 모바일 앱가없는 내장 사용, 당신이 정말로 고객이 매우 느리게로드 느끼고 싶어?◦ WebBrowser 컨트롤을 포함하지 마십시오 (IOS 앱 추가 할 열 페이지 후까지 돌아 오지를, WP는 뒤 앱을 누르면 이렇게 종사 할 수 없습니다)◦ ListBox를 추가하지 마십시오 ">"확장을 대표하는이 놀이를 IOS,하지만 WP 내부◦ UI 요소에 따라, 본 싱크 애니메이션에 따라,하기 위해 같은 색상 변화 효과를 사용하지 않습니다닫기 버튼을 디자인하지 마십시오 ◦이 시스템은 할 수 있었을 것이다【크로스 Win8 전기 / WinPhone 응용 프로그램을 개발]1). 두 플랫폼 모두에서 응용 프로그램 실행 "모두 만드는 방법"보다 두 플랫폼의 앱에서 실행하기 위해 "동시 구축", 오히려.2) 기본 원리◦ WP 응용에 익숙 및 저장 응용 다른 플랫폼 승리◦ 멀티 XAML 처리 UI, 적은 코드는 플랫폼에 의해 제한되지 나타내는◦ 제거 로직 공유 카테고리 (휴대용 클래스)가됩니다3) 크로스 플랫폼 기술 신화◦ 아무 곳이나 한 번 실행신가요? 정말 가능?◦ 끊임없이 새로운 플랫폼, 새로운 장치, 새로운 기능의 출현을하지 않는다 도입?◦ 코드를 재사용하려고, 개발자들이 빠르게 할 수 있도록 빠른 같이되어 않는 플랫폼 프로그램 변경되지 않은 기대하지 않는다WP 응용 가진 다른 4). WinStore 응용◦ 이상의 표준 해상도◦ 터치, 마우스, 키보드 모드가 있습니다◦ 항상 네트워킹 기능을 가지고◦ 매력 바◦ 작은 선물 네임 스페이스, 파노라마 또는 피벗 FlipView로 대체◦ 제어 변경 : 없음 파노라마 또는 피벗, ListBox에 대 ListView에은 GridView, FlipView, SemanticZoom ...5). XAML 표준이 아닌 실버 특허로 MS 2007 년 이후 ...XAML + C # + 전체. NET = WPFXAML + C # + 미니. NET = 실버XAML + C # + WP7. NET = WP 응용XAML + C # + WinRT. NET = 승리 스토어 앱당신이 이미있는 경우 6) WPF 나 실버 라이트 기반의 개발은 XAML에서 최선의 선택HTML5 + JS 크로스 플랫폼을 사용하여,하지만 당신이 정말로 교차 할 물론, 플랫폼 기능을 할 수있는 기회를 잃게하기 쉽습니다 여전히 많은 Meijiao이 있습니다. 7) 타일 : WP7 173 X 173, WinStore 150X150 또는 310x1508). 사용 비동기 기억, 프로그래밍 표현을 단순화 기다리고 있습니다. 더보기 9) 승리 스토어 통지 변경 : ScheduledTileNotification10.) 파일 액세스 :◦ IsolatedStorage : WP7, 실버,의 WinForm, WebForm에 ... 동기화◦ 응용 프로그램 데이터 : WinStore 앱 비동기 액세스 (그래서 비동기, 사나운와 비 동기 / 특히 중요 기다리고)에 대한지역 / 로밍 / 임시 설정 / 파일 (다른 두되는 임시 파일 만)으로 나누어앱의 수명주기는 제거 후 사라11) 로밍 로밍 :.이 장치를 신뢰, 데이터가 올 동기화12) 설치 파일이 이전보다 쉬워집니다 패키지를 가지고. 13) FileOpenPicker : 사용자 추가 코드를 작성하지 않고 기계의 공간도 SkyDrive에 파일을 크롤링 할 수 있습니다계약을 통해 14) 다른 응용 프로그램과 함께 협력 할 수 있습니다. 예를 들어, 공유, 검색 ...15) 원격 데이터 및 데이터 바인딩 변경.* 컨버터, WebClient를 변경 HttpClient 사용 가능한 웹 서비스, SyndicationClient (ATOM / RSS), 푸른 모바일 서비스. 16) 휴대용 클래스 라이브러리 :. WP에 WinStore 앱, Slivelight, 중국 공산당과 NET 프로젝트는 일반적으로 비즈니스 로직에 초점을 맞추고 UI를 포함하지 않습니다.17) ViewModel에 클래스로 작성 프로그래머블 로직을 넣어, XAML은 단순히 바인딩과 같이 설정합니다. 좋은 XAML을 설정 WP 앱 WinStore 앱,,하여 클래스에 이동은 크로스 플랫폼을 달성하는 코드의 절반 선을 쓰지 않는다. (최근의 연구 Knockout.js는 정확하게 OK ~ ~ MVVM 정말 좋은 이해할 수있다)
**
【ASP.NET MVC 4】
- ASP.NET MVC 4新功能
- 範本加強
- 終於有真的空白範本，Layout翻新，以HTML5為基礎，支援RWD
- Single Page Application SPA在Beta版有，正式版暫時移除，等更成熟完整再加回來
- Global.asax中抽出FilterConfig, RouteConfig, BundleConfig等放到App_Start
- Internet Application Project範本
- MVC入門必看，有諸多值得學習效法之處
- EF 5.0, 完整Layout範例, 完整會員註冊、登入、表單驗證、RWD
- ActionFilter: Filters資料夾
- AuthConfig –> OAuth
- Intranet Application Project: 用AD認證、省略會員機制及ActionFilter
- Mobile Project: 以jQuery Mobile為基礎
Display Mode: 由User-Agent決定不同的顯示模式, Index.mobile.cshtml
DisplayModeProvider.Instance.Modes.Insert(…)擴充，識別User-Agent字串，定義額外顯示模式，例如: wp7, iphone。用來處理平板及手機的差異還不錯 - 網路應用
- Windows Azure SDK
- OAuth – MVC 4正式版, AuthConfig中已內建Microsoft Account, Facebook, Twitter, Google, LinkedIn
- 登入UI多了"使用其他服務系統登入"選項
- 正式版獨立出WebApiConfig.cs，專司Web API Routing設定
- 實作RESTful API時，一定要加上權限驗證
- 展示用Fiddler模擬POST, PUT, DELETE Request操作RESTful API，十分方便
- Web API本來支援OData，正式版先移除(成熟度尚不足)。如果要用，從NuGet取得OData安裝(目前為Prerelease，發行前版本)。參數: $top, $skip, $filter, $orderby
- CSS與JS的打包壓縮 Bundling and Compression
- new ScriptBundle("~/bundles/jquery") <—不能有此實體存在
- Include("~/Scripts/jquery-{version}.js")
- Include("~/Scripts/jquery-mobile*.js")
- IncludeDirectory("~/scripts", "test*", true)
- bundles.UseCdn = true; 還是要加Include，CDN失效就用本機版本
- 自訂忽略清單: 預設會忽略.intellisense.js, –vsdoc.js, min.js, debug.js… 可自訂
- 非同步支援: async, await屬.NET 4.5新增功能, MVC4預設為.NET 4，若要用async/await要升到.NET 4.5
- MVC4正式版: 開放Controller不一定要放在Controllers資料夾中
- AllowAnonymous Attribute: 在class加上[Authorize]，在某些Method上加註[AllowAnonymous]
- _references.js 宣告Intellisense引用的JS, 不用一一加註在各JS<references>
- Page Inspector: VS2012的新功能，檢查DOM元素時，會自動對應到Vew或Partial View位置，對於MVC格外方便。檔案頁籤亦可列出_Layout.cshtml, Index.cshtml... 所有用到的View檔案
**[ASP.NET MVC 4]1). ASP.NET MVC 4 새로운 기능2). 템플릿 강화◦ 마지막으로 정말 빈 템플릿, RWD HTML5 기반 지원을 단장 레이아웃이베타 버전 ◦ 단일 페이지 응용 프로그램 SPA는 일시적으로 공식 버전을 제거, 플러스 다른 더 성숙하고 완전한 뒤◦ Global.asax에이 App_Start에 FilterConfig, RouteConfig, BundleConfig 등을 추출3). 인터넷 응용 프로그램 프로젝트 템플릿◦ MVC 항목이 참조해야, 따라 배울 수있는 많은 가치있는 장소가있다◦ EF 5.0, 전체 레이아웃 예를 들어, 전체 회원 등록, 로그인 폼 유효성 검사, RWD◦ ActionFilter : 필터 폴더◦ authconfig 명령 -> OAuth를4.) 인트라넷 응용 프로그램 프로젝트 : 사용 AD 인증 메커니즘과 회원 ActionFilter 생략5.) 모바일 프로젝트 : jQuery를 모바일 기반에사용자 에이전트 다른 디스플레이 모드, Index.mobile.cshtml에 의해 결정 : 디스플레이 모드DisplayModeProvider.Instance.Modes.Insert (...) 확장, 식별 사용자 에이전트 문자열과 같은 추가 디스플레이 모드를 정의 윈도 폰, 아이폰. 태블릿 및 휴대 전화의 차이를 다루는 것도 좋다6). 네트워킹 응용 프로그램◦ 윈도우 푸른 SDK◦ OAuth를 - MVC 4 공식 버전, authconfig 명령은 내장 된 마이크로 소프트의 계정, 페이스 북, 트위터, 구글, 링크드 인◦ 로그인 UI가 훨씬 옵션을 "다른 서비스 시스템 로그인하기 사용"WebApiConfig.cs의 독립 7) 정식 버전, 특별히 웹 API 라우팅 설정8). 편안하고 API를 구현, 권한 검증을 추가해야합니다피들러 시뮬레이션 POST와 9). 쇼케이스, PUT, 매우 편리 요청 작업을 편안하고 API를 삭제10). 웹 API는 이미 OData를 제거하는 공식 버전 (만기보다 적은 것이다)를 지원합니다. 당신이 원하는 경우에, NuGet OData를 설치 (현재 시험판, 시험판 버전)에서 얻을. 매개 변수 : $ 상단 건너 $ $ 필터, $ ORDERBY11). CSS와 JS 압축 묶기와 압축 포장◦ 새로운 ScriptBundle ( "~ / 번들 / JQuery와") <-이 물리적 존재를 가질 수 없습니다◦ 포함 ( "~ / Scripts/jquery- {버전}. JS")◦ 포함 ( "~ / 스크립트 / JQuery와 모바일 *. JS")◦ IncludeDirectory ( "~ / 스크립트", "테스트 *", TRUE)◦ bundles.UseCdn = true를 여전히 포함 추가 할 기본 버전을 사용하는 CDN 장애. 기본값은 무시 Intellisense.js,-vsdoc.js, min.js, debug.js ... 정의 : ◦ 사용자 지정 목록을 무시12.) 비동기 지원 : 비동기, 사건을 기다리고 NET 4.5 새로운 기능 MVC4 기본 NET 4, 상승 기다리고 있습니다 / 비동기 사용 4.5. NET..13) MVC4 공식 버전 :. 오픈 컨트롤러는 컨트롤러 폴더를 배치 할 필요가 없습니다14.) AllowAnonymous 속성 : 클래스에 몇 가지 방법의 작성에, [권한 부여]를 [AllowAnonymous]15). _references.js 모든 JS <references>에서 작성 IntelliSense를 참조 JS, 11이 아니라 선언 된. 16) 페이지 관리자 : VS2012 새로운 기능, DOM 요소를 검사가 자동으로 Vew 또는 MVC에 특히 편리한 부분 뷰 위치에 매핑됩니다. 파일 탭은 목록 _Layout.cshtml, Index.cshtml ... 모두 사용 프로필보기
****使用HTML5~來開發友善的網頁^~!**Use HTML5 ~ to develop user-friendly web ^~!**사용 HTML5 사용자 친화적 인 웹을 개발하기
^~!**THE END~**
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
