「2022論壇/NGO導入RWD」修訂間的差異

出自均優學習論壇共筆
跳至導覽 跳至搜尋
 
（未顯示同一使用者於中間所作的 3 次修訂）
行 5： 行 5：
  
 
而2015年開始HTML5被大眾開始較廣泛的使用。HTML5是HTML最新的修訂版本，由全球資訊網協會（W3C）於2014年10月完成標準制定，廣義的HTML5包含了三個部分：HTML、CSS3、JavaScript。過去大多的NGO都是以傳統的HTML或是php建構網站，來服務家用電腦螢幕顯示器，如何讓NGO的大家逐步適應多變的行動裝置寬度也會是各單位在網路層面上的課題。那本日的分享也會包含這幾個部分，並以振鐸學會的網站為例子，來告訴大家只需要做一些些微的更動，就可以快速達到網頁自適應不同寬度裝置的效果，也介紹RWD與應用程式(APP)的開發心路歷程與具體執行實例。
 
而2015年開始HTML5被大眾開始較廣泛的使用。HTML5是HTML最新的修訂版本，由全球資訊網協會（W3C）於2014年10月完成標準制定，廣義的HTML5包含了三個部分：HTML、CSS3、JavaScript。過去大多的NGO都是以傳統的HTML或是php建構網站，來服務家用電腦螢幕顯示器，如何讓NGO的大家逐步適應多變的行動裝置寬度也會是各單位在網路層面上的課題。那本日的分享也會包含這幾個部分，並以振鐸學會的網站為例子，來告訴大家只需要做一些些微的更動，就可以快速達到網頁自適應不同寬度裝置的效果，也介紹RWD與應用程式(APP)的開發心路歷程與具體執行實例。
−
 
+
<table style='border:none;'>
−
<tr><th style='border:none;'><img src='http://quality-learning.net/2022/uploads/agenda/50/%E6%A1%8C%E4%B8%8A%E5%9E%8B%E8%9E%A2%E5%B9%95%E9%A1%AF%E7%A4%BA%E5%99%A8%E7%B6%B2%E7%AB%99%E7%A4%BA%E6%84%8F%E5%9C%96%20(2).png' width='250' height='240'/></th><br>圖一 這是網頁在桌上型螢幕顯示器上的樣子
+
<tr><th style='border:none;'><img src='http://quality-learning.net/2022/uploads/agenda/50/桌上型螢幕顯示器網站示意圖(2).png' width='375' height='264'/></th></tr><tr><th style='border:none;>圖一 這是網頁在桌上型螢幕顯示器上的樣子<br/>(以「urclass.net/EMEP/index.php/丁丁課」的網頁為例)</th></tr><tr><th style='border:none;'><img src='http://quality-learning.net/2022/uploads/agenda/50/行動裝置網站示意圖(2).png' width='375' height='406.5/></th></tr><tr><th style='border:none;>圖二 圖中黑色方塊即為漢堡選單，點擊後選單會從左側浮出</th></tr>
−
(以振鐸的網頁為例 http://urclass.net/EMEP/index.php/%E4%B8%81%E4%B8%81%E8%AA%B2)<br><th style='border:none;'><img src='http://quality-learning.net/2022/uploads/agenda/50/%E8%A1%8C%E5%8B%95%E8%A3%9D%E7%BD%AE%E7%B6%B2%E7%AB%99%E7%A4%BA%E6%84%8F%E5%9C%96%20(2).png' width='250' height='240'/></th></tr>
+
</table>
−
圖二 圖中黑色方塊即為漢堡選單，點擊後選單會從左側浮出
 
−
 
 
−
 
 
−
 
 
  
 
註解<br>
 
註解<br>
行 18： 行 14：
 
[3]:https://images.chinatimes.com/newsphoto/2014-12-29/1024/20141229003591.jpg 來源：資策會FIND2014<br>
 
[3]:https://images.chinatimes.com/newsphoto/2014-12-29/1024/20141229003591.jpg 來源：資策會FIND2014<br>
 
[4]:https://www.ixresearch.com/wp-content/uploads/2022/02/InsightXplorer-Biweekly-Report_20220215.pdf<br>
 
[4]:https://www.ixresearch.com/wp-content/uploads/2022/02/InsightXplorer-Biweekly-Report_20220215.pdf<br>
−
 
  
 
===議程人員介紹===
 
===議程人員介紹===

於 2022年9月14日 (三) 03:07 的最新修訂

簡介

從1990年代開始，第一個網頁瀏覽器由Tim Berners-Lee發明(WWW全球資訊網發明者)[1]，自此網頁開始逐步發展，當時網頁是以HTML(超文字標記語言，網頁的標示語言)撰寫規範為主[2]，主要服務桌上型電腦的螢幕顯示器。2000~2020這二十年之間，智慧型手機開始在全球慢慢普及，連上網路已經不是桌上型電腦的專利，在手機上連接網站的需求也逐步提升。以台灣為例，台灣的智慧型手機普及率也從2010年的10.8%[3]成長到2022的89.2%[4]，手機、平板的開發已經大大改變我們瀏覽網頁與接收資訊的習慣，而原本HTML的服務已經無法滿足行動裝置使用者，RWD這個名詞也開始出現在大家的生活中。

響應式網站設計(Responsive Web Design) 簡稱RWD，在這個資訊科技發達、人手一機的時代，逐漸轉變為一股網頁設計的趨勢。他可以先偵測用戶的螢幕寬度或是使用裝置(桌機螢幕、手機、平板)，然後判斷要將怎麼樣的風格與架構呈現給使用者。舉例來說，原本桌機使用者常使用的鼠標點擊與滑動，在行動裝置上就必須單純使用點擊或是其他手式觸發，或是現在大家常見的漢堡選單(圖二)都是RWD常見的應用。

而2015年開始HTML5被大眾開始較廣泛的使用。HTML5是HTML最新的修訂版本，由全球資訊網協會（W3C）於2014年10月完成標準制定，廣義的HTML5包含了三個部分：HTML、CSS3、JavaScript。過去大多的NGO都是以傳統的HTML或是php建構網站，來服務家用電腦螢幕顯示器，如何讓NGO的大家逐步適應多變的行動裝置寬度也會是各單位在網路層面上的課題。那本日的分享也會包含這幾個部分，並以振鐸學會的網站為例子，來告訴大家只需要做一些些微的更動，就可以快速達到網頁自適應不同寬度裝置的效果，也介紹RWD與應用程式(APP)的開發心路歷程與具體執行實例。

圖一 這是網頁在桌上型螢幕顯示器上的樣子
(以「urclass.net/EMEP/index.php/丁丁課」的網頁為例)
圖二 圖中黑色方塊即為漢堡選單，點擊後選單會從左側浮出

註解
[1]:Tim Berners-Lee: WorldWideWeb, the first Web client. W3.org. [2011-12-07]. (網頁內容快照：https://web.archive.org/web/20080904111724/http://www.w3.org/People/Berners-Lee/WorldWideWeb.html)
[2]:https://jaceju.net/webdev-history/
[3]:https://images.chinatimes.com/newsphoto/2014-12-29/1024/20141229003591.jpg 來源：資策會FIND2014
[4]:https://www.ixresearch.com/wp-content/uploads/2022/02/InsightXplorer-Biweekly-Report_20220215.pdf

議程人員介紹

林芸伍

  • 國立台灣大學物理所碩士班學生
  • 南機場魔豆學院志工 (協助自學生寫桌遊輔助程式)
  • 振鐸學會 RWD&APP 計畫執行人
  • 程式(Python,C,C++,R) 自學者
取自「http://quality-learning.net/wiki1341/index.php?title=2022論壇/NGO導入RWD&oldid=3162」