2017年12月8日 星期五

2017年12月2日 星期六

在網站嵌入 google 翻譯功能

很多時候網站想要可以讓外國人也可以看得懂,可是本身卻沒有多語系功能的話,一個很簡單的方式就是使用 google 翻譯來幫你做網站的翻譯,只是當然會有些缺點是翻譯起來可能會有些怪怪的,但對於要很快地讓外國人也可以大致了解網站寫些什麼,算是很方便的了。


網站名稱: google 翻譯功能
網站網址: http://translate.google.com/manager/website/?hl=zh-TW">http://translate.google.com/manager/website/?hl=zh-TW">http://translate.google.com/manager/website/?hl=zh-TW


首先到服務網站按下「立即新增到您的網站」



然後貼上欲翻譯網站的網址,並選擇原本的語系。



再做一些樣式上的設定就可以了,google 還很貼心的讓你可以輸入 google analytics 可以追蹤網友使用語系的狀況。



最後將嵌入碼嵌入到網站即可。
Read more

2017年11月20日 星期一

2017年11月11日 星期六

2017年11月9日 星期四

手機版網頁 UI 設計尺寸列表

設計 Web UI 時,如果只看手機螢幕的解析度,經驗不夠的設計師可能會因為解析度太大設計上會有一些問題,所以最好是像寫 RWD 一樣使用「device width」來設計會比較好,那 device width 要多少比較好呢? 剛好這邊有一個網站 mydevice.io有列出各主流手機螢幕解析度跟 css 寬度該設多少,對設計應該會很有幫助,有需要的再把這個網站存起來。

Read more

2017年11月5日 星期日

2017年10月29日 星期日

使用 jqeury 從網址取得網頁截圖

如果有想要從網址取得該網頁的縮圖,可以使用 google 的 PageSpeed api,簡單地用 ajax 從以下的網址取得資訊後再處理即可。
  1. https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + url + '&screenshot=true  


用 jqeury 的 ajax 就會像這樣。
  1. $.ajax({   
  2.             url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + url + '&screenshot=true',   
  3.             context: this,   
  4.             type: 'GET',   
  5.             dataType: 'json',   
  6.             timeout: 60000,   
  7.             success: function(result) {   
  8.                 var imgData = result.screenshot.data.replace(/_/g, '/').replace(/-/g, '+');   
  9.                 $("img").attr('src''data:image/jpeg;base64,' + imgData);   
  10.             },   
  11.             error:function(e) {   
  12.                 $("#msg").html("讀取失敗");   
  13.             }   
  14. });  

在看怎麼處理讀取前跟讀取後就好了,
Read more

2017年10月26日 星期四

冠軍磁磚 磁磚設計大賽

最近上線的專案,有趁這次機會把以前辦比賽的 code 整理過,可能最近還會再 run 幾個活動就把服務給弄出來給大家用了,這次活動的網址

冠軍磁磚磁磚設計比賽

冠軍磁磚磁磚設計比賽

除了把功能模組化外,也改了一些東西優化網站,之後應該也會陸續弄到制服地圖還將來的新站上。
Read more

2017年10月23日 星期一

資策會 UI/UX 班 Photoshop 課



今年年初開始在資策會講課,主要教的都是 UI/UX 班,本來負責的是 CSS3 跟 jQuery 的部分,這次因為 PS 老師卡堂的關係所以我就上去代打啦,這次講課有很多正妹照片可以用,歡迎來聽課。
Read more

2017年10月20日 星期五

2017年10月3日 星期二

2017年9月27日 星期三

Pokemon Go Plus 使用心得

現在還有在玩 Pokemon Go! 的人一定是很有毅力的人! 沒錯就是說我。

剛開始玩的時候是回憶,後來就有要把寶可夢收齊的想法,都收齊了的現在,就變成讓我出去運動跟散步的動力,總之這款遊戲真的讓我多花了不少時間運動就是了。



最近因為星塵加倍的活動,所以才終於入手這款 Pokemon Go Plus,簡單講就是一個可以不用開 app 就看抓怪跟轉補給站的工具,而且還可以用來孵蛋,真的是超方便的,實測後發現雖然捕捉率比較低,但五秒鐘就可以決定有沒有抓到寶可夢真的很方便,看來又可以更節省我玩這款遊戲的時間了。
Read more

2017年9月19日 星期二

榮總國際醫療中心網站

這個榮總國際醫療中心的網站折騰了好久,總算是上線了,雖然中間對於醫院的封閉系統滿有意見的,但上線就不想再計較太多,這次主要弄了多語系還有讓醫院內部弱點掃描過,也代表這幾年來在資安上的安全性的基本認知還算可以,也算是一種收穫。

榮總國際醫療中心

其實醫療中心本來只要求靜態的形象網頁,但我後台算是半買半相送,雖然後來拖很久也是因為做了很台的關係啦.. 這也是有做過醫院網站的才會了解吧(嘆)。

榮總國際醫療中心

Read more

2017年9月12日 星期二

班服、團體服訂購服務,班服產生器上線

班服產生器

最近在弄的新功能上線了,分別是可以製作班服的產生器,有興趣可以點上面的圖片去玩玩。

另外一個則是班服、團體服訂製的服務,老家其實一直都有接這樣的服務,這次是把訂製的功能系統化,也歡迎大家來找我們訂班服喔!

系服、班服、團體服印製服務


Read more

2017年9月5日 星期二

卓子傑:別被「夢幻糖果牆」迷惑──職場中的屈就,你得到什麼?

卓子傑:別被「夢幻糖果牆」迷惑──職場中的屈就,你得到什麼?

朋友寫的有提到我,雖然是有美化,但還是特此紀念一下。

節錄內文:

另一個認識十年的好友,我們從兩人都是社會新鮮人起開始合作,我是發案的行銷窗口,他是承接案子的繪圖設計師。當時他過著朝九晚六的上班族生活,憑藉優秀的電腦繪圖功力,在業外另行承接我這一張500、1,000元的設計案,貼補薪資的不足。我們也曾在聚會時一同抱怨升遷不順、加薪不如預期。

但後來他在工作之餘,另外自學程式、架設網站的專業,因為這些領域一直都是他在繪圖外的興趣。透過自學、接案的實作經驗積累,他逐漸能獨立承接更大型的設計專案,他不斷的累積實作經驗和業界口碑,同時也不忘繼續延伸自己的興趣範疇。

近年他架設了一個學生制服的圖鑑網,在學生群體中獲得廣大迴響,更引起媒體、廣告商及投顧公司的注意,後來定期舉辦活動、比賽,甚至吸引日本公司挹注資金投資。至於原本那份屈就的工作?當然早就離開了。他現在是台灣首屈一指的制服圖鑑網站站長,活動出席、顧問指導、開班授課的邀約不斷,事業版圖拓展非常迅速,他是以興趣鑽研技術為本,最後成功的經典案例。

他成功的關鍵,是在屈就中洗鍊出無可取代的技術力,透過技術面延伸的作品,吸引到投資者,進而創造成功,而不是留在原地持續抱怨。

Read more

2017年9月2日 星期六

用 js 點擊按鈕複製內容

要在網頁上點擊某個按鈕後,可以複製某特定區塊的內容,可以使用這隻 clipboard.js,使用的方法可以先下載 clipboard.js 或是使用 cdn

然後先在網頁上初始化。
  1. new Clipboard('.btn');  

接下來只要在 html 上寫 HTML5 data attributes 就可以了。
  1. <!-- Target -->  
  2. <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">  
  3.   
  4. <!-- Trigger -->  
  5. <button class="btn" data-clipboard-target="#foo">  
  6.     <img src="assets/clippy.svg" alt="Copy to clipboard">  
  7. </button>  
Read more

2017年8月17日 星期四

[CodeIgniter] 取得來源網址

在 CI 裡面要取得來源網址,需要啟用 user agent 後再取得來源網址,可以知道使用者從哪邊來到這一頁。

  1. $this->load->library('user_agent');   
  2. if ($this->agent->is_referral())   
  3. {   
  4.     echo $this->agent->referrer();   
  5. }  

其他 user agent 可以查閱User Agent 類別
Read more

2017年8月13日 星期日

把 img 的 svg 標籤轉成真的 svg

近年來為了解析度的關係,又流行起把圖示或一些圖案使用 svg 的方式嵌入,只是若要直接用 svg 的標籤嵌入,圖一複雜就很難維護,但如果用 img 的標籤嵌入就方便許多,但這樣就有一個問題是由於是用 img 的標籤,一些 svg 的 css 就沒辦法使用了,本來應該做些取捨,但也有更好的方式,就是把 img 的標籤再用 js 轉成原本的 svg 就好了,網路上也有好用的工具可以使用,比如這個 SVGInjector

把 js 放入專案後,最基本的用法只要如下面這樣使用就可以了。

  1. // Elements to inject   
  2.   var mySVGsToInject = document.querySelectorAll('img.inject-me');   
  3.   
  4. // Do the injection   
  5. SVGInjector(mySVGsToInject);  

一些進階的用法可以參考官方的說明,這樣就可以開心地使用 svg 了。
Read more

2017年8月9日 星期三

2017年8月6日 星期日

2017年7月29日 星期六

2017年7月18日 星期二

在 codeigniter 裡的 helper 使用資料庫

如果要在 ci 的 helper 裡面使用資料庫,必須要使用 & get_instance() ,用法如下。

  1. $ci=& get_instance();   
  2. $ci->load->database();    
  3. //do something   
  4. $ci->db->insert('your_table'$data);  

要呼叫資料庫都用 $ci 取代 $this
Read more

2017年7月17日 星期一

台灣街景封面產生器

因為最近《BRUTUS》以台灣為封面被大家廣泛討論,於是和朋友製作了台灣街景封面產生器讓大家可以上傳並製作自己喜歡的封面,引起了廣大的迴響。

聽說裡面有介紹台灣制服,於是先用制服大賞做了一張封面。




也被媒體報導
台南街景丟人? 街景封面產生器出現了
自己的封面自己做 網友瘋玩街景封面產生器
台南日常不美?日雜封面自己選 網推台灣街景封面產生器
Read more

2017年7月12日 星期三

[SR 超合金] 真マジンガーZERO

真マジンガーZERO

本來只有在漫畫登場的真マジンガーZERO,因為機器人大戰V的關係,推出了實體化的模型。

真マジンガーZERO真マジンガーZERO

原作的真マジンガーZERO感覺是延續真マジンガー 衝撃!Z編的創作,不過卻不是續作,而是另一種平行世界的概念,而且裡面還有非常多的平行世界。

真マジンガーZERO真マジンガーZERO

故事其實還滿黑暗的,一堆死人跟絕望感,裡面真マジンガーZERO的強度也強到破表,ZERO 的標誌很明顯的是背後那個環,看漫畫覺得應該是飄在本體後面,本來還在想模型該怎麼表現,入手後覺得表現得還滿不錯的,雖沒有原作那樣很明顯浮著的感覺,但也有把那個感覺表現出來。

真マジンガーZERO真マジンガーZERO

造型很棒,把整體的帥氣表現出來。

真マジンガーZERO真マジンガーZERO

武裝不多,就是那個拳頭就是了。

真マジンガーZERO真マジンガーZERO

不是凱薩的樣子,但也設計得很漂亮了。

真マジンガーZERO真マジンガーZERO

也希望能夠因為機戰V的關係能夠推出動畫啊..

RoboInfo上的介紹






Read more

2017年7月8日 星期六

2017年7月6日 星期四

2017年6月24日 星期六

2017年6月23日 星期五

Pokemon Go 第二世代畢業

IMG_2874

第二世代因為雷達成熟的關係,所以幾乎都不用蹲點就可以抓到大多數的怪,少了些農的成就感,取而代之的是孵蛋跟轉進化道具,像我這種算是比較少玩的,走的里程不多的話要完成就多花了些時間,後來是因為官方每連續七天一定會轉出進化道具讓我可以等那時候期待運氣,加上時間中間有一段個活動是兩公里但可以孵出寶寶,我在那時候孵出了無謂小子,聽牌聽迷唇娃好一陣子,才終於在最後孵出了迷唇娃宣告畢業。

IMG_2877IMG_2906

結束後沒多久道館就大改版,聽說會有機會從裡面可以拿到傳說的 Pokemon,總之就在觀察囉。

Read more
Related Posts Plugin for WordPress, Blogger...