頁面

混合式 App 程式開發

混合式 App 的定義

混合式應用程式 (Hybrid App) 開發在此指的是,以一般以 Web App 方式開發用戶端程式,但最後可在包裝後像 原生 App 一樣上架至應用程式商店的作法。

以下是一般混合式 App 的開發及執行模式:

  • 前端使用 HTML / XHTML / HTML5 + CSS + Java Script … 等網頁標準技術製作。
  • 透過 PhoneGap … 等框架工具跟行動裝置硬體設備互動,或加上部份原生程式,並包裝成原生 App 的外殼。
  • 上架至應用程式商店供人下載執行。

優點

  • 就像 Web App 那樣,前端操作介面可使用統一的網頁技術來做 (推薦用 HTML5 實作) ,可以跨較多裝置平台,不必為不同裝置維護多種程式語言版本。
  • 有些框架工具,可讓混合式 App 也能像原生 App 般,控制硬體裝置。例如:相機功能、 GPS 地理定位、測速計、磁力計、陀螺儀 … 等。
  • 可以在官方線上 App 商店上架,設定下載 App 的人是否要付錢,用以賺取費用。
  • 使用已安裝的 App 時,不需要開瀏覽器及輸入網址。

缺點

  • 混合式 App 開發方式,在不同裝置仍可能需要透過不同開發工具,分開編譯 (Compile) 包裝之後,才能進行功能測試。
  • 較需複雜運算的功能或遊戲,用混合式 App 開發方式,效能可能還是比不上原生 App 。
  • 對硬體裝置的支援度仍比不上原生 App 。
  • App 程式若有更新,就需要重新上架、審核,而使用者也必須更新或重新下載,才能使用新的功能。
<< 上一篇: Web App 開發 [ App 開發簡介 ] 下一篇: iOS App / Mac App 規格表 >>

Web App 程式開發

Web App 的定義

Web App 即網頁應用程式 (Web Application) 的簡稱。

Web App 本身透過網頁瀏覽器操作執行,在 Web 2.0 這個名詞風行時,由於許多網站平台已經由單純的官方網站,變成更具功能性、互動性的網站系統,因此 Web 應用程式這名詞也開始被愈來愈多人使用。

而我們以下所指的 Web App ,主要以行動裝置上的瀏覽器應用為主,所以又經常被稱為行動網頁 App (Mobile App) 。

以下是一般 Web App 的開發及執行模式:

  • 前端網頁使用 HTML / XHTML / HTML5 + CSS + Java Script … 等網頁標準技術製作。
  • 後端使用 PHP 、 ASP.NET 、 JSP 、 RoR … 等程式語言開發,並連結資料庫或其它資料來源。
  • 透過瀏覽器輸入網址後執行。

優點

  • 通常在不同的裝置上, Web App 只需要用相同的前端網頁技術來開發即可,不需要使用不同程式語言來開發。 (通常被稱作跨平台)
  • 開發過程中, Web App 只要使用裝置的瀏覽器輸入網址即可執行測試。若有任何問題,程式修改後,可以快速的進行測試,甚至有時只需要簡單的重新整理網頁即可。
  • Web App 不需要支付官方開發者年費,也不需要至官方應用程式商店上架、審核或讓官方抽成。
  • Web App 有任何功能更新,只需要在後端網站主機修改即可,使用者不需要重新下載安裝,就可以隨時使用最新的功能。

缺點

  • Web App 執行速度沒有原生應用程式來的快,較不適合需要極快速反應的程式、複雜的動畫、遊戲 … 等。
  • Web App 對硬體裝置的支援度不好,許多硬體上的功能可能無法使用。例如:相機功能、 GPS 地理定位、測速計、磁力計、陀螺儀 … 等。
  • Web App 依賴瀏覽器執行,而瀏覽器的種類繁多,對網頁技術的支援性也有些不同,雖然大都能夠執行,但 UI 畫面較不同易達到一致,且部份功能需要針對不同瀏覽器做不同的處理。
  • 行動裝置執行 Flash 功能多有限制,在行動裝置網頁上顯示 2D 動畫、 3D 動畫、影片通常並不容易。 (但行動裝置目前對新的 HTML5 標準支援愈來愈好,採用 HTML5 將會對網頁的功能性及效能獲得許多改善)
  • 需要打開瀏覽器及輸入網址才能執行 Web App ,感覺較麻煩。 (透過加入成為書籤、設定於主畫面螢幕點選執行、或提供 QR Code 讓行動裝置掃描,可以得到一些改善)
  • 在網路斷線的狀態下, Web App 有可能完全無法繼續操作。 (除非在開發時一併開發離線支援功能)
<< 上一篇: 原生 App 開發 [ App 開發簡介 ] 下一篇: 混合式 App 開發 >>

App 應用程式開發簡介

App 的定義

App 原是為電腦應用程式 (Application) 的簡稱,過去大家一般也叫它軟體 (Software) 。

但由於近來 iPhoneiPadAndroid 手機及平板電腦的風行,加上 iOS 下載應用程式的商店 App Store 中的 "App" 這個名詞,讓現在人認為在行動手持裝置上執行的程式叫做 App ,而幾乎快忘了原來桌面電腦上的應用程式軟體,其實也是 App 。

因此,以下我們所提及的 App 說明,也著重以多數人認定的行動裝置 App 為主。

App 的開發方式分類

原生應用程式 (Native App) 開發
一般使用 Objective-C 、 Swift 、 Java 、 Kotlin 、 C 、 C++ 、 C# … 等程式語言開發用戶端程式,並可上架至應用程式商店。 < 深入瞭解 >
網頁應用程式 (Web App) 開發
一般使用 HTML / XHTML / HTML5 + CSS + Java Script … 等網頁技術開發用戶端程式,並使用瀏覽器開啟執行。 < 深入瞭解 >
混合式應用程式 (Hybrid App) 開發
一般以 Web App 方式開發用戶端程式,但會透過 PhoneGap 等框架工具跟行動裝置硬體設備互動,或加上部份原生程式,最後可包裝上 Native App 的外殼,上架至應用程式商店。 < 深入瞭解 >

各家 App 開發的相關規格

下一篇: 原生 App 開發 >>

網頁設計 – HTML 超連結

前面我們曾經在 HTML 簡介 中提到, HTML 是一種「超文字標示語言」,而這一篇我們要介紹的是「超連結」。

超連結的英文被稱做是 hyperlink ,聽起來好像很專業、很難懂的樣子,其實不然。所謂的超連結,目前已被大家直接簡稱為「連結」了。沒錯!它幾乎就是我們一般常講的連結的意思。

一般我們在網頁文章中,可能會提到一些名詞,或相關的網站,文章的作者可能會在文章中加上一個超連結,連到那個介紹網頁去,這就是用超連結來達成的;或是有些網站中有許多的功能選單或多個網站內頁,也會利用超連結的方式,讓人點選之後,網頁能夠導到讀者想要看的那個內容頁去;如果你在搜尋引擎中查詢某個關鍵字,然後搜尋引擎會列出這個關鍵字的搜尋結果,而你就可以透過點選搜尋結果中的連結,連到你所想要看的網站去了。

如果說 HTML 是帶動整個 全球資訊網 發展的最重要功臣,則超連結則可以說是 HTML 中最具有代表性的重要功能了。不知道如何在網頁中加入超連結,就別說你懂得 HTML 網頁設計了。

在 HTML 中加入超連結

超連結是使用 <a> 這個標籤, a 是取自於英文 anchor 的第一個字母,是「錨」或「停留點」之意,代表每一個超連結所連結過去的網頁,都是看這篇文章的人可能會另外去停留觀看的內容。

<a> 標籤有一個 href 屬性,取自於英文 hypertext reference 簡稱,中文譯為「超文字參考」。比較白話的說,就是你要參考的內容,是要連結到什麼 URL 網址 去。

我們先來看一個簡單的超連結範例:

<html>

  <head>
    <title>網頁設計教學 HTML - 加入超連結</title>
  </head>
  
  <body>
    這篇文章出自於 <a href="//phd.com.tw">博全科技</a> 的網頁。
  </body>
  
</html>

執行結果如下:

這篇文章出自於 博全科技 的網頁。

URL 網址在上面的範例中所用的 //phd.com.tw 就是我們一般所說 HTTP 網址。而其實 URL 網址並非只有 HTTP 網址一種,它還可以是 E-mail 信箱位址。也可以是 FTP 位址,或是其它更多型態的位址。

不同的幾個 URL 連結範例:

<html>

  <head>
    <title>網頁設計教學 HTML - 其它常用的 URL 連結</title>
  </head>
  
  <body>
    這篇文章出自於 <a href="//phd.com.tw">博全科技</a> 的網站。<br>
	HTTP 網址是: <a href="//phd.com.tw/knowledge/html/hyperlink">HTML 超連結教學網頁</a><br>
	站內相對網址是: <a href="/knowledge/html/hyperlink">HTML 超連結教學網頁</a><br>
	本公司 E-mail 信箱是: <a href="mailto:service@phd.com.tw">博全科技信箱</a>
  </body>
  
</html>

執行結果如下:

這篇文章出自於 博全科技 的網站。
HTTP 網址是: HTML 超連結教學網頁
站內相對網址是: HTML 超連結教學網頁
本公司 E-mail 信箱是: 博全科技信箱

HTML 超連結的目標視窗屬性

前面的超連結範例,點選連結後,連結的網頁畫面都會取代現有的瀏覽器視窗,但是有時我們會想要點選超連結之後,是另開一個瀏覽器視窗來顯示,而不是取代現有的畫面。

其實這也還蠻簡單的,您只需要在 <a> 超連結標籤之中,加入一個 target 目標視窗屬性,並且再將屬性值設為 "_blank" 即可。

以下是另開視窗的範例:

<html>

  <head>
    <title>網頁設計教學 HTML - 超連結另開瀏覽器視窗</title>
  </head>
  
  <body>
    另開視窗到: <a href="//phd.com.tw" target="_blank">博全科技</a>
  </body>
  
</html>

執行結果如下:

另開視窗到: 博全科技

超連結的 target 屬性值,除了填入 "_blank" 來另開視窗之外,其實還可以填入「視窗名稱」或 "_self" 、 "_parent" 、 "_top" 等屬性值,各有不同的用途。不過其它用途因為您目前應該還用不到,我們等到之後較進階的篇章時再來做介紹囉。

<< 上一篇: HTML 文字變化 [ HTML 教學目錄 ] 下一篇: HTML 影像、圖片 (建構中) >>

網頁設計 – HTML 文字變化

在上一篇 HTML 文章段落及排版 中,我們有用到 <h1> ~ <h6> 文章標題,我們透過範例的展示結果,也會看到 <h1> ~ <h6> 中的 1 ~ 6 ,剛好是由大標題至小標題,因此標題文字看起來也是由大到小的順序。

但是如果不是文章標題的地方,而我們也想要改變文字的大小或做一些變化,要如何做呢?

HTML 的文字大小

要設定文字顯示的大小,可以透過 <font> 字體標籤的 size 大小屬性來達成。

size 屬性值的範圍是 1 ~ 7 ,因為是字體的大小,所以是數字愈大的話,代表顯示的字體愈大。

文字大小範例:

<html>

  <head>
    <title>網頁設計教學 HTML - 文字大小</title>
  </head>
  
  <body>
    字體 size 未指定時,預設為 3 的大小<br><br>

    <font size="1">字體 size 為 1 的大小</font><br>
    <font size="2">字體 size 為 2 的大小</font><br>
    <font size="3">字體 size 為 3 的大小</font><br>
    <font size="4">字體 size 為 4 的大小</font><br>
    <font size="5">字體 size 為 5 的大小</font><br>
    <font size="6">字體 size 為 6 的大小</font><br>
    <font size="7">字體 size 為 7 的大小</font>
  </body>
  
</html>

執行結果如下:

字體 size 未指定時,預設為 3 的大小

字體 size 為 1 的大小
字體 size 為 2 的大小
字體 size 為 3 的大小
字體 size 為 4 的大小
字體 size 為 5 的大小
字體 size 為 6 的大小
字體 size 為 7 的大小

HTML 的文字顏色

要設定文字的顏色,也可以透過 <font> 字體標籤的另一個 color 顏色屬性來達成。

<html>

  <head>
    <title>網頁設計教學 HTML - 文字顏色</title>
  </head>
  
  <body>
    網頁文字<font color="blue">「藍色」</font><br>
	網頁文字<font color="red">「紅色」</font><br>
	網頁文字<font color="green">「綠色」</font><br>
	網頁文字<font color="#cc0055">「自訂 RGB 的 #cc0055 顏色」</font><br>
	網頁文字<font color="#5555cc">「自訂 RGB 的 #5555cc 顏色」</font>
  </body>
  
</html>

執行結果如下:

網頁文字「藍色」
網頁文字「紅色」
網頁文字「綠色」
網頁文字「自訂 RGB 的 #cc0055 顏色」
網頁文字「自訂 RGB 的 #5555cc 顏色」

若想進一步瞭解 color 顏色屬性如何顯示自訂的 RGB 顏色,可參考這篇: RGB 三原色

HTML 的字型

要設定文字的字型,是透過 <font> 字體標籤的另一個 face 屬性來達成。

<html>

  <head>
    <title>網頁設計教學 HTML - 字型</title>
  </head>
  
  <body>
    我是<font face="新細明體">「新細明體 Font」</font><br>
    我是<font face="細明體">「細明體 Font」</font><br>
    我是<font face="標楷體">「標楷體 Font」</font><br>
    我是<font face="微軟正黑體">「微軟正黑體 Font」</font><br>
    我是<font face="Times New Roman">「Times New Roman」</font><br>
    我是<font face="Arial">「Arial」</font><br>
    我是<font face="Tahoma">「Tahoma」</font>
  </body>
  
</html>

執行結果如下:

我是「新細明體 Font」
我是「細明體 Font」
我是「標楷體 Font」
我是「微軟正黑體 Font」
我是「Times New Roman」
我是「Arial」
我是「Tahoma」

不知道上面的執行結果您是否看得出來字型的變化呢?這裡要請您注意一件事,雖然我們可以由 <font> 字體標籤的 face 屬性來設定字型,但是也必須要看這個網頁的人電腦中有這個字型,他才能看到字型變化的結果。

例如說,也許您的電腦內有安裝「隸書體」、「仿宋體」…等字型,您透過 face 屬性設定後,執行也看到效果了,但其它人的電腦未必安裝有這些字型,當他們開始這個網頁時,您設定的「隸書體」在他們的電腦上看到的中文只會是電腦預設的「新細明體」。所以要注意喔,網頁設計時,最好使用大家電腦應該都有的字型,否則一些特殊的字型別人並不一定看得出那個效果喔!

HTML 的文字粗體、斜體、加底線、刪除線

文字粗體可使用 <b> 標籤來達成,其中 b 為英文 bold 之簡寫,代表粗體或黑體之意。斜體可使用 <i> 標籤,其中 i 為英文 italic 的簡寫,代表斜體之意。加底線可以用 <u> 標籤,其中 u 為英文 underline 的簡寫,為底線之意。加刪除線可以用 <s> 標籤,其中 s 為英文 strike 的簡寫,為底線之意。

<html>

  <head>
    <title>網頁設計教學 HTML - 文字粗體、斜體、加底線、刪除線</title>
  </head>
  
  <body>
    我是<b>「粗體字」</b><br>
    我是<i>「斜體字」</i><br>
    我是<u>「文字加底線」</u><br>
    我是<s>「文字加刪除線」</s><br>
    我是<i><u>「斜體字加底線」</u></i>
  </body>
  
</html>

執行結果如下:

我是「粗體字」
我是「斜體字」
我是「文字加底線」
我是「文字加刪除線」
我是「斜體字加底線」

文字粗體還有另一個 <strong> 標籤可以達成,它代表重點的意思。而斜體字也有另一個 <em> 標籤可以用,其中 em 為英文 emphasize 的簡稱,為強調之意。

對於一般在觀看網頁的人來說, <strong> 、 <em> 標籤與 <b> 、 <i> 標籤的顯示結果是一樣的。不過對於 搜尋引擎 而言, <b> 、 <i> 標籤只是單純當做文字顯示時的變化,而 <strong> 、 <em> 則除了文字變化之外,還有「重點、強調」之意,對於網站有在做 SEO 搜尋優化 的人而言,效果是會一些些不同的。

<html>

  <head>
    <title>網頁設計教學 HTML - 重點文字、強調文字</title>
  </head>
  
  <body>
    我是<strong>「重點文字,粗體」</strong><br>
    我是<em>「強調文字,斜體」</em>
  </body>
  
</html>

執行結果如下:

我是「重點文字,粗體」
我是「強調文字,斜體」

HTML 的上標字與下標字

有時我們會希望在網頁上能夠列出簡單的公式、化學式,或是標記一下註解編號,這時我們可能會用到上標字與下標字。

上標文字或符號,英文是 superscript ,下標文字或符號,英文是 subscript ,而在網頁 HTML 中即是 <sup> 與 <sub> 標籤。

<html>

  <head>
    <title>網頁設計教學 HTML - 上標字、下標字</title>
  </head>
  
  <body>
    數學 x 的 10 次方,是以 x<sup>10</sup> 來表示<br>
    水的化學式是 H<sub>2</sub>O
  </body>
  
</html>

執行結果如下:

數學 x 的 10 次方,是以 x10 來表示
水的化學式是 H2O
<< 上一篇: HTML 文章段落及排版 [ HTML 教學目錄 ] 下一篇: HTML 超連結 >>

網頁設計 – HTML 文章段落及排版

看完了 HTML 基本排版 之後,您已經迫不急待要開始撰寫文章了吧!

HTML 提供了我們一些常用文章的標題、段落…等標籤,讓我們在網頁上寫文章時,能夠很容易讓人瞭解您文章的段落章節,更容易閱讀您的文章。

HTML 的文章標題 (主題)

每篇文章應該都會有個主題,甚至較長的文章還會分為篇、章、節、小節、條目…等。這樣的文章編制,其實在許多書籍裡面都會看得到,一個文章有分不同的篇、章、節,也更方便要找資料的人,可以更容易找到自己所想要看的文章段落。

文章的篇章節在 HTML 中使用 <h1> ~ <h6> 來標示的,其中 h 是取自於「標題」的英文 heading 第一個英文字母,而後面所接的 1 ~ 6 代表篇、章、節…等,由大標題至小標題的文章結構。

我們來看一下底下的範例:

<html>

  <head>
    <title>網頁設計教學 HTML - 文章標題</title>
  </head>
  
  <body>
    <h1>網頁的 h1 標題</h1>
    <h2>網頁的 h2 標題</h2>
    <h3>網頁的 h3 標題</h3>
    <h4>網頁的 h4 標題</h4>
    <h5>網頁的 h5 標題</h5>
    <h6>網頁的 h6 標題</h6>
  </body>
  
</html>

執行結果如下:

網頁的 h1 標題
網頁的 h2 標題
網頁的 h3 標題
網頁的 h4 標題
網頁的 h5 標題
網頁的 h6 標題

由上面的結果我們可以看出,在 HTML 中預設的 <h1> ~ <h6> 標題的字型是由大到小的,並且都是以粗體字的方式呈現,以便與接下來的文章段落文字做區隔。

HTML 的文章段落

在 HTML 中的文章段落標籤,是以「段落」的英文 paragraph 第一個字母 p 做為簡寫,因此 <p> 即為文章段落的標籤。

<html>

  <head>
    <title>網頁設計教學 HTML - 文章段落</title>
  </head>
  
  <body>
    <p>網頁設計是架設網站的第一步!</p>
	<p>想要打好網頁設計的基礎,最重要的就是先把 HTML 語法學會,這樣之後的學習之路才會駕輕就熟,那我們一起努力吧!</p>
  </body>
  
</html>

執行結果如下:

網頁設計是架設網站的第一步!

想要打好網頁設計的基礎,最重要的就是先把 HTML 語法學會,這樣之後的學習之路才會駕輕就熟,那我們一起努力吧!

HTML 的文章的對齊位置

先前的範例中,文章內容都是靠左對齊的,但有時我們也會希望文章能夠置中或靠右對齊。因此,在 <h1> ~ <h6> 與 <p> 標籤中,都有一個特別的「屬性」,能夠幫我們達成這個目的。

<html>

  <head>
    <title>網頁設計教學 HTML - 文章的對齊位置</title>
  </head>
  
  <body>
    <h2 align="center">網頁文章標題置中對齊測試</h2>
	<p align="left">這個段落文字靠左對齊</p>
	<p align="center">這個段落文字置中對齊</p>
	<p align="right">這個段落文字靠右對齊</p>
  </body>
  
</html>

執行結果如下:

網頁文章標題置中對齊測試
這個段落文字靠左對齊
這個段落文字置中對齊
這個段落文字靠右對齊

在 HTML 中,所有屬性 (Attribute) 的值都是以一個等於符號「 = 」及左右兩個雙引號「 " 」來設定的。

上面範例中的 align 就是 <h1> ~ <h6> 與 <p> 標籤的「對齊屬性」。透過指定 align 屬性的值為 left 即可靠左、 center 置中、 right 則是靠右,例如 align="center" 即是對齊屬性的設定置中方式。

HTML 的水平分隔線

有時文章若較長時,光是用 <h1> ~ <h6> 與 <p> 去將文章做不同篇幅的內容區隔還不夠,也許您還會需要加上分隔線,這時就會使用到 <hr> 標籤。

水平分隔線的英文是 horizontal line ,而 hr 主要是取「水平」的英文 horizontal 前兩個發音的音節 "ho-ri" 中各音節的第一個字母,即 <hr> 標籤的命名由來。

<html>

  <head>
    <title>網頁設計教學 HTML - 水平分隔線</title>
  </head>
  
  <body>
    <p>網頁設計是架設網站的第一步!</p>
	<hr>
	<p>想要打好網頁設計的基礎,最重要的就是先把 HTML 語法學會,這樣之後的學習之路才會駕輕就熟,那我們一起努力吧!</p>
  </body>
  
</html>

執行結果如下:

網頁設計是架設網站的第一步!
想要打好網頁設計的基礎,最重要的就是先把 HTML 語法學會,這樣之後的學習之路才會駕輕就熟,那我們一起努力吧!

水平分隔線 <hr> 標籤與換行的 <br> 標籤一樣,因為不會包住任何的文字內容,不是屬於一個區塊標籤,因此也不需要 </hr> 來做結尾。

HTML 文章段落綜合範例

<html>

  <head>
    <title>網頁設計教學 HTML - 水平分隔線</title>
  </head>
  
  <body>
    <h2 align="center">網頁設計教學</h2>
    <p align="center">網頁設計教學前言<p>
    <hr>
    <h3>第一章 架設網站的基本知識</h3>
    <p>網頁設計是架設網站的第一步!<p>
    <h3>第二章 網頁設計要學些什麼</h3>
	<p>從 HTML 語法開始學起才是王道。<p>
    <h3>第三章 網頁設計的趨勢</h3>
    <p>SEO 搜尋引擎最佳化是目前網路行銷中最夯的方法之一。<p>
  </body>
  
</html>

執行結果如下:

網頁設計教學
網頁設計教學前言

第一章 架設網站的基本知識 網頁設計是架設網站的第一步! 第二章 網頁設計要學些什麼 從 HTML 語法開始學起才是王道。 第三章 網頁設計的趨勢 SEO 搜尋引擎最佳化是目前網路行銷中最夯的方法之一。

HTML 學習小提示

自動換行特性:之前我們曾在 HTML 基本排版 這篇提過,若是想將文字換行,必須在文字後面加上 <br> 換行標籤。但是我們本篇所介紹的 <h1> ~ <h6> 、 <p> 與 <hr> 標籤,剛好都是屬於一個文章段落的開始、結束、或段落與段落間的分隔,因此若觀察前面的範例,可以發現標題、段落、水平分隔線之間,不需要特別再加 <br> 換行標籤,即會自動以另一行 (段落) 開始。

<< 上一篇: HTML 基本排版 [ HTML 教學目錄 ] 下一篇: HTML 文字變化 >>