這篇文章是因為發現一個很有意思的問題, 在 TEXTAREA 中的換行, 對於不同瀏覽器, 會送出不同的換行符號.
目前實測的狀況是 IE7, IE8 會送出 %0D%0A, 而 IE9 會和一般瀏覽器一樣送出 %0A.
這個狀況會影響的問題可能不大, 不過若是會用到換行排版的程式, 相信會有很大的影響, 這個在使用上要留意有這樣的問題.
作者: tim
這個其實很久以前的 CSS 就支援了. 這是一個利用 CSS 指令的方式來設定外部字型, 使用的方式如下:
@font-face {
font-family: "font-name";
src: url("http://xxx.com/abc.ttf");
}
.font1{
font-family: "font-name";
}
如此一來, 便能在 html 中使用指定的字型了. 不過這個方式使用在英文字型比較理想, 若是中文字型的話, 還得等待用戶下載一個超大的字型檔(中文字小則4~5MB, 大則 20MB都有), 光等待下載的時間可能就讓用戶受不了了.
網路上可以找到不少免費的中英文字型, 利用這樣的方式, 可以更方便地更換網頁上的字型, 讓字型的應用更彈性, 不過中文還真的沒有什麼好方法可以解決.
相關閱讀:
http://blog.bobchao.net/2009/06/35-4b-font-face.html
免費字型:
http://isvincent.pixnet.net/blog/post/31012343
http://www.freegroup.org/2009/09/free-chinese-fonts-hdzb/
http://briian.com/?p=290
先弄清楚, 這個 TABLESAMPLE 是用來做以”頁(page)”為單位的取樣方式, 和所謂的隨機不同, 不過在超大型資料表上, 若要快速地取出一部分的資料, 可以應用這樣的方式來達成.
支援 MS SQL 2005 以上的版本, 使用方式很單純, 只需要在查詢指令的 table 之後加上 TABLESAMPLE 子句即可, 如下:
TABLESAMPLE [SYSTEM] (sample_number [ PERCENT | ROWS ] )
[ REPEATABLE (repeat_seed) ]
範例如下:
使用 percent百分比:
USE AdventureWorks2008R2 ; GO SELECT FirstName, LastName FROM Person.Person TABLESAMPLE (10 PERCENT) ;
或是指定筆數:
USE AdventureWorks2008R2 ; GO SELECT FirstName, LastName FROM Person.Person TABLESAMPLE (100 ROWS) ;
要特別注意的是, 由於是以 page 為單位, 所以取出的資料只是約略的 page 內容物組合而成的, 不過若是對於超大內容的 table 來說, 比較如下兩個指令:
SELECT TOP 100 * FROM TABLE1 ORDER BY NEWID()
SELECT TOP 100 * FROM TABLE1 TABLESAMPLE(1 PERCENT) ORDER BY NEWID()
效率上會有很大的差異(當然是後者會快很多), 不過若是有 WHERE 條件下, 就不適合使用 TABLESAMPLE 了, 因為是無法以指定的條件來取出資料, 但仍可以下達 WHERE 子句, 是指取出的 TABLESAMPLE 內容, 再過濾的資料, 如下:
SELECT * FROM TABLE1 TABLESAMPLE(1 PERCENT) WHERE FIELD1 > 5000
記得是先取出 sample data 後再過濾的行為, 所以極有可能沒有資料發生, 使用上要特別留意.
官方資料: http://technet.microsoft.com/zh-tw/library/ms189108.aspx
繼續閱讀: http://sharedderrick.blogspot.com/2011/04/tablesample.html
微軟已於3月正式推出IE9了, 其中 IE9 的 pinned site 功能很有意思, 將 IE9 和 Windows 7的介面整合在一起, 實作的方式不難, 只需要在網頁上加幾行 meta data tag 就可以了, 可以參考保哥的這篇文章:
http://blog.miniasp.com/post/2010/09/21/IE9-Pinning-and-JumpLists-on-your-website.aspx
這裡只需要用到 html 即可.
不過若是想要做到動態增加的方式來進行 pinned site 功能的設定呢? 可以參考保哥的這篇:
利用 javascript 程式碼來操作即可, 相信是很容易上手的!
相關資料請參考:
http://msdn.microsoft.com/zh-tw/ie/gg315439 釘選網站 (Pinned Sites)：Windows 7 桌面系統與 Internet Explorer 9 的整合
http://msdn.microsoft.com/en-us/library/gg491738.aspx Introduction to Pinned Sites
利用 facebook 的 social plugins 中的 comments 來做網頁的留言是很方便的, 使用的方式很簡單, 只需要到 facebook 的 developer 網站取得產生的程式碼即可, 連結在此:
http://developers.facebook.com/docs/reference/plugins/comments/
其實程式碼的內容也很容易理解, 如下:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="500"></fb:comments>
其中的 div fb-root 是放留言的地方, 而後面的 script 才是程式的重點, 而最後的 fb:comments 則是一些參數, 其中的 href 就是留言的網址, 而 num_posts 則是在網頁上要出現最後幾則留言, width 就是這個 div 要給定的寬度.
可以參考這頁顯示的結果: http://sample.diary.tw/flickrset/ 這樣就能方便大家利用 facebook 來討論這個網頁了, 真是方便又好用的 plugin 啊.
[2011/4/15]
放好了之後一直覺得怪怪的, 因為都是英文的介面, 雖然功能及留言內容都不影響, 但其實是因為這個 facebook comments 有語系的關係, 要調整的部分很單純, 就是原來引用的 js url中有出現 en_US 改為 zh_TW 即可, 這樣一來, 介面就會變成是繁體中文了, sample 頁上也做了調整了, 可以再連去看看囉.
不過有趣的是上方的那個讚的功能, 由於沒有語系的影響, 所以在中文用戶下就會出現中文, 英文用戶下自動也會出現英文, 就沒有語系的問題了. 該”讚”的 social plugin 的語法可以由這裡取得: http://developers.facebook.com/docs/reference/plugins/like/ , 除了讚-即like外, 還有推-recommend 可供選擇應用.
在 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] 會出現一個有時間序的清單並圖象化, 如下:
這篇文章很單純的一個應用需求, 就是要取遠端文字檔內容, 但該文字檔內容是個 log file, 會隨時間愈來愈大, 如何能只取出部分最後的內容呢? 否則隨時間愈長, 每次取回來都會愈久, 而且其實需要的內容只有最後一部分, 也就是要像 tail 的功能.
若不在遠端主機上寫程式, 就得思考一下 http header 方式如何設定 request, 馬上想到一個續傳的應用, 也就是指定 Range header 的方式來對遠端的 web 主機下達只取出某個部分, 可以參考這裡對 Range header 的說明:
http://www.aslibra.com/blog/post/http_header_detail.php
若依這次的需求, 可以指定只要最後的 50k 的話, 可以利用 Range: bytes=-51200 若用 asp 程式實作可以這樣寫:
Set xmlhttp = Server.CreateObject("MSXML2.ServerXMLHTTP")
xmlhttp.Open "GET", "http://webserver/data.log", False
xmlhttp.setRequestHeader "Range", "bytes=-51200"
xmlhttp.Send
xmlData = xmlhttp.ResponseTEXT
Set xmlhttp = Nothing
Response.Write xmlData
這樣一樣可以不用在遠端的 web server 上實作程式, 又能快速地取出最後 50k 的資料內容, 實在非常方便, 又能節能減碳, 利用 Request Header 來解決, 真是快速啊!
這個是繼之前 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 很容易地預覽一些網站上的初步設計使用.
瀏覽器支援HTML5後, 可以利用 <video> 標籤來做影片的播放, 與之前需要 FLASH 的外掛不同, 讓瀏覽器本身就可以直接直援播放影音的功能.
不過有時需要有向前相容的功能, 也就是在不支援 <video> 這個 html5 標籤時, 也需要能播放, 這時候可以利用之前曾提過的 jw player (http://www.longtailvideo.com/players/) 或這篇文章要介紹的 VideoJS – http://videojs.com/
這個播放器利用了純 HTML5 的 <video> 標籤功能, 配合了可以自訂的 CSS 來產生播放器, 並同時支援了多款現行的瀏覽器, 以及向前相容的 FLASH 語法, 方便在撰寫影音播放器的開發者使用, 並且還有一個方便的產生器: http://videojs.com/embed-builder/ 還有多組 SKINS 可供應用: http://videojs.com/skins/ 真的還蠻方便的呢!