布萊恩的創業小窩的部落格

網路行銷除了SEO,你知道還有個叫CRO的傢伙嗎?今天就帶你來認識它!順便告訴你社群網路在今日要如何"行銷"!

 

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

如果你是前端工程師,但還不知道該如何快速設定顯示文字和自訂屬性值,別擔心!這次的主角Emmet也可以幫助你!

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

前端工程師一旦知道如何使用Emmet快速複製元素和設定流水編號,就能省時又省力!怎麼用?今天就教你!
 

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

SEO和EDM在網路行銷中,簡直就是不可或缺的角色!!還不知道它們有多重要?看完就知道啦!

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

 
還記得上週的前端工程師課程嗎?忘記了記得複習~而今天的內容要教你也超好用的"快速產生階層"功能,一起來看看!

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

 
 

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

人工智慧和軍備武器結合已經不是新聞,但一直肆無忌憚地研發及發展它,你看到那些他們沒告訴你的隱憂了?

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

 
Google為何不再參與研發人工智慧和軍備的結合?這其中是不是有潛藏的危機?

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

上過HTML5課程都知道,SVG動畫繪製也超重要!上次才教你圖形動畫,今天要帶給你的是路徑動畫技能!
前端工程師必備技能：SVG 路徑動畫
我們可以使用HTML5中的 <path> 元素來定義路徑。
SVG Path 基本指令列表
See the Pen SVG Path 基本指令-L by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-H by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-Y by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-C by Tedutw (@Tedutw) on CodePen.
(圖片取自：iT邦幫忙)
 
<path D="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/>
 
See the Pen SVG Path 基本指令-Q by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-T by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-Z by Tedutw (@Tedutw) on CodePen.

M
起始點的 x,y 座標 (move to)

L
從「目前的點」的座標畫直線，到指定點的 x,y 座標 (line to)

H
從「目前的點」的座標畫水平線，到指定的 x 座標 (horizontal line to)

V
從「目前的點」的座標畫垂直線，到指定的 y 軸座標 (vertical line to)

C
從「目前的點」的座標，畫條貝茲曲線，到指定點的 x,y 座標。如下圖的曲線，C 的部分會有三組 x,y 座標：其中第一組以及第二組 x,y 座標為控制曲線的形狀用，最後一組為終點座標。

S
S 可以從「目前的點」之後，再建立一個座標。這個新增的座標帶有一條貝茲曲線與「目前的點」連結。神奇的是，這個貝茲曲線的形狀，就是這個「目前的點」的鏡射線。聽起來很難懂，看下面的例子就知道了。

Q
Q 就是起點和終點的貝茲曲線共用同一個控制點，只需要有貝茲控制點的座標和終點座標即可。

T
T 只有一組參數 x,y ，表示終點的座標，所以 T 的前方要接上 Q 才能畫出對應的座標線。

Z
關閉路徑，將「目前的點」的座標與第一個點的座標連接起來 (closepath)

 
對於想成為前端工程師的你們，這樣的HTML5課程，將SVG動畫繪製整理成這樣，是不是超級淺顯易懂！
 
 相關閱讀推薦：







輕鬆入門前端工程師的HTML5課程(11上)SVG基本圖形動畫





輕鬆入門前端工程師的HTML5課程(8)拖曳元素-上




輕鬆入門前端工程師的HTML5課程(8)拖曳元素-下


暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~

網頁設計課程必學的技能:如何讓CSS和HTML共存?

程式語言都會了,為什麼還要來上UI課程?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？


 
 

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

 
好久不見的HTML5課程又重出江湖啦!先前提到的SVG,今天就要教你它的圖形動畫該怎麼畫!
 
前端工程師必備技能：SVG 基本圖形動畫
我們可以使用 <animate> 元素來繪製 SVG 動畫。
今天，我們先來繪製一個方形，並且將動作設定在三秒鐘內往右移動，然後會重複相同的動作 3 次。HTML5 原始碼與結果如下所示：
See the Pen SVG 基本圖形動畫 by Tedutw (@Tedutw) on CodePen.
以上所有前端工程師會使用到的 HTML5 標籤說明如下：

<attributeName>
屬性名稱，就是當你指定了這個屬性，就會以這個屬性去做動作。在本例中指定紫色方塊要水平位移，水平移動的座標為 x，所以該例中 attributeName 為 x。若為垂直移動的話，attributeName 則為 y。

<from>
動畫開始時的屬性值。

<to>
結束動畫時的屬性值。

<dur>
動畫持續時間。

<repeatCount>
動畫重複次數。在本例中重複 3 次所以 repeatCount 設為 3；若要動畫無限重複的話， repeatCount 則設為 indefinite。

<fill (freeze | remove)>
這裡的 fill 不代表填色，而是指定動畫結束時的屬性，屬性可選 freeze 或是 remove，remove 是預設值，也就是動畫結束之後，圖形返回原本的狀態，而 freeze 則是在動畫結束後，固定在結束的狀態

 
 
 
相關閱讀推薦：

輕鬆入門前端工程師的HTML5課程(11下)SVG基本路徑動畫

輕鬆入門前端工程師的HTML5課程(9)地理位置定位

輕鬆入門前端工程師的HTML5課程(10)SVG介紹



HTML5教學小撇步三-HTML新增的標籤原來有這些~


暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~



在苦惱履歷上技能要填什麼嗎? Java,UI課程等等證照幫你解決這個問題!!
達內課程先就業再付款- 中時電子報
 
 

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

前端工程師的課程又回來啦!這次要教給你的是前端工程師的必備外掛程式-Emmet!快來看看它有哪些功能!

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()

現代不斷增進人工智慧技術的特斯拉,相信特斯拉本人會對這樣的成果感到很開心!

(繼續閱讀...)

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()