2014年9月29日 星期一

白工

那天跟朋友談到做白工這件事,其實我個人是非常討厭做白工的,可是是不是做白工不是只有以錢來做衡量,工作中可以得到下面幾點就不算做白工。

1. 金錢(就好像你工作再不爽,有收入還是可以摸著鼻子做)

2. 經驗的成長,比如說在做的時候多學會一個技能,或學到做事的經驗,很多技能如果只是在意有沒有收入而不去持續學習的話,就不大可能有什麼成長,這也是有人提到的下班時間做什麼會覺得一個人之後的成就之類的,中間一些失敗的經驗也是一種很寶貴的成長。

3. 累積,比如說我寫網誌就是,其實沒錢也沒人看,但時間久了會累積很多東西,偶爾 google 到自己以前寫過的東西就會很開心。制服地圖的照片也是一種累積,累積這種事情不是一天兩天就可以成的,而這些累積還都有可能累積到人脈,像我就從寫部落格跟做制服地圖認識不少朋友,這些都是這種很寶貴的。
Read more

2014年9月28日 星期日

Uniform Map 制服地圖- 增加相片說明頁

制服地圖

把 UI 做了一個不小的調整,首先改變了相片容器的樣式,本來是用陰影,現在則是把陰影都拿掉了,這個應該比較看不出來,但比較細心的應該還是會觀察到有點不一樣,許多頁都一併改到了,但主要可以看學校頁的樣子

制服地圖

再來就是做了相片資訊頁,如果點選下面相簿的照片,就會到個別相片頁,裡面就有攝影師跟 MD 的資訊,只是因為資料庫的欄位是比較後期才建的,有些比較早的照片還沒有把資料補進去,之後會找時間補齊。


Read more

2014年9月26日 星期五

候選人行程地圖

候選人行程地圖

候選人行程地圖是最近完成的新專案,簡單說就是五都的候選人行程地圖,選定一個候選人在選擇時間區間,就可以跑出這段時間內他去過的點。

候選人行程地圖

點開後可以看到比較詳細的候選人去過的時間跟做了什麼事情。

top 10 行程

下面則是各直轄市候選人去過的統計排行榜,看到最後是否可以看出有哪些地方是兵家必爭之地,停在長條圖上還可以看到每個候選人去過的個別次數。

做行程地圖的目的其實是希望大家可從地圖去觀察出候選人跑形成的端倪,或許是勤跑艱困選區,或許是跑支持度比較高的,總之看大家有看出什麼有趣的事情,都可以一起來討論看看。

中間調整花了不少時間,做出來還滿開心的,也有做 RWD ,但除了介面外其實連操作行為也改了,想看看手機版有什麼不一樣可以用手機開一下這個候選人行程地圖看看。

Gene 說這可以算是動態的資訊圖表,把一些過去只是純文字的東西,用適宜的方式呈現出來,應該會更有感覺吧,這也就看大家怎麼想囉。
Read more

2014年9月24日 星期三

純 css sprite 循環動畫



css 3 之後做動畫就可以不用依靠 js,除了用 transition 搭配 transform 做變形動畫外,以往比較複雜用以取代 gif 的 sprite 動畫,也可以輕鬆用純 css 完成了。

首先準備類似這樣的圖片,把所有動作合在一張圖上而不是分散在各張圖。


一開始是一樣的,準備一個 div 放圖片。
  1. <div class="cat"></div>  

在 css 設定底圖。
  1. .cat{   
  2.     width:350px;   
  3.     height:380px;   
  4.     margin:2% auto;   
  5.     backgroundurl(http://i.imgur.com/Bu9JKiB.png);   
  6. }  
Read more

Discuz 清暫存

論壇好像都有容易快取的問題,大概設計是為了怕使用者太多吧,所以在 Discuz 要更新暫存的話,就登入管理中心後,選擇工具 -> 更新緩存

可能要多試幾次,再重新整理網頁看看是否已經變更為你修改的樣子了。
Read more

2014年9月21日 星期日

國中制服地圖上線以及 UI 調整

制服地圖

這陣子花了不少時間調整後台,為的是之後增加新的地區或分類的時候方便,會這樣是因為制服地圖剛完成的時候沒有想到之後擴充的問題,現在調整完後,之後要新增新的地圖就只要多花一點時間,就可以新增新的主題了。

所以就也公開已經有一些學校資料的國中制服地圖,所以如果你的學校還沒在上面,或是想要提供好的照片,都歡迎寄信 uniformmap.tw@gmail.com 給我們,或到粉絲專頁跟我們聯絡。

調完後就是調整 UI,讓 UI 跟現在的 google maps 比較像一些,主要是按鈕的大小和樣式,調完後一些功能也應該是清楚多了。

制服地圖

現在地圖頁的功能有這些,左上是一些最新消息,右上可以切換地圖,右下則是搜尋學校的功能,如果有任何建議也持續歡迎提供給我們知道。
Read more

2014年9月20日 星期六

php 判斷是否為行動裝置

雖然 RWD 可以根據解析度調版面,可是觸碰螢幕跟可以使用滑鼠其實還是不大一樣,所以還是會有需要用到是否是手持裝置的時候,找了一下剛好發現 Mobile-Detect 這個別人寫好的工具,於是就直接拿來用了。

引入後再判斷
  1. require_once("Mobile_Detect.php");   
  2. $detect = new Mobile_Detect;   
  3. $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');  

  1. <?php $check = $detect->isMobile(); if($check): ?>    
  2.     是的話做的事   
  3. <?php else: ?>  
  4.     不是的話做的事   
  5. <?php endif; ?>  

真的很方便。
Read more

2014年9月16日 星期二

Bootstrap 表單驗證 BootstrapValidator

做網站難免就會遇到需要驗證表單的時候,因為要自己寫驗證很麻煩(也不用每次都花力氣),所以就有很多人寫好驗證的 plugin 供人使用,這陣子以來 bootstrap 很流行,最近也找到了用 bootstrap 為基礎的Validator BootstrapValidator,用起來也很簡單,有興趣就試試吧。

當然也是先把東西放到網頁上。
  1. <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>  
  2. <link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>  
  3.   
  4. <script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>  
  5. <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>  
Read more

制服地圖聲明啟示

致各位媒體先進及關心制服地圖的朋友:

  關於近日媒體報導,制服地圖經營團隊提出下列兩點說明,懇請惠察。

  一.「制服地圖」與《高校誌》分屬兩個獨立運作單位,為網路社群平台與實體雜誌社之異業結合,互不隸屬。日前「高校制服大賞」活動規劃、網站製作均為「制服地圖」負責執行,高校誌負責媒體連絡事宜。感謝高校誌創造許多媒體先進的關注,制服地圖特此致謝。

  二.「500校制服年鑑」募資計畫及製作執行單位為高校誌,制服地圖協助於網路社群提供宣傳,募資及資金運用均由高校誌主導,制服地圖並無涉及執行實務。

  制服地圖團隊衷心期望,年鑑企畫不辜贊助單位及預購網友之期待,並祝福高校誌製作進度順利。

制服地圖團隊 敬上
Read more

2014年9月15日 星期一

jQuery AJAX 上傳與 POST 資料

  1. <label for="">選取檔案</label>  
  2. <input type="file" name="import_file" id="import_file">  
  3. <a role="button" class="btn btn-primary" id="upload_file" >上傳檔案</a>  

要做預覽的時候會用到,如果再傳檔案的同時也要傳其他參數的話,可以像這樣。

  1. $("#upload_file").click(function(){   
  2.     var preview = 1;    
  3.     var files = $("#import_file").get(0).files;   
  4.     var formData = new FormData();   
  5.     formData.append("preview", preview);   
  6.     formData.append("import_file", files[0]);   
  7.     $.ajax({   
  8.         url: 'api',   
  9.         data: formData,    
  10.         dataType: "json",   
  11.         type: "POST",   
  12.         cache: false,   
  13.         contentType: false,   
  14.         processData: false,   
  15.         error: function(xhr) {   
  16.             alert('Ajax request 發生錯誤');   
  17.         },   
  18.         success: function(json) {   
  19.             
  20.         },   
  21.         complete: function(json){   
  22.         }   
  23.     });   
  24. });  
Read more

2014年9月14日 星期日

2014年9月13日 星期六

[Robot 魂] Tauburn

タウバーン
這部我也沒看過,不過R魂剛出的時候就對這機體很有印象,只是沒看過作品沒入手,最近則是因為去了BANDAI的魂展入手了。

タウバーンタウバーン
Read more

2014年9月12日 星期五

google maps 一次只開一個 infowindow

再開啟的時候把其他的 infowindow 移除就好了。

  1. google.maps.event.addListener(marker, 'click'function() {   
  2.     if($('.gm-style-iw').length) {   
  3.          $('.gm-style-iw').parent().remove();   
  4.     }   
  5.     infowindow.open(map,marker);   
  6. });  
Read more

台南行 喝喜酒

2014.9.6

台南兒童館台南兒童館台南兒童館台南兒童館

帶小孩能去的地方就是不大一樣,今天的行程就是自己出來玩不會去的兒童館,不過在路上看到這棟很漂亮的建築物,接近了才知道是台南移民署,覺得好看就停下來拍個照了。
Read more

2014年9月10日 星期三

2014年9月4日 星期四

Related Posts Plugin for WordPress, Blogger...