娶了UI設計師的Python工程師-北歐生活

前端工程師在學習RWD時,這叫"流動布局"的小東西也超級重要,不學就等於少一個小螺絲! 前端工程師 在撰寫 RWD網站 時，所使用流動布局 Fluid Grid (又稱「液態布局」或「液態網格」）是兩種技術的組合：「Grid Design (網格式設計)」和「Liquid Layout (液態排版)」，介紹如下： Grid Design (網格式設計) 而設定相對尺寸 - 百分比 (%) 的同時，也要制定寬度的最大值與最小值。當寬度超過或低於某限制時，版面依然可以固定。這樣一來，若螢幕寬度大於其最大值時，元素的兩側就會留白，這樣就可以確保在 網頁設計 做完之後，網頁的版面不管在什麼裝置上都能保持適合閱讀的介面。 網頁設計 的過程中，會使用<div>進行排版，寫法有兩種：「float (浮動) 」與「display-inline-block」   1.float (浮動) 下方的範例用 float 將 4 個 div 由左至右排序。在寬螢幕上可以並排展示，但是在行動裝置上，4 個 div 則會依序自動調整排列位置：後方的 div 會自動移至前一個 div 下方。 See the Pen float-right-n-left by Tedutw ( @Tedutw ) on CodePen . 結果就算位置重新調整，這 4 個 div 仍然是靠左、或靠右。因為他的原理是使用 「float: left」將元素浮動靠左對齊。你也可以用 「float: right」將元素浮動靠右對齊   2.display: inline-block 跟上述的「float (浮動) 」相同，都可將元素做到靠左對齊或靠右對齊，差異是 float (浮動) 會與其他的元素重疊。相反的，display-inline-block 就沒有這個缺點。 兩者差異的例子如下： See the Pen float vs inline:block by Tedutw ( @Tedutw ) on CodePen . < Liquid Layout (液態排版) 另一個能達成「流動布局 Fluid Grid」的技術是「Liquid Layout (液態排版)」，主要原理就是把尺寸單位改成...

前端工程師口中的RWD到底是什麼?別擔心,讓我們一起剖析它! 為何寫 RWD 響應式網站會成為當代 前端工程師 的必備技能？那是因為 RWD 響應式網站的元素 (圖片、影片等) 可以跟著螢幕大小而變動。 而響應是網站又是什麼呢？響應式網站 (RWD) 是基於 流動布局（Fluid Grid） 、流動圖片 (Fluid Images) 以及媒體查詢（Media Queries）等核心三個概念的技術的組合，之後在 網頁設計 中，呈現出非固定尺寸的網頁狀態，有別於以往固定寬度的網頁布局。簡介如下： 流動布局（Fluid Grid） 流動布局 （ Fluid Grid ，又稱「液態布局」或「液態網格」）的原理， 前端工程師 在做 網頁設計 時，可將網頁的各種元素，以縮放、浮動的區塊來做配置，進而讓網頁中的各種元素，能隨著不同的瀏覽介面，而自動縮放大小以及調整排版。 例如，A 網頁中有兩個區塊可在電腦螢幕上並排展示，但在手機上因螢幕寬度太小而無法並排顯示時，後面的區塊就會自動排到前一個區塊的下方，所以不會產生水平卷軸 (Scrollbar)。 在流動布局中，寬度也常以百分比 (%) 為單位 (傳統的網頁常以像素 px 作為唯一單位)，因此可讓網頁能依照裝置的螢幕尺寸，自動依照比例進行調整，就如同液體會依照裝填容器不同而隨其變化形狀。   媒體查詢（Media Queries） 媒體查詢 （ Media Queries ）如字義所示，就是網頁會先「查詢（query)」「媒體 ( media )」的屬性，再針對這些屬性值而決定要給網頁什麼樣的樣式。簡單的說，就是針對你的裝置，給你不同的樣式設定。 在這些屬性包含設備類型、解析度、螢幕的尺寸等。在網頁上常用 媒體類型 (media-type) 的為 all (所有裝置)、screen (螢幕裝置)、print (印刷裝置) 等。而常見 媒體特徵 (Media Features) 有 min-width (最小寬度)、 max-width (最大寬度) 、resolution (解析度) 、 color (顏色) 等。 流動圖片 (Fluid Images) 因應 RWD 流動布局 的特性，其圖片的尺寸也必須更靈活的隨著裝置螢幕大小而伸縮自如，是為「 流動圖片 (Fl...

不管是前端工程師還是網頁設計師,了解整體網站的規畫都是非常重要的事,今天分享四個步驟讓你穩紮穩打! AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 在規劃網站時，相信有不少的 PM 在與 前端工程師 或是 網頁設計 師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過 網頁設計 、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 讀完本系列文章後，你將會了解： (目錄) RWD 和 AWD 的差異與優缺點 我該選擇 RWD 還是 AWD ? AWD 要怎麼做才能對 SEO 無痛? 了解整體網站的規劃流程-PM與前端溝通更順利 與前端溝通更順利！從了解整體網站的規劃流程開始 無論是設計網站或是 APP 開發，合理的設計四個流程就是這四個：Sketch、 Wireframe、 Mockup、 Prototype。 #1 Sketch (草圖) 這個階段需要靠大家一起腦力激盪，只需要用筆和紙將腦中的想法粗略的勾勒出來-這也是最快得到靈感的方法。就算是粗糙不堪的草圖，也比文字更能夠表達、整合、具象化大家的想法，是在進入到 Wireframe (線框稿)之前的必備步驟。 需要工具 ：筆與紙 擬真度 ：最低 階段目標 ：溝通、整合大家的想法與創意 #2 Wireframe (線框稿) Wireframe (線框稿)階段的重點在於 釐清需求 與 確認網頁上一定會出現的功能 。所以必須先排除視覺元素的討論，單單專注在功能的規劃，以免失焦。 線框稿會以簡單的草稿圖，以低擬真度的方式呈現網頁上的主要資訊、排版與架構，以及如何與使用者互動等。通常設計師會使用 Balsamiq 提供的 Wireframe 工具、或是 powerpoint 、手繪等方式，以黑白的方格、線和圖來呈現不同的層級，其元素必須要非常精簡，是為了避免討論時失焦，加速效率和速度。某些還未確定的內容，就先利用方框或假文字來表示，例如圖片、影片與文字等等。 因此，在 Wireframe 階段不能出現過度的細節會比較好，比如說網頁的字型選用、 B...

對所有前端工程師和網頁設計師來說,想辦法讓AWD的SEO無痛確實滿令人頭痛的,今天一起來學該拿它怎麼辦~ AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 在規劃網站時，相信有不少的 PM 在與 前端 工程師、 網頁前端設計師 或是 UI 設計師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過 網頁設計 、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 讀完本系列文章後，你將會了解： (目錄) RWD 和 AWD 的差異與優缺點 我該選擇 RWD 還是 AWD ? AWD 要怎麼做才能對 SEO 無痛? 了解整體網站的規劃流程-PM與前端溝通更順利 AWD 要怎麼做才能對 SEO 無痛? 很多人都說 AWD 對 SEO 不利。那是因為 大多數的人會 省去 將 「行動版」 與 「桌機板」 串在同一個網址的流程，索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址，所以流量自然會分流，如此一來，對 SEO 當然有負面影響！ 觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ，會發現行動版的網址前面多會有個 「m.」 的開頭，就是這樣的情況。 但我們先回到原點，弄懂 AWD 的基本原理，其實很簡單， AWD 只是分成桌機版與行動板等兩套 CSS（有時可能會多出其他的而有兩套以上的 CSS）。但是一個網站擁有多套 CSS 並不等於要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下，判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟，才可以集中流量在同一個網址中，對 SEO 或品牌辨識度都比較好，就不會有前面提到 「分流」 的問題，也不會影響到 SEO優化 。 所以不要再說 AWD 對 SEO 不利了！記住，不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址」 的作法。你所需要的，是要把行動版與桌機板使用同一個 URL。 繼續看本系列文章下篇: 4. 了解整體網站的規劃流程-PM與前端溝通更順利 本系...

要選RWD或AWD再也不會是前端工程師的難題了!只要看完這篇保證讓你兩個都用得恰到好處! AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 在規劃網站時，相信有不少的 PM 在與 前端 工程師 或是 網頁前端設計師 在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁、或是無任何技術背景的 網頁 規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 讀完本系列文章後，你將會了解： (目錄) RWD 和 AWD 的差異與優缺點 我該選擇 RWD 還是AWD? AWD要怎麼做才能對 SEO 無痛? 了解整體網站的規劃流程-PM與前端溝通更順利   該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ 當下 RWD 正夯，但並不代表所有的網頁都適用 RWD 技術。身為決策者的我們，必須先檢視網站的規模、內容、專案的需求以及人力，再決定使用 AWD 還是 RWD。 至於哪一類的網站適合 RWD、哪一種的網站適合 AWD，簡單的整理如下表所示： RWD vs AWD 簡易比較表 RWD AWD 人力需求 較少，因為只有一套 CSS 較多 (因為需要多套 CSS)， 需要網頁人才與尚需 前端 工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式 維護成本 較少，因為只有一套 CSS 較多，因為有多套 CSS 以及程式 適用內容 網站內容較單純時適用。 如簡單的企業形象網站、一頁式網站等等。 網站內容較多、較複雜時適用。 如博克來、MOMO 購物網、蝦皮拍賣等。 適用排版 較簡潔的畫面與排版 較多元化、複雜的畫面與排版 SEO 支援 SEO 優化、維護較容易 同左，但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址，導致流量分散。 工程師必須要在...

相信很多前端工程師和網頁設計師,常常處在一個不曉得選擇RWD或AWD的窘境,今天就讓我來娓娓道來它們的差別! AWD 跟 RWD 的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 相信有不少的 PM 在與 前端 工程師或是 網頁前端設計師 當他們在規劃網站時，會在溝通上遇到瓶頸，像是網站要使用 RWD 還是 AWD 等等。本篇就以未接觸過 網頁設計 、或是無任何技術背景的網頁規劃的初學者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 讀完本系列文章後，你將會了解： (目錄) RWD 和 AWD 的差異與優缺點 我該選擇 RWD 還是 AWD ? AWD 要怎麼做才能對 SEO 無痛? 了解整體網站的規劃流程-PM與前端溝通更順利   RWD 和 AWD 的差異與優缺點 在網頁上，RWD 是「Responsive Web Design (響應式 網頁設計 )」的縮寫；而 AWD 則是 「Adaptive Web Design (自適應式 網頁設計 )」的縮寫。RWD 與 AWD 是為現今大多數人們習慣使用手機、平板等行動裝置上網而生的 CSS 寫法，讓 網頁設計 無論在桌機螢幕上、或是尺寸較小的行動裝置上，都能清楚的呈現，讓使用者能更舒服的瀏覽網頁。 RWD 與 AWD 的差異，簡單的來說，前者是無論行動裝置或是桌機，都使用同一套 CSS；而後者是針對各種裝置撰寫對應的 CSS，可以有多套 CSS，例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。 簡單的來說，就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下： RWD 會把所有裝置的樣式都寫在同一套 CSS 中，因此無論行動裝置或是桌機，都是使用同一套 CSS 。當使用者打開了網頁，就能即時透過網頁的寬度，決定要套用到 CSS 中的哪一個樣式。 而AWD 是針對各種裝置撰寫對應的 CSS，因此就會針對不同的裝置，而有多套的 CSS 樣式碼：例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。AWD 的方式必須仰賴 前端 工程師 撰寫的程式，來判斷使用者是使用哪種裝置開啟網頁，再自動匯入...

雖然大家都知道人工智慧一直在進步,但要是沒看到這篇文章,我也不會知道它的辨識功能這麼進步了! 今天 Python 課程 的老師提到： 人工智慧 ( AI ) 已經應用到很多專業的產業中，如 醫療 、 咖啡 、 零售 、 人臉合成 、 養殖業 、 無人駕駛 、 救流浪貓 等等。 Google 也展現了將 人工智慧 技術帶入日常生活的決心，並推出了新一代機器學習產品－Google Vision API ，它為 Google Cloud 提供的 AI 影像辨識工具，還被聯合利華 Unilever 採用；另外，傢俱大廠 IKEA 也透過 Cloud Vision API 打造一款商品搜尋應用程式，消費者只要對產品拍照，立即就能得知詳細資訊。 目錄 動手玩玩 Google Vision API 標籤偵測（LABEL_DETECTION） 臉部偵測（FACE_DETECTION） 煽情露骨內容偵測（SAFE_SEARCH_DETECTION） 標誌偵測（LOGO_DETECTION） 地標偵測（LANDMARK_DETECTION） OCR 文字辨識（DOCUMENT_TEXT_DETECTION）   動手玩玩 Google Vision API 今天， Python 課程內容介紹了Google Vision API ，它其實就像是 Google 的照片搜尋功能，主要能夠讓機器學習圖片中的物件 (如人臉、商標 Logo、圖片中的文字等等)，還可以偵測是否有暴力色羶腥的內容等等。簡單而言，Vision API 會自動辨認照片出現的物品並逐一做標籤。 只要 點我 打開 Google Cloud Vision API 的網頁，將圖片拖曳進下圖中的紅色區域，就能無痛、無料試玩大多數的 API 功能。 API 功能可簡單分成臉部辨識、標籤偵測、Web、文本辨識等等，下面將會就各個功能分別做說明。 標籤偵測 今天我們上傳一張圖片，API 就會回傳一組或多組回應。下圖為我們上傳一張貓咪圖片的範例，API 回傳了多組回應。 每一組回應包含三個值：mid、description 以及 score。上圖中右側顯示有 description 以及 score。 mid、descrip...

關於SEO圖片優化的尾聲,要教你如何選擇適當的圖片格式和創建圖片的sitemap! 目錄 1. 圖片SEO的重要性 2. 8大圖片SEO心法    2-1. 使用合適的圖片檔名    2-2. 優化 alt 文字    2-3. 能不用圖片就不要用圖片    2-4. 別只靠 HTML5 的 width 與 height 來設定圖片尺寸    2-5. 圖片寬度別超過網頁的內容    2-6. 圖片 Exif 資訊 - 視狀況而刪除    2-7. 選擇適當格式的圖片檔    2-8. 創建圖片的 sitemap (進階)   7.選擇適當格式的圖片檔 我想不只是 前端工程師 ，一般人都知道，大多數網頁上呈現的圖檔，不外乎就是：jpeg、png、gif這三種。 這三種圖檔都有不同的壓縮方式。而如同前篇所述：越小的尺寸，對網頁載入的速度就越快。而網頁載入的速度對 SEO 品質有關鍵性的影響。 同一張圖片，以何種形式為檔案，才是最小的呢? 我們拿一張圖片分別存成 GIF、JPEG (JPG) 與 PNG 檔來試試： 由以上結果可知，jpg 檔的尺寸是相對較小的。那網頁圖片選擇 jpg 檔是最好的囉？慢著！這可未必呢！ 一般來說，若圖片的類型是照片，通常存成 jpeg(jpg) 檔是最合適的、線條圖畫與文字則是 PNG 檔、動畫則是 GIF 檔。 GIF、JPEG (JPG) 與 PNG...我到底該存成哪種檔案？下面說明給你聽： GIF 格式 雖然算是一種無失真的圖像壓縮標準 (無失真不等於高清解析度)，但是顯示的顏色被限制成只有 256 種，因此適用於不需太高解析度的動態圖。 JPEG (JPG) 格式 是具有破壞性的圖片壓縮格式，所以可壓縮的尺寸相對也較小。適用於照片。 PNG 格式 也是一種無失真的圖像壓縮標準 (無失真不等於高清解析度)，且顯示的顏色也不像 GIF 般被限制，因此 PNG 檔案尺寸比前兩者大。PNG 格式適用於圖片中的線條與文字必須要很清楚地顯現的場合、或是小尺寸的 LOGO、ICON 等。去過背的 PNG 圖可在網頁上以去背的方...