Download async-web-design-2

非同步互動式網頁程式設計
2014/2/21
Chien wei lin
前端技術
HTML / CSS / JavaScript
HTML
 HTML, Hypertext Markup Language
 超文件標示語言
 用來描述網頁內容的一種語言
 描述的內容包含
 文字、表格、項目、圖片、影音
 由 W3C所制定的國際標準
 目前最新的規格為 HTML 5
HTML5 新功能
 Canvas (2D or 3D)
 Scalable Vector Graphics
 Channel messaging
 Cross-document messaging
 Geolocation
 MathML
 Microdata
 Server-Sent Event






(SVG)
WebSocket API and
protocol
Web origin concept
Web Storage
Web SQL database
Web Workers
XMLHTTPRequest Level 2
CSS
 CSS, Cascading Style Sheets
 層疊樣式表／串樣式列表
 用來定義 HTML 及 XML 的呈現樣式
 包含的內容
 文字、表格及圖片的字型、字體、大小、邊框、排版
等與樣式相關的設定
 HTML 4.01 之後改由 CSS 來設定樣式
 讓HTML能單純只表達文件的內容
 使樣式的修改更有彈性
 目前最新的規格為 CSS 3
CSS3
 Selectors
 Box Model
 Backgrounds and Borders
 Image Values and Replaced Content
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface
網頁的呈現: HTML 與 CSS
 在 以前 HTML 可以表達網頁的樣式，但也被詬病
無法有結構的表示網頁資料
 因此在 HTML 4.01 之後W3C 製定了 CSS，專門用來
表達網頁的樣式，也提供了更多可設定的樣式細節
 以新的標準而言
 HTML 用來表達網頁的內容 (文字、圖片、表格)
 CSS 用來表達網頁的樣式
JavaScript
 JavaScript 是目前主流的使用者端程式語言
 由 ECMA 所製定規格，各家瀏覽器公司實作
 用來處理 HTML 的內容: 畫面的顯示/表單資料的處理
 內嵌在 HTML 當中與 HTML 一起撰寫
 語法格式
網頁前段技術互動模式
 HTML 用來表達網頁的內容
 CSS 用來表達網頁的樣式
 JavaScript 用來操作網頁中的內容與樣式，即 HTML
與 CSS
後端技術
PHP
 PHP 是目前是 Open Source 動態網頁開發中較多人使用的伺服器端程式
語言
 http://php.net/
 用於開發網站的各項功能，可存取資料庫
 伺服器動態網頁程式語言會在網頁伺服器被執行，因此從瀏覽器是看
不到 PHP 程式語言的
 基本語法格式
MySQL
 目前 Open source 中最常使用的關聯式資料庫
 幾乎目前大部份的 Open source 軟體都採用這套資料
庫
 最早之前有 Sun 公司發展，後被 Oracle 所併購
 http://www.mysql.com/
Apache HTTP Server
 Open Source 中最常用的網頁伺服器軟體
 http://httpd.apache.org/
 Apache 網頁伺服器有過一半以上的市佔率，是目前
最多人使用的網頁伺服器
開發工具
開發工具
 Apache - WAMP
 MySQL - phpMyAdmin
 PHP - Netbeans
 JavaScript - Chrome 開發人員工具
Wamp 簡介
 WAMP 的全名是 Apache, PHP, MySQL on Windows，意
即在Windows 的 Apache, PHP, MySQL
 WAMP 讓使用者在Windows 上可以一次安裝好開發
所需的伺服器相關套件，並提供了簡易的介面操作，
省去了以往安裝的複雜性
 http://www.wampserver.com/en/
Wamp 的版本選擇
 Wamp 在下載時提供了許多的版本組合可供開發者下載
 目前較穩定的版本為 Apache 2.2 與 PHP 5.3
 32位元或64位元依安裝的作業系統而定，一般為32位元
Wamp 安裝
 網頁伺服器安裝會使用電腦的 80 Port，務必確認沒
有其他程式已經佔用，如: Skype
 若發生佔用的情況請更改其他程式所使用的 Port
 若非使用 80 Port 在進入自己架設的網站時必須額外
輸入 Port
 安裝完成執行，會在左下角出現圖示
 綠色為正常執行
Wamp 參數設定
 在圖示上點選左鍵會出現選單，下圖所示
 根據使用的程式需求可能會要開啟不同的套入件可
透過此介面做設定
進入網頁首頁
 打開瀏覽器輸入以下網址
 http://localhost/
 可以看到目前已開啟的 PHP 套件與目前存在的網站資料
 未來開發只需在Wamp 的安裝目錄中的 www 中建立資料夾即可在
此頁看到
 如: C:\wamp\www
phpMyAdmin
 phpMyAdmin 是一套使用 PHP 所撰寫的 MySQL 資料
庫管理介面
 在 Wamp 中內含此網頁，可由Wamp 選單中點選
phpMyAdmin 或輸入網址 http://localhost/phpmyadmin/
進入
 建立或管理資料庫時會使用
Netbeans 簡介
 Netbeans 是一套以 Java 為基礎的整合型開發環境，
最早主要提供 Java 程式圖型化的開發環境，近年也
支援了 C/C++, PHP, HTML, JavaScript 等語言
 一般開發環境僅支援單一語言如 PHP 或 HTML 或
JavaScript，Netbeans 在此部份可同時支援，且提供多
項方便的功能，並且跨平台，這是為什麼選擇
Netbeans 的原因
 Netbeans 唯一的缺點就是由於採用 Java 為基礎因此
效率較差
 http://netbeans.org/
Netbeans 版本的選擇
 安裝 Netbeans 之前必須先安裝 Java 環境
 目前 Netbeans 的最新版本為 7.4
 它提供了多種套裝的組合可便於下載，如目前只有
使用到 PHP 開發，可直接下載 PHP 的版本
Java 開發工具
 Java 開發工具(JDK, Java Development Kit)的下載可至
http://www.oracle.com/technetwork/java/javase/
瀏覽器開發工具
 Chrome 開發人員工具 (F12)