目前分類:HTML5教學 (103)

瀏覽方式: 標題列表 簡短摘要

想中途出家成為前端工程師, 自學能達成嗎?

想中途出家成為前端工程師, 自學能達成嗎?

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

前端工程師省時神器, 縮短你爆肝的時間! 本篇為教學文第四篇-快速設定顯示文字與自訂屬性值

前端工程師省時神器, 縮短你爆肝的時間! 本篇為教學文第四篇-快速設定顯示文字與自訂屬性值

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

前端工程師開講,教你怎麼設定流水編號也告訴你什麼是複製元素!!

前端工程師開講,教你怎麼設定流水編號也告訴你什麼是複製元素!!

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

前端工程師省時神器, 縮短你爆肝的時間! 本篇為教學文第二篇-父子階層與群組

前端工程師省時神器, 縮短你爆肝的時間! 本篇為教學文第二篇-父子階層與群組

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

前端工程師要告訴你其實語法裡面彼此也存在著密不可分的關係!!讓我們來看看到底能多複雜?

前端工程師要告訴你其實語法裡面彼此也存在著密不可分的關係!!讓我們來看看到底能多複雜?

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

前端工程師省時神器, 縮短你爆肝的時間! 本篇為教學文第一篇-快速產生標籤名稱 

前端工程師省時神器, 縮短你爆肝的時間! 本篇為教學文第一篇-快速產生標籤名稱 

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

資深前端工程師怎麼利用HTML5繪製路徑動畫呢?趕緊來看看!!

資深前端工程師怎麼利用HTML5繪製路徑動畫呢?趕緊來看看!!

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

HTML5今天要來教我們怎麼繪製基本的圖形動畫!! 不可以不知道的小法寶!!

HTML5今天要來教我們怎麼繪製基本的圖形動畫!! 不可以不知道的小法寶!!

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

踏入前端工程師領域必備的 HTML5 課(12)-路徑動畫

踏入前端工程師領域必備的 HTML5 課(12)-路徑動畫

 

SVG 路徑動畫

前端工程師可以使用HTML5的 <path> 元素來定義路徑,以下 HTML5 的 SVG 範例讓前端工程師們參考。
文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

踏入前端工程師領域必備的 HTML5 課(11)-基本圖形動畫

踏入前端工程師領域必備的 HTML5 課(11)-基本圖形動畫

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

如何利用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.
文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

踏入前端工程師領域必備的 HTML5 課 番外篇-用SVG向量圖取代點陣圖

踏入前端工程師領域必備的 HTML5 課 番外篇-用SVG向量圖取代點陣圖

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

踏入前端工程師領域必備的九堂 HTML5 課(九-下)-Drag and Drop API(下)

踏入前端工程師領域必備的九堂 HTML5 課(九-下)-Drag and Drop API(下)

 

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

HTML5怎麼實現及實行能拖曳的元素呢?讓有經驗的資深工程師來告訴你!!

HTML5怎麼實現及實行能拖曳的元素呢?讓有經驗的資深工程師來告訴你!!HTML5怎麼實現及實行能拖曳的元素呢?讓有經驗的資深工程師來告訴你!!

HTML5 Drag & Drop API-讓元素變得可拖曳

過去在網頁裡面實現 Drag & Drop 是很麻煩的,需要配合 CSS、onmousedown、onmouseup、setInterval() 等,才能做出元件拖曳的視覺效果。現在 HTML5 有直接的 Drag & Drop 機制,讓前端工程師可直接使用 drag and drop 的功能,讓使用者透過拖曳的方式,把要上傳的檔案拉到瀏覽器當中。 所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳,只要在該元素的原始碼中加入 draggable 屬性,如下例 (讓圖片變得可以拖曳):
<img draggable="true" />

HTML5 Drag & Drop API 的範例

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

踏入前端工程師領域必備的九堂 HTML5 課(九-上)-Drag and Drop API簡介(上)
踏入前端工程師領域必備的九堂 HTML5 課(九-上)-Drag and Drop API簡介(上)

 

 

HTML5 Drag & Drop API-讓元素變得可拖曳

以前在網頁裡面實現 Drag & Drop 是很麻煩的,需要配合 CSS、onmousedown、onmouseup、setInterval() 等,才能做出元件拖曳的視覺效果。現在 HTML5 有直接的 Drag & Drop 機制,讓前端工程師可直接使用 drag and drop 的功能,讓使用者透過拖曳的方式,把要上傳的檔案拉到瀏覽器當中。

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

這裡透過HTML5教你怎麼操作來源和目標做操作?一些步驟讓你啞口無言!!

這裡透過HTML5教你怎麼操作來源和目標做操作?一些步驟讓你啞口無言!!

數據傳輸DataTransfer

拖曳動作的目的,是為了對來源和目標元素做操作。為了完成整個操作,就需要在來源元素和目標元素間傳輸數據。在 HTML5 中,我們透過 Javascript 的 DataTransfer 完成數據傳輸。 我們在上例的 dragstart 時,就設置需要傳輸的數據,在 drop 中獲取需要的數據。 event.dataTransfer 提供了兩個主要函數:
  • setData(format, data):用於添加數據,一般 format 對應於 MIME 類型字符串,常見的有 text/plain、text/html 及 text/uri-list 等,但同時也可以是任意自定義的類型;很不幸的是 data 只能是 string 或 file。
  • getData(format):用於獲取數據。
現在,我們的目標是要將 「Drag Me」元素放到其它藍色的目標元素中,如此就需要傳輸它的 ID ,通過下面的 Javascript 語法來實現:
draggable.addEventListener('dragstart',(ev)=> { 
  ev.target.style.opacity = “。5” ;

  //設置ID
   ev.dataTransfer.setData('text / plain',ev.target.id); 
});

dropzones.forEach((dropzone)=> { 
  dropzone.addEventListener('drop',(ev)=> { 
    ev.preventDefault()
    ev.target.style.borderStyle = 'solid' ;

    //獲取ID const sourceId = ev.dataTransfer.getData('text / plain')    
    ev.target.appendChild(document .getElementById(sourceId))  })});
  • 在 dragstart 時,透過 setData 將 ID 放入 DataTransfer 中
  • 在drop事件中,透過 getData 獲取元素 ID ,並透過 appendChild 加入到藍色的目標元素中。
結果如下:
See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.
文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

HTML5裡Web Storage 的優點有什麼?憑什麼取代了cookies呢?

HTML5裡Web Storage 的優點有什麼?憑什麼取代了cookies呢?

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

踏入前端工程師領域必備的九堂 HTML5 課(八)-Geolocation API(地理位置定位)簡介
踏入前端工程師領域必備的九堂 HTML5 課(八)-Geolocation API(地理位置定位)簡介

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

踏入前端工程師領域必備的九堂 HTML5 課(七)-Web Storage 瀏覽器儲存簡介
踏入前端工程師領域必備的九堂 HTML5 課(七)-Web Storage 瀏覽器儲存簡介

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()

HTML5像跟蹤狂一樣?透過地理定位準確掌握使用者的位置?

HTML5像跟蹤狂一樣?透過地理定位準確掌握使用者的位置?

文章標籤

uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()