iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

4 Like 0 留言 12039 瀏覽

鐵人賽開發技術 DAY 1

你不能不知道的Polymer開發實戰系列第 1 篇

技術 Polymer 簡介

開發Web前端，應該很常聽到 AngularJS，Google一推出就造成轟動。但是較少人知道Google去年也推出了Polymer，由於這算是比較前瞻性的東西...

martyshu ‧ 2014-09-21

5 Like 1 留言 10532 瀏覽

鐵人賽開發技術 DAY 17

你不能不知道的Polymer開發實戰系列第 17 篇

技術用 JavaScript 實現人臉追蹤

今日目標: 學習如何使用強大的電腦視覺元件 [線上試玩] 用顏色物體控制企業號前進 (粉紅色、青綠色、黃色) 一、tracking.js 網站介紹 t...

martyshu ‧ 2014-10-07

3 Like 2 留言 5658 瀏覽

鐵人賽開發技術 DAY 16

你不能不知道的Polymer開發實戰系列第 16 篇

技術 VoiceTube元件解析 - 了解組裝元件的開發方式

今日目標: 了解源代碼與組裝元件的開發方式一、元件結構目前使用的元件清單如下 <voice-tube> 負責整合抓取字幕、youtube影片...

martyshu ‧ 2014-10-06

1 Like 0 留言 5460 瀏覽

鐵人賽開發技術 DAY 2

你不能不知道的Polymer開發實戰系列第 2 篇

技術 Polymer 安裝

今日目標: 完成本機Polymer安裝雖然我們可以藉由雲端工具淺嚐Polymer開發，例如JSBin、CodePen等，或是可直接拖拉Polymer元件的EZ...

martyshu ‧ 2014-09-22

4 Like 0 留言 5136 瀏覽

鐵人賽開發技術 DAY 10

你不能不知道的Polymer開發實戰系列第 10 篇

技術用RWD讓悟空變身

今日目標: 學習 Template auto-binding + core-media-query 元件今天我們要整合底下三樣素材, 目標就是讓悟空可以隨著螢...

martyshu ‧ 2014-09-30

3 Like 31 留言 4738 瀏覽

鐵人賽開發技術 DAY 3

你不能不知道的Polymer開發實戰系列第 3 篇

技術 Polymer 淺嚐元件使用

今日目標: 了解與使用GoogleMap元件今天就來感受一下使用元件的快感，昨天雖然裝完Polymer核心和Marterial元件後，已經有數十個元件可以使用...

martyshu ‧ 2014-09-23

2 Like 1 留言 4133 瀏覽

鐵人賽開發技術 DAY 30

你不能不知道的Polymer開發實戰系列第 30 篇

技術 Polymer 30天全面解析

整理分享30天文章與範例，從入門、進階、範例等循序漸進方式介紹，讓開發者能一窺Polymer全貌、快速入門 = 一、入門篇官網使用介紹使用介紹有 30秒、...

martyshu ‧ 2014-10-20

3 Like 0 留言 3823 瀏覽

鐵人賽開發技術 DAY 15

你不能不知道的Polymer開發實戰系列第 15 篇

技術自己的英文自己救~結合VoiceTube

今日目標: 開發練習英文聽力的Web應用線上試玩今天我們進一步整合google-youtube元件，以及voicetube網站提供的字幕，使用Polyme...

martyshu ‧ 2014-10-05

1 Like 0 留言 3601 瀏覽

鐵人賽開發技術 DAY 5

你不能不知道的Polymer開發實戰系列第 5 篇

技術 Polymer 自定HTML標籤-GoogleMap三重奏(上)

今日目標: 動手打造自己專屬的HTML標籤 [線上執行範例] [程式碼] google-map-x3 這HTML標籤可以同時顯示三個不同地圖面貌，分別街道+衛星...

martyshu ‧ 2014-09-25

2 Like 0 留言 3212 瀏覽

鐵人賽開發技術 DAY 28

你不能不知道的Polymer開發實戰系列第 28 篇

技術 Material Design - 自適應(RWD)鍵盤，有這種事?

今日目標: 拿計算機元件，組裝出RWD鍵盤自適應(RWD)網站、(RWD)圖片相信大家都聽過，但是RWD鍵盤沒聽過吧....今日就讓我們用昨日計算機的key...

martyshu ‧ 2014-10-18

2 Like 0 留言 3070 瀏覽

鐵人賽開發技術 DAY 27

你不能不知道的Polymer開發實戰系列第 27 篇

技術 Material Design - 案例研究(HTML結構)

今日目標: 深入了解Polymer官網的計算機案例 [線上試玩] Polymer官網使用了Material Design開發兩個應用範例，充分展現了組裝元件式...

martyshu ‧ 2014-10-17

1 Like 0 留言 3001 瀏覽

鐵人賽開發技術 DAY 4

你不能不知道的Polymer開發實戰系列第 4 篇

技術 Polymer 元件應用

今日目標: 完成 GoogleMap + MarterialDesign 元件互動今天就來感受一下Polymer的template與data-binding的...

martyshu ‧ 2014-09-24

1 Like 0 留言 2988 瀏覽

鐵人賽開發技術 DAY 11

你不能不知道的Polymer開發實戰系列第 11 篇

技術使用Polymer也要顧門面 (Layout)

今日目標: 學習 Polymer Layout各種使用方式 Polymer提供了聲明式的佈局宣告，是基於 CSS Flexbox 建構而成，透過Polymer加...

martyshu ‧ 2014-10-01

6 Like 4 留言 2770 瀏覽

鐵人賽開發技術 DAY 14

你不能不知道的Polymer開發實戰系列第 14 篇

技術鐵人賽分享徽章又不見了? 沒關係，有產生器

今日目標: 打造鐵人賽挑戰徽章產生器鐵人賽寫了14天，習慣每次寫完後，得到當天的挑戰徽章，就分享到FB。可是不知道是不是我的Chrome相容性不好，好幾次鐵人...

martyshu ‧ 2014-10-04

2 Like 0 留言 2767 瀏覽

鐵人賽開發技術 DAY 25

你不能不知道的Polymer開發實戰系列第 25 篇

技術 Material Design - 可捲動標題面板

= 今日目標: 了解 <core-scroll-header-panel> 元件與用法 scroll-header-panel 捲動標題面板，是...

martyshu ‧ 2014-10-15

1 Like 0 留言 2711 瀏覽

鐵人賽開發技術 DAY 29

你不能不知道的Polymer開發實戰系列第 29 篇

技術最終還是要打包

今日目標: 使用Polymer Vulcanize 打包，了解如何使用Yeoman 使用Polymer開發Web應用，元件慣例是一個html檔案存放，方便管理...

martyshu ‧ 2014-10-19

1 Like 1 留言 2687 瀏覽

鐵人賽開發技術 DAY 21

你不能不知道的Polymer開發實戰系列第 21 篇

技術打造鐵人賽積分排行榜 (應用篇)

今日目標: 用Polymer開發鐵人賽積分排行榜想不想看目前各組鐵人積分排名? 很想對不對? 好，雖然IT鐵人賽官方網頁沒公佈，但資料倒是很齊全。所以今天就...

martyshu ‧ 2014-10-11

3 Like 1 留言 2683 瀏覽

鐵人賽開發技術 DAY 19

你不能不知道的Polymer開發實戰系列第 19 篇

技術 AngularJS 的後宮佳麗 (上)

今日目標: 在 AngularJS 中使用 Polymer 元件本來題目想寫AngularJS與PolymerJS聯姻，但說聯姻好像不大對，Polymer比較...

martyshu ‧ 2014-10-09

3 Like 0 留言 2484 瀏覽

鐵人賽開發技術 DAY 9

你不能不知道的Polymer開發實戰系列第 9 篇

技術 Model、View 同步的各種方式 (3/3)

今日目標: 了解Model與Template 的多種綁定方式 Material Design 重裝上陣今天將水果籃結合了最潮的 Google Material...

martyshu ‧ 2014-09-29

2 Like 0 留言 2306 瀏覽

鐵人賽開發技術 DAY 7

你不能不知道的Polymer開發實戰系列第 7 篇

技術 Model、View 同步的各種方式 (⅓)

今日目標: 了解Model與Template 的多種綁定方式瀏覽器根據DOM結構繪製畫面的長相，所以只要改變DOM就能更新View，而資料則是放在Model裏...

martyshu ‧ 2014-09-27

2 Like 0 留言 2293 瀏覽

鐵人賽開發技術 DAY 24

你不能不知道的Polymer開發實戰系列第 24 篇

技術 Material Design - Rippe效果

今日目標: 了解Ripple效果並包裝成img-ripple元件分享Polymer 20幾天，是該來談談 Google 今年推出的 Material Des...

martyshu ‧ 2014-10-14

4 Like 2 留言 2279 瀏覽

鐵人賽開發技術 DAY 23

你不能不知道的Polymer開發實戰系列第 23 篇

技術打造鐵人卡片元件

今日目標: 包裝鐵人卡片元件鐵人卡片 <itironman-card> [線上試玩] **** [Github] **** 卡片很多..要稍...

martyshu ‧ 2014-10-13

2 Like 0 留言 2255 瀏覽

鐵人賽開發技術 DAY 13

你不能不知道的Polymer開發實戰系列第 13 篇

技術來點實際應用 - 出英文考題 (電腦請評分)

今日目標: 學習拿Polymer做實際應用 [線上試玩] <x-sentence> 這標籤可以用來輸入英文整句句子，並即時與正確答案進行比對，而且...

martyshu ‧ 2014-10-03

1 Like 0 留言 2185 瀏覽

鐵人賽開發技術 DAY 20

你不能不知道的Polymer開發實戰系列第 20 篇

技術 AngularJS 的後宮佳麗 (下)

今日目標: 了解Polymer 元件和AngularJS Directive元件的差異昨天的說明在AngujarJS裏面可以直接使用Polymer元件，取代...

martyshu ‧ 2014-10-10

2 Like 0 留言 2158 瀏覽

鐵人賽開發技術 DAY 26

你不能不知道的Polymer開發實戰系列第 26 篇

技術 Material Design - 對話框

今日目標: 了解 <paper-dialog> 元件與用法 Dialog 是很常見的元件形態，那套上了Material Design又有什麼特別...

martyshu ‧ 2014-10-16

1 Like 0 留言 2110 瀏覽

鐵人賽開發技術 DAY 12

你不能不知道的Polymer開發實戰系列第 12 篇

技術來點實際應用 - 出英文考題

今日目標: 學習拿Polymer做實際應用先來看看實際應用的小範例 (翻譯練習) [線上試玩] 自訂HTML標簽 <x-word>...<...

martyshu ‧ 2014-10-02

3 Like 0 留言 2091 瀏覽

鐵人賽開發技術 DAY 18

你不能不知道的Polymer開發實戰系列第 18 篇

技術我所知道的元件聖殿、傳教士、軍火庫

今日目標: 了解元件大本營和各地軍火庫、威力強大的武器包裝成WebComponent，polymer不是第一家，但在Google加持下，的確有可能成為最大的一...

martyshu ‧ 2014-10-08

2 Like 0 留言 2068 瀏覽

鐵人賽開發技術 DAY 22

你不能不知道的Polymer開發實戰系列第 22 篇

技術打造鐵人賽積分排行榜 (D3元件)

今日目標: 了解如何包裝 D3 視覺化元件視覺化元件 <d3-flare> 這元件功能是顯示目前鐵人賽各組參與人數，以及積分的視覺化效果。...

martyshu ‧ 2014-10-12

2 Like 0 留言 1954 瀏覽

鐵人賽開發技術 DAY 6

你不能不知道的Polymer開發實戰系列第 6 篇

技術 Polymer 自定HTML標籤-GoogleMap三重奏(下)

今日目標: 了解元件包裝原始碼延續昨天範例，接下來說明元件完整程式碼 [線上範例] 第1行是載入polymer基本元件與polymer核心程式第2行是載...

martyshu ‧ 2014-09-26

2 Like 0 留言 1898 瀏覽

鐵人賽開發技術 DAY 8

你不能不知道的Polymer開發實戰系列第 8 篇

技術 Model、View 同步的各種方式 (⅔)

今日目標: 了解Model與Template 的多種綁定方式接續昨天例子，接下來我們進一步將template repeat , model 封裝到元件中綁定...

martyshu ‧ 2014-09-28

技術 Polymer 簡介

技術 用 JavaScript 實現人臉追蹤