2016年7月17日 星期日

HTML - Note3: CSS(2)

CSS可以做到以下:

*改變字體、顏色、大小
h1 {
  font-size: 32px;
  font-family: Palatino, 'Palatino Linotype', serif;
  color: #2e69a3;
}

*新增/ 調整背景圖
background-image: url("https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg");

*改變整個class的風格(字體顏色大小)
index.html裡面:
  <div class="hero">
        <h2>Sprout.</h2>
        <p>A book by J. Daniel Bedford</p>
        <a href="#">Read now.</a>
  </div>

css裡面:
.hero {
  padding: 250px 0;
  margin: 30px;
  background-size: cover;
  color: #ffffff;
}


*以#跟賦予id的方式來改變特定元素的風格,而其他同類的不變
(在index.html裡面)  <p id="footer">&copy; Mystwood Publishers Limited</p>
(在CSS裡面)#footer { font-size: 0.75rem; color: red; }



HTML - Note2: CSS


CSS是一種方便的語法,來組織網頁元素的風格,我用Codecademy的截圖來說明它的能力:

左邊是HTML檔,先把CSS的呼叫註解起來的樣子



呼叫了CSS描述檔之後,效果如下圖:

在main.css檔中,可以看到各種的元素風格定義方式:





































所以把視覺風格跟網頁內容配置,分開來定義,就是這樣的感覺。


HTML - Note1

我個人感覺,一個以視覺主導思維的設計師或藝術家,在訓練過程已很習慣拿熟悉的元素作拼貼;
而在學習HTML時,這些拼貼的元素會變成一行行程式碼,經過練習後,設計網站就像在拼貼這些程式碼;到了CSS的時候,會把“拼貼”跟“設計”這兩項工作分開,過程上更有效率,上手的人會用「強大」來形容它的能力,但這也是從“物理世界”轉換到“工程思維”的階段,對藝術家是個大挑戰。


Div element:

Div elements divide your page by enclosing other elements. These enclosed groups of elements can then be organized, moved and styled independently from one another.

<div class="main"> ...</div>

它是用來分割網頁元素,以群組方式歸類,要調整位置與風格時,就一次處理整個Div


Metadata processes:
像是網頁的腦袋,因為它們溝通、傳遞訊息,但是使用者看不到。
<!DOCTYPE html> // Tells the web browser to expect an HTML document.
<html>...</html> // The root of the HTML document and parent of all other HTML elements on the webpage.
<head>...</head> // Enclose other metadata about the site, such as its title.
<title>...</title> // Contains the site's title, which is one way users can find your site through a search engine, like Google.
<meta charset="utf-8”/> // Tells the web browser which character set to use. In this case, the character set is "utf-8".

CSS:
stands for cascading style sheets, and is used to style HTML elements. 用層疊的概念做網頁元素的風格設計。

HTML elements:
* h1-h6: <h1>Heading</h1>  數字越小,字越大,通常用在標頭
* p: <p>Description of company here.</p>在標頭以外,文章或描述片段的時候使用
* a: <a href="http://codecademy.com">Click here</a> to learn how to make a website! a是Anchor(錨)的縮寫,用在外部網頁連結上
* img: <img src="https://images.com/favorite.png> 使用圖片元素
* video: 影片
* unordered list:
<ul>
<li>list item</li>
<li>another item</li>
<li>yet another</li>
</ul> // 未排序的清單
* div: 拿來整理所有HTML元素並且使用class的屬性,並且需取名字
<div class="main">
<h2>Subheading!</h2>

</div>

2016年7月12日 星期二

RaspBerry Pi 3 - Note 1 初始設定紀錄

<RaspBerry Pi 3的撞牆記>

我犯了幾個錯:
1. 插上記憶卡就接上電源螢幕沒反應,以為電流不夠大
2. 記憶卡也沒完全格式化就裝OS,沒有反應
3. 用Mac的terminal裝OS,看不到進度條,一個多小時過後直接拔
4. 用5V 1.2A電源,不夠力
5. 再用Windows重裝幾次,拔插幾次,SD就GG了

這邊整理一下正確的方式:
0. 下載好OS的映像檔 (樹莓派官網上Download頁的NOOBS或RASPBIAN, 解壓)
1. 器材準備好(Pi 3, 螢幕+HDMI線, 網路線, Micro USB 5V 2A變壓器跟線都要夠力, Micro SD & 讀卡機, 無線鍵鼠K270+M185)
2. 必要!下載免費軟體 SD Formatter,把SD卡清除乾淨
3. 下載免費軟體 Win32 Disk Manager,SD卡>讀卡機>電腦,它會抓SD來源,然後選OS映像檔來源,點選"write"寫入
4. 跑完後安全退出SD卡,插進RB Pi3,確認HDMI線、網路線、無線鍵鼠接好
5. 接上Micro USB電源,就會自動開機了,RB Pi3沒有電源鍵

這樣就可以真正開始玩樹莓派了,呼~

然後上面的東西我花了一天才搞定@_@|||



設定用VNC遠端控制的方式,參照趙老師的這篇:

參考這個設定開機即開啟VNC


蠻方便的,除了開機即開之外,還試了用Android手機遠端控制,很方便!



2016年7月11日 星期一

AngularJS - Note1 & 近況

這裡有一陣子沒有更新了,後來我把教學書上兩個遊戲(圍住貓 & 橫向卷軸移動跳躍)跟著書實作完。而五月初時我體驗到了VR(HTC Vive)很受感動,決定投入開發,加上一些機緣接觸到IOT的起點,就開始玩Arduino,這些過程我PO在另一個與友人的共同blog,內容比較多圖像、視覺跟實體互動,連結如下:

JB-Dummies:
https://jbdummies.wordpress.com/


然後我現在除了Maker的東西 (七月底要去上海參加Maker活動),同時也在自學AngularJS和HTML、JavaScript,Codecademy上面學習的流程設計真的很不錯,繼續GO~



AngularJS - Note1

AngularJS是一種JavaScript的framework,能用來開發彈性化、好管理的網頁App,需要一點JavaScript跟Html基礎。我在Codecademy上學,目前進度到Unit 2 (2/5) 的50%。


接下來程式碼示範的網頁如下圖所示:


我把裡面有關資料的三個檔案view拼在一起,從以下兩張圖對照看,左下是Html,左上是定義資料型別的規則,右邊是資料存放的地方。把三個東西拆開,就很方便做管理。

例如說,不管我想新增幾筆資料,在右方的檔案新增就好,如果我想移動顯示的位置,

修改左下方檔案的code就好。

“Directive是AngularJS中一個很像自訂標籤的東西,有很客製化的彈性可以設定要讀取的資料型態”
以上是我目前的理解,還在跟著段落code一點一點感受中... ^_^|||

在Directive裡面的7/8,我開始靈魂游離,覺得應該要再多看一點HTML的東西,這個章節結束後就開始吧= =

走完8/8,下面有個Directive的總結:
  • Directives are a powerful way to create self-contained, interactive components. Unlike jQuery which adds interactivity as a layer on top of HTML, AngularJS treats interactivity as a native component of HTML.

讓我們繼續 走下去。


2016年5月5日 星期四

Programmer: IKEA效應

許多心理學的書跟研究都指出,
人會對自己辛苦建立起來的東西帶有感情,也會給較高評價。
所以從IKEA買來的DIY家具,比起傢俱行現成的東西,
能帶給人不一樣的情感聯繫。

但這對設計師(規劃者)來說,就不見得是好事,
它會人越來越失去一個從新使用者角度來看的客觀性。

「難道要輕易否定自己好不容易的成果?」
如果為了整體App的功能專注,必要的話,是的。
捨棄功能永遠比新增功能困難。

像圖中的"1 more mission to go!!”的cell detail顯示功能,
讓我覺得蠻爽的,但隨後想起IKEA效應。

如果我是一個規劃App的人,又或是寫程式的人,
建置過程一定會被這效應影響,

以此文先提醒未來的自己。

2016年5月2日 星期一

Swift: MVC的思維

下面這張圖是我為了更理解範例程式的結構,而畫的架構圖,還不是很完整,
試著表達「指令」「視覺呈現」與「資料流動」的關係。





























感覺書籍上的教學方式,是一層層加上code跟class來一面增加功能,
一面介紹新東西,但好像沒有碰觸到一些關鍵的區塊,
像是能點亮學習者在理解面的一塊,「啊!我懂了」這種。

我一面想:
「我學到這個部分,以後可以怎麼用呢?」
「這個部分,可以用別種方式來做嗎?可以部分改變嗎?」
「如果要從無到有,這是怎麼建構的邏輯?」
「開發一個app,要從哪邊開始想?之後怎麼走?」
「之後我能夠靠學到的東西自己寫一個app嗎?」

然後我一面回顧之前理解的MVC,邊想著之前和 UI同學們聊到的溝通問題,
也一面用新理解到的部分來調整自己對MVC的理解。
(Model, View, Controller)

「工程師是怎麼想?怎麼建構?」
「設計師是怎麼想?怎麼建構?」
「使用者端怎麼接受,使用這個東西?」

上禮拜對MVC的概念草繪,畫一半就畫不下去了...


這是今天早些時候畫的,理解的部分多了一點:


在第一張用ai畫的架構圖完成後,我發現每個view都會有個主要的controller,這個controller會是一個class,
而app內的資料也會用class來做包裝,所以這是我之前沒搞懂的地方,現在下圖是我最新的理解:


繼續加油!!



2016年4月21日 星期四

Swift: 給第一次碰Xcode的初學者


App coda
Swift 新手系列之一: 打造你的第一個 iOS App
http://www.appcoda.com.tw/hello-world-app-swift/

大推這個網站寫的Swift新手入門,適合給剛安裝好Xcode但還沒用過的人看!

對入門的開發學習者來說,熟悉開發平台的UI是一項不容易的事情,
我覺得Xcode很多地方設計得不錯,

像視覺化的Storyboard跟寫code的Assistant Editor可以在同一個畫面看,
互相做連結,而且不太會有變數名稱混淆的情況。

使用性越友善的開發平台就越能招到更多的開發者加入呀~~~



祝學習之路順利!

Swift: 按一下螢幕任意處就可以關掉鍵盤的方法

這個方法需要兩段code如下:

    @IBAction func onExit(sender: AnyObject){
        sender.resignFirstResponder()

    } //這段會跟文字輸入區域有關連,要跟兩個text field連結



    @IBAction func onClick(sender: AnyObject){
        tf1.resignFirstResponder()
        tf2.resignFirstResponder()
    } //這段會跟背景的觸控有關聯,跟背景連結


在開始前,要把整個螢幕變成一個「可控制的」屬性,請看下圖:


接下來也用截圖來說明,請試試看:

Step 1


Step 2


Step 3

(Sorry, it should be just yellow when your cursor are not on it.)

Step 4


Step 5


Step 6


Step 7









2016年4月19日 星期二

Swift: Segment的操作練習

看圖理解,
Segment 就是圖中"first"跟"second"那個可以讓人點選的按鈕,
他們是歸在一組的,所以通常會是同類型的切換鈕。

這張圖的左半是畫面,右半是code,
其中三個綠框框內各代表了一個function,
他們前端都有一個灰色點,跟著箭頭指向左邊的元件,
這就是需要在Xcode中建立“圖形元件”與“function”連結的地方,
我們就可以很直觀知道哪段function會跟哪個按鈕有關聯。

實心的灰色點表示有連結到東西,空心的代表沒有連東西。
可以用按右鍵拖曳的方式,把按鈕拉到function的code上,
他就會有個框框提示跑出來,放開就可以建立連結了。
(例外註:當專案關掉再開,然後直接開.swift檔時,可能會看到空心,
這時打開StoryBoard它就會再連上,沒有的話就要再check了。)



以下是整段code:
(出自於Swift書:用Swift語言一次搞定所有蘋果裝置的程式開發 / 佳魁出版)

import UIKit
class ViewController: UIViewController {

    @IBOutlet weak var tv: UITextView!
    @IBOutlet weak var tf: UITextField!
    @IBOutlet weak var segmented: UISegmentedControl!

    override func viewDidLoad() {
        super.viewDidLoad()
        onChanged(segmented)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func onAdd(sender: AnyObject){
        let count = segmented.numberOfSegments
        let title = tf.text
        if title!.characters.count > 0 {
            segmented.insertSegmentWithTitle(title, atIndex: count, animated: true)
        }
    } // 動態增加segment的函數
    
    @IBAction func onDelete(sender: AnyObject){
        let index = segmented.numberOfSegments - 1
        if index > 0 {
            segmented.removeSegmentAtIndex(index, animated: true)
        }
    } // 動態刪除segment的函數
    
    @IBAction func onChanged(sender: AnyObject){
        let index = segmented.selectedSegmentIndex
        let title = segmented.titleForSegmentAtIndex(index)!
        tv.text = "選取了第\(index + 1)個分段,標題是:\(title)"
    } // 顯示選取的segment

}

一面寫一面思考這些文章會對誰有幫助,坦白說這個blog很難讓初學者看了就能學會,
主要是我做學習筆記用,會把重要的部分整理成一篇文章以後複習,
Xcode的安裝、環境設定跟基本操作一般書中、網路上都有介紹,
而且一定需要自己花時間熟悉摸索,若你也是初學者,不妨看看我貼的內容,
也許多少能找到有益的資料。

一面跟著書做練習,一面撞牆,一面完成小功能,偶爾發現書中的錯誤 / bug,
或 Xcode / Swift 更新的東西,這就是學習的苦與樂吧。

繼續加油!



2016年4月18日 星期一

Swift: Class 跟 繼承

繼續跟著《Swift 從入門到超人氣遊戲App開發全面修練實戰》這本書學Swift,
看到class跟繼承的用法,對於 init 不是很懂,google到Jason Kuan's Blog
有很專業的說明,但我只稍微更懂了一點,下面的code是我理解了的部分:
(code來自於上面提到的書)

-------------------------------------------------------------------------------
class MyPeople {
    var name = ""
   
init(Name:String){
       
name = Name
    }
   
func getName() -> String {
       
return "\(name)"

    }
 

}

class MyStudent : MyPeople {
   
var StudentID = ""
   
override func getName() -> String {
       
let t_name = super.getName()
       
return "\(name), \(t_name)'s student ID is \(StudentID)"

    }

}

var Peo1 = MyPeople(Name: "Peiwen Wu")
print(Peo1.getName())

var Peo2 = MyStudent(Name: "Bruce Wu")
Peo2.StudentID = "98381450"
print(Peo2.getName())
-------------------------------------------------------------------------------
//執行結果如下

Peiwen Wu
Bruce Wu, Bruce Wu's student ID is 98381450


我把上面的code分藍根綠兩色,藍代表母類別,綠代表子類別,
同樣呼叫了getName時根據各自的定義而有不同結果,
但name屬性的賦予上,子類別就繼承母類別,能方便物件的管理。

在MyPeople中func getName() -> String { return "\(name)"}這邊可看到,
-> String代表會回傳一個字串的變數回去,
return代表會推出一個東西出來,接到String那邊出去。

MyStudent的 override 應該是代表它要繼承母類別的getName(),
裡面的super.getName()就用到了母類別中定義的getName(),
傳回一個值(name)回來,再用到MyStudent裡的getName,
完成特殊需求(加上學生証號的回傳值)

這些override, super.funtion() 的語法多練幾次就會比較熟了,
看下圖再試著理解一次:



繼續加油!!!


Swift: Var是什麼東西?學寫程式的開始

我們剛開始規劃一個程式時,至少一定會有一項"任務"要由程式完成,
這個任務的定義必須很清楚,清楚到每個小螺絲釘都要逐一定義,
才能獲得正確的執行結果。


寫程式可以分成三個階段:A→B→C

A. 無中生有一些東西,
B. 組合使用這些東西,
C. 然後產出結果。

下面逐一來說明。


A. 無中生有一些東西

我們的任務是 "從五個句子中,印出其中 一行句子 "

要定義的東西如下:

1. 五行句子,它們都必須有名字 (我們才能知道要呼叫誰)
2. 一個數字,也要有名字
3. "印出" 的這個功能也要定義一下

Swift的語法就是這麼用:

var str_nice = "超好吃的啦!"
var str_fine = "還不錯唷!"
var str_ok = "還可以,普通。"
var str_bad = "不怎麼樣。"
var str_awful = "難吃到我想吐..."

var star1 = 1
var star2 = 2
var star3 = 3
var star4 = 4
var star5 = 5

看到var一出現,就知道:
我要無中生有一個東西(變數),然後定義這個東西(變數)是什麼。
(var是variable的縮寫,意思是"可變的東西")

str_nice ... str_awful   這些就是自己取的變數名字;
"="                              這個符號有指定的意思;
"超好吃的啦!"        這個就是我們賦予該變數的內容

如果上面的說明都懂了,那接下來的
var srar1 = 1

我們就知道這代表「我要生一個變數,叫做star1,它的內容是1
注意,因為變數可以有很多種可能的類型,像數字、文字,
數字又有分很多種,所以一旦定義了它的內容之後,
就不能換類型了。電腦會根據我們賦予的內容而自動判斷變數的類型。
(字串取名str,因為str是string的縮寫,意思就是"字串")

OK,繼續下去。


B. 組合使用這些東西

print (str_nice)

這行code很明瞭的會幫我們印出 str_nice - "超好吃的啦!"
如果我們肯定知道東西一定很好吃,那今天任務可以結束,
不過若有可能跑出別的結果,我們還是得多加一點變化性。

這裡會使用到function,中文叫"函式"(詳細看這篇),
function裡面可以定義很多行為,當一次呼叫時,
它就會一次處理所有定義的動作。

func comment (words:String = "我再想想...") {
        print (words)
}

comment (xxxxxxx)  //這一行就是呼叫上面定義的function

當我們抽換xxxxxxx為 str_nice 或 str_bad 時,
它就會把 str_nice 或 str_bad 丟進comment裡面,
然後你看上面的{ } 中有個words變數就會把它"接住"!!
接著透過 print (words) 被印出來,任務完成!

comment (str_fine)

執行結果:

"還不錯唷!"

Q.「等等,那之前定義的 star1 ... srat5 呢?」
A.「function還有更多變化,您不妨試著探索看看。」


C. 然後產出結果

結果已經產出了,我文章寫得不是很好|||,在stage B. 中。


回顧一下,
寫程式可以分成三個階段:A→B→C

A. 無中生有一些東西,
B. 組合使用這些東西,
C. 然後產出結果。


繼續加油!



Swift: Control Flow (Loop)

這個官方的教學網頁裡面介紹了for loop, while loop
並且教我們用loop, while, case寫一個"蛇與階梯"(Snakes and ladders)的遊戲,
非常適合初學者學完基礎後,想知道怎麼把它們組合起來,
程式長度約幾十行,不妨跟著教學走走看!


(圖片取自:Apple官方Swift教學網頁)

2016年4月17日 星期日

Swift: function的基本


以下是一個最簡單swift function的例子:

var word = "hello!!!!!" //定義一個叫做word的字串內容為"hello!!!!!"                 
func sayhello(str:String = "Yes!!"){                                            
    print(str)                                                                 
}                       //定義一個叫做say hellofunction能夠印出代入的字串                       
sayhello(word)          //word字串代入say hello中並且呼叫sayhello               
sayhello()              //沒有字串代入sayhello,所以代入預設的"Yes!!"(參照上面的code)


===========程式執行結果=============
hello!!!!!
Yes!!
===========程式執行結果=============



我們寫程式的時候,有時遇到複雜的結構,code越寫越多,會越難管理,
function的好處,在於先定義一個「行為包」,一個程式可以有好多個行為包,
等到需要用的時候就呼叫這個「包」,對開發的人來說,再落落長的程式行為都能清楚畫分。

另一個好處,就是需要修改時,可以很清楚不會改到其他functions。

最上面短短的六行程式中,
第一行 var word = "hello!!!!!"
定義了一個「變數」(variable),可以是數字或是字串(定義var請看這篇)
第二~四行 定義了一個function
func sayhello(){
    print("hello")
}

這裡說明一下二~四行的結構:
func                //即將要定義一個function
sayhello()          //取function名字為sayhello, ()裡面可以定義要代入的預設變數,或是空著
{ print("hello") }  //{ }定義function裡面做的行為

第五、六行就不用再說明,請參考上面就有的註解囉!


我們在下面再練習一個function的例子:

var greeting = "yoyo!"
func speak(content:String = "Hi."){
     print(content)
}
speak(greeting) // 會印出: yoyo!
speak()             // 會印出: Hi.