網頁

顯示具有 web app 標籤的文章。 顯示所有文章
顯示具有 web app 標籤的文章。 顯示所有文章

2019年6月6日 星期四

Google analytics 使用gtag 加入 event 事件

新版本的 google analytics 追蹤碼不能使用 ga 的機制
e.g. ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

改寫網頁後，觀察了很久，一直很納悶為什麼在 google analytics 平台內沒有看到資料。後來才發現到這件事。基本上網路上所找到的範例基本上還是以 ga 的方法為主。

目前新版本的 google analytics 追蹤碼要導入事件，要採用的方法是要改用 gtag 的方法。撰寫方式參考相關資料內的連結。

為了方便使用，參考 google 的範例，稍微調整成下面的方式：

function trackEvent(eventCatalog,eventAction,eventValue) {
    gtag('event', 'click', {
        'event_category' : eventCatalog,
        'event_action' : eventAction,
        'event_label' : eventValue,
        'value' : 1
    });
}

這樣的方式前端頁面要使用時，只要在需要加入監控的連結內加入此 function 即可，範例如右 <a href = 'https://www.google.com' onclick="trackEvent(TEST, click,Google)">Google</a>

google analytics 內的「報表 =>行為 =>事件」內的資料需要等待一段時間才能看到數據。想要即時知道到底改寫正不正確，可以利用「報表 =>即時 =>事件」功能頁面，再同時打開測試頁面點選測試 URL。這個時候若有在該功能頁面看到數據就表示新加入的 google event tracking 的功能是沒有問題的。


相關資料：
張貼者： MING 於 沒有留言:
標籤： , , ,

2018年11月20日 星期二

線上服務整理

收集有趣也可能用的到的線上服務。
張貼者： MING 於 沒有留言:
標籤： ,

2018年10月2日 星期二

pdf.js 最簡易的應用方式

使用方式：
下載 pre-built 版本，將下載的 zip 檔解壓縮放到特定目錄，例如放到 Scripts/pdj.js/* 的位址。
應用方式 ：
HTML頁面加入以下腳本即可

<a href="Scripts/pdf.js/web/viewer.html?file=1.pdf">Open yourpdf.pdf with PDF.js</a>
這樣的寫法，pdf 的檔案，要放到 Scripts/pdf.js/web/ 目錄內
<a href="Scripts/pdf.js/web/viewer.html?file=/pdf/1.pdf">Open yourpdf.pdf with PDF.js</a>
這樣的寫法，表示 pdf 檔案放在網站根目錄下的 pdf 資料夾，這樣子就可以將 pdf集中到指定的目錄內
相關資料：
張貼者： MING 於 沒有留言:
標籤： ,

2017年1月20日 星期五

Content Security Policy 資料整理


  • Apache 設定參考 
    • 調整 httpd.conf 將 LoadModule headers_module modules/mod_headers.so 啟用
    • 加入以下腳本 example
 <IfModule mod_headers.c>
    Header set X-Frame-Options "SAMEORIGIN"
    Header set Frame-Options "SAMEORIGIN"
    #Header set Content-Security-Policy "default-src 'self'"
    ##Allow Google Analytics, Google AJAX CDN and Same Origin ......
    Header set Content-Security-Policy "default-src 'self' 'unsafe-eval' 'unsafe-inline' www.google-analytics.com www.google.com www.gstatic.com *.lib.nthu.edu.tw;"
</IfModule>
P.S. Header set X-Frame-Options "ALLOW-FROM http://host1 ,http://host2"
張貼者： MING 於 沒有留言:
標籤： ,

2016年7月7日 星期四

相簿程式 Single File PHP Gallery

Single File PHP Gallery 的特色。沒有用到資料庫，也只要一支 PHP 檔案上傳到主機後，就可以馬上擁有一個簡易版本的相簿了。很酷的說。

我的主機相關環境 :
  • OS : Windows Server 2008
  • PHP : 5.6.23
  • Single File PHP Gallery : 4.6.1
    • 需要的環境 ：PHP (GD module enabled)、目錄有寫入的權限、記憶體夠大(參考文件)
    • 也可以透過它所提供的 SFPG TEST script  來測試主機的環境合不合需求
實際測試後，發現傳上去後若目錄的名稱有中文字出現時，則前端的介面在這個有中文字的相簿會是亂碼的狀況。解決方式如下：
  1. 不想要修改程式的原始碼的方式：可以在每個相簿的目錄內放入 _name.txt 文字檔(utf-8編碼)，將含有中文字的相簿名稱寫入。這樣在前端介面就不會有亂碼狀況出現 
  2. 修改程式原始碼的方式 ： 打開 index.php 直接修改 function sfpg_display_name ，在行 396~397 的中間 （ return $display_name; 字串的前面） ，加入 $display_name = iconv("BIG5", "UTF-8", $display_name);。
補充 :
  • 若要針對不同的相簿而有更多的敘述時，也可以放入 _desc.txt 文字檔在目錄內。
  • 程式內的一些可能較常用到的常量的設定
    • define('PASSWORD', ''); ==>指定密碼後，要觀看相簿時需輸入指定的密碼
    • define('ADMIN', FALSE); ==>改成 TRUE後，可直接透過瀏覽器的介面直接管理相簿資料
    • define('DIR_NAME_FILE', '_name.txt'); ==>可自行定義相簿名稱的文字檔名稱，標題文字寫在所定義的檔案內
    • define('DIR_DESC_FILE', '_desc.txt');==>可自行定義相簿的描述的文字檔名稱，描述文字寫在所定義的檔案內
    • define('TEXT_GALLERY_NAME', 'Single File PHP Gallery'); ==> 介面的標題
    • define('SHOW_FILES', TRUE); ==>因為程式會自動的將目錄內所有的檔案做呈現的動作，但若有一些非影像的檔案不想呈現時(例如Thumbs.db) ，將 TRUE 改成 FALSE 即可
    • 介面若想要中文化時，將這些與前端頁面相關的文字改成中文就可以了。例如define('TEXT_PREVIOUS', '<< Previous');　改成 define('TEXT_PREVIOUS', '<< 上一頁');

 
相關資料：

張貼者： MING 於 沒有留言:
標籤： , , ,

2016年6月21日 星期二

XOOPS 2.5.7.2 to 2.5.9 更新處理


XOOPS 2.5.7.2 to 2.5.9  Upgrade.

簡單記錄相關處理
  • 從官方網站下載更新的原始檔 (http://www.xoops.org/ )。下載後解壓縮。
  • 將解壓縮後的 htdocs 目錄內的檔案全部更新並覆蓋到 xoops　執行目錄內，刪除目錄內已複製的 xoops_data 與  xoops_lib目錄
  • 將解壓縮後的 htdocs/xoops_data 與  htdocs/xoops_lib 移轉到原系統所指定位址
  • 將解壓縮後的 upgrade 目錄內全部複製到 xoops執行目錄內
  • 使用瀏覽器，執行  http://HOSTIP/xoops/upgrade/
  • 按網頁上所呈現的內容指示說明，直接進行更新動作
  • 更新完成後，按建議內容升級所使用模組(/xoops/modules/system/admin.php?fct=modulesadmin&op=update&module=system)。
  • 刪除 install and upgrade 目錄
  • 升級後異狀處理：
    •  在升級各模組時，除 CBB論壇外。其它均正常的完成升級的動作。
    • CBB論壇處理方式（升級的方式）： 
      • 下載新版本 newbb-4.33-RC-12 , Github download
      • 將舊版本另外複製備份後，再將所下載的新版本的相關檔案複製到  /module/newbb/*
      • 使用 XOOPS 管理介面，透過介面直接升級 newbb 版本。
      • 升級後，即可正常使用。
      • 目前 newbb4.33 僅提供英文版本。若需要中文版，也可直接修改 /newbb/language/English/main.php 內的相關文字

相關資料


張貼者： MING 於 沒有留言:
標籤： , ,

2014年8月29日 星期五

Portal Type 建立協作工具

  • Moqups
    • 介紹:這個主要可以給撰寫 HTML與後端的程式人員溝通的一個介面工具。也可以描繪出一個網站的基本雛形。

  • JETSTRAP
    • 影片介紹
    • 介紹:這個可以透過web介面拖拖拉拉就能簡易的完成一個簡單的網站雛形。
張貼者： MING 於 沒有留言:
標籤： , ,

2014年5月21日 星期三

XOOPS SPAM


服務 XOOPS 的主機 CPU莫名的持續飆高。經檢查後原來是有大量的存取連線一直針對 XOOPS 的 register.php 這支程式在做連線的動作。而這支連線因為要產生亂碼的驗證碼所以才造成此困擾。因應此問題，順便對主機做了些調整。
  1. Apache新增了 mod_evasive 模組，此模組可預防大量的 DDOS 連線攻擊。相關的參考資料可參考下方的相關連結。
  2. 註冊的程序僅允許校園內的 IP才能做註冊的動作，非校內使用者則經另一管道註冊。
經此調整後，有明顯改善大量連線與 CPU 飆高的問題。



相關資料：

張貼者： MING 於 沒有留言:
標籤： , ,

2014年5月1日 星期四

XOOPS頁面空白問題

這是一件很神奇的事，因為同仁反應在 news 模組內無法發表評論。這個現象後來查出來是因為在升級 2.6版本時，在 xoops.xoops_xoopscoomments 資料表沒有正確的被 update所造成，但在升級的時候應該是有按手冊的升級方式確實完成升級。解決的方式，按此篇文章第9樓所提及的，將缺少的項目新增到資料表就可以了。

上面出現的問題修正後過了幾天後。又突然發現管理者的帳號在使用閱讀全文功能時會出現空白頁面的狀況，而前一天還可以正常的使用。這現象推測有可能是同仁在調整其它使用者帳號後所發生的。也因為沒有錯誤記錄可供參考，我這就直接比對先前可以使用時的 SQL檔案。發現只要將 xoops_users{umode} 內的 nest 改成 thread 就可以正常的呈現資料了。

相關資料：


張貼者： MING 於 沒有留言:
標籤： , ,

2014年2月17日 星期一

Google Analytics Upgrade (Universal Analytics)

登入 Google analytics 後，才發現 Google 在前陣子有發佈 Google analytics 的升級計劃，找了些相關資料來參考。過陣子再來考慮做升級的動作。

參考資料：

張貼者： MING 於 沒有留言:
標籤： , , ,

2013年12月20日 星期五

Panoramic Photo @ NTHU Library

館內最近談起 Google Map，興起了想要建立館內實景的想法。

找了一下相關的資料，可以在這向 Google 直接申請（Link1 or  Link2 ）。Google 收到申請後會評估，我們這就靜待通知了。

因為對這個議題有些好奇，找找相關的其它資料。其實假使 google 到時沒有接受我們館的申請。也可以照著 Google所提供的方式來實作。Google提供自行製作全景拍攝相片的作法，可以參考這個連結內的資料 Link 3；

文中提及兩種作法，以第一種持 Google Android Nexus 裝置的作法是最為簡單，這台裝置一台約 NT$15000左右，也許可以考慮編入明年度預算內當作備案 (此台裝置也支援NFC功能)。

實作方式就如同這段 youtube 影片。透過此裝置看來是會自動將一些需要手動編寫 Google  XML中繼資料自行透過自己的 APP處理完成。透過此裝置所要作的部份，就是按 youtube 上的操作，將取景的地方拍攝起來後再直接上傳即可。

而文中提及的第二種作法，就是透過數位相機的拍攝，這種作法有它的好處，好處在於能提供更高解析度的相片。不過此作法，看起來實作很麻煩，需要一張張的自行定義Google 所需要的 XML中繼資料，建立好每張要處理相片的xml後再上傳至 Google ，再透過 Google 提供的軟體介面一步步的操作即可。

Microsoft 也有提供對於全景地圖的方案，就是 Photosynth Website 服務。我試用過，覺得它也是很有趣。這個網站的服務，只要將要拍攝地點拿起手機或相機四處的取景，再將取景後的資料交給 Synth，這樣就完成所有的程序，後續 Photosynth 會自動幫忙處理。透過 Photosynth 可以很快的建置起一個簡易可提供導覽實景的介面供使用者觀看。



張貼者： MING 於 沒有留言:
標籤： , , ,

2012年10月24日 星期三

PHP與MySQL環境的雲端主機

懶的自行架設PHP 與 MySQL相關環境的話，可以利用雲端主機服務。透過簡單的申請後，就可以立即使用開發環境，這樣子就可以專注於程式的開發了。

相關資料：
張貼者： MING 於 沒有留言:
標籤： ,

2012年6月4日 星期一

Web APP

張貼者： MING 於 沒有留言:
標籤：
訂閱： 文章 (Atom)