彰師大41週年校慶網頁

之前在課指組打工幫學校做的校慶網頁，感覺還滿好看的
那時候還不知道什麼是 Bootstrap ，
還是用自己的習慣一磚一瓦的把全部的東西 Build 起來
很有成就感也很有趣，什麼 css, js 等等的技術也又再往上爬 ～ 爬爬爬～～

(不過現在網站的連結斷了，也連不到什麼東西 XDDD)

Lorempixel - 方便的圖片 Placeholder

Intro

在做網頁設計的 Mockup 時，有時候會需要一些 image placeholder，這次介紹的是 lorempixel.com 的 placeholder, 不用引入js、直接把類api的網址放入 img tag 的 src attribute 即可。

---

Basic

最基本的用法可依序傳入長、寬，或是在長、寬前指定灰階：

Example - 長、寬都是200，左邊彩色、右邊灰階

Category

再來可以指定類別、或是傳入1~10指定該類別的圖片：

Example - 長、寬都是200，左邊是隨機、抽象，右邊是抽象的第 2 張圖

而可用的類別有下列幾種－

• abstract
• animals
• business
• cats
• city
• food
• night
• life
• fashion
• people
• nature
• sports
• technics
• transport

Text Overlay

可以在圖上固定位置疊上簡單的文字，測試過不能打中文，正、反斜線也不能打：

Example - 長、寬都是200，左邊是隨機people的圖片並疊上文字，右邊是指定people類別的第 3 張圖並疊上文字

Conclusion

雖然這個 placeholder 很方便，但是使用錯誤的時候沒有足夠的提示（或機制），像我自己在測試的時候，亂給參數、或給不允許字元（像中文），有時候有給全黑的圖片、有時候則是直接跳 object error。不過即便如此，對於基本的圖片需求還是很足夠的。


Reference

1. lorempixel: lorempixel.com

og:image setup for Tumblr

Tumblr自己改版面後，分享一直無法顯示該篇文章的內容作為FB分享的縮圖，
於是搜尋了一下，在head中加入以下的程式碼即可：



Reference

1. Tumblr - How to create a custom HTML theme: http://www.tumblr.com/docs/en/custom_themes
2. Stackoverflow: http://stackoverflow.com/questions/13438694/ogimage-taken-from-tumblr-page-content

Restrict user input by regex. 用 regular expression 限制使用者輸入

在需要限制使用者只能輸入某些字元，如只能輸入英文、數字的時候，不能輸入中文全型、空白，可以透過 javascript 內建的 event 及 regular expression 來達成。


這是一個範例，regular expression的部份在 /[^-_0-9]/g

這段主要分成三個部分

1. 斜線之間放需要尋找的字元
2. 搜尋的內容
   
   • [字元]：和指定的字元相符
   • [^字元]：指定的字元以外
   • -_0-9： 指定的內容（這裡是和'-','_',0~9等數字相符）*
3. g - 搜尋一整個目標字串 **

* 指定內容格式常用的其他方式 (還有更多)
\d - 限制僅為數字，作用與 0-9 相同
\w - 相同於 a-zA-Z0-9 ，大小寫英數皆相符
\s - 表示任何的空白符號

** 字尾其他常用指定方式
g - 整個字串都搜尋
i - 區別英文大小寫
m - 只判斷開頭和結尾


Reference

1. Regular-Expressions.info: http://www.regular-expressions.info/reference.html
2. 小保羅的爸 - 輕鬆解決網頁只能輸入英數字的問題: http://blog.xuite.net/cvh007/paul/20838960
3. 石頭閒語 - Regular Expression (RegExp) in JavaScript: http://blog.roodo.com/rocksaying/archives/2670695.html

MapBox - the awesome solution for map

source: MapBox

MapBox

MapBox 是另外一個很有趣的Maps API，最初發佈於 2011 年 4 月

MapBox 提供開發者一個 Dashboard 可以方便管理地圖的樣式， 儲存後並會提供一個 map id (Ex: username.mapserial)。
使用時只要輸入自己的 Map id，就可以直接取得 Map的樣式、甚至是預先標好的座標，非常的方便。

另外除了可以透過 map id 存取之外，MapBox 還提供了強大的 RESTful API，可以任意設定縮放視野、設定視野中心的經緯度座標。(Developer)

使用方式

要使用的方式很簡單（相對於Google我不太清楚，目前覺得我想要的事情可以迅速達成，還滿讚的！）

• iframe
• mapbox.js
• iOS SDK
• 靜態圖片

以下是使用iframe方式呈現的 MapBox 地圖，其他功能日後再來玩玩看～！



Reference

1. MapBox: http://www.mapbox.com/