快快升級到 Firefox 6 後, 發現檢視原始碼功能不見了, 原本在 “檢視” 選單下的 “頁面原始碼” 消失了, 先來看看在 Firefox 5 的檢視功能表內還在的 “頁面原始碼”:
但在 Firefox 6 下, 這個功能不見了:
雖然有快速鍵 Ctrl+U 可以快速叫出來, 不過還是得來找看看到底跑到哪裡去了, 原來是放到”工具” 下的 “網頁開發者” 下的 “頁面原始碼”, 如下圖:
真是的, 藏在這麼裡面, 真是不太方便啊, 看來之後得用快速鍵 Ctrl+U 來叫出可能會快一些了, 不然藏得如此深的地方, 光要去點到, 都要花一點時間.
不過也可能是讓不是做網頁開發的人少點麻煩, 從檢視中移出來吧.
相關閱讀:
http://por.tw/Website_Design/index.php?load=read&id=67
現在 Firefox 拼了命的升級, 奇怪耶, 又沒有多大的功能改善, 主版本號一直往上跳, 這不是個好現象吧. 雖然說這是一個持續在前進的軟體專案, 不過這樣跳躍式的版本號大躍進, 似乎是想證明我們很積極地在改善及進步.
今天的 Firefox 5 提出了要升級到 Firefox 6 的升級通知, 於是就順手升級上來, 不過又是有一些 plugin 不能用了, 看看有沒有它宣稱的速度變快.
這個是個蠻好玩的應用, 由於全台的街景服務已經有蠻大的覆蓋率了, 所以用這樣的方式來模擬導航駕駛, 相信會讓不熟地址路況的人更容易上路.
這個算是整合 google maps api 出來的一個應用, 網址在:
http://gmaps-samples.googlecode.com/svn/trunk/streetview/streetview_directions.html
進來之後, 其實也就是簡單地輸入出發地地址, 目的地地址就可以按下 route 產生導航, 並利用 drive 按鈕來模擬駕駛的街景.
例如輸入台北市政府到總統府地址, 台北市市府路1號, 台北市重慶南路一段122號, 按下 route 後, 產生如下畫面:
接下來可以點 driver 或是右下的導航點, 都可以更新上方的街景到所在位置, 也可以直接操作上方的街景, 來進行前後移動(如原來的 street view一樣的操作方式), 這樣就可以模擬了.
嫌開的速度太慢? 可以調整一下 speed 到 fast 會快一點, 不過這個導航是個安全駕駛, 所以即使是 fast 也還是很慢!
這篇文章要介紹的是一個 PhET 線上教學網站.
以往我們在學習物理, 化學, 地球科學等科學時, 看文字教材遠不如看影片或是互動活教材, 這個網站提供了線上(也有離線版本), 分門別類整理好的互動式活教材, 而且還有繁體中文. 先來看看首頁:
http://phet.colorado.edu/zh_TW/
開始用就直接按下”開始玩教學”, 若是要下載離線版本可以點右下方的”完整執行”後, 即可下載教學離線版本. 由於所有的教材都是使用 flash 及 java 在瀏覽器環境下使用, 所以可以很方便地在各種作業系統及瀏覽器上使用, 方便又好用.
點入開始玩教學後, 左邊看到的是完整的分類, 右邊則是目前分類項目的內容(預設在最新):
而且還有區分年級的方式整理, 讓小朋友也能找到適合的教材, 點下”依年級區分教學主題:
有區分為國小, 國中, 高中, 大學幾個分類, 來點個國小的看看吧, 選了裡面的”繩波”:
繩波的連結: http://phet.colorado.edu/sims/wave-on-a-string/wave-on-a-string_zh_TW.html
用互動的方式來呈現的教學, 相信最容易也記憶最深, 大家可以好好利用, 趁暑假, 可以讓自己或小朋友多學一些科學觀念.
是的, Firefox 5 來了, 記得沒多久前才 Firefox 4, 而且也就才 4.0.1 而已, Firefox 5 已經於之前更新的 Firefox 4.0.1 上提出新的版本更新提示, 於是又再更新到 Firefox 5, 目前的版本是 5.0
不知道為什麼更新的這麼快, 而且這次更新的主要功能似乎不多, 或許是希望能藉由更新版本數字來活絡一下這個社群持續的求新求快求變的特質吧.
但是這次更新, 有一些 plugin (或稱 extension) 又不能用了, 像是 google 的 toolbar 就是個列子, 不過這些小問題應該很快會獲得解決.
隨著瀏覽器版本的更新, developer 們與 designer 也就必須快速地來適應這個相容性的考驗, 不過也正因為如此, 也讓標準能更標準, 大家能依循著標準來開發及設計, 這樣也是件好事!
今天工作的電腦上的 Firefox 3.6.17 提出要更新到 4.01 的版本, 於是就更新下去了, 原本是打算 3.6 和 4.0 並存, 先不更新, 再另外裝一個 4.0, 不過既然 Firefox 已將 4.0 放到 3.6.17 版本的更新之後, 所以就乾脆升級了.
還好常用的 Addons 都相容或有更新相容於 4.0 的版本, 包含一個 theme 是 classic compact 也都相容 (classic compact 資訊可以參考: https://diary.tw/archives/698), 這樣更新下來還蠻愉快的.
之所以更新, 是因為在更新宣傳上的比 3.6 版本速度快 6倍, 如下圖:
不用錢這件事應該大家都同意, 不過快 6倍的速度更讓人興奮啊, 因為現在的網頁對於瀏覽器的需求愈來愈高, 都是一堆 css 和 javascript 及 jQuery, 瀏覽器更需要的是速度. 不過對於全新外觀我可是敬謝不敏, 因為也都是抄 google chrome 的, 而且把分頁放在上頭還真是不習慣, 不過都可以調整回原來的長相, 所以就沒問題了!
接下來就要好好體驗他的快 6倍的效能, 來試試看囉!
在 Firefox 中, 之前已經介紹過許多好用的工具(對開發及除錯應用), 像是
Firebug – https://diary.tw/archives/245, https://diary.tw/archives/485
Web Developer – https://diary.tw/archives/227
LiveHTTPHeaders – https://diary.tw/archives/565
Fiddler – https://diary.tw/archives/287
User Agent Switcher – https://diary.tw/archives/926
這裡要介紹的是除了可以觀察每個 http 連線狀況外, 還能修改傳送資料的功能, 這個 AddOn 稱之為 Tamper Data, 光看字面上就很清楚是一個改資料的 AddOn, 但是是在執行網頁訪問的狀況下可以用插入式的方式操作, 這對於在沒有開發工具下, 要快速地進行傳送資料的調整(header, postdata), 如此一來, 可以容易地進行除錯及測試驗證.
先安裝 tamper data 這個 Firefox 的 AddOn – https://addons.mozilla.org/en-us/firefox/addon/tamper-data/
接下來可以在 Tools (工具) 選單下出來一個 Tamper Data 選項, 點選出來後, 就會出現 Tamper Data 視窗, 接下來, 就可以正常訪問一般的網站, 例如 yahoo, 會看到畫面上有一堆 request 及 response time 的 list, 如下:
這樣對於訪問 yahoo 的結果可以一目暸然, 對任一筆資料按下右鍵, 選 [Graph All] 會出現一個有時間序的清單並圖象化, 如下:
這個是繼之前 flickrset 取出整本相簿工具後的另一個小小的 flickr 應用.
一般利用 flickr 來當 blog 圖床應用很多, 不過常常看到圖, 但想要找出來在原來 flickr 的哪裡, 所屬哪個 user 或哪個相簿的查找不是很容易, 利用 YQL 的 flickr.photos.info 這個 table 可以查找出來 photo_id 對應的 url, 進而找出來圖片的來源, 及原來所屬的上傳者, 例如:
http://farm4.static.flickr.com/3542/35450735270_82b8e9945c_z.jpg
這張相片, 上面的 photo_id 為 35450735270, 帶入 YQL 利用這個查詢指令:
select urls from flickr.photos.info where photo_id=’3545073570′
後, 可以查出以下結果:
<span style="font-family: monospace;">
<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
yahoo:count="1" yahoo:created="2011-03-07T13:55:56Z" yahoo:lang="en-US">
<results>
<photo>
<urls>
<url type="photopage">http://www.flickr.com/photos/okilyt/3545073570/</url>
</urls>
</photo>
</results>
</query>
</span>
其中的 http://www.flickr.com/photos/okilyt/3545073570/ 就是原來的相片在 flickr 內的 url 了, 連回去看, 就能找出上傳者及對應相簿了, 方便大家使用.
已實作好的工具 url 在這裡: http://sample.diary.tw/flickrphoto/ , 只需要填入圖片連結, 無論是大圖小圖縮圖都可以, 程式自動會判定 photo_id, 並帶入 YQL 後查詢出來在 flickr 內的連結, 大家可以試看看.
[2011/10/6 15:00]已改為使用 flickr api 了, 因為 YQL 直接提供資料輸出, 請參考這篇: https://diary.tw/archives/1134
從這裡看來的: 產生任意大小的貓圖片…
有意思的這個網站: http://placekitten.com/ 提供了任意尺寸的貓圖片可供臨時要一些不同尺寸的圖片用來排版時, 方便隨時取用, 用來做網站排版的”佔位”.
例如:
http://placekitten.com/320/240
http://placekitten.com/g/352/288
看出來了嗎? 其中的 http://placekitten.com/寬/高, 而外多一個 g 的就是用灰階的方式呈現, 不過每一個 size 的圖片似乎不會改變, 也就是都是一個圖案, 雖然如此, 在不同的尺寸應用上還是很方便啦, 可以讓 developer 很容易地預覽一些網站上的初步設計使用.
這個網站(http://graphr.org/)利用了 html5 的 canvas 特性, 製作了一個方便的函數繪圖功能, 也將一些常用的尋解功能放在上面, 例如二元一次方程式如下:
y=x-1
y=3x-4
把資料輸入後(預設只有一個方程式, 按下[Evaluate]旁的[+]可以再多添加一個方程式), 點 [Evaluate] 後, 會把函數圖繪製出來, 再按下 [Intersect] 鈕, 把滑鼠移到交叉點附近後, 就會出現交點的解, 如下圖:
如此一來便能方便地利用圖示函數應用來解一些方程式. 上圖找出 (x, y)=(1.5, 0.5)為解.
再來看看3次函數的局部最大/最小值, 例如以下三次方程式:
y=x^3-3x^2+2
一樣的方式先輸入後, 按下 [Evaluate] 繪出圖形後, 再利用 [Local Minima/Maxima] 鈕, 找局部最大/最小值, 如下圖:
上圖找出 x=2, y=-2 的局部極小值.
很方便的函數繪圖工具.