發表文章

MAC必裝的Mac App軟體推薦

圖片
自從開始用Mac到現在,因為上一台在使用中常常出現小問題,也使用了四、五年時間,覺得又該升級我的生財工具,所以在去年底立馬訂了一台新的Macbook Pro 15寸 2018款,剛拿到新的Macbook pro 覺得多了一條touch bar 很不習慣以外,其實touch bar對我來說使用率還真的不高,大部分就是解鎖的touch ID、拿來播放音樂調大小聲跟調整螢幕亮度等等,其他的輔助功能我幾乎用不到,於是就覺得這條Touch bar給我濃濃的雞肋感,似乎存在感非常低,但我覺得很有可能是大部分軟體針對touch bar的支援度真的不高,以至於touch bar真的沒有什麼功能好用。算上這一台,這已經是我第四台Macbook pro 15寸了,從第一台還有吸入式光碟機到現在只剩下3個Thunderbolt 3 的USB-C孔,真的進步非常多啊!

首先,Mac除了會附贈作業系統OS,也可以免費升級OS以外,內建的iWork系列也是我覺得非常好用的軟體,iWork系列就包含了Page、Number以及Keynote,所以如果是買Mac來當文書機,你根本不需要安裝什麼東西就可以立即開始使用。如果從Windows剛換過來Mac系統的朋友,其實我個人覺得也沒有什麼障礙,所有的軟體都可以在finder找到,就等於Windows的「開始」了,至於常用快速鍵,你只要把Control鍵全部替換成command鍵(或稱蘋果鍵),基本上就差不多了,其他像是安裝軟體、移除軟體等等,Mac都比Windows簡單非常多。

第二個比較不一樣的是輸入法的切換,最新版的Mac OS輸入法切換是Control+空白鍵,以前是command+空白鍵,雖然改了好一陣子我偶而還是會不太習慣,再來如果你只是想快入中英文輸入法切換,很簡單你只要按一下「中/英」鍵,也就是平常在控制大小寫的那顆按鈕,這時你可能會問『那我如果真的想切換英文大小寫呢?』,別擔心,一樣是同一顆按鈕,只是你稍微按久一點就會切換英文大小寫了,再來我覺得第三個不一樣的就是軟體安裝與移除了。

Mac的軟體安裝有兩種,一種跟Windows很像要按一些確定、下一步等按鈕就可以完成安裝,另外一種你就是把你的App軟體拖曳到應用程式資料夾就完成了,這種方式真的超直覺又超沒有安裝感的,更別說移除應用程式了,在Windows上要移除軟體步驟非常多,但在…

[教學] 我們來用CRM吧!EspoCRM、vtigerCRM 與SuiteCRM

圖片
公司營運至今也有三、四年,一直以來都用很傳統的方式在整理檔案,並沒有採用任何CRM系統,常用客戶才會有登記在客戶的excel表裡,是的,我們用excel當作我們的CRM,就這樣用了兩年,雖然說沒有遇到執行上的問題,但是我總覺得我們一直在浪費這項資源,畢竟開發每一個客戶都要花很多時間,但是這些客戶開發後沒有再繼續維持的真的比想像中多很多,尤其是早期我們建置的網站,大部分客戶都還用到現在遲遲不肯更新,以至於我們跟客戶的緣分就僅止於一個網站開發的時間,緣分慎短,說來可惜。我們可以幫客戶的部分不光只是建立網站,還可以協助客戶拓展網路事業,透過網路我們可以幫你創造更多的價值,這才是我們團隊真正專業的地方。


如此這般的,我們來用CRM吧! 雖然我們擁有開發能力,但是一套專業的CRM勢必是要花許多時間才可以建立,雖然說近期公司專案上是有空檔,但是這空檔也不夠開發一整套完整的CRM,畢竟一套完整的CRM除了要可以掌握客戶名單以外,報價單、合約、發票等三大區塊也是基本必備的功能,另外還要可以發送email,如果報價單、合約可以透過系統產生並且自建流水編號,當然就會讓一切更有系統,搜尋也可以更加便利,其他功能像是服務或產品管理、日曆、會議或是銷售流程等等也是很重要的功能,這樣隨便列一列都可以開發出很多功能來,與其自己抽空開發,我想最快的方式還是尋找市面上的open source來解決問題,雖然不見得非常符合需求,但是至少是個不錯的開始!

透過Google,我找了好幾套open source的CRM來測試,像是SuiteCRM、VtigerCRM,還有一套叫EspoCRM,這些都是開源免費的CRM系統,我們就台一套一套好好介紹吧!


簡單易用的EspoCRM EspoCRM內建多國語言,不需要另外安裝語系包,內建簡體中文可用,但是沒有繁體中文,介面操作上非常簡單易用,是採用左右兩欄設計,算是一套簡單小巧又容易上手的CRM系統,功能部分有客戶(公司)管理、聯絡人(窗口)管理、潛在顧客、商機、案例、電子郵件、日曆、會議、通話、任務、文件、行銷活動、知識庫、信息流、用戶管理,大部分命名都很淺顯易懂,操作上也不太需要特地學習,左手邊就是功能選單,新增一律在右上角,內容上方是搜尋,下方則是列表,是一套我覺得如果我們家也要開發CRM應該也會朝這個方向前進,畢竟這套CRM的介面操作邏輯與我們現在幫客…

[跳坑] 超易懂RWD網頁前端攻略,最後1天,53折募資中

圖片
每年都我會花一點時間做一些瘋狂的事情,或者平常我不太可能會去做的事,而“募資課程”肯定會是今年的其中一項。

本次我與Yotta合作,開設了「超易懂RWD網頁前端攻略」,是我第一次在網路上開立網頁相關課程。在這之前我有在學學文創教過HTML相關課程,也有當過網頁技術家教的經驗,所以在教學這部分還算是有些經驗。除了在國發會當任過全國巡迴講師以外,也在良興電子、日盛銀行等企業當任RWD技術導入顧問,並開立RWD相關企業內部課程,當然我也在2014年出版了「好感度No.1的網頁設計:RWD不出槌法則,網站在任何裝置都完美呈現」一書。

由於第一次錄製課程,所以在Yotta的協助之下,我很快就進入軌道,了解線上課程募資的環節與步驟,當然對於課程的影片錄製上,Yotta也提供了協助,確保課程影片都在一定的水平上,讓各位上課時有一個妥善的線上學習環境,而我在短時間內也學會了錄音、影片剪輯等技巧,雖然還沒到非常爐火純青的地步,但是肯定可以讓各位感覺不出我是第一次錄製線上影音教學。尤其是錄音的部分,這幾天有請教了Amos老師,目前算是解決了錄音噪音過大的問題,當然有鑒於本人其實沒有薪水這種東西,所以如果要採購好一點的錄音錄影設備.......那就真的要拜託各位多多參與募資了,這樣我才會有經費錄製其他的線上課程啊XD 拜託各位了,剩下最後3天,保證物超所值啊!

本次課程的內容是完全適合新手,也就是完全沒有概念的朋友們,你不需要準備任何工具、器材,只要準備一顆想學習新知的心,以及你的電腦、雙手與網路,你就可以透過課程的安排從新手到老手,從菜鳥到資深,課程上會詳細講解常用的HTML與CSS,至於javascript部分會提到一些程式邏輯概念,但coding會用jQuery代替,以降低新手對javascript的稍高門檻的恐懼感,所以你不用擔心你的javascript會學不好,保證像雲在飄、頁面滑動等動畫對你來說不是什麼難事!

感謝在Line的網頁聊天群組中努力幫我推課程的朋友們,如果你想加入,我們有一個網頁設計師的日常聊天群組,請聯絡我 : ) 我會幫你加入這個Line群組,當然如果你有網頁相關問題我也歡迎你在「草監網路」粉絲團或「好感度No.1的網頁設計」社團詢問,我會盡全力努力回答你們的問題的 : )

超易懂RWD網頁前端攻略,最後1天,53折募資中,僅此一次機會,錯過可惜喔 : ) …

[徵才] PHP後端開發工程師

後記:已經額滿,有機會會在公布,謝謝各位參與。年輕、專業、新潮辦公模式      我們年齡平均皆在30歲左右,公司年齡4歲,                     
每年穩定成長,優於勞基法假期,重自律與自我成長             

近期有一個PHP後端工程師職缺釋出,我們喜歡從基礎開始培養,
陪你從菜鳥變成扛壩子,如果你對這個職缺有興趣,
麻煩請先填寫初次面試的問券
https://nowill.typeform.com/to/OTKx0P
如果你會codeigniter也可以跟我們說,因為我們是codeigniter愛好者,
如果你不是菜鳥,但也想加入我們,我們也非常歡迎你填寫問券

2010年開始,團隊就已經存在,經過公司清算拆分,             
2014年重新出發,而我們被拆分的原因是......                 
團隊績效、部門營業額皆勝過其他部門很大一截啊~~~~~   

我們從2010年至今致力在開發RWD跨平台網站,                   
協助政府、企業、設計師、工程師導入RWD設計
我們期許我的每個作品都可以與國外網站做比較,               
不讓台灣的技術、網頁成果落後於國際,至今                   
我們累積超過8個國外網頁設計相關獎項,                       
榮獲多次awwwards提名,成員也曾經榮獲FWA肯定

數位的遊牧民族,最潮的創業團隊營運模式 我們沒有固定上班據點,夥伴也散落全台各地,                 
我們靠網路集結我們的團隊,是徹底數位化經營的團隊,         
你不需要每日經歷每日上下班的通勤,你必須極度自律
公司期許夥伴都是T型人才,除了專長還要跨領域發展             

加入我們,你會擁有一群像家人般的夥伴                       
加入我們,你會發現上班原來還有另外一種方式                 
加入我們,你會發現原來做網站是可以如此的專業               
加入我們,你會明白原來工作也可以如此自由快樂               

作品介紹:購物車類作品:https://onlineshop.iprimo.tw/

看這篇立刻了解2018年網頁設計趨勢

圖片
近幾年網頁設計的技術發展真的變化萬千,就連網頁設計的趨勢也都年年有所成長,尤其是2018年網頁設計又到了另外一個里程碑,如果說你還不知道現在網頁設計最新的趨勢,那建議你趕快仔細閱讀惡補一下!

1. 純色的扁平化區塊設計已經退燒 近年來RWD設計從扁平化設計(flat design)到google 的material design,都是採用單一色彩設計較多,而且區塊設計也開始讓人覺得無趣,所以早期常看到的擬真設計、陰影、漸層等設計手法又開始回歸,但是跟早期用法相比還是有不同的地方,以icon來說,單一色彩的icon開始會出現兩、三種顏色做搭配,以按鈕來說以往採用單一色彩的表現,現在也開始使用漸層色彩與淡淡的陰影凸顯按鈕立體感,如此一來可以解決單一色彩的按鈕在某些佈局下容易被忽略或是誤認的情況。

範例網站:airbnbuber

2. 大膽的用色更容易加深印象 以往我們總是會用品牌色來當作整體網站的主軸,但是一但跳脫網站的主軸用色反而會讓網友有大吃一驚的效果,通常都可以留下不錯的印象,對於新品牌來說這樣的手法可能還不敢使用,但是對於已經耳熟能詳的品牌,這要的手法反而會帶來意想不到的效果。
範例網站:Dropbox
3. 破格設計打破無聊的佈局 在RWD網頁設計佈局中,因為常用的12欄格線系統,導致所有區塊都方方正正,排列雖然非常整齊,但久而久之也會覺得無趣,所以越來越多網站的內容開始會呈現破格排列,以添增內容排版上的趣味性,提供網友意外的驚喜,可以增加網友在網站上的瀏覽時間。
 範例網站:Bose

4. 微互動大升級,跟著捲軸一起動吃動 隨著捲軸追蹤技術的提升,以往只能在滑鼠移動或點擊時產生互動,但現在隨著你滑鼠捲動就可以安排內容區塊的進場、退場,以往的視差滾動只是圖片上的錯位效果,現在不但有錯位效果,還可以安排在頁面上製作有趣的動畫,例如火箭升空或九大行星環繞等這樣的效果,讓網友目不轉睛。

範例網站:invision

5. 影片背景運用 這裡說的影片背景通常影片長度都不會太長,而且也會墊一張大圖在影片下方,以免影片loading過慢時背景只有單一色彩的尷尬,許多用javascript或css3無法做出的視覺特效,可以透過影片的影音結合補強這點的不足。以前只能稍微滿足五感中部分視覺與聽覺,在網站與影片3D特效結合下,強烈視覺感官中又可以即時搭配配樂、音效,這樣的…

[心得] 原來有一種東西叫做大環境不好?

圖片
我很恐懼,越到年底越恐懼,想找朋友聊聊卻又不太敢,彷彿我好像出事才會上門一樣,但是我真的感受到我快沒柴燒了。

我:今年怎樣?
朋友A:爛透了......我一堆獎金都拿不到,因為沒有達到業績門檻......

換個場景、換個對象:

我:你今年應該過得還不錯吧!
朋友B:你在開玩笑吧!大家都過得很慘你不知道嗎?我們公司連員工旅遊都取消了!

沒想過幾天一堆朋友開始找我:
朋友C:分點案子來做做好不好!我快餓死了.......
朋友D:你那裡有案子嗎?我已經三個月沒開張了.......


今年第三季只能用一盤死水來形容工作室的業績,在前兩季我都還沒這麼有感,到了第四季我彷彿又遇到了一次金融海嘯襲來襲,一直持續往上成長的曲線就這麼活活的變成了懸涯,以至於我們一行人在懸崖邊逗留了片刻的光陰,一直望著對面看看會不會突然出現一道彩虹可以讓我們當作空橋一般的越過這片懸崖。當然我知道經營公司其實是很現實的一件事,所以就算要死,我也會拼命地、不斷地垂死掙扎著,努力做到不讓夥伴們受到任何波擊,因為我始終相信『危機就是轉機』、『到了谷底你只剩下反彈這一條路』。

好在我在第三季初期煞了個車,但是煞車有點太晚,所以整間公司還沒有徹底轉型完畢,但是我始終相信依照我們速度、品質,就算是髮夾彎我們也可以平穩的、帥氣的完美過彎,畢竟我擁有著一流的團隊,每一個都是一路我看著走過來的弟弟妹妹,教學相長,這一家人就這樣一路跟我展開奇幻的公路冒險,最老的算一算也十二個年頭超過了,我們只是工作室登記的晚,所以在年輕的活力下,我們有著老成的心智,這也是為什麼這一路下來我們總是能交出漂亮的成績單的主因。

產品研發是沒有這麼快的,我也非常明確知道這點,也非常清楚產品要小型化到可測試的程度,這就是一種火花般的刺激,我很訝異我們居然沒有任何爭吵,但一起思考、煩惱這件事肯定少不了,但我有點不能接受內部產品開發速度過慢這件事,尤其是現在生意已經不太好的情況下,對大家來說請假休息還比產品研發重要,作為一個領導人我看在眼裡,心裡卻很想哭,因為我不知道該怎麼做才能讓速度變的跟客戶的專案一樣快,如果客戶的專案製作速度是高鐵,那我現在內部研發的速度就好比普通車,每站都停以外還嚴重誤點,深怕大家不知道這些產品是我們機會,髮夾彎沒彎過,那真的就是大家一起到海裡游泳了,房車就會變成一艄扁舟,萬一載不了這麼多人,那就真的只能跳船了......,…

[教學] Vue js快速上手 (七) 改變樣式的魔術棒 v-bind

圖片
離上一篇的for loop又隔了一段時間(擦汗),除了在思考這邊要說什麼以外,也是真的年底到了,忙了一堆不知道在忙什麼的事,不過我一直都沒有忘記我的教學還沒寫完......我想,應該也是我覺得我太忙了,所以我才每年都沒參加鐵人賽吧(搖頭)。

如果你會做網頁(我是指前端的部分),那你一定知道HTML一定要搭配一個叫CSS的東西才能讓版面變漂亮、變好看,問題是我如果我用了vue.js,我要怎麼改變我的配色?比方說要提醒的東西就要上紅色、警告的東西就要上黃色、只是一般普通訊息就要上綠色的這種紅綠燈訊息,我是要怎樣才能在同一個按鈕或同一個Div內透過vue.js的運算就做到更換的效果?

這個時候我就不得不來說一下v-bind這個東西了,v-bind是vue.js裡負責改變配色、大小等等所用的屬性,也就是說v-bind就是針對css而存在的屬性,而這樣的屬性會有什麼樣的屬性值呢?再講屬性值之前,我們要來認識一下v-bind的副屬性,也就是v-bind:style與v-bind:class!

如果你對css很熟,你一定會知道所謂的行內樣式style="OOXX",還有id與class樣式,當然由於id有不重複性,為了讓css可以更有效率,現在都會提倡大家用class,也因為此,所以只有v-bind:class,這個部分是比較特別的,可能稍微需要用一下大腦的記憶體。

首先我們先來看看v-bind:style怎麼用,其實用法還挺簡單的,屬性值裡面就直接寫行內樣式,但是樣式的數值,比方說顏色或文字大小,我們就可以設定在vue的data,這樣我們就可以直接帶進畫面,範例如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <div v-bind:style="{ color: myColor, fontSize: myFontSize + '…