 |
| kayjean.idv.tw |
去年底，因為工作需要複習了架網站技術，雖然內容都是些老掉牙的東西，如Servlet和Spring Framework(連結)，但好歹還是程式範疇。沒想到，最近的新任務，幫太座架設攝影作品網站，連伺服器程式都省了，直接使用CSS和JavaScript這類原始工具，實在是越混越回去啦。
抱怨歸抱怨，實際上，考量攝影作品網站特性，因為都是靜態照片，的確不需要如PHP、AJAX之類互動架構。例如影像分享平台，如Format等，雖然猛一看會覺得琳瑯滿目，但仔細觀察就會發現也僅僅是許多CSS和JavaScript堆疊。
 |
| kayjean.format.com |
除Format(連結，kayjean.format.com)，參考曹良賓(連結)，藍仲軒(連結)攝影師網站後，發現此類共同特色是畫面簡潔且功能性強，適合瀏覽形式。
- 內容分為相片集，和附屬的About、Contact兩類。
- 版面上，左側為導覽區(樹狀條列式)，右側為內容區，有兩種呈現方式，縮圖和投影片播放，彼此間可互相切換。
- 版面會因為電腦筆電或手持裝置而動態調整。
掌握以上原則後就是實作，原本是打算偷用這三者的CSS和JavaScript，但研究後發現，為了應付各式各樣商業需求，這類網站的功能都異常複雜，使用手法也都高深莫測，不是三兩天可以熟悉。就改為研究些較小型的專案，如下。
- Portfoliojs(連結)，左右橫向滾動swipe，沒有slide show，也不能單點某張。我喜愛這類簡潔又直覺的版面，老婆不然，她認為此種方式僅適合同質性很高的照片，否則會非常雜亂。
- Photobox(連結)，縮圖呈現，點擊後啟動slide show，視窗會蓋掉全畫面，類似還有連結、連結、連結。
即使有這麼多參考資料，最後反而是參考W3.CSS Template Portfolio (連結)。雖然版面神似，但因為有清楚說明，且CSS和JavaScript全是自己能看懂的，更沒有引用第三方檔案。自行研發的好處是，後續的維護或增添新功能都更方便，且更有成就感。
 |
| 縮圖版本 |
完成靜態網頁後，更陸續加入幾項功能。
- 嵌入youtube影片。Youtube有提供影片縮圖，可下載當成概念圖，並嵌入個大大的撥放標誌。實際播放是透過iframe，必須另外寫程式啟動和關閉其中JavaScript。
- 使用lazysizes-js 連結，達到預設讀取低品質縮圖，畫面實際呈現時，才陸續讀入高品質照片。這需要編輯端程式配合，為照片預先製作出不同解析度照片備用。
編輯作業
程式設計的第一原則是：能簡單就不要複雜。這也是網頁端選擇靜態網頁的原因。而後端編輯作業，也很單純，以C#，直接分析檔案架構即可，概念上類似(連結)。
- 掃描目錄，生成各目錄對應的基本檔案，並且製作出左側NAV需要的文字。
- 掃描個目錄下檔案，複製各相片，並且將照片資料填入套版中相對應位置，更改NAV中標記部分，動態產生網頁。
- 沿用套版，產生About和Contact網頁。
- 複製到Synology的Web Server目錄，即可提供對外服務。
網站資料
自pchome購買kayjean.idv.tw的domain name，並由其託管DNS，如下圖(連結)。
備註一：CSS及JavaScript搭配語法
CSS(Cascading Style Sheets)，印象中就是用在字型、間距和顏色等控制，與JavaScript這類邏輯性控制截然不同，以往都是一知半解，無非是拷貝、貼上，修修改改後就完事，知其然不知其所以然。這次比較認真了解。
- 基礎版面flex和layout，連結
- 基礎版面padding若只有兩個數字表示，上下及左右，連結
- 控制物件，因為要不斷切換視窗，可以控制區塊的出現和隱藏。ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. Class can be used to identify more than one HTML element.
- PC螢幕和手機會有不同顯示方式
- Load larger image on high DPI displays 連結
JavaScript
HTML備註二：持續修正項目
- 不同解析度讀取不同大小的圖片，這部分要再研究lazysizes功能
- 加入次數統計
- 測試MAIL功能
- 改變字體
- AWS取消AWS和FORMAT
沒有留言:
張貼留言