文章列表 頁1

教學

讓 photoshop 可以處理 webp 格式的檔案

最近網路上越來越常遇到檔案格式是 webp 的圖片,但 photoshop 還沒辦法直接處理,但還好有人開發了免費的 plug-in 讓我們使用只要簡單的安裝之後,我們就可以跟以往一樣用 photoshop 來處理這類型的檔案了喔!

教學

AMP 網頁開發介紹與基本設定

AMP 是 google 提出的行動裝置網頁開發的方法,全名為 Accelerated Mobile Pages,照字面意思可以知道是用來加速行動裝置的網頁開啟速度,由於目前網頁設計越來越複雜,若使用 RWD 的方法製作行動裝置版並無法加速網頁的開發速度,反而大多數狀況是會讓開啟的速度變慢,如果想要讓使用者有更好的體驗,就可以使用 AMP 的方式。

教學

使用 leaflet.js 來製作互動地圖

使用 leaflet.js 來製作互動地圖,內含套用 mapbox 的樣式。

教學

在 iOS 建立 web app 並設定 icon

使用 meta data 的設定來自定 iOS 的 web app icon。

教學

PWA 與 Service Worker

Service Worker 是一種 JS 的 Web Worker ,他是一隻獨立運行於瀏覽器頁面執行緒之外的一隻 JS 檔案,可以攔截網路請求,存取快取資源,並且能傳送訊息。也因為 Service Worker 可以攔截網路請求並改變 reponse,所以只能在 localhost 或是 https 上使用。

教學

CSS3 的 transition- 轉場效果

在 CSS3 出來之後,以往我們需要靠 js 完成的動畫效果,也大多透過 CSS3 來幫我們完成了,其中一種是 transition,可以做 CSS 的屬性在兩個值之間變化中間的轉場效果。

教學

讓網頁區塊的捲軸在 iOS 裡也有跟整個頁面一樣的回饋效果

在 iOS 裡卷動網頁,相信大家都有經驗是在往上或往下捲超過頁面時,會有一個可以拉超過頁面後「彈」回來的效果,這個是一個很好的 UX 回饋,但僅止於網頁整體,若想要在頁面裡某個區塊裡就不會有這個效果,還好 iOS 內建的瀏覽器可以設定 CSS 後就可以直接支援這個效果。

好網站

whimsical 可製作 Flow Chart、Wireframe、Mind Map 等的線上方便協作工具

網站的開發者在規劃的階段,應該都會有一個需要溝通想法的過程,這個階段我們可能會透過 Flow Chart 或 Wireframe 來溝通內容,這邊來介紹一個好用的線上協作的網站:whimsical。

教學

Web App Manifest

Web App manifest 是一個 JSON 格式的文件,它提供了應用程式相關的資訊,像是名稱、作者、圖示和描述等,還可以設定類似 app 的開啟畫面,可以讓使用者將 Web 應用程式安裝到設備的主畫面,提供更快速的訪問和更豐富的體驗。

教學

CSS3 的 border-radius- 圓角屬性

CSS 的 border-radius 允許你替元素的設置圓角,值為一個圓形的半徑,也可以利用分數的形式設置為橢圓形。

教學

CSS 的 content 屬性與應用

content 是一個可以用來無中生有的 CSS 屬性,這些是可以使用的內容:文字、unicode、attr、url、counter 函數與css變數。

教學

HTML5 的 Geolocation(地理位置) API

Geolocation 的定位是透過電腦的IP、WIFI定位法、手機三角定位及GPS來取得經緯度,所以大部分的情況用手機的定位會比較精準一些,但也可能因為環境的關係會飄到奇怪的地方,要使用的話要注意誤差的問題。

教學

判斷是否可以使用某個 css 屬性與使用- @supports

CSS3 雖然陸續被主流的瀏覽器支援,但也還是有持續在發展新的語法,或是如果有需要支援舊版瀏覽器,比如一些沒辦法使用 flex 排版的瀏覽器,可以使用這個來判斷是否支援某種屬性才去讀取這段內容,不支援的話就讀取舊的寫法。

教學

使用 Indexed Database API 存取資料

使用 Indexed Database API 開發的步驟為:1. 建立資料庫 2.建立 object store 3. 在 transaction 中處理資料。

教學

IndexedDB基礎概念

IndexedDB 讓我們透過資料鍵 (key) 儲存、取回物件。所有對資料庫的變更都發生在交易操作;如同大部分網頁儲存方案,IndexedDB 遵守同源政策,也就是說我們只能存取同網域下的資料。

教學

使用 svg 繪製長條圖

用 svg 搭配 jquery 繪製長條圖。

教學

HTML5 的 Web Storage- local storage 與 session storage

以往我們要在使用者端存取資料會使用 cookie,但 cookie 可以存的資料非常有限,所以後來 HTML5 發展出了 Web Storage,而 Web Storage 又分成了 local storage 和 session storage。

教學

SVG 繪製線條

利用 svg 的 line 與 polyline 繪製線條。