<-- IE錯誤修正 --> Embed Responsively 讓 YouTube、Google Maps 嵌入代碼支援自適應設計 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2018-03-01
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 Embed Responsively 讓 YouTube、Google Maps 嵌入代碼支援自適應設計

Click the image to open in full size.(Copyright: twindesign / 123RF Stock Photo)當前網頁設計趨勢是使用「自適應網頁設計」(Responsive web design,RWD)技術,讓網頁可隨著不同螢幕大小自動調整排版,而現階段行動裝置相當普及,為了讓每個裝置都能正常瀏覽網頁,自適應網頁設計幾乎已成必備,或是針對行動裝置開發「手機版」網頁,不過兩者都有各自的優缺點,還是得評估網站型態才能選擇。



若你的網站已經支援自適應網頁設計,那麼會很希望每個嵌入頁面的元件都可隨著裝置大小來自動調整顯示範圍,但當前不是所有的網路服務都支援 RWD,暫時的解決方案是透過網路服務來將原有程式碼轉換為支援自適應網頁設計的程式碼。

本文要介紹的「Embed Responsively」是一款免費、開放原始碼線上工具,可以將幾個常用服務包括 YouTube、Vimeo、Dailymotion、Google Maps、Getty Images 或一般 iFrame 語法轉為具有自適應網頁設計的代碼,貼到頁面後就能隨著裝置自動調整大小,非常實用!

不過當前已經有一些網路服務的內嵌語法支援自適應功能,例如 Scribd、SoundCloud、Storify 和 Twitter,在其他服務陸續支援此功能前,可透過 Embed Responsively 來轉換原始碼。

網站名稱:Embed Responsively
網站鏈結:http://embedresponsively.com/

使用教學

STEP 1

Embed Responsively 使用方式很簡單,開啟網頁、選擇要轉換的線上服務,然後依照指示把網址或程式語法貼上就能轉換。

Click the image to open in full size.

舉例來說,YouTube 是直接貼上影片頁面網址,貼上後按下「Embed」就會在最下方顯示支援自適應網頁設計的嵌入程式碼,全選複製然後貼到自己的網站就能看到效果。

Click the image to open in full size.

STEP 2

Google Maps 將地圖嵌入網站的功能目前也還沒有支援自適應網頁設計 RWD,不過一樣可以透過 Embed Responsively 來產生新的程式碼,設定方式跟 YouTube 有些不太一樣,必須先從嵌入地圖功能來獲取 iFrame 內嵌程式碼。

Click the image to open in full size.

回到 Embed Responsively 將程式碼貼上,就能轉換成具有自適應設計的 Google Maps。

Click the image to open in full size.

STEP 3

直接將 Embed Responsively 轉換出來的程式碼貼到網站、部落格,如果平台支援 iFrame 程式碼就能看到效果,不一樣的是因為支援自適應網頁設計技術,當你將視窗放大、縮小時嵌入的資源就會自動調整到最佳顯示效果。

Click the image to open in full size.

值得一試的三個理由:
  1. 讓一些常用的網路服務內嵌代碼支援自適應網頁設計 RWD
  2. 包括 YouTube、Google Maps、Vimeo 等服務都能轉換
  3. 開放程式碼,線上就能轉換代碼無需下載軟體
喜歡 Embed Responsively 讓 YouTube、Google Maps 嵌入代碼支援自適應設計 嗎?歡迎將免費資源網路社群加入書籤,以 FacebookTwitterGoogle+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
[iOS] Google Maps 來了!在 iPhone、iPad 上享受更快、更準確的 Google 地圖! wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2012-12-13 01:05 PM
Google Maps for iOS 應用程式可能在今天上架 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2012-12-13 11:16 AM
Google Maps 推出台灣「即時路況圖」,預先避開塞車路段 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-05-03 11:42 AM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 09:01 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2018,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2