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

 
HTML5新增了Web Storage功能,取代了只能儲存4kb的cookies!

關於這系列的HTML5文章,最後一回介紹"進度顯示條"給你認識認識~
比起 HTML4，HTML5 新增的元素可說是「一應俱全」、「應有盡有」！其中，有個重要的元素叫 <progress> 元素，它讓前端工程師可以用來顯示網頁的載入、上載、下載的進度等等。
若要在 HTML5 中使用 <progress> 元素，當然，今天不例外地，也提供前端工程師載入進度條 (progress bar) 的語法與結果，請參考下方：
See the Pen progress bar by Tedutw (@Tedutw) on CodePen.
上述的 <progress> 標籤，最大值設定為 100%、最小值設定為 0%。其進度是固定在 22% （語法：<progress value="22" max="100">） 的。
另外，如果你希望進度條的進度，能隨著網頁實際 loading 進度顯示的話，那就需要配合 javascript 來設定了！
 
 
 


HTML5新增元素目錄：

 

1. HTML5的7個內容模組Content Models


2. header,nav與footer元素


3. article,section與aside元素


4. audio影片嵌入元素


5. video影片嵌入元素


6. progress載入進度顯示條

 
 
 
 HERE！延伸閱讀看這裡：








輕鬆入門前端工程師的HTML5課程(3)元素排版-上








輕鬆入門前端工程師的HTML5課程(4)元素排版-下

輕鬆入門前端工程師的HTML5課程(5)嵌入影片教學




   白帽SEO黑帽SEO傻傻分不清嗎?網路行銷課程一次就讓你搞懂!!



Python課程時事分析-為何谷歌終止中國蜻蜓計畫(上)


先別管韓國魚了,你有聽說過Python嗎?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？


  
  
  

HTML5嵌入影片的功能也太強了!還附贈一堆指令可以應用,快來瞧瞧!
 
更簡單、更有利於 SEO - HTML5新增的語意元素
在前一篇提過： HTML4 的時代，網頁排版只有兩種元素：<div>和<span>，但早已無法應付近十年來越來越複雜多元的網頁排版。前端工程師只好將這些元素「延伸」以便排版，因此常常看到有<div id="header">這樣子冗長的標籤。也因此，HTML5 提供了一系列語意元素（Semantic Elements）來取代上述的「延伸」用法，像上述的例子在 HTML5 就可以用 <header> 來取代，既精簡又更利於 Google 的搜尋引擎爬蟲理解，因此對 SEO 有例。
既上篇介紹的<header>、<nav>和<footer>等 HTML5 網頁語意元素之後，本篇要介紹的是與網頁內容相關的<article>、<section>和<aside>。
<article>：最具資格的成為<div>的接班人
Article 是一個獨立的區塊，使用的方式如同 HTML4 的<div> （或說是用來取代<div>的也不為過），因為<article>可以在網頁的各地方單獨地被使用、部屬。 語意元素定義網頁的標頭，通常放置網站標題。
與<div>一樣，<article>的應用範圍很廣，它包含的內容可以是一則網路新聞報導、一則意見回覆、一篇論壇貼文、一個部落格的入口、一個具互動功能的網頁小工具（widget 或是 gadget）等其他獨立的內容區塊。另外，<article>與<div>一樣，它也在後面加入「id」或是「class」的延伸用法，則 article 標籤則分別看起來就會是「<article id="...:>...</article>」與「<article class="...:>...</article>」。
<article>
這是article區塊
<h1>區塊中標題</h1>
<p>區塊中內容</p>
</article>
See the Pen article by Tedutw (@Tedutw) on CodePen.
<article>標籤可用於網頁文章中。一個<article>標籤就相當於文章中的一段。
<section>元素
Section 是一個邏輯性的的區塊，可以將一篇文章的內容作分段。一個<section>即是一段內容。
<section>裡面也可包含段標、文圖內容等。也常與<article>搭配使用，如下所示：
<article>
<h1>Welcome</h1>
<section>
<h1>Heading</h1>
<p>content or image</p>
</section>
</article>
See the Pen article & section by Tedutw (@Tedutw) on CodePen.
若想要將多個<section>歸類在同一個區塊的話，就使用<article>來包覆多個<section>吧！
<aside>元素
aside 區塊的內容，通常是與主條目關連，但是又不那麼直接相關的附加內容。常以「網頁側欄」的形式出現，如下所示：
See the Pen Basic html5 layout example by Tedutw (@Tedutw) on CodePen.
<aside>可以與<section>被同一個<article>所包覆
 


HTML5新增元素目錄：

1. HTML5的7個內容模組Content Models


2. header,nav與footer元素


3. article,section與aside元素


4. audio影片嵌入元素


5. video影片嵌入元素


6. progress載入進度顯示條

 
 HERE！延伸閱讀看過來：





輕鬆入門前端工程師的HTML5課程(3)元素排版-上






輕鬆入門前端工程師的HTML5課程(4)元素排版-下

輕鬆入門前端工程師的HTML5課程(6)進度顯示條


 



白帽SEO黑帽SEO傻傻分不清嗎?網路行銷課程一次就讓你搞懂!!


上UI課程,讓你薪水賺好賺滿賺飽飽!


門外漢想進科技產業不用怕!來達內教育,讓你學好學滿!

中國IT教育領導品牌　達內教育集團第一家海外授權中心

在前一篇介紹HTML5元素的文章提到:在HTML4的時代,網頁排版有兩種元素:<div>和<span>
 
 更簡單、更有利於 SEO - HTML5新增的語意元素
 
但<div>和<span>這兩種元素，早已無法應付近十年來越來越複雜多元的網頁排版！前端工程師只好將這些元素「延伸」以便排版，因此常常看到有<div id="header">這樣子冗長的標籤。因此，HTML5 提供了一系列語意元素（Semantic Elements）來取代上述的「延伸」用法，像上述的例子在 HTML5 就可以用 <header> 來取代，既精簡，又更利於 Google 的搜尋引擎爬蟲理解，因此這對 SEO 有利。
既上篇介紹的<header>、<nav>和<footer>等 HTML5 網頁語意元素之後，本篇要介紹的是與網頁內容相關的<article>、<section>和<aside>。
 
<article>-最具資格的<div>的接班人
前端工程師應該都會知道，Article 是個獨立的區塊，使用的方式如同 HTML4 的<div> （或說是用來取代<div>的也不為過），因為<article>可以在網頁的各地方單獨地被使用、部屬。 語意元素定義網頁的標頭，通常放置網站標題。
與<div>一樣，<article>的應用範圍很廣，它包含的內容可以是一則網路新聞報導、一篇論壇貼文、一則意見回覆、一個部落格的入口、一個具互動功能的網頁小工具 （widget 或是 gadget） 等其他獨立的內容區塊；另外，<article>也有在後面加入「id」或是「class」的延伸用法，如此一來， article 標籤則分別看起來就會是「<article id="...:>...</article>」與「<article class="...:>...</article>」。
 
<article>
這是article區塊
<h1>區塊中標題</h1>
<p>區塊中內容</p>
</article>
 
See the Pen article by Tedutw (@Tedutw) on CodePen.

<article>標籤可用於網頁文章中。一個<article>標籤就相當於文章中的一段。
 
<section>元素
Section 是一個邏輯性的的區塊，可以將一篇文章的內容作分段。一個<section>即為一段內容
<section>裡面也可包含段標、文圖內容等。常與<article>搭配使用，如下所示：
<article>
<h1>Welcome</h1>
<section>
<h1>Heading</h1>
<p>content or image</p>
</section>
</article>
See the Pen article & section by Tedutw (@Tedutw) on CodePen.

若想要將多個<section>歸類在同一個區塊的話，就使用<article>來包覆多個<section>吧！
 
<aside>元素
aside 區塊的內容，通常是與主條目關連，但是又不那麼直接相關的附加內容。常以「網頁側欄」的形式出現，如下所示：
See the Pen Basic html5 layout example by Tedutw (@Tedutw) on CodePen.

<aside>可以與<section>被同一個<article>所包覆


HTML5新增元素目錄：

 

1. HTML5的7個內容模組Content Models


2. header,nav與footer元素


3. article,section與aside元素


4. audio影片嵌入元素


5. video影片嵌入元素


6. progress載入進度顯示條

  
HERE！延伸閱讀看過來：





輕鬆入門前端工程師的HTML5課程(3)元素排版-上





輕鬆入門前端工程師的HTML5課程(5)嵌入影片教學

輕鬆入門前端工程師的HTML5課程(6)進度顯示條






用網路行銷課程連接奢侈品

台灣人工智慧實驗室研發偵測敗血症系統,準確率高達百分之八十!!

上完了Python課程,我再也不害怕被機器人取代!

達內課程先就業再付款- 中時電子報

 
HTML5的語意元素比上一代要多出哪些?那些又該怎麼使用?看好上下篇,六個語意元素學好學滿!
 
為何 HTML5 需要增加這些語意元素?
讓我們回想一下，在HTML4 的時代，前端工程師只能使用<div>和<span> 兩個元素進行網頁排版的工作。但是因為網頁排版本身又分成標題、導覽列、選單、側欄等區塊，不只兩種元素。因此常常看到有 <div id="header">、 <div class="nav">等元素搭配 id 和 class 的「延伸」用法，既冗長又麻煩。
因此 HTML5 便成為前端工程師的救星。它提供了一系列簡單俐落的語意元素（Semantic Elements）來取代，其中包括<header>、<nav>、<main>、<footer>等。像是 HTML4 的<div id="header">在 HTML5 上就可以俐落的使用<header>來取代。不但在寫法上看起來精簡，且 Google 的網頁爬蟲也能更快辨識到網頁的標題、目錄、內容等，因此也有增強網頁 SEO 的效果。以下就針對這些語意元素（Semantic Elements，也被稱為語意標籤，就是「有意義的元素」）來分別作說明：
<header>
header語意元素定義網頁的標頭，通常放置網站標題。
在 HTML4 中， header 元素的寫法如下：
<div id="header">
在 HTML5 就不用那麼麻煩，只要單單使用<header>標籤來取代即可。範例如下：
<!doctype html>
<html>
<head></head>
<body>
<header>
<h1><header></h1>網頁標題
</header>
</body>
</html>
以上代碼呈現結果為：
See the Pen header by Tedutw (@Tedutw) on CodePen.
<footer>
footer語意元素使用時機很廣泛，通常都至於網頁的最下方。
以下資訊常常會出現在<footer>...</footer>標籤內：
-聯絡資訊
-隱私權政策 (Private Policy)
-社群連結 icon 按鈕圖示 (如Facebook、Twitter、IG等)
-服務條款 (Terms of Service)
-版權聲明 (Copyright Information)
-網站地圖 (Sitemap)
<nav>
nav 標籤常出現在<header>標籤下方，或是最左、最右邊(有些部落格網站會這樣編排)，標籤內容為網頁的選單、導覽。範例如下
最後，綜合本文的<header>、<footer>、<nav>標籤，呈現結果如下：
 
HTML5 各標籤 (header、nav、article、aside 與 footer) 在頁面上的位置
 
以上的頁面，原始碼如下所示：
<DOCTYPE! html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic html layout example</title>
</head>
<body>
<!--header-->
<header>
<h1>< header ><p>可放置頁面主要標題、LOGO 等</p></h1>
</header>
<!--nav-->
<nav>
< nav ><p>此網頁的導覽區塊</p>
<ul>
</ul>
</nav>
<article>
< article ><p>內容區</p>
<section>< section ><p>網頁內容的區塊-1</p></section>
</article>
<aside>
< aside ><p>側邊欄位可放置額外資訊、相關連結等</p>
</aside>
<!--footer-->
<footer>
< footer ><p>頁腳處，可在此聲明版權、使用規範等等</p>
</footer>
</body>
</html>


HTML5新增元素目錄：

 

1. HTML5的7個內容模組Content Models


2. header,nav與footer元素


3. article,section與aside元素


4. audio影片嵌入元素


5. video影片嵌入元素


6. progress載入進度顯示條

 
HERE！延伸閱讀看過來：







輕鬆入門前端工程師的HTML5課程(1)7個內容模組






輕鬆入門前端工程師的HTML5課程(2)嵌入音訊的元素






輕鬆入門前端工程師的HTML5課程(4)元素排版-下

   

想了解城市與肥胖的關聯?Python課程是你最好的入門老師!



醫療產業+UI課程=高薪專業人士,人生雙贏不GG


網路行銷課程教七招弄懂時下最火的APP-Zepeto!
達內教育開幕　培養台灣IT人才進入全球企業
 
 
  
  

 
HTML5真的充滿驚喜!現在我們要繼續為你介紹它五花八門的元素!上緊發條囉!
HTML5新稱audio元素-終於可以撥放音樂了!
在 HTML5 版本出現之前，用 HTML4在網頁中聽音樂或看到影片時，只能透過像是 Flash 之類的外掛。 而 HTML5 新增的 <audio> 元素提供了可直接在網頁中嵌入影音檔的方式！
前端工程師要在 HTML5 中，使用 <audio> 元素嵌入音訊檔的語法與結果範例如下：
See the Pen audio element pt.1 by Tedutw (@Tedutw) on CodePen.
上述的<audio controls>標籤作用為叫出音訊控制面板，像是撥放、暫停與音量。
<source src="...">元素可以指定撥放的音訊檔 URL，後方的「type="audio/ogg"」為宣告媒體種類(media type)的指令，在此例中宣告檔案類型是 ogg 檔。 以下為檔案類型與媒體種類 (media type) 的對照：
 


檔案類型
媒體種類 (media type)


MP3
audio/mpeg


OGG
audio/ogg


WAV

audio/wav

 
HTML5 支援的音訊檔案有三種：MP3、WAV 與 OGG。
<audio> 與 </audio> 標籤中夾帶的「Your browser does not support the audio element.」，中譯為：「你的瀏覽器不支援 audio 元素」，平時不會出現，只會在使用者使用的瀏覽器不支援 <audio> 元素時出現。較多人用的 Chrome 與 Firefox 瀏覽器支援所有被 HTML5 所支援的音訊檔「.mp3」、「.wav」與「.ogg」。但是微軟的 IE 就不支援副檔名為「.wav」與「.ogg」的音訊檔。此種狀況不常見。
<audio> 標籤中的「自動撥放」與「重複撥放」指令
上述提到，<audio> 標籤可以讓音訊控制面板 (功能有撥放、暫停與音量控制) 顯現。除此之外，前端工程師還可以為 <audio> 標籤下定義，指定音訊檔是否要自動撥放或是重複撥放。
自動撥放
若在 <audio> 標籤中指定「自動撥放(<audio controls autoplay>)」 ，則嵌入的音訊檔會在網頁 loading 好後自動撥放，不會事先問使用者是否要撥放。語法如下： （可點右方的「Result」按鈕看結果，即會自動撥放音檔。音檔歌曲：Dream Theater 「Pull Me Under」 片段）
See the Pen audio element pt.2-auto by Tedutw (@Tedutw) on CodePen.
 
重複撥放
若在 <audio> 標籤中指定「重複撥放（<audio controls loops>）」 ，則嵌入的音訊檔會在撥放完畢後自動重播。語法如下：（「Result」中的音檔撥放結束後，即會自動重播音檔。音檔歌曲：Dream Theater 「Pull Me Under」 片段）
See the Pen audio element pt.2-loop by Tedutw (@Tedutw) on CodePen.

 


HTML5新增元素目錄：

1. HTML5的7個內容模組Content Models


2. header,nav與footer元素


3. article,section與aside元素


4. audio影片嵌入元素


5. video影片嵌入元素


6. progress載入進度顯示條

 
   HERE！延伸閱讀看過來：






輕鬆入門前端工程師的HTML5課程(1)7個內容模組






輕鬆入門前端工程師的HTML5課程(3)元素排版-上
輕鬆入門前端工程師的HTML5課程(4)元素排版-下


神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?


程式語言懶人包,讓你秒懂Python課程!


程式語言都會了,為什麼還要來上UI課程?


NOWnews 今日新聞
  
 
 
 

HTML5重新定義的七個內容模組,你知道他們分別要用在哪嗎?繼續往下看就知道啦!
在 HTML5 的前一代 HTML4 中，元素只分成「inline(行內元素)」與「block(區塊元素)」兩大模型。但在實際開發的過程中，許多前端工程師為了能讓許多 block 塊級元素既能水平排列，又要讓這些區塊自成一行，避免後面的元素也浮上來蓋住這簽區塊的狀況下，於是衍生出了inline-block，這個同時兼具「inline(行內元素)」與「block(塊級元素)」特性的屬性。（想了解更多詳情，請見這篇：inline-block 屬性介紹）。
由此可見！單單把 HTML 元素劃分為 inline 與 block 兩種模型，已經不再符合現代前端工程師的實際需求啦～


HTML5新增元素目錄：

1. HTML5的7個內容模組Content Models


2. header,nav與footer元素


3. article,section與aside元素


4. audio影片嵌入元素


5. video影片嵌入元素


6. progress載入進度顯示條

 
因此 HTML5 中重新定義了 HTML 元素的分類，共有七種主要的內容模型：Embedded、Interactive、Metadata、Heading、Phrasing 、Flow 與 Sectioning
這些七種內容模型間也有一些交集的關係，就是一個元素可同時屬於多個分類如下圖所示:
 
馬上來告訴你這七種分類的介紹：
Embedded (嵌入型內容)
Embedded 內容將其他資源導入文件。
屬於 Embedded 的元素有: <audio>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>, <video>
Interactive (互動型內容)
interactive 內容為專給使用者互動的元素。
屬於 Interactive 的元素有: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <input><label>, <object>, <select>, <img>, <textarea>
Metadata (資訊元內容)
Metadata 定義整體文件其餘內容的呈現樣式或行為，Metadata 內容出現在 HTML 檔的 <head> 標籤內
屬於 Metadata 的元素有: <base>, <link>, <meta>, <noscript>, <script>, <style>, <template>, <title>
Heading (標題型內容)
顧名思義，標題型內容定義斷落的標題。
屬於 Heading 的元素有: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Phrasing (段落型內容)
Phrasing 內容包含了許多行內等級的元素，與 HTML4 的 inline 行內元素相同。
屬於 Phrasing 的元素有: <img>, <span>, <strong>, <label>, <br>, <small>, <sub>等等。
Flow content (流動型內容)
Flow content 包含了大部分的 HTML5 的元素，文件內大部分的內容皆屬此類。
屬於 Flow content 的元素有: <a>、<abbr>、<address>、<article>、<aside>、<audio>、<b>,<bdo>、<bdi>、<blockquote>、<br>、<button>、<canvas>、<cite>、<code>、<command>、<data>、<datalist>、<del>、<details>、<dfn>、<div>、<dl>、<em>、<embed>、<fieldset>、<figure>、<footer>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<header>、<hgroup>、<hr>、<i>、<iframe>、<img>、<input>、<ins>、<kbd>、<keygen>、<label>、<main>、<map>、<mark>、<math>、<menu>、<meter>、<nav>、<noscript>、<object>、<ol>、<output>、<p>、<pre>、<progress>、<q>、<ruby>、<s>、<samp>、<script>、<section>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<svg>、<table>、<template>、<textarea>、<time>、<ul>、<var>、<video>、<wbr> 還有文字等。
Sectioning content (章節型內容)
Sectioning content 會定義標題 headings、內容 content、導覽列 navigation 與 footer 的範圍
屬於Sectioning content 的元素有: <article>、<aside>、<nav>還有<section>
 
 
 HERE！延伸閱讀看過來：
輕鬆入門前端工程師的HTML5課程(2)嵌入音訊的元素
輕鬆入門前端工程師的HTML5課程(3)元素排版-上
輕鬆入門前端工程師的HTML5課程(4)元素排版-下
對自己未來很迷茫?聽林同學給達內教育評價,你會發現...
哇塞!學了UI課程讓你數錢數到手抽筋
網路行銷課程教你辨別黑白帽SEO
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
  
  
 
 

早就提醒你別小看達內教育~今天和Adobe-ACA國際認證簽約,更證明達內的堅強實力名不虛傳!
日前，美國納斯達克上市的教育集團達內教育完成了與Adobe-ACA 國際認證合作的簽約儀式！達內教育集團成都大學生實訓基地綿陽片區總監陳秀軍、院校合作經理週開楠、四川文化藝術學院職教學院範高林院長、張勝蓉副院長、陳淑娟副院長及相關專業老師，都出席了此次的簽約儀式。
雙方代表，就之前已達成的合作意見，展開深度交流，不外乎是圍繞著後續「全校推廣工作如何更有效實施」而展開密切溝通。四川文化藝術學院則希望藉助 Adobe 國際品牌、Adobe 國際認證的獨特優勢，以及達內教育評價在 Photoshop、平面設計、網頁設計等數位藝術職業教育領域的經驗和成就，另外，熟知達內教育評價的人也一定聽說過，達內也已獲得 《Adobe 國際認證 ACA 授權考試中心》 的特許資質了！並且他們也馬不停蹄地計畫在數位藝術領域的宣傳和 Adobe 國際認證的推廣，引進國際資源，培養像是在平面設計、Photoshop等相關方面的國際數位藝術人才！
 
HERE！延伸閱讀看過來：

想找最專業的職業培訓機構?選擇達內教育絕對值回票價!
 
 



達內教育攜手惠普和英特爾,打造更好的數位化職業教育


達內教育評價讓他安心轉職:看天吃飯的農家子弟到敲敲鍵盤的工程師
 





前端工程師的必備知識:ID選擇器宣告法


用UI 課程寫出兼具便利與美學網頁的工程師到底尬意什麼?

前端工程師必學!! 三種背景固定模式設定一次通通教給你!!

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

現在連Python都能畫出一支維妙維肖的皮卡丘了,你還在用PS和以拉?落伍啦!
 
大家都想到前陣子上映的動畫電影「名偵探皮卡丘」票房成績不俗，賣座程度僅次於「復仇者聯盟-終局之戰」。雖然電影中的那隻皮卡丘是以「賤萌」的形式呈現，但也激起許多工程師小時候時看「神奇寶貝」中，那隻呆萌的皮卡丘的回憶。
前陣子上映的名偵探皮卡丘劇照
在大陸就有熱血的 Python 工程師使用 Python 的 「海龜」 Turtle 繪圖模塊，畫起皮卡丘來，而且還畫得唯妙唯肖的！先看看以下的效果吧：
 
​
大陸網友文摘菌用Python來畫皮卡丘，畫得唯妙唯肖 (圖片來源：https://mp.weixin.qq.com)
 
步驟：先選好畫板大小、設置好畫筆顏色、粗細；定位好位置後，開始畫鼻子、頭、耳朵、眼睛、嘴、身體、手腳、尾巴。
Python 的 Turtle graphics 模塊，中文直譯為「海龜繪圖」，是提供給兒童學習程式語言用的模組。現在你想像螢幕上有一隻帶著畫筆的海龜在 X,Y 軸平面座標上，從座標 (0,0) 出發。你給牠下指令「turtle.forward(15)」，牠就會往前走 15 像素的距離，接者你下指令「turtle.right(25)」，牠就會朝向順時針 25 度的方向轉彎。只要你不斷對著海龜重複著這類型的指令，海龜就能完成一幅圖畫。
 
透過定位下指令移動畫筆位置的海龜繪圖(Turtle graphics)模塊
 
上圖用 Python 繪製的皮卡丘，就是靠著不斷的指定座標、定位與方向而完成的。以下直接提供這範例的部分 Python 程式碼給你參考：
import turtle as t
def infoPrt():
print('coordinate: ' + str(t.pos()))
print('angle: ' + str(t.heading()))
t.pensize(3)
t.hideturtle()
t.colormode(255)
t.color("black")
t.setup(700, 650)
t.speed(10)
t.st()
#t.dot()
t.pu()
#t.goto(-150,100)
t.goto(-210,86)
t.pd()
infoPrt()
# 头
print('头')
t.seth(85)
t.circle(-100,50)
#t.seth(78)
#t.circle(-100,25)
infoPrt()
t.seth(25)
t.circle(-170,50)
infoPrt()
# 右耳
print('右耳')
t.seth(40)
#t.circle(-250,52)
t.circle(-250,30)
infoPrt()
# 右耳尖
t.begin_fill()
# 左
t.circle(-250,22)
#t.fillcolor("pink")
# 右
t.seth(227)
t.circle(-270, 15)
prePos = t.pos()
infoPrt()
# 尾巴
t.pu()
t.setpos(p_tail)
t.pd()
t.begin_fill()
t.seth(50)
t.fd(25)
t.seth(-50)
t.fd(30)
p_tail1=t.pos
t.seth(-140)
t.fd(36)
t.end_fill()
t.seth(39)
# 右尾和h1
t.fd(72)
# 右尾和v1
t.seth(125)
t.fd(48)
# 右尾和h2
t.seth(40)
t.fd(53)
# 右尾和v2
t.seth(88)
t.fd(45)
# 右尾和h3
t.seth(35)
t.fd(105)
# 右尾和v3
t.seth(105)
t.circle(850, 8)
#t.fd(105)
t.seth(215)
#t.fd(125)
t.circle(850, 11)
t.seth(280)
t.fd(110)
t.seth(220)
t.fd(50)
t.seth(309)
t.fd(56)

以上只提供部分代碼，因為完整的多達 360 行！
其實 Turtle 海龜模組畫圖，它的原理非常簡單，只要先定位好座標再畫出曲線即可。難的是每個部位的位置如何定位。如果你是Python初學，又不想畫那麼複雜的話，可先試水溫，學習只畫出皮卡丘的臉即可 (如下圖)。作法可參考另一位網友的 CSDN 博客文章： 「教大家用python画皮卡丘的脸」。
 
Python初學者可先學習畫出皮卡丘的臉 (圖片來源：https://blog.csdn.net/hl_zmfh/article/details/83215693)
 
其實除了 Python 之外， Java也有 Turtle 海龜繪圖功能呢！有興趣的人別再用PS和以拉，去嘗試用 Java 畫皮卡丘看看吧！
 
 
HERE！延伸閱讀看過來：
 



啥咪?!機器人跟你搶工作!免驚驚, 來上Python課程不被AI取代
 



科技業的趨勢, 讓你事業節節升高的Python程式語言!
有著共榮共生關係的AI和Python課程,你還霧煞煞?(下)


 
 

 UI 課程等語言幫你看你的鄰里長什麼樣子呢
 



網路行銷課程說故事:SEO優化的龜兔賽跑



前端工程師都愛用的CSS,你懂它嗎?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？


  

 

 
人工智慧真是難讓人預測!現在連照片裡的人物都能動起來!誰能想得到有這天!!
過去，AI人工智慧 機器學習研究人員開發了一套系統，它可以利用靜態的人臉照片/肖像呈現逼真的動作。有了這樣的系統，每一張人像照片都可以變成動畫，彷彿畫中的肖像都變成活生生的人一樣！
最近，一篇來自三星人工智慧研究中心（Samsung AI Center）發表的論文中，就描述了這套系統。該論文已經上傳到 Arxiv (註：一個收集物理學、數學、電腦科學等論文預印本的網站)。該系統使用了新的方法，將「來源臉孔（就是人在做動作時的頭部特寫）」影片上的特徵與｢目標臉孔」的數據對應，讓目標臉孔做出來源臉孔的動作。如以下影片所示：
這些三星駐莫斯科的研究人員在這篇論文也表示，僅僅只需一位人臉的模型，就可以使一個圖像呈現出說話、做各種表情的影片。不過在讓這些肖像「活過來」的前提，是需要擁有大量的臉部數據資料。數據越多，表情及動作就越逼真。雖然目前的效果還稱不上完美，但也足夠假以亂真了！
他們能夠讓愛因斯坦或是瑪麗蓮夢露等名人的照片、甚至是世界名畫「蒙娜麗莎」，讓他們呈現栩栩如生的動作、生動的表情、動作，彷彿他們活過來了一樣。
例如下圖的蒙娜麗莎合成動畫，就使用了三個不同的「來源臉孔」的影片。最終呈現的成果都有很大的差異。
而且，這個系統還運用了所謂的「生成對抗網絡（GAN）」，也就是讓兩個模型相互對抗。第一個模型彷彿製造贗品的「工匠」，試圖欺騙第二個「鑒别者」模型：我們現在手上有真實的data，「工匠」要做的事就是要做出這個data的「贗品」，而「鑒别者」則是要分辨給他的data是真的還是假的，並且會給出一個回饋。「工匠」根據「鑒别者」給的回饋來「訓練」他的工藝，也就是調整模型的數值；一旦「工匠」將其數值調整到「鑒别者」分誤以為是真的data時，就可以說我們訓練出了一個能夠模擬真正data的模型。
在這些研究人員提供的其他例子中，有些生成的結果，質量差強人意。例如，有些例子的來源影片是取自於新聞，結果生成出來的目標影片，竟然也有來源影片下方的新聞跑馬燈，而跑馬燈上的字幕是用亂碼填充的。雖說如此，但是這個系統，能達到如此的效果已經算是不錯了！不過現在這個系統仍只適用於臉部，我們還不能讓蒙娜麗莎跳舞，人工智慧-機器學習仍然有很大的進步空間，但相信不久的將來人的AI人工智慧科技就能達到！
 
 
 HERE！延伸閱讀看過來：



美國的AI人工智慧領頭羊的地位岌岌可危?來看看川普怎麼應對!


一起來玩google新的人工智慧辨識功能!看看你的圖片能不能考倒它!
全台灣第一本人工智慧高中教科書,原來是他打造的..?



 前端工程師一定要知道的''CSS的語法格式''



感謝Python課程讓我追回浪費的青春!



稱霸排行榜的五大程式語言你都瞭嗎? 除了熱門的Java課程,你還可選....


中國IT教育領導品牌　達內教育集團第一家海外授權中心