發表文章

目前顯示的是有「HTML5教學」標籤的文章

前端工程師.後端工程師-超級比一比

圖片
​ ​ ​ 前端工程師和後端工程師各自的奧妙,不用到處搜尋探索,這篇文章都整理給你啦! 每一個網頁的構成,包含你看得到的部分以及你看不到的部分。看得到的部分包含文字、圖片等網頁呈現的形式;而看不到的部分為後台的數據、大量的資料庫等維持網站運作的部分。簡單來說,前端工程師就是負責你看得到的部分、後端工程師則處理使用所看不到的部分。 以下是達內教育 前端工程師課程 整理出,關於前端工程師與後端工程師必備能力和技能: 前端工程師的工作內容與必備能力 簡單來說, 前端工程師 所負責的工作內容,就是調整使用者在網頁上所有「看得見的部分」,包含網頁的整體排版、圖樣、動畫呈現、字體樣式、圖文排列方式等等。而網頁的呈現方式對於一家公司行號來說,就等同於該公司的門面。所以前端工程師需常與設計師合作,需具備一定的美感。 除了網頁的美觀之外,也需兼顧網頁的動線與規劃,讓網頁無論是在桌上型電腦閱覽、或是在手機等行動裝置瀏覽,都能讓使用者能有良好的用戶體驗。所以 前端工程師課程 也提到: 前端工程師 需有「能體會使用者所體驗的」的同理心,並也有機會與 UI(使用者介面)/UX (使用者體驗)設計師合作。而隨著 Chrome 等網頁瀏覽器的技術推陳出新,前端工程師所需的技術水平也會跟著提高。 前端工程師所需基本技能: 熟悉 HTML/CSS 與 Javascript,呈現網頁的樣式與功能 熟悉 CSS 框架,如 Bootstrap 等 能活用時下熱門的 Javascript 框架,如 Angular.js、React.js、Vue.js 擁有 RWD (響應式網頁設計) 的能力,讓網站無論是在桌機上、平板上或是手機上都能完善呈現。 知道如何串接後端的 API 使用版本控制工具如 Git 的能力 熟悉各大主流的網頁瀏覽器(如 Chrome)的開發者工具 後端工程師的工作內容與必備能力 要讓一個網站能正常運作,需要後端工程師進行網站內容的數據管理與資料儲存等工作。以一個電商網站來說,這些數據、資料包含使用者的帳戶資訊、購物記錄、點閱紀錄、觸擊率等等。後端工程師負責伺服器的運作、資料庫及演算法,讓網站能以能最快的速度找到使用者所需的資料。因此後端工程師需要有良好的邏輯以及設計、操作資料庫的能力。 後端工程師所需基本技能:...

一點也不難!SEO優化語意標記一點就通(4)RDFa

圖片
​ ​ ​ 終於過了SEO優化的語意標記這一關!原來也沒想像中的難嘛!謝謝達內整理的各種重點啦! 什麼是RDFa? HTML5教學 的 RDFa  SEO優化 方法 (Resource Description Framework in Attributes,屬性資源描述架構) 也是用來描述結構化資料的方式。 其 SEO優化 所使用的語法跟 微數據 很像,用 vocab 來指定 Schema.org;typeof 指定類型;property 指定屬性。 RDFa的例子與語法 RDFa 表示法的樣子如下: <div vocab="http://schema.org" typeof="Person"> <span property="givenName">John<span> <span property="familyName">Smith<span> <span property="gender">male<span> 上例 HTML5教學 的內容是用來表示:名字為「John」、姓氏為 「Smith」、性別為 「男」 其實跟下面的 微數據 意思是一樣的: <div itemscope itemtype="https://schema.org/Person"> <h1 itemprop="givenName">John<h1> <h1 itemprop="familyName">Smith<h1> <span itemprop="gender">male<h1> </div> 相關連結: 一點也不難!SEO優化語意標記一點就通(1)Schema 一點也不難!SEO優化語意標記一點就通(2)Microdata 一點也不難!SEO優化語意標記一點就通(3)JSON-LD 想要讓自己的網站讓人耳目一新?絕不能錯過HTML5教學! ...

一點也不難!SEO優化語意標記一點就通(3)JSON-LD

圖片
​ ​ ​ 我的SEO優化之路一點也不難走!今天又學到了一個跟微數據很像的語意標記,分享給大家! 什麼是JSON-LD? HTML5教學  中的  SEO優化  JSON (JavaScript Object Notation) 原本適用在 Javascript 語言內的一種物件表示法 JSON-LD (JavaScript Object Notation-Linked Data)顧名思義,就是把資料套用 JSON 的格式放在網頁上, 讓搜尋引擎了解網頁內容的語意格式。 JSON-LD的例子與語法 JSON 表示法的樣子如下: { "firstName": "John", "lastName": "Smith", "sex": "male", } 上例用來表示:名字為「John」、姓氏為 「Smith」、性別為 「男」 以上HTML5教學語法若搭配上各種 keyword (如下例的 "@context" 與 "@type" ) 與 term (如下例的 "givenName"、"gender" 與 "familyName"等屬性 ) 之後, 就形成 SEO優化 功能跟 微數據 一樣的語意標記了。 <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Person", "givenName": "John", "familyName": "Smith", "gender": "male", }</script> 其實跟下面的 微數據 意思是一樣的: <div itemscope itemtype="https://s...

在SEO優化的世界裡,HTML語意標記原來這麼重要!

圖片
​ ​ ​ ​​ ​ 還在懷疑自己能否把SEO優化做好?別再繼續折磨自己,今天一招讓你擺脫自我懷疑的窘境! HTML 5 的語意標記,對 前端工程師 /前端設計師來說,是不知不可的網頁設計基礎,決定了網頁配置的邏輯;對於 SEO優化 師來說,雖然 HTML 5 的作用不是讓網頁可以被搜尋引擎自動擷取資料,但是卻可以讓搜尋引擎理解網頁每個部份 (Section,在此有人翻成區塊) 的排列邏輯、以及每個部份的作用等等,例如透過<header>告知搜尋引擎哪裡是頁頭、<nav> 告知搜尋引擎哪裡會列出導覽內容等等,還可以用來搭配 Schema 語意標記,協助搜尋引擎正確完成索引。 常見的 HTML 語意標記如下表所示: 標籤名稱 說明 <section> 區塊 <section>主要是告知搜尋引擎「這是一個段落」,包覆的對象不以文章為限。 裡面含標題<h1>-<h6>與內容<p>, 主要用途是告知搜尋引擎一個區塊的主要內容 (內容就是這個<section>的標題) <article> 文章區塊 <article>跟<section>性質相近,都有含標題<h1>-<h6>與內容。 但是相較於<section>,更強調所包覆的對象是「文章」 <header> 表頭 以前用<div>架構會像這樣寫<div class="header">、<div class="footer">, HTML5 則可以分別使用<header>與<footer>標籤來取代。在任何區塊下的架構, 如果需要詳細區分表頭表尾時,就可使用<header>以及<footer>來架構,用於<body>標籤下是最普遍的, 因為<body>的架構較大,需要清楚區分表頭與表尾。 <footer> 表尾 <aside> 側邊欄位 邏輯上跟...

一點也不難!SEO優化語意標記一點就通(2)Microdata

圖片
​ ​ ​做SEO優化時,你知道如何讓你要優化的內容更"精準化"嗎?今天就告訴你怎麼做,先來了解這個語意標記吧! Microdata (微數據) 的格式 什麼是微數據? SEO優化 另一個方式,也是網頁內部  SEO優化 不可或缺的步驟。 HTML5教學 指的網頁中的 「HTML 標籤」告訴瀏覽器如 Google Chrome 如何顯示標籤中的信息。 如網頁中的 「<h1>Java</h1>」告訴瀏覽器,關鍵字 「Java」 必須以 「標題1」 的格式顯示 但是這個 「Java」可能意味者:一種程式語言、一種咖啡、一種島嶼等類別。 而 「HTML 標籤」 不會告訴搜尋引擎這個 「Java」 是意味著上述哪一種意思。 這時候, HTML5教學 就必須在原本的 HTML 碼當中添加「Microdata (微數據)」 , 來宣告其類別, 就可以幫助搜尋引擎更精準識別網頁內容的具體意義。 在這個「Java」的例子中,微數據的角色就很像告訴搜尋引擎: 「嘿,這個網頁的 Java 是關於咖啡的內容喔!」或是「這個網頁的 Java 是指程式語言喔!」 微數據的例子 倘若今天,你有一個介紹即將上映的電影「艾莉塔:戰鬥天使」 的網站,其中包含了類型、導演以及一個通向預告片頁面的鏈接,您的 HTML 代碼可能看起來像這樣: <div><h1>艾莉塔:戰鬥天使</h1> <span>導演:詹姆士·卡麥隆 (生於1954年8月16日)</span> <span>類型:賽博叛客動作片</span> <a href="..//movies/Alita-Battle-Angel-trailer.html">電影預告片</a> </div> 這個 HTML 代碼若加了Microdata 微數據來宣告其資料類型,就可以讓搜尋引擎更容易辨識其類型。 <div itemscope itemtype="https://schema.org/Movie"> <!--宣告要使用 schema.org 的 movie(電影)類...

一點也不難!SEO優化語意標記一點就通(1)Schema

圖片
​ ​ ​ SEO優化關關難過.關關過!今天教把這個小百科交給你,任何關卡都難不倒你! Schema 語意標記小百科 為何 SEO優化 要用 Schema? 「 SEO優化 其中一個方式就是」讓你的網頁被 Schema 語意標記,是網頁內部 SEO優化不可或缺的步驟。 「雖然 HTML5教學 有提到可以使用語意標記來讓搜尋引擎理解網頁的邏輯,但是」唯有網頁的內容經過 Schema 語意標記之後,網頁內的資料才能真正的結構化, 讓搜尋引擎更了解網頁內被標記的資訊所代表的意義,進而讓網頁的資料大大被搜尋引擎應用:如搜尋結果、知識卡等,進而影響搜尋結果與排名排名與點閱率。 支援的搜尋引擎 Google、Bing、Yahoo 以及 Yandex (俄羅斯最大的搜尋引擎,也是全球第四大) 都支援  HTML5教學  Schema 語意標記進行網頁資料結構化。 編碼方式 因為在出現 Schema 語意標記之前, 早已存在各領域的語意標記方法, 主要有三種:   1. Microdata (微數據)   2. JSON-LD (JavaScript 串聯資料物件表示法)   3. RDFa (屬性資源描述架構) 以上編碼都是用來宣告「可讓機器自己讀取資料」, 也藉是透過這些表示法,電腦可以擷取已經定義好的資料。 因為以上語法都適用在各種不同的狀況,所以 Schema 的出現並不是推翻統一它們既有的語法。 而是只做統一定義詞彙如 author (作者)、product (產品) 等,再加上以上三種編碼搭配使用, 就能把網頁內容已結構化的風勢呈現給搜尋引擎。 相關連結: HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道 HTML5教學的三個基本款(2):原來這東西這麼關鍵!? HTML5教學的三個基本款(3):標籤正在進步中,你呢?? Python課程教你引導AI編寫經典小說 想到海外工作嗎?選擇達內教育讓你與國際接軌! AI人工智慧進駐大賣場!! 有了這項新技術就能讓員工更專注在客服務上了!!  達內教育開幕 培養台灣IT人才進入全球企業

小心!看影片還在用共享帳號嗎?Python課程來抓人囉!

圖片
今天上Python課程才知道原來我平常看的Netflex也開始用AI了,他們在抓什麼?一起來看看! A I 將可追蹤非法用戶,與他人共享 Netflix 帳號小心被抓! 你會分享你的 Netflix 帳密給親友追劇嗎?或是你現在正在使用的 Netflix 帳密是別人分享給你使用的?小心被 AI 抓包! 日前在美國拉斯維加斯舉辦的 2019 年消費電子展(Consumer electronics show,CES)上,來自英國的視訊軟體供應商 Synamedia 公布了一款全新的  AI 人工智慧 系統,用來防止付費視訊平台的使用者共享帳密的行為。 根據 Magid 最新的調查顯示,有 26% 的 Y 世代 (Millennials,泛指 1980年~2000 年出生的人) 會將自己在影音串流服務平台上的身分憑據資料,分享給他人。又根據美國消費電子產品權威市場分析機構 Parks Associates 的研究發現,直至 2021 年,共享帳密的行為會讓付費電視的收入損失達 9.9 億美元 (約 306 億台幣),而像 Netflix、Amazon Prime Video 等 OTT 影音串流平台則會損失 1.2 億美元 (約 37.021 億台幣)。 而這套 Synamedia 出品的新 AI 軟體 - Synamedia Credentials Sharing Insight 會分析目前有哪接使用者登入,並標註出那些帳號被分享使用。無論是小額的付費使用者、或是大規模的營利商,都追蹤的到。 Synamedia Credentials Sharing Insight 透過行為分析以及機器學習的模式,追蹤線上串流服務的帳密共享行為。除了制止非法的帳密共享行為之外,這套 AI 人工智慧 系統可讓影音串流平台的營運者,指定一個帳號可以分享給幾個人使用。像是有一些帳號就可供特定的人數共享,像是家庭帳號,自宅內的人皆可分享使用。 這套 Python課程 的AI 系統還可監視用戶數據資料庫,找出是否有潛在的的詐欺行為、或是準確辨識出使用者在哪裡 (家中、度假小屋等) 使用這個帳密、如何使用等等。 假如 AI 偵測到該用戶與不再住在家中的成年子女共享帳密的話,會被推薦成購買可讓更多人、更多裝置共享的多人方案。 ...

HTML5教學的CSS基礎請打好!-區塊邊框一次掌握

圖片
上次的HTML5教學內容讓你掌握了文字,現在再給你一個bonus,教你邊框和區塊,現在想要怎麼排版都可以啦! 1. 跟外框相關的CSS設定 (常用) 屬性名稱 說明 設定範例 border-style 設定邊框的線條樣式,可設定為實線、虛線、點點等。 border-style: dotted; border-style: dashed; border-style: double; border-style: solid; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; border-width 設定邊框的線條粗細 small、large、pt、px、cm、% border-width:6px; border-color 設定邊框的顏色 也可以直接使用"bold"指定之 border-color:blue; border-top border-left border-bottom border-right 針對邊框的上方線條做單獨調整 針對邊框的左方線條做單獨調整 針對邊框的下方線條做單獨調整 針對邊框的右方線條做單獨調整 border-top:2px dotted blue; (設定值依序為粗細、線條樣式、顏色) 2. 區塊"<span>"與"<div>"的屬性設定 其實除了文字之外, 前端工程師 在 HTML5教學 網頁的各個元素進行 CSS 格式設定時,有一個 「盒子模型 (box model) 」 的概念:就是所有要被設定的元素,都會被視為一個盒子"<span>"或"<div>"。 而些盒子的內容都是被框 (border) 包著的,內容與框中間又有所謂的留白 (padding)。而這個框 (border )的粗細是可以調整的。 屬性名稱 說明 設定範例 width 區塊寬度 width: 600p...

HTML5教學的CSS基礎請打好!-字型排序一次滿足

圖片
​ ​ ​ 剛碰HTML5教學的同學有福了!今天幫你打好基礎,教你文字排序到底怎麼做到好,你想對文字做什麼事都可以! 1. 跟字型相關的CSS設定 (常用) 屬性名稱 說明 設定範例 font-family 指定使用的字體,可以設定多個,讓瀏覽器依照排序使用 font-family: 微軟正黑體,"Arial"; font-size 指定字體大小,有多種單位可以使用: small、large、pt、px、cm、% font-size:16pt font-size:large font-weight 指定字型厚度,數值越大字型越粗 也可以直接使用"bold"指定之 font-weight:100;font-weight:bold; font-style 指定字型樣式,大多用來設定斜體 font-style:italic; 2. 跟文字排列 (行距、排序) 有關的設定 屬性名稱 說明 設定範例 letter-spacing 指定字與字之間的間距 letter-spacing: 4pt; line-height 設定行高 line-height:200% line-height:16px text-align 指定字型對齊方式 包含 left(向左)、center(置中)、right(向右)、justify(左右對齊) text-align:justify; text-decoration 修飾文字 包含 underline(底線)、overline(上線)、line-through(刪除線)、blink(讓文字閃爍)、 text-decoration:line-through; text-decoration 修飾文字 包含 underline(底線)、overline(上線)、line-through(刪除線)、blink(讓文字閃爍)、 text-decoration:line-through; text-indent 段落的第一行要留多少縮排 text-ident:20px t...