網頁設計的專業首選

 本站先前介紹過，什麼是AMP網頁?主要是由 Google 貼近行動裝置(手機或平板)瀏覽時，所特別釋出的專案，透過規定的網頁格式與對應的內容，可以另外收錄對應的快取伺服器，達到比傳統搜尋快數倍，流量卻能節省，同時也會優先出現於推薦區塊的優化技術。   一般網站要如何加入這項優化方案呢?可以根據 Google 所釋出的 AMP HTML 對應格式來進行修改設定，當中幾項例子，如HTML標籤可以在AMP HTML中保持不變。但某些標籤具有相同的自定義標籤，其他標籤完全禁止使用，如：   IMG 替換為 amp-img 視頻 替換為 amp-video 音頻 替換為 amp-audio IFRAME 替換為 amp-iframe PARAM 禁止 嵌入 禁止 等....   網頁製作人員透過使用AMP格式，將內容調整後，可以使AMP文件中的內容被抓取收錄（受robots.txt限制），便能另外收錄在Google對應的快取伺服器中。   在設定後若未能完全確認格式是否正確的情況下，Google也貼心的提供了對用 AMP HTML的檢測器：AMP測試 另外提醒，在 Google AMP 剛推廣的情況下，有使用 adsense 廣告的網站，皆面臨到一項較大的影響，就是因為網站 AMP 設定後便能另外收錄在Google對應的快取伺服器中，因此相關訪客流量將是紀錄在網址後方有加上「/amp」的伺服器上，將不會算計在原本網站上的流量，關於這個部分將會大大影響 adsense 廣告收錄效益，因此 Google 也針對此部份推出了改善方案，詳請可以參考如何建立 AMP 相容廣告單元資訊。  

  網站嵌入Google map技術，在行動裝置的進步之下，使用者依靠行動裝置進行查詢、定位、導航已經是習以為常的動作了，因此不論是銷售據點、辦公地點等以地圖形式呈現連結也是現行十分重要的網站資訊，以下將針對大眾普遍通用的 Google map 嵌入技術進行介紹。     在開始嵌入網站地圖之前，我們需要先透過 Google map ：https://maps.google.com.tw/maps 來先進行地點的搜尋與定位，這個動作可以確保地點的正確性也是幫助我們產生地圖連結的重要步驟。     透過地圖的定位與確認後，Google map 貼心的設計了地圖外連分享功能，在分享的功能中選擇"嵌入地圖"，當中將會產生定位地點的相關程式應用編碼，這編碼其中包含了定位資訊與圖示資訊，是非常完善的對應連結。     由 Google map 所產生的定位編碼加入在網頁的資訊內容中，並加以調整顯示特效及大小比例，將能清楚地讓使用者快速清楚明白相關地點資訊，也有助使用者能更方便快速地找尋到相關地點的定位及導航資訊。 

      本站之前淺談過 API 應用程式介面是什麼，瞭解了 API 的核心架構，主要是開放物件功能和資訊打包成可物件連結的應用程式介面與其它網站可進行串接、共享，本次將延伸介紹的是 Facebook Graph API與網頁設計的實際串接應用，透過 Facebook 廣大會員人數資訊，我們可以整合會員帳號、e-mail、喜好等眾多同意公開資訊，進而應用提供用戶們可以更方便操作使用網站。     從 Facebook Graph API explorer 進入操作介面後， 選擇將要應用的公開資訊， 確定需要取得的資訊後進行提交，Graph API 將會產出相關對應的讀取參數， 可以透過"取得代碼"，來轉換打包將要對應的程式語法， 最後再透過呼叫參數與對應打包語法就能加以延伸應用在一般網站之中。    

   什麼是"API"，應用程式介面 (Application Programming Interface)，在現行網際網路發達的時代，因應網路平台的多樣性的發展，許多大型網站平台逐漸開放物件功能和資訊與其它網站進行串接、共享，不僅能接觸整合多元資訊，更可以提升跨平台使用者的友善性，達到平台多元發展的市占性，而大型平台將這些開放分享的資訊功能開發打包成可物件連結的應用程式介面，提供其它開發者進行應用串接，便是API的核心架構。     在日常中我們常應用的大型網站，如：Google Maps、Facebook Graph API  等眾多平台，都開發分享了許多能與它們連結並共享資訊的API相關功能，最常見的便是網站中越來越常見的社群網站鑲嵌資訊與影音相關媒體應用，讓一般普通網站也跟大平台有了聯繫，也令使用者在資訊接收應用上更為豐富自由，是網站未來發展的重要趨勢。     網站豐富多元的內容資訊能夠帶給使用者完善齊全的需求，也能吸引更多使用者的應用，因此網站多元的連結應用是發展的趨勢，在製作網站的同時可以多參考符合需求的API跨平台功能，便能將網站的豐富性提升。

  在資料庫與主機系統日新月異，不斷推陳出新的現今，以往舊版本的資料庫系統也逐漸需要汰換，在進行"轉移資料庫"的時候，大多數情況可能會遇到不能使用如新建立的資料表單匯入資料庫時的"新增查詢"方法，原因是因為運行許久的資料庫檔案內容已經累積較為龐大的資訊，使用新增查詢這項功能時將會有記憶體不足無法匯入的情況。    因此本次將要分享得是，解決資料庫備份檔案.sql過大，如何使用命令提示字元cmd的匯入方法。   1.在進行命令提示字元cmd匯入資料庫前，先使用記事本開啟備份檔案.sql檢查修改確認資料庫的名稱是否符合將要匯入的資料庫  名稱，若備份的資料庫名稱與將要匯入的名稱不同，請依照將要匯入的名稱修改並儲存!     2.確認要匯入的資料名稱與資料庫名稱相符後，由桌面左下開始按鍵搜尋命令提示字元cmd開啟視窗，使用命令提示字元操作         sqlcmd -S  ＜server＞ -i C:\＜your file here＞.sql      ex：sqlcmd -S 127.0.0.1 -i d:\SQLbackup\webdesignex.sql     輸入資料庫IP位置-在這是本機 127.0.0.1 再鍵入要匯入與對應資料庫名稱得路徑與檔案名稱 d:\SQLbackup\webdesignex.sql 進行執行-之後系統將會把資料庫備份檔匯入資料庫中，等待資訊完整匯入便能解決資料庫備份檔案.sql過大的問題。 已上提供範例參考，若有相關疑問也歡迎聯絡我們，本站將會竭盡服務說明。      

   本站在先前的文章"DNS是什麼?"、"DNS基本資訊"中介紹過，在架設專屬的網站時，須要透過DNS網域名稱系統來進行網域名稱和網站地址及內容與電郵的設定，因此DNS資訊在網站架設環節中佔了十分重要的地位，也因為DNS有著對網站運作的舉足輕重性，所以DNS的安全性也成為了網路有心人士作為利用與攻擊的目標，本次將要分享的資訊便是近期"全球網域名稱管理機構(ICANN)"大為推管部署的 DNSSEC (網域名稱系統安全擴充)協定。     DNSSEC (Domain Name System Security Extensions 網域名稱系統安全擴充)協定，主要的設計目與原理是在原有的DNS資訊中，加入數位簽章的機制，網站連線發送端透過簽章所產生的加密金鑰來保障傳遞訊息的正確性，在接收端收到傳遞的訊息時，需要經由解析器來驗證還原資訊的完整性，進而確認了收發端雙方的資訊傳遞安全性，所以可以杜絕有心人士竄改DNS紀錄或冒用DNS紀錄發送錯誤資訊的風險，因此經由DNSSEC協定的技術，便能保障強化DNS的安全性。     由於 DNSSEC 運用的是"非對稱式密碼演算法"，對於資料的加解密作業將耗費更多的DNS主機資源，所以在原有的DNS系統上仍有許多瓶頸必須克服，因此尚未完全佈署，不過毋庸質疑的是 DNSSEC 協定技術能夠有效保障網站 DNS 的安全性，也受到各領域的支持，全球網域名稱管理機構(ICANN)也致力推廣，未來 DNSSEC 協定勢必將會普及，相信也將會帶領網站安全機制更邁向成功的一步。

   先前本站介紹了"代理/Proxy快取伺服器"技術，其中簡單的說明了代理快取伺服器的技術中大致分類為"正向代理(Proxy)快取"與"反向代理(Reverse Proxy)快取"兩種快取技術，而在先前的介紹中有提到了現行較為主流的反向代理技術逐漸取代了正向代理技術，主要原因就是反向代理技術由網站方加設，便能提供大眾使用者的便利，而其所主要應用的技術為 "內容傳遞網路-CDN(Content delivery network)"。     內容傳遞網路 - CDN (Content delivery network)，是一種在網路上的快取/暫存機制，主要由網站端進行設置；原本的連線模式為使用者直接對存放網站內容伺服器進行讀取，看似為正常的動作，但若是遇到網站伺服器存放在不同地區或是其他國境，使用者連線時將面臨多次網路中的橋接與交換，就會有網路壅塞與延遲和浪費流量的問題產生；因此 CDN 技術透過設置多台快取/暫存伺服器分散駐點在各國家與地區，將原本存放網站內容伺服器的靜態畫面資訊進行壓縮與暫存在各地的伺服器上，再根據使用者所連線的地區距離進行優先配對連線，進而達到短程高速且不浪費流量的快取/暫存連線技術。     由 CDN 技術的加入，各地快取/暫存的伺服器分散、減少了原本單一主機重複多次的讀取流量，也因為預先壓縮暫存，所以主要的網站伺服器短暫的當機，也不至於所有的用戶都不能連線，再加上多台快取伺服器分散各地，如同防護牆一般保護著原本存放網站內容的伺服器不至於遭駭客直接性的攻擊，是項保障使用者與站方的雙向友善性技術。  

  先前透過快取我們瞭解了許多加速網站的方法，如："初識網站快取加速"、"代理/Proxy快取伺服器"、"瀏覽器快取/緩存技術-HTTP Cache"。本次希望介紹更進階的技術分享給大家，透過Google與中華電信的 DNS 主機IP 進行快取來加速網站讀取。由先前文章"DNS是什麼?"中我們能瞭解" DNS 網域名稱系統"是透過全球連線伺服器不斷的在進行擴散式的同步更新連線資訊的，因此在系統更新連線之前，便是使用快取緩存技術來確保原有的網站資訊來維持用戶的連線。     這邊提到Google與中華電信的 DNS 主機IP 與快取又有何關係呢?主要原因是在 DNS 同步資訊時會因為不同等級領域的主機有不同的更新等待時間，因此Google與中華電信友善的提供了他們較高權限更新的 DNS 主機 IP ，讓一般使用者在連線時能更快速掌握正確的網站位址，減少發生網站更動 DNS，卻因為 DNS 同步速度較慢的關係，出現找不到網站的情況，或是，使用距離比較近的 DNS 主機，更新就能得到比較快的回應，所以理解其原理了之後，已下將為大家介紹該如何設定，這部分相關資訊。   Google    DNS 主機IP為： 主要的慣用 8.8.8.8    與備援的 8.8.4.4   中華電信  DNS 主機IP為：  主要的慣用 168.95.1.1 與備援的 168.95.192.1     進入系統的"控制台"後，選擇"網路和網際網路"當中的"網路和共用中心"，將會發現"變更介面卡設定"，選擇真正上網使用的網路硬體，點選滑鼠右鍵，打開內容選單便能看見網路連線內容，針對 "網際網路通訊協定第4版(TCP/IPv4)"進行內容的調整，由原本的"自動取得DNS伺服器位置" 改變為"使用下列的 "DNS 伺服器位置，在針對慣用和備援的 IP 鍵入 便能生效。  

   由先前本站介紹過"瀏覽器快取/緩存技術-HTTP Cache"，瀏覽器運用快取技術的原理後，能夠有效的節省頻寬流量與網站再造訪時的快速呈現，但使用者在瀏覽較為大量的網站頁面後，將會有累積過多的快取/緩存檔案和未能即時對應網站更新的同步資訊問題，便可能影響長時間後的效率跟使用者操作的及時落差問題。     在瞭解了瀏覽器應用快取技術的優點與長期使用後可能會面臨的問題後，本次針對累積過多快取/緩存檔案跟未能即時更新同步問題，整理了改善對應的辦法，讓使用者能有效改善瀏覽器快取/緩存大量使用後的盲點。針對現今各家瀏覽器開發技術中大多皆加入了快取/緩存技術，也因為瞭解其應用原理將會有後續的盲點，因此各家瀏覽器也衍生了清理快取/緩存的功能，已下將針對現今常用的幾項瀏覽器進行清理快取/緩存的步驟說明。     Google Chrome  61.0.3163.100(正式版本)   1.點選在瀏覽器右上方 自訂及管理Google Chrome的圖示選項  2.選擇 自訂及管理Google Chrome 中的"設定"選項 3.進入設定頁面後，將最下方"進階"選項展開 4.從隱私權和安全性的功能中選擇"清除瀏覽資料" 5.其中有各項提供選擇的清除項目及可以選擇將要刪除的時機點，在此建議選擇"不限時間"和"瀏覽紀錄、快取圖片和檔案紀錄" 6.確定選擇完要刪除的項目後點擊"清除瀏覽資料"便能完成清理快取/緩存的功能     Microsoft Internet Explorer 11   1.點選在瀏覽器右上方 ，點選"工具"的圖示選項  2.選擇"安全性"中的"刪除瀏覽歷程紀錄" 3.其中有各項提供選擇的清除項目，在此建議選擇"網際網路暫存檔與網站檔案、cookie與網站資料、歷程記錄" 4.確定選擇完要刪除的項目後點擊"刪除"，此時尚未完成，請稍待 5.待瀏覽器下方出現"Internet Explorer 已完成刪除選項的瀏覽歷程記錄"便能完成清理快取/緩存的功能     Mozilla Firefox 56.0.1   1.點選在瀏覽器右上方 ，點選"開啟選單"的圖示選項 2.選擇"歷史"中的"清除最近的歷史紀錄" 3.其中有"清除時間範圍"和"詳細資訊"展開後能提供選擇各項的清除項目 4.在此建議選擇"所有歷史紀錄"和"瀏覽與下載紀錄、已存表單及搜尋紀錄、cookie、快取" 5.確定選擇完要刪除的項目後點擊"立刻清除"便能完成清理快取/緩存的功能       在透過定期清除快取/緩存的功能後，便能有效提升瀏覽器快取的功能，以上若有相關疑問可以參考本站"初識網站快取加速、代理/Proxy快取伺服器"相關文章或歡迎至聯絡我們進行洽詢。

  本站先前介紹了"初識網站快取加速"與"代理/Proxy快取伺服器"後，本次將要說明的為"瀏覽器快取/緩存(HTTP Cache)"，它幾乎是每個有瀏覽網站的人，都使用過的快取應用技術，但卻是一般人比較不會瞭解到的快取應用技術!不被瞭解的原因在於，一般使用者在使用時只會感受瀏覽器的流暢度，卻不知道瀏覽器其中已經運用了快取的對應技術，所以更加不可能知道瀏覽器的快取技術其實是運用了使用者本機記憶體作為對應進行。     瀏覽器的快取功能，主要是透過首次讀取網站頁面時，由瀏覽器產生一個"快取/緩存過期時間(max-age)"及"文件編輯/修改時間(last-modified-time)"，在根據造訪伺服器實際網站內容來進行讀取工作，進而儲存快取/緩存資訊至使用者的本機記憶體中；當使用者再次查看相同網站時，瀏覽器會先透過第一次造訪所產生的"快取/緩存過期時間"來比對快取/緩存的資料是否"過期"，若比對後沒有過期，瀏覽器就不再造訪伺服器，直接運用第一次造訪時所儲存的快取資料來呈現網站，便能省去重新呼叫伺服器和重新讀取資訊的動作與時間，達到節省流量且快速呈現的快取/緩存功能。若是真的遇到"快取/緩存過期時間"，瀏覽器便會重新呼叫伺服器，透過"文件編輯/修改時間"與伺服器端資料進行比對，確認在過期這段時間中，是否有檔案有遭變更修改過，假設並沒有任何變動，瀏覽器便將會直接使用第一次造訪時的快取/緩存資訊來直接呈現，省下重新讀取的時間，此動作稱為"協議快取/緩存"；如果在比對中發現有變更的檔案內容，便能針對個別單一誤差檔案進行重新讀取且更新的動作，省去重新讀取整個網站全部內容的冗長時間。     瞭解了瀏覽器快取技術的運用原理後，我們進而可以得知，其技術是透過瀏覽器將快取資料儲存在瀏覽者本機記憶體當中，此技術能有效達到節省流量與快速呈現網站的好處，但卻也可能造成使用者瀏覽過多網站後的過多快取資訊及快取資訊尚未過期而未能即時對應網站修改更新的問題，針對這部分衍伸問題的對應處理辦法將於下回討論中進行分享。