King 學習前端之人生

把遇到錯誤的、學習到的前端筆記在這邊

總網頁瀏覽量

Copyright © Tzeng Ying-chi. 技術提供：Blogger.

2016/12/06

[day5]-好人才，不用嗎？數位履歷的規劃與建置—個人網站、WebApp

  12/06/2016    

新世代！用新工具推薦自己吧！

在這第五天，終於要正式的開工了QQ，在這篇中講述規劃個人網站的要素，以及用什麼工具來建置我們的數位履歷～-----------------

~~文章標題下的有點好笑，看看就好了啦XD~~(始終打不出的刪除線)

身為前偏後端(？)工作者，怎麼可以沒有身為自己的個人網站作品集呢！而且換工作潮即將來臨，就趕快開始我們的實作吧！

首先，一個好的網站一定要有個清楚的規劃～我用Xmind簡要畫了我的個人網站需要哪些頁面，如下↓
























個人網站主打的是必需吸引人逗留觀看並讓人印象深刻，不然我幹嘛無聊看你的身家背景XD

雖然頁面很少，但因個人網站本質就是你的形象網站需要讓人駐足下來觀看你的網站，所以主要以「特效為主，功能為輔」來製作！

在這邊我主要使用的CSS框架為Bootstrap 3、前端語言為jQuery框架、後端語言用PHP去作程式的撰寫。

先寫好我們靜態的個人網站後，會先教大家上傳至OpenShift的免費server空間來作一個上線的動作，之後會把我們做好的個人Web使用Cordova(也有人說是PhoneGap)來製作個人的App，並加一些實用的功能！
例如可以加一個請面試官為自己打分數的功能、串連Google map來計算你家離公司的距離有多遠、即時拿到聘書回報系統等.....既無聊又可以展現自己的技能的功能....XD

（這樣剩下的25天做的完嗎.......好大的挑戰啊....）


由於我美感不是那麼好(~~工科出身的啦！~~)，借助一下現成CSS UI框架-Bootstrap 3之力來做我們的網站，Bootstrap我覺得最好用的地方在於他的「格線系統」！

而這個「格線系統」是什麼呢？
我們可以輕鬆打造出響應式網頁設計網頁的配置，不用自己去調整＠Media querie，對需急速開發的人來說是一大福音！

在現代網站設計的趨勢裡，網站備有響應式網頁設計(Responsive Web Design)，簡稱RWD功能是很重要的！

簡要來說，網站在各種裝置上，頁面會隨著裝置的螢幕大小來作自動的調整，在閱覽上會有更好的使用者經驗！

引用維基百科(回應式網頁設計)-
"一種網頁設計的技術做法，該設計可使網站在多種瀏覽裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上閱讀和導航，同時減少縮放、平移和捲動。"

分享一個在FB前端社團PO的Bootstrap簡報，這位前輩把Bootstrap介紹得很易懂！有興趣的人可以看看：
Bootstrap4 與他的好搭檔-Chih-cheng Wang 引用自（http://www.slideshare.net/chihchengwang3/bootstrap4）


之後，在撰寫程式途中會講解我遇到的一些難題及如何去克服他～今天先這樣斷尾吧....來去想頁面配置去....
------------------------

文後-  

這樣剩下的25天做的完嗎.......好大的挑戰啊....
---------------------
-同步連載於"iT邦幫忙"鐵人賽活動系列文章[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]

  

  No Comments

2016/12/05

[day4]開發環境可以重裝，但地球的環境只有一個-Sublime、MAMP、FileZilla

  12/05/2016    

開發環境的簡述

「工欲善其事，必先利其器」開發網頁必備的工具，加快你開發的速度～--------------------------------------------------
不好意思～小妹我昨天感冒了....所以昨天的文章寫到一半就棄守休息去了...擇日一定會補齊的QQ

來說說我的開發環境吧～
我是用OS平台是MAC OS，開發環境中系統不會影響你太多，各平台都有個平台的solution的～（但最好還是不要選太冷門的啦XD

-編輯器（IDE）

再來是很重要很重要很重要（說三次XD）的編輯器，你喜歡用什麼編輯器都可以，舉凡文字記事本、Dreamweaver、Notepad++、Atom、Visual Studio....巴巴巴~太多了，但我覺得用的順手是最重要的！我的編輯器是使用Sublime text3，因為小妹在修行時本來是用網頁神器「Dreamweaver」，但後來師父傳授我們Sublime的使用，一用之下～哇～整個是非常的順手啊！

簡要介紹Sublime Text 3 （引用維基百科）
程式特色
Sublime Text 的主要功能如下： 「Go to anything」功能：可快速跳至檔案、符號或行數。 「Command palette」功能：彈性快速鍵功能。 多行選擇功能：同時修改多行內容。 基於 Python 語言的外掛 API。 針對個別專案使用不同的編輯器設定。 透過 JSON 檔案自訂設定值。 跨平台（Windows、Linux 和 Mac OS X）。 相容 TextMate 的語言標記語法。
----
這邊分享一個我的師傅教你如何急速上手Sublime text3 讓你擁有更快速的開發經驗～ 
Sublime超強外掛應用 Amos (李建杭)： https://course.cool3c.com/p/sublime

如果你想學更多精隨的話，不要吝嗇投資自己！！
這邊有sublime 開發倍速專班 Amos (李建杭)：https://course.cool3c.com/p/sublime-amos

------

- 環境整合軟體

如果你是做靜態網頁的話，或許你不需要這個軟體。 但由前兩篇的講解可以了解到，一個動態的網站需要有客戶端和伺服端，並且有些後端的語言需要在某些環境下才能測試（點我-後端語言），所以我們需要一個Webserver來作開發測試，最方便的方法就是環境整合軟體！什麼是環境整合軟體呢？ 環境整合軟體有很多，舉凡MAMP、XAMPP、LAMP、WAMP....etc
我們用MAMP舉例：
這個套裝軟體包含了
  • Nginx -Webserver
  • Apache -Webserver
  • MySQL -資料庫
  • PHP -後端語言
網站做好時，需要找一個網頁伺服器把其網站上傳到空間中，公開上線給使用者用。 Apache與Nginx就是我們所謂的網頁伺服器，其他的還有IIS等等這邊我們不探討， 而動態的網頁需要靠後端語言與資料庫溝通，並抓取資料回應顯示在你所想看到的！
裝了這些軟體通通都可以讓你三個願望、一次滿足XD非常的方便～ 小妹我是使用MAMP（因為老師推薦（XD）），其他XMAPP提供的功能跟MAMP差不多， LMAP則是主打使用在Linux上，WAMP主打使用在Windows～就看你的需求是什麼，找尋相容於自己的OS，並可正常的使用就好！
那你一定有個問題！有沒有不要裝這些軟體的方法？ 有，但是很麻煩！ 請把上述Webserver、資料庫與支援的後端語言分開一項一項裝，事情沒有一定！ 你想要Apache＋mongoDB ，可以！使用上沒問題就好，因為我不是個個領域不同，想探討的再去探討，這邊就不多述了（因為我專注在前端上壓！！XD（謎之音：其實是不懂..... -------------------------------------------

- FTP上傳軟體 這邊推薦FileZilla！先下載下來（Client端）就是了！
網站做好要上傳到server的方法百百種，但FTP是最方便的方法了！
這30天內會教你申請一個免費的線上Web Server空間並使用FTP上傳網站上去，這個免費的WebServer是OpenShift屬於RedHat的，但是免費畢竟是有缺點的，之後會一併介紹！
先下載FileZilla附上連結：https://filezilla-project.org/

文後-

天氣變化大，小妹昨兒感冒了超不舒服的....大家要多多保重身體啊......
還有文章的進度有點delay，所以有些東西就自己上網google，很多好心的施主都寫的比我好很多....(土下座Orz

  

  No Comments

2016/12/04

[day3]-你了解你自己嗎？那你了解動與靜的網頁嗎-動態網頁篇

  12/04/2016    


網頁的概述

在實作網頁之前，先來搞懂動態網頁和靜態網頁的差別吧！

---------------------------------------------------------------------------------------------- 

昨兒解釋了靜態網頁，但因為太晚寫文章而有些東西沒補充到......
小妹我今個兒可是起了大早，來寫部落格呢XDDDDD（廢話不多說.....

昨天講到頁面變化的觀察，今天要來解釋位啥昨天會這樣說～

「沒有感覺的網頁傳輸流程」



〔情境一〕上班的時候偷滑FB


客服端像伺服器請求需要顯示的資訊→請求(Request)

接下來伺服器如果正常運作且請求OK會回應你要的資訊給你

  

  No Comments

2016/12/03

[day2]-你了解你自己嗎？那你了解動與靜的網頁嗎-靜態網頁篇

  12/03/2016    

網頁的概述

在實作網頁之前，先來搞懂動態網頁和靜態網頁的差別吧！

---------------------------------------------------------------------------------------------- 


小妹我之前在資策會修行時，一開始學了Html＋CSS3，記得那時我的師父教我們寫CSS3動畫，而且是學超酷的3D動畫（沒錯！就是用CSS3寫立方體！），純真的我那時候以為網頁有動畫畫面不就是動態頁面嗎？

登登！答錯！

沒有與服務端請求資料的網頁，只能稱是靜態的頁面！
舉例說：形象網站、活動網站，這些通常需要大量的頁面效果吸引人注意，而不必與服務端請求資料做立即的回應，簡單來說就是沒有像後端資料庫要資料！

我舉個例子給大家看看：

這是國外素材網....吧！
http://www.wloks.com/


影片中，我的滑鼠移動他圓環處的點點，背景上會有顏色上的變化等等....
他改變的，僅只於在他前端頁面上的處理而已，並沒有像後端請求資料！
有點抽象，但我們可以開啟chrome的〔檢視→開發人員選項→開發人員工具〕來驗證是否只是前端的頁面在做變化，我錄一段影片解釋給大家聽。


（抱歉～MAC的螢幕有點小....）

 可以看到影片中，我開啟了chrome的檢查，並點選Elements項目，這個項目可以讓你直接看到網頁吃到的HTML架構與CSS3的樣式，頁面效果的變化也可以從此看起，就像你看不到電壓訊號，要靠示波器看一樣！（好離題且更難懂的解釋XD....我讀工科的啦~）
（為啥要說吃到的，明日會解釋！）

影片在[2:00]處，我打開body並觀察HTML的樣式變化（就是CSS有無被改變），[2:15]可看到我滑動頁面時，Elements視窗有紫色色塊出現提示標籤或者樣式出現變化，但此處的變化指我只是畫面在做變化，我並沒有向後端資料庫要資料改變！會這樣說，一定要有證據的！我也一併錄了影片解釋XD
影片在[4:14]處，我打開了Network視窗來觀察他有無做請求的動作～答案在影片中揭曉，在我滑動頁面時，他沒有跑任何的請求動作！
這表示了在我滑動頁面的這個動作，他只是一個在畫面做變化的靜態頁面而已！

還是不懂嗎？或是還是很抽象，因為今天離發文時間還剩兩小時而已，所以有些東西與何謂動態頁面明日再來解釋吧！抱歉今天有點趕XD（被打.....

文後-

明天要早點寫網誌！！！

----------------------------------------------------------------------------------------同步連載於"iT邦幫忙"鐵人賽活動系列文章[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]

  

  No Comments

2016/12/02

[day1]-前後端小菜鳥的30天發文規劃，但世事都會有變化的～

  12/02/2016    

前言- 

小菜鳥的身家背景  



  來看規劃前，先靜下心來看小妹的背景吧～（謎之音：不要！！
----------------------------------------------------------------------------------------------

  小妹我本身其實不是讀資訊出身的，我從高職開始到大學讀的都是電子工程，對程式其實相當的不熟悉，大學又是念夜間部，所以對學業算是半荒廢了，舉例C語言、C++等.......
小妹在電子業待了五年，因為一些因素休息一年，後到了資策會學習UIUX互動式多媒體網頁班學習了六個月，我也要感謝很多恩師的傾囊相授！

要在這裡說我很認同有個主題是" 師父領進門，修行在個人"這個標語一樣，在資策會我們學的淺淺的，只是讓你知道皮毛，剩下的就要靠自己努力了！！這一年我也是跌倒了相當多次啊....Orz

以下是我的學習經歷，可能會些許的不正確或是觀念錯誤，但都是我用時間換來的經驗，請各位看官大大鞭策....我的不負責發文30天啟動！

規劃-

目前本人在前端界工作快一年了，身為一個前後端工程師，理當要有個作品集，但是我居然還沒有！！所以這30天，來打造一個數位履歷吧～

其中將會介紹到以下工具與自我經驗：
架站介紹－使用FTP、空間申請-使用openshift

工具推薦－POSTMAN、一些前端好用的Chrome extensions

程式撰寫－
Opendata的應用、Google map API串接應用、FB API串接看有沒有空在PO（ XD

作品製作 －
來參加鐵人賽，就是要實作作品啊～不然要幹嘛～（學泛舟哥）
年底轉職潮也快到了，剛好來作一個Web+Web App履歷吧～

經驗分享－
三不五時會分享一下在做這個專案時，遇到的困難與解決的方法，順便紀錄一下我學的東西。

以上規劃的理論上：
先會環境建置(4~7天)→馬上進入程式撰寫（7天UP），撰寫的過程中邊介紹使用工具（3~5天） or 推薦一下好用工具（3~5天），然後自己有犯錯的地方會加以解釋（不負責解釋XD），希望這30天可以平安渡過！

程式語言-
 在這將會用到
  • HTML5
  • CSS3
  • jQuery
  • Javascript
  • PHP ←三不五時會用到
嗯～好像就這些了！這些就足夠強大了，可以做出無所不能的程式！



文後-

小妹對於那個優勝獎盃，可是很希望得到的！！加油加油！（笑

----------------------------------------------------------------------------------------
同步連載於"iT邦幫忙"鐵人賽活動系列文章
[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]

  

  No Comments

訂閱： 文章 (Atom)