# Develop Samsung Smart TV Apps 由於最近應公司需求而開始要開發 Samsung 的 Smart TV 上的 App 身為一個前端攻城獅要去開發電視的 App? 沒想到 Smart TV 的 App 竟然是用前端技術寫的(HTML, JavaScript, CSS) Smart TV 是 base on Linux 所以效能似乎 OK? 於是就來研究一下 SAMSUNG SMART TV APPS Developer Forum 載 SDK 與 TV 模擬器(除非 money 多多直接買一台 Smart TV, 不過有開發過 Android 的都知道 模擬器都是假的 ) SDK Download(Software development kit) 載 virtualBox Oracle VM VirtualBox
## 建立開發環境 裝 virtualBox 開 SDK(用超吃資源的 eclipse Orz) 開 virtualBox, 掛 Smart TV Emulator 檔案 -> 匯入應用裝置(選擇下載的 Smart TV Emulator) 設定值 -> 共用資料夾 -> 編輯(資料夾名稱 / Apps, 資料夾路徑 / /Users/tedshd/Documents/workspace (SDK workspace 路徑)) ## 開始開發 懶得看下去有 YouTube 影片 Samsung smart tv development tutorial - 01 Samsung smart tv development tutorial - 02 Samsung smart tv development tutorial - 03 GTUG 的 Samsung Smart TV開發簡介 圖文版
...
# CSS - Opacity effect child element 在利用 opacity 做背景時常遇到個問題就是子元素也被設置 opacity 這時就可以利用 CSS 的 :before 或 :after
<div class="bg-2"> <h2>Title</h2> <p>Content</p> <img src="http://blog.soonr.com/wp-content/uploads/2013/03/Google-Play-Badge.png" alt="google play" /> </div> .bg-2 { position: relative; &:before { content: ""; z-index: -99; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; @include opacity(0.8); } } CodePen
See the Pen qeojf by Ted (@tedshd) on CodePen
...
# Website switch layout 之前看過不少網站有切換 layout 的功能 於是就試著做做看
Demo
主要利用定義在 body 上的 class 去做不同 layout 的切換
Sample code
var node; function node(selector) { return document.querySelector(selector); } // set style var layoutList = 'layoutList', layoutGrid = 'layoutGrid', layoutFull = 'layoutFull', layoutCard = 'layoutCard'; function changeLayout(style) { // maybe make loading? node('body').setAttribute('class', style); } // bind click change style node('#style_1').addEventListener('click', function () { changeLayout(layoutGrid); }); node('#style_2').addEventListener('click', function () { changeLayout(layoutList); }); node('#style_3').
...
# Detect mobile device Use PHP or JavaScript detect mobile device like iPhone, iPad, iPod or Android…
## Android ### PHP <?php $ua = strtolower($_SERVER['HTTP_USER_AGENT']); if(stripos($ua, 'android') !== false) { echo 'Android!!'; exit; } ?> ### JavaScript var ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("android") > -1) { document.write('Android!!'); } Refer - Android Detection with JavaScript or PHP
## Apple mobile device Refer - How to detect iPhone, iPod and iPad with PHP Refer - How to Identify an Apple iPhone, iPod or iPad Visitor to Your Website
...
# JavaScript - Easy to get DOM It is old way to use getElementById, getElementsByTagName …
New method is use querySelector and querySelectorAll
If use IE, it only for IE8 up.
Make them as a method
var node; function node(selector) { if (selector.indexOf('.') === -1) { if (document.querySelectorAll(selector).length === 1) { return document.querySelector(selector); } return document.querySelectorAll(selector); } return document.querySelectorAll(selector); } And then use it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>querySelector</title> </head> <body> <div id="box" class="area"> test </div> <div class="area"> test2 </div> <div id="selector" class="area"> <p class="con"> content </p> </div> </body> <script> var node; function node(selector) { if (selector.
...
# Google map api - research log ## Introduction 使用 Google Maps JavaScript v3 static map 嵌入地圖到網頁中以圖片方式呈現 使用限制 基本上不要一日載超過 25000 次都沒事 區域化 - 語系
Library
## Init map <!DOCTYPE html> <!--使用 <!DOCTYPE html> 宣告，將應用程式宣告為 HTML5--> <html> <head> <meta charset="utf-8"> <title>Google_map_api_basic</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!--最新的瀏覽器會將使用此 DOCTYPE 宣告的內容以「標準模式」呈現，也就是說，您的應用程式應更具備跨瀏覽器相容性。此外，DOCTYPE 也設計成會逐漸適應，但無法理解它的瀏覽器將會忽略它，而採用「快速模式」顯示內容。請注意，有些 CSS 在快速模式中可以運作，但在標準模式中卻無效。具體來說，所有百分比的大小都必須繼承父區塊項目，但這些上階中如有任何一個無法指定大小，就會假設為 0 x 0 像素大小。基於這個理由，我們加入了下列 <style> 宣告--> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; } #map_canvas { height: 100%; } </style> <!
...
# Facebook api get UID & AccessToken Build App in facebook APP_ID is a facebook App id Must set facebook App’s web url and use code in it’s domain <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fb_oauth</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <div id="fb-root"></div> <p> <input id="FBLogin" type="button" value="登入臉書" /> </p> <p> <span id="uid"></span> <br> <span id="accessToken"></span> </p> </body> <script src="http://connect.facebook.net/zh_TW/all.js"></script> <script> FB.init({ appId: 'APP_ID', status: true, cookie: true, xfbml: true, oauth: true }); $('#FBLogin').
...
# Sass compile two spaces Use Sass compile to css css lndent is 2 spaces if want 4 spaces Must modify this sass source code
sass-3.2.10/lib/sass/tree/visitors/to_css.rb # before tab_str = ' ' * (@tabs + node.tabs) # after tab_str = ' ' * (@tabs + node.tabs) Refer - Change indentation in Sass
...
# JavaScript - Event event type 事件名稱
event target 事件發生在哪一個目標上
event handler or listener 處理或回應的 function, 即監聽或註冊事件
event object 與事件關聯的物件
event propagation 氣泡(bubble)現象
default actions 觸發事件時的預設行為, 有時必須取消該行為
## GlobalEventHandlers HTML <button id="btn">Click</button> JavaScript var nodeBtn = document.getElementById('btn'); nodeBtn.onclick = function (e) { alert('ok'); }; ## event HTML <button id="btn">Click</button> Use addEventListener(only IE9 up) addEventListener
JavaScript var nodeBtn = document.getElementById('btn'); nodeBtn.addEventListener('click', function () { alert('ok'); }); ## delegate If use dynamic page the dom maybe not init in the page load So use delegate
...
# Android - Note(view) src java
res
drawable layout values view
px2dpi
...