聽音樂竟然能提升工作效率?設計人工智慧的工程師都大讚超好用!

聽音樂竟然能提升工作效率?設計人工智慧的工程師都大讚超好用!
聽音樂竟然能提升工作效率?設計人工智慧的工程師都大讚超好用!

設計人工智慧的工程師大推好用的音樂究竟多好用?不僅放鬆心情還能提高工作效率!

 
工程師們,當你在用TensorFlow或寫 PythonJava 程式時還在聽最新流行的歌嗎?小心這些動聽的歌曲反而會讓你分心!你可能會想從座位上起來打節奏、翩翩起舞;或是太過於放鬆而打瞌睡;或是讓你想起過往某些事情,腦中就開始上演小劇場..。http://musicforprogramming.net/ 是專門為忙於研發人工智慧的工程師打造的線上音樂網站,該網站可是經過精挑細選,才特別選出 55 張音樂專輯,每張專輯長度大約在 60 分鐘左右,只要打開網站、選好專輯、按下 Play 播放即可收聽。

使用說明:

1. 進入網站 http://musicforprogramming.net/ ,你會發現網頁的設計採 Geek 風格,是模擬工程師們編寫原始碼時的的畫面。如下圖中紅框內所示,目前網站內有 55 張音樂專輯可選 (且還在陸續新增中)。你先在你想要聽的專輯按滑鼠左鍵兩下。

2. 此時如下圖中紅框內所示,你所選的音樂專輯會連同 Play 播放鍵、暫停鍵、向前 30 秒以及向後 30 秒的按鍵出現在右上方,你在 Play 播放鍵的位置用滑鼠左擊兩下就可以聽了呢!

除了聽合適的音樂能增加工作效率之外,Google 還釋出可生成歌曲的 Python 函式庫 Magenta,採用 AI 機器學習演算法 TensorFlow,來進行音樂創作。(參考文章:AI 人工智慧必學 Python 的八大理由) 有人在網路上分享使用 Python 合成音樂的影片如下:

 

 

 

 

推薦文章:
令人遺憾!人工智慧傳奇Nils Nilsson逝世,享年86歲!


蒙娜麗莎不僅會笑還會眨眼睛?!全靠人工智慧辦到了!


個人化專屬人工智慧簡報教練,讓你上台報告不忘詞!


與前端工程師息息相關的:網頁顏色代碼對照表


信不信由你,因為Java課程讓我獲得我想要的生活!


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


教你快速完成Photoshop去背!

Python怎麼唸才正確?還有”這些”英文單字,你唸對了嗎?

Python怎麼唸才正確?還有"這些"英文單字,你唸對了嗎?
Python怎麼唸才正確?還有”這些”英文單字,你唸對了嗎?

你知道Python該怎麼發音才正確嗎?還有”這些”英文單字,怎麼唸才最標準呢?

為何我們會想寫這篇文章?

最近達內教育有結業的學員,本來專精英文,現在在業界任職程式設計師。他反應常常看見工程師將英文單字的發音發錯,且錯的單字發音幾乎一樣,像是 R&D 唸成 RD 等。因此筆者就蒐集「常被唸錯的英文單字」資料,並寫了這篇文章,發現無論是職場上的工程師、或是還在學習的學生、甚至是其他岡位上的人員經常把這些跟程式設計有關的英文單字唸錯。因此將這些單字整理如來如下:

Spam

請唸成[spæm]

不管是垃圾郵件還是垃圾信都可以稱做 Spam, 有些人會看到中間的 a 就發「啊」的音,於是就變成了「斯棒」。其實這個字要唸成 [spæm],同理,人名 Pam 不要唸成「胖」、交通堵塞 traffic jam 的「jam」與人名 Sam,中間的 a 都要以「[æ]」來發音哦。

R&D

請唸成「R and D」而不是「RD」

R&D 是 research and development(研究與開發)的縮寫,就是研發人員的意思。請不要唸成「RD」,「RD」是「路(road)」的縮寫。

Safari

請唸成[sə’farɪ]

重音在第二音節的 Safari 是蘋果電腦的網頁瀏覽器。它原本的意思是指在非洲大草原上,觀賞動物或打獵的旅行。許多台灣人會唸成重音第一音節,是錯誤的。

feature phone

請唸成「feature[fitʃɚ]」 phone 而不要誤唸成「future[ˋfjutʃɚ]」 phone

雖然目前智慧型手機當道,但是純粹只能用來打電話及收發簡訊的「feature phone(功能型手機)」仍然有它的市場。台灣也有幾間公司在代工這類型的手機,只是無意之間常聽到裡面的工程師誤把「feature phone(功能型手機)」 誤唸成「future phone(未來手機)」。

parameter

請唸成[pəˋræmətɚ]

parameter 是「參數」、「向量」的意思,重音在第二音節。請不要再把重音放在第一音節唸囉。

product

請唸成[‘pradəkt]

這是大家都熟悉的一個單字,是「產品」的意思,但是後面的 ct 的氣音請別忽略掉,否則聽起來就像「Prada」

Amazon

請唸成[ˈæməzɑːn]、[ˈæməzən]

亞馬遜公司的美式發音比較相近「A-me攢」,重音第一音節,許多台灣人都誤唸成「阿嬤zone」或是「阿妹zone」。

Skype、App

請唸成[skaip]、[æp]

Skype 字尾的「E」不發音,請別誤唸成「死該~痞」了!而 App 要唸成[æp]才到位。

CNN

請唸成[si͵ɛn’ɛn]而不是[‘si’ən’ən]

這個字的重音在第三音節。這類組合字母的縮寫,重音都要放在最後一個字母,同理 HBO 的重音也在 O。

Python

請唸成[p’ɑɪθɑn](美式)或是[p’ɑɪθən]

Python 可說是 AI 人工智慧產業的必備語言,網路上也經常有關於 Python 正確發音到底是「派桑」還是「派森」的爭論。其實這兩種發音都正確,只是「派桑[p’ɑɪθɑn]」偏向美式、而「派森[p’ɑɪθən]」是英式發音。

 

 

 

 

 

 

推薦文章:
選對很重要!程式語言選Python的8大理由(上)


只會用PS就落伍了!Python畫出皮卡丘才夠屌!


想要自學Python?首先你要先懂它是誰!


搶救低薪大作戰,再不來上Java課程就來不及了!


攜手惠普和英特爾,達內教育又創新的巔峰!


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


前端工程師的必備品Emmet(一)快速產生標籤名稱

零基礎也想成為前端工程師?那你一定要知道這”三大”內容!

零基礎也想成為前端工程師?那你一定要知道這"三大"內容!
零基礎也想成為前端工程師?那你一定要知道這”三大”內容!

想要當前端工程師,一點也不難,首先要先知道最重要的前端三大內容!

今天小編要跟大家分享的文章是關於零基礎如何自學成前端工程師。目前網路發展迅速,前端也成為很重要的崗位之一,前端開發是屬於很簡單的程式設計,甚至都不能叫做程式設計,因為它真的很簡單,有很多想要轉行進入 IT 行業的新手會選擇當前端工程師。那該怎麼自學?以下就來和小編一起來看一看文章吧~首先我們學習前端,得要知道前端的三個大內容,HTMLCSSJavaScript,其中 HTML5 CSS 是相互結合著學習,掌握了這兩個了以後我們就算真正入門了,然後再深入學習 JavaScript 等等。

一、首先我們要了解 HTMLCSSJavaScript 分別是什麼?

HTML 就相當於一個人,CSS 相當於一個人穿著的衣服,JavaScript相當於讓這個人做什麼動作,這樣一形容呢,我們就很好理解了,這個人就是網站,需要有 header 頭,body 身體,footer 腳……而網站所呈現給我們各種各樣的樣子就是我們寫的 CSS 樣式,網站裡的動態效果就都是我們的 JavaScript 去實現的。

二、零基礎學前端工程師會很難學嗎?

想知道前端工程師技術難不難學的新手可以跟著下面的步驟一起來設計製造一個專屬的網頁,相信你就會知道。我們用到的軟件呢,對於入門級來說我們一般推薦大家用 DreamWeaver,新建一個 HTML 後,出現的界面是這樣的,

以下我們開始輸入原始碼,我們可以看到這裡有這樣的原始碼<body></body>,這個就是我們網頁的身體,我們接下來要輸入的內容都是在這中間輸入的,這個括號表示的標籤,標籤都是一前一後的,成對兒出現的,除了一些特殊的標籤,隨後我們再一一給大家講解。現在我們輸入點內容,看看效果。

我們輸入一個標籤<div><div>,點擊右上角的地球瀏覽一下,會發現彈出了一個空網頁,什麼也沒有,那是因為我們現在只書寫了HTML,還沒有寫CSS,簡單來說就是,我們創建了一個東西在頁面裡,但是還沒有設置這個東西長什麼樣子,現在我們在設置它的樣子,

CSS”>
1、我們為了給這個 div 設置樣式,所有先給它起個名字不然,電腦不知道我們要給誰加樣式,class=”aaa” 的意思是起名為aaa

2、在<head></head>裡寫入這樣一組標籤<style></style>這個style的意思就是CSS,我們整個網站要加的所有樣式都是寫在這個中間的。

3、我們在style裡寫樣式,電腦首先要知道我們給誰加樣式,所有我們寫個.aaa 這個.(點)的意思是我要給aaa加樣式,電腦會自動把.(點)後面的名字,跟下面body裡的名字做一個匹配,這樣電腦就知道,哦~原來你是要給這個div加樣式呀,

4、然後我們把要給這個div加的樣式寫在大括號裡,Width:100px; 意思是這個div的寬是100像素,height:100px; 意思是高是100像素,background-color:#FF0000;意思是背景顏色是#FF0000這個顏色,

注意:

(1)這裡我要給大家解釋一下,大家別看這麼多原始碼,這麼多專有名詞,其實軟件有提示,像下面這樣,直接輸入第一個字母後面的專有名詞就出現了,直接選中就行了,連專有名詞都不用背,前端真的很簡單,

輸入 W 和輸入 h,會自動彈出名詞下拉選單

(2)每一個專有名詞都有提示,說到這裡,不會英語的同學就不要給自己找藉口說英語不好,學不會程式設計了。雖然說很簡單,但是要想真真的把前端學好是需要下功夫的,主要就是要堅持。

下面我們繼續設置好了以後,我們就可以在 Dreamweaver 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面,那恭喜你,你成功了!

 

 

 

 

 

 

推薦文章:
SEO無痛該怎麼做?資深前端工程師教你對的方法!


頂尖前端工程師必備技能之一-掌握RWD基礎概念


工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!


連麥當勞也加入了人工智慧的戰場?


Python是什麼?可以吃嗎?


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!


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

資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值

資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值
資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值

身為前端工程師的你,知道如何用Emmet輕鬆設定顯示文字跟自訂屬性值嗎?

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

顯示文字

使用 Emmet 能讓前端工程師快速展開各種 HTML 元素,但如果能在撰寫的時候就能產生內文,不需要等到元素展開後才補上內文那就更棒了!沒想到這個功能 Emmet 也有!真不塊是前端工程師的省時神器!

如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中寫上文字,如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤,以及內容為 「內文」 的 p 標籤,就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。

 

自訂屬性值

Emmet 除了可以讓前端工程師快速展開標籤與文字之外,對於像是 a href、img 等需要設定屬性的標籤,也可以在寫的時候就產生哦。

假設想要產生元素中的屬性時,可以透過加上 [] 中括號並在其中寫上屬性與值的內容,值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素,就輸入「a[href=”https://www.tedu.tw”]」後按下 Ctrl+E。

若想要增加顯示文字,則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例,我們可加上「達內教育」文字,就輸入「[a[href=”https://www.tedu.tw”]{達內教育}」後按下 Ctrl+E。

如果想要多增加一些屬性值,只要在同一個 [] 中括號中,將每個屬性值用空格隔開就可以了。如在上個例子中,想要設定網站在新分頁開啟,我們就輸入輸入「[a[href=”https://www.tedu.tw” target=”blank”]{達內教育}」後按下 Ctrl+E。

 

 

 

推薦文章:
成為專業前端工程師前,先搞定CSS背景位置設定!


前端工程師的御用愛將CSS,超好用四招搞定HTML!


CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


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


體格標準,妝扮無暇的網站怎麼建立?快來上CSS網頁設計課程!


挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

資深前端工程師之Emmet教學(3)快速複製元素與設定編號

資深前端工程師之Emmet教學(3)快速複製元素與設定編號
資深前端工程師之Emmet教學(3)快速複製元素與設定編號

只要是前端工程師,都知道Emmet,但是你知道如何善用Emmet來快速複製元素跟設定編號嗎?

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

複製元素

前端工程師要產生 ol 或是 ul 清單標籤時,都會包含一拖拉庫的 li 元素。假設要一個一個手動輸入的話,就算是使用 Emmet 的「+」快捷輸入法,還是會花不少時間的。幸好 Emmet 有複製的快捷輸入法:「*」。用法是:若想要一次產生 5 個相同的元素的話,就在原宿後方輸入「*5」。由此類推,產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤,包含 5 個 li 元素,語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。

再假設我們要在一個 .news 中放置 5 個 .block,然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落,每個 p 段落中又放置兩張圖片,則輸入「.news>(.block>h2+(p>img*2)*2)*5」

編號

有時前端工程師會在HTML輸入 li 標籤時,會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時,就可以快速的產生。例如,今天我們要輸入五個 li 標籤,標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5,則輸入「li.list-$*5」

若要在這些流水編號前面加個「零」,例如 01、001,則補上只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例,我們得輸入「li.list-$$*5」以及「li.list-$$$*5」

設定起始編號

$的用法,預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字,這時則在 $ 後面多補上一個 @ 並加上指定的起始數字,承接上例,我們要設定起始數字為 5 就輸入「[email protected]*5」

Emmet 預設的編號是由小到大,若是希望編號由大到小,那麼就是在 @ 後面補上一個 – 負號 (就算是沒要設定起始值也是要多補 @)。例如我們要輸入 5 個 li 標籤,編號由大到小,就輸入「[email protected]*5」 我們要設定起始數字為 5 ,就輸入「[email protected]*5」。

 

 

 

 

推薦文章:
資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值


那些前端工程師不告訴你卻超好用的懶人包,今天不藏私大公開!


前端工程師CSS實務教學應用-Div標籤(上)


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


達內教育開幕 培養台灣IT人才進入全球企業


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


HTML5瀏覽器儲存比cookies更優的來了!

資深前端工程師之Emmet教學(2)階層如何快速區分?

資深前端工程師之Emmet教學(2)階層如何快速區分?
資深前端工程師之Emmet教學(2)階層如何快速區分?

前端工程師常說,只要掌握幾個關於emmet的要點,要區分網頁階層其實超級快!

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

父子兄弟階層、群組、上一層

這一篇有簡略說到父子階層(父元素與子元素)之間的關係。想成為前端工程師的同學們未來在處理網頁時,一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式:

父子元素一次輸入

前端工程師在使用 Emment 在設定HTML的子元素時非常方便,只要在父子元素間加入這個” > “符號即可。如下方的動態圖所示:假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置 子元素 p,並在 p 中在加上孫元素 ol 與 li 等動作,只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可輕鬆地一次寫完!

兄弟階層一次輸入

承接上面「父子元素一次輸入」的範例,若想在 p 的上方放置 h2 標題,但是 h2 標題不屬於 p 的父元素,位階是跟 p 同等的,則 h2 與 p 互為兄弟元素。

上方提到:元素間互為父子關係則用 > 隔開;若為兄弟元素,就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」

將元素設為同一階層的群組

承上面「兄弟階層一次輸入」的範例,若前端工程師想在互為兄弟階層的 h2+p 的階層下,再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做?那就把 h2+p 視為一個群組,用 () 括號的方式包起來,把用括號起來元素視為同一階層來看即可,所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」之後再按 ctrl+E 即可。

上一層

承上面「群組 Grouping」的範例,若前端工程師想在兩個互為兄弟階層的 h2+p 群組後方,新增一個 div 父元素(class name 名為「news_p」以及 id 名為「paragraph2」),就可以在元素間加入 ^ 符號即可。所以語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)^.news_p#paragraph2」之後再按 ctrl+E 即可。


本例的 div 元素使用 ^ 符號來往上爬一個階層,如果想要爬兩層的話,就是 ^^ 符號。

如果你想成為專業的前端工程師,這些快速鍵可要記得多練習幾次,熟練後就能在編寫 HTML 時更有效率啦!

 

 

 

推薦文章:
資深前端工程師之Emmet教學(3)快速複製元素與設定編號


頂尖前端工程師必備技能之一-掌握RWD基礎概念


工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!


HTML5瀏覽器儲存不是只有cookies!


今天一起揪出來-那些偷偷藏著Python和Java的電影(上)


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


透過對的Java課程,讓你從茫然的畢業生中脫穎而出!

資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?

資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?
資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?

資深前端工程師都知道Emmet超好用,今天就要教你如何快速產生標籤名稱!

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

身為一個前端工程師,一定要裝一個「省時神器」 Emmet 外掛,這不僅可以大大節省前端工程師在編寫 HTML 及 CSS 的時間,還可以省下的時間可以讓你去體驗人生各種美好的事物,如玩玩喵星人、上上健身房運動等等。

Emmet 支援的網頁編輯器如下圖:

安裝的方式會因個網頁編輯器而異,在網路上皆可以查到,故此省略。以下小編先介紹基本的使用方式:

快速產生標籤名稱 (Tag Name)

前端工程師在寫網頁的第一步,就是在網頁編輯器中開出新的頁面,並產生標準的 HTML 樣板。透過 Emmet,我們可以先在編輯器中輸入「!」或是「html:5」後,再按下 Ctrl+E 鍵即可。

假設我們要產生一個 p 元素,那麼我們只要直接輸入 p 後,再按下 Ctrl+E 鍵,就能自動產生起始元素及結束元素。如下所示:

只要是 HTML 所定義的元素,如 h1-h6、center、title 等等,都能使用上述方示,快速產生出相對應的語法如下

有些元素還會帶入跟該元素有關的屬性,例如:iframe、a 或是 img 等

快速產生 className 與 id

我們也可以在產生元素時,直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤,則輸入「h1.title」後按 Ctrl+E

若是要針對單一元素要加上多個 class name 的話,只要把它們用半形的句號隔開,接在一起就可以了。例如今天我們要產生 Class Name 為「news_p c1」的 div 標籤,則輸入「div.news_p.c1」後按 Ctrl+E

前端工程師省時神器 Emmet 一般預設的元素是 div,所以如果直接輸入英文句號後,寫 class name 的話,就會自動產生一個 div 元素加上指定的 class name。承上例,輸入「.news_p.c1」後按 Ctrl+E

除了 class name,我們也可以幫元素加上指定的 id。只要先打 # 號再輸入 id name 即可。例如今天我們要產生 id 為「news_p」的 div 標籤,則輸入「#news_p」後按 Ctrl+E

class name 和 id 可以同時使用,例如今天我們要產生 class name 為「news_p c1」、id 為「paragraph-1」的 div 標籤,則輸入「.news_p.c1#paragraph-1」後按 Ctrl+E

以上介紹為常用的 Emmet 標籤快捷縮寫方式,如果你想要知道更多的元素縮寫方式,都可在 Emmet 官方文件中找到:Emmet cheat sheet

 

 

 

推薦文章:
資深前端工程師之Emmet教學(2)階層如何快速區分?


為什麼ID選擇器對前端工程師如此重要?原因是…


那些前端工程師沒教你的CSS,今天一一告訴你!


從七大點告訴你Python和Java有何不同!!


擠進高薪科技大門-Java課程等你來瞭解!


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


專業達內教育與 Adobe·ACA 國際認證簽約成功

前進前端工程師之HTML5入門課程-SVG 路徑動畫

前進前端工程師之HTML5入門課程-SVG 路徑動畫
前進前端工程師之HTML5入門課程-SVG 路徑動畫

HTML5中有許多程式碼,只要根據以下步驟,SVG路徑動畫也可以輕鬆做出來!

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)

 

 

 

推薦閱讀:
資深前端工程師淺談Box model(上集)


成為前端工程師必會技能之一-CSS背景顏色設定


前端工程師CSS自學寶典(一)-絕對單位


從達內教育評價事件來看GEEGO(奇科?)IT培訓評論的謬誤


電影告訴你Python和人工智慧如何影響人類!(上)


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


挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

前進前端工程師之HTML5入門課程-SVG基本圖形動畫

前進前端工程師之HTML5入門課程-SVG基本圖形動畫
前進前端工程師之HTML5入門課程-SVG基本圖形動畫

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入門課程-SVG 路徑動畫


SEO無痛該怎麼做?資深前端工程師教你對的方法!


頂尖前端工程師必備技能之一-掌握RWD基礎概念


愛因斯坦也得過這種病? 專屬成功人士的疾病Python學員們知道嗎?


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


美國NASDAQ上市公司、外商IT教育培訓企業


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

菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?

菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?
菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?

在學HTML5的時候,常常聽到前輩說SVG圖檔比點陣圖還好用,到底該怎麼用呢?

何謂 SVG?

在以往網頁設計常使用的圖片檔如 jpg、png、gif 等都是以點陣圖模式呈現,但是目前時下最流行的 RWD 響應式網頁是可以隨著螢幕調整網頁布局,點陣圖隨著螢幕大小縮放就會有模糊失真的疑慮,因此HTML5的向量的 SVG 是不錯的解決方法。

SVG(Scalable Vector Graphics,可縮放向量圖形)是 W3C 制定的開放性網路標準之一,此圖片格式再網頁中能以向量格式呈現圖片。網頁設計師可先在 Adobe Illusrator 中畫好向量圖形並存成 SVG 檔,在放在網頁中。運用方式其實就跟 .jpg、.png、.gif 等圖片檔一樣,但不同的是 SVG 檔不會因尺寸的改變而失真,日後要修改時也可直接開啟檔案修改,相當方便。

如何置入 SVG 影像到網頁中?

如同 .jpg、.png、.gif 的方式,SVG 圖檔使用 img 標籤被置入到 HTML5 檔中,如下方所示:

<img src="image.svg" alt="" height="300" />

使用 SVG 畫圖形

要用 SVG 畫出簡單的圖形,首先前端工程師要使用 SVG 標籤製作「畫布」。要賦予其畫布的長寬 (width、height) 屬性,如下例所示:

<svg width="1000" height="1000"></svg>

在此我們先舉「畫圓形」為例子,如下所示:

<svg width="2000" height="2000">
   <circle cx="80" cy="80" r="50" fill="magenta" />
</svg>
  • – cx 圓心之x軸座標
  • – cy 圓心之 y 軸座標
  • – r 半徑
  • – fill 填滿色彩
  • – stroke 圓形外框

結果如下所示:

See the Pen svg circle by Tedutw (@Tedutw) on CodePen.

同理, SVG 也可以用來「畫方形」。標籤中的「circle」要改成「rect」,半徑與圓心的屬性都要換成長與寬,原始碼與結果如下所示:

See the Pen svg rect by Tedutw (@Tedutw) on CodePen.

同理可證, SVG 標籤改成「line」,x1 與 y1 定義第一點的座標、x2 與 y2 定義第二點的座標,原始碼與結果如下所示:

See the Pen svg line by Tedutw (@Tedutw) on CodePen.

三邊以上的摺線,前端 工程師可用 SVG 「polyline」(多點折線)標籤,並為五點定義座標分別為 10 10, 60 60, 110 10,160 60 與 210 10 原始碼與結果如下所示:

See the Pen svg polyline by Tedutw (@Tedutw) on CodePen.

SVG 繪製橢圓形 (ellipse) ,標籤屬性的下法與上述的「circle」類似,差別在於水平與垂直的半徑可以分別使用「rx」與「ry」來定義,原始碼與結果如下所示:

See the Pen svg ellipse by Tedutw (@Tedutw) on CodePen.

三邊以上的形狀,用 SVG 繪製多邊形 (polygon) 的原始碼與結果如下所示::

See the Pen svg polygon by Tedutw (@Tedutw) on CodePen.

 

 

 

推薦文章:
HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器


菜鳥前端工程師的HTML5新手指南(一)-七大內容模組有哪些?


前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性


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


Java課程、UI課程、程式課程、網路行銷課程推薦


從七大點告訴你Python和Java有何不同!!


網頁設計AWD 要怎麼做才能對 SEO 無痛呢?這就告訴你!