作者彙整: Han-Chiang Chou

在phonegap中新增一個錯誤導向的頁面網址errorUrl

phonegap可以將網頁封裝成應用程式APP,如果網頁的連結內容有誤,想要將錯誤的連結導向特定頁面的話,就可以用errorUrl這個設定。

使用範例(phonegap版本2.3.0):
在res->xml->config.xml中加入一行

<preference name="errorUrl" value="file:///android_asset/www/error.html" />

上面的範例會將錯誤頁面導引到assets/www/目錄下(也就是你的phonegap起始網頁index.html所在處)的error.html檔案。

注意:
1.導引值要以file:///的格式來寫,例如sdcard就是file:///sdcard/
2.file後面的斜線有三條
3.官方說明:http://docs.phonegap.com/en/2.4.0/guide_project-settings_android_index.md.html
4.原來splashscreen也可以在這裡設定,下次來試試看。

用PhoneGap把網頁做成應用程式 HTML to APP

為了把加菲貓漫畫的網頁離線版本做成手機應用程式,採用PhoneGap的工具來完成!

成果作品:
加菲貓漫畫倉庫APP(漫畫離線閱讀):說明及下載頁面、手機直接連結到Google Play下載頁面

這是一個真正免費,而且不會有惱人廣告的作法喔!!
閱讀全文

隨螢幕調整字型大小

在font-size的設定用vw或vh當單位,其中vw是相對畫面寬度,vh是相對畫面高度。

參考資料: css-tricks Viewport Sized Typography

但是手機的瀏覽器好像不支援?行動裝置好像要用em當單位,可是em當單位在一般瀏覽器好像又不行?

後來我在手機瀏覽模板的style.css檔裡面增加一個div的設定來解決。

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

每個訪客的畫面都不一樣大,為了讓背景圖片可以跟著縮放,可以在網頁裡加上這樣的語法。其中第一段是利用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

WordPress 部落格搬家與多部落格系統

因為要幫藝術街建立一個部落格系統,希望未來可以讓更多商家加入。但是建立過程一直不順利,最後決定用搬移複製舊部落格的方式來進行,結果成功了!

東海藝術街部落格群:http://blogs.artstreet.tw

閱讀全文

藝術街網頁上的影像地圖

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

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

閱讀全文

加菲貓漫畫網站手機、平板閱讀適用頁面製作 RSS與XML

前面(加菲貓漫畫 APP 程式製作與上架)提到,為了製作一個手機用的應用程式,引發了我認真寫一個手機和平板適用的網頁。這個網頁主要是以RSS*閱讀器為基礎,希望畫面能夠簡潔好用,然後讓手機應用程式來讀取。關鍵功能是由jquery mobile所提供。

加菲貓漫畫手機版瀏覽網頁:最新漫畫舊的漫畫

2013.12.14更新:
上面兩個網址已經停止維護,新的加菲貓漫畫手機版瀏覽網頁

閱讀全文

加菲貓漫畫 APP 程式製作與上架

有鑑於手機和平板的使用日漸頻繁,所以幫網站寫一個手機應用程式(APP)似乎是個流行趨勢!於是,我也來趕流行,想辦法為加菲貓漫畫寫個應用程式,讓大家可以更方便地隨時隨地看漫畫~~

加菲貓看漫畫APP:說明及下載頁面、手機直接連結到Google Play下載頁面
加菲貓俱樂部APP:說明及下載頁面(這個程式已經失效)

2013.12.14更新:
加菲貓漫畫倉庫APP(漫畫離線閱讀):說明及下載頁面、手機直接連結到Google Play下載頁面

加菲貓漫畫中文版離線閱讀APP-2012:下載頁面(需要手動安裝,安裝說明可參閱這裡
閱讀全文

用樹狀結構顯示所有文章的外掛 – WP-DTree

用wp-dtree這個外掛程式,可以把wordpress部落格裡面的所有文章,依照分類目錄或是發表日期,以樹狀結構顯示出來。

外掛網址:http://wordpress.org/extend/plugins/wp-dtree-30/
效果展示:http://mynotes.org/daily/all/bycat

閱讀全文