AP102 2016/4/13

中壢資策會智慧APP整合開發養成班 4/13

早上的課程主要先跳過Ｃ，直接先從HTML開始介紹，大概花了一個小時介紹歷史，
後面兩個小時介紹語法。

網頁最主要有兩個部分
第一個部分是client-side 另外一個部分是server-side
過去常稱Front-end和Back-end中文即所謂的前後端，client端的PC request到server做請求，然後sserver會response HTML的文字檔回來。

其中涉及資料庫Database的建置常用的MYSQL和MSSQL和MARIADB，產業上因為MYSQL已經被oracle買下，所以原班人馬開始建置MARIADB，成為一套整合開發系統。

XAMPP，Ａ是apache，Ｍ是mariaDB，Ｐ是PHP，最後一個Ｐ是perl，oracle買下了mySQL最重要可能有幾個目的，因為同屬資料庫，可以消滅對手，或者是拿到更高的市佔率，但以開源的的角度來說未來mariaDB可能才會是延續mysql血統的關鍵。

後台的語言常見的
PHP（以Ｃ語言堆疊）
JSP （JAVA）
ASP（C#）
DJANGO（python)
NODE.JS(Javascript)-Socket I/O為主，類似聊天室之類的也有人說NODE稱呼即可

伺服器常用建置
Apache(Linux)
IIS (Microsoft)

事前準備與設定：

先進入左上角的

點擊系統偏好設定點選一般

把預設網頁瀏覽器改為Google Chrome

SAFARI 在偏好設定裡，進階最下面要勾選在選單列中顯示開發選單
Chrome 則是按右鍵檢查可以查詢開發者模式

完成後有幾種瀏覽器的建置：
GOOGLE CHROME
INTERNET Explorer
Mozilla Firefox
Opera
Safari

其中Safari是取surf to internet在網路世界遨遊的意思，蘋果的商品幾乎都有很好的命名方式。

Text Editor的建置:

Notepad++ (WINDOWS系統用)
Sublime text 2 (3仍然還是beta測試版)
Eclipse(但我不建議使用，建議改為Android studio未來可以直接銜接Android開發)

Javascirpt console則是在前面的設定中可以以chrome在網頁中按右鍵選取檢查。
即可出現elements/ console /resource等開發原始碼與資源查詢

Web server的建置則以IIS和Apache為主
而mac與linux系統已經有內建apache了

ＨＴＭＬ標準介紹：

舊版的4.01標準是在1999年12月發布成為正式標準
新版的5.1最新版則是在2014年10月才確定

網頁撰寫要記得注重效能，讀取超過兩秒的網頁會讓使用者失去耐心，
因此flash龐大的動畫導致html不採用，在蘋果賈伯斯的主導下，近期adobe也將告別flash。

通常版本的寫法，假設是1.11.5這個版本

最後的5增加只是修改bug
11是小幅度增加新功能與增強舊功能
最前的1若增加則就是大幅度的改變

ＨＴＭＬ的主架構可以說是由ＨＴＭＬ＋ＣＳＳ＋ＪＡＶＡＳＣＲＩＰＴ
所組成，過去的十六年間由本欲由嚴格ＸＭＬ標準，從第一代的ＸＨＴＭL 1.
有許多過渡的標籤，到了XHTML2一口氣廢除所有的過渡導致瀏覽器廠商的反彈，因而重回到HTML的標準上，而Javascript的D3與Jquery等套件大量使用到JS，但也因為JS的除錯困難，因此必須很謹慎小心的撰寫程式碼。

javascript當年由netscript開發倒閉後，轉交給歐洲的ＥＣＭＡ262這即使所謂的ECMA標準，後續更出了3 4 5 6版。而網景公司的原班人馬則是到了Firefox繼續開發，許多Firefox的原生工具是除錯的好工具。

http;//www.google.com/index.html
以上這段標準網址
http的部分是how
www.google.com是where(去哪裡)
index.html是what(網頁內部的資源)（微軟預設為default.html)

上課的順序會從HTML-->CSS2-->CSS3-->JS-->HTML5 在講ＪＳ前會先講Ｃ語言

HTML是一種超語言描述的文字hypertext mackup language
hypertext的意思就是語言外有顏色，線條等
mackup則是描述的意思

有成對的標籤如<html></html>
也有單對的如 <hr>
shtml時代逼非得要成對所以有程式設計師寫成 
是一種多此一舉的用法
html是free-formate不計大小寫

以下是一個具有基本html架構的範例

常用的還有
註解
<h1></h1>段落標題

 
<hr size="500" color="red" color="#00ff00" align="right">

◆在html內的數值加上px是無用的，但可以用另外一種表示法<hr size="60%">

◆color的表示法內
＃000000 黑色和＃FFFFFF 白色
FF 意思是都顯示 00是都不顯示
ＲＧＢ中R是red G是green B是blue
所以像＃00ff00 意思就是紅與藍都不顯示，完全顯示綠色
這出現的會很接近白色的綠色，是因為ＲＧＢ是色光，接近綠色會顯示很亮的綠色
兩兩重複的例如＃FFFFFF可以縮減為#FFF

◆許多如 都已經被ＨＴＭＬ視為過渡標籤，未來都將以ＣＳＳ代替。

還算可用的有<blockquote></blockquote>
引用括號的語法

◆特殊字元例如小於符號< 如果與英文連在一起打可能被誤判為標籤，因此會輸入
&lt(less than)來代替，符號&gt來代替大於符號（greater than)，以＆開頭。

特殊字元意指在保留文字
而相反的意思則是<pre></pre>拿來放推圖娃娃或程式碼
但並不好用，常常還是會有全形的問題，但pre內的<>也可能會被誤判為html標籤。

空白的特殊字元 &nbsp(non-break space)

◆font

monospace等距字用來寫程式，

serif(safari預設的有襯線的字)，

non-serif(google chrome)

無襯線的字更有新的優點，減少向量軟體的容量
html的font也被css取代

◆背景顏色
<body bgcolor="#ccc">

◆CC授權

 http://creativecommons.tw/license

◆路徑
絕對路徑:完整路徑c:/web/images/xxx.jpg
相對路徑:以'自己'所在的位置為出發點去尋找資源

假設現在在web資料夾內有html與image兩個資料夾
html內是首頁index,html
image內是一堆圖片
所以先..退到html資料夾再到image再去找xx.jpg圖片

不同資料夾的呼叫
../image/xx.jpg
..代表回到上一層再進去image內找圖

/image/xx.jpg （直接從門口開始＝上一行的意思）
這個狀況你的index.html要在web目錄內

同資料夾可以直接呼叫
xx.jpg
也可以呼叫同資料夾內的資料夾
/animation/oo.gif

微軟
C;\i386\winNT.exe(故意跟人家不一樣)

<alt>找不到圖時可出現的狀態

◆圖檔放置

<img src="絕對路徑或相對路徑" width="" height="">
高度或寬度輸入一個另外一個會依照圖面自動等比例調整
輸入兩個若沒有依照比例會使得圖片變形

◆文繞圖

幾種文繞圖方式
以align="left"/"right"/ 有文繞圖的感覺
以align="TOP"/"midddle"/"bottom"(default)/這只會出現一行在上中下