<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post/1476/ <![CDATA[雲端使用 訃聞發表系統 製作紀錄]]> apao <apao@www.apao.idv.tw> Tue, 01 Jul 2025 04:48:27 +0000 https://blog.apao.idv.tw/post/1476/ 對於一般收到訃聞的人都會面臨，包白包要包多少？自己參加與否，以及有沒有對沖的問題。再發表家祭或是公祭的國曆與農曆的時候，農曆還會有個閏月。是要參加家祭、公祭，還是手拜拜或捻香就好？好不困惑。這一個系統，差不多都囊括了發表訃聞時，所有可能會發生的問題。
由於LINE與通訊軟體的普及，不再需要郵件寄送給逝者親戚朋友，而是改用通訊軟體通知，讓現代幾乎人手一機的世代，馬上可以看到訃聞的通知與詳盡內容，不僅僅環保還可以透過通訊軟體加強了親戚朋友之間的感情。

前台呈現
點擊在新視窗中瀏覽此圖片
首頁
└ 客戶端（雲端訃聞）連結
後台呈現
點擊在新視窗中瀏覽此圖片

▼後台首頁
登入頁
後台管理
├ 後台首頁
├ 公司資訊
帳號管理
├ 人員列表
訃聞管理
├ 訃聞管理
├ 禮籃資訊
└ 快速地址列表資訊
點擊在新視窗中瀏覽此圖片

能夠客製化的空間還有很多。

▼閏月的設定
點擊在新視窗中瀏覽此圖片

▼將預設的地址資料設定，使用選項就能讓相關資料帶入
點擊在新視窗中瀏覽此圖片

Tags - , , , ]]> https://blog.apao.idv.tw/post/1446/ <![CDATA[定揚國際法律事務所 對應電腦版與手機版網頁]]> apao <apao@www.apao.idv.tw> Mon, 02 Dec 2024 10:23:44 +0000 https://blog.apao.idv.tw/post/1446/ 這是一個緣分奇妙又蠻深遠的關係來的案件，來自同學 Victor Chen 介紹，仔細問了之後，才知道高中時常去一個畫室畫畫的老師的女兒，老師走了，過了許多年，透過同學介紹，我又與對方碰面，好巧的緣分。
網頁製作內容不多，但有後台，可以讓客戶很容易製作自己需要的內容。一個內容，可以輕易對應多種版本的設備畫面。客戶因為老人家比較多，手機版的字就制作大一點，以符合老人家的需求

我們的做的網頁在維護上也很簡單，只需要上一種文字與圖片，就可以自動對應到兩個版本（電腦與網頁）的網頁內容，讓更新內容的管理者，可以在短時間維護自家的網頁與網站。

▼電腦版網頁 + 手機版網頁 / 首頁（手機版的字就制作大一點，以符合老人家的需求）
點擊在新視窗中瀏覽此圖片

定揚國際法律事務所 DING-YANG INTERNATIONAL LAW FIRM
https://www.dingyanglawfirm.com/

▼後台登入畫面（只提供電腦版，以免弄錯）
點擊在新視窗中瀏覽此圖片

▼後台介面樣式
點擊在新視窗中瀏覽此圖片

▼電腦版網頁 + 手機版網頁 / 最新消息
點擊在新視窗中瀏覽此圖片

▼律師介紹
點擊在新視窗中瀏覽此圖片

▼線上諮詢
點擊在新視窗中瀏覽此圖片

▼聯絡我們
點擊在新視窗中瀏覽此圖片
Tags - , , , , , ]]> https://blog.apao.idv.tw/post/1280/ <![CDATA[伊比力斯 親善系統 技術架構]]> apao <apao@www.apao.idv.tw> Thu, 13 Dec 2018 03:14:32 +0000 https://blog.apao.idv.tw/post/1280/ 到現在為止大多以FLASH來製作這類的說明動畫，但是FLASH卻只能停在原有的技術，實在可惜。甚至在手機上無法直接執行，Android 需要另外下載.APK，Apple手機則是無法執行FLASH。始初想到如果能使用GIF的動畫的話，檔案又不要太大的話，就十分有可能可以克服這個門檻，在讀書會中工程師們不斷絞盡腦汁，利用可能的技術，來取代逐漸被新技術淡忘的FLASH，簡單的說就是結合以下技術：
HTML5：網頁架構
GIF：動畫
CSS3：動畫移動或切換
JavaScript：場面切換與選擇
Webstorage：記憶使用者故事路線
來試圖做出類似繪本的網頁，甚至能夠比FLASH還要更小的傳輸檔案量。

▼解說伊比力斯（癲癇）與進入親善系統
點擊在新視窗中瀏覽此圖片
▼可進入「巴士」「MRT」「學校」等三個背景環境
點擊在新視窗中瀏覽此圖片

▼巴士情境（1/3）
點擊在新視窗中瀏覽此圖片
▼學校情境（2/3）
點擊在新視窗中瀏覽此圖片
▼MRT情境（3/3）
點擊在新視窗中瀏覽此圖片
▼出現各種癲癇狀況（全身與局部）
點擊在新視窗中瀏覽此圖片
▼下一步選擇1（局部）
點擊在新視窗中瀏覽此圖片
▼下一步選擇2（局部）
點擊在新視窗中瀏覽此圖片
▼下一步選擇3
點擊在新視窗中瀏覽此圖片
▼結語
點擊在新視窗中瀏覽此圖片

▼記憶使用者選擇背景與故事路線（Webstorage）
點擊在新視窗中瀏覽此圖片

相關連結：
http://story.childepi.org.tw/
Tags - , , , , , ]]> https://blog.apao.idv.tw/post/1276/ <![CDATA[簡易網頁模組 RWD 多對應版本]]> apao <apao@www.apao.idv.tw> Mon, 05 Nov 2018 01:00:00 +0000 https://blog.apao.idv.tw/post/1276/ 點擊在新視窗中瀏覽此圖片（20181108 紀錄）。值得信賴的模組，使用同時測試了將近一年，不斷與工程師溝通之下，最近終於完工，且對應最新的HTTPS規格將是業界最低價格。
前台：
1.一次上架，相同 RWD 版面內容
2.簡潔方便，前台省去複雜的畫面
3.對應多版本 RWD 畫面
4.程式簡單化，整體反應迅速
5.一般訪客只需要看圖與文字，不需要過多資訊或是欄位干擾視覺
6.追加自訂搜尋引擎欄位
點擊在新視窗中瀏覽此圖片
後台：
1.一次上架，前台對應 RWD，後台也對應手機管理
2.後台欄位簡單，不熟悉程式碼的管理者也可操控
3.前台單層分類，可善加多元應用
4.上圖上文操作簡單易懂，不需過多程式基礎與訓練
5.多元控制資訊，讓網站內容更清楚
6.可另外追加網站資訊以及對應 SEO 尋引擎最佳化、Search Console (Webmaster)、Google Analytics 站內狀況
點擊在新視窗中瀏覽此圖片

版本修改部分：
1.版面最大寬度
2.PC版畫面寬度與圖片版面尺寸最佳化
3.RWD版畫面寬度與圖片版面尺寸最佳化
4.將關鍵字欄位改成類似二層分類位置
5.隱藏對岸社群網站連結
6.隱藏模組搜尋欄，改用GOOGLE自訂搜尋，增加網站尋能見度。

參考網站：
https://plant.apaostudio.com/


Tags - , , , ]]> https://blog.apao.idv.tw/post/1273/ <![CDATA[網頁客製化某部分手機版與新增後台]]> apao <apao@www.apao.idv.tw> Tue, 30 Oct 2018 09:41:16 +0000 https://blog.apao.idv.tw/post/1273/ 這個客製化網頁，來自客戶的特殊需求，要求只需要針對某些頁面在手機版內能夠快速瀏覽（特定會員）

1. 保留原來針對客戶Banner的廣告。
2. 除了專屬頁面，其他頁面不要顯示在手機內。
3. 對應雙版本的RWD
4. 頁面內有特殊複雜Table與其他標題的會議議程與會議記錄，仍能對應PC與mobile版本
5. 增加上架功能與內容置頂功能

點擊在新視窗中瀏覽此圖片

▼原有網頁
點擊在新視窗中瀏覽此圖片

▼新增對應RWD手機網頁 (PC/mobile)
點擊在新視窗中瀏覽此圖片

▼新增對應RWD手機網頁 (PC/mobile)
點擊在新視窗中瀏覽此圖片

▼新增後台上架功能（PC only）
點擊在新視窗中瀏覽此圖片
Tags - , , , , , ]]> https://blog.apao.idv.tw/post/1248/ <![CDATA[A.PAO garden 改造為例 網站模組 成果分析]]> apao <apao@www.apao.idv.tw> Tue, 14 Nov 2017 02:39:04 +0000 https://blog.apao.idv.tw/post/1248/ A.PAO gardenSTUDIO 上線後，
從零到有，約一個月左右達成一萬人次的點閱數，後面有十分多不為人知的前置與後製作業，與大家分享成果：

點擊在新視窗中瀏覽此圖片A.PAO garden：http://plant.apaostudio.com

追求提高攝影品質與加強植物正確名稱的準確性：
以數位相機畫質取勝，改善膠片相機與植物官方網站的不便

1. 耗時一年以上走植物協會的步道，並拿著攝影的重裝備走完全程，有半天，一天，三天不等的行程，原來台灣景色這麼美。
2. 攝影檢討。拍完之後。檢討拍攝設備的增設與打光方式是否適宜，與進入LR（Adobe Light Room） 調整照片，作為下一次拍照的參考。
3. 植物名稱對照。（植物協會社團，問花社團，問蕨類社團，網上資料等等... 簡誌，台灣官方網站讓初學者挫折感很重）
4. 當達到一定數量時，將照片以width:1000px 輸出，將照片上傳網站並對照官方資料是否正確，許多漂亮的園藝種植物或是異名或別名植物往往大多沒有正確與可靠的資料，需要進一步的詳細比對。

改善網站模組結構方面，讓使用者更親善，讓搜尋引擎更精準搜尋：
希望尊重bo-blog 團隊之原作者，僅修改Temple結構為基礎

1. 網站內google自訂搜尋（放置於自訂HTML）大小等調整。搜尋結果調整與隱藏錯誤連結（類似302）。
2. meta, viewport ...調整。以不塞垃圾資料的方式（搜尋引擎會偵測真偽），適度增加搜尋引擎的搜尋結果的寬度與深度的方式，加上手機版的更多需求與對應。
3. FB OG TAG對應。分享到社團網站時，顯示文字與圖片等等也是修改的重點。
3. CSS結構調整。將header, menu, nav, footer... 各部位簡潔化與符合台灣環境做隱藏與畫面適度調整。
4. PHP 輸出位置調整。主要針對搜尋引擎做全文搜尋時從上至下的習慣。調整輸出位置，並增添class位置，以方便CSS控制網站版面。除了title內容調整，關係到網站搜尋結果的標題, nav對於分類與標籤分類也十分重要

特別感謝：
植物協會：台灣原生植物保育協會
FB社團：#這是什麼花
FB社團：#蕨類生態誌
特生中心 台灣野生植物資料庫：http://plant.tesri.gov.tw/plant100/index.aspx
臺灣維管束植物（簡誌）：http://subject.forest.gov.tw/species/vascular/index.htm
認識植物：http://kplant.biodiv.tw/index.htm
福星花園：http://bruce0342.blogspot.tw/
bo-blog bw 開發團隊
帶我走陽明山的 Huiping Liao 以及我的工程師 Lee 給我不少參考建議，認識植物的朋友ECHO, 唐爺，勝彥老師們，其他幫助過我拍攝的好朋友們。
Tags - , , , , , , ]]> https://blog.apao.idv.tw/post/1195/ <![CDATA[電商網站 購物車 客製化購物車流程設計規劃製作]]> apao <apao@www.apao.idv.tw> Sat, 20 Aug 2016 05:10:42 +0000 https://blog.apao.idv.tw/post/1195/ 客製化購物車網站設計製作

功能概說（功能很多，說明不足請見諒）
前台：
註：A.PAO designSTUDIO 獨立開發製作，不會有售後無保固或無詢問服務的問題。

A.前台（對應手機版與電腦版 RWD）
   1.首頁輪撥圖片。活動圖片自動上架。一級分類商品列表。
   2.商品列表畫面。
   3.商品說明畫面。

▼會員登入。MENU。輪撥Banner。活動訊息。
點擊在新視窗中瀏覽此圖片

▼一級分類列表
點擊在新視窗中瀏覽此圖片

▼Footer 會員身分標記。客戶相關資料。不同身分登入模式。
點擊在新視窗中瀏覽此圖片

B.購物車功能
   1.商品列表（商品名稱/活動區分/活動計算）
   2.商品確認（商品列表/寄送地址）
   3.商品與地址確認
   4.串接金流與付款
   5.付款完成畫面


C.會員
註冊/登入/忘記密碼

點擊在新視窗中瀏覽此圖片

D.對應繁簡字體瀏覽功能


客製化電商購物後台：

點擊在新視窗中瀏覽此圖片


A.後台重要資訊彙整（行銷活動數目/庫存為0之商品數量/新進訂單數量/未入帳訂單數量/聯絡我們數量等其他）
B.管理者權限管理
C.行銷活動管理
   行銷活動
   特價活動
   eDM表單製作
   輪撥 banner
   橫幅banner
D.商品管理
   數量規則
   運送規則
   商品列表
   運費計算規則
E.會員訂單管理
   會員資料列表
   訂單列表
   出貨列表
   入帳作業
   銷售記錄
   付款方式
F.網站相關管理
   聯絡我們
   FAQ
   金流設定
   熱門關鍵字
   最新消息
   網站相關設定
   購物說明


尚有不明地方，請電 0920.039.965 阿寶。
Tags - , , , , , , , , ]]> https://blog.apao.idv.tw/post/1194/ <![CDATA[協會相關網站製作 Bo-blog 應用範例]]> apao <apao@www.apao.idv.tw> Mon, 15 Aug 2016 04:11:09 +0000 https://blog.apao.idv.tw/post/1194/ 這個網站功能如下：
1.採用Bo-Blog 客製化模版
2.除了一般上文機制與畫面切換之外，增加線上捐款機制。
3.對應手機版與電腦版版面大小（RWD）
4.後台除了一般設定功能外，追加金流對應插件，輪撥圖片插件等等。
5.後台金流插件中，有信用卡自動對應金流ˊ對帳功能，超商付款與WebATM於後台有比對按鈕，節省在金流後台查帳的登入手續與時間。以及列印捐款收據等功能。

以下介紹客製化的畫面：

▼網頁 電腦版畫面
點擊在新視窗中瀏覽此圖片

▼網頁 手機版（對應iPhone 4 - iPhone 6 Plus 以內尺寸）
點擊在新視窗中瀏覽此圖片

▼捐款 電腦版畫面
點擊在新視窗中瀏覽此圖片

▼捐款 手機版畫面
點擊在新視窗中瀏覽此圖片

後台功能
1. 單頁顯示數量
2. 分類設定
3. 留言與討論區管理設定
4. 插件功能（提供客製化）
5. 阻止廣告留言功能

▼金流確認畫面 後台 電腦版畫面only
點擊在新視窗中瀏覽此圖片
Tags - , , , , , , , , , , ]]> https://blog.apao.idv.tw/post/1117/ <![CDATA[仕丞精密工業 多語言網站 MCV架構 php]]> apao <apao@www.apao.idv.tw> Thu, 23 Jul 2015 16:10:57 +0000 https://blog.apao.idv.tw/post/1117/ http://www.sclaser.com.tw/

主要功能說明：
1. 前台功能
三個語言對照。
第一層內容為摘要（圖與摘要內容）。第二層內容為詳細內容（圖文）。
預設內容之聯絡我們。可方便詢問者之詢問內容。

2.後台功能：
分三個語言的後台。
可分別上傳不同語言後台之圖文。
有密碼限制的網頁連結。
整合型的聯絡我們後台機制（與現有mail 信箱結合）

點擊在新視窗中瀏覽此圖片
繁體中文版畫面

點擊在新視窗中瀏覽此圖片
簡體中文版畫面
點擊在新視窗中瀏覽此圖片
英文版畫面

點擊在新視窗中瀏覽此圖片
Dreamwaver畫面

點擊在新視窗中瀏覽此圖片
備註：MVC架構
Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫

Tags - , , , , , , , ]]> https://blog.apao.idv.tw/post/1076/ <![CDATA[樂天購物網站 設計改版工程]]> apao <apao@www.apao.idv.tw> Mon, 02 Feb 2015 01:34:50 +0000 https://blog.apao.idv.tw/post/1076/ 利用CSS3功能，讓畫面(UI介面)目標更清楚。
在左邊的MENU條上增添了以下CSS2 與CSS3 的程式碼
由於樂天不能採取外部連結的方式，
ALL程式碼都必須貼在後台內使用。
以下為結合樂天邊攔的CSS的寫法...

點擊在新視窗中瀏覽此圖片

<style type="text/css">
/*--看看新東西 Banner 與上端Welcome 動畫隔開--*/
.bColumn{margin:0 0 10px 0;}

/*--包包新鮮貨 小物新鮮貨 banner--*/
h2.bNews{position:absolute; margin:50px 0 0 10px; font-size:13px; }
h2.bNews a{padding:5px 6px 3px 6px; background:#d4d4ff; color:#6c6cc7; text-decoration:none; font-weight:normal; border-radius:9x; -moz-border-radius:9px; -webkit-border-radius:9px;}
h2.bNews a:hover{padding:5px 6px 3px 6px; background:#b06038; color:#ffffff;}

/*--地圖美包館79折 banner--*/
h2.bSale{position:absolute; margin:47px 0 0 10px; font-size:13px; }
h2.bSale a{padding:5px 6px 1px 6px; background:#ffd3bd; color:#c06a3f; text-decoration:none; font-weight:normal; border-radius:9x; -moz-border-radius:9px; -webkit-border-radius:9px;}
h2.bSale a:hover{padding:5px 6px 1px 6px; background:#6c6cc7; color:#ffffff;}

/*--地圖包Banner--*/
h2.bBag{position:absolute; margin:38px 0 0 10px; font-size:14px; line-height:26px;}
h2.bBag a{padding:1px 6px 1px 6px; background:#8d3d3d; color:#ffffff; text-decoration:none; font-weight:normal; border-radius:9x; -moz-border-radius:9px; -webkit-border-radius:9px;}
h2.bBag a:hover{padding:1px 6px 1px 6px; background:#ffd3bd; color:#8d3d3d;}

/*--不二家~Little Twin Satrs Banner 間隔以及外框線變化與圓邊--*/
.bBanner img{border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;}
.bBanner{float:left; margin:0;}
.bBanner a{background:#FFF; margin:0 0 10px 0; padding:1px; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px;}
.bBanner a:hover{background:#000000; padding:1px; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px;}
</style>


點擊在新視窗中瀏覽此圖片

點擊在新視窗中瀏覽此圖片
相關畫面擷取

展示畫面
http://bigeasy.shop.rakuten.tw/
Tags - , , , , ]]>