Archive

Archive for the ‘Coding’ Category

中文 Android 程式編寫網上資源

May 12, 2013 Leave a comment

Gasolin

其他:

國外:

Advertisements
Categories: Coding

Bookmarklets on Android

March 8, 2013 1 comment

Bookmarklet是輕量級JavaScript程式,由於以網址(URL)的形式被存為瀏覽器中的書籤,因此被稱為Bookmarklet。桌面瀏覽器大多支援Bookmarklet,但支援Bookmarklet的手機瀏覽器不算多,蘋果的手機版Safari就是其中之一。以往一直沒在手機上用過,但最近使用Naked Browser,預載了Translate以及Clear Cache兩個Bookmarklet,就重拾起用Bookmarklet的樂趣,隨後發現原來Chrome以及Dolphin都支援Bookmarklet,只是自己一直沒有留意罷了。

利用不同搜尋引擎搜尋 

桌面版Chrome其中之一大特點是Omnibar,可以在網址搜尋列「輸入搜尋引擎+Tab+關鍵字」,就會在該搜尋引擎中搜尋關鍵字,例如「”Youtube”+Tab+”Dogs”」就會在Youtube中搜尋有關狗的影片。而且,在設定(chrome://settings/searchEngines)中可管理搜尋引擎。搜尋引擎無所不包,上至Youtube、Yahoo,下至某個人博客,Chrome都可以自動加入,完成毋須用戶操勞。

不過我用得更多的,其實是功能類似,之前介紹過的Mulit Search,選取頁面上的文字後,只要右按滑鼠再選取搜尋引擎,就可以在該搜尋引擎中搜尋選取的文字,極之方便,不過加入搜尋引擎的方式比較麻煩,要用家自己處理一堆程式碼。

來到手機,沒有了OmniBar以及Multi Search,確實不慣,不過透過Bookmarklet實現接近功能!

更新:實際試用後發現不是每個瀏覽器用每個Bookmarklet都可以。搜尋類Bookmarklets似乎只在Chrome成功,但Dolphin和Naked瀏覽器都不成功;後來嘗試修改原本的Javascript,成功令Youtube/Wikipedia搜尋的Bookmarklet在Naked Browser上運行,後者更加入中文版。至於Pocket,就三個都成功,不過Chrome要巧妙地在Omnibar輸入關鍵字方式點選,否則Chrome只會在新分頁開啟書籤,令Add to Pocket失效。

更新2:後來又發現Bookmarklet搜尋英文可以,但中文會出現亂碼,原來問題出於escape()上,只要改為encodeURIComponent()就可以解決。

Google Search

  • javascript:q=”+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);if(!q)q=prompt(‘Enter your search here’,”);if(q!=null)location=’http://google.com/search?query=’+encodeURIComponent(q).replace(/ /g,’+’)+’&num=10′;void 0

Google In Site Search

Youtube Search

Wikipedia Search

其實其餘網站的搜尋功能,都可輕易製作Bookmarklet,不過個人沒有需要,常用的其實只有Google/Youtube/Wikipedia幾個,需要的時候再製作吧!

其他實用功能

除了用其他搜尋引擎進行搜尋外,Bookmarklet尚有很多意想不到的功能,實用程度媲美桌面瀏覽器的Extensions以及Greasemonkey。

眾多功能中,個人最看重「Add to Pocket」,因為透過「分享」再選擇「Pocket」,不會將記錄網頁標題,而會直接將網址當作標題,以致在閱覽未讀清單時,常常不知某連結的內容是甚麼,大為費解。在桌面版Chrome一直直接使用Bookmarklet,可以在手機版直接用實在太好了。

Add to Pocket

  • javascript:(function(){ISRIL_H=’1164′;PKT_D=’getpocket.com’;ISRIL_SCRIPT=document.createElement(‘SCRIPT’);ISRIL_SCRIPT.type=’text/javascript’;ISRIL_SCRIPT.src=’http://’+PKT_D+’/b/r.js’;document.getElementsByTagName(‘head’)[0].appendChild(ISRIL_SCRIPT)})();

Translate

Increment

  • javascript:(function(){var e,s;IB=1;function isDigit(c){return (“0″<=c&&c<=”9”)}L=location.href;LL=L.length;for(e=LL-1;e>=0;–e)if(isDigit(L.charAt(e))){for(s=e-1;s>=0;–s)if(!isDigit(L.charAt(s)))break;break;}++s;if(e<0)return;oldNum=L.substring(s,e+1);newNum=””+(parseInt(oldNum,10)+IB);while(newNum.length<oldNum.length)newNum=”0″+newNum;location.href=L.substring(0,s)+newNum+L.slice(e+1);})();

Decrement

  • javascript:(function(){var e,s;IB=-1;function isDigit(c){return (“0″<=c&&c<=”9”)}L=location.href;LL=L.length;for(e=LL-1;e>=0;–e)if(isDigit(L.charAt(e))){for(s=e-1;s>=0;–s)if(!isDigit(L.charAt(s)))break;break;}++s;if(e<0)return;oldNum=L.substring(s,e+1);newNum=””+(parseInt(oldNum,10)+IB);while(newNum.length<oldNum.length)newNum=”0″+newNum;location.href=L.substring(0,s)+newNum+L.slice(e+1);})();

View Source

  • javascript:(function(){c=unescape(document.documentElement.innerHTML);c=c.replace(/&/g,’&’);c=c.replace(//g,’>’);c=c.replace(//g,’>’);document.write(‘Source of Page<\/title><\/head><pre>’+c+'<\/pre><\/body><\/html>’);x.document.close();})();</pre>
  • javascript:window.open(”).document.write(‘<html><head><title>page source</title></head><body><pre style=”border:1px solid #099;width:80%;white-space:pre-wrap;word-wrap:break-word”>’+unescape(document.documentElement.innerHTML).replace(/</g,’&lt;’).replace(/>/g,’&gt;’)+'</pre></body></html>’)
    (由http://nakedbrowser.com/android/help.html提供)

Remove Cookies

  • javascript:(function(){C=document.cookie.split(“; “);for(d=”.”+location.host;d;d=(“”+d).substr(1).match(/\..*$/))for(sl=0;sl<2;++sl)for(p=”/”+location.pathname;p;p=p.substring(0,p.lastIndexOf(‘/’)))for(i in C)if(c=C[i]){document.cookie=c+”; domain=”+d.slice(sl)+”; path=”+p.slice(1)+”/”+”; expires=”+new Date((new Date).getTime()-1e11).toGMTString()}})()
    (由http://nakedbrowser.com/android/help.html提供)

棄用Dolphin瀏覽器

之好有好長一段時間,使用Dolphin瀏覽器,因其擁有不少Extensions,其實亦只是加了「Add to Pocket」、「Youtube Search」、「Smart Search」以及「Remember Password」罷了。既然Bookmarklet可以將以上功能全部實現(除了記憶密碼),那麼Dolphin瀏覽器就沒有留下的必要了。

而且,Dolphin瀏覽器會紀錄瀏覽蹤跡,除了私隱問題外,亦會拖慢載入速度,因為要傳送額外資料去其他伺服器。相比之下,Naked Browser實在太爽快了!

參考資料:
http://www.squarefree.com/bookmarklets/
http://www.appinn.com/bookmarklet/
http://subsimple.com/bookmarklets/jsbuilder.htm
http://nakedbrowser.com/android/help.html

XPath

January 29, 2013 Leave a comment

//a[@class=’PinImage ImgLink’]
(Selects all ‘a’ elements that have the attribute ‘class’ with a value of ‘PinImage ImgLink’)

忽發奇想要探究Yahoo Pipes,遇見XPath無解,唯有臨陣磨槍,邊邊做。幸好有一點兒HTML以及Javascript以及jQuery的底子,大部分概念如Parent、Siblings可以觸類旁通。

XPath is used to navigate through elements and attributes in an XML document.

Selecting Nodes
nodename Selects all nodes with the name “nodename”
/ Selects from the root node
// Selects nodes in the document from the current node that match the selection no matter where they are
. Selects the current node
.. Selects the parent of the current node
@ Selects attributes
bookstore Selects all nodes with the name “bookstore”
/bookstore Selects the root element bookstore
bookstore/book Selects all book elements that are children of bookstore
//book Selects all book elements no matter where they are in the document
bookstore//book Selects all book elements that are descendant of the bookstore element, no matter where they are under the bookstore element
//@lang Selects all attributes that are named lang

Predicates
/bookstore/book[1] Selects the first book element that is the child of the bookstore element.
/bookstore/book[last()] Selects the last book element that is the child of the bookstore element
/bookstore/book[last()-1] Selects the last but one book element that is the child of the bookstore element
/bookstore/book[position()<3] Selects the first two book elements that are children of the bookstore element
//title[@lang] Selects all the title elements that have an attribute named lang
//title[@lang=’eng’] Selects all the title elements that have an attribute named lang with a value of ‘eng’
/bookstore/book[price>35.00] Selects all the book elements of the bookstore element that have a price element with a value greater than 35.00
/bookstore/book[price>35.00]/title Selects all the title elements of the book elements of the bookstore element that have a price element with a value greater than 35.00

Selecting Unknown Nodes
* Matches any element node
@* Matches any attribute node
node() Matches any node of any kind
/bookstore/* Selects all the child nodes of the bookstore element
//* Selects all elements in the document
//title[@*] Selects all title elements which have any attribute

Selecting Several Paths
//book/title | //book/price Selects all the title AND price elements of all book elements
//title | //price Selects all the title AND price elements in the document
/bookstore/book/title | //price Selects all the title elements of the book element of the bookstore element AND all the price elements in the document

簡化如下:
/ CHILD
// DESCENDANT
.. PARENTS
* ALL
@ ATTRIBUTE
” STRING
| AND
//elements[@attribute=’value’]

Categories: Coding

工聯會春季課程Android程式開發

January 2, 2013 Leave a comment

明明自己連一個完整的javascript都還沒有寫出來,但就想寫Android App!碰巧見到工聯會春季課程簡章,打開一看,確實有這樣的課程,不過考慮到生活收支緊絀,還是想參考其課程設計,以此設計自學藍圖!

不過話說回來,工聯會有幾個課程都十分相似,包括「Android系統程式開發初階」、「Android 系統程式開發」、「Android Apps程式設計」及「Android 手機Web Apps程式開發初階

Android系統程式開發初階」:
課程教授學員基礎之編程語法知識,提供編程範例,令學員如何開發 Android軟件,全課程共6小時,費用400元,課程內容包括:
1. 安裝開發編程工具
2. 安裝 Android虛擬介面
3. 認識 Android程式類別、實體及事件
4. 認識 Android程式基本運作
5. 認識 App Inventor For Android
6. 應用軟件及遊戲編程範例

Android 系統程式開發」:
課程以程式範例,透過實習指導帶領學員進入編程領域,明瞭物件導向程式設計,全期6課,每課2小時,費用850元,課程內容包括:
1. Android開發平台架構及特性簡介
2. 如何利用Java來開發Android應用程式
3. Android用戶介面實作
4. Android程式元件的應用方法
5. Android的資源存取
6. Android模擬器的運用
7. 如何在真實Android手機中測試程式
8. 完成程式後發佈到Android Market的流程

Android Apps程式設計
課程以程式範例,透過實習指導帶領學員進入編程領域,明瞭物件導向程式設計,全期12課,每課1小時30分,全期費用990元,課程內容包括:
1. Android 開發平台架構及特性簡介
2. 下載及安裝開發平台相關的軟件:Android SDK, ADT,
AVD、Java JDK及 Eclipse IDE
3. Android 模擬器的運用
4. 認識 Android應用程式的基礎
5. Activity,Lifecycle及 Intent的概念
6. 製作你的第一個 Android App
7. 學習開發程式語言 Java
8. 利用Java來開發 Android App
9. Android Widget元件的應用方法
10. Android App的 Layout(用戶介面)實作
11. Android App的 Menu(選擇表)實作
12. Android的資源存取
13. 如何在真實 Android手機中測試程式
14. 完成程式後發佈到Google Play(Android Market)的流程

Android 手機Web Apps程式開發初階」:
以網上應用為基礎發展雲端應用程式,方便流動平台作業,例如查詢:公司商品資料;客戶管理;公司內聯網;員工管理;銷售及訂單管理;物流管理等等都可由這類系統發展,課程內容包括:
1. 安裝開發工具
2. Viewport 技術應用
3. jQueryMobile 基本運作
4. jQueryMobile UI 應用
5. jQueryMobile Themes 應用
6. 手機資料庫連結
7. Web Apps轉為應用軟件

個人自學課程藍圖:
1. 開發工具:Eclipse、JRE、JDE
2. Android 平台架構及特性:資源存取、物件導向程式設計
3. Android 程式中的主要概念:Event、Activity、Lifecycle、Intent
4. Android 程式的用戶介面設計:Layout、Menu
5. 利用Java來開發 Android App
請附以「範例」加上「實作」讓自己熟習。

雖然我知道我把事情想得太過簡單,課程中的第一部分其實我已經完成,要安裝的軟件其實已經裝好,第二部分只涉及概念,第三和第四部分才是真正下功夫要不斷參照「範例」和自己不斷練習「實作」的地方,每個範例其實都是為了突出某項功能而設,而最後用Java開發其實已形成龐大系統,再進一步不容易。惟有對自己說聲,加油,別放棄!

Categories: Android, Coding, Hong Kong, Mobile

jQuery 1

July 3, 2012 Leave a comment

Basic:

  • jQuery = $
  • $(‘document’).ready;
  • $jQobj // var jQuery object(variable);
Query:
  • $(“div”) // selecting all the “div” elements in DOM;
  • $(“#elementId”) // selecting all the elements with ID “elementId” in DOM;
  • $(“.className”) // selecting all the elements with class “className” in DOM;

Change:

  • jQobj.add(“div”); // add “div” into the jQobj selector;
  • jQobj.addClass(“className”); // add class “className” to jQobj;
  • jQobj = $(“div”).last(); // select the last (can be first) “div”;
  • jQobj = $(“div”).eq(2); // select the third (can be others) “div”;
  • jQobj = $(“div”).filter(“li”); // select the div(s) that contain “li” (or any selector, function);

http://www.w3schools.com/jquery/jquery_dom_add.asp

Categories: jQuery Tags:

JavaScript on the web

May 22, 2012 Leave a comment

在Head中引用Javascript文件(像引用CSS文件一樣):

  • <head><script type=”text/javascript” src=”script.js”></script></head>

HTML中表單與Javascript的交互(HTML部份):

  • <button onclick=”functionName(‘input’)”>Button Name</button>
  • <form name=”formName”>
    • <label for=”inputName”>labelName</label>
    • <input type=”text” name=”textinput”>
    • <select name=”selectName”>
      <option value=”A” selected>A</option>
      <option value=”B”>B</option>
      </select>
    • <input type=”radio” name=”radioName” value=”choice1″ checked>Choice 1<br>
      <input type=”radio” name=”radioName” value=”choice2″ checked>Choice 2<br>
    • <input type=”checkbox” name=”checkboxName” >
    • <input type=”button” value=”name” onclick=”function()”>

    </form>

HTML中表單與Javascript的交互(JS部份):

  • document.getElementById(“divID”).innerHTML += HTMLcode; //將JS結果寫入HTML
  • var variable= document.formName.textinput.value; //將網頁表單text內容寫入JS
  • for (var i=0; i < document.formName.radioName.length; i++) {
    if (document.formName.radioName[i].checked) {
    newvariable = document.formName.radioName[i].value; //將網頁表單radio內容寫入JS
    }
Categories: HTML, Javascript

HTML and CSS (3)

April 30, 2012 Leave a comment

Interactive CSS:

  • #idName:hover {…} /* mouseover */
  • #idName:active {…}
  • #idName:link {…}
  • #idName:visited {…}
  • #idName:before {content: “string”;} /* generate content */
  • #idName:after {content: “string”;} /* generate content */
  • #idName:nth-child(odd) {…} /* set all children that are odd */
  • #idName:nth-child(even) {…} /* set all children that are even */
  • #idName:first-child {…}
  • #idName:last-child {…}

Example:

  • #nav ul li a{
  • padding: 20px;
  • background: orange;
  • color: white;
  • }
  • #nav ul li a:hover{
  • background-color: #ffb424;
  • box-shadow: 0px 1px 1px #666;
  • }
  • #nav ul li a:active{ background-color: #ff8f00; }

New HTML5 Codes:

  • <section></section>
  • <nav></nav>
  • <footer></footer>

Selectors Hierarchy:

  • #id .class div /* descendant selector: applied to div under class with id */
  • div > p /* child selector: applied to p that are direct descendant of div */
  • div, p, strong /* group selector */
  • #id:hover /* Pseudo selector */

!important declaration:

  • div { font-size: 10px !important; }

Categories: HTML