腦爸打 CompBrother 部落格

 
小知識教學類型: 手機應用程式開發
Title: jQuery Mobile Data Attributes 有那些? (F) Content: 過往我們多篇分享的文章也有提及jQuery Mobile Data 的 Attributes 給予了手機應用程式開發及編寫員很大的彈性和編程上的幫助，今文我們嘗試從外觀資料的展示選項上更深入地了解 Page 和 Popup，兩者都提供了手機應用程式在頁面上的展示和管理選項:
Page:
data-dom-cache true | false 指定是否清除單個頁面的 jQuery DOM 緩存（如果設置為 true，您需要注意自己管理 DOM 並在所有移動設備上徹底測試）
data-overlay-theme letter (a-z) 指定對話框頁面的覆蓋（背景）顏色
data-theme letter (a-z) 指定頁面的主題顏色
data-title sometext 指定頁面標題
data-url url 用於更新 URL 的值，而不是用於請求頁面的 url
Popup (data-role="popup"):
data-corners true | false 指定彈出窗口是否應該有圓角
data-dismissible true | false 指定是否應通過單擊彈出窗口外部來關閉彈出窗口
data-history true | false 指定彈出窗口是否應在打開時創建瀏覽器歷史記錄項。 如果設置為 false，則不會創建歷史記錄項，並且無法通過瀏覽器的“返回”按鈕關閉
data-overlay-theme letter (a-z) 指定彈出框的覆蓋（背景）顏色。 默認為透明背景（無）。
data-shadow true | false 指定彈出框是否應該有陰影
data-theme letter (a-z) 指定彈出框的主題顏色。 默認繼承，“無”將彈出窗口設置為透明
data-tolerance 30, 15, 30, 15 指定與窗口邊緣的距離（上、右、下、左）
Popup (data-rel="popup"):
data-position-to origin | jQuery selector | window 指定彈出框的位置。 原點 - 默認。 將彈出窗口置於打開它的鏈接上。 jQuery 選擇器 - 將彈出窗口定位在指定元素上。 窗口將彈出窗口定位在窗口屏幕的中間。
data-rel popup 用於打開彈出框
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 指定如何從一頁過渡到下一頁。
手機APPS的頁面和內容不能像網站般多，所以手機應用程式員對於手機APPS的設計和製作都要細心思量，希望以上的jQuery Mobile Page 和 jQuery Mobile Popup可以幫助到各位!

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

小知識教學類型: 網頁設計、網站製作
網站程式常會碰到不同的數字運算，以便讓整個網頁程式運作得更快速更通順，亦節省了網頁程式編寫員不少的製作和網頁設計功夫!
JavaScript Math Object 就是提供了很大的便利性如下:
常用的常數 Constants:
Math.E // 返回歐拉數
Math.PI // 返回 PI
Math.SQRT2 // 返回 2 的平方根
Math.SQRT1_2 // 返回 1/2 的平方根
Math.LN2 // 返回 2 的自然對數
Math.LN10 // 返回 10 的自然對數
Math.LOG2E // 返回 E 的以 2 為底的對數
Math.LOG10E // 返回 E 的以 10 為底的對數
常用的數字運算方法 Math Methods:
Math.round(x) 返回 x 舍入到最接近的整數
Math.ceil(x) 返回 x 向上舍入到最接近的整數
Math.floor(x) 返回 x 向下舍入到最接近的整數
Math.trunc(x) 返回 x 的整數部分（ES6 中的新功能）
Math.sign() 如果 x 為負數、null 或正數，則返回
Math.pow() 返回 x 的 y 次冪
Math.sqrt() 返回 x 的平方根
Math.abs() 返回 x 的絕對（正）值
Math.min() 在參數列表中找到最小值
Math.max() 在參數列表中找到最大值
Math.random() 返回 0（包括）和 1（不包括）之間的隨機數
Math.log() 返回 x 的自然對數
善用好以上JavaScript的數學運算，網頁設計和網站製作時就得心應手了!

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

 
小知識教學類型: SEO搜尋引擎優化
網頁設計師及網站SEO推廣員皆必需知道如何與各SEO搜尋引擎溝通，設置Robots Meta是其中一個相當有效和快速的方法與各SEO搜尋引擎溝通和達成SEO的顯示結果共識。
如何設置Robots Meta在網站程式中?
只需在 html head 的標籤中，定義 meta name = "robots" ，然後架設不同需要的 content 屬性就可以了。當然 meta name robots 適用於所有的搜尋引擎，但亦可以指定特定的搜尋引擎作出設置，例如:
googlebot: Google搜尋引擎的設置
bingbot: Bing搜尋引擎的設置
slurp: Yahoo 搜尋引擎的設置
baiduspider: 百度搜尋引擎的設置
rogerbot: Moz搜尋引擎的設置
AhrefsBot: Ahrefs 搜尋引擎的設置
ia_archiver: Alexa搜尋引擎的設置
Robots meta Content 屬性選項?
noindex: 拒絕索引此頁面
nofollow: 拒絕跟隨此頁面內的連結
noarchive: 拒絕存取此頁面
nosnippet: 拒絕在搜尋結果中顯示簡介或快照內容
noimageindex: 拒絕索示此頁面中的圖片
只要好好設定Robots Meta，就可與各SEO搜尋引擎保持良好的互動，讓你的網站內容達到更好的SEO內容控制了!

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

 
小知識教學類型: 手機應用程式開發
過往我們多篇分享的文章也有提及jQuery Mobile Data 的 Attributes 給予了手機應用程式開發及編寫員很大的彈性和編程上的幫助，今文我們嘗試從外觀資料的展示選項上更深入地了解 List 、List item 和 Navbar:
List:
data-autodividers, true | false, 指定是否自動劃分列表項
data-count-theme, letter (a-z) , 指定計數氣泡的主題顏色
data-divider-theme, letter (a-z) , 指定列表分隔符的主題顏色
data-filter, true | false, 指定是否在列表中添加搜索框
data-filter-theme, letter (a-z) , 指定搜索過濾器的主題顏色
data-icon, Icons Reference, 指定列表的圖標
data-inset, true | false, 指定列表是否應使用圓角和一些邊距進行樣式設置
data-split-icon, Icons Reference, 指定拆分按鈕的圖標
data-split-theme, letter (a-z), 指定拆分按鈕的主題顏色
data-theme, letter (a-z), 指定列表的主題顏色
List item:
data-filtertext, sometext, 指定過濾元素時要搜索的文本。 然後將過濾此文本而不是實際的列表項文本
data-icon, Icons Reference, 指定列表項的圖標
data-role, list-divider, 指定列表項的分隔符
data-theme, letter (a-z) , 指定列表項的主題顏色
Navbar:
data-icon, Icons Reference, 指定列表項的圖標
data-iconpos, left | right | top | bottom | notext, 指定圖標的位置
以上只是jQuery Mobile Data Attributes之冰山一角，我們再另文詳述其它常用且實用的jQuery Mobile Data Attributes !

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

 
小知識教學類型: 網頁設計、網站製作
一個龐大的網站系統程式，總有些位置會出現error ，但error與 program bug的概念其實不同，error是一些可預料的錯誤，通常是程式的運算邏輯錯誤，而program bug就真的是網頁程式碼編寫的錯失所致。既然error是可預料，那當然是可以處理的了!
通常我們在JavaScript中會用以下的程式段來處理程式error:
try {
//嘗試某程式段
}
catch(err) {
//當以上程式段出現error，後續的處理
}
網頁程式編寫員可以透過adddlert()來發送提示迅息，告知使用者程式error的詳情或提示
錯誤物件的屬性 (Error Object Properties)?
name: 設置或返回錯誤名稱
message: 設置或返回錯誤消息（字符串）
常見的錯誤(Error Names)?
EvalError: 已棄用 - 改用 SyntaxError
RangeError: 出現超出範圍的數字
ReferenceError: 發生了不合適的引用
SyntaxError: 發生語法錯誤
TypeError: 發生類型錯誤
URIError: encodeURI() 中發生錯誤
龐大的網頁程式，需處理的事項都相當多，預到Error錯誤是十分常見，網頁程式編寫員無需驚慌，預早做足提防和可能性的處理便可以了!

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

 
小知識教學類型: SEO搜尋引擎優化
早前我們簡說了如何設置好多個語言的網站SEO，當中hreflang在網站程式中的設置和搭配是關鍵。而另一個也常見的問題是，如何設置好多個地方的網站SEO呢? 例如一個網站本身是加拿大為主要市場，常拓展至澳洲和東南亞時又如何做好不同地方的SEO呢?
其實原理與設置多個語言的網站SEO類似，但小編特別推薦用子網域(sub-domain)的方法，然後再加上hreflang的配置，網站在不同地方的結構和呈現於Google等搜尋引擎中則會清楚得多了。
例如以 abc.com 為例:
主網站於美國: abc.com
加拿大的分支: ca.abc.com
星加坡的分支: sg.abc.com
日本的分支: jp.abc.com
如此類推...
而地方當中亦可以再分拆為不同的語言版本，例如加拿大的分支可分為英文版(ca.abc.com/en/)或法文版(ca.abc.com/fr/)，在網站程式碼的配置可以是這樣:
加拿大的分支英文版:
link rel="alternate" hreflang="en-ca" href="http"//ca.abc.com/en/"
加拿大的分支法文版:
link rel="alternate" hreflang="fr-ca" href="http"//ca.abc.com/fr/"
設置好以上的程式碼後，然後再去Google Console 中的 「指定國際目標」設置不同的目標地方便完成好了。

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

 
小知識教學類型: 手機應用程式開發
jQuery Mobile Data 的 Attributes 給予了手機應用程式開發及編寫員很大的彈性，除了方便易用增加程式的移動和擴展性，亦因為jQuery Mobile是採用HTML5 data-* attribute，所以亦大大強化了手機程式的容易使用度和外觀也有所大為提升，即使網頁設計員也較易上手jQuery Mobile手機程式的製作。早前我們介紹了多個範疇的jQuery Mobile Data Attributes特式和實戰操作，今文我們繼續一齊查看更多jQuery Mobile Data Attributes 有更深入的那些:
Inputs:
data-clear-btn true | false S指定輸入是否應該有一個「清除」按鈕
data-clear-btn-text text 指定「清除」按鈕的文本文字呈現
data-mini true | false 指定輸入應該是小尺寸還是常規尺寸
data-role none 防止 jQuery Mobile 將輸入/文本區域設置為按鈕
data-theme letter (a-z) 指定輸入字段的主題顏色
Link:
data-ajax true | false 指定是否通過 ajax 加載頁面以改善用戶體驗和轉換。 如果設置為 false，jQuery Mobile 將執行正常的頁面請求。
data-direction reverse 反向過渡動畫（僅適用於頁面或對話框）
data-dom-cache true | false 指定是否清除單個頁面的 jQuery DOM 緩存（如果設置為 true，您需要注意自己管理 DOM 並在所有移動設備上徹底測試）
data-prefetch true | false 指定是否將頁面預取到 DOM 中，以便在用戶訪問它們時可用
data-rel back | dialog | external | popup 指定鏈接應如何表現的選項。
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 指定如何從一頁過渡到下一頁。
data-position-to origin | jQuery selector | window 指定彈出框的位置。
以上只是jQuery Mobile Data Attributes之冰山一角，我們再另文詳述其它常用且實用的jQuery Mobile Data Attributes !

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

 
小知識教學類型: 網頁設計、網站製作
前文我們分別探討了JavaScript Date的簡介和JavaScript Date 獲取日子的方法，但Date Object 創建以後，我們應該如何設置日子，這尤關Date Object在網站程式中的相互聯繫，及同時影響著最後Date在用家的呈現樣式，今文我們一起了解有什麼JavaScript Date 設置日子的方法:
setDate() 將日期設置為數字 (1-31)
e.g.
const a = new Date();
a.setDate(10);
setFullYear() 設置年份（可選月份和日期）
e.g.
const a = new Date();
a.setFullYear(2022);
或
a.setFullYear(2022, 5, 5);
setHours() 設置小時 (0-23)
e.g.
const a = new Date();
a.setHours(32);
setMilliseconds() 設置毫秒 (0-999)
setMinutes() 設置分鐘 (0-59)
e.g.
const a = new Date();
a.setMinutes(30);
setMonth() 設置月份 (0-11)
e.g.
const a = new Date();
a.setMonth(10);
setSeconds() 設置秒數 (0-59)
e.g.
const a = new Date();
a.setSeconds(30);
setTime() 設置時間（自 1970 年 1 月 1 日起的毫秒數）
而Date Object之間亦可作比較，例如使用大於或小於亦是常用的JavaScript Date Object相互比較的方法!

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

 
小知識教學類型: SEO搜尋引擎優化
一個網站擁有多個語言，是非常常見的情況，例如香港的網站，常見有繁體中文、簡體中文和英文三種語言可供互聯網使用者所選擇瀏覽。
多個語言的網站對SEO有多重要? 若果設置正確，當然會對SEO有所幫助，因為你的網站會有更多的頁面可被google 索引 (indexed)，而且因為多種語言選擇，網站瀏覽量亦會有所提升。但若果設置不宜，則隨時會有反效果，因為Google可能會當成為重複內容。
正確設置多個語言的網站方法，最常見和最常用的有以下兩種:
1) HTML Link (hreflang)
在某語言的head 標籤中，宣告定義其它語言的存在，例如以三語繁體中文、簡體中文和英文的香港網站為例:
英文頁面head 標籤中: 宣告定義繁體中文 hreflang="zh-hk" 和 簡體中文 hreflang="zh-cn"。
繁體中文頁面head 標籤中: 宣告定義英文 hreflang="en" 和 簡體中文 hreflang="zh-cn"。
簡體中文頁面head 標籤中: 宣告定義英文 hreflang="en" 和 繁體中文 hreflang="zh-hk"。
*亦可藉著 hreflang="x-default" 用於語言選擇的頁面，此頁面不會被指定任何的語言版本。
2) Sitemap 網站地圖
Sitemap 網站地圖 是很常用及直接和搜尋引擎溝通的工具，網站程式編寫員可以在 url 元素中加入 loc標籤以定義網址，並用 xhtml:link rel="alternate" hreflang="" 去宣告定義頁面的語言。
亦有人會使用 HTTP Header的方法，但這方法並不普遍，將來有機會再另文詳述。

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

小知識教學類型: 手機應用程式開發
jQuery Mobile Data 的 Attributes 給予了手機應用程開發員很多的選擇，除了方便易用增加程的的便利性，亦因為jQuery Mobile是採用HTML5 data-* attribute，所以亦大大強化了手機程式的容易使手度和外觀也有所提升。上文我們簡介了多個部份的jQuery Mobile Data Attributes，今文我們繼續一齊查看更多jQuery Mobile Data Attributes 有那些:
Fixed Toolbar:
data-disable-page-zoom, true | false, 指定用戶是否能夠縮放/縮放頁面
data-fullscreen, true | false, 指定工具欄始終位於頂部和/或底部
data-tap-toggle, true | false, 指定用戶是否能夠在點擊/點擊時切換工具欄可見性
data-transition, slide | fade | none, 指定點擊/單擊發生時的過渡效果
data-update-page-padding, true | false, 頁面事件發生時的頭部和底部留白位處理
data-visible-on-page-show, true | false, 指定顯示前頁面時的工具欄可見性
Flip Toggle Switch:
data-mini, true | false, 指定Switch應該是小尺寸還是常規尺寸
data-on-text, 指定翻轉開關上的「開」文字（默認為「開」）
data-off-text, 指定翻轉開關上的「關」文字（默認為「關」）
Footer:
data-id, 指定獨突的ID
data-position, inline | fixed, 指定頁腳是否應與頁面內容內聯或保持位於底部
data-fullscreen, true | false, 指定頁腳是否應始終位於頁面內容的底部和上方（略微透明）
data-theme, letter (a-z), 指定頁腳的主題顏色
Header:
data-id, 指定獨突的ID
data-position, inline | fixed, 指定頁腳是否應與頁面內容內聯或保持位於底部
data-fullscreen, true | false, 指定頁腳是否應始終位於頁面內容的底部和上方（略微透明）
data-theme, letter (a-z), 指定頁腳的主題顏色
以上只是jQuery Mobile Data Attributes之冰山一角，我們再另文詳述其它常用且實用的jQuery Mobile Data Attributes !

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

 
小知識教學類型: 網頁設計、網站製作
日期對於人類現實生活和電腦世界都非常重要，時間的正確和一致性，才不會讓程式產生錯誤或誤解。因此，我們必須要熟識JavaScript Date 獲取日子的方法。
getFullYear() 以四位數字形式獲取年份 (yyyy)
getMonth() 以數字形式獲取月份 (0-11)
getDate() 以數字形式獲取日數 (1-31)
getHours() 獲取小時 (0-23)
getMinutes() 獲取分鐘 (0-59)
getSeconds() 獲取小時秒數 (0-59)
getMilliseconds() 獲取毫秒 (0-999)
getTime() 獲取時間（自 1970 年 1 月 1 日以來的毫秒數）
getDay() 以數字形式獲取工作日 (0-6)
Date.now() 獲取時間 (ECMAScript 5)
同理 JavaScript Date 亦有類似的 Methods 可以獲取 UTC 日期 (Universal Time Zone dates):
getUTCDate() 類似 getDate(), 但返回 UTC 日期
getUTCDay() 類似 getDay(), 但返回 UTC 日數
getUTCFullYear() 類似 getFullYear(), 但返回 UTC 年份
getUTCHours() 類似 getHours(), 但返回 UTC 小時
getUTCMilliseconds() 類似 getMilliseconds(), 但返回 UTC 毫秒
getUTCMinutes() 類似 getMinutes(), 但返回 UTC 分鐘
getUTCMonth() 類似 getMonth(), 但返回 UTC 月份
getUTCSeconds() 類似 getSeconds(), 但返回 UTC 秒數
善用好JavaScript Date 獲取日子的方法，不同程式內部不會運算錯誤，給予大眾使用者也可大大減少誤解。

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()

小知識教學類型: SEO搜尋引擎優化
究竟子網域(sub domain)還是子目錄(sub directory)對SEO有幫助? 這是非常常見的問題，要解答我們可以先從一些基礎中去了解。
例子:
http://hello.abc.com/xyz/index.html
http: 國際的通訊協定 (Protocol)
hello: 子網域(sub domain)
abc.com: 網域名稱 (Domain Name)
xyz: 子目錄(sub directory)
index.html: File 文件檔案
子網域(sub domain)還是子目錄(sub directory)影響著網站內容的展示結構，最簡單和直接的理解是，子網域(sub domain)通常會被視為一個較為獨立的網站，而子目錄(sub directory)則仍是裙帶著原先的主網站。
子網域(sub domain)例子:
http://seo.abc.com
http://news.abc.com
http://admin.abc.com
子目錄(sub directory)例子:
http://abc.com/seo/
http://abc.com/news/
http://abc.com/admin/
採用子網域(sub domain)有什麼好處?
- 可創建一個獨立的網站
- 獨立的網站可以自身便可使用不同的seo服務工具 (e.g. google webmaster, google analytics, bing webmaster etc)
- 與主網站的累積表現沒有非常直接的關聯
子目錄(sub directory)有什麼好處?
- 與主網站的累積表現有著直接的關聯性
- 非獨立的網站不可以使用seo服務工具 (e.g. google webmaster, google analytics, bing webmaster etc)
- 主網站的成功可帶動到子目錄(sub directory)
因此，在選擇子網域還是子目錄時，最大的分享就是要考慮你想的自主性和對主網站的依賴性，各自對SEO皆有優劣之別，視乎自身的選擇而定。

(繼續閱讀...)

腦爸打 發表在 痞客邦 留言(0) 人氣()