網頁接案心得

日記
  1. 1. 故事是這樣的
  2. 2. 最後總結一下我這次接案的心得
  3. 3. 最後分享一些工具和網站：
  4. 4. 參考來源

上上禮拜到台北找朋友聚會，結果就陰錯陽差地接了一個網頁案子，想說只是做做靜態網頁，只是稍微趕一點而已，而且也想說順便看看自己前端的能力。

故事是這樣的

一開始我就想說要用 angular 寫網站，因為這幾個月都習慣 angular 的開發模式，而且也可以輕易的部署到 github 上，但是沒想到這就是我錯誤的第一步。

我在交貨前一天就把東西都做好給負責和我接洽的人，就差一些說明和程式碼註解就算完成，而且原本預期是要花一個禮拜做完，我這一個禮拜應該只用了禮拜六一個整天，還有三天晚上的時間就做完了，其實還蠻輕鬆的，不過不知道我自己哪根筋不對，竟然想要幫對方考慮 SEO 的問題，然後就開始了一整段煩人的路…

上網找了 SEO 和 angular 還有 SPA （一頁式網頁）的文章，發現 google robot 在爬網站時並不會去等待你的 js 完成，所以用 angular 或者其他 SPA 所爬到的內容不會像是真的使用者瀏覽網頁到的內容，所以 SEO 分數會相對低，然後我就決定不用 angular 幫他們做，我自己也想說反正應該就複製貼上而已，應該不會很麻煩，但是事情不是憨人想的那麼簡單。

後來我花了整整一天半的時間將 angualr 架構改成不套任何前端框架的網頁（ bootstrap 和 jquery 應該不算框架吧！）。順便試用了一下 Prepros 和 gulp，最後決定使用 gulp，還有修改一些要調整的樣式，還有增加一些手機上手勢的操作，沒有還有了！我沒想到我花了這麼久的時間在複製貼上，因為在 angular 的 html 可以加入許多判斷和迴圈，但是少了這些功能，許多都要一個一個加入：

  • 像是在 js 增加變數判斷，判斷後再修改 html 元素上的 class，在 angular 只要有 ngClass 就可以解決，不用動到 js
  • *ngIf 也可以決定要不要讓元素在 DOM 裡面，其效果和 display: none 效果根本不一樣
  • *ngFor 也可以減少我的 html 程式碼量，修改 json 資料也比 html 容易多了

還有其他優點像是 component 和 router 的處理也讓我省去許多問題，還有使用 typescript 可以先省去一些低級錯誤，讓我覺得 angular 真的會讓我開發起來簡單很多，不考慮一些 SEO 和一些手機上增加手勢功能還不熟之外。

最後總結一下我這次接案的心得

  1. 先考慮清楚要做的網頁形式，如果像是一頁或者很少頁的形象網站，可以不用套任何框架，因為框架都會有點大，解決許多問題，但如果沒什麼問題，就不用套了。

  2. 如果要做 RWD，一開始當然先以自己電腦螢幕寬度先做好一版，media query 我覺得慢慢寫下去比較好，像是我的螢幕是 1440px，之後在寫 1200px 一直寫到 320px；我一開始寫完 1440px 就直接寫 360px，結果 360px 調整的太多，但是也要用到 420px，因為我 media query 是這樣寫的，所以才覺得由大寫到小比較好，因為前面的會套用到後，：

1
@media screen and (max-width: 480px){...}

  1. img 也要養成寫 alt 的習慣，對於 SEO 有幫助

  2. 雖然使用模板工具可以減少程式碼量，但是許多都會對 SEO 有害

  3. 程式部分的 SEO 感覺起來好像並不是那麼重要，因為使用者體驗（速度）、搜尋正確度（取決於 Url 和點開量）和廣告反而才是重點的感覺，那這樣以上除了第二點之外都是廢話摟？（其實整篇都是廢話…）

最後分享一些工具和網站：

  1. Google PageSpeed Insights

可以檢查你的網站速度問題，js、css 等檔案是否太大，會提供你一些建議（我記得以前還可以幫你直接壓縮檔案，現在沒了ＱＱ）

  1. Pingdom Website Speed Test

感覺更猛的測速網站，可以檢查每個檔案和網站讀取的過程，做最耗時間的分析，我覺得對於新手比較好瞭解網站的問題。

  1. Chrome 開發者工具

就不介紹了，其實這才是最好的工具，只要會用，以上兩者都可以不用看了（吧！？

  1. Facebook 分享工具

只要使用 <a> 就好，不用麻煩的設定 Facebook SDK 就可以讓使用者分享你的網站到他的塗鴉牆，不過如果要顯示讚數或者其他訊息就無法了。

1
<a href="javascript: void(window.open('http://www.facebook.com/share.php?u=your_web_site.com');">點我分享</a>
  1. Facebook 分享網站的 meta 設定

裡面有教 Facebook 分享的設定應該要注意和怎麼設定，雖然年代有點久遠，不過大部分應該都還適用。

  1. Facebook 分享檢測網站

設定完網頁的 meta 可以使用 Facebook 提供的網站檢查，看看是否有東西沒有設定好，最容易出問題的就是圖片。

參考來源

  1. 五個測試網站效能的免費工具
  2. walter 心得筆記
  3. WFU BLOG
玉山銀行 網站測試工具 angualr