分類彙整: 程式設計

項目符號的形式

order list的項目:

  • none ( 沒有符號 )
  • cjk-ideographic ( 一、二、三 )
  • decimal ( 1、2、3 )
  • decimal-leading-zero ( 01、02、03 )
  • lower-alpha ( a、b、c )
  • upper-alpha ( A、B、C )
  • lower-roman ( i、ii、iii )
  • upper-roman ( I、II、III )
  • initial

語法:

1
<ol style="list-style-type:upper-alpha">

unorder list的項目:

  • disc
  • circle
  • square
  • none
1
<li style="list-style-type: circle;">

部落格顯示奇怪的頁面?可能是電信業者或瀏覽器搞的鬼!

最近我的部落格有篇文章點閱率很高,但緊接而來的是這篇文章開始顯示奇怪的頁面。例如我明明用桌上電腦瀏覽,卻出現手機頁面,而且切不回來。還有我更新文章內容,網頁卻沒有更新。由於這樣的症狀和快取(cache)應該很有關係,但我卻找不到是誰「快取」了我的網頁。在網路上找了很久,發現最可能的「兇手」就是電信業者,以及我的Chrome瀏覽器。

根據網路情報顯示,部分電信業者會主動快取部分熱門內容,甚至會主動「最佳化」網頁內容,導致使用者看到奇怪的頁面。另外,Chrome瀏覽器有個Google Web Light的功能,可以降低資料傳輸量,但是當然也會對網頁內容作手腳。身為網路內容的提供者,我當然不希望使用者看到不合適的頁面排版。

解決方法如下(參考網頁):
1.在網頁的header區域(或是wordpress的header.php)加入

1
2
3
<?php
    header("Cache-Control: no-transform");
?>

或是
2.在主機資料夾的 .htaccess檔案內加入

1
2
3
<IfModule mod_headers.c>
    Header set Cache-Control "no-transform"
</IfModule>

可以避免網頁被快取或是動手腳。

2016.06.18更新
測試過之後,還是有點狀況,我又做了以下的處置:
1.清除瀏覽器本身的快取
2.把Jetpack的功能都關閉(如果有安裝Jetpack的話)

下載 F4M 格式網路影音片段檔案 Adobe HDS

如果利用Chrome下載網路影音的好幫手,GetThemAll Video Downloader,去下載TBC台灣寬頻網路新聞的影音檔時,會下載到很多個附屬檔名像mp4Seg1-Frag3這樣的檔案,而且播放程式打不開。原來這類影音檔是利用Adobe HDS技術把flv檔切成段落,如果利用Bigasoft Video Downloader Pro雖然號稱可以拼接這些影片片段,但我拼起來卻只有影片前半段,只好放棄。

網路上有網友自己寫了一個php的程式,一行指令就可以把影片段落一次下載、拼接完成。不過需要一些前置作業,加上需要用到指令模式,對於沒有圖形界面就不會操作的人有點困難,所以我盡量想辦法讓步驟更簡單。

簡單版本:
1.前往想要下載影片的網站(以http://www.tbc.net.tw/News/NewsDetail?id=0556d332-9bd5-4588-acf4-f93cdaada24a&newsType=4為例)。
2.檢視網頁的原始碼(Chrome的操作:網址欄右側最右邊選單按鈕→更多工具→開發人員工具→Source頁籤),找到一個附屬檔名是f4m的檔案網址(以前一步驟網站為例,找到網址為:http://media.tbc.net.tw/hds-vod/cctv/201604/08-05.mp4.f4m)。
3.下載這個檔案,裡面有PHP 5.5 32bit的主程式(原始來源),PHP的設定檔(原始來源),和下載影片用的程式(原始來源),最後還有我寫的簡易執行檔(run.bat)。
4.解壓縮上面那個檔案。
5.用滑鼠右鍵點選run.bat(或是只看到run)這個檔案,選擇編輯,把檔案中用雙引號包起來的f4m檔網址替換成你要下載影音檔的f4m網址,儲存檔案。(或是用文字編輯程式編輯這個檔案也可以)
6.點兩下run.bat這個檔案。
7.同一目錄下會出現下載好的影片檔。

複雜版本:
1.和簡單版本的差別是,不要下載我準備好的壓縮檔,自己去原始來源下載程式,免得被我下毒。
2.操作說明可以參考這裡

Jquery Mobile 網頁的選單(menu)功能外掛 – mmenu

行動裝置版本的網頁,常常可以有個「選單」的按鈕在頁面左上角(或是右上角),非常方便好用。所以我上網找了個現成的來用,mmenu!這個外掛除了使用簡單之外,還有階層式的選單,相當好用。

官方網頁:http://mmenu.frebsite.nl/

閱讀全文

讓首頁背景圖片符合視窗大小

每個訪客的畫面都不一樣大,為了讓背景圖片可以跟著縮放,可以在網頁裡加上這樣的語法。其中第一段是利用java script判斷訪客的畫面大小,第二段是用css調整背景圖片尺寸。

第一段,請加在script的標籤之間:

for (var i = 0; i < images.length; i++) { var image = images[i], width = String(image.currentStyle.width); if (width.indexOf('%') == -1) { continue; } image.origWidth = image.offsetWidth; image.origHeight = image.offsetHeight; imgCache.push(image); c.ieAlpha(image); image.style.width = width; }

第二段,請加在style的標籤之間:

body {
background-image: url(welcome.jpg);
background-size: 100%;
}

資訊來源:http://stackoverflow.com/questions/376253/stretch-and-scale-css-background

藝術街網頁上的影像地圖

在台中東海藝術街的網站首頁加了影像地圖,一種是單純的影像地圖,另一種是可以移動放大縮小的影像地圖,附加自動判斷手持裝置和桌上型電腦的網頁程式語法。

東海藝術街網站首頁:首頁會自動判斷瀏覽設備的種類,進入下面網頁。
東海藝術街影像地圖手機板:用手指放大縮小地圖,圖中有編號的十個文創據點是可以點選的。
東海藝術街影像地圖桌機板:地圖可以用滑鼠滾輪放大縮小,有紅色指標的符號可以點選連結。

閱讀全文

PHP 筆記 – 用curl取代file_get_contents

在安裝布景主題的時候,發現程式中有用到file_get_contents這個指令,如果PHP的設定中沒有把allow_url_fopen這個功能打開,就會出現警示訊息,而且無法讀到外部連結的內容。但是開啟allow_url_fopen這個功能又很危險,因為駭客會把程式碼放在連結中,一旦程式讀取到惡意的程式碼,那網站跟資料庫的內容就有危險了。

所以我在網路上查到有人用curl取代file_get_contents的用法:

$updateUrlContent = file_get_contents($themeUpdateUrl);
改成
$curl = curl_init($themeUpdateUrl);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$updateUrlContent = curl_exec($curl);
curl_close($curl);

相關說明:http://www.christianschenk.org/blog/php-curl-allow-url-fopen/

解碼:http://www.tareeinternet.com/scripts/decrypt.php