Ruby: 2015

2015年2月11日星期三

作業用素材

2015年2月4日星期三

HTML/CSS

Fonts & Interactions

Font Face

之前有介紹到設定字型，當使用者沒有字型時，瀏覽器會自動使用備用字型，而@font-face可以讓網頁載入網路上的字型，或是設計者的字型檔，讓網頁製作更具有彈性
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@font-face{
font-family:'OpenSansBold',Helvetica,Arial; --這裡設定使用的字型與備用字型
src:url('OpenSansBold-webfont.eot'); --字型的位置，也可以用local("字型名稱')
使用者電腦中的字型，以逗號分隔可設定備用字型
font-style:normal;
font-weight:bold;
}

Transforms

transform可以指定元素的特效

transform:translate(3px,5px) --向右移 3px 下移 5px，可以分別以translateX、translateY來設定
transform:rotate(45deg); --元素旋轉45度
transform:scale(1.2) --橫向、縱向縮放元素1.2倍，以逗點分隔或scaleX Y可分別指定，若是scale(0,2)表示只有縱向放大兩倍
transform:skewX(-25deg) --元素橫向傾斜-25度，以逗點分隔或skewX Y可分別指定

Transitions

transition可以做出簡單的動畫效果，transition:<property> <duration> <timing-function> <delay>

transition-property --表示要改變之屬性的屬性名稱(background-color)，all表示全部
transition-duration --效果的持續時間，單位是/s秒，預設為0
transition-timing-function --效果的速度，有八種(ease、ease-in、ease-in-out、linear、cubic-bezier、step-start、step-end、steps())
transition-delay --效果發生的延遲時間

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.element{
background-color:black;
color:white;
transition:all 0.2s ease-in-out; --效果持續0.2秒，.element的元件都會改顏色
}

.element:hover{
background-color:grey;
color:black;
}

HTML/CSS

CSS3 Styles

Multiple Backgrounds

這個CSS3的新屬性可以做出圖片重疊的效果
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
background-image:url(bg1.png),url(bg2.png); --以逗點分隔兩個圖片的設定
background-position:top left,center right;
background-repeat:no-repeat,no-repeat;
}
這也可以縮寫為
{
url(bg1.png) top left no-repeat,
url(bg2.png) center right no-repeat;
}

Color

在CSS3中color也增加了兩種新屬性，分別是RGBa、HSLa
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
color:rgba(255,255,255,0.75) --前三個值為0~255與過去相同，但不可以使用十六進制(ff、6c)，最後一個值為不透明度0~1，0表示完全透明，1表示完全不透明
}
{
color:hsla(120,0%,50%,0.6) --依序為色相值(0或360紅色、60黃、120綠、240藍)，飽和度(0%~100%)，亮度(0%~100%)，不透明度(0~1)
}

Opacity

opacity是不透明度的屬性值，可以用它來設定不透明度(0~1)，0是完全透明，1是完全不透明
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{

opacity:0.45; --0~1

}

<div class="element">
<h2>
Hello.
</h2>
</div>
.element{
background:url(bg1.png) center no-repeat;
opacity:0.45;
}

整張圖片(含字)都會變透明

Gradients

在CSS3中也新增了漸層色的功能，分別是Linear-gradient 線性漸層、Radial-gradient 放射狀漸層

Linear-gradient

{

background:linear-gradient(to bottom ,red ,yellow); --輸入值為漸層角度、起始色、結束色

}

to bottom表示從上往下，這裡也可以輸入deg(角度)

red,yellow 表示從紅色到黃色，也可以是red 70%,yellow 30% 代表70%是紅色30%是黃色

0deg --to top(往上)

90deg --to left(往左)

180deg --to bottom(往下)

270deg --to right(往右)

Radial-gradient

radial-gradient用以建立放射狀漸層，輸入值為radial-gradient(<shape> <size> at <position> ,<color-stop>s)，其中size有四種特別字可使用：closest-side、closest-corner、farthest-side、farthest-corner(預設)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{
background:radial-gradient(circle at top left,aqua,blue);
--從左上開始漸層的圓形
}

{
background:radial-gradient(aqua,blue);
--預設從中間開始漸層
}

HTML/CSS

CSS3 Styles

在CSS3中增加了一些屬性，讓網頁特效製作更為方便

Border Radius

這是一個產生圓角效果的屬性，可以分別設定四個角的圓半徑
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{
border-radius:15px; --代表四個角都是15px
}

{
border-top-left-radius:4px; --將左上角圓半徑設為4px
border-top-right-radius:15px; --將左上角圓半徑設為15px
border-bottom-left-radius:12px; --將左上角圓半徑設為12px
border-bottom-right-radius:10px; --將左上角圓半徑設為10px
}

也可以寫成
{border-radius:4px 15px 12px 10px;}
依順序填入左上、右上、左下、右下角的圓半徑

要注意的是，如果圓半徑大於等於box的50%時，會變為圓形或橢圓形

{box-radius:50%;}

Box Shadow

box-shadow是一個陰影的屬性，總共有六個輸入值，前四個值都是尺寸值(不可以是%)，其中模糊強度blur不可為負，前兩個值為必填，其他可不填
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{box-shadow:offset-x offset-y blur-radius spread-radius color inset:}
依序代表X軸及Y軸位移值(可為負)、模糊強度、擴散強度(可為負)、陰影顏色、內陰影

{
box-shadow:1px 2px 2px #000; --表示陰影向下移1px、右移2px，模糊強度為2px
}

下面是blur-radus及spread-radius的效果

{box-shadow:1px 1px 2px #000,inset 1px 1px 2px blue;} --分別設定外、內陰影

{box-shadow:-1px -2px 2px #000;}
將陰影位移值設為負

Text Shadow

text-shadow與box-shadow大致一樣只是套用在文字上，但只有四個輸入值
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{text-shadow:offset-x offset-y blur-radius color:}
依序代表X軸及Y軸位移值(可為負)、模糊強度、陰影顏色

{text-shadow:1px 2px 2px #000;}

Box Sizing

box-sizing是用來改變box長寬計算的屬性，首先要瞭解之前介紹過的Box Model

box-sizing有三種值分別是:content-box(預設)、padding-box、border-box
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{
border:2px solid black;
margin:20px;
padding:10px;
width:300px;
}
這個box的width是324px=300+10*2+2*2
這也是content-box的計算方式

如果改為padding-box，那width是304=300(280+20)+4
如果改為border-box，那width是300=276+20+4

2015年2月2日星期一

HTML/CSS

HTML5 Forms

在HTML5對form做了一些改變，如下

新的input type
新的form 元件
新的form 屬性

增加的input type有以下13種，如果瀏覽器不支援以下類型，會預設為text，讓網頁製作更為方便

Search --手機鍵盤上會有search鈕
Email --手機鍵盤上會有@、.符號
URL --手機鍵盤上會有.、/、.com符號
Tel --手機跳出數字鍵盤
Number --手機跳出數字鍵盤，桌機輸入框旁有加減鈕
Range --會出現一可往左右拉的選取條
Date --手機上會跳出日期選擇，桌機出現日曆
Month --與Date相似，但只能選月份
Week --與Date相似，但只能選某星期
Time --可選時間
Datetime --可選時間與日期
Datetime-local
Color --可以呼叫調色盤

Datalist

datalist可以在網頁上建立一個輸入框，與select有些類似，但使用者是以文字輸入，當使用者輸入第一個字時，下方會自動跳出開頭一樣的選項(類似google)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<input type="text" list="browers" /> --list與id要相同
<datalist id="browers"> --id與list要相同
<option value="Firefox"> --選項
<option value="Chrome">
....
</datalist>

form屬性

在HTML5中，form增加了14種屬性，以下介紹 Placeholder、Autofocus、Required及Pattern 4種

Placeholder

Placeholder是input的預設值，用來說明要輸入的資料為何(Email、電話...)，只要使用者輸入資料，預設值就會自動刪除
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<input type="text"placeholder="Enter your Email.."/>

Autofocus

當網頁開啟時，焦點會自動移至autofocus的input

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

Required

若input中有required屬性，那麼該input必須要有值才可以送出，如果沒有輸入值是無法送出的

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

Pattern

若input中有Pattern屬性，那麼該input有限制的格式，範例要輸入0-9組成的三位數數值，如果沒有符合條件，是無法送出的

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

<input type="text" pattern="[0-9]{3}" /> --格式是3位數的0-9數字

HTML/CSS

HTML5 Elements

與HTML4相比，HTML5增加了新的tag，幫助使用者更方便進行管理，不需要使用一大堆的div tag，下圖是新增的tag

section

section表示文章的一部分、一段落，與div類似，但是div並無代表意義，如果只是要區分區塊的話使用div，如果該區塊是有意義的話使用section
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<div class="section">
<h2>The Gallery</h2>
..........
</div>
上面是過去的寫法使用div tag，下面是使用HTML5的section tag
<section>
<h2>The Gallery</h2>
..........
</section>

<h1>This is the title of the page</h1>
<section>
<h2>This is the title of a sub-section</h2>
</section>

header

header表示標題、標頭，在一個網頁中可能會有多個不同的header
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<div class="header">
..........

</div>

下面是HTML5的header tag用法

..........

</header>

header 可能是網頁的標題，也可能是一段文章的標頭

<h1>The heading of the section</h1>

<p>this is content in the heeader</p>

</header>

<p>This is some information within the section</p>

</section>

footer

footer表示文章的結尾、表尾

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

<div class="footer">
..........

</div>

下面是HTML5的footer tag用法

..........

</footer>

<h1>The heading of the section</h1>

<p>this is content in the heeader</p>

</header>

<p>This is some information within the section</p>

<p>By "Author Name"</p>

</footer>

</section>

aside

aside是用來存放網頁的附加資訊、說明文字
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<div class="sidebar">

..........

</div>

下面是HTML5的aside tag用法

<aside>

..........

</aside>

<h1>The heading of the section</h1>

<p>this is content in the heeader</p>

</header>

<p>This is some information within the section</p>

<aside>

<p>Some secondary infrmation</p>

</aside>

<p>By "Author Name"</p>

</footer>

</section>

nav

nav通常用用來存放連結

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

..........

</div>

下面是HTML5的nav tag用法

<nav>

<ul>

..........

</ul>

</nav>

article

article是另一種特別的section，與section不同的是它通常是放一獨立起完整的內容，通常包含header及footer

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

<div class="article">

..........

</div>

下面是HTML5的article tag用法

<article>

..........

</article>

main

一篇文章中只會有一個main用來表達文章的主旨
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<div class="main">

..........

</div>

下面是HTML5的main tag用法

<main>

..........

</main>

figure
figure通常放置插圖、圖片、圖表等，裡面包含標題
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<figure>
<img src="image.jpg" alt="My Picture"> --src是圖片位置，alt是圖片說明
<figcaption>This is a caption for the picture</figcaption> --表示圖的標題
</figure>

time
time用來表示時間
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<time>2014-12-24</time>
如果我想要更換格式
<time datetime="2014-12-24">12/24/2014</time> --只要在datetime屬性內輸入正確的時間，中間就可以打你所想要顯示的格式

2015年1月28日星期三

HTML/CSS

Overview & Updates

在接下來會介紹HTML5的更新，下面先介紹HTML5的更新項目

Doctype
Meta declaration
Script tag
Link tag

Doctype(Document Type)文件類型定義

Doctype是用來宣告，該網頁的 HTML、XHTML 所用標籤是採用什麼樣的 (X)HTML 版本。
宣告DTD文檔類型，裡頭包含了 HTML、XHTML 標籤規則，瀏覽器依據 DTD 來分析 HTML 的編碼，在HTML5簡化為<!DOCTYPE html>

Meta declaration

過去我們宣告網站內容的種類與編碼，要在寫入

在HTML5只要寫

就有一樣的效果了

Script tag

HTML5在加入js檔也變得更簡單了，過去是

而現在不需要寫type了，瀏覽會自動判讀

Link tag

以前載入CSS檔案需要打

現在只需要

2015年1月27日星期二

HTML/CSS

Font

網頁製作中除了之前介紹的圖片、排版等，必定會用到文字，在word上有的基本字型設定，在CSS都可以做到

font-family:Helvetica,Arial; --設定文字字體，要注意的是如果使用者沒有第一個字體會套用下一個字體，所有可多設定幾個字體作為備用

font-size:20px; --設定文字大小，屬性如下

固定數值15px、1em、1.2cm
small(小)、large(大)
120%(比上一層的120%)、smaller(比上一層更小)、larger(比上一層更大)

font-weight:bold;

normal --正常
bold --粗體
bolder --比粗體更粗
lighter --細體
100,200...,900 --粗度

font-style:italic; --設定文字的樣式

normal --正常
italic --斜體
oblique --傾斜

font-transform:uppercase; --設定英文單字的大小寫

uppercase --所有英文單字字母都是大寫
lowercase --所有英文單字字母都是小寫
capitalize --英文單字的第一個字母是大寫，其餘是小寫

line-height: 1; --設定文字行間距

normal --預設值
1、2... --字體大小乘以此數值設定為行高
25px --兩行間距20px
120% --字體大小乘以此數值設定為行高

text-decoration:underline; --替文字加上特效

none --預設值，沒有特效
overline --增加上線
underline --增加底線
line-through --增加刪除線

text-align:center; --設定文字的對齊

left --靠左對齊
right --靠右對齊
center --置中對齊
justified --左右對齊

Form

如果網頁需要使用者輸入的資料時(登入帳密、填寫會員資料)，我們會使用到form表單，form裡會放入需要被送到server端的tag，比如說明文字的label、輸入帳號的input tag、勾選用的checkbox、輸入資料的text area以及送出的submit

input --輸入相關tag，在input只能輸入單行資料

text --常見的輸入方塊(帳號)，只有單行
button --按鈕，在按下後可執行某些動作
checkbox --勾選的方塊，可以複選
radio --多選一的選單，不可複選
password --密碼的輸入方塊，輸入值在畫面上是顯示＊
submit --點擊後會送出所在的form表單
file --點擊後會跳出開啟檔案的視窗

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

<form>
<label for="usrname">使用者名稱</label>
<input type="text" id="usrname" > --上面有紹input type的屬性值
</form>

label --標記文字，說明要填入的資訊為何
-------------------------------------------------------------
<form>
<label for="usrname">使用者名稱</label> --for要輸入想要標記的tag的id
<input type="text" id="usrname" >
</form>

textarea --文字區塊，在input只能輸入單行的資料，而textarea可以輸入多行，在textarea裡也可以使用font設定其字型
-------------------------------------------------------------
<form>
<label for="proposal">建議</label>
<textarea id="proposal" ></textarea>
<input type="text" type="submit" value="確定"> --value值為使用者所看到的文字
</form>

Inline&Block

label與input是inline-level，在使用為求美觀，通常會設定成block-level(display:block)；inline-level與block-level最大的差異是block-level有margin、padding、border等屬性，而inline-level沒有
-------------------------------------------------------------
input{
diplay:block;
}

Attribute selectors

在設定指定tag時也可以指定某一個tag的特定屬性，比如指定input tag的屬性為type值為submit，給予其CSS設定(如下)
-------------------------------------------------------------
input[type=text]{ --在tag名稱後面打上中括弧，括弧中寫上屬性名稱=屬性值
border:2px solid #f41342;
font-size:18px;
padding:5px;
}

2015年1月26日星期一

HTML/CSS

Images

在網頁中我們常會使用到圖片，圖片分為三種content images、layout images、user interface images，在下面會分別進行介紹

Content Images

是指網頁中內容的一部分，比如購物網站上的商品圖片，圖片的tag是img，圖片、網頁要放在相同資料夾
---------------------------------------------------
<img src="cat.png"> --src後面加上圖片的名稱及副檔名，副檔名一定要打

但是一個網頁中會有多張圖片，如果全部都放在資料夾內會難以整理，這時我們可以將圖片放在各個資料夾，在src中加上資料夾名稱
---------------------------------------------------
<img src="animal/cat.png"> --讀取animal資料夾內的cat.png

有時候網站會無法讀取圖片，所以最好在圖片內加上說明，指出這張圖片是什麼，或是其作用
---------------------------------------------------
<img src="animal/cat.png" alt="這是一隻貓"> --在alt內輸入說明的文字

也可以將圖片放入清單內，但是清單前面都會有一個項目符號，且每張圖都換行，這時可以這樣修改
---------------------------------------------------
ul{
list-style-type:none; --將項目符號關閉
padding:0;
}
ul li{
display:inline; --將圖片設定為同一行，不換行
}

我們也可以將LOGO變為圖片，但這時想要將圖片置中，並不能使用center，因為img是屬於inline，這時需要修改display屬性與margin
---------------------------------------------------
img{
display:block; --將img改為block，這樣就可以設定margin
marign:0 auto 0 auto; --之前提到的置中效果
}

Layout Images

layout images通常是指非內容的圖片，通常是指背景圖片，藉由backgroung來設定背景圖

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

background-color:#ffffff --設定背景顏色為#ffffff

background-image:url(image/home.jpg); --url的括弧內是圖片的位置與檔名

background-position:(top center bottom)(left center right); --設定背景圖片出現的地方，這裡有兩個值，下圖是該屬性表示的意思

－－－－－－－－－－－－－－－－－－－

｜ top left ｜ top center ｜ top right ｜

｜－－－－－－－－－－－－－－－－－｜

｜center left ｜center center ｜center right｜

｜－－－－－－－－－－\－－－－－－－｜
｜bottom left｜bottom center｜bottom right｜

－－－－－－－－－－－－－－－－－－－

background-repeat:(repeat repeat-x repeat-y no-repeat); --若圖片太小會無法覆蓋網頁，可以設定該屬性，讓背景圖重複出現，這是圖片出現的不同方式
repeat --會讓背景圖重複出現在X軸與Y軸，即覆蓋整個頁面
repeat-x --背景圖只在X軸重複
repeat-y --背景圖只在Y軸重複
no-repeat --背景圖不重複

background:#ffffff url(image/home.jpg) top left repeat; --也可以簡化成這樣

在輸入英文時會更改其大小寫，使用這個屬性會更方便
---------------------------------------------------

text-transform --設定英文的大小寫，有三種
uppercase --所有字母都是大寫

lowercase --所有字母都是小寫
capitalize --每個單字的第一個字母是大寫，其餘是小寫

Floating Images

float浮動是現在網頁製作時常會使用到的屬性，由其是使用在div，float可以更好的進行版面的調整、配色等，對於美工更加方便、有彈性

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

<li>

<h3><a href="...">MyCat</a></h3>

</li>

</ul>

.flt{

float:left; --float使圖片浮向右邊，字就會自動上移

}

2015年1月24日星期六

Ruby 初階課程

Ruby是一個物件導向的程式語言，是由日本人松本行弘(Matz)設計開發的，減少編程時候的不必要的瑣碎時間，讓編寫程式的人高興是設計Ruby語言的Matz的一個首要的考慮；其次是良好的介面設計。他強調系統設計必須強調人性化，而不是一味從機器的角度設想

人們特別是電腦工程師們，常常從機器著想。他們認為：「這樣做，機器就能執行的更快；這樣做，機器執行效率更高；這樣做，機器就會怎樣怎樣怎樣。」實際上，我們需要從人的角度考慮問題，人們怎樣編寫程式或者怎樣使用機器上應用程式。我們是主人，他們是僕人。

因此Ruby的語法很直觀，較容易理解，與其他程式語言有較大的差異，現行使用版本通常為2.0以上，課程中所使用編輯器為sublime text

使用指令：

gem list --目前安裝的套件

gem unpack PACKAGE_NAME --查看該套件的位置

Ruby 基礎

Ruby是完全物件導向的程式語言
Ruby 中所有東西都是物件，除了block

Ruby 中所有東西都是物件，除了block
變數不需要進行宣告，不用打String x=1;，可以直接寫x=1

變數

@+NAME　 --實體變數
@@+NAME --類別變數

Ex:name="abc" --區域變數

Ex:Name="abc" --常數以大寫字母開頭，可以被改變

$+NAME --全域變數

基礎用法

if

if x==1

puts "1"

else

puts "2"

end

在Ruby中的if用法是If elsif end

其他也有case...when...end
---------------------------------------------------------------------------------------------

陣列

friends =[1,2,3] --宣告陣列，陣列中有1、2、3
印出陣列程式碼

for friend in friends

puts friend

end

friends.each do |friend|

puts friend

end

這兩種寫法是一樣的，通常使用下面的each寫法

陣列的指定
指定第一個位置為friendds[0]、friends.first，最後為friends.last
p friend　可以印出該陣列的值
(1..52).to_a --會宣告一個1~52的陣列
---------------------------------------------------------------------------------------------

迴圈

分別印出從1~10與10~1 的迴圈

1.upto(10) do |i| --將1~10照順序帶入變數i

puts "ht,ruby #{i}" --印出十次

end

10.downto(1) do |i| --將10~1照順序帶入變數i

puts "hi,ruby #{i}" --印出十次

end

宣告一個1~100的陣列並加總

(1..100).to_a.each do|i| --將1~100照順序帶入變數i

sum+=i --將sum+i，也就是1+2+...+100

end

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

宣告mothed方法

def say_hello_to(name,age) --宣告一方法say_hello_to，且有輸入值name、age

puts "hello, #{name},I am #{age}" --印出子串，並帶入變數

end

say_hello_to("abc",18) --這行呼較叫say_hello_to並帶入兩變數

結果為hello, abc ,I am 18
puts ""中的#{name}表示在字串中帶入變數name的值

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

yield 控制權移出

def do_something

puts "1"

yield "xyz", 12 --移出並帶入變數

puts "2"

end

do_something do |i,j|

puts "Hello #{i} ,#{j}"

end

結果為 1 Hello xyz,12 2
當執行到 yield時，自動執行do_something，如果沒有打do_something，並不會執行do_something

if block_given

yield

end

也可以寫成 yield if block_given?
---------------------------------------------------------------------------------------------

Class

class Animal --宣告class 變數字首必須要大寫

def sleep

puts "z~z~z~"

end

class Cat < Animal --代表Cat繼承Animal

end

class Dog < Animal --代表Dog繼承Animal

end

dd=Dog.new

dd.sleep --因為繼承Animal，所以有sleep

cc=Cat.new

cc.sleep --因為繼承Animal，所以有sleep
---------------------------------------------------------------------------------------------
class Dog

end

dd=Dog.new

def dd.sleep --宣告dd.sleep，只有dd可用其他的不可以用

puts "zzzz"

end

dd.sleep
結果為 zzzz

cc=Dog.new
cc.sleep --因為只有dd.sleep，所以cc會找不到sleep方法

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

類別方法

class Dog
def self.fly --self 可以寫成Dog
puts "aa"
end
end

dd=Dog.new

Dog.fly
結果為aa
---------------------------------------------------------------------------------------------

Protected

class Dog
def sleep
secret --secret、self.secret皆可以
self.secret --secret、self.secret皆可以
end
protected
def secret
puts "heyhey"
end
end
dd.sleep
---------------------------------------------------------------------------------------------

Private

class Dog

def sleep

puts "aa"

end

private

def secret

puts "heyhey"

end

dd=Dog.new

dd.secret --因為是pirvate程式，所以會錯誤

dd.send(:secret) --可以直接呼叫private的程式

改成這樣就可以

class Dog

def sleep

secret --前面沒有東西，不可以用self.secret

end

private

def secret

puts "heyhey"

end

dd.sleep

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

class Dog

def initialize(name)

@name=name

end

def name

@name

end

def name=(new_name)

@name=new_name

end

dd=Dog.new("lucky")

puts dd.name
- - - - - - - - - - - -

class Dog

attr_accessor:name

def name

@name

end

def name=(new_name)

@name=new_name

end

dd=Dog.new("lucky")

puts dd.name

以上兩個是相同的意思，只是縮寫

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

Module 模組

有時會我們會需要需要一些特別的方法，但又不想要使用繼承，這時候可以使用Module

模組無法繼承
模組無法實體化

module Flyable --宣告模組flyable

def fly

puts "I can fly"

end

class Dog

include Flyable --組入模組flyable

end

Dog.new.fly
---------------------------------------------------------------------------------------------

特殊用法&注意

a ||=10 --表示若a沒有宣告即為10，若有就沒做動作
# --後面是註解
5 time{} --代表將{}內程式執行5次
nil --等於空、沒有的意思
10/3 --為3因為前後都是整數
10/3.0 --為3.333....

字串宣告為單引號''、雙引號""，單引號內不可以呼叫變數，雙引號可以"hello, #{name}"
字串宣告也可以用%q(a) == 'a'、%Q(a) = "a"

陣列內不一定要存放相同的類型，可以同時存數字與文字

10 ** 2 --是指10的2次方

xxx.superclass --會印出xxx繼承自誰
open Class --Ruby可以更改class包含預設的，如+、-、*、/
---------------------------------------------------------------------------------------------

之前在學校都是使用java、javascript，今天了解了Ruby發現它真的是一個很特別的語言，與之前看過的程式語言都不太一樣，因差異太大，有學過java反而有點難懂，如果熟練了之後，寫程式可以更快更方便

Git

在進行程式開發時，我們經常會備份以防止意外，備份常常是在檔名後加上日期，若一天有多次修改甚至會有_1_2，或是有時候需要進行重大的修改，又要複製整個程式，Git可以解決這一個問題。

Linus Torvalds是Linux核心的最早作者，他也是Git的主要開發者，Git是為了更好管理Linxux核心所設計的；Git是一個版本控制系統，它可以開很多branch(分支)，給多個開發者使用，能讓程式開發工作更順利。

下列是基本的指令

git --version --查看目前Git版本

git config --global user.name "......" --設定user的名稱

git config --global user.email ....@....com --設定user的email

git clone https://github.com/.... --下載該網址的檔案

git init --將目前所在資料夾初始化

touch xxxx.rb --建立檔案xxxx.rb

git status --查看在各區域的檔案(工作區=紅色，暫存區=綠色)

git add xxxxx.rb xxx.rb… --將檔案xxxxx.rb 與 xxx.rb 加入暫存區(綠色)

git add –all --將所有檔案加到暫存區

git rm --cached xxxxx.rb --將暫存區裡xxxxx.rb的檔案刪除

git commit –m “xxxxx” --將檔案存檔”註記文字”

nano xxxxx.rb --以nano編輯器開啟xxxxx.rb檔案

新建的檔案及變動過的檔案會自動進入工作區(紅色)
經由add指令可以將檔案加入暫存區(綠色)，但是暫存區的檔案並沒有備份，
必須要在使用commit指令存入倉庫區，才有備份成功

git log --可看歷史使用紀錄(如果檔案出問題可以在此觀看是誰改了)

git commit –amend --可以修改commit訊息(註記)，重要的辨識資訊

git checkout xxxxx.rb --取消之前指令，若不小心刪除檔案可以以此恢復

branch 是Git中一個重要的功能，如果程式有實驗性的新功能、Bug的修正等...，可以使用branch，在branch上的修改並不會影響到主線，因此分支可以任意修改，在任何時候都可以將分支Merge(合併)，在進行程式開發工作時這個功能十分方便

git branch --可查看目前分支

git branch xxxx --新建分支xxxx

git checkout xxxx _切換至分支xxxx

git merge xxxx -合併分支(將xxxx分支併入目前所在分支)

git branch –D xxxx --刪除分支xxxx

git push origin master --將倉庫區的檔案上傳至Github

git pull --從遠端更新本地端的檔案，clone是下載、pull是更新，兩者不同

2015年1月21日星期三

HTML/CSS

Classes and Layout

Class

在網頁製作的過程中，我們常會使用CSS進行網頁介面的美化，但若每一種tag只能有一種樣式，實在太不人性了，因此我們可以使用Class來指定設定某些tag，藉由class套用格式，讓網頁製作更為方便、快速

如果要套用CSS格式，我們可以這樣
---------------------------------------------------
ul{color:#000000} --修改所有ul的文字顏色改為#000000
ul li{color:#000000} --修改所有ul中的li，將文字顏色改為#000000

或是指定特定項目
---------------------------------------------------
ul li:first-child{color:#000000} --修改ul中的第一個li的文字顏色

但是只有這樣還是不夠，藉由class能改變特定某幾個tag，讓製作更為方便
---------------------------------------------------
<ul class="nav"> --將ul套用class:nav
<p class="nav"> --將p套用class:nav
.nav{color:#000000} --在style裡設定classs:nav的屬性，套用到所有class:nav的tag，在class名稱最前面要加一個點

只有有指定class的tag會被改變，其他tag並不會被改變(在這裡只有這個ul、p會改變，其他的ul、p不會改變)

當然也可以指定class下的某個tag
---------------------------------------------------
.nav a{color:#000000} --這樣子會套用到所有class:nav裡的a，比如
<ul class="nav">
<li><a href="......">abc</a></li> --會改變a的顏色
<li><a href="......">123</a></li> --會改變a的顏色
</ul>

如果同時有兩種CSS會依照順序，後面蓋掉前面，比如
---------------------------------------------------
<ul class="nav">......</ul>
.nav{padding-left:0;}
ul{padding-left:10px}

以上情況該ul的padding-left為10，因為後面的會將前面的覆蓋，所以通常會將class許在後面
---------------------------------------------------
ul{padding-left:10px}
.nav{padding-left:0;}

Move CSS to a single file

有時候多的網頁會使用部分相同的CSS，但如果要複製到每一個網頁十分麻煩，且不易進行維護，所以我們可以將CSS單獨變成一個檔案.css

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

abc.html

<head>

h1{

color:#000000;

padding-left:10px;

}

</style>

我們可以將CSS單獨存入一個檔案main.css

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

main.css

h1{

color:#000000;

padding-left:10px;

}

將原本abc.html內的css刪除，加入<link>，rel是relationship的縮寫

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

abc.html

<head>

</head>

只要將css檔與html檔放在一起，且加上link，便可以將css套用到多個html，至於css的寫法與之前完全一樣，不須做更動，只要更改css檔案，便可以變更多個html

Div division tag

在排版的時候除了上述的方式，還有div tag，這個tag能將版面分為多個部分

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

<div class="nav"> --div也可以指定class

<ul class="nav">
<li><a href="......">abc</a></li> --會改變a的顏色
<li><a href="......">123</a></li> --會改變a的顏色
</ul>

</div>

置中

如果設定div的寬度小於網頁寬度，可以將margin的左右都設定為auto，這樣div就會置中了

.nav{margin:3px auto 3px auto;}

.nav{text-align:center;} --text-align可以將文字置中

2015年1月19日星期一

CSS -selectors&colors&box model

層疊樣式表(Cascading Style Sheets，簡寫CSS)，在網頁中我們常會使用CSS來調整我們的版面

CSS selectors

通常我們會將CSS寫在<style></style>中，並將style放在<head><head>裡面
<head>
  <style="text/css">
ul{
color:black;
}
  </style>
</head>
這段表示將所有的<ul></ul>tag中的文字顏色改為黑色，當然也可以指定套用特定項目
<head>
  <style="text/css">
ul li{
color:black;
}
  </style>
</head>
這段是指將所有<ul>裡的<li>中的文字顏色改為黑色，如果我們只要改第一個項目
<head>
  <style="text/css">
ul li:first-child{
color:black;
}
  </style>
</head>

CSS Hexadecimal colors

在上面我們是使用預設的顏色，有時候我們會希望能使用更多的顏色，CSS也提供以十六進制指定RGB顏色
<head>
<style="text/css">
ul li:first-child{
color:#000000;
}
</style>
</head>
同樣是黑色，但在這裡以十六進制指定RGB顏色，指定顏色要在前面加上#，#後面要加上6個位數，這裡的6位數是有意義的，每兩個位數代表RGB的數值，如#1A3B5C表示R是1A、G是3B、B是5C，R是紅色Red、G是綠色Green、B是藍色Blue，又這裡的數值是以十六進制表示，通常我們使用十進制
57=5X10+7X1
而這裡使用的是十六禁制
10=A,11=B,12=C,13=D,14=E,15=F
1A=16+10,3B=16*3+11,5C=5*16+12
依據不同的組合可以產生各種顏色
如果都是零就是黑色(#000000)，相反則是白色(#FFFFFF)

CSS The Box Model

在排版中我們通常會用到Box Model 的觀念，藉由Padding、Border、Margin來建造自己所想要的版面，下面三個屬性的設定方式

h2{
padding-top:6px; --設定上方寬度
padding-right:4px; --設定右方寬度
padding-bottom:0; --設定下方寬度
padding-left0; --設定左方寬度

border-width:4px; --邊框寬度
border-style:solid; --邊框類型(實線)
border-color:black; --邊框顏色

margin-top:7px; --設定上方寬度
margin-right:0; --設定右方寬度
margin-bottom:7px; --設定下方寬度
margin-left0; --設定左方寬度
}
也可以寫成
h2{
padding:6px 4px 0 0; --依序設定上右左下寬度
border:4px solid black;--依序設定邊框框度、類型、顏色
margin:7px 0 7px 0; --依序設定上右左下寬度
}

HTML -tags&links

超文件標示語言(HyperText Markup Languag)又名HTML

HTML tags

HTMLtags 需要被包在< >中，以< >，以</>為結束，例如<html></html>

以下是範例
<!DOCTYPE html>

<html> --在網頁中只會有一個html標籤，所有東西都放在這標籤下
<head> --html網頁的標頭
</head> --head結束
<body> --我們看到的網頁內容放在這裡
<h1>蛋糕食譜</h1> --h1~h6表示標題，具有層遞性
<h2>布朗尼</h2>
<h3>材料</h3>
<ul> --<ul>是沒有順序的清單
<li>雞蛋2顆</li> --清單中的項目
<li>麵粉45克</li>

</ul> --<ul>結束

<p>先趁好材料....</p> --<p>表示一個段落

<ol> --<ol>是具有順序性的清單

<li>分離蛋黃蛋白</li> --清單中的項目
<li>將麵粉過篩</li>
<li>將巧克力與奶油融化</li>
</ol> --<ol>結束 </body> --<body>結束 </html> --<html>結束

HTML links

HTML links包含一般常見的超連結，超連結的tag是<a>
如果我要建立一個超連結，連結名稱是google，網址是www.google.com
寫法是<a href="http://www.google.com" target="_self">google</a>
在<a></a>中間的是超連結的東西(可能是文字、圖片)
href 後面的http://www.google.com是連結的網址，這是連到外部網站的寫法(絕對位置)，如果是網站內部可以直接寫網頁名稱(如:page2.html 相對位置)
target表示要如何開啟連結，常用的是_blank在新網頁開啟、_self在目前網頁開啟
target 也可以不寫
如果不寫target， <a href="http://www.google.com">google</a> ，預設是_self

訂閱：意見 (Atom)

2015年2月11日 星期三

2015年2月4日 星期三

HTML/CSS

Fonts & Interactions

Font Face

Transforms

Transitions

HTML/CSS

CSS3 Styles

Multiple Backgrounds

Color

Opacity

Gradients

Linear-gradient

Radial-gradient

HTML/CSS

CSS3 Styles

Border Radius

Box Shadow

Text Shadow

2015年2月2日 星期一

HTML/CSS

HTML5 Forms

Datalist

form屬性

Placeholder

Autofocus

Required

Pattern

HTML/CSS

HTML5 Elements

section

header

footer

aside

nav

article

figure

time

2015年1月28日 星期三

HTML/CSS

Overview & Updates

Doctype(Document Type)文件類型定義

Meta declaration

Script tag

Link tag

2015年1月27日 星期二

HTML/CSS

Font

Form

Inline&Block

Attribute selectors

2015年1月26日 星期一

HTML/CSS

Images

Content Images

Layout Images

Floating Images

2015年1月24日 星期六

Ruby 初階課程

使用指令：

Ruby 基礎

變數­­­

基礎用法

if

陣列

迴圈

分別印出從1~10與10~1 的迴圈

宣告mothed方法

yield 控制權移出

Class

類別方法

Protected

Private

Module 模組

特殊用法&注意

Git

2015年1月21日 星期三

HTML/CSS

Classes and Layout

2015年2月11日星期三

2015年2月4日星期三

2015年2月2日星期一

2015年1月28日星期三

2015年1月27日星期二

2015年1月26日星期一

2015年1月24日星期六

變數

2015年1月21日星期三

2015年1月19日星期一