雜談 - 關於最近網頁Coding的一點感想

Posted by Unknown,
(圖片來源:immi.tw)

  從開始學習網頁程式語言已經過了半年，從一開始只有基本的html語法基礎，到現在已經摸過幾個核心的前端語言與函式庫，深深覺得網頁前端的學習真的是無止盡，從一開始簡單的加入html標籤讓物件在瀏覽器上顯示，之後使用css開始讓物件有不同的樣式，加入javascript和css動畫來讓網頁不在只是靜態顯示資料，又為了加入某些特定功能，使用了php語法來補足網頁先天的限制與不足，總之零零總總也學到了不少。

  但深入研究後會發現，跟很學習多東西一樣，一開始都是"廣泛涉略，不求甚解"，也就是每樣都學，但都學的不精，這階段最主要是讓人知道如果學習過程中，有了某些需要或發現什麼問題，可以使用什麼方法來處理。在看了許多論壇與高手的建議後，我覺得我應該要進入下一個階段，也就是專精特定幾項語言，讓自己不再只是半瓶水，這樣未來才能寫出純熟，美觀又實用的網頁出來。

  目前目標就先設定為:css/javascript先練習到純熟，然後寫個動態炫麗的技術展示網頁出來!


WEB - PM2S:空氣品質展示網頁 Part 3

Posted by Unknown,

alpha版本修改了2個晚上完成的完成版網頁，使用說明請參閱網頁的說明(第一次登入強制看說明:D)，之後有時間再完善它。寫過幾個網站後，發現對於coding部分越來越熟，越寫越快，...但網站美術部分還是一樣鳥...

簡單說明:網站可顯示你的所在地(或其他你感興趣的區域)的懸浮微粒觀測數值(PM2.5)，方便你判斷所在地區的空氣品質。(僅限台灣使用，我懶得抓其他國家的空氣監測數據xD)


WEB - PM2S:空氣品質展示網頁 Part 2

Posted by Unknown,
延續上一篇WEB - PM2S:空氣品質展示網頁 Part 1，又花了兩個晚上寫了個大概的雛形出來，
測試網頁與示意圖如下：


目前大概只完成到10%的部分，也就是取得使用者坐標，並讀取中央氣象局pm2.5的資料，綜合兩者資訊並展示在網頁上。

登入網頁後需要取得使用者的位置資訊分享許可，之後會加入點位搜尋功能，以方便大家搜尋特定區域。


WEB - PM2S:空氣品質展示網頁 Part 1

Posted by Unknown,
2014年底到2015年初的天空與往年不太一樣，有這種感覺不是因為體內的文青基因發作，而是大陸的懸浮微粒藉由東北季風入侵台灣的天空，有好幾次在開車時都以為車子的擋風玻璃太髒而猛洗擋風玻璃，回過神來才發現是天空太髒。也因為這個因素才開始注意PM2.5這個環境議題。Particulate Matter (PM)中文翻譯為懸浮粒子，而直徑小於或等於2.5微米的懸浮粒子稱為細懸浮粒子（PM2.5），詳細說明請上wikipedia觀看，簡而言之就是PM2.5高於某個值，不僅會造成空氣混濁，也會進一步影響人體健康。

也因為上述因素所以之前找了一下台灣的有提供PM2.5相關數據的網站，因為我比較懶，所以僅用google搜尋頁面的第一、二頁的結果，找了兩個看起來比較好的網站。

第一個，也是最主要的就是氣象局的懸浮微粒監測網站http://taqm.epa.gov.tw/taqm/en/，裡面提供了最準確的官方數據，fig.1為網站示意圖。


fig. 1 中央氣象局懸浮微粒監測網


另外一個網站是零時政府的環境資料展示網站http://env.g0v.tw/air/，(網站如fig.2所示)，主要也是展示空氣品質相關數據，但比氣象局的網站好看一點，展示介面也比較順眼。


我個人覺得上面兩個網站真的確實的做到了資料展示的功能，但問題是一般使用者(至少我有這種感覺)應該會覺得，你的資料再怎麼豐富，介面再怎麼炫麗，但我根本用不到，拿http://env.g0v.tw/air/網站來說，展示頁面把整個台灣各地區的主題圖都給你了，這樣應該夠所有人參考了吧?但重點是一般人根本不care其他地區的數據，我只想知道我目前所在地區的資訊，或我想知道地區的資料而已，你給我那麼多我連看都不想看的資料幹嘛?

再者，雖然網站提供了各個觀測站的資料，但使用者所在地區不一定就在觀測站旁邊，或就算在使用者所在地附近，使用者也不一定知道他附近有個測站。所以就算使用者想知道某個地區的資料，也不知道要找哪個測站的數據才正確。這是我在瀏覽了兩個網站後發現的問題。

所以之後我應該會寫個pm2s的網站來做同樣的資料展示，但加上html5的地理定位功能，取得使用者位置後，在利用位置資訊找尋最近的測站(或測站們)，再告訴使用者處理後的數據資料。

目前進度是...已可自動化取得中央氣象局所提供的最新資料，接下來就利用google map api寫個alpha版來看看。

WEB - 台灣TWD97坐標量測網

Posted by Unknown,
fig.1 TWDSW - TWD97坐標量測網(點取前往該網頁)

這個網站主要是去年年底在學習寫網頁時的一個測試作品的延伸，當初可能是突然被雷打到，腦中突然就迸出了"要怎麼把我之前所學知識的應用在目前所學的網頁撰寫上？"的idea，剛好又想到之前寫論文時，老闆就常問我要怎麼展示你算出來的數據？當初限於coding能力不足，所以是用最現成的"學院派"的作法，利用地理學常用的學術軟體GMT(generic mapping tool)來繪製成果，雖然專業但使用時需要被一堆指令，加上沒gui只有指令介面，總而言之就是不好用。所以去年就初步利用google map api寫了一個大概的網頁，來顯示我之前的碩論成果。

最終版本的網站請點取fig. 1內的連結前往，下面內容為網站開發過程，



 網站撰寫過程：


fig. 2 TWDSW最初版網頁示意圖

fig. 2 是我當初一開始寫出來的網頁雛形，設計的原理很簡單，只要輸入特定的經緯度坐標即可顯示該點點位加上該點的坐標資訊(包含原始的97坐標與利用我碩論所計算出來的最佳化坐標)，可以看到再沒有任何框架與進一步的修改google map 參數下，網頁看起來非常陽春且簡陋。


fig 3.的alpha版是根據最初版本為基礎，除了一開始的輸入座標找點位的功能外，還加入了以下功能！
  1. 加入了輸入地址進行搜尋點位的功能!
  2. 加入了可以讓使用者直接在地圖上繪製點線面的功能，並且能即時顯示繪製物件的坐標等幾何屬性，比方說你繪製點物件就現顯示該點坐標，繪製現物件就會顯示該線段的長度，所有數據都是以twd97坐標系統來作計算。
  3. 最重要的，加入了將繪製在地圖上的幾何物件，輸出成含twd97坐標系統的autocad的.dxf檔案，此功能是根據前同事的建議加入的，主要能幫助他們在撰寫報告或執行專案時，能夠利用更簡單的方式來取得測區的資料。





fig 4.1與fig. 4.2分別是將alpha版本的網頁重新套上兩種不同框架(fig. 4.1 beta-1為kickstart ，fig. 4.2 beta-2為materalize)後撰寫的網頁，並加入了以下功能：
  1. 新增twd97坐標搜尋功能。
  2. 可以選取繪製物件上的顯示的資訊。
  3. 新增google map截圖功能！一般人在使用google map時都會有無法直接擷取該區影像的困擾，所以新增此功能來解決大家的麻煩。
  4. 新增說明文件。
其中beta-2版本使用的框架即是最終版本使用的網頁框架。

結合上述的成果，最終成果就是fig.1 的TWDSW網頁，功能結合上述版本所有功能，並且將google map上的icon客製化，讓網頁各個元件外觀更一致！

同樣的，如果有任何建議或發現任何bug，歡迎email給我～ 謝謝

WEB - PeTT 免登入批踢踢文章閱讀網站

Posted by Unknown,
fig. 1 PeTT.cc，批踢踢網頁版閱讀站


fig. 2 PeTT mobile 手機網頁版

柯p的素人參政讓大家見識到網路鄉民世代的崛起，這議題讓家中老媽對"婉君"的很有興趣，想說建議老媽上ptt瀏覽文章認識一下現在年輕人都在討論什麼議題，但利用telnet連上ptt需要帳密且鍵盤操作對老男人來說很不方便，原本想說讓他上ptt最新的網頁版就好，但又覺得ptt目前的網頁版使用起來很彆扭，所以想說自己寫一個"修改版"的網頁版ptt讓老媽用用，pett.cc就是從上述的idea上發想。

網頁的撰寫邏輯其實很簡單也很粗暴，那就是直接將pett網頁版的內容擷取下來作修改！當初為了能夠做到不登入也能瀏覽ptt文章的目的，所以我放棄了用傳統的socket連線模式，將目光轉移到了可在網頁上免登入直接瀏覽文章的ptt網頁版，我想了兩個方法，第一個就是建立資料庫，定期備份ptt文章到資料庫中。第二個方法就是直接抓取網頁內容，修改後直接在網頁上顯示。

兩種方法個有利弊，當然如果要體驗完整的ptt，使用第一種方法是最好的，但缺點就是網路主機硬體要求比較高，需要另行建製資料庫，且最麻煩的就是這種方法會在網路上留底，如果ptt原po文者要求刪除文章，還要另外花心力去處理！所以到最後選擇了第二個方法，直接抓取網頁，並展示修改後的內容！這樣就可以同步ptt的任何文章操作，不會有上述的問題產生。

抓取網頁文章的部分是利用php+curl來執行網頁抓取網頁html程式碼的動作，然後在將html換為json格式來將內容格式化取出，最後在修改預設的css格式和增加額外的圖示就完成網站的基本架構。網頁是使用bootstrap框架來製作，而手機版的網頁是使用較適合手機螢幕的jquery mobile框架來撰寫。

再來就是最麻煩的搜尋部分，因為原本的ptt網頁版並不提供內建搜尋功能，還好網頁終究還是網頁，只要公開放上網路的東西幾乎逃不過google的快取備份，也因此ptt網頁版的文章在google都可以搜尋的到，缺點是google處理會慢個幾個小時，所以進2~3個小時的文章會搜尋不到，這是一個缺點。

之前在測試版的網頁有加入同主題文章串連，是利用暴力法，將文章網前後100頁一頁一頁找（當然找到特定目標會停止），但效率很差，所以放棄同主題文章搜尋，完全改用google搜尋取代。

當然網站(含手機版)部分還在測試階段，如果有任何bug或建議歡迎email給我，我會儘快修繕改進。




WEB - SSH-KEY創建教學 for Win & OSX

Posted by Unknown,
在網頁伺服器登入或使用其他需要加密連線的服務時常常需要用到ssh-key，到底啥是ssh-key呢？以下是從wikipedia參考的說明：

Secure Shell（縮寫為SSH），由IETF的網路工作小組（Network Working Group）所制定；SSH為一項建立在應用層和傳輸層基礎上的安全協定，為電腦上的Shell（殼層）提供安全的傳輸和使用環境。
傳統的網路服務程式，如rsh、FTP、POP和Telnet其本質上都是不安全的；因為它們在網路上用明文傳送資料、用戶帳號和用戶口令，很容易受到中間人（man-in-the-middle）攻擊方式的攻擊。就是存在另一個人或者一台機器冒充真正的伺服器接收用戶傳給伺服器的資料，然後再冒充用戶把資料傳給真正的伺服器。
而SSH是目前較可靠，專為遠端登入會話和其他網路服務提供安全性的協定。利用SSH協定可以有效防止遠端管理過程中的資訊洩露問題。透過SSH可以對所有傳輸的資料進行加密，也能夠防止DNS欺騙和IP欺騙。
看完了上面的說明，就會意識到網路生態險惡，如果不用比較嚴謹的加密方式，那天被駭客賣了都不知道，並別說被綁架主機當跳板了。
如何產生ssh-key呢？請參考以下說明：


  • windows作業系統：
  1. window系統使用者，請先至PuTTY連線軟體下載頁面下載PuTTYgen或直接選擇A Windows installer for everything except PuTTYtel選項安裝整個PuTTY服務軟體包安裝。
  2. 安裝後執行PuTTYgen，使用預設值(Type of key to generate選擇SSH2-RSA,Number of bits in a generated key設定2048)，如fig. 1所示，按下generate鈕後即可產生key，記得在程式產生金鑰時將滑鼠移動到程式視窗外，並隨意移動滑鼠，讓程式以隨機方式產生金鑰。
  3. 生產完成後選擇Save private key將金鑰輸出，並保管好這組金鑰，以免遺失無法登入伺服器。
  4. 如果你是使用vultr創建新vps，記得在deploy中最下面的ssh key選項輸入金鑰，將PuTTYgen產生的key代碼輸入fig. 2的欄位內，即可將讓vps使用你產生的金鑰登入。
fig. 1 PuTTYgen SSH-KEY產生示意圖

fig. 2 vultr輸入SSH-KEY示意圖


  • OSX作業系統
  1. 如果你是使用osx就更簡單了，首先打開終端機terminal，接著輸入指令 ssh-keygen -t rsa後按下enter，接著他會要你輸入passphase(類似密碼，但是改成輸入一段數個英文單字組成的句子，如ex please enter the password，使用句子取代密碼的功能)，最後輸入輸出檔案名稱即可，一般檔案會在/使用者/路徑底下。
  2. 使用筆記本打開剛產生的金鑰檔案，就會看到如使用PuTTYgen所產生的金鑰密碼。
訂閱： 文章 ( Atom )