iT邦幫忙

amp相關文章
共有 36 則文章
鐵人賽 Modern Web DAY 7
AMP 系列 第 7

技術 AMP(Lession 7) - carousel 輪播圖片〈基礎篇〉

carousel輪播圖片〈基礎篇〉 這類的 component ,常見的部分會有: 多張圖片 左右點選前後張照片 點選縮圖或文字,跳至指定的第n張照片 說明文...

鐵人賽 Modern Web DAY 1
AMP 系列 第 1

技術 AMP(Lession 1) - 初步了解AMP

初步了解AMP 什麼是 AMP ? Accelerated Mobile Pages Google團隊為了讓手機頁面能快速被讀取,而採取的技術為網站另做個cac...

鐵人賽 Modern Web DAY 24
AMP 系列 第 24

技術 AMP(Lession 24) - AMP 中的 iframe

AMP 中的 iframe 使用 amp-iframe 之前,有個極為重要的觀念一定要知道! amp-iframe 絕對不能主要用在顯示廣告上(請使用 amp-...

鐵人賽 Modern Web DAY 2
AMP 系列 第 2

技術 AMP(Lession 2) - AMP網頁中的Schema

AMP網頁中的Schema 為何需要寫 schema 呢?當我們千辛萬苦寫了個頁面出來,自然是希望能讓廣大的user看到。所以請使用Schema.org來面對大...

鐵人賽 Modern Web DAY 20
AMP 系列 第 20

技術 AMP(Lession 20) - 在 AMP 頁面裡獲取數據 〈Page View 與 Event Tracking 篇〉

在 AMP 頁面裡獲取數據 〈Page View 與 Event Tracking 篇〉 釐清 Page View 與 Event Tracking Page...

鐵人賽 Modern Web DAY 23

技術 Day23 再次見面 Accelerated Mobile Pages (中)

生病了!不過還是要把比賽還是要繼續阿!!AMP主要由三個部分主成分別是AMP HTML、AMP JS、AMP Cache,大家可以把他想像成,他是一種的前端框...

鐵人賽 Modern Web DAY 3
AMP 系列 第 3

技術 AMP(Lession 3) - 使用AMP做RWD

使用AMP做RWD RWD 在現如今的網站,可以說是必備設定了。這兒要注意一點:平日裡我們是用 css 在做 RWD 的設定,但在 AMP 的世界裡,並不是這樣...

鐵人賽 Modern Web DAY 9
AMP 系列 第 9

技術 AMP(Lession 9) - AMP中使用Lightbox

AMP中使用Lightbox 在上一篇文章我們有點到 lightbox ,現在我們就來講講 lightbox 吧! 在 AMP 中有2個套件具有 lightbo...

鐵人賽 Modern Web DAY 27
AMP 系列 第 27

技術 AMP(Lession 27) - sidebar 的設定

sidebar 的設定 在手機網站上,常常會有把頁面選項放在 sidebar 中的狀況;就像下圖這樣: 按了某個按鈕,才會出現 Required Script...

鐵人賽 Modern Web DAY 24

技術 Day24 再次見面 Accelerated Mobile Pages (下)

其實說要做AMP可以說上一個禮拜,不過我想還是想把重點放在這一次的行動版的issue上面,謝謝Summer給我了一些寫AMP的參考方向,原本預計寫兩篇,後來想...

鐵人賽 Modern Web DAY 8
AMP 系列 第 8

技術 AMP(Lession 8) - carousel輪播圖片〈進階篇〉

carousel輪播圖片〈進階篇〉 為 amp-carousel 設定 id 後跳轉圖片 透過 <amp-carousel> 給定 id 值;例:...

鐵人賽 Modern Web DAY 14
AMP 系列 第 14

技術 AMP(Lession 14) - Facebook 的粉絲專頁外掛程式

Facebook 的粉絲專頁外掛程式 方便您在自己的網站上內嵌和推廣任何公開的 Facebook 粉絲專頁。user 不用離開網站,便可對粉絲專頁按讚和分享。...

鐵人賽 Modern Web DAY 5
AMP 系列 第 5

技術 AMP(Lession 5) - 依區塊而改變文字大小 amp-fit-text

依區塊而改變文字大小的 amp-fix-text 支援的 layout 值 可使用在具有 display: block 與 display: inlline-b...

鐵人賽 Modern Web DAY 29
AMP 系列 第 29

技術 AMP(Lession 29) - 視覺效果的集合

視覺效果的集合 amp-fx-collection 能幫我實現,所有的願望(誇張了) 今天要講的 amp-fx-collection 可以幫我們在 AMP 的世...

鐵人賽 Modern Web DAY 15
AMP 系列 第 15

技術 AMP(Lession 15) - Facebook Like

Facebook Like 基本 code <amp-facebook-like width=90 height=20 layout="...

鐵人賽 Modern Web DAY 25
AMP 系列 第 25

技術 AMP(Lession 25) - 用 position observer 實現 scrolling 頁面時的一些互動效果

用 position observer 實現 scrolling 頁面時的一些互動效果 在 amp 的世界裡,我們可以可以利用 scrolling 時做些事唷!...

鐵人賽 Modern Web DAY 22

技術 Day22 初次見面 Accelerated Mobile Pages (上)

其實到了現在,還不知道自己在寫什麼,常常想寫一些軟工的東西,可是又想到主題是「Go!從無到打造最佳行動網站」,每天寫的東西盡量都跟這個主題扯上一點關係,這樣才...

鐵人賽 Modern Web DAY 12

技術 AMP, 決定 SEO 的 25 項標準與通訊協定系列 XII

AMP Project: https://www.ampproject.org/ 這在某種角度又是一個很 Hacking 的通訊協定, 甚至有時連 "...

鐵人賽 Modern Web DAY 13
AMP 系列 第 13

技術 AMP(Lession 13) - Facebook 的 發文、影片、留言〈資料 href 篇〉

Facebook 的 發文、影片、留言〈資料 href 篇〉 在提到了如何使用 amp-facebook 之後,我們來學學如何找到 data-href 這個的...

鐵人賽 Modern Web DAY 12
AMP 系列 第 12

技術 AMP(Lession 12) - Facebook 的 發文、影片、留言〈基礎篇〉

Facebook 的 貼文、影片、留言〈基礎篇〉 不知不覺間, Facebook 成為了不少大眾的入口社群網站,隨之而來,也有不少的網站內容用到 Faceboo...

鐵人賽 Modern Web DAY 26
AMP 系列 第 26

技術 AMP(Lession 26) - Google VR 圖片

Google VR 圖片 接下來在 AMP 的世界裡玩玩 VR image 吧!這是個 AMP 試驗中的功能,我們先來看看這兒的範例吧! 基本範例 <a...

鐵人賽 Modern Web DAY 19
AMP 系列 第 19

技術 AMP(Lession 19) - 在 AMP 頁面裡獲取數據 〈基本觀念篇〉

在 AMP 頁面裡獲取數據 〈基本觀念篇〉 如果你想要觀察 user 在網頁的一些數據,你要怎麼做呢?在 AMP 的世界裡,我們可以使用 amp-pixel 與...

鐵人賽 Modern Web DAY 16
AMP 系列 第 16

技術 AMP(Lession 16) - Facebook Comment 嵌入留言

Facebook Comment 嵌入留言 基本語法 <amp-facebook-comments width=486 height=657 l...

鐵人賽 Modern Web DAY 23
AMP 系列 第 23

技術 AMP(Lession 23) - 播放Youtube影片

播放Youtube影片 Youtube 當機 網友:世界末日! Youtube太重要了,現在我們來看看在 AMP 的世界裡, Youtube 又該如何引用吧!...

鐵人賽 Modern Web DAY 21
AMP 系列 第 21

技術 AMP(Lession 21) - 在 AMP 頁面裡獲取數據 〈Access Trigger 篇〉

在 AMP 頁面裡獲取數據 〈Access Trigger 篇〉 設定範例 上一篇的文章裡,我們有提到 amp-analytics 中的 Access Trig...

鐵人賽 Modern Web DAY 18
AMP 系列 第 18

技術 AMP(Lession 18) - AMP 中的 Twitter

AMP 中的 Twitter 基本範例 <amp-twitter width="375" height="472&qu...

鐵人賽 Modern Web DAY 10
AMP 系列 第 10

技術 AMP(Lession 10) - 收合區域

收合區域 - amp-accordion 如下圖所示: 如手風琴(accordion)一般,開合以顯示內容 Required Script <script...

鐵人賽 Modern Web DAY 11
AMP 系列 第 11

技術 AMP(Lession 11) - 時間轉換 timeago

時間轉換 timeago 不知道 timeago 的請去這兒瞭解一下, amp-timeago 就是以這個套件為基礎的 基本範例 <amp-timeago...

鐵人賽 Modern Web DAY 28
AMP 系列 第 28

技術 AMP(Lession 28) - 視覺上呈現出飛毯效果

視覺上呈現出飛毯效果 文字上難以說明,我們直接來看這兒的範例吧!! 從這個範例,我們可以看到使用 amp-fx-flying-carpet 這個 compone...

鐵人賽 Modern Web DAY 22
AMP 系列 第 22

技術 AMP(Lession 22) - 影片播放

影片播放 說著說著,我們來看看影片在 amp 的世界裡是如何被使用的吧 Required Script <script async custom-elem...