文章

jQuery Mobile Navigation Bars 手機應用程式 清晰頁面關係配置

圖片
 jQuery Mobile Navigation Bars 手機應用程式 清晰頁面關係配置 小知識教學類型: 手機應用程式開發 手機應用程式Apps與網頁程式一樣，都有著頁面中有著頁面的架構，當一個頁面跳到另一個頁面，再由新頁面跳向再新一個頁面，或從後置頁面往前推返回前面等等，jQuery Mobile Navigation Bars 都可以提供到清晰頁面關係的配置。 jQuery Mobile Navigation Bars 通常放置於手機應用程式Apps的頂端Header或尾端Footer，一方面不會阻礙到用戶瀏覽頁面內容，另一方也可提供到清楚資訊讓用戶知道自己身處手機應用程式Apps的何方。 以頂端Header配置 jQuery Mobile Navigation Bars 作為範例: 在 data-role="header" 的div 內再加上 data-role="navbar" ，然後再使用常用的 ul 和 li 列點清單由上而下去列出 jQuery Mobile Navigation Bars 的頁面次序。 為更清晰和簡單易明 jQuery Mobile Navigation Bars 中的頁面次序和內容訊息，jQuery Mobile Navigation Bars 更提供了 data-icon 的選項，可讓 Navigation Bars 中的按鈕加上 icon，例如: data-icon="home" (主頁) data-icon="arrow-r" (向右箭咀) data-icon="search" (搜尋) jQuery Mobile Navigation Bars 亦提供了 data-iconpos 用作配置和排位 jQuery Mobile Navigation Bars 中的頁面按鈕排位，例如: data-iconpos="top" 頂部圖標對齊 data-iconpos="right" 右圖標對齊 data-iconpos=...
閱讀更多

JavaScript Booleans - 判斷網頁程式運算的對錯

圖片
 JavaScript Booleans - 判斷網頁程式運算的對錯 小知識教學類型: 網頁設計、網站製作 人類世界的對錯是一個十分複雜的課題，當中可以涉及倫理道德亦可以涉及世界各地不同的行為規範，或有些地方更是位處中間的灰色地帶，總而言之，人類實體世界的對錯並沒有劃一的標準線。但對於網頁程式世界的對錯，則簡單得多了，對錯完完全全視乎於數理邏輯的推論! Boolean(): 返回對(TRUE) 或錯 (FALSE), 例如 Boolean(3 > 1) 會返回 對(TRUE)，而 Boolean(1 > 6) 則會返回 錯 (FALSE) 關於條件性(Conditions)的比較(Comparisons)可分為以下常用的三類: == 等於 > 大於 < 少於 在 JavaScript網頁程式的世界中，所有事物只要有著值(Value)都是對(TRUE)，而相反沒有值(Value)都是錯 (FALSE)，例如0, -0, 沒有值的字串(empty string)等等 因著而要，有些網頁程式員會把 JavaScript Booleans 當成是 Object去使用但切記數點: - JavaScript Booleans Object 無需去 new 去創建 - JavaScript Booleans Object 之間的比較永遠返回 錯 (FALSE) 網頁程式世界的運算對錯十分重要，可連貫程式運算的邏輯及可減少程式網寫時的bug ! 如需協助 「 網頁設計、網站製作 」 ，歡迎立即 聯絡我們 !
閱讀更多

如何減低網頁跳出率(Bounce Rate)，從而提升網站SEO?

圖片
 如何減低網頁跳出率(Bounce Rate)，從而提升網站SEO? 小知識教學類型: SEO搜尋引擎優化 網頁跳出率(Bounce Rate)素來都被視為影響著網站SEO的關鍵指標之一，那究竟什麼是跳出率(Bounce Rate)? 又如何去減低跳出率(Bounce Rate)從而提升網站 Google SEO 排名? 什麼是網頁跳出率(Bounce Rate)? 跳出率(Bounce Rate) = 用戶到達網站頁面 (Landing Page)後沒有作出任何活動總人數 / 進入網站頁面 (Landing Page)的總人數 怎樣算是用戶到達網站頁面 (Landing Page)後沒有作出任何活動? - 到達網站頁面 (Landing Page)後，立即關閉browser沒有再作瀏覽 - 到達網站頁面 (Landing Page)後，按browser back按鈕返回上一頁 - 到達網站頁面 (Landing Page)後，立即按超連結外連新視窗進入其它網站 - etc等等 如何減低網頁跳出率(Bounce Rate)? - 到達網站頁面 (Landing Page)留到訪客，大前提當然是網站頁面 (Landing Page)內容文字/圖片/影片等內容content夠吸引，自自然然大眾來到你的網站也不願意離開，很想繼續瀏覽 - 連接外連時，採用開新視窗選項 (target blank) - 連接內連時，避免採用開新視窗選項 (target blank)，應選用同一視窗的操作 - 當用戶閑置時間過長時，可以使用例如popup message的方法增加與用戶的互動，減低閒置時間和比率 - etc等等 網頁跳出率(Bounce Rate)雖然是SEO界是常出現的老朋友，但要做得好從而提升網站 Google / Yahoo / Bing SEO 排名並不是想像中的容易，希望「腦爸打」以上的一些小精華SEO簡介教學能幫助到各位! ...
閱讀更多

妙用 jQuery Mobile Toolbars 設計及製作手機應用程式

圖片
  妙用 jQuery Mobile Toolbars 設計及製作手機應用程式 小知識教學類型: 手機應用程式開發 手機應用程式Apps 並不像網站程式有著足夠大的空間，在有限的手機界面中如何有效地整理及展示資訊，是每位手機應用程式開發者必需要處理的課題，而jQuery Mobile Toolbars則提供了這方面的方便性。 Header Bars - 手機程式頂端的Toolbars，通常位處logo旁，可以分為左上或右上的工具列，例如: data-role="header", class="ui-btn ui-icon-home ui-btn-icon-left" 用以創建左上角的 Mobile Header Toolbars 按鈕 data-role="header", class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left" 用以創建右上角的 Mobile Header Toolbars 按鈕 Footer Bars - 手機程式底端的Toolbars，通常位處底部中間的工具列，例如: data-role="footer", class="ui-btn ui-icon-plus ui-btn-icon-left" 而 Header Bars 或 Footer Bars 皆可以重新被Positioning: - Inline - 默認選項，頁頂和頁腳與頁面內容內聯 - Fixed - 頁頂和頁腳將保持在頁面的頂部和底部 - Fullscreen - 表現得像固定的，頁頂和頁腳將保持在頂部和底部，但也位於頁面內容之上，也有點透視感 手機應用程式開發員只要好好善用jQuery Mobile Toolbars，就可以在有限的手機界面上有條理地展示上資料，對手機UI有著莫大的幫助! ...
閱讀更多

JavaScript Random - 網頁程式世界的隨機

圖片
 JavaScript Random - 網頁程式世界的隨機 小知識教學類型: 網頁設計、網站製作 人的生活當中，即使有著因果的種種連鎖關係，但人的一生及世事萬物都有著其隨機性。網站製作上的網頁程式，其實也可模擬現實世界的隨機性，JavaScript Random就是當中的好選擇! Math.random(); 返回 0（包括）和 1（不包括）之間的隨機數： Math.floor(); 可用於返回隨機整數 實際例子: Math.floor(Math.random() * 10); 返回一個從 0 到 9 的隨機整數： Math.floor(Math.random() * 11); 返回一個從 0 到 10 的隨機整數： (Math.floor(Math.random() * 10) + 1; 可達到同樣的效果) Math.floor(Math.random() * 100); 返回一個從 0 到 99 的隨機整數： Math.floor(Math.random() * 1000); 返回一個從 0 到 999 的隨機整數： 網頁程式編寫員可以自身藉著創建JavaScript 的 Function 來活用 JavaScript Random，例如，這個 JavaScript 函數總是返回一個介於 min（包括）和 max（排除）之間的隨機數： function getRandomInteger(min, max) { return Math.floor(Math.random() * (max - min) ) + min; } 善用好網頁程式的隨機編程，可以讓程式運算更活像真實世界，及有助於運算時提供需要的公平性機會率。 ...
閱讀更多

妙用 Canonical Link 可有助提升 SEO 搜尋排名

圖片
 妙用 Canonical Link 可有助提升 SEO 搜尋排名 小知識教學類型: SEO搜尋引擎優化 網站包含著很多不同的頁面，但一個頁面又會常可以以不同的連結網址呈現，例如 http://www.abc.com, http://abc.com , http://www.abc.com/index.html 明明是三個網址連結，但都是指向著同一個網址頁面內容。對於 google yahoo 等搜尋引擎會視為重覆性的內容，若要google yahoo 等搜尋引擎把這些重覆的內容索引index，會對SEO搜尋排名結果有著明顯的負面影響! 這個時候，我們可以 head 標記中善用Canonical Link，把指定網頁連結統一指定到某一連結網址，例如: http://www.abc.com http://abc.com http://www.abc.com/index.html 以上這三個連結可以指向至統一的連結網址 http://www.abc.com/index.html link rel="canonical" href="http://www.abc.com/index.html" Canonical Link 的正確設定，除了可有助提升 SEO 搜尋排名，亦可有助於網站內容被鏡像(Scrape)的可能性，增加網站系統程的安全性。 如需協助 「 SEO搜尋引擎優化 」 ，歡迎立即 聯絡我們 !
閱讀更多

Robots Meta 的設定如何影響 SEO搜尋引擎的表現?

圖片
 Robots Meta 的設定如何影響 SEO搜尋引擎的表現? 小知識教學類型: 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內容控制了! 如需協助 「 SEO搜尋引擎優化 」 ，歡迎立即 聯絡我們 ! https://www...
閱讀更多