發表文章

目前顯示的是 5月, 2019的文章

前端工程師的必上HTML5基礎課程(6)教你嵌入音訊元素

-
圖片
HTML5中的audio音訊嵌入元素,讓嵌入音訊檔也變得相當簡單!快來學吧!  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> 標...
閱讀完整內容

前端工程師的必上HTML5基礎課程(5)六個元素排版-下

-
圖片
  六種在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區塊 ...
閱讀完整內容

前端工程師的必上HTML5基礎課程(4)六個元素排版-上

-
圖片
HTML5比前一代的HTML4又多了六個語意元素,繼續往下看,學習如何好好善用它們!  為何 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 P...
閱讀完整內容

前端工程師的必上HTML5基礎課程(3)教你嵌入影片

-
圖片
今天教你怎麼利用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 元...
閱讀完整內容

前端工程師的必上HTML5基礎課程(2)載入進度顯示條

-
圖片
關於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 新增元素目錄： HTML5的7個內容模組Content Models header,nav與footer元素 article,section與aside元素 audio影片嵌入元素 video影片嵌入元素 progress載入進度顯示條 🔑不要錯過延伸閱讀： 前端工程師的必上HTML5基礎課程(1)7個內容模組介紹 前端工程師的必上HTML5基礎課程(2)載入進度顯示條 前端工程師的必上HTML5基礎課程(4)六個元素排版-上 想要錢多事少離家近的工作,來達內教育幫你美夢成真 網路行銷課程-SEO優化特別篇(上):擴大關鍵字的同時也在擴大你的客群!! 擠進高薪科技大門-Java課程等你來瞭解! 人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
閱讀完整內容

前端工程師學習路徑原來這麼簡單?清楚每一步再腳踏實地,這才是王道

-
圖片
想成為前端工程師的人有福了!這篇教你如何一步步成為專業的前端工程師,讓你不再像迷途羔羊般不知從何下手呀! 達內教育評價小組今天要跟大家分享的文章是2019年教你正確的 網頁前端 學習路線! 很多人想要轉職勝任網頁 前端工程師 ，但是尚未找到適合自己的學習方法。今天達內教育前端工程師課程的老師就為大家分享了這篇正確的 網頁前端學習路線 ，一起來一看究竟!   第一步：把握 HTML /CSS 這是基本的網站的構建元素，是所有網頁設計/開發者都必須要學會的語言。尤其是 HTML5 ，並且 HTML /CSS也很簡單易學，沒得挑！ 第二步：學會使用基本工具 文本編輯器：例如 Sublime Text、Dreamweaver、Visual Studio Code 等 圖像編輯器：Photoshop、Illustrator 等 FTP/SSH 工具：Filezilla、PuTTY 等 網頁瀏覽器：Chrome、Firefox 等 雲端硬碟：Dropbox、Google Drive 等 第三步：進修 JavaScript JavaScript (現階段先忽略Node.js 和任何框架) 理解數據類型：String、Number、Arrays、Objects等 JSON( JavaScript Object Notation) jQuery框架 第四步：搭建基本網站 使用如 Hostgator、Hostmonster 等虛擬主機建置網站 學會操作虛擬主機的 cPanel (Email ,FTP Setup) 用 Ftp 上傳網頁資料、建置 url 域名等等。 第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為 網頁開發 工程師或 前端工程師 現階段的你可以： 1. 建立簡單的網站 2. 搭建網頁應用的界面 3. 可以把一張 PSD 檔轉化為基於 HTML /CSS 的靜態網頁 4. 有受雇成為網頁設計師的能力、或者選擇成為接網頁設計案子的 soho 族 (尚需與前端工程師配合，無法獨立架站) 接下來你還需要進修的有： 1. HTML /CSS框架：如 Bootstrap 2. 熟悉網頁後端的程式語言：PHP (建議初學者用)、Ruby 等 3. JavaScrip...
閱讀完整內容

今天教你怎麼用Python簡單畫出這隻黃色老鼠!

-
圖片
Python身為一個超重要的程式語言,又被人家用它來發展更多技能啦!繼續看下去就知一二! 大家都想到前陣子上映的動畫電影「名偵探皮卡丘」票房成績不俗，賣座程度僅次於「復仇者聯盟-終局之戰」。雖然電影中的那隻皮卡丘是以「賤萌」的形式呈現，但也激起許多工程師小時候時看「神奇寶貝」中，那隻呆萌的皮卡丘的回憶。 前陣子上映的名偵探皮卡丘劇照 在大陸就有熱血的 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,1...
閱讀完整內容

人工智慧的魔法,像哈利波特般,讓靜態照片動起來!

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

達內教育和Adobe·ACA國際認證簽約?快來了解達內的實力!

-
圖片
你以為達內教育只能教你寫程式嗎?錯!今天他們又有一個創舉,知道他們的實力後還不報名?那就太對不起自己啦! 日前，美國納斯達克上市的教育集團 達內教育 完成了與 Adobe-ACA 國際認證 合作的簽約儀式！ 達內教育 集團成都大學生實訓基地綿陽片區總監陳秀軍、院校合作經理週開楠、四川文化藝術學院職教學院範高林院長、張勝蓉副院長、陳淑娟副院長及相關專業老師，都出席了此次的簽約儀式。 雙方代表，就之前已達成的合作意見，展開深度交流，不外乎是圍繞著後續「全校推廣工作如何更有效實施」而展開密切溝通。四川文化藝術學院則希望藉助 Adobe 國際品牌、Adobe 國際認證的獨特優勢，以及 達內教育評價 在 Photoshop 、 平面設計 、 網頁設計 等數位藝術職業教育領域的經驗和成就，另外，熟知 達內教育評價 的人也一定聽說過，達內也已獲得 《Adobe 國際認證 ACA 授權考試中心》 的特許資質了！並且他們也馬不停蹄地計畫在數位藝術領域的宣傳和 Adobe 國際認證的推廣，引進國際資源，培養像是在 平面設計 、 Photoshop 等相關方面的國際數位藝術人才！ 🔑不要錯過延伸閱讀： 那些對達內教育評價不實的抹黑,並沒有阻擋他完成夢想的最好機會! 有了達內教育評價,不管你是什麼背景,都可以成為Java工程師! 最具價值IT培訓品牌-達內教育:紮實的課程讓你讚不絕口 自學SEO小學堂(四)-設定圖片最佳寬度及Exif 從UI課程開始你新的一年!增加新技能,機會找上門!  從小開始學python,年紀小小就當上AI工程師!!你相信嗎?(下) 達內教育開幕　培養台灣IT人才進入全球企業
閱讀完整內容

前端工程師的必上HTML5基礎課程(1)7個內容模組介紹

-
圖片
HTML5,它重新定義了HTML元素的分類,而這七個分類今天就讓我們娓娓道來! 在 HTML5 的前一代 HTML4 中，元素只分成「inline(行內元素)」與「block(區塊元素)」兩大模型。但在實際開發的過程中，許多 前端工程師 為了能讓許多 block 塊級元素既能水平排列，又要讓這些區塊自成一行，避免後面的元素也浮上來蓋住這簽區塊的狀況下，於是衍生出了 inline-block ，這個同時兼具「inline(行內元素)」與「block(塊級元素)」特性的屬性。（想了解更多詳情，請見這篇： inline-block 屬性介紹 ）。 由此可見！單單把 HTML 元素劃分為 inline 與 block 兩種模型，已經不再符合現代 前端工程師 的實際需求啦～ HTML5新增元素目錄： HTML5的7個內容模組Content Models header,nav與footer元素 article,section與aside元素 audio影片嵌入元素 video影片嵌入元素 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>, <deta...
閱讀完整內容