iframe於響應式網頁設計(RWD)


Sample Image

嵌入Google地圖iframe碼

這次辦活動的頁面插入了Google Map所提供的嵌入碼,它是一個iframe的碼例如這是台灣總統府的Google地圖:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.8299385809332!2d121.50972681535653!3d25.039844744210242!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a90a870e5af1%3A0x180e1a442209d1c1!2zMTAw5Y-w5YyX5biC5Lit5q2j5Y2A6YeN5oW25Y2X6Lev5LiA5q61MTIy6Jmf57i957Wx5bqc!5e0!3m2!1szh-TW!2stw!4v1454501084561" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

這個代碼插入到網頁後,用手機看會寬度跑掉。因為上次插入Youtube影片也有同樣的情況,找到的這次的解法也是類似,網路上就查得到如何解決這個問題。

這個解決方案大約是在2009年就有人提出了,算是一種利用CSS修正不同瀏覽器顯示與ifram嵌入的技巧,當時並還沒有響應式網頁設計的風潮。最初的提出解決的方式,是這篇文章:Creating Intrinsic Ratios for Video,"Intrinsic Ratios"中譯是"內在比例"的意思。

閱讀全文

MVC簡介


簡介

MVC是一種程式設計的模式,MVC是Model-View-Controller的簡寫,中譯是「模型-視圖-控制器」。這三種代表不同的角色與工作:

  • Model(模型):負責處理"資料(Data)"。不論是儲存資料、修改與接收資料。這些資料的通常放在資料庫中。一個良好的Model物件需要封裝應用程式的所需要的資料,和基本的行為,讓它們具備易用與重用性,而且與使用者操作介面或展現層(View物件)之間沒有明確的連繫。

  • View(視圖):負責處理"顯示(Display)"。即所謂的應用程式的呈現層(presentation),將應用程式的資訊依照需求,經過格式化後呈現給使用者。

  • Controller(控制器):負責處理"任務(Task)"。Controller扮演了Model和View的中介者,它可以連繫這兩者。Controller專責接收了來自客戶端的請求,呼叫對應的Model物件,然後把資料送給對應要呈現的View。

閱讀全文

EpicEditor for Joomla中文說明


簡介

"EpicEditor for Joomla" 讓一個很讚的Markdown文字編輯器可以在Joomla CMS中使用。 EpicEditor是一個可嵌入的JavaScript Markdown編輯器,有「分離式的全螢幕編輯畫面」、「立即預覽」、「自動草稿儲存」、「離線支援」以及其他更多功能。不過它並"不"是一個所視即所得編輯器(WYSIWYG)。

下載

閱讀全文