PIXNET Logo登入

Java瑪奇朵-非本科系的IT吃喝電玩日誌

跳到主文

歡迎光臨Java工程師在痞客邦的小天地

部落格全站分類：職場甘苦

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 5月 29 週三 201921:52

  • 前端工程師不能錯過的HTML5:用新的元素排版俐落又精簡!


各位前端工程師們知道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各標籤在頁面上的位置
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載入進度顯示條





 
 
 
 
其他閱讀
前端工程師不能錯過的HTML5:載入進度的顯示條
前端工程師不能錯過的HTML5:網頁內容相關語意元素
前端工程師不能錯過的HTML5:嵌入音訊元素audio
重新學習UI UX Python課程 打好基礎輕鬆領高薪
Python課程讓你與AI接軌 不必擔心被科技取代
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
 
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(9)

  • 個人分類：
▲top
  • 5月 29 週三 201909:00

  • 超級實用的HTML5入門課程(四):嵌入音訊元素audio

超級實用的HTML5入門課程(三):嵌入音訊元素audio

這一篇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載入進度顯示條





 
 
 
 
其他閱讀
超級實用的HTML5入門課程(二):用新的元素排版俐落又精簡!
超級實用的HTML5入門課程(三):網頁內容相關語意元素
超級實用的HTML5入門課程(六):載入進度的顯示條

重新學習UI UX Python課程 打好基礎輕鬆領高薪


Python課程讓你與AI接軌 不必擔心被科技取代


想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!


人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？


 
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：
▲top
  • 5月 28 週二 201916:00

  • 前端工程師不能錯過的HTML5:載入進度的顯示條

前端工程師不能錯過的HTML5:載入進度的顯示條

對前端工程師最實用的HTML5入門課今天要來教大家如何嵌入載入進度的顯示條!!一定要學起來!!
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(1)

  • 個人分類：
▲top
  • 5月 28 週二 201910:00

  • 超級實用的HTML5入門課程(三):網頁內容相關語意元素

超級實用的HTML5入門課程(三):網頁內容相關語意元素

承上一篇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) 等其他獨立的內容區塊。
與<div>一樣，<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載入進度顯示條





 
 
 
 
其他閱讀
超級實用的HTML5入門課程(一):七個內容模組簡介
超級實用的HTML5入門課程(二):用新的元素排版俐落又精簡!
超級實用的HTML5入門課程(四):嵌入音訊元素audio
重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代


想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!


人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？


 
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(1)

  • 個人分類：
▲top
  • 5月 27 週一 201920:00

  • 前端工程師不能錯過的HTML5:嵌入影片元素video

前端工程師不能錯過的HTML5:嵌入影片元素video

今天的HTML5入門課要來跟大家說一超好用的新增元素～還不知道如何嵌入影片的學員一定要看喔~
HTML5新增video元素-終於可以撥放影片了!
在 HTML5 版本出現之前，網頁排版只有<div>和<span>兩種元素而已，早已無法應付現今功能越來越齊全的網頁 —— 甚至連撥放影音的元素都沒有。在 HTML4，要在網頁中聽音樂或看到影片，只能透過像是 Flash 之類的外掛。 而 HTML5 中的 <video> 元素提供了可直接在網頁中嵌入影片檔的方式。
要在 HTML5 中使用 <video> 元素嵌入影片檔的語法與結果範例如下：
See the Pen video element pt.1 by Tedutw (@Tedutw) on CodePen.
上述的<vidio controls>標籤作用為叫出影片撥放介面(撥放、全螢幕音量控制等)。若如上述的例子，影片檔案太大的話，也可以在<vidio>標籤內指長寬，範例如下:
See the Pen video element pt.1-width&height by Tedutw (@Tedutw) on CodePen.
<source src="...">元素可以指定撥放的影片檔 URL，後方的「type="video/mp4"」為宣告媒體種類(media type)的指令，在此例中宣告檔案類型是 mp4 檔。 以下為檔案類型與媒體種類 (media type) 的對照：


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


MP4
video/mp4


WebM
video/webm


Ogg
video/ogg


HTML5 支援的音訊檔案有三種：MP4、WebM 與 OGG。
<video> 與 </video> 標籤中夾帶的「Video is not supported by your browser」，中譯為：「你的瀏覽器不支援 video 元素」，平時不會出現，只會在當使用者使用的瀏覽器不支援 <video> 元素時出現。較多人用的 Chrome 與 Firefox 瀏覽器支援所有被 HTML5 所支援的視訊檔「.mp4」、「.webm」與「.ogg」。但是 IE 與 Safari 瀏覽器就就不支援副檔名為「.webm」與「.ogg」的視訊檔。
<video> 標籤中的「自動撥放」與「重複撥放」指令
上述提到，<video> 標籤可以讓音訊控制面板 (功能有撥放、暫停與音量控制) 顯現。除此之外，前端工程師還可以為 <video> 標籤下定義，指定音訊檔是否要自動撥放或是重複撥放。
自動撥放
如果在 <video> 標籤中指定「自動撥放(<video controls autoplay>)」的話 ，則嵌入的視訊檔會在網頁 loading 好後自動撥放，不會事先問使用者是否要撥放。語法如下： (可點右方的「Result」按鈕看結果，即會自動撥放視訊。)
See the Pen video element pt.2-auto by Tedutw (@Tedutw) on CodePen.
重複撥放
如果在 <video> 標籤中指定「重複撥放(<video controls loops>)」的話 ，則嵌入的視訊檔會在影片撥放完畢後自動重播。語法如下： (「Result」中的影片撥放結束後，即會自動重播視訊。)
See the Pen video 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載入進度顯示條





其他閱讀
前端工程師不能錯過的HTML5:七個內容模組簡介
前端工程師不能錯過的HTML5:載入進度的顯示條
前端工程師不能錯過的HTML5:用新的元素排版俐落又精簡!
重新學習UI UX Python課程 打好基礎輕鬆領高薪
Python課程讓你與AI接軌 不必擔心被科技取代
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(1)

  • 個人分類：
▲top
  • 5月 27 週一 201911:00

  • 超級實用的HTML5入門課程(二):用新的元素排版俐落又精簡!


今天的HTML5入門課要來跟大家分享好用的排版元素!!除了能讓程式碼看起來更精簡以外,還能提升SEO優化呢!!
為何 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各標籤在頁面上的位置
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載入進度顯示條





 
 
 
 
其他閱讀
超級實用的HTML5入門課程(一):七個內容模組簡介
超級實用的HTML5入門課程(三):網頁內容相關語意元素
超級實用的HTML5入門課程(四):嵌入音訊元素audio
重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代


想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!


人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？


 
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(3)

  • 個人分類：
▲top
  • 5月 24 週五 201922:59

  • 好消息!!達內教育與國際知名認證機構簽約合作,猜猜是哪個機構~

好消息!!達內教育與國際知名認證機構簽約合作,猜猜是哪個機構~

猜猜達內教育最近和哪個知名國際認證機構合作?是一個和藝術相關學員密切相關的機構喔~
不久前，美國納斯達克上市的教育集團達內教育集團完成了與 Adobe-ACA 國際認證合作的簽約儀式。達內教育集團成都大學生實訓基地綿陽片區總監陳秀軍、院校合作經理週開楠、四川文化藝術學院職教學院範高林院長、張勝蓉副院長、陳淑娟副院長及相關專業老師都出席了此次簽約儀式。
雙方代表，依照之前已達成的合作意見，展開深度的交流，緊緊圍繞後續全校推廣工作怎麼更有效的實施展開密切溝通。四川文化藝術學院希望藉助 Adobe 揚名國際的品牌、Adobe 國際認證的獨特優勢，以及達內教育評價在 Photoshop、平面設計、網頁設計等數位藝術職業教育領域的經驗和成就，以及達內教育集團已獲得 《Adobe 國際認證 ACA 授權考試中心》 的特許資質，規劃在數位藝術領域宣傳和推廣 Adobe 國際認證，引進國際資源，培養國際數位藝術人才。
 
 
 
其他閱讀
哪些品牌在東方富比世榜上有名? 達內教育,海爾等等知名企業都進榜!!
機器人會跟你搶飯碗?達內教育教你如何善用人工智慧!
對自己未來很迷茫?聽林同學給達內教育評價,你會發現...
重新學習UI UX Python課程 打好基礎輕鬆領高薪
Python課程讓你與AI接軌 不必擔心被科技取代
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
達內教育開幕　培養台灣IT人才進入全球企業
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(1)

  • 個人分類：
▲top
  • 5月 24 週五 201908:00

  • 超級實用的HTML5入門課程(一):七個內容模組簡介

超級實用的HTML5入門課程(一):七個內容模組簡介

這一篇文章要來向大家介紹HTML5裡全新的七個內容模組!!請大家一定要學起來啊!!
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(5)

  • 個人分類：
▲top
  • 5月 23 週四 201921:28

  • 名畫裡的人物變得活生生?!AI人工智慧讓不可能變可能~


名畫裡的人物變得活生生?!AI人工智慧讓不可能變可能~


只有人工智慧能超越人工智慧!!名畫裡的人物都甦醒了~還能與你對話聊天~~
 
AI讓蒙娜麗莎動起來
過去，AI 機器學習研究人員開發了一套系統，它可以利用靜態的人臉照片/肖像呈現出栩栩如生維妙維肖的逼真動作。有了這樣的系統，每一張人像照片都可以變成動畫，彷彿畫中的肖像都變成活生生的人一樣！
日前三星人工智慧研究中心（Samsung AI Center）發表的論文中，就描述了這套系統，該論文已經上傳到 Arxiv (註：一個收集物理學、數學、電腦科學等論文預印本的網站)。該系統使用了新的方法，將「來源臉孔（就是人在做動作時的頭部特寫）」影片上的特徵與｢目標臉孔」的數據對應，讓目標臉孔做出來源臉孔的動作。如以下影片所示：

這些三星駐莫斯科的研究人員在這篇論文也表示，只需要一位人臉的模型，就可以使一個圖像呈現出說話、做各種表情的影片。雖然效果還稱不上是完美，但也足夠假以亂真了。不過在讓這些肖像「活過來」的前提，是需要擁有大量的臉部數據資料。數據越多，表情及動作就越逼真。
他們能夠讓愛因斯坦或是瑪麗蓮夢露等名人的照片、甚至是世界名畫「蒙娜麗莎」，讓他們呈現栩栩如生的動作，生動的表情、動作，彷彿活過來了一樣。例如下圖的蒙娜麗莎合成動畫，就使用了三個不同的「來源臉孔」的影片。最終的成果都有很大的差異。
AI讓蒙娜麗莎動起來
而且，這個系統還運用了所謂的「生成對抗網絡（GAN）」，也就是讓兩個模型相互對抗，第一個模型彷彿製造贗品的「工匠」，試圖欺騙第二個「鑒别者」模型：我們現在手上有真實的data，「工匠」要做的事就是要做出這個data的「贗品」，而「鑒别者」則是要分辨給他的data是真的還是假的，並且會給出一個回饋。「工匠」根據「鑒别者」給的回饋來「訓練」他的工藝，也就是調整模型的數值；一旦「工匠」將其數值調整到「鑒别者」分誤以為是真的data時，就可以說我們訓練出了一個能夠模擬真正data的模型。
在這些研究人員提供的其他例子中，有些生成的結果，質量差強人意。例如有些例子的來源影片是取自於新聞，結果生成出來的目標影片竟然也有來源影片下方的新聞跑馬燈，跑馬燈上的字幕是用亂碼填充的。雖說如此，但是這個系統，能達到如此的效果已經算是不錯了。不過現在這個系統仍只適用於臉部，你還不能讓蒙娜麗莎跳舞。人工智慧-機器學習仍然有很大的進步空間。
 
 
 
其他閱讀
AI人工智慧系統進駐醫院,快速偵測敗血症提高病患存活率!!
你的指令要求雅婷通通聽得懂!!有專屬台灣人的人工智慧在,一切安啦!!
AI人工智慧進駐大賣場!! 有了這項新技術就能讓員工更專注在客服務上了!!
重新學習UI UX Python課程 打好基礎輕鬆領高薪
Python課程讓你與AI接軌 不必擔心被科技取代
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
達內教育開幕　培養台灣IT人才進入全球企業
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(9)

  • 個人分類：
▲top
  • 5月 23 週四 201910:00

  • 前端工程師養成計畫表讓你清清楚楚了解這門專業的學習內容!!

前端工程師養成計畫表讓你清清楚楚了解這門專業的學習內容!!

還因為對前端工程師課程不了解而遲遲未報名嗎?下面統整了前端工程師養成計畫的學習內容~有興趣的同學好好看一下吧~
(繼續閱讀...)
文章標籤

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣(117)

  • 個人分類：
▲top
«1...66676895»

個人資訊

Java瑪奇朵
暱稱：
Java瑪奇朵
分類：
職場甘苦
好友：
累積中
地區：

熱門文章

  • (442)Java課程的第一課-Java為何被取名為可以喝的Java咖啡?
  • (34)日本首座自駕車公園盛大完工~人工智慧讓自駕車不再是夢!!
  • (1,222)HTML5教學教你如何做出逼真的書本翻頁動畫!!
  • (10,713)想做出精美的翻頁效果? HTML5教學6種變化直接告訴你!!
  • (25)你玩過人工智慧合成人臉,但你聽過貓也可以合成嗎? 貓咪合成後竟變這樣?
  • (369)HTML和CSS網頁顏色代碼複製貼上!! 前端工程師快比這篇收起來放!!
  • (63)Python不是大蟒蛇也不唸“派桑”~那到底怎麼唸呢?
  • (2,315)Python控制結構一次懂:實作簡單的計算機
  • (17)前端工程師和後端工程師的差別是什麼?
  • (3)新手必讀的JavaScript(5):賦值運算子

文章分類

  • SEO (1)
  • SEO (30)
  • 設計 (1)
  • 設計 (36)
  • 網路行銷 (1)
  • 網路行銷 (1)
  • 網路行銷 (1)
  • 網路行銷 (15)
  • 前端工程師CSS基礎課程 (36)
  • 11月第四週分享 (5)
  • 11月第三週分享 (5)
  • 11月第二週分享 (5)
  • 11月第一週分享 (5)
  • 第五週學習 (5)
  • 第四週學習 (5)
  • 第三週學習 (5)
  • 第一週學習 (5)
  • 第二週學習 (5)
  • 程式設計課程相關 (444)
  • Java課程心得 (7)
  • 吃喝電玩 (7)
  • 未分類文章 (1)

最新文章

  • 人工智慧如何在戰火連天的烏俄地區幫助烏克蘭?
  • 討論度爆棚元宇宙時裝周竟犯這種失誤?完美步上20年前的後塵?
  • Google一出手就要打趴YouTube零廣告第三方撥放器?
  • 2022討論度最高的七大面向突破不可不知!!
  • 前端工程師開發網頁好助手非Emmet莫屬?為什麼?
  • Python和Java搞清楚差別了嗎?到底該怎麼選擇呢?
  • 日本最新發明讓你在虛擬的元宇宙裡也能體驗觸覺和痛覺!!
  • 人工智慧專業操盤手幫你選好潛力股和加密貨幣~真的能信嗎?
  • 台大打造人工智慧眼科診斷軟體,助糖尿病友預防視網膜病變!!
  • 使命必達的人工智慧機器人也要丟飯碗了?!人類不用再怕被取代了?

動態訂閱

文章精選

文章搜尋

誰來我家

參觀人氣

  • 本日人氣：
  • 累積人氣：