甚麼是網頁前端工程?

  • 網頁的介面設計與互動設計
  • 使用者經驗(User eXperience)設計
  • 視覺設計師:
    • 品味、互動、情緒的感受、設計圖、UI流程圖
  • 前端工程師:
    • 將視覺設計師的設計轉換成HTML、CSS、Javascript程式碼,與後端工程師介接
  • 後端工程師:
    • 效能、軟體架構、演算法、資料庫存取

HTML5(HyperText Markup Language 5)

  • HTML5是HTML最新的修訂版本
  • 希望能夠減少網頁瀏覽器對於外掛程式的RIA需求
  • 實際指的是包括HTML、CSS和JavaScript在內的一套技術組合
  • 添加和處理多媒體和圖片的語法元素,如<video>、<audio>和<canvas>
  • 豐富文件的資料內容的語法元素,如<section>、<article>和<nav>
  • HTML 5 Demos and Examples

賈伯斯的推動加速了Adobe Flash、Microsoft Silverlight等RIA滅亡

Steve Jobs vs. Flash
Steve Jobs

CSS3(Cascading Style Sheets 3)串接樣式表

  • W3C 組織 在 1998 年訂定 HTML 4.0 標準時,便將樣式(Style Sheet)的概念引入了 HTML
  • 將文章的內容和格式交給 HTML,讓文章的外觀呈現交給 CSS 串接樣式表
  • 選擇子(Selector)
  • 元素的盒子模型(Box model)
  • CSS 函式庫:BootstrapPure.CSSHTML KickStart

IE盒模型缺陷

盒子模型(Box model)
IE盒模型缺陷
  • JavaScript是一個object-based(以物件為基礎)的 Scripting Language(腳本語言)
  • JavaScript是一個在瀏覽器前端為平台,操控文件物件模型(Document Object Model, DOM)的語言
  • JSON(JavaScript Object Notation)
  • JavaScript 函式庫:jQueryjQuery UIjQuery mobile

JSON(JavaScript Object Notation)

一種以JavaScript描述物件方式作為資料交換的格式

		{
			 "firstName": "John",
			 "lastName": "Smith",
			 "sex": "third",
			 "age": 25,
			 "address": 
			 {
				 "streetAddress": "21 2nd Street",
				 "city": "New York",
				 "state": "NY",
				 "postalCode": "10021"
			 },
			 "phoneNumber": 
			 [
				 {
				   "type": "home",
				   "number": "212 555-1234"
				 },
				 {
				   "type": "fax",
				   "number": "646 555-4567"
				 }
			 ]
		 }
		

手機網頁開發

<敬請指教!>

peterju.tw@gmail.com