Category: Web

網頁技術

Posted on
by

DSCN9805

經過連續四次的每月線上技術會議 (Webinar #1, #2, #3, #4) 後，二月決定移師台北外出走走，mcdlee, Louis Liu 兩位資深志工特地從高雄一天來回台北參加此次活動。2014/02/15 的台北象山 Mapping Party 總共有十六位朋友參加，所幸未因雨取消活動。

 

DSCN9881DSCN9849

Mapping Party 的主要目的是希望帶領一些新朋友熟悉繪圖工具，因步道仍溼滑，本次活動不行攀岩路線，依照體能分成兩隊，一隊走四獸山步道，另外一隊則走南港山稜線步道。由於規劃的時間有限，並未針對原地圖標示 tag:fixme 的未明路線的進行踏查，主要仍行大眾路線，並沿路紀錄需繪記的地標。並於約下午兩點回到 Mozilla Space 進行現場繪製與經驗分享。

1556260_10200830314674994_1404295785_o

本次修改主要是沿途道路的情報更新，新增黃蟬園路線與位址、修正高壓電塔路線、改善松山家商一帶的資訊、調整四獸山區域的林木線，每次一點點的小更新，都會讓地圖更加完善。以下是本次活動的編修紀錄

以下是 kcwu 的歷史對照工具提供的修改前後比照圖

以下跟 Google Map 的圖資比較

很明顯開放街圖在山區的詳盡度大勝 Google Map，雖然涵蓋的路線仍尚未覆蓋全台百岳或知名路線，道路品質也尚未能夠進行導航規劃，但登山之人行步道與道路的識別度已高於非戶外專用的圖資。比起 Garmin 等台灣商業圖資，在市區的詳盡度仍有很大的改善空間。
garmin-20131030

相較於幾年前，開放街圖的資料已經大幅提高。但仍須志工投入，無論是使用或是回報問題或是成為繪圖志工。就像 2014 年冬季奧運的所在地 – 索契一樣，集結眾人的力量完成詳細度大勝商業圖資的免費地圖！

如何開始貢獻

如果您有任何操作上的問題，歡迎參加以下的活動或透過線上網站發文，志工們都很樂意回答您的問題。

三月份相關活動

  2. 2014-03-15 台北士林官邸 Mapping Party

 關於開放街圖台灣社群

歡迎加入台灣開放街圖社群!

特別感謝

Posted on
by

Firefox 4.0 出來之後，一直沒有抽時間出來更新 CertAlert，不過最近看到 AT&T 上的 Facebook 流量莫名被轉到中國跟南韓去，似乎有某種暗黑勢力蠢蠢欲動。

頗擔心 CNNIC 有惡意作為，稍微更新了 CertAlert，讓它支援 Gecko 2.0 XPCOM API，可以裝在 Firefox 4.0 上。新版安裝檔可以於 github 下載。

Mozilla 官方 AMO 因爲疏於更新，暫時被拿下來了，將重新上傳等官方審閱後即可再次下載。

2011-03-29 01:30

官方 AMO 已經重新開放安裝，仍於申請審閱程序中。

Posted on
by

很久一段時間沒有寫 blog，Wordpress 也跟著年久失修。順手升級到 WordPress 3.0.5 後，發現網頁載入時間長達五、六秒。緩慢的 wordpress 除了翻資料很慢，也很可能被搜尋引擎降級。

於是乎，翻出 Firebug, YSlow, Page Speed 出來診斷一番。主要有幾個問題

  • WordPress PHP 網頁產生很慢
  • WordPress 用了太多 js/css file, 瀏覽器要抓超過十個檔案
  • 靜態檔案沒有作 cache control

首先是 WordPress 生頁面超過一秒，這顯然是因爲資料庫太慢的緣故。目前 Blog 跑在某臺稍微有點負載的機器，MySQL 的速度頗慢，調查了一下 WordPress 的快取模組如 Super Cache 等，最後選裝了 Hyper Cache。

至於 WordPress 用了一堆 js/css ，偷懶的方法則是裝 WP Minify，它整合了 Minify。簡單講就是把 js/css 程式碼合併在一起，移掉註解並壓縮起來，所以原本超過十個 Http Request 會被簡化成 2 個 (CSS, Javascript)。如果你像我一樣在 UserDir 中裝 wordpress，要關掉設定中的 Automatically set your Minify base per siteurl setting，並手動在 wp-minify/min/config.php 中設定 $min_documentRoot 參數。

若網站除了 WordPress 外，還有其他網站，Google 也出了一套 mod_pagespeed，可以在 Apache2 模組中動態修改輸出的 CSS/Script 檔案。

至於最後一項靜態檔案的 Cache control，則把 mod_expires 開起來，時間設一設就搞定了。

其他還可以做的除了把機器搬到快一點的網路或檔案丟到 CDN 上外。還可以用 HeadJS Loader (HeadJS) 讓舊款不會卡在逐一載入 Javascript 的程序上。也可以裝 jQuery Image Lazy Load 讓網頁先顯示，再慢慢下載圖片。

參考資料

遠端測試工具

Posted on
by

之前用 Microsoft Excel 或 OpenOffice Calc，時常會想在寫函式時使用 SQL 語法。因為你在試算表中，最常用得功能之一，就是統計並計算出原始資料工作表 (Sheet) 中的數值。

例如，你可以用 SUMIF, COUNTIF, FILTER 等公式，去統計、過濾查出某一種類別的加總或平均。可是這樣一來，你得寫好一行公式，然後把他拉開複製到每一個儲存格 (Cell) 中，有時參照 (cell reference) 沒寫好或無意中拉錯一格計算範圍，你就算錯所有資料。偏偏這種錯誤很容易在不停重複複製儲存格時發生。

所以你就想，為什麽不讓我直接 SELECT * FROM cells GROUP BY 來拉資料就好？可是這些試算表軟體，都只讓你從其他 Data Source 中拉資料時，才能用 SQL 語法。但是把手上的資料匯入 Microsoft Access 或 OpenOffice Base 又很脫褲子放屁。

最近為了方便分享資訊給其他人，常改用 Google Spreadsheets 編輯。發現 Google Spreadsheets 有一個 Query function，可以讓你在試算表中用類似 SQL 得 Google Visualization API Query Language.

Query Language 本來的設計是讓你可以從線上資料庫中撈資料，以便整合到 Google Chart Tools / Interactive Charts (aka Visualization API) 中，如此你可以把自己的資料接出來 (Google I/O 2009 – Implement Your Own Visualization Datasource) 餵給 Visualization API。

而 Google Spreadsheets 的 Query function 則是整合了 Query Language，讓你直接把試算表當作 Data Source! 所以你可以直接用 SELECT *，把另外一個表格中資料全數複製。你也可以用 GROUP 跟 aggregation functions 如 avg(), count(), sum() 把一個表格中的資料統計算好列出來！非常方便，過去要重複好幾次計算，甚至那種千行以上的工作表都可以瞬間就處理好，出錯得機率也小了許多。

Youtube 上有一則非常好的示範 –

Posted on
by

在試著分享軟體專利的荒謬性字幕時，試著想要把影片跟字幕嵌入到網頁裡面，方便大家點開就可以直接看。試了幾個線上服務，如 Youtube, Vimeo, blip.tv 等等，發現他們要嘛限制播放時間，否則就是不支援字幕系統。

實在不想耗費時間剪接，後來發現軟體專利的荒謬性影片擺在 Internet Archives，而且直接用 HTML5 Video Tag 播放，轉念就試試 JavaScript 吧。很快找到 j^ 的 jquery.srt.js，這之小程式會自動下載跟解讀 SubRip (*.srt) 格式的字幕檔，然後在影片播放的同時，依照時序自動更新字幕，就算使用者快轉也會自動跳到新位置，相當方便。效果可以看軟體專利的荒謬性一文的影片。

必要的話，也可以稍微修改，讓字幕直接浮在影片位置上，顯示會更接近一般播放軟體，可能更美觀。

所以 JavaScript with HTML5 又多解決一項 Flash 可以辦到的事情啦。:D

Updated, 2010-05-16 14:00: 理想中的多國字幕系統，可以參考 Ilias Ismanalijev 的嘗試。除了用 jquery.srt.js 外，也有一Timed Text (TT) Authoring Format 規格可用。詳情可見 Silvia Pfeiffer 在 HTML5 Video Accessibility 上的相關推展。

Posted on
by

若 Firefox 開發延伸套件時，應該會知道 Firefox 對於外掛並沒有安全防護機制的，只要你能裝進系統，大約就可以使用所有的元件或存取系統資源。延伸套件被視為可信賴的軟體，開發者應負起各延伸套件的安全性。

對此，Firefox 在 Java Script 開發環境的安全設計主要分為賦權與未賦權的兩種安全模式。賦權的環境中，軟體可以存取所有的 XPCOM，沒有任何限制，於是它可以讀取或修改使用者的歷史紀錄、Cookie 等，甚至存取所有系統檔案。而 non-privileged 則僅提供限制嚴格的 HTML DOM API 權限，Script 的存取也依照其網址與網域名稱給予嚴格限制，避免 XSS 或本地檔案讀取等安全問題發生。

無論是外部的網頁，或者是 XUL 軟體，都是使用 XML/HTML/Java Script/CSS 來撰寫，因此概念上都是由 Window 載入 XML 文件，並透過 Java Script 來存取 DOM API。

開發延伸套件時，凡是在 XUL Overlays 或 XPCOM Components 中的程式碼，都是給予完全的存取權限。而從外部網頁載入的內容，應該給於其未賦權的權限。這種安全模式的設計，乃是防止網頁上的程式可以任意存取系統資源，是一道安全保護牆。

由於 Mozilla 社群並未對安全模式定義名詞，這裡暫區分稱呼如下兩種安全模式

  • Web content document (non-privileged)
  • Chrome document (privileged)

各個程式的安全模式可依照該載入網址作區別，例如 chrome:// 有完全權限、http://example.com 則可存取 example.com、file:/// 則可存取本地檔案。

你也可在利用 PrivilegeManager  詢問使用者後存取 XPCOM 或者讓 XMLHttpRequest 跨網域存取。除了預設依照網址判斷外，開發者可以設計不同的內容使用安全模式，開發者可以決定直接載入網路資料後在 Chrome Document 中執行，或者利用 type=”content” 之方式使其載為 web content document.

但是剪下貼上是一個開發者都會犯的錯誤，最常見的錯誤之一就是直接把外面抓回來的資料，用 innerHTML 直接塞進 chrome document 中。有時候資料中會含有一些 java script，雖然 <script /> 中的語法不會被執行，但是 <img onerror=”alert(‘xss’)”> 這種程式碼還是會被觸發，外部資料中夾帶程式碼的狀況還是相當多，因此凡是處理外部連結都要小心。

Security Assessment 的 Roberto Suggi Liverani 與 Nick Freeman 在上個月初於印度舉辦的 SecurityByte & OWASP AppSec Conference 中，與今年年中的 DefCon 17，發表了幾個 Mozilla 上的零時差漏洞。根據他們的文章與簡報，最常見的就是如 RSS Feeds 中的 <description> 的程式碼會被觸發執行、或者像是 FireFTP 1.1.4 以下的版本，會執行伺服器上的歡迎頁面。或者是熱門的 ScribeFire 3.4.3 以下版本，會以 chrome document 執行 <img onLoad=”alert(‘xss’)”>。

避免這些錯誤的方法之一是盡量使用 DOM manipulation methods 來塞入內容。在 Security best practices in extensions 一文中，講解了數個開發安全延伸套件的方法與注意事項，像是無論如何得執行他人的 Script，那就用 evalInSandbox 來執行。

另外你若得在兩種安全模式間互傳資料，正確的作法應該是盡量利用 DOM Event.