檢視討論:2022論壇/NGO導入RWD 的原始碼

===簡單介紹為何需要RWD APP===
*如今3C產品發展迅速，手機、平板的開發已經大大改變我們瀏覽網頁與接收資訊的習慣。過去的網頁設計只需要考慮電腦螢幕大小，如果直接在手機或平板等不同寬度的螢幕上瀏覽就會讓使用者感到不方便，而響應式網站(RWD)的設計就能解決相關的問題。本講題主要介紹RWD與應用程式(APP)的開發心路歷程與具體執行實例。
===簡介RWD需要改變的檔案(html css javascript)===
*html：超文本標記語言（HyperText Markup Language，簡稱：HTML），主要是寫出網頁的架構，有兩個重點分別如下：
**巢狀結構：HTML的形式會是一層一層包起來的樣子，如右方的gif範例。<div style='float:right;'><img src='http://jendo.org/uploadFiles/%E5%85%A8%E6%B0%91%E7%A7%91%E5%AD%B8%E5%B9%B3%E5%8F%B0/RWD/HTML.gif' width='400' height='240' /><br/></div><br/>像是<title>my bio</title>、<nowiki><h1>this is my bio</h1>和<p>bla bla bla...</p></nowiki>是最內層，分別被<head>...</head>與<body>...</body>夾住，整個又被<html>...</html>包起來。
**屬性資料：我也可以在HTML程式碼中，直接賦予它屬性，比如說給他名字(id)、給他分類(class)、或先設定他的長寬(height、width)等等。<br/><img src='http://jendo.org/uploadFiles/%E5%85%A8%E6%B0%91%E7%A7%91%E5%AD%B8%E5%B9%B3%E5%8F%B0/RWD/html-example.jpg' width='400' height='150' />
*css：階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS)，主要是寫出網頁的樣式，比如說<div style='float:right;'><img src='http://jendo.org/uploadFiles/%E5%85%A8%E6%B0%91%E7%A7%91%E5%AD%B8%E5%B9%B3%E5%8F%B0/RWD/css.png' height='150'/></div>可以改變字體大小、字體顏色、長寬高、甚至是一點點動畫功能。如右圖，程式碼就宣告了html碼的<nowiki><p></p></nowiki>的顏色。
*javascript （通常縮寫為JS），他是一種直譯式的程式語言，它支援物件導向程式設計、被世界上的絕大多數網站所使用，也被世界主流瀏覽器（Chrome、IE、Firefox、Safari、Opera）支援。主要來說它可以寫出跟使用者或是跟伺服器端的互動，比如說放大縮小字體、或是更加複雜的視覺化流程。

===簡介RWD改變時重要的訣竅<div style='color:red;'>(編輯中)</div>===
使用EmEditor( Atom 也不錯)

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

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

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

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


漢堡選單

===簡介APP的環境與限制<div style='color:red;'>(編輯中)</div>===
APP 有分 混合APP 、網頁APP與單純APP
而Cordova 可以直接把RWD網頁改寫成混合APP
開發所需之相關軟體如下
Node.js
Java development kit
SDK
Gradle
Android_studio

<center>
{| class="wikitable"
|-
!     !! 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/次
|}
</center>

===簡介APP開發的內容<div style='color:red;'>(編輯中)</div>===
===開發至今的心路歷程<div style='color:red;'>(編輯中)</div>===
程式本身不難，網路上很多參考，難在debug~(適應個人化需求)
參考資料  iT邦幫忙(中) stack overflow(英)
github