//Build/ 2014 第一天 Keynote 重點整理 (上)

//Build/ 是微軟年度的開發者大會,今年在舊金山舉行,而在第一天的 Keynote 大會演講之中,揭露了不少 Windows、Windows Phone、XBOX ONE 以及 Windows IoT (Internet of Things, 物聯網) 的更新及展望。您也可以在 Channel 9 上面看到整個大會的錄影(包含 Keynote 及分堂課程)。以下則為第一天 Keynote 的重點整理: 索引 Windows Phone 8.1 Windows 8.1 更新 這次在 Channel 9 上直播大會演講,使用了語音辨識的技術即時在影片播放時產生字幕(如果您有在 Channel 9 上收看影片,可以注意播放器下方有個 CC 按鈕,就是用來開關字幕),並且同步翻譯成幾種其它語言的字幕。On-demand 的影片則未提供字幕。 Windows Phone 8.1 首先開場的是 Windows Phone 8.1 的介紹,今天宣佈了更多加入 Windows Phone 的 OEM 夥伴(比起稍早在 MWC2014 上宣佈的又再多了 2…

0

打造 Windows 8 的 Modern IE 10 完美網頁

Windows 8 內建兩種 Internet Explorer 10 (以下簡稱 IE10),一個是在桌面環境下使用的 IE10:視窗操作、可以支援各種 Plugins (ActiveX);而另外一個則是在新的開始畫面中的 IE10 (稱作 Modern IE10):它無邊框、更適合觸控操作、以及整合 Windows 8 的各種新功能特色。這篇文章將為網頁開發人員介紹,如何為 Modern IE10 打造完美網頁。 Internet Explorer 技術展示網頁 目錄 使用 HTML5 相關技術 運用 CSS3 作樣式設計 關於 Flash 支援 適應瀏覽模式 Landscape 或 Portrait 模式 貼齊 (snapped) 或填滿 (fill) 顯示 為觸控操作優化 友善表單輸入 觸控及手勢操作 融合於 Windows 8 分享網頁內容 釘選網站及跳躍清單 與 Windows 市集結合…

0

迎接 Internet Explorer 10 Platform Preview 1

雖然 Internet Explorer (IE) 9 最近才釋出正式版,不過 IE 的開發團隊可沒閒著,繼續推出了 Internet Explorer 10 的第一個預覽版本(IE10 PP1),有興趣的人可以前往這裡下載。 IE10 PP1 有幾項更新,主要是對於更多 CSS3 模組的支援,像是: 浮動式區塊排版(Flexible Box Layout) 這項功能主要是解決了不同區塊(block)在頁面上水平或垂直排版的問題。在這項支援之前,你只能將一個區塊設定成 inline、block、或是 inline-block(設定 CSS 的 display 屬性),但這樣還是不夠,比方說 inline 不能設定高度、block 一定會換行(水平不能接續其它區塊),而 inline-block 不能自動延展,更別提區塊間的對齊問題,過去總是要使用一堆奇技淫巧才能致始某個區塊能水平垂直置中。在有了 flexible box layout 之後,只需要調整 CSS 屬性便可。 格子對齊(Grid Alignment) 格子(Grid)有點像表格(table),但是它比表格更有彈性。你可以將一個區塊的 display 屬性設定成 -ms-grid(其它的瀏覽器可能是 -moz-grid 或 -webkit-grid,在標準尚未定案前,都得加上這些瀏覽器的綴字),然後就可以指定某個區塊佔有幾列(row)幾行(column)的大小,不必像表格那樣,使用 <td> 標籤只能有一列一行的大小。 多欄式排版(Multi-column) 如果你有讀過報紙、或是論文,可能有看過文章內容會分成多欄式呈現,這項支援將讓您可直接利用 CSS 來調整內容排版的欄數。 色彩漸層(Gradients)…

0

IE9 的鎖定網站及跳躍清單(下)

在前一篇文章中介紹了鎖定網站中可以使用 <meta> 標籤來建立跳躍清單中的工作。這一篇文章將介紹如何利用 JavaScript 來製作動態的跳躍清單選項。 判斷是否已被鎖定 網頁開發者可以利用 JavaScript 來判斷目前網站是否已經被使用者鎖定(pinned),只要利用 window.external.msIsSiteMode() 方法: // 檢查是否有定義 window.external.msIsSiteMode if (window.external && window.external.msIsSiteMode && window.external.msIsSiteMode()) { // 是鎖定的網站 } 如此一來,在確定使用者已經鎖定網站之後,以下的動作才有意義。 建立自訂的工作類別 使用 <meta> 標籤所建立的跳躍清單選項,都會被置放於「工作」(Tasks)的類別下,如果網頁開發者想要自行建立類別,則可以透過 JavaScript 呼叫 window.external.msSiteModeCreateJumpList 方法: if (window.external.msIsSiteMode()) { window.external.msSiteModeCreateJumpList(“我的自訂類別"); …. } 參數就是自訂類別的名稱,若參數為空白,則表示移除所有的自訂類別。 加入自訂的工作項目 建立了自訂類別之後,若要再加入自訂的動作,則是使用 window.external.msSiteModeAddJumpListItem() 方法來加入工作項目: if (window.external.msIsSiteMode()) { var ex = window.external; ex.msSiteModeCreateJumpList(‘我的自訂類別’); ex.msSiteModeAddJumpListItem(‘Action 1’, ‘http://www.example.com/path/to/action1’,…

0

IE9 的鎖定網站及跳躍清單(上)

IE9 結合了 Windows 7 的一個新功能,就是能將你喜愛的網頁如同應用程式捷徑一樣「釘選」(pin)在 Windows 工作列上,只要將 IE9 中的網站頁籤拖拉至工作列,便會有提示的畫面告訴你能釘在哪裡。 完成釘選後,工作列上便會多出一個圖示(與網站的 favicon 相同,所以 favicon.ico 最好有 32×32 大小的圖案),日後就可以直接點選這個圖案來開啟頁面。 不過,釘選圖示不是只有這麼簡單的捷徑功能,除了會在你開啟程式時,滑鼠游標移到圖案上時會有畫面縮圖之外,在釘選圖案上按下右鍵還會出現一個「跳躍清單」(jump list),裡面則可以放上更多的「捷徑」或是網站上的「動作」。    而跳躍清單上的「工作」(Tasks)部份其實是網站可以自行提供的,只要在首頁(通常使用者釘選的是首頁)使用 <meta name="msapplication-task" content="…."> 這個標籤來定義,以 Facebook 為例,它定義的工作如下:(請將 content 中的內容連接起來不要空行) <meta name="msapplication-task" content="name=新聞;action-uri=/home.php?sk=nf;icon-uri=/images/icons/app/news.ico"/> <meta name="msapplication-task" content="name=訊息;action-uri=/home.php?sk=inbox;icon-uri=/images/icons/app/messages.ico"/> <meta name="msapplication-task" content="name=活動;action-uri=/home.php?sk=events;icon-uri=/images/icons/app/events.ico"/> <meta name="msapplication-task" content="name=朋友action-uri=/home.php?sk=fr;icon-uri=/images/icons/app/friends.ico"/> 在這個標籤中,網頁開發者可以由 content 屬性指定「name=名稱」、「action-uri=對應的網址(URI)」、「icon-uri=圖案網址(URI)」,也可以指定「window-type=tab|self|window」用來指定這個動作要以新頁籤、原頁籤還是新視窗來開啟。 (待續)   延伸閱讀:MSDN: Adding Tasks to a Jump List

0

Internet Explorer 9 (IE9) 的相容性檢視

Internet Explorer 9 (以下以 IE9 稱之)終於釋出正式版本了,只要是使用 Windows Vista、Windows 7 及 Windows Server 2008 的用戶皆可以升級這個最新版本的瀏覽器。 IE9 最大的特色就是開始支援部份 HTML5 及 CSS3 的規格標準,對於網頁開發者來說,除了可以藉用 IE9 來嚐試新的網頁標準之外,更可以拿它來作為與前幾代 IE 的相容性檢查的的工具,一般的使用者也可以利用這個功能來試著瀏覽只能在舊版本 IE 瀏覽的網頁。以下分別為這兩個族群的使用者來簡單介紹一下「相容性檢視」這個功能。 一般使用者 如果開始使用 IE9 之後,發現原本看得好好的網頁版面突然亂掉了,在經過幾次重新整理(按 Ctrl + F5)後還是不見改善的話,可以嚐試使用相容性檢視的功能,如果網址列上出現這樣的圖案: 網址列上的相容性檢視按鈕 那就可以試著按下,看看網頁是不是排版就正常許多了呢。如果你不確定自己現在是用哪一個版本的 IE 瀏覽器來檢視網頁的話,也可以按下鍵盤上的 F12 功能鍵,啟動開發人員工具,這時便可以確定目前是用哪一個模式來瀏覽網頁了。 利用開發人員工具切換瀏覽器模式 如此一來應該可以解決許多網頁排版亂掉的問題。而更重要的是,如果已經使用 IE9 了,卻無法瀏覽(或是出現不支援字樣)宣稱利用 HTML5 相關技術的網頁時,也別忘了利用這個工具看看文件模式是否已經切換至「Internet Explorer 9 標準」。   網頁開發者 身為網頁開發者,在知道 IE9 有這樣相容性檢視的功能後,在網頁原始碼中要注意幾個部份,才不會讓使用者使用了錯誤的瀏覽模式來瀏覽網頁。 首先要注意的是,網頁原始碼中,第一行一定要加上正確的 doctype…

0