討論:2022論壇/NGO導入RWD

如今3C產品發展迅速，手機、平板的開發已經大大改變我們瀏覽網頁與接收資訊的習慣。過去的網頁設計只需要考慮電腦螢幕大小，如果直接在手機或平板等不同寬度的螢幕上瀏覽就會讓使用者感到不方便，而響應式網站(RWD)的設計就能解決相關的問題。本講題主要介紹RWD與應用程式(APP)的開發心路歷程與具體執行實例。

html：超文本標記語言（HyperText Markup Language，簡稱：HTML），主要是寫出網頁的架構，有兩個重點分別如下：
- 巢狀結構：HTML的形式會是一層一層包起來的樣子，如右方的gif範例。
  
  像是<title>my bio</title>、<h1>this is my bio</h1>和<p>bla bla bla...</p>是最內層，分別被<head>...</head>與<body>...</body>夾住，整個又被<html>...</html>包起來。
- 屬性資料：我也可以在HTML程式碼中，直接賦予它屬性，比如說給他名字(id)、給他分類(class)、或先設定他的長寬(height、width)等等。
css：階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS)，主要是寫出網頁的樣式，比如說
可以改變字體大小、字體顏色、長寬高、甚至是一點點動畫功能。如右圖，程式碼就宣告了html碼的<p></p>的顏色。
javascript （通常縮寫為JS），他是一種直譯式的程式語言，它支援物件導向程式設計、被世界上的絕大多數網站所使用，也被世界主流瀏覽器（Chrome、IE、Firefox、Safari、Opera）支援。主要來說它可以寫出跟使用者或是跟伺服器端的互動，比如說放大縮小字體、或是更加複雜的視覺化流程。

使用EmEditor( Atom 也不錯)

振鐸的架站方式：使用php寫html檔案(方便引入資料庫或變數) 再另外寫css檔 (js包含在html中)

重點是改CSS 在不同的視窗大小與操作模式下改變元件的型態

Html 大架構不會變可能會多加一點JS程式碼

重要的是onclick 可能不試用(無滑鼠)，要改成touch

漢堡選單

APP 有分混合APP 、網頁APP與單純APP 而Cordova 可以直接把RWD網頁改寫成混合APP 開發所需之相關軟體如下 Node.js Java development kit SDK Gradle Android_studio

	iOS	ANDROID
開發軟體與框架	Cordova+NodeJS+Apache Ant+Xcode	Cordova+NodeJS +JKD+SKD+ANDROID_STUDIO
開發環境	prefer on Mac但也可以裝虛擬機	Windows即可
上傳	Apple Mac	Windows即可
上架費用	App Store US$99/年	Google Play US$25/次

程式本身不難，網路上很多參考，難在debug~(適應個人化需求) 參考資料 iT邦幫忙(中) stack overflow(英) github

目錄