[教學]如何解決VMware Fusion安裝好後,出現錯誤訊息 Could not open/dev/vmmon:管線破裂

問題

原本是想寫如何在Mac的VMware Fusion安裝CentOS,但我發現這樣跟上一篇「[教學]如何在VirtualBox安裝CentOS 7」幾乎差不多,顯得有點無聊,所幸在安裝的過程中出現了一個問題,讓我可以做個紀錄。

在VMware Fusion安裝的時候,其實還蠻簡單的,就一開始選擇 Create a custom virtual machine 建立一個新的客製化虛擬機器:

選擇 Create a custom virtual machine

接著選擇你想要安裝的OS作業系統,在這邊我選擇Linux CentOS 7 64 bit:

選擇安裝CentOS 7 64-bit

接下來就是不斷的按繼續、繼續的過程,最後選擇虛擬機要儲存的位置與名稱就結束了。

接下來虛擬機器就會啟動,然後你可以選擇你要安裝的光碟映像檔,然後嘩拉~

Could not open .dev/vmmon

蛤?什麼管線破裂?這是什麼意思,完全看不懂啊!

解法

解決這個問題的方法其實很簡單,只要打開Mac的「系統偏好設定」,切換到「安全性與隱私權」,然後在下方你會看到VMware被系統阻擋起來的訊息,解開右下角的鎖頭後按下允許,重新啟動VMware Fusion,你就會發現問題解決囉!

安全性與隱私權

[教學]如何在VirtualBox安裝CentOS 7

前言

大多數在本機開發的狀況下,很少會用虛擬機器安裝一整台伺服器,但最近遇到有客戶需要我們直教交付整台VM (virtual machine 虛擬機器),索性就來紀錄一下要如何在自己的電腦上建立整台虛擬機器的LAMP (Linux + Apache + MariaDB + PHP7) 環境的教學吧!

第一步下載VirtualBox與CentOS

市面上有許多虛擬機器的軟體,像是VMware、VirtualBox 都是,本次我們採用 VirtualBox作為我們虛擬機器的主體,原因沒有別得,只因為他是免費的,支援的平台也很多(Windows與Mac OS都支援),而且取得也很容易,只要上VirtualBox官網下載適合你的作業系統版本就可以了。

下載VirtulBox軟體並完成安裝

由於安裝過程都還算容易所以在這裡就不詳細說明了,原則上就是一直按下一步就差不多了。

接著我們要來下載CentOS作業系統,以Linux Server來說,比較常見的會是像CentOS、Ubuntu,我們這裡採用CentOS主要原因是以安裝後的檔案大小來說CentOS會是比較小的,可以說是麻雀雖小但五臟俱全的的一個選擇,所以我通常都會選擇採用CentOS來做Server的作業系統。

跟 VirtualBox 的步驟差不多,只要前往CentOS下載作業系統的iso檔,等一下我們在建立虛擬機器的時候才會用到,本次我要安裝的是CentOS 7 的x86_64版本,只要點擊一下檔案名稱就會直接下載iso檔了,iso檔是光碟映像檔的意思,簡單來說他就說iso就是虛擬光碟,取得iso檔之後,我個人會建議把iso檔放在桌面,等等安裝時會比較好找一點。如果你想要安裝新一點的CentOS 8 也是可以的,但在作業系統安裝上可能介面上會稍微有點不同,不過大致上安裝完作業系統後的步驟也是差不多的。

下載CentOS iso檔

第二步建立虛擬機器

安裝完VirtualBox之後,打開後你會看到一個虛擬機器管理員,如果你不喜歡英文介面,VirtualBox是可以切換成中文介面的,因為我本人是用Mac OS系統,在Mac上只要到左上角,選擇喜好設定,就可以在介面裡找到語言的選項,接著在選擇正體中文,你就會發現介面親民多了。

VirtualBox 如何切換中文語系

回到虛擬機器管理員,我們按下新增按鈕,開始建立新虛擬機器。

VirtualBox 管理員介面

你可以替你的虛擬機器取一個你覺得不錯的名字,在這邊我設定為Demo,接著機器資料夾位置我通常都會選擇預設值,也就是不做任何修改,下一欄是作業系統的類型,因為我們要安裝CentOS所以選擇Linux,接著你會發現版本的欄位裡面沒有CentOS,在這裡我們直接選用Red Hat (64-bit) 即可。Red Hat 也是一款Liunx系統,是目前所有Linux作業系統中組織最大的一個團體,改天有空再來說說Red Hat的故事。選擇完成後就可以按下「繼續」這顆按鈕囉!

安裝CentOS的設定方式

接著就是設定這台虛擬機器的硬體設備部分,原則上就是記憶體與硬碟的大小,通常記憶體我都會選擇預設值不做調整,所以我會持續按下「繼續」這顆按鈕,而硬碟部分我也會選擇預設值「立即建立虛擬硬碟」,接下來如果你是個人使用,建議你選擇預設值VDI格式,會比較符合VirtualBox的使用,但如果你有要換到其他虛擬機器的軟體,例如VMware,我會建議你改選VMDK格式,在這裡我選擇VMDK格式。

預設建議採用VDI格式,若有要更換虛擬機器環境則建議採用VMDK格式

接下來我會選擇預設值「動態分配」讓系統自動分配硬碟大小,以免暫用太多我自己電腦的硬碟資源,但如果你想要運作快速一點,直接選擇固定大小會有助於提升虛擬機器的硬碟效率喔!最後硬碟大小原則上如果沒有特別需求,一樣採用預設建議大小即可,最後你就可以按下「建立」按鈕,結束新建立虛擬機器這一回合了。

安裝CentOS作業系統

連續點擊兩次剛剛建立好的新虛擬機器(我的叫Demo),雙擊後虛擬機器就開機了,因為沒有OS可以運行,所以VirtualBox會問你要不要掛載iso,這時選擇先前放在桌面的CentOS 7 的iso,選擇「啟動」,就可以開始進入CentOS的安裝環節了。

選擇CentOS的iso檔

接著選擇「Install CentOS 7」,在這樣的文字介面裡你只能用上下左右來操控選項,當前的選項會是白色的,確定選在「Install CentOS 7」之後按下enter,你就會看到畫面上正在執行安裝程序了。

安裝CentOS

接下來你會進入CentOS的圖形安裝介面,一開始可以選擇語系,一個一個找太麻煩了,所以你只要在搜尋框裡面輸入ch你就會找到中文的選項,選擇後就會出現「繁體中文(台灣)」的選項。在安裝摘要的部分,軟體選擇預設是最小安裝,在這邊我就不做修改,這樣一來就只會安裝CentOS的核心系統,缺點就是你需要什麼功能或軟體都要另外安裝。再來是安裝目的地,點選安裝目的地之後,基本上也只有一顆硬碟可以選,所以確定選取硬碟後就可以按下「完成」,接著就可以「開始安裝」。

CentOS 安裝介面
選擇硬碟之後,點選左上角的完成

點選開始安裝之後你會進入下一個畫面,在這個畫面裡最重要的是你需要設定Root的密碼,Root是Linux系統的超級管理員,所以你必須設定好Root的密碼,這樣到時候你進入系統才不會不知道密碼是什麼,至於用戶你可以先不建立,之後再用Root去建立新用戶。安裝好之後記得按下重新開機,這樣我們才能進入CentOS系統裡。

選擇ROOT密碼
設定ROOT密碼

重開機之後你就會進入終端機的世界,是的,一個完全沒有圖形介面的世界,如何登入呢?因為我們剛剛沒有建立用戶,所以帳號就直接是root了,密碼則是剛剛安裝的時候設定的那組密碼,再輸入密碼的時候畫面不會有反應,請不要擔心,就正常的輸入按下enter就好。那要怎麼關機? 其實你只要在虛擬機左上角按下X,VirtualBox就會問你是不是要關機,反正他不是真實的電腦,不用怕突然關機會整台壞掉啦!所以我們先將機器關機先,我們要先處理另外一個硬體問題。

設定網路卡

因為我們是最小安裝,所以我們的系統其實很笨,連預設的網路卡都不會啟動,所以如果你的虛擬機器是關著的,請你點兩下打開它,然後選擇第一個選項或繼續發呆10秒,你就會進入作業系統裡,接著輸入root以及你剛剛設定的密碼,到這裡我們就登入系統裡了。

你可以嘗試輸入

ping 8.8.8.8

你會發現畫面上顯示「Network is unreachable」,意思就是連不到網路,所以接下來我們要設定預設網路卡讓我們的網路可以正常連線。你只要自畫面上輸入

nmtui

並按下enter,你就會進入一個很精簡的藍色介面,所謂的nmtui是指NetManager - TextUI,也就是說這是管理網路的文字介面,接下來我們要選擇第一個選項「Edit a connection」,來設定我們的網路卡。

NMTUI介面,選擇第一個Edit a connection

接下來你會到左右分割畫面,紅色底的意思代表被你選取了,左邊這欄是你目前全部的網路卡,你有幾張你就要設定幾次,所以右邊請選edit進入設定。

在NMTUI裡面設定網路卡

確定你的IPV4與IPV6都是Automatic,之後透過上下鍵移到Automatically connect 並按下空白鍵來啟動自動連線網路,接著移到OK按下enter,然後選擇右側的Back,接著移到最下面的Quit再按右鍵會到ok,按下enter之後,你再從重新輸入ping 8.8.8.8就會發現可以連到外部網路了,如果你想停下測試只要按下control+c就會停止了。

一般來說來說這邊我們只要輸入ipconfig指令就可以查到我們虛擬機器的本機ip,但由於我們是最小安裝,所以裡面連ipconfig都沒有呢!這下子怎麼辦才好呢?別擔心,本篇教學真的佛心超仔細,所以接下來我們要進入軟體安裝環節了,接下來我們會採用yum來安裝軟體,所以我們先更新yum,由於我們是用root,所以指令前面的sudo其實可以省略,但如果你是用其他帳號,建議還是要加上sudo會比較好一點。在終端機內輸入以下指令:

sudo yum update

中間會詢問你需要OOOM空間可不可以等等的訊息,請都直接輸入Y,更新完成後,接著我們來安裝網路工具

sudo yum install net-tools

安裝的過程中還是會詢問你需要這些硬碟空間可以嗎?一樣還是輸入Y,安裝完全程後,輸入以下指令你就可以取得你的虛擬機器ip配置了。

ifconfig
輸入ifconfig查看本機ip

當你看到你的ip是10.0.2.X的時候,就代表你的虛擬機器使用的網卡是虛擬的(廢話),我們的目標是讓虛擬機器取得192.168.x.x的這種ip,這樣我們才可以連進去Server裡,所以讓我們關閉虛擬機器,回到虛擬機器管理員,在虛擬機器上按右鍵,將網路卡改為橋接介面卡,因為我的電腦(真的Mac電腦)是採用wifi網卡,所以在這裡我也選擇wifi的選項。

改用橋接介面卡,讓虛擬機器取得實際內網ip

再次啟動機器輸入root與密碼,接著再輸入ifconfig,你會發現你的虛擬機器已經可以取得192.168.x.x的內網ip了!接下來我們就要進入Apache 、MariaDB 、 PHP7的安裝環節了!

安裝Apache

請確定你的虛擬機器現在是開啟的,你也有輸入過帳號root與密碼,現在也正在東端機的畫面上,確定無誤之後請輸入以下指令:

sudo yum install httpd

過程中一樣會問你安裝將會使用到多少檔案空間大小等等的問題,請一律按Y一直到出現Complete!字樣為止。

接下來我們先啟動Apache:

sudo systemctl start httpd

接著我們設定當CentOS作業系統啟動時,Apache也會跟著自動啟動:

sudo systemctl enable httpd

到這裡我們就設定完Apache了,撇開指令不談是不是其實還蠻簡單的(笑),所謂的systemctl 就是系統控制system control的縮寫,而httpd則是http daemon的縮寫,簡單來說就是執行http傳輸的軟體,看到這裡有沒有覺得這些指令其實還蠻白話文的,沒這麼嚇人了?

如果你想知道你現在Apache運行的狀態只要輸入以下指令:

systemctl status httpd

當你看到畫面上有一個綠色的active(running) 就代表Apach運作正常囉!

Apach Active (running)示意圖

啊如果不是綠色的active怎麼辦?聽說重開機治百病,所以重啟的指令如下:

systemctl restart httpd

安裝MariaDB

安裝MariaDB資料庫也很簡單,只是中間步驟有點繁瑣,沒關係我們初學者,我們一步一步慢慢來,首先先輸入安裝MariaDB指令:

sudo yum install mariadb-server mariadb

中間一樣會問你需要多少硬碟容易可不可以,一樣輸入Y按下enter,完成後一樣會看到Complete!字樣。接下來啟動MariaDB:

sudo systemctl start mariadb

然後開始我們有點繁瑣的資料庫初始化流程,請輸入初始化指令:

sudo mysql_secure_installation

第一個問題是問你有沒有設定root密碼,這裡的root是資料庫的root密碼,因為我們還沒設定所以直接按下enter即可。

第二個問題是在告入你設定root密碼比較好所以請輸入Y,然後設定你的資料庫root密碼,輸入密碼時畫面不會有任何改變,請正常輸入再按下enter,然後再次輸入一次密碼再按下enter,並請妥善記得這個密碼。

後續問題如果你不想詳細了解,那你就一路輸入Y輸入到安裝完成,然後直接跳到下一個指令,如果你想了解就繼續看下去。

第三個問題是問你是否要刪除匿名使用者,一般來說資料庫都不會開放給外部人員,所以請輸入Y。

第四個問題是詢問你是否在本地才能登入root管理員,通常為了安全性我們不太會開放遠端,所以也請輸入Y。

第五個問題是詢問你要不要刪除測試資料庫,基本上測試資料庫對我來說一點用處都沒有,還很佔空間,所以我也會繼續輸入Y。

第六題他是詢問要不要現在重新讀取權限表,因為剛剛有設定root密碼,所以我還是會繼續輸入Y。

以上你就完成了繁瑣的MariaDB初始化,接著我們來設定當CentOS啟動時,MariaDB也會跟著啟動:

sudo systemctl enable mariadb

到這邊你就完成了MariaDB的安裝了。

如果你檢查MariaDB目前的狀態:

systemctl status mariadb

一樣你會看到綠色的active (runing),萬一不是這個狀態怎麼辦?通常重新啟動也可以治百病:

systemctl restart mariadb

安裝PHP7

在安裝PHP7之前我們需要做一些準備工作,原因是CentOS內建的yum套件軟體只有到php5.4啊!所以我們需要先安裝一下軟體補充包,我們才可以安裝php7,請在終端機輸入:

yum install epel-release

EPEL (Extra Packages for Enterprise Linux) ,基本上就是一個額外的Linux軟體包,接著我們要安裝Remi的軟體包,這樣才可以把PHP7抓回來安裝:

yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm

接著因為CentOS預設是安裝php5.4,所以我得先把預設的部分關掉,為了關掉我們還需要安裝一個管理包:

yum install yum-utils

然後關閉php5.4:

yum-config-manager --disable remi-php54

然後開啟你需要php7 版本:

yum-config-manager --enable remi-php74

在上述指令中的php74是指php 7.4,所以如果你要7.3版本就改成73就可以了,其他7的版本也是同樣道理。接著終於可以安裝php了:

yum install php

中間一樣會問你安裝需要這些檔案大小等等的問題,請一率輸入Y,一直到看到Complete!字樣為止。如果你想知道你的php安裝有沒有成功,你可以透過查詢php版本指令來檢查:

php -v
上圖為安裝php7.2之後輸入php -v 出現的版本號

接著php本身我們就有一些常用的套件要安裝一下,例如像是GD函式庫等等,以下就是常用套件的安裝指令:

sudo yum install php74-php-fpm php74-php-gd php74-php-json php74-php-mbstring php74-php-mysql
sudo yum install php74-php-mysqli php74-php-mysqlnd php74-php-xml php74-php-xmlrpc php74-php-opcache
sudo yum install php74-php-cli php74-php-common php74-php-pecl-zip

上述指令一樣php74改成你要的版本,因為我安裝的是php7.2所以我都是「php72」-開頭,如何知道你現在安裝的套件有哪些?只要輸入以下指令查詢即可:

php74 --modules

如果上述指令沒有接上版本就會列出全部版本的php套件。

接著我們要啟動php服務

sudo systemctl start php74-php-fpm

與上面相同,我們一樣設定開機時php會自動啟動:

sudo systemctl enable php74-php-fpm

到這邊基本上能裝的我們都裝好了,但很可惜的是你用本機(就是我的mac你拿來上網google的那個)瀏覽器,輸入192.168.x.x,你會發現你還是看不到網站,一般來說Apach裝好都會有一頁testing123的預設畫面,那為什麼你還是看不到呢?那是因為你被防火牆擋住了!

解開防火牆

要連到網站我們需要開通http服務,如果你有要用ssl就還要開通https服務,所以請輸入以下兩個指令:

sudo firewall-cmd --add-service=http --permanent
sudo firewall-cmd --add-service=https --permanent

輸入完後如何確定你的指令有成功?我們可以透過查詢來成功:

firewall-cmd --list-all --permanent

沒有意外你會看到開通的服務有 http 、 https 、 ssh 等,以上指令後面接上「--permanent」是代表永久有效的意思。

防火牆有開啟的服務列表

最後記得要重開防火牆:

 service firewalld restart

然後你就可以用你電腦的瀏覽器開啟192.168.x.x看到tesing123的預設畫面了!

使用FileZilla傳輸檔案

由於防火牆已經有開啟ssh,所以我們可以用sFTP模式來傳輸檔案,主機位置就是你的虛擬機器ip 192.168.x.x,然後帳號基本是root 如果有你開其他帳號的話請改用其他帳號,再來密碼就是你登入CentOS的密碼,連接埠號請記得設定22,如果是用站台管理員,協定且記得選擇sFTP模式。

採用方法一的快速連線或是站台管理員模式都可以

連線的過程會詢問是否信任主機,因為是自己的主機而且還在內網裡,所以就大膽的信任下去吧!接著網站預設的根目錄位置是在:/var/www/html/,只要切換到這裡就可以把檔案放上去囉!

取代PHPMyAdmin的Adminer.php

習慣用mysql的工程師肯定都用過phpmyadmin這個資料庫操作介面,但因為他實在太肥大了,運作效能也沒有說非常好,所以從十年前我就不再使用phpmyadmin,而是改用adminer.php,他非常的輕薄短小,卻支援多款資料庫,也有多國語言設計,重點是他只是一隻php檔案,只要丟上server你就有跟phpmyadmin一樣的功能,剛安裝上去的adminer.php介面非常陽春,但如果你想要前衛一點的介面,adminer.php官網也有一些已經設計好的css,只要下載下來與adminer.php放一起就會從很陽春的介面變成很前衛的介面了!最重要的事......你跟終端機介面相處的時間就變短了很多呢!

按此前往Adminer.php官方網站

最後測試

由於先前我們已經設定好只要虛擬機器重新開機,Apach、MariaDB與PHP都會自動執行,所以讓我們來做最後的測試,看看重開機之後系統會不會自動執行,讓我們用瀏覽器就可以直接瀏覽adminer.php,在終端機下CentOS的重開機指令:

reboot

當系統重新開機,一樣會到帳號登入畫面,你不需要登入root帳號,請直接用瀏覽器打開虛擬機器的IP 192.168.x.x,由於我們只有放adminer.php在網站根目錄裡,所以請在後頭加上/adminer.php,即完整網址為http://192.168.x.x/adminer.php,你應該就會看到以下畫面,到這裡你就可以把你的網站放到測試機上了!

adminer.php 介面

如果你打開很不幸的看到的是php程式碼,請不用擔心,主要的原因是你的Apache不知道.php結尾的檔案要用php來執行,所以你需要在httpd.conf文件新增幾行設定就好。請先輸入以下指令來開啟httpd.conf檔:

vi /etc/httpd/conf/httpd.conf

然後找個你順眼的地方,比方說最上方或有個地方是寫file的地方,找到之後按下i啟動編輯模式,輸入以下內容:

<FilesMatch \.php$>
    SetHandler application/x-httpd-php
</FilesMatch>

輸入完成後按下esc鍵,然後輸入:接著打「wq!」就可以儲存並離開了。

由於我們改了Apache的設定,所以不要忘了要重啟Apache服務:

systemctl restart httpd

然後你就可以重新整理你的瀏覽器,你會發現原本出現php程式碼的問題已經解決了,現在可以正常執行php程式了。

多站台如何處理?

現在我們一台虛擬機器了,也就說我們可以把虛擬機器變成虛擬主機放很多個網站在裡面,通常只需要放一個網站的話是不太會接觸到接下來的設定,但如果是多站台或有SSL需求的話就會需要多站台設定了這個部分了,那一台虛擬機器怎麼變成多站台呢?這部分我們就要不同的連接埠來處理了,預設http走的是80port,所以如果要放其他站台,我們可以改用81port、82port,你高興的話101port也可以,只要其他軟體沒有佔用你都可以使用。

要做到採用其他port這件事我們需要去改Apache的設定,在終端機裡我們通常都用vi編輯器做來修改文字的工具,所以請在終端機內輸入:

vi /etc/httpd/conf/httpd.conf

然後用上下箭頭切換到Listen 80,這裡是設定連線的連接埠,通常http是走80 port,如果你想要新增其他連接埠,請在Listen的下一行按 i 進行編輯,你可以在Listen 80下方多一行Listen 81,但你也可以選擇全部使用80 port,之後再用server name做為區別。

新增監聽的連接埠 port

接著往下一直到這份文件的最底部,新增以下內容:

<VirtualHost *:80> //這裡是設定連接埠
    ServerName demo2 //這裡是網站的網址,所以也可以是www.a.com
    DocumentRoot /var/www/html/demo2 //是網站根目錄
</VirtualHost>

最後按下esc鍵,輸入:接著打wq!儲存並離開httpd.conf檔。

由於我們修改的Apache的設定,所以請重新啟動Apache讓設定生效:

systemctl restart httpd

當然如果你有用到其他連接埠,例如上面說的81 port,也要記得在防火牆打開81 port,並且重啟防火牆:

sudo firewall-cmd --add-port=81/tcp --permanent 
service firewalld restart

如果你的port不是81,請修改上述第一行指令的「port=81」這裡的數字。

補充:常用系統指令

  1. 開機:點兩下虛擬機或打開開關
  2. 關機:halt 或 poweroff 或 shutdown -h now (最後這要root才能用)
  3. 重開機:reboot
  4. 切換資料夾:cd 路徑,範例:cd /var/www/html
  5. 上一層資料夾:cd ..
  6. 列出當前資料夾檔案:ls 或 ls -all (詳細列出全部資料)
  7. vi編輯器:輸入vi 檔案名稱,在vi 中 a或i為修改該行,esc為跳出編輯模式,輸入:才可以打其他指令,以下為其他指令:wq!為儲存離開,單純儲存是w,單純離開請輸入q,強制離開為q!
  8. 硬碟使用量查詢:df -h
  9. 查詢前幾名使用資源最多的程式:top
  10. 查詢記憶體用量:free
  11. 目前正在執行中的程式:ps 或 ps -aux
  12. 強制停止程式:kill PID名稱,例如:kill 101,PID值可以用ps去查
  13. 啟動服務:sudo systemctl start 服務名稱
  14. 停止服務:sudo systemctl stop 服務名稱
  15. 重新啟動服務: sudo systemctl restart 服務名稱
  16. 查詢服務狀態:sudo systemctl status 服務名稱
  17. 常用服務名稱:httpd.service 或 mariadb 或 php74-php-fpm.service

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

超易懂 RWD 網頁前端攻略
超易懂RWD網頁前端攻略

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

本次我與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折募資中,僅此一次機會,錯過可惜喔 : )  想獲得更多課程資訊請洽:http://bit.ly/2qWxp28

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

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

1. 純色的扁平化區塊設計已經退燒

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

範例網站:airbnbuber

搜尋框有淺淺的陰影效果
icon再也不是單一色彩,而是會透過色彩突顯重要部分

2. 大膽的用色更容易加深印象

以往我們總是會用品牌色來當作整體網站的主軸,但是一但跳脫網站的主軸用色反而會讓網友有大吃一驚的效果,通常都可以留下不錯的印象,對於新品牌來說這樣的手法可能還不敢使用,但是對於已經耳熟能詳的品牌,這要的手法反而會帶來意想不到的效果。
範例網站:Dropbox

大眾對Dropbox的印象都是水藍色,但是現在卻可以很百變

3. 破格設計打破無聊的佈局

在RWD網頁設計佈局中,因為常用的12欄格線系統,導致所有區塊都方方正正,排列雖然非常整齊,但久而久之也會覺得無趣,所以越來越多網站的內容開始會呈現破格排列,以添增內容排版上的趣味性,提供網友意外的驚喜,可以增加網友在網站上的瀏覽時間。

利用產品原本的造型創造出圓角效果,並且透過錯位的排版增加內容的吸引力

 範例網站:Bose

4. 微互動大升級,跟著捲軸一起動吃動

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

華麗的視差滾動效果可以讓網友目不轉睛

範例網站:invision

5. 影片背景運用

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

將影片襯底,透過canvas製作數字遮罩,創造出不一樣的影片襯底效果

範例網站:Audi Q2Microsoft Surface

6. 字型運用多變性

文字再也不是單純只是出現在畫面上,它也可以是遮罩或是有不同的錯位效果,甚至是一個很好做破格設計的元素,不再是單純呈現內容而已,也可以有互動的可能性。

將文字裸空、描邊,營造出不同的文字效果,加上墊底圖與破格設計可以將死板的網頁排版變成吸睛的動態海報

範例網站:benmingo

7. 手機載具螢幕加大

由於硬體零件成本降低,再加上觸控裝置學習曲線較低,所以上網年齡層開始上升,再者長時間上網使用螢幕造成視力容易受損,所以裝置的介面越來越大,以手機來說iphone最後一隻小螢幕手機目前是iphone SE,同iphone5系列,螢幕尺寸是4寸(320*528points,解析度1136*640),但根據statcounter的統計,台灣目前手機最流行的解析度是360*640points,約有45.45%,目前iphone 8 的解析度已經到了414*736points(解析度1242*2208),因此在設計上開始可以添加更多有互動性的內容,而不該繼續侷限在小螢幕只能很刻板無聊的設計,而且行動載具上網比例遠高於桌機,所以在網站規劃上,思考的出發點就絕對要以行動載具為主,而不是傳統桌機電腦。

8. 有趣的粒子效果風格

早期只要遇到動畫幾乎都適用flash (或現在叫animate)來製作,當然在現在已經不適合這樣製作動畫,除了直接把動畫做成影片以外,我們也可以考慮使用css來做逐格動畫,或是使用javascript撰寫動畫程式,例如可以使用javascript製作粒子效果來與滑鼠互動,你可以發現這樣效果通常都可以帶來很吸睛的互動效果。

範例網站:MASAYUKI DAIJIMAbacter

9. 向量插畫風格動畫

由於向量格式的圖片開始可以直接用在網站上,所以網站上插畫的運用也開始變多了,也因為是向量格式,所以可以符合RWD的運用,因此向量格式的動畫也開始為之流行。但這樣的動態通常都不會太長,而且考量檔案大小,其實不一定會直接用svg格式來製作動畫內容,他有可能是jpg或png搭配css sprite,或直接使用gif製作,但整體插畫風格會是比較偏向量風格。
範例網站:inturnbaunfireawesomemotive
以上九點就是2018年主要的網頁設計趨勢,如果你前幾年都沒跟上,你會發現現在的網頁設計跟兩三年前相比已經有點不一樣,但是跟五年前相比,改變程度的差距已經開始變大了,任何一個網站我覺得使用3~5年不等就要考慮重新設計,原因是數位世界改變其實非常快,每年網頁相關技術還在不斷發展中,五年的時間其實已經可以造成開發技術的嚴重落差,就連視覺設計風格上也會有產生落差,所以如果你的網站已經用超過五年的朋友,尤其是還沒有跟上RWD響應式設計風潮的朋友,建議您考慮一下,重新設計一個全新符合現代的網站吧!搶救回你無形中失去了行動市場!

我在網站製作流程中各個環節會用到的工具

一個網站的製作流程,基本劃分就會專案接洽、網站企劃、視覺設計、前端工程、後端工程與測試上線這幾個環節,而在各個環節裡又會使用不同的工具,雖然可以找到在介紹前端的工具,或是介紹企劃的工具,但是將每個環節所需要的工具整理在一起的文章我個是還蠻少見的,喜歡實驗新工具的我而常常裝了一堆東西或註冊一堆東西之後,發現沒有推薦文章來的好用就刪除了,經過了這麼多年,以下就來介紹我還裝在我的mac上或是實際上我們公司有在使用的工具吧!

專案接洽

在這個環節裡主要是一些文書處理軟體,比方說Word、excel、Power Point或Page、Numbers、Keynote,除了這些常備文書軟體外,我們公司還有用:

Redmine - 專案管理系統,是免費的Open Source,可以分派問派、追蹤問題處理進度,並且可以統整文件與檔案,對專案進度頗重要的甘特圖也有內建功能對應,對我們公司的工作流程來說非常重要的,就連薪資我都是用這個做記錄。

OmniPlan - 這是我個人最近再用的單機專案管理軟體,Mac only。我會用它的主因是為了他的甘特圖,建立快速而且乾淨、清楚,但除此之外的其他功能我都沒在用,所以其實有點殺雞用牛刀的感覺。使用頻率不高,除非我要畫甘特圖,不然幾乎用不到。

網站企劃

Xmind - 對於資料整理、腦力激盪來說,我覺得Xmind真的非常有用,他可以用看似零散其實很有條理的mind map把資料整理起來,透過這樣整理的過程資料就可以變成有用的資訊,也可以讓我們比較全觀的看整個專案或是某個想法,可以避免見樹不見林的情況,而除了全觀以外,也可以細看某一個分支想法的細節,真的是可以讓你見樹又見林啊!mind map 這東西我從高中就開始使用了,還記得是某節輔導課輔導老師教的,要我們用mind map來表達我自己,我大概就是從這個時候開始才認為自己想走資訊吧,之後因為我很不會唸書,更不會背書,我就異想天開的想說不知道mind map能不能拿來背書......沒想到真的可以,成績也一路從吊車尾變成拿獎學金,厲害吧!還不趕快試試看用免費版本的Xmind來畫mind map!免費版其實就很夠用了,要付費也很ok喔!

Balsamiq Mockups - 這是一個網站很醜、軟體介面很醜,但是對於不會設計軟體的專案或企劃來說,非常容易上手的原型企劃工具,只要拖拉三兩下就可以完成一頁的企劃,缺點是他無法設定連結,所以我只有要做三個頁面以下或想快速表達我的想法時才會使用它,算是對專案溝通上非常便利的一個工具。

Mockplus - 這其實像是Balsamiq Mockups 的加強版,是對岸同胞製造的,有免費與付費版本,因為是對岸製造,所以對英文充滿障礙的朋友們就可以使用這個了,不但網站比較好看、軟體介面也比較好看,使用上手程度其實是差不多的,不過我個人使用的頻率比Balsamiq Mockups 低很多,原因在於Mockplus的功能強很多。

Axure rp - 我印象中我是從4.0版本開始用起,現在已經到8.0了,對於RWD響應式網站的繪製更加的便利、成熟、好用,不管是新手還是老手都可以用得非常開心,是用來建立wireframe的好幫手,我們家也是使用Axure rp 來建立wireframe與客戶核對規格、資料與功能,並且再透過wireframe與內部人員溝通,由於已經有畫面與資料,所以在內部溝通上問題就減少了很多,不用依靠彼此的想像來做討論,可以減少彼此誤會而產生糾紛的情況,一路用下來真的都很不錯!有些人可能會覺得用Axure rp 產出的html又不能延續使用,所以直接請前端來做wireframe不就好了,但是對我來說wireframe其實就像大樓建造時的藍圖,藍圖在討論過程中修修改改的,你總不能叫工程師直接來做吧?這樣工程師光處理這些不確定是否真的是修改的修改就可以忙到吐血了,怎麼集中火力做出品質好的前端?而且我們家人力非常精簡,所以這種算是核對內容的任務就該由專案或企劃來完成,讓工程師就專心在實際開發上,心無旁騖才能做得更好。但是如果今天是做擬真一點的prototype那我就會覺得可以由前端工程師來協助,原因在於prototype通常都很接近最後實際的成品,中間修改的服務不會像wireframe這麼大,對相較之下對於前端工程師的負擔就不會這麼重,也不會過於繁瑣。

視覺設計

photoshop - 這應該不用介紹了,我想做設計的不知道ps應該不算會設計吧?不過嚴格來說這是拿來修圖、修照片用的,不太適合拿來做網站。

illustrator - 我想這也是不需要介紹,因為這跟上一樣都是adobe出的,只是這個是向量軟體,對於RWD響應式網站來說還算是ok的設計軟體。

Sketchup app - 噢!這個軟體真的是太酷了,簡單、易學、好上手,最重要的是拿來做響應式網頁設計非常的方便,而且可以直接輸出@2x跟@3x的圖,一次還可以輸出多種格式,我現在偶而還會拿來畫圖,真的是好用得不得了!如果我還有更多空閒時間,我應該會一直跟它溺在一起吧!如果滿分五顆星,它應該是給五顆都不夠那種,沒試過的設計師一定要試試看!

marvel - 跟invision差不多的prototype webapp服務invision便宜,主要拿來與客戶過視覺設計使用,客戶可以直接在設計稿上標註留言,加快視覺提案修改與討論的進度。

前端/後端工程

Sublime Text - 前後端開發我都用它,因為他真的是神兵利器來著,好用的不得了!連我們家不會寫code的專案也都在用,因為真的很好用啊!順便介紹一些好用的plugin!

Sourcetree - 有介面的git工具,也可以搭配bitbucket使用。git的使用在中大型專案上顯得格外重要,尤其是多方協作的時候,很容易發生覆蓋或回朔的問題,有了git做版本紀錄後,誰誰誰蓋到code或誰誰誰搞錯檔案都很清楚,可以減少很多溝通上的誤會,也能快速讓所有的程式碼復原。

SvnX - 有介面的免費svn工具,如果不知道svn是什麼,其實svn跟git差不多,也是版本控管工具。

Prepros - 這是一個多功能的工具,他可以協助編譯Less、Sass、Compass、Stylus,也可以協助編譯Jade template、Haml、coffeescript等等,不管是壓縮檔案、圖片或是Live reload、FTP等功能,都非常好用。我目前都是過Prepros來處理CSS與使用Jade template和Live reload,非常方便,免費版會一直跳出贊助訊息,但是不影響使用,如果有能力贊助可以考慮一下。

imageoptim - 這是一個mac only的圖片壓縮程式,一般前端在處理圖片的時候,大部分還是會用photoshop來處理,可是photoshop在圖片縮的功能上奇差無比,同樣一張jpg的檔案大小有可能會差到50%,所以通常在上線之前,我會在用imageoptim壓縮所有的圖片,以減少網站loading。

filezilla - 我目前在使用的ftp,應該很多人也都使用這套,我會設定好FTP站台,然後匯出,讓客戶直接匯入filezilla使用,客戶只要點兩下就可以連上空間了。

主機/測試上線

除了一般LAMP系列(Linux、Apache、Mysql、php)以外,我有時還會安裝一些其他的東西來輔助我管理主機。

AWStats - 老牌免費的log分析,一般主機安裝完後都會有文字的log分析,但是因為打開就只會看到一多字,所以除非有什麼問題,不然其實很少會使用,但是安裝AWStats之後,log資料就會變得很簡單易懂,所以就清楚的可以看到流量、網友使用環境等等,讓log資料效益提高。

GoAccess - 跟AWStats一樣是log分析使用的,近期我比較喜歡用這一套,介面看起來比較新穎,比較適合我,我對介面好像跟好用其實還蠻注重的,不過功能來說其實跟AWStats差不多,安裝上來說,我覺得比AWStats簡單一點。

ApacheBench - 這是Apache附帶的一個主機壓力測試軟體,簡稱AB,主要是針對Apache主機效能做檢測,像是每秒可以送出多少request,除了Apache主機以外,像是lighttpd或是IIS主機也都可以使用。

Apache JMeter - 也是Apache的產品,採用Java開發,也是用來測試主機效能用的,這套應該會比AB詳細一點,不過我每次測試都只是大概看一下,所以我兩套都會用,交叉測試,雖然結果總是差不多就是了。

virtualbox - 虛擬機、模擬器,用來建立各種測試環境用的,我主要拿來跑windows OS用的,原因是有些客戶一定會用windows only的設定,導致我用mac無法使用,所以通常只有需要用windows的時候我才會使用。

MAMP - Mac軟體,類似xampp,是可以快速在本機端架起php使用環境的軟體,還蠻好用的。

其他

silverback - Mac專屬的UX使用軟體,主要就是螢幕錄影還有使用者臉部錄影,目前2.0已經可以免費使用,3.0還沒推出,持續等待新版推出中。

textnut - markdown文字編輯器,目前我是拿來寫部落格文章使用,但是圖片沒有辦法一起上傳到blog裡,所以還在尋找其他不錯的解決的方,但是拿來寫文章還不錯用。

以上就是我目前對於網站專案來說比較常用到的軟體工具,比較可惜的是有些是mac only,不是跨平台,不過應該還是找得到類似的軟體可以替代,希望這一篇對那些也想學得很複雜的朋友們有所幫助喔!

如何在mac os上開發.net 網站

前陣子因為接了一個前端工程的案子,但是因為後端是.net所寫,為了避免來回一直上傳FTP或SVN等等,所以我上網找了一些資料,才知道去年.net已經推出跨平台版本,目前還在RC版,所以說.net不在是windows only的東西了,這倒是一個好消息,不過我們家目前還是專精於PHP上,目前沒有要拓展.net事業的想法。

PHP的話在本機上架環境,懶人版大概就是裝一下XAMPP或MAMP,我個人是用MAMP架本機的環境,所以我在想也許已經有人做好懶人包,可以很快的在Mac上寫 .net 程式了。果然Google了一下我找到了Mono

Mono目前支援Mac OS、Windows、Linux,所以跨平台性不錯,比起需要一直用windows官方提供的資源來說,更沒有拘束,也可以實現在使用非windows系統開發 .net 程式的夢想,可以說是解救了不少人,也可以讓 .net 跳脫平台限制,增加未來參與開發的人員,目前 .net環境下的開發語言其實還蠻多的,有人會用VB但是現在最紅的應該是C#,有機會可以研究一下。

下載Mono後,只要按照安裝流程指示安裝,就差不多可以完成了,過程大約不會花到3分鐘左右,因為要安裝的套件其實還蠻多的,所以比一般其他程式安裝起來還要久一點。

安裝好了之後要如何使用呢?其實官網有個簡單教學,不過對於有英文障礙的人來說還是非常有障礙,簡單來說,步驟如下:

1. 將以下範例程式用文字編輯器(例如:Sublime text)儲存於您想用來開發的 .net城市的資料夾中,檔名儲存為hello.cs
using System;


public class HelloWorld
{
static public void Main ()
{
Console.WriteLine ("Hello Mono World");
}
}

2. 開啟終端機terminal,切換到開發的資料夾位置,切換指令為" cd 資料夾位置"。輸入資料夾位置時,可以開始finder切換到該資料夾再直接拖曳到終端機terminal裡面,終端機terminal就會自動出現資料夾位置,可以節省您key in的時間。

3. 輸入編譯指令“mcs hello.cs”,然後再輸入執行指令“mono hello.exe”,就會看到執行結果顯示在終端機terminal中。

以上就是最簡單的 .net執行步驟,如果你希望你的程式可以開個視窗,請照以下步驟:

1. 將以下範例程式儲存於測試資料夾中,並將檔名存成hello.cs
using System;
using System.Windows.Forms;

public class HelloWorld : Form
{
static public void Main ()
{
Application.Run (new HelloWorld ());
}

public HelloWorld ()
{
Text = "Hello Mono World";
}
}

2. 在終端機terminal切換到該資料夾並輸入以下編譯指令“mcs hello.cs -pkg:dotnet”,然後再輸入執行指令“456,就會看到執行結果有個小視窗跑出來。

以上都是壓成exe封包的方式,那如果是網頁呢?要如何打開測試頁面的內容?很簡單,請照以下步驟:

1. 將以下程式碼儲存於開發資料夾中,並將檔案名稱儲存成default.aspx。
<%@ Page Language="C#" %>
<html>
<head>
<title>Sample Calendar</title>
</head>
<asp:calendar runat="server" showtitle="true">
</asp:calendar>
</html>

2. 在終端機terminal切換到該資料夾並輸入以下編譯指令“xsp4 --port 9000”,即可使用http://localhost:9000/default.aspx 這樣的網址在瀏覽器中預覽。

3. 只要在終端機terminal按個enter就可以停止server運行了。

[經驗]廣告banner製作,Flash banner壓K秘笈

這是一門寧願不要學到的技巧,因為廣告banner很容易修修改改,尤其是flash banner,每次改幾乎都會動到影格,三不五時就會覺得要重做之類的感覺,一整個就是無底洞深淵,但是現在活動網站這麼多,廣告平台也很多,所以這樣的經驗與技巧還是需要傳承的,我只能說希望大家以後可以漸漸不需要用到這篇了。 

JPG靜態圖片Banner

banner壓K密技 通常圖片型banner大概都會抓到40K~50K左右,jpg壓K還蠻容易,通常做完可以用photoshop輸出,預設集的地方可以選擇輸出JPEG高中低,或者可以調整品質的百分比,比例越低畫質越模糊,然後再用jpegmini,可以將jpg最佳化到最小size,我個人會用imageoptimimageoptim不只可以壓jpg還可以壓gif與png,所以可以一次性將所有的圖片檔案都最小化,還蠻不錯的,最重要的是imageoptim是免費的,不過mac only喔。

Facebook本身有文字不得超過20%的限制,所以設計完草稿記得到網格工具檢查是否有符合20%的規範。

GIF動態圖片Banner

GIF Banner的K數限制也是在40K~50K左右,通常大概可以做3~4個場景的動態,如果場景不多,可以盡量用256色來製作,但是如果要壓K,通常就只能從256色開始減少,比方說換成128色或64色,再來混色的百分比也可以往下調整,要注意banner輸出的結果會不會看起來很馬賽克,畢竟顏色少混色又低,結果就是會像馬賽克磁磚的感覺,不過個人覺得比jpg模糊好看一點,最後一樣可以用imageoptim在最佳化一次,大概可以少個0.5%以上,不會影響到動態的GIF,可以安心使用。

Flash動態swf Banner

製作Flash Banner有三個重點:壓K、埋code、墊檔圖。說到Flash Banner,應該是很多設計師最煩惱、最討厭、最不想做的一個種類,三不五時就會遇到可能要重做的下場。目前Flash cc 2015僅支援action script 3,但大部分廣告平台都只支援action script 2,也就是說如果你要做Flash Banner,最好的Flash軟體一定不是最新版,再來Flash僅能支援降低一個版本,所以目前最好製作Flash banner的版本,我個人會覺得是Flash CS6,同時支援action script2 與action script 3,而且版本也夠低,不同版本的Flash做出來的檔案大小其實不太一樣,印象中我有聽過好像用CS4做出來的檔案最小,不過因為我沒有這麼老的版本所以沒辦法比較。

再來元件的部分,當然會先用Photoshop處理每ㄧ卡的畫面,畢竟要先跟客戶過稿,Photoshop在修圖上也比較優勢,所以會先在Photoshop處理完後,再逐成輸出PNG或JPG,包含文字也要輸出成圖片,然後我會使用imageoptim對圖片進行一次檔案最佳化然後再匯入Flash中,接著製作動態完成後,統一在發布設定裡設定JPEG輸出品質約50,通常以兩個場景約四卡的動畫來說,就可以壓在40~50K以內,如果還是超出一點,一些K數較大的元件我就會設定JPEG輸出品質約30,文字部分因為是純色,設定品質10其實都還好。

再來Flash的部分一定要記得要埋Click tag,也就是要寫action script在一顆透明大按鈕上,每個平台的action script的code都不一樣,以下列出一些我最近有使用過的action script2的click tag code:

--------------google--------------
on (release) {
getURL (_level0.clickTag, "_blank");
}

--------------yahoo--------------
on (release) {
if (_root.clickTAG.substr(0, 5) == "http:" || _root.clickTAG.substr(0, 6) == "https:")
{
getURL(_root.clickTAG, "_blank");
}
}

--------------mobile01--------------
on (release) {
getURL (clickTAG, "_blank");
}

想知道埋code是否正確?Google有提供工具來檢查是否有正確埋code,但是只能撿查要投放到Google的Banner,其他部分可能還要等廣告上刊測試後,如果有問題廣告商會跟你說的。

最後就是Flash banner都需要一張墊檔圖,通常是動畫的最後一卡,這個部分如果有photoshop排版,可以從photoshop輸出,但是既然都用Flash了,就統一用Flash來做吧!只要將動畫的時間軸拉到最後一卡完整的畫面,然後選擇檔案>匯出>匯出影像,然後按下儲存,之後會跳出設定畫面,請選擇完整文件大小,即可匯出最後一卡的畫面當作墊檔圖使用。

當然墊檔圖盡量不要太大,因為也要在40~50K範圍裡,所以我會設定品質為90,如果是100的話有時候還是會超過50K,所以設定成90可以確保一定少於50K。

HTML5 Banner

目前各大平台可以完整支援HTML5 banner的不多,而且HTML5 banner製作方式也蠻多樣的,但目前最簡單的做法就是把Flash做好的swf直接使用Google Swiffy 做轉檔的動作,你可以觀看各廣告平台的規範,裡面還是會提到要在Flash中埋code,在使用Google Swiffy轉檔。Google Swiffy會將swf轉成HTML5 banner,並且將圖片元素轉成base64格式,所以只要一個html檔案就可以完整呈現整個banner,當然如果使用flash製作完成後還要打開瀏覽器上傳轉檔,感覺是挺多此一舉的,所以Google有推出Flash外掛,讓你只要多點幾下就可以直接轉成HTML5 banner。

安裝好Swiffy Extension之後,你就可以在最上方工具列的命令>Export as HTML5(Swiffy),即可輸出HTML5 banner,輸出後記得確認是否有在150K限制內,如果沒有,一樣可以像swf壓K,在發布設定裡調整JPEG品質,即可降低K數。

資料整理

因為每個平台要埋的Code不同,檔案大小限制也不太一樣,每次一波廣告可能同時2~5個以上的廣告平台,所以建議每一個平台的廣告banner的要有自己的資料夾,這樣才會比較好核對所有的banner,如果banner之後有修改,建議在資料夾上除了有平台名稱以外,也可以押上日期,這樣才不會太過於混亂,導致找不到Banner。

免費自訂網域信箱,讓你可以用自己的網址收信!

2020年最新推薦小企業、工作室使用improvmx設定網域別名的方式來免費自訂網域信箱,詳情請看:
https://gratch.tw/domain-email-improvmx/

我們家是專業的網站服務公司,基本上跟網路有關的事,我們都可以處理,也都略懂略懂,對於主機,我們目前只有虛擬主機代管服務,打從開始到現在還沒當過機,也沒什麼重大資安漏洞事件發生,但是對於信箱這件事,我個人覺得還是交給專業的大牌們來處理比較好。原因很簡單,自己架mail server要擔心是否會被壞心人拿去亂發垃圾信,一但進入各大信箱黑名單,你要叫天還真是天不應,叫地還真的地不靈,而且mail server的安全也很重要,畢竟email內容都是重度隱私的資料,一旦被有心人偷窺,會發生什麼事也真的不曉得,所以mail server服務不在我們家的虛擬主機服務裡。

 通常公司的服務信箱都是sevice@yourdomain.com的組合,畢竟服務信箱用nowilldesign@gmail.com看起來專業度是有比較少一點,雖然收信功能差不多,也不會有什麼太奇怪的問題,但是員工們怎麼辦?又不是Google員工全部都用gmail或其他mail也挺怪的,而且往來的mail都屬於商業機密,如果公司無法控管email帳號,那員工在離職後就很容易就可以到走客戶資訊,或將公司機密外漏出去,所以公司信箱的控管還蠻重要的。 

一般公司信箱都要有自定網域功能,比方說我們工作室網址是pnetwork.com.tw,當然公司底下的信箱就要是XXX@pnetwork.com.tw,平常要做到這件事就要有付費的mail server服務或自己架郵件主機才可以,如果平常是我的客戶需要mail server服務,我都會推薦Google Apps for work,收費方式最便宜的是一個人頭一個月5塊錢美金,一年一個人要50塊美金,約1500塊新台幣,但是有些客戶對gmail會有疑慮,尤其是google 在內地是不能用,所以如果對內地有mail需求,就會對Google Apps for work有疑慮,這時我會改建議微軟的Exchange Online,收費方式最便宜的是一個人頭一個月4塊錢美金,台幣一個月收費130塊,如果以一間5個人的小公司來說,一年大概需要7,800~8,500塊新台幣,大概不到一萬塊的成本,當然10個人的小公司就要兩萬以下的成本費用了。

這樣的費用對於自己架mail server又要自己維護的情況下來比較,已經低非常非常多了,但是如果你還是覺得太高,畢竟小公司還是希望能省則省,而且一開始Google Apps for work不是有50個人免費試用(後來改10個,現在已經沒了),所以現在應該也要有吧!的確,現在還是有,以下就來介紹一些免費又可以自訂網域的服務:

1. Zoho mail
提供10個免費名額,Zoho 是一個提供蠻多服務的公司,比方說文件、CRM、客服系統、人力資源、線上會議等等,還蠻廣泛的,可以研究一下。

2. 阿里雲郵
提供100個免費名額,是由內地阿里巴巴所推出的服務,內地服務寄內地?當然不會有什麼疑慮囉!不過要小心被監控就是了。

3. Work Mobile(韓國版,註冊成功可轉成繁體中文介面)
提供300個免費名額,是由Line的母公司Naver所推出的服務,由於Naver有Line開發的經驗,所以Work mobile不管在web還是在app都有相關服務,品質也是不錯。

以上的服務如果各位有想要運用的,可以上網google一下,都有相關教學,在此就不多說了。

你以為註冊好就沒事了?當然沒這麼簡單,註冊完成後,因為mail是採用自訂網址,所以在網址部分就要設定MX記錄,MX記錄是Mail Exchanger record的意思,也就是當有email寄到你的網址的時候,就會透過MX紀錄的內容,把mail送到指定的mail server去,所以如果你註冊好,也可以登入e-mail收發信畫面,但是你收不到信,寄信給你的人也一直被退信,別懷疑,是MX紀錄有問題,記得修改一下網址的MX紀錄,如果你的網址是代管的,請跟廠商說明你要修改MX,原因是你用了什麼什麼mail服務,同時請把mail的管理員帳號、密碼給廠商,請他們協助設定MX,等廠商設定完成也確定沒問題之後,記得修改管理員密碼,這樣才不會有安全疑慮喔!

2020年最新推薦小企業、工作室使用improvmx設定網域別名的方式來免費自訂網域信箱,詳情請看:

https://gratch.tw/domain-email-improvmx/

[php] 快速分割datetime資料

這其實沒什麼了不起,但是我五六年的菜菜鳥就是不常用,所以一天到晚都忘記,乾脆寫一篇放在部落格裡,這樣我就不會忘記了!

一般的datetime格式產出的資料會是像這樣“2015-09-08 02:28:07”,以前光是要把年月日時分秒拆開就要寫很多explode,就算要把日期跟時間差開也要寫一個explode,像這樣
$datetime = '2015-09-08 02:28:07';
$date_time = explode(' ', $datetime);
//$date_time[0]=2015-09-08
//$date_time[1]=02:28:07

如果我們要拆成年、月、日、時、分、秒就更麻煩了,就會變成這樣
$datetime = '2015-09-08 02:28:07';
$date_time = explode(' ', $datetime);
$date = explode('-', $date_time[0]);
$time = explode(':', $date_time[1]);
//$date[0]=2015
//$date[1]=09
//$date[2]=08
//time[0]=02
//time[1]=28
//time[2]=07

所以就會有一種怎麼越寫越複雜的感覺,事實上如果你會正規表達式,那就神奇了,因為只要一行就解決了 list($year, $month, $day, $hour, $minute, $second) = preg_split('/[-: ]/', $datetime);
//var_dump($year, $month, $day, $hour, $minute, $second);
所以新東西還是要加減學一下,這樣才可以提升自己的效率啊!

[創業]一年了,我覺得最重要的十件事

草監網路差不多是2005年開始寫的,在2012年我組了一個叫Nowill Design的網頁設計組合,並且在2014年成立了品禾全端網路工作室也出了一本書,一直到現在品禾還在不斷的成長中。

這一年來,品禾全端網路工作室除了協助客戶建立更好、更棒的跨平台網站以外,也勇於嘗試新事物、新技術,替那些網站建立後無法自行維護的客戶提供維護服務,企圖不只在建立網站的領域幫大家更好,也企圖與網站建置後幫大家更上一層樓。

品禾全端網路工作室成立一年來,我把我的感想整理了一下,也許不值得參考,但是我自己卻覺得無比重要:
1. 夥伴超重要
好的夥伴帶你上天堂,不好的夥伴讓你胡亂忙。真正厲害的夥伴可以節省你非常多的時間,也不會隨便找理由或藉口搪塞不太懂得夥伴或客戶,減少從內部就開始不協調的情況,也會懂得適時提出協助,不會自己一個人胡搞瞎搞,更不會覺得提出協助是丟臉的行為,有效減少自己搞半天多花了許多冤枉時間,懂得團隊合作才能事半功倍。
2. 速度超重要
人的記憶是會退化的,你不能希望每個專案做完的時候大家都還記憶如新,所以唯一的辦法就是縮短時程,在大家都還記憶如新的時候就快速的把專案處理掉,除了可以降低日後無限擴張的機率,也可以讓客戶對你嘖嘖稱奇。
3. 品質超重要
速度快不代表品質就要打折,妥善的規劃每個功能,相似或常見的功能可以再次運用,有效降低開發時程,卻又可以保持品質,但是千萬要記住,這些相似或常見的功能不代表可以永遠不更新,必須與時共進。
4. 使用者超重要
網站企劃過程雖然要一直跟客戶過稿,對規格、架構等等的資料,但是當客戶提出需求時,第一個時間不是滿足客戶的需求,而是要思考這對客戶的客戶到底是好還是壞,如果不是加分的項目就必須跟客戶仔細討論,讓客戶明白自己的提議可能有待修正。有時候,客戶是真的需要教育的。
5. 快樂超重要
打從我一開始做設計我就發現到,我的情緒會影響到設計的品質好壞,也會影響到我的完成時間,這讓我體會到如果自己沒有辦法在專案上保持快樂的情緒,這也將代表這個專案最後可能會非常得不快樂,既然不快樂,怎麼會是好東西?
6. 閱讀超重要
網頁設計領域是一個非常有趣的行業,每個月都會推出新技術或新概念,如果沒有隨充實自己,很容易提供客戶過時的概念或資訊,這將會誤導客戶,導致客戶誤以為那些錯誤的資訊依然是好資訊,進而可能製作出錯誤的設計。
7. 守時超重要
因為本工作室的經營概念有別於一般公司,並沒有所謂的上班時間,也不侷限夥伴居住的地點,所以我們遍佈全台灣各地,最怕的就是自己沒有一定做的作息規律,導致常常找不到人,讓其他夥伴窮緊張,所以每一次約定好的討論時間都必須非常確實,否則很容易漏掉一個時程導致專案延後。附帶一提,本公司今年目前為止還沒有延期的專案出現,都是準時上限。
8. 領頭超重要
一個團隊最怕多頭馬車,一個專案的領頭羊不一定是與客戶接洽的專案或是負責架構的企劃,他也可以是後端程式或前端互動,但千萬要記住,不管誰是領頭羊,這個人都要瞭解使用者,需要從使用者的角度出發,才可以將整個專案帶往對的方向。
9. 客戶超重要
有些好客戶就真的會懂你,替你介紹其他的客戶,這些都是大恩人,必須由衷感謝。有些客戶就是不懂你的價值,價格連砍好幾刀,但千萬不要因此而錯愕,只是客戶預算不足,不代表你不值那個錢,不要掛在心上,要繼續努力向前。
10. 會計超重要
發票開立寄送、財務紀錄、款項核對等等,千萬不要覺得自己做就好,專業的事情還是得請專業人士來處理,否則隨便都可能要花你好幾天的時間,而這些時間花在其他專案上不是更好?