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

總網頁瀏覽量

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

2016/12/31

[day30]三十天鐵人賽的自我反省與檢討!以及賽程未完待續....


### 今天是第三十天的鐵人賽發文,也是2016年的最後一天....

2016年的最後一天,在今年結束前有什麼遺憾的事,應該就是沒有在2016年準時寫完文章了......


------

來說說這個比賽:

當初看到鐵人賽其實是無心看到的....
有天在FaceBook上看到我師父回覆他朋友的訊息中在討論這個比賽~

當時剛好今年從電子業轉行到資訊業,而且做了一個全新的職業「F2E」,自己有好多不懂的地方,也學了很多新東西,在公司做了案子....

像是剛入門學習的jQuery到Javascript、後端語言 PHP、資料庫MySQL、自己學WebApp、自己學架站、架設Wordpress、架設opencart等等到虛擬主機的運作、了解網段&網域等等真的多到數不清....

人生中今年2016年真的是我最充實的一年,也是我人生中終於找到目標的一年!

去年,我一度因為心情焦慮、低落、沒有自信而不敢去工作(背後當然是有些原因讓我陷入低潮),還記得那些不敢工作的日子裡我去早餐店打工賺生活費,做了一兩個月又覺得心情很痛苦,那時心情真的很難受,覺得我一輩子就這樣畏畏縮縮過著逃避生活的生活下去嗎....

直到:

我的男友一直在背後撐著我,但是撐久了總是會累我自己也明白,我的男友鼓勵我走出來,去上課學個技能....於是我想到我大學時一度對網頁有興趣,於是去職訓局的就業網看到了資策會開設的「多媒體互動式網頁就業養成班」而跑去上,中間當然也有很多困難要克服,例如沒有錢去去上課(10萬元)、心情低落的情形下等

但這些都很感謝在我背後默默支持我的男友、很感謝無私借我錢去資策會上課的男友媽媽、很感謝我的媽媽沒有要求我的人生要有多大的成就....

上課後很感謝教導我的老師們無私的傾囊相授、很感謝我的師傅AMOS李建杭老師說了一些話鼓勵我們、還有一些願意聽我說話的人、我上課的夥伴等等讓我終於振作了起來.....

所以看到這次的鐵人賽,我想要挑戰自己的意志力證明自己所學習的、我想給我的老師看學習的回饋、最重要是把這一年學習的技能給紀錄在有意義的挑戰上!

很遺憾是雖然我30天的發文完賽了,但我沒有達到我給我自己的目標....

反省與檢討:

這次在挑戰鐵人賽的過程中,我了解到了我的弱點在哪、自己在哪方面必須在多再努力....

像是這次的挑戰我也發現了平時自以為懂得CSS、切版、Bootstrap格線,真正在實作了才知道和想像的不同,實作了才知道哪裡的觀念其實自己是不懂的、模糊的....

也可能因為平時在工作上碰觸程式的時間比較多,在撰寫上已經知道要怎麼去排解問題,所以小看了最基本的基本功,導致這次寫技術文時「知道怎麼寫、但解釋不出來為什麼」或者是「實作的和想像的不一樣」...還有我最弱的視覺設計等...

關於感謝:

因為這是終於找到的人生方向,也是我有興趣與熱情的事情「Coding」!
我會好好的反省這次的不足之處並加以練習!也謝謝iT邦幫忙提供這次比賽的機會,謝謝平時來看我文章的前輩、大大們Ivan Wei、虎虎等等...(小財神辛苦了~)

還有在上面鼓勵我的邦友們,謝謝你們^^


這次是一個很好的經驗,讓我看到我不足的地方還有可以一起加油的地方,謝謝鐵人賽!

在此雖然2016沒達到我的目標與鐵人賽的精神留下遺憾.....
但2017年緊接著來了,也期許明年的我此時此刻能夠驕傲的說「我完成了挑戰!」
&人生的coding之路永無止境~

今天發完文後,前面沒達到我心中目標的文章不會在此停住!
就算再寫5篇、10篇、寫到我目標達到為止.....

------

文後-

謝謝大家今年的指導,小妹在此祝大家2017年新年快樂!

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

[day15]改變策略!之手刻網頁使用@media製作RWD個人網站-平版、手機版(更新中..)


### 前篇做好了電腦版,這邊說好的要來一次解決平板和手機版的頁面呈現~






首先先來介紹 Media Queries是什麼呢?

引用自w3schools的介紹(http://www.w3schools.com/css/css3_mediaqueries.asp)


CSS3 Introduces Media Queries

Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:


  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids.

從字面上來看

Media → 媒體
Queries → 查詢

Media Queries 是具有偵測裝置(device)媒體的能力,而不是偵測這是什麼裝置、機種

舉例來說:

  • 瀏覽器視窗的寬度和高度
  • 設備裝置的寬度和高度
  • 設備裝置的方向(是平板電腦/手機在橫向或縱向模式?)
  • 解析度

普通前三點是我們最常使用功能~

在CSS上Media Queries的語法為

@media 媒體類型 and (判斷式) {
    CSS-Code;
}


媒體類型(Media Type)分成四種,

  • all 適用於各種媒體類型設備
  • print 適用於列印上
  • screen 適用電腦螢幕、平板、智慧型手機上等等(常用)
  • speech 用於在需要"閱讀"的頁面上←我想應該是無障礙空間吧? 

判段式的部分我們平板裝置舉例來說,
通常我們設平板的判斷點為:視窗寬度≦768px為平板裝置

Media Query的寫法為

媒體類型為平板 → screen
判段式為當螢幕的寬度小於768px時做動作 → max-width: 768px

所以範例寫法為↓↓
@media screen and (max-width: 768px) {
   當螢幕寬度 < 768 px 時將載入這段 CSS;
}

媒體的螢幕判斷點非常的重要!
如果判斷式的像素太大等於沒設斷點,如果判斷式的像素太小又會造成始終讀不到....

在這邊可以小妹可以教大家參考Bootstrap的判斷點

以Bootstrap的角度來看

(圖片截取自:https://kkbruce.tw/bs3/CSS)

可以看到Bootstrap的關鍵判斷點有四個
媒體的寬度分別為

手機 → 768px以下
平板 → 768px ~ 992px 區間
普通電腦版 → 992px ~1200px 區間
高清電腦版 → 1200px以上

@media 在媒體寬度分別為以上關鍵判斷點時做載入@media括號內的動作

所以@media可以做很多應用,舉凡RWD、螢幕上的縮放特效、列印網頁等等....都可以使用@media去作裝置的運用!

那這邊先做Media Queries的介紹與應用,下一篇來實作與應用Media Queries的特性給大家看囉~

謝謝收看~


-----

文後-

在google上搜尋 Media Queries 第一頁前幾篇文章講解的都不錯喔~

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

2016/12/26

[day14]-改變策略!之手刻網頁使用@media製作RWD個人網站之三-電腦版頁面製作


做好前幾天的網站後發現網頁上有些問題,像是圖片會破版之類的.....Orz

實在是很抱歉的說~
因為我的工作不常常寫CSS,所以在這次鐵人賽也是對我一個自我檢討,哪方面要多多加強!

所以我們的網站就改手刻,然後用我比較熟悉的方式去做...敬請見諒

----




頁面上背景我設一個div為body,body上我切主要三大block為

top 、center、footer

還記得上篇所提到的block大小設定寬度(width)設定為彈性值、高度(height)需要設定數值這樣寬才有數值來作百分比的計算嗎?
(Review:[day13]())

SO~這三大block寬度我們都設定為100%,高度為以下設定
top:10vh ;
center:80vh ;
footer:10vh ;

總高→10vh + 80vh + 10vh = 100vh
這樣的高度設定總高為一個視窗的可視高度,就不會破版了~



主要版面設定好了,接下來要來設定次要重要的部分


#center 為頁面主要放置內容的地方,所以再往 center 裡面切 #left 與 #right

center定位設定為 相對定位(position: relative;);center裡的元素定位針對父元素的定位來做 絕對定位(position: absolute;)

以上設定為上面的螢幕結圖,我做了區塊的標示,讓大家可以更清楚我的想法~︿︿


到此為止,頁面可以試著拖拉縮放測試一下,在測試的時候我都會把block的css border打開來看div的變化與大小動作對不對

border:1px solid red;

自錄影片DEMO:



可以看到紅框框會跟著視窗作縮放的動作,並且不會跑版~^^

-------
最重要的版面調好不會破版後,就可以上文字、連結及圖片囉~

因為把視窗縮到最小會有文字與圖片全擠在一起的情形在!
所以在html的CSS裡我增加了 min-width 與 min-height 在頁面鎖上最小寬高

意指當我瀏覽器視窗小於所設定的數值後,網頁即不再做縮小的動作了,而可以鎖最小寬高也可以設定最大寬高囉~只是我這邊就不設定了,因為沒有特殊需求嘛~呵呵

剩下的就把文字與圖片間距的CSS調整一下,我大多習慣使用margin與padding去做設定,這方面的調整就因人而異了,因此就不在闡述囉~

那電腦版的頁面就到此結束了~
day15將一次製作平板與手機版的頁面囉~謝謝大家收看~

-----
文後-

手刻我只花了一個下午就全做好了...想想當初因該要用自己習慣的方式作比較快的說QQ

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


2016/12/22

[day13]好的網站和好的建築一樣,先打造好地基!Html5的架構&CSS3的裝飾(續-RWD電腦版)


續上篇[day12]好的網站和好的建築一樣,先打造好地基!Html5的架構&CSS3的裝飾,講解了格線系統的運作,第13天來寫我們個人網站RWD的電腦版!

我們用第12天做好的DEMO來改程式碼比較快,在第9天時我們設計了簡單的版型,現在逐一來測量網頁layout的間距等....

我設定的頁面大小為1440px*900px,可從上圖上可見初步的規劃:

灰色框框(border)上下為30px、左右為25px,先抓layout的尺寸去coding,但一切以瀏覽器看見的為主,隨時可在調作更動~

版面以一個div做為body來使用(個人作法啦~),灰色框框為#body的邊框,

#body {
        width: 100%;
        height: 100vh;
        border-color: rgba(204, 204, 204, 1);
        border-style: solid;
        border-width: 30px 25px 30px 25px;
        position: relative;
        top: 0;
        left: 0;
    }





這邊想必前端人一定都知道的網站:[w3school](http://www.w3schools.com/)裡面有非常多的範例與教學!

有問題時可去那常常看樣式屬性或有的沒的~
其中CSS Border樣式寫到
"

Border Width

The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border)."

邊框的四個邊都可分別設定,可以一次設定四個邊的值,設定值分別為
border-width:上邊框, 右邊框, 下邊框, 左邊框

(記法為順時針設定)


格線系統主要是認寬度來辨識device的大小;
所以#body的寬我沒有設固定的寬度,而是改用百分比來作計算,至於高度因為頁面寬已經給了百分比的數值給他,但是沒有給他明確的值「多少為百分之百」,這時候高度就要給他一個「明確的數值」!所以這邊高度我設定為100vh。

為什麼不是使用px值呢?

因為如果我使用了固定的px數,想必大家有編輯圖片時圖片的比例跑掉的經驗~
寬度是彈性的值而高度卻是固定值就會和圖片比例跑掉一樣,在網頁上呈現的也是如此!

這時候請善用CSS3的新單位「vh、vw」這兩個單位分別為可視視窗高(view height)及可視視窗寬(view width);

vh與vw既有確實的數值存在,也有彈性的數值性質存在!

舉例來說:
設定A標籤高度為50vh,瀏覽器的視窗高度1000px,那A標籤的高度等於視窗高度的一半→1000px * 50% = 500px→【 A標籤的高度為500px 】

假如A標籤設定高度改為100vh,瀏覽器的視窗還是一樣高度1000px,那A標籤高度就等於視窗的高度1000px

這就是為什麼我的頁面高不用px值,改運用vh這個新單位來作我的頁面高,因為他既有確實的數值,又有彈性的性質在←重要所以又說了一次!!


那今天首頁先講解到此好了~謝謝大大們耐心的收看!!


-----
文後-

對不起我脫稿了....請大家多多原諒....

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


2016/12/14

[day12]-好的網站和好的建築一樣,先打造好地基!Html5的架構&CSS3的裝飾


不得不說這個鐵人賽真的和小編說的一樣,連續寫30天真得很辛苦啊~推著自己在「不蘇湖」、「有點痛苦」、「咬牙硬撐」的情況下,才能蛻變成長~

好~那第12天了!要開始打造我們的個人網站了~

首先使用[day6](http://ithelp.ithome.com.tw/articles/10185316)的程式碼去做編輯,目標是先寫好我們的電腦版網頁,在撰寫html時我會搭配昨天介紹的Chrome extension之Bootstrap Grid擴充工具來看物件對齊的變化~

大概規劃一下架構為



我們一直提到的格線系統到底有什麼作用呢?

小妹我簡單打了一個範例文,可以讓大家了解到格線系統的運作方式~


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>King-Tzeng Ying Chi(day12)</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
    html {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #body {
        width: 100%;
        height: 100vh;
        border: 5px solid red;
        position: relative;
        top: 0;
        left: 0;
    }
    
    .container {
        /* height: 100%; */
        border: 1px solid blue;
    }
    
    .row {
        /*       height: 100%; */
        border: 1px solid green;
    }
    
    .wrapper {
        border: 2px solid #d4dcd6;
    }
    
    img {
        width: 100%;
        height: auto;
    }
    </style>
</head>

<body>
    <div id="body">
        <div class="container">
            <div class="row">
                <!-- <div class="wrapper"> -->
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                   <img src="https://api.fnkr.net/testimg/200x200/00CED1/FFF/?text=img+placeholder">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <img src="https://api.fnkr.net/testimg/200x200/00CED1/FFF/?text=img+placeholder">
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <img src="https://api.fnkr.net/testimg/200x200/00CED1/FFF/?text=img+placeholder">
                </div>
                <!-- </div> -->
            </div>
        </div>
        <div class="container">
            <div class="row">
                <!-- <div class="wrapper"> -->
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <img src="img/mypic_desktop.png">
                </div>
                <!-- </div> -->
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>



DEMO影片在此


簡單的說,格線系統是一個寫好的CSS框架,我們只要去遵循好他的規則,便可輕鬆製作RWD的網頁佈局!

格線系統是可以跨設備運作的,格線總共分為四種設備設定,分別為:

Extra small devices Phones (<768px)   → 手機設備
Small devices Tablets (≥768px) → 平板設備
Medium devices Desktops (≥992px) → 電腦版
Large devices Desktops (≥1200px) → 電腦版桌面(大型)

而如何設定我要的設備格線為多少呢?
(stylesheet)[http://getbootstrap.com/css/]上有寫到-

我做了一張圖 理解如何解析前綴字



這四種devices的前綴字為

手機設備 → xs
平板設備 → sm
電腦版 → md
電腦版桌面(大型) → lg

所以得到了,如果你要在手機版做RWD的圖片且佔4格的話
前綴字寫法是:

.col-xs-4

網頁上完整的語法是


<div class="col-lg-4">
  <img src="test/test.jpg" />
</div>

以上範例以此類推.....

但有一點要注意的是,格線系統欄位只有12格,當你大出欄位數後,他就會往下掉,這點要多注意!

例如
<div class="container">
    <div class="row">
        <!-- <div class="wrapper"> -->
        <div id="A" class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            A
        </div>
        <div id="B" class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            B
        </div>
        <div id="C" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            C
        </div>
    </div>
</div>



上面 id="c" 的內容會往下掉,原因是
A佔4欄 加上 B佔4欄 加上 C佔6欄 總共佔14欄 > 格線系統總欄數為12欄的限制!

這個範例我就不錄影了~

以上,格線系統大致上講解到此結束!
------------
文後-
(趴......)

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

2016/12/13

[day11]開發前!先來推薦好用的chrome extension好了~


我絕對不會說是因為code寫不完才來轉寫推薦工具的!(被打....

輔助開發工具也是很重要的,可以輔助我們在視覺上或是使用功能上的了解~
今天要來介紹幾個在我的瀏覽器上裝的幾個好用的工具,並講解有什麼作用!

視覺工具類:

APP名稱:
Bootstrap Grid


附上連結:
https://chrome.google.com/webstore/detail/bootstrap-grid/gmoboekiodfcajledjijioecfimliddo?hl=zh-TW

功能說明:
可以在任何網頁上覆蓋Bootstrap的格線系統,並觀察他的變化!
在開發時可以開啟此擴充工具,格線直接覆蓋在頁面上,方便觀看是否

demo(http://i.imgur.com/pCo8BLI.gifv)


APP名稱:
Edge: The Web Ruler

附上連結:
https://chrome.google.com/webstore/detail/edge-the-web-ruler/njlkegdphefeellhaongiopcfgcinikh

功能說明:
就是一把在螢幕上的尺XD,可以拿來量螢幕上元件或是頁面的尺寸也可以任意的移動!
尺的規格直式橫式都有,單位上有三種可以選擇px(像素)、cm(公分)、in(英寸),我拿來應用在量元件離視窗距離多遠等....

demo(http://i.imgur.com/QNyiNSO.gifv)

APP名稱:
Window Resizer Beta


附上連結:
https://chrome.google.com/webstore/detail/window-resizer-beta/pnhnbekjlbamfnnemcaolkjchjlidbib

功能說明:
可依照你按下的螢幕尺寸來縮放視窗大小,在做響應式(RWD)網頁時好用!
也可記憶你輸入客製化尺寸,一鍵縮放~
也可拖曳改變視窗大小,即時在右下角顯示現在的尺寸大小。

[Window Resizer_demo](http://i.imgur.com/JB0OcU9.gifv)


前端開發類:


APP名稱:
HTML5 Outliner


附上連結:
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo

功能說明:
此擴充功能,可以分析網站的元素大綱,方便助於SEO的優化!
按下後可以看出此網站的標題解析是否有階層式的排列下來,對於在google搜尋的話,如有清楚的標題層級,會相對提升搜尋的排行!

[HTML5 Outliner demo](http://i.imgur.com/swxaNaE.gifv)



APP名稱:
Wappalyzer


附上連結:
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=zh-TW

功能說明:
分析網站運用了什麼程式框架,並可點進連結裡看有什麼網站也是使用此框架,無聊的時候逛逛網頁,發現不錯的網頁可以看一下他是用什麼去寫的、埋了什麼在裡面~!

[Wappalyzer demo](http://i.imgur.com/LspJQaq.gifv)



APP名稱:
Postman


附上連結:
https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop

功能說明:
測試API的好物啊!!可以儲存你常用的Api並分類,還有回傳JSON值可幫你排列整齊,方便閱讀測試!我開Postman這個app的頻率比上述的都還多很多!好用!




這些都是我在工作開發時,常常用到的工具~分享給大家~
抱歉因為工作到比較晚,所以先發候補文了,在此鞠躬道歉....~

文後-
BLUE MONDAY.....

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

2016/12/11

[day10]-突破自我的罩門之網站.企劃.設計,RWD版面設計(平板、手機版)篇


上篇我們設計好首頁的電腦版呈現模樣,今天要來畫平板和手機版的layout~
(可是我畫的好簡漏啊....Orz)

一樣先開啟我們的繪圖程式Sketch,一樣照著格線系統去作規劃與排版的動作



這邊說明一下,電腦版和手機平板的格線一樣都是12條,可以照著你前面畫的規則去作排版~
像我的話就是直接複製電腦版的排版在做修改的動作,上面圖我用紅框框標起來看,文字的部分一樣我都是排三格,這樣在使用上看起來比較一致性,那風格就是一直延續下來~

手機版的部分比較特別,各家廠商的手機螢幕尺寸都不相同如果沒有特別需求的話,我建議是使用格線去排會比較準確,這就是為什麼要用Bootstrap的格線系統!如果你嫌Bootstrap太肥的話,Google上也有純格線的輕量化CSS框架讓你做使用~

那我就以iPhone 6的手機螢幕來作示範排版,Sketch的Template 手機版版型預設都是拉長的,有些人習慣把分頁的Layout接續畫下去,就看你的習慣如何囉~沒有一定!



像我是美術白癡,我就會把版面的大小設定成直接手機上的螢幕大小,以方便我觀看排版!

【如果不知道知道Device的螢幕大小,可以開啟Chrome按下右鍵→檢查(如圖說明)】







拉回正題!手機上的排版,我做了一些變化,像是垂直線變成水平線,考慮到手機上版面較小,把我的Menu用漢堡按鈕按下後才會出現,觸發Menu後只出現連結這樣版面上比較乾淨且在閱讀上比較舒適,不會過度擁擠~


好了~終於把版都排好了~給大家看看在各個平台上的呈現比較:

格線模式↓


拿掉格線後:最後輸出































最上面電腦(HD)、下排分別是電腦→平板→手機

輸出排版layout:

【平板-首頁】



【手機版-首頁】


【手機版-Menu】



那~我們版面設計的地方到此告一個段落,明日會來實際建制我們的個人網站-首頁!
--------

文後-

設計門終於結束了~QQ搞了好久啊.....

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

[day9]-突破自我的罩門之網站.企劃.設計,RWD版面設計(電腦版面)


昨兒架好我們的免費虛擬主機後,終於要進入我們的正軌了~

開始設計個人網站的版面配置,這邊大概說一下網頁應用程式的整套流程為

企劃→設計→製作開發→測試→發布→更新

那我因為我主要想做的是個人作品集嘛~
我們在day5的時候已經大致規劃好需要的頁面了,今天來做一個版面的設計~
小妹我最不會的就是設計了~嗚嗚QQ 記得在網路上看到有一說,
「設計人的思考是橫向的、程式人思考是直向的」

好吧~我簡陋了畫了一個初稿,在紙筆上畫出最直接的想法~


哈哈~真的超簡陋的XDD

有了初稿後,在用繪圖軟體規劃一下實際在電腦上看到的頁面~
在這邊繪圖軟體使用Sketch(只支援mac OS系統)
如果你是win系統的話,沒關係~可以使用Adobe出的Photoshop、illustrator等等不設限....


其實我比較常用的是Photoshop CC版本,但是因為Sketch有出一些Web Design的Template,鐵人賽講求快速的話,是一個不錯的選擇~(但我不太會用....)

下圖是Sketch的RWD的格線系統Layout模式,直接清楚明瞭的讓你看在各個平台上輸出的模樣



左到右為的版面為:電腦HD(桌上型)、電腦(比較偏筆電)、平板、手機版



要做RWD網頁的話,可以開啟格線系統Layout模式,他會直接給你12條格線方便你排版,排完後可關起來看整體的感覺~當然如果你不要制式的12條格線,下面有Layout Settings讓你自己調整格線的間距和格線數目



如果是畫UI的話,可以開啟輔助格狀模式,我現在一格調整為20像素(px),一樣可以透過Grid Settings去設定你想要一個多大等等.....

(小妹我因為沒有準備好圖片,所以花了一點在修圖等等的....sorry....)
首先想要的效果是簡潔、簡單、現代化、視覺化,花了一些時間畫出我的首頁layout,在製作過程中,可以看到我的文字和圖片對齊至格線,這樣之後在Coding時搭配我們Bootstrap格線系統,會相較好掌控並比較容易撰寫!
以下是我在畫layout的過程,貼上來給各位看看~希望大家不嫌棄可以提出建議~呵呵~

首頁的部分~











首頁的成果視覺Layout:


 電腦版 版面配置(HD)



 電腦版 版面配置(小螢幕)





那今天就先設計到這邊囉~明天再來設計平板&手機版的頁面囉~
--------

文後-

我真的很不會視覺設計啊.....Orz

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

2016/12/09

[day8]-計畫乾坤大挪移,先來申請免費的虛擬主機好了~(續)


回顧一下昨天的文章

[day7]-計畫乾坤大挪移,先來申請免費的虛擬主機好了~(但世事變化無常啊Orz

填完表單地獄後,請到當初填的email收個信,lionfree共寄來了六封信!
但其中有兩封比較重要的~


1.驗證mail信,請點擊他付給你的連結來啟動帳號~


2.你申請的主機帳號資訊,用下圖來詳細解說



   Cpanel主機登入資訊
重要!還記得第4天的時候叫大家先在載好FlieZilla嗎?FlieZilla設定好一些參數後,可以透過ftp的方式快速的跟虛擬主機連線,並把我們的站台上傳到虛擬主機空間裡!
這邊做了張圖,方便大家做設定來連線到我們的lionfree主機裡




(不好意思因為要壓浮水印,圖有點亂兒....因為身邊曾經聽過盜文事件,敬請見諒...)

接下來都設定好後就給他連線下去!!ya~
歷經了那麼多風風雨雨我們終於連線到了目錄底下!終於可以傳網頁上去試試了~
開始作上傳的動作吧~



欸!才剛說經歷了風風雨雨終於設定完成,馬上又遇到了一個問題!Orz....



馬上膜拜一下Google大神,果然得到答案!↓↓↓
[使用filezilla 出現錯誤訊息: 421 too many connections (8) from this ip](http://support.unethost.com/knowledgebase.php?action=displayarticle&id=143)

好~小調整後再上傳一次我們**day4說的範例檔,果然咻一下就上傳上去了**!ya!

這樣架站的部分就算告一段落了~灑花慶祝一下~
那明天就可以來設計我們的版面後,開始程式端的撰寫囉~
--------
文後-
盜文或盜圖真的很無恥啊!!別人研究的心血就這樣一瞬間被當抄襲....(感歎....


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

2016/12/08

[day7]-計畫乾坤大挪移,先來申請免費的虛擬主機好了~(但世事變化無常啊Orz


世事無常啊Orz....

為什麼這樣說呢....因為我昨天寫完文章後覺得好像網頁結果用截圖的方式呈現不是很好...
所以今天想說來和大家分享如何申請隸屬redhat的Openshift免費虛擬主機,然後把每天的進度放上去分享給大家,殊不知......

OpenShift居然改版了Orz....而且剛剛花了一小時稍微了解一下,好像他們正在作升級的動作,現在要辦帳號的話要用GitHub帳號去做登入,而且他的常見問題裡寫到:

> HOW AM I BILLED?
> 我什麼時候需要付費?
> During our Developer Preview period, OpenShift Online (Next Gen) is FREE!
>在我們的開發者預覽期間,線上 OpenShift(下一代)是免費的!

欸?那過了期限後就要付費的意思嗎?然後我越看越不對....
> HOW LONG WILL I HAVE ACCESS TO THE ENVIRONMENT?
> You will have access to the OpenShift Online (Next Gen) Developer Preview environment for 30 days, at which point your account will expire.

> WHAT HAPPENS WHEN MY ACCOUNT EXPIRES?
> Your account, applications, and data will be permanently deleted to free up resources for other users when your account expires. This means that you will no longer be able to log in to the web console, authenticate using the OpenShift CLI tools, or access your applications and related data.

大意是下一代Openshift和AWS一樣都只提供30天服務而已了....過了30天之後他就會把你的環境給刪掉....QQ嗚嗚
好吧....那山不轉人轉,在google上又搜尋到一個免費的虛擬主機-獅子免費虛擬主機~試用看看囉!

小妹我也是第一次試用~不成功、便睡覺(喂~)
---------------
1.來到首頁(http://lionfree.net/)

















slogan寫道:"最自由的虛擬主機服務!"



2. 接下來我們來作一個註冊的動作














點擊註冊後:會進去購物車頁面,第一項:【選擇一個網域名稱】

若你有申請自己的網址名稱的話,請勾選第一項



我沒有申請自己的domian name,所以點選第二項,【使用他提供免費的子網域】作來使用


藍色框框內,你可以填自己喜歡的名字,將來http://XXXXXXX.lionfree.net就是你的網址名稱

按下check後,他會確認你申請的網址有沒有人使用,像我一下就過了XD
會小小的loading一下後進入下個頁面~






嗯....接下來是問你要不要贊助他們的頁面,好~我答應你好用的話,我會贊助你的~
不過現在先按`繼續`~

















接下來要在結帳一次....嗯~`Checkout`
















好的~再重申的一次小妹也是第一次自己辦啊.....
接下來是表格地獄....圖中必填的來填一下吧...Orz

 


OK~經過一堆繁瑣的程序後,終於到了訂單確認(怎麼越來越像在購物....)







  


經過了一連串的申請後,系統寄出了收到了6封信給我,那今天先暫且做到這好了.....
明日繼續架獅子主機~一定要成功啊!!
-----
文後-
小妹我從挑戰開始的第三天就開始感冒到現在....四天了.....奉勸大家身子要顧好啊...
(抱病寫鐵人賽的我....

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