如何在網站內嵌PDF，顯示PDF內容

最近遇到一個問題，想要在網頁中直接顯示PDF檔案，該如何處理呢？
在網路上找到一個簡單方法，直接使用Google的Document Viewer來達到這個目的

透過Google Document Viewer的嵌入（embedded）功能，嵌入網頁中，程式碼中直接去指定PDF的來源位置，再搭配網頁版型調整一下iframe的大小，即可！是不是很簡單方便！

範例程式碼：

<iframe src="http://docs.google.com/gview?url=http://site/yourPDFfileName.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0″></iframe>

要注意的是，url 後面要使用絕對網址來指定你的PDF位置，不能用相對網址唷，否則會顯示不出來。

文章 摘錄於 http://vincicat.blogspot.com/2009/09/pdf-free-online-pdf-viewer.html

Synology 無法更新手動安裝的Wordpress

透過手動上傳 Wordpress 至 Synology 安裝，會產生所上傳的檔案「擁有者」是上傳者的帳號，因此要自動安裝 plugin, update, theme 的時候，甚至是更新的時候，就會出現「無法新建目錄」或是沒有權限等訊息。

無法寫入的原因是 Synology Apache 執行的時候，所使用的 userid 與 WordPress 目錄的 owner 不一樣所致。一般來說 Synology 所使用的 userid 是 http。

解決方法其實就是將 WordPress 目錄的 owner 改成 Apache 執行時的 userid 就可以了！

步驟：

1. 確認所執行時用的 userid 是哪個。首先在該 Web 目錄下新增一個 php，內容如下：
   <?php echo(exec(“whoami”)); ?>
2. 在瀏覽器中，開啟該 php，就可以在瀏覽器中看到所使用的 userid 。
3. 接著再到 Synology 中的 WordPress 的上一層目錄，然後使用 chown 指令更改 owner 就可以解決問題。
   chown -R http: wordpress

備註：

透過 DSM 雖然是有修改擁有者的欄位，但是無法修改成 http 這個帳號，因此需要透過 telnet 或是 shh 登入 Synology 主機，才有辦法修改。

使用JavaScript判斷所使用的裝置

目前有很多種方式可以判別使用者所使用的裝置，尤其是在自適應網站興起的現在。

這幾天在網路上發現一個好用的Javascript工具，WURFL.js，他基本的運作方式如下：

透過WURFL.js的資料收集與分析，讓Javascript可以辦別出使用者所連入是哪種裝置，並提供下列元件的資料輸出：

{
  complete_device_name:"Apple iPhone 5",
  form_factor:"Smartphone",
  is_mobile:true
}

其中，complete_device_name是會回傳裝置名稱，但如果事太新的機型，就要等WURFL.js維護過才會有資料。

而form_factor元件是會回傳來原裝置的類別，相關類別如下：

• desktop


• app


• tablet


• smartphone


• feature phone


• smart TV


• robot


• other non-mobile


• other mobile

最後一個物件is_mobile比較簡單，單傳回傳該裝置是否是行動裝置，提供你做判斷。

詳細的使用方式請參考來源資料。

來源資料：http://www.smashingmagazine.com/2014/07/01/server-side-device-detection-with-javascript/

如何偵測使用者是否使用行動裝置來瀏覽網站

製作網頁時，經常需要針對行動裝置另外做框架規劃，這時候需要判斷使用者的裝置來進行引導，那要如何偵測使用者是使用行動裝置來瀏覽網站呢？

http://detectmobilebrowsers.com/這個網站提供了不少資訊，把判斷的 regex 都寫好了，還有各種語言的版本，相當值得收藏，已被不時之需。

利用 Javascript 取得瀏覽器顯示內容的尺寸

透過下列的 javascript，可取得目前瀏覽器視窗的大小，在遇到不同裝置時可透過此方法得知瀏覽器尺寸，進而針對該尺寸設定CSS。

<script type="text/javascript">

function viewport(){

var viewportwidth;

var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {

viewportwidth = window.innerWidth;

viewportheight = window.innerHeight;

}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {

viewportwidth = document.documentElement.clientWidth;

viewportheight = document.documentElement.clientHeight;

}

// older versions of IE

else

{

viewportwidth = document.getElementsByTagName('body')[0].clientWidth;

viewportheight = document.getElementsByTagName('body')[0].clientHeight;

}

alert('Your viewport width is '+viewportwidth+'x'+viewportheight);

}

</script>

無法從 IIS 下載或開啟特殊副檔名的檔案

前一陣子再學習寫 Markdown 文件，由於檔站是直接存在遠端網站上，想利用Chrome的擴充到件 MarkDown Preview Plus 來開啟 Markdown 文件，但遇到IIS回應出現「HTTP 錯誤 404 - 找不到檔案或目錄」，明明檔案及路徑都正確，卻一直找不到該文件。

經查詢，原來是因為 IIS 6.0 不支援未知的 MIME 類型所造成，只要副檔名是很冷門或不常見的副檔名就會造成檔案無法開啟或無法下載的情況。

解決方法：

1. 開啟 IIS 管理員。
2. 在本機電腦名稱，按滑鼠右鍵，選擇「內容」。
3. 按一下「MIME 類型」。
4. 按一下「新增」。
5. 在「副檔名」方塊中，輸入您想要的副檔名（例如.pdb）或萬用字元（*）。
6. 在「MIME 類型」方塊中，輸入 application/octet-stream。
7. 套用新設定，重新啟動 IIS。

另外，建議使用 MarkDown Preview Plus 時，開啟 Enable auto-reload 功能，讓此擴充套件在讀取完 Markdown 文件後，自動重新整理，避免出現編碼不對所造成的亂碼。

[筆記]在Drupal中安裝CKEditor

發現在Drupal中安裝CKEditor還挺多步驟的，上網找了許多資料，大多不建議直接使用CKEditor for Drupal，因為如果直接在 Drupal 網站下載 CKEditor for Drupal 的話是要買授權的，如果你要使用Open Source的方式，則需要下載兩個不同的檔案，然後自己合併成一個模組。

步驟一：
下載 CKEditor (http://drupal.org/project/ckeditor)
下載後先解在自己的電腦，然後在 ckeditor 下面還有一個 ckeditor 的目錄，要確認裡面有 "COPY_HERE.txt"

步驟二：
下載 CKEditor 核心程式 (http://ckeditor.com/download)
注意！這裡要下載 CKEditor，而不是下載 CKEditor for Drupal。
下載後把他解開放入 ckeditor/ckeditor 。

步驟三：
設定並上傳至Drupal網站，將 ckeditor 整個目錄上傳到 sites/all/modules/ 中。
視需要修改 sites/default/settngs.php ，在前面加上以下兩行。

ini_set('memory_limit', '64M');
$cookie_domain = 'yourdomain.com';

這樣就大功告成囉～

[筆記] Drupal 在 XAMPP Windows 版速度很慢的問題

修改 apache/conf/httpd.conf，將以下兩項的值改為 on，並移除其前方的註解符號#

EnableMMAP on
EnableSendfile on

修改 php/php.ini，移除 realpath_cache_size 前方的註解符號;，並將其值改為 4M

realpath_cache_size= 4M

修改 mysql/bin/my.ini

innodb_flush_log_at_trx_commit = 2

修改完畢後，從 XAMPP 控制臺重新啟動 MySQL、Apache。

iPhone iPad 所對應的CSS自適應設定

近幾年在設計網站的時候，經常會遇到為了設計出針對特定的裝置，而使用不一樣的CSS設定，一位來自緬甸的設計師Stephen整理了一系列Apple裝置的CSS設定，這樣的整理時在減省了不少查詢時間，讓針對不一樣螢幕大小的設定能更快速完成。

網站：http://stephen.io/mediaqueries/
部分設定值如下：

iPhone 5 in portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 2G-4S in portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { /* STYLES GO HERE */}

網頁中NAME與ID的區別和相似之處

HTML中常會看到「表單的NAME」和「ID」這兩種屬性，其實他們是同一個意思，都是為了標記對象名稱。他們所不同的是NAME是由Netscape定義的，而ID是由Microsoft定義的。

再來，表單元素（form　input　textarea　select）與框架元素（iframe　frame）必須使用NAME，因為這些元素都與表單（框架元素作用於form的target）提交有關，在表單的接收頁面只接收有NAME的元素。

這時賦與ID的元素通過表單是接收不到值的，大家自己可以驗證一下。

那ID可以用在那些元素呢？像是body　li　a　table　tr　td　th　p　div　span　pre　dl　dt　dd　font　b　等等，都是可以使用ID。

最後要怎麼記憶這些，只能賦與ID但不能賦與NAME的元素呢？只要記住下句話就OK囉～

「除去與表單相關的元素都只能賦ID」

筆記：Apple Web App 常用的meta設定

詳細的設定介紹請參考Apple官方網站：
https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html

viewport：開發者決定手持裝置的縮放比例設定

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">

• l width=device-width 定義手持式裝置網頁寬度。設定成device-width可讓瀏覽器自行判斷手持式裝置寬度，也可以直接設定大小，如width=320。
• l initial-scale 畫面是以多少倍的 viewport 來顯示
• l minimum-scale 畫面縮小倍率限制。
• l maximum-scale 畫面放大倍率限制。（0 < user-scalable < 10.0，預設值0.25）
• l user-scalable 是否允許放大或縮小視窗（預設為YES）。

三種網頁轉址的方法

1. HTML 的轉址方法： 
在 HTML 網頁的 </head> 前加入以下 HMTL 碼，網頁就會自動轉址。 

<meta http-equiv="refresh" content="0;url=http://mepopeidia.com" />

其中 content=... 中的 0 是指 0 秒後自動重新整理，並轉址到 "http://mepopeidia.com" 這個 URL。 

2. Javascript 的轉址方法： 
在 HTML 網頁中原則上是任一地方加入以下 JavaScript 網頁就會轉址。但放在網頁 HTML 碼的開始較有效率(也較有意義)。 

<script>document.location.href="http://mepopedia.com";</script>

3. PHP 的轉址方法： 

<?php
    header('Location: http://mepopedia.com');
    exit;?>

重新啓動Synology的web service

筆記一下，有時修改完Synology的PHP設定值，是需要重新啓動網頁服務的，傳統的做法就直接把機器重開機，但這樣曠日費時。

其實有個更簡單的做法，使用telnet登入Synology後，輸入下列指令，即可將網頁服務Apache重新啓動，又快又方便！

/usr/syno/etc/rc.d/S97apache-sys.sh restart

這也算是Linux的技巧之一。

如何在Sublime Text建立開啓瀏覽器預覽快捷鍵

身為一個網頁開發人員，最常做的一件事，除了上網就是寫Code，然而在寫網頁的時候，最常測試自己寫的Code在瀏覽器上顯示得如何，如果這時候在Sublime Text上有個快捷鍵可以快速預覽，那該有多好！

其實在Sublime Text 2的版本，已經有內建「Open in Browser」的功能，只要你在程式碼頁面上點右鍵，在裡面的功能選單就內建這樣的功能。只是經常性的從鍵盤移到滑鼠的周返動作，很容易浪費時間，如果這時在有個快捷鍵那就完美了。

其實我們可以在Sublime Text上面的「Build System」底下建立一個執行程序，建立路徑如下「Tools > Build System > New Build System」，點選後，程式會自動開啓一個新的檔案，此時你只要修改成如下的程式碼：

Mac 使用者

{
    "cmd": ["open", "-a", "Google Chrome", "$file"]
}

Windows 使用者

{
    "cmd": ["PATH_TO_YOUR_CHROME", "$file"]
}

Linux 使用者

{
    "cmd": ["google-chrome", "$file"]
}

然後另存成「Chrome.sublime-build」（你也可以改成你喜歡的名字），之後當你要預覽測試時，Mac使用者只要按下「Cmd + B」，Windows使用者按下「Ctrl + B」或「F7」即可快速啓動瀏覽器預覽，很方便吧！

HTML字元及語系編碼設定

做網頁時需針對內容的語系與編碼做正確的設定，才能讓搜尋引擎與瀏覽器做正確的辨識。

語系設定：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

中文：zh、zh-cn、zh-hk、zh-sp、zh-tw
英語：en、en-us、en-gb
法語：fr
德語：de
日語：ja
葡萄牙語：pt
西班牙語：es

 

字元編碼：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

萬國碼Unicode：UTF-8
繁體中文：BIG5
簡體中文：GB2312

幫你增加Dropbox空間最多16G！

Dropbox真的是魅力無法擋，就連這樣的服務都出現了。

幫你增加你Dropbox底下的推薦人數，讓你免費的Dropbox空間瞬間暴增！最多可以增加16G唷！ Dropbox可以靠介紹朋友的方式來得到更多的空間，每成功推薦一位朋友，對方跟自己都會得到256MB新空間，最多可累積到8GB（32位朋友），如果你有曾用學校的電子郵件註冊（edu結尾的email信箱），本來的8GB上限也一口氣突破到16GB唷！

曾幾何時我也想過廣發推薦連結，趕緊把我的Dropbox免費空間灌到滿，隨著這項服務的爆紅，身邊的朋友各個早就註冊了Dropbox，我的推薦連結也就一個個的石沉大海，有了這樣服務，花點coco，就能輕鬆擁有，也是件不錯的事~

瀏覽器和網路世界20大須知

這是本由Google Chrome團隊所製作的《瀏覽器和網路世界20大須知》網路圖書，被譽為網路界奧斯卡的第十五屆威比獎的教育、最佳視覺設計和最佳做法類別奪冠熱門人選；最近更推出15種語言版本，包括繁體中文，讓讀者能快速認識瀏覽器和網路的基本常識，以及多種實用資訊，相當值得閱讀。


你也可以打造自己的電子書
由於採用了HTML 5技術製作，除了模擬實體書籍的閱讀方式，並加入離線閱讀、簡易搜尋、書籤功能，以及關燈和放大的閱讀模式。在 Google Code Blog 官方部落格中，也透露許多技術細節和各項功能；甚至佛心的釋出開放原始碼，讓有興趣的使用者可利用HTML 5、JavaScript和CSS來打造自己的網路書籍。

OpenCart v1.4 安裝方法

從OpenCart官方網站下載1.4版的壓縮檔後，依照下列步驟安裝：

1. 上傳解壓縮後uplaod資料夾中所有的文件至您的伺服器，您可以放在伺服器中的任何地方。如/public_html/store。
2. 如果您使用的是Unix/Linux系統，請確保以下文件是可寫的：chmod 0755 or 0777 image/
   chmod 0755 or 0777 image/cache/
   chmod 0755 or 0777 image/data/
   chmod 0755 or 0777 system/cache/
   chmod 0755 or 0777 system/logs/
   chmod 0755 or 0777 download/
   chmod 0755 or 0777 config.php
   chmod 0755 or 0777 admin/config.php
3. 請確認您已安裝MySQL資料庫，並分配一個存取帳號。注意！千萬不要用root帳號。
4. 開啟瀏覽器訪問該網頁。如http://www.example.com/store/index.php
5. 接下來請依照網頁指示完成安裝。
6. 完成安裝後可刪除該資料夾下的install資料夾。
   

筆記：如何在Ubuntu上使用Apache架設WebDAV

 

This guide explains how to set up WebDAV with Apache2 on an Ubuntu 8.10 server. WebDAV stands for Web-based Distributed Authoring and Versioning and is a set of extensions to the HTTP protocol that allow users to directly edit files on the Apache server so that they do not need to be downloaded/uploaded via FTP. Of course, WebDAV can also be used to upload and download files.

I do not issue any guarantee that this will work for you!

可用於開發Facebook程式的免費空間Jonet

想要在Facebook上面寫程式、遊戲的朋友有福了！Jonet這個網路空間提供者提出了一個專案：為所有的Facebook開發者提供一個超快速、可擴展的開發平台，它提供了一個條件不錯的免費空間給大家使用。下面是他給的空間規格：