|
|
| 行 1： |
行 1： |
| | [[分類:2022論壇]] | | [[分類:2022論壇]] |
| − | ===議程人員===
| + | #貴賓致詞。 |
| − | 林芸伍
| + | #住宿、資料、聽講都免費，但不供餐，中餐午餐預定 100 元，當天報到預定，在餐廳用餐；早餐 80 元，前一天報到預定。 |
| − | *國立台灣大學物理所碩士班學生
| + | #手冊使用介紹：對照日程表(兩種)→議程一覽表→目錄 |
| − | *南機場魔豆學院志工 (協助自學生寫桌遊輔助程式)
| + | #網站介紹： |
| − | *振鐸學會 RWD & APP 計畫執行人
| + | #*日程表 |
| − | *程式(Python,C,C++,R) 自學者 | + | #*報名者意見，請大家在這三天之中，上去提供意見，這樣「學前教育公共化參見全國同胞」、「閉幕」兩個議程可以更聚焦。 |
| − | ===簡單介紹為何需要RWD APP===
| + | #*運用「導航列/籌備處/基本資料」 |
| − | *如今3C產品發展迅速，手機、平板的開發已經大大改變我們瀏覽網頁與接收資訊的習慣。過去的網頁設計只需要考慮電腦螢幕大小，如果直接在手機或平板等不同寬度的螢幕上瀏覽就會讓使用者感到不方便，而響應式網站(RWD)的設計就能解決相關的問題。本講題主要介紹RWD與應用程式(APP)的開發心路歷程與具體執行實例。 | + | #*籌備處/基本資料/台北市教師研習中心平面圖/平面圖 |
| − | ===簡介RWD需要改變的檔案(html css javascript)===
| + | #簡單介紹今年的戶外議程 |
| − | *html：超文本標記語言（HyperText Markup Language，簡稱：HTML），主要是寫出網頁的架構，有兩個重點分別如下：
| + | #說明如何現場登記議程(OST) |
| − | **巢狀結構：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
| |
