2014年1月31日 星期五

Uniform Map 制服地圖 部落格改版

Uniform Map 制服地圖部落格

制服地圖部落格

因為之前的版面有些情況下會破掉,所以最近花了一些時間找了個新版型,調了一下 UI,讓整體感更強一點就定案了,現在網頁整體看起來素素的都會比較好看。

這個版型有 RWD ,是特意找的,在手機上看也很漂亮。而最近也加了一些新的 plugin,一些好用的 plugin 都整理在這篇,可以給有需要的人參考。

今天隨手調了一下 logo ,希望這次春節期間可以把一直想做的資訊頁給弄出來。
Read more

祝大家馬年行大運

新年快樂2

轉眼又過了一年,去年一年最開心的事應該算是制服地圖得到了許多人的關注,所以就讓制服美少女來跟大家祝賀新年快樂。

談一下制服地圖的近況,趁這段時間有點空檔(其實只是別的事暫時無視),趕工弄了一些功能,目前把資料庫跟前台給改寫,香港的已經開始在新增內容了,之後要擴增到別的地區也沒什麼問題,加上最近又加入了新的攝影師,他的作品好棒,到時應該可以給大家更不一樣的感受。

再來是最近跟好幾組人談了合作,也會找時間把想做的東西都擺到網站上去,也請大家期待下一波制服地圖的改版。

上面那張是正經版的,下面就請制服控說出他們心中的新年賀詞吧 XD
新年快樂

最後希望大家在新的一年能繼續支持我們持續開發的新服務,不只是制服地圖喔,可能還有許多讓人意想不到的服務,只是那些東西都還在我的腦袋裡,最後出來會長什麼樣子我也不清楚,但當上線之後,如果有什麼建議或鼓勵,也請不吝給予指教。

Read more

2014年1月29日 星期三

自訂分享到FB資訊

我們可以很輕鬆的在網站上加上一個like的按鈕,按了讚後會把訊息分享到FB上,不過往往分享的內容不見得是我們最希望分享的內容,想要設定分享的圖片跟文字其實很簡單,只要加上下面的tag就可以了。
  1. <meta name="description" content="你想分享的訊息">  

  1. <meta property="og:title" content="我是標題" />  
  2. <meta property="og:type" content="article" />  
  3. <meta property="og:url" content="url" />  
  4. <meta property="og:image" content="images" />  
  5. <meta property="og:site_name" content=""/>  
  6. <meta property="og:description" content=""/>  

更詳細的介紹
打造方便分享的網頁|Open Graph Protocol篇
Read more

2014年1月28日 星期二

制服女孩和制服至上

制服女孩 x 制服至上

最近台灣制服控的盛事(?)就是接連出了兩本跟制服有關的書籍,一本是蚩尤大的制服至上 臺灣女高中生制服選和史旺基大的制服.女孩 × 史旺基,史旺基是認識比較久的朋友,所以之前就知道他要出書的資訊,蚩尤大則是在他的部落格有宣傳,所以知道這本書要出書的訊息,我則是在他新書發表的那天跟他認識的,相談的過程也很愉快。


制服至上 臺灣女高中生制服選
制服.女孩 × 史旺基

而身為制服地圖的站長最大的福利,就是可以開心的拿到兩位大大的簽名囉。

這兩本都很不錯,對於相關主題有興趣的,都很推薦帶回家收藏喔。

Read more

2014年1月26日 星期日

AngularJS 的 ajax- $http

用 AngularJS 來做 ajax 可以比用 jQuery 輕鬆愉快很多。


基本用法在 html 部分一樣用 ng-repeat 把回傳的 json 塞到 DOM 裡面就好了。
  1. <div ng-controller="MyController">  
  2.     <ul>  
  3.         <li data-ng-repeat="school in school">{{school.name}}</li>  
  4.     </ul>  
  5. </div>  

javascript 處理起來跟 jquery 有點像,只是不用再這邊處理 DOM 了,有需要再把回傳的 json 格式整理一下就好了。

  1. function MyController($scope, $http){   
  2.     $http({   
  3.         method: 'GET',   
  4.         url: 'school.json'  
  5.     }).success(function(data, status, headers, config) {   
  6.         $scope.school=data;   
  7.            
  8.     }).error(function(data, status, headers, config) {   
  9.            
  10.     });   
  11. }  
Read more

2014年1月24日 星期五

502間高校制服 最後10名在這裡

502間高校制服 最後10名在這裡

集結全台高中職女制服照的「制服地圖」網站,手機app具有各校按讚功能,2013年吸引近59萬投票數。昨(22)日《蘋果》公布2013年10大人氣制服,斗六高中以2萬419票奪下冠軍。

而比賽有贏有輸,今日公布最後倒數10名人氣最低的制服,得票數最少為9票,其中有3間同為22票。但這也和部份學校加入資料庫時間較晚有關,其中仍有不少好看的制服,快幫自己的母校按讚打氣,期待2014年後來居上。(黃韻文/台北報導)
 

Read more

2014年1月22日 星期三

【動新聞】502間高校制服妹 獨家公布前10大

【動新聞】502間高校制服妹 獨家公布前10大

2014年01月22日11:49

由網友紅色死神開發的「制服地圖」網站,網羅全台高中職女制服照,去年6月上線約蒐集252間學校,現已達到502間。

網頁版近期新增搜尋功能,可勾選喜愛的顏色款式,卡其、水手服、連身裙任你挑;手機版則具有各校按讚功能,累積近59萬投票數,《蘋果》獨家公佈2013全台10大人氣制服!(黃韻文/台北報導)

--
前幾天蘋果的記者問我有沒有去年票選的統計結果,有跟他說後來網站沒有跟 app 同步,不過他還是說想知道一下,所以就幫她查了一下,然後就有這則新聞,統計的結果如下:

Top 1 斗六高中 2萬419票
Top 2 台北育達高職 1萬8552票
Top 3 私立華岡藝校 1萬7511票
Top 4 景美女中 1萬6997票
Top 5 永仁高中 1萬1999票
Top 6 莊敬高職 1萬1754票
Top 7 楠梓高中 1萬1167票
Top 8 私立黎明中學 1萬929票
Top 9 新店高中 9944票
Top 10 中山女中 8464票

不過網站上有 503 所學校了,app 就比較沒有同步到那麼多,之後再看怎麼把兩邊的資料統一好了。
Read more

2014年1月21日 星期二

制服至上 臺灣女高中生制服選

制服至上 臺灣女高中生制服選

收錄臺灣五十一所高中 超過百張全新彩圖
法國安古蘭參展繪師──蚩尤歷時兩年,親訪、收集各校資料而成
細緻獨特的筆觸、唯美多元的畫風、圖鑑等級的完美細節考究
特別收錄:多款日治時期、絕版經典制服以及儀隊、拔河、體操等各校特色社團制服。
臺灣第一本女高中生制服畫冊
完全符合校規的制服穿法!


--
今天很開心可以跟這本書的插畫家蚩尤大大見面,跟他聊了不少跟制服還有創作有關的事情,在台灣做創作真的很辛苦,蚩尤大的作品其實已經很成熟了,但希望有更多人可以在自由創作下還能餵得飽自己,這樣台灣在創作這塊上才能更有活力啊,更多有活力的創作,我相信是能帶給台灣更正面的力量的。

也因為今天跟蚩尤大見面的關係,所以就很開心的在發行的前一天就買到,而且還有蚩尤大的簽名喔。

制服至上
而支持歸支持,當然也是我覺得蚩尤大畫得很好才會想跟他買,雖然九把刀之前講過的話被人批評,但我更希望如他所說,大家支持的是好創作,而不是只是支持台灣創作這個理念而已,所以啊,喜歡插畫或喜歡制服的,買這本回去是一定不後悔的,而且蚩尤大也說,這也是要賣得好,才更有機會出之後中南部的學校哩。


在徵得蚩尤大的同意下,也在制服地圖上做了一頁,希望逛到制服地圖的朋友也能知道這個消息。
制服至上 臺灣女高中生制服選

之後跟他或許也會有合作的機會,當我們有作品的時候,也會公布在制服地圖上讓大家知道的。
Read more

Uniform Map 制服地圖增加了新小編喔

香港制服
香港制服

最近因為調整制服社團政策的關係,開放讓有興趣的網友都加入,加上因為一個香港的網友宣傳了我的粉絲頁,所以在有點意外的情況下,在社團發現了一個熱血的香港網友,經詢問他後他就答應加入幫忙經營粉絲頁,而且比我還要熱情很多(我要到旁邊罰站去了),總之在適當的位置找到適合的人,才是讓事情能夠往前進展最重要的事啊。

總之在他的幫忙下新增了很多的照片,我也更想要趕快把香港版的制服地圖弄上線了,請大家期待囉。

在稍微提一下的是其實現在制服地圖粉絲頁除了我以外還有四個小編,分別是大家可能知道的史旺基,還有那個熱血香港朋友,再來就是一個自稱制服地圖小變態的朋友和一個正妹小編。

制服地圖是在我很多判斷跟決定下一直往前走的網站,制服是台灣的文化,放在地圖上就變創意,然後再加個什麼在後面就會是產業了,這是我目前對制服地圖的註解,在我腦中也很多條想要發展的路線,如果沒什麼事情纏身就努力又熱血的開發吧!!

Read more

2014年1月20日 星期一

AngularJS ng-blur, ng-focus

參考入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus,來練習一下 ng-blur跟 ng-focus。

準備 html
  1. <div ng-app ng-init="focus=false;blur=false;active=false">  
  2. <input type="text" ng-class="{ myFocus: focus, myBlur: blur }"    ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">  
  3.     <p>focus: {{focus}}</p>  
  4.     <p>blur: {{blur}} </p>  
  5.     </div>  

準備改變的 css
  1. input[type="text"].myFocus {     
  2.         background-color: yellow;     
  3.     }     
  4. input[type="text"].myBlur {     
  5.         background-colorred;     
  6.     }    

簡單說就是去偵測 html 上的 focus 跟 event ,改變賦予的變數後,從 ng-class 去顯示狀態。

Demo
Read more

2014年1月18日 星期六

制服.女孩 × 史旺基

制服.女孩 × 史旺基

制服.女孩 × 史旺基


制服地圖上很重要的攝影師史旺基大大要出制服寫真書囉,知道他要出書了覺得很開心,下午就花了一點時間弄了一個介紹頁,比原本博客來的預購頁好看很多(謎之音: 公版的怎麼跟特別製作的比)。


摘錄史旺基自介的一句話
後來在透過朋友的關係認識了「制服地圖」的站長,該站把全台灣幾乎所有的高中職的制服照片蒐集完畢並且整理在一張台灣地圖上面,我才發現原來全台灣還有這麼多種類各式各樣的制服存在,就開始有了一種看自己到底能夠拍攝到多少不同風格特色制服美少女的想法,也因此開始了這個制服主題的計劃。

喜歡制服的朋友,不妨買一本回去收藏吧。


Read more

2014年1月17日 星期五

Uniform Map 制服地圖- 找學校

Uniform Map- 找學校

Uniform Map 制服地圖- 找學校

如果在網路上或路上看到一件制服很好看,可是卻不知道是哪間學校的該怎麼辦?


朋友建議我在網站上新增這個功能,花了一些時間寫出來,可是更花時間的是重新替制服做分類,也還好是建議我的朋友是專家(我一直都不是 XD),所以這部份的功能才能順利完成。


查詢的邏輯是,如果上半身任何部分的衣服有顏色,我都會把顏色記一個標籤,比如說一件白色的制服,可是有藍色的邊,我在顏色上就會標記白、藍這樣,若再加上領結或領帶的部分,比如說有紅色的領結,那麼我上衣的顏色就會多標一個紅色;而如果衣服或領結、領帶是格子花紋,則花紋上有的顏色都會標記起來,比如說有一個學校的領結是格子花紋,上面有白、褐跟灰,那麼這幾種顏色我也都會標記起來。


裙子就比較單純,有什麼顏色就標什麼,格子裙的話就是上面所有的顏色都會標記起來。


而樣式的部分則是很清楚就好分類,模稜兩可的話我就會兩者都標,比如說有件格子裙的格子不大不小,我就會把格子跟小格子一併標上去,寧願讓使用者多找一點自己去判斷也不要讓使用者因為定義的不一致而找不到。


顏色的定義因為不想藍綠、灰綠這些全部都標上去、暗紅、紫紅這些都標上去怕項目太多,所以如果上面沒有的顏色,比如說藍綠色,就是藍色跟綠色都選就會是藍綠色,再來就是有些學校覺得照片可能有色偏,比如說黑色跟深藍會因為品質分不大出來,我也會兩者都標。


因為只是一個大致看過的標記,如果有錯要麻煩網友反應了,畢竟我們能親眼看過的學校不多,加上照片品質的問題,就需要靠網友一同幫忙校正讓資料更準確了。


最後感謝網友萌太奇映像的幫忙,當然也因為這個功能是他提議的,有他幫忙界定樣式的定義跟增加標記,都加速了這個功能的完成。


在這個功能上線的同時,我也可以繼續開發新的功能了。


Read more

2014年1月15日 星期三

あの俺年思 Annual Analysis- 網站分析網站

Annual Analysis

あの俺年思 Annual Analysis是最近黑貘找我做的專案,從討論到完成剛好花了七天,現在有 bootstrap ,套了後再修一下 UI 和設計一下 logo ,要很快做一個還不錯的網站真的很快。


簡單的說如果有在用 google analytics 的話,只要登入就可以看到這個網站幫你整理出來的數字,比如說最熱門、FB 最多人分享.. 這些的,除了這些基本的外,還有算出網站最有價值的關鍵字跟文章,之後應該還會繼續開發新功能,總之想快速看一下去年網站經營得怎樣,就登入看看吧。

Read more

2014年1月13日 星期一

純 javascript 做右鍵選單

因為在寫 AngularJS 所以很多時候要用純 js 寫東西(這樣好像自宮喔),所以看了一下怎麼寫右鍵選單,其實原理也還蠻簡單的。

首先準備一下 css ,等等按了右鍵讓這個 box 跟著跑,其他就不難了。
  1. #box{   
  2.     width:60px;   
  3.     height:60px;   
  4.     background:#ccc;   
  5.     border-radius: 4px;   
  6.     positionabsolute;   
  7.     left:10px;   
  8.     top:20px;   
  9. }  

讓 box 的 position 設為 absolute ,就可以四處跑了。


然後加一段按了右鍵後,改變 box 的位置就好了。

右鍵的事件是 contextmenu
  1. document.addEventListener('contextmenu'function(e) {   
  2.     _x=e.clientX;   
  3.     _y=e.clientY;   
  4.     document.getElementById("box").style.left=_x+"px";   
  5.     document.getElementById("box").style.top=_y+"px";   
  6.     e.preventDefault();   
  7. }, false);  

Demo

Read more

jQuery 拉霸機- jQuery-jSlots

jqslot

簡單說就是用 jQuery 來做拉霸機,外掛網址
jQuery-jSlots

準備 html
  1. <ul class="slot">  
  2.     <li>1</li>  
  3.     <li>2</li>  
  4.     <li>3</li>  
  5.     <li>4</li>  
  6.     <li>5</li>  
  7.     <li>6</li>  
  8.     <li>7</li>  
  9. </ul>  

簡單使用
  1. $('.slot').jSlots({   
  2.     spinner : '#playBtn',   
  3.     winnerNumber : 7   
  4. });  

可以用的變數
  1. $.jSlots.defaultOptions = {   
  2.     number : 3,          // Number: number of slots   
  3.     winnerNumber : 1,    // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED   
  4.     spinner : '',        // CSS Selector: element to bind the start event to   
  5.     spinEvent : 'click'// String: event to start slots on this event   
  6.     onStart : $.noop,    // Function: runs on spin start,   
  7.     onEnd : $.noop,      // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.   
  8.     onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array, finalNumbers:Array)   
  9.     easing : 'swing',    // String: easing type for final spin. I recommend the easing plugin and easeOutSine, or an easeOut of your choice.   
  10.     time : 7000,         // Number: total time of spin animation   
  11.     loops : 6            // Number: times it will spin during the animation   
  12. };  

這個 plugin 的優點是可以自己訂樣式,所以只要熟 css,想要把拉霸機變得很漂亮也沒問題。

Read more

2014年1月12日 星期日

mysql 一次新增多筆資料

  1. //原始陣列   
  2. $tag=$_POST["tags"];   
  3.   
  4. $newTag="";   
  5. foreach ($tag as $t) {   
  6.     $newTag.= "(".$id.",".$t."),";   
  7. }   
  8. $newTag=substr($newTag,0,strlen($newTag)-1);   
  9.   
  10. $sqlTag="INSERT INTO school_tag (   
  11. id ,tag_sn)   
  12. VALUES $newTag";  

POST 後再去處理陣列,然後一次新增多筆欄位用 INSERT INTO school_tag (id ,tag_sn) 各筆資料 用 (data1, data2),(data3, data4)... 這樣輸入就可以了。
Read more

2014年1月10日 星期五

Hairbook 人氣髮型書上線囉

Hairbook

Hairbook 人氣髮型書 是忙了好一陣子的題目,主要是想要做店家曝光的平台,以及讓想做美髮的朋友一個方便找髮廊還有看設計師作品的服務,上線後還有很多想做的事情,但已經有一些基本的內容在了,如果對相關的內容有建議,都歡迎提供給我們。

髮廊列表,以後會放更多的髮廊以及讓網友更容易找到想要的髮廊。

Hairbook


設計師作品是以瀑布流的方式顯示。

Hairbook


作品分為三個層級,分別為 salon、分店跟設計師,可以各個層級去看設計師的作品集並找想要的服務。

Hairbook
HairbookHairbook


此外每個層級可以看的內容也不大一樣,比如說分店就是看到分店資訊,包含分店內的設計師,設計師層則是看到設計師的介紹。

HairbookHairbook

Read more

AngularJS UI Bootstrap 製作自動提示輸入效果- Typeahead

Typehead

google 搜尋的時候,輸入一些字後就會有下拉建議的字,這個現在用 AngularJS 搭配 UI Bootstrap 做起來也很方便。

首先到 Angular UI Bootstrap 下載該下載的 css 和 js,或直接用 CDN。
  1. <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">  
  2. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>  
  3. <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>  

基本用法:
  1. <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">  

然後在 controller 裡放 json 格式的資料
  1. $scope.states = ['Alabama''Alaska''Arizona''Arkansas''California''Colorado''Connecticut''Delaware''Florida''Georgia''Hawaii''Idaho''Illinois''Indiana''Iowa''Kansas''Kentucky''Louisiana''Maine''Maryland''Massachusetts''Michigan''Minnesota''Mississippi''Missouri''Montana''Nebraska''Nevada''New Hampshire''New Jersey''New Mexico''New York''North Dakota''North Carolina''Ohio''Oklahoma''Oregon''Pennsylvania''Rhode Island''South Carolina''South Dakota''Tennessee''Texas''Utah''Vermont''Virginia''Washington''West Virginia''Wisconsin''Wyoming'];  

方便的是還可以自己寫 template 基本用法也很簡單。
Read more

2014年1月9日 星期四

2014年1月7日 星期二

[超級英雄圖譜] 蝙蝠俠(Batman)

Batman

蝙蝠俠(英語:Batman)是在1939年5月美國《偵探漫畫》第27期中誕生的一個虛擬人物,屬於DC漫畫的超級英雄,由鮑勃·凱恩與比爾·芬格(Bill Finger)共同創造(但是只有肯恩獲得官方注名為作者),是個伸張正義打擊犯罪的英雄。最初被稱為「蝙蝠人」,還有「黑暗騎士」、「世界最偉大的偵探」在其他標題。雖然一開始蝙蝠俠只是數個同時被創造出來的虛擬角色之一,但後來他成了其他連載漫畫中超級英雄的領袖人物。蝙蝠俠跟超人是英雄漫畫中最廣為人知也最受歡迎的兩個角色,並被多次拍成電影。2011年5月,在IGN的前100名的漫畫書英雄中排行第二。
Read more

2014年1月6日 星期一

AngularJS 的 $timeout

就是做計時器用的東西。

$timeout官方說明

這次要使用 $timeout
  1. function Controller($scope,$timeout) { }    

像這樣讓 timeout定時去執行
  1. $scope.countdown=10;   
  2. $scope.onTimeout = function(){   
  3.     $scope.countdown--;   
  4.     mytimeout = $timeout($scope.onTimeout,1000);   
  5. }   
  6. var mytimeout = $timeout($scope.onTimeout,1000);  

放一個按鈕讓倒數停止
  1. $scope.stopCount = function(){   
  2.     $timeout.cancel(mytimeout);   
  3. }  

重新開始的話再繼續執行就好了
  1. $scope.continueCount = function(){   
  2.     mytimeout = $timeout($scope.onTimeout,1000);   
  3. }  

參考

Demo

Read more

機神咆吼 デモンベイン(Demonbane)

デモンベイン

機神咆吼 デモンベイン也是因為玩了 UX 才決定入手的模型,不過網路上超合金的都好貴,這支是我買二手的,狀態沒有說非常好,但看在價錢便宜以及收藏的目的,就還是可以接受啦..

デモンベインデモンベイン
Read more

2014年1月4日 星期六

RoboInfo- 時間軸機戰年表

RoboInfo- timeline

機器人大戰年表

一直很想在 RoboInfo 上加時間軸,最近花了一點時間加上去了,先把各個機戰作品都擺上去,之後會再做各個作品的詳細介紹頁。

預計做的詳細頁面是各個機器人作品在哪些機戰登場,哪個機戰又有哪些作品參戰的交叉比對,相信對喜歡機器人作品的人又更方便了(當然最主要的動機都是我本身很希望有這個功能)。

最近就都在想,要不是因為我從頭到尾都有辦法自己寫,這個網站也不會出現的,而且這樣可以貫徹自己的意志去做一個網站,真的是很棒的一件事。

Read more

2014年1月2日 星期四

AngularJS 新增/刪除物件

AngularJS 跟 jQuery 的新增/刪除列表的方式很不一樣,他只要控制 json array 的內容就可以了。

準備 html
  1. <div>  
  2.     <input type="text" ng-model="new_ip"> <button ng-click="add_ip()">新增</button>  
  3. </div>  
  4. <ul>  
  5.     <li ng-repeat="ip in iplist"><span>{{ip.ip}}</span><button ng-click="removeIp($index)">remove</button></li>                   
  6. </ul>  
這邊我想要新增一組 ip ,只要按刪除就從列表移除。

準備一個json array 來存列表,如果沒有預設值就用空陣列。
  1. $scope.iplist= [];  

新增 ip 的話則是抓 input 內的值,再塞到 json array 內就好了。
  1. $scope.add_ip=function(){   
  2.     $scope.iplist.push({ip: $scope.new_ip});   
  3.     $scope.new_ip="";   
  4. }  

刪除的話一樣從 json array 內刪除要刪除的那個,html 就會自動少了那一項。
  1. $scope.removeIp=function(item){   
  2.     var $index=$scope.iplist.indexOf(item);   
  3.     $scope.iplist.splice($index,1);     
  4. }  

Demo
Read more

jQuery 時間軸 plugin - Timeline Portfolio



Timeline Portfolio是一個簡單可以製作時間軸效果的 jQyery plugin,依他的格式改變 json 的內容就可以做出你要的時間軸。

  1. var timeline = new VMM.Timeline();   
  2. timeline.init("data.json");  

再改個樣式就變成屬於自己的時間軸了,只是可以自訂的地方好像不多。

我目前把這個 plugin 套在 RoboInfo 的機戰年表上。

Read more

2014年1月1日 星期三

Related Posts Plugin for WordPress, Blogger...