去年9月時Dropbox宣佈拿掉public folder功能. 相信對很多人來說是個噩耗.
Public folder最大的利點不是在於它會自動檔案分享並製造連結, 而是他的連結能直接在製作網頁時使用.
例如這日記除了圖檔, 所使用的icon font和lightbox的資源都是放在dropbox那邊.

連結被斷掉的話, 大抵這版面也被廢了一半.
圖檔和lightbox其實搬回忍者blog裡儲存就好, 只有字型沒有辦法. 忍者blog的file server不辨識otf...
不過我沒試過woff能不能用就是.

另一方面, 從消息流出半年來也是到最近才發現bitbucket可以掛靜態網頁.
不過GIT我不太懂用...要完全回復版面外觀或許要多點時間.

然後好像還有些sc4的screenshot是放在dropbox, 不過那些好像不是放public folder, 應該沒問題吧...

Quinque 是拉丁文的 '5'. 因為算起上來忍者blog用的template中, 這個是第五個.

總之搞很久總算改到版面. 雖說是自己一邊製作一邊試用, 但一時間仍然有點不慣.
畢竟看記錄我製作第四版已經是2009年的事. 即是說第四版已經用了接近七年.
比我製作過的任何一個web layout都長壽.

所以這次從水面到水底都是翻起全部打掉重來. 例如改用全頁的2column式layout, 底下全部用HTML5+CSS3+JQJS重寫.
連後台的template製作階段也改為減少依賴忍者blog的modular機能.

我一直都沒有idea要怎麼弄layout, 直到我開始弄隱藏menu的按鈕後突然想到試試把按鈕弄成三角形.
接著又想到把這三角形延伸到右邊column去, 於是變成現在的樣子.

原構想中兩個column分別為右邊放置記事, 左邊放置其他所有東西.
只是後來試著把記事日期位移到左邊的範圍後就想到乾脆把它放到三角形上.
原來的menu也不是全隱藏式, 而是在左右column中間垂直排列的tab式menu.

從視覺上左邊是放了很多東西, 但因為要遷就CSS的z-index機制, 結果大部份東西實際都放在右邊.
實際真的在左邊只有日記title的圖片. 如果連這個也不放左邊, 那左column就變成純粹的裝飾element.

雖說從不太會跟webtrend或web standard之類, 但現在確實認同HTML本文越簡潔越好.
這次我就連各個元件的動態也儘量不依靠JS達成, 例如月別archive和分類的pulldown我是用純CSS弄的.
但始終有些有關操作的部份還是得靠JS來完成. 還有就是一些忍者blog欠奉而要用JS補足的小細節.
例如分頁和月曆的今天表記. 忍者blog分頁強制是前後各五頁, 我則用jq把它弄成最多前後各四頁.

說回來這次還有幾點細節的明顯變更. 首先照自己要求把管理畫面/新記事的按鈕移到右上角固定, 連scroll都不需要就能按到.
其次是返回首頁的連結也放到右上角去. 沒理由只有頁底有這連結. 還有把前一頁/下一頁重新界定.
看很多blog程式都是叫下一頁和上一頁的, 個人覺得從頁面flow來看沒問題. 但從時間軸來看, 最新的記事同時也是最後的記事.
所以我用JQ把"次/前のページ"改成"Older/Newer Endties". 但兩個按鈕的位置只是參考各種月曆UI中上一個月通常放在左邊的現象.

至於視覺設計方面除了標題外全都走簡約路線. 不過我即使簡約也不會簡到只有白底黑字...個人覺得太悶.
藍黃配色是看著測試階段時用的底圖再隨便配的. 那時的底圖是irfa的多重曝光試作品.
然後正式時換回青池的紅外線黑白照. 總覺得彩色底圖不對味於是選用紅外線照弄成dual tone.
標題圖是到最後才弄的部份. 因為其實一直沒想過標題要放哪裡...於是學一些wordpress template把header放在左column的中央.
設計也是看到一些仿vintage風徽章後自己試著弄一個...雖然有簡潔和elegant的感覺但vintage感比較薄...裝飾線條有點偏現代味.
上下的小字都是拉丁文, 意思是"with nox aeterna since 2004" 和 "nox aeterna i.e.". 不加進去感覺不夠味道...


雖然現在已把template設換成這個第五版, 但這template嚴格來說仍然是未完成狀態.
就連上傳再把它弄到現在這個基本能看的狀態也費了我一番功夫. 第一是上傳前沒測試, 切換後發覺外部字型和所有JQ都失效.
搞了一輪才發覺舊版lightbox+附屬library原來和JQ本體不相容, 因此暫時要棄掉lightbox.
字型方面我把該當部份的CSS描述移到HTML本文那邊, 這樣google fonts就正常了.
但我還有使用自己用online apps製作的icon font, 這個要把字型檔案改放dropbox才行.

所以接下來我至少還要把新版lightbox搞到手, 然後看看怎樣令新lightbox對應舊記事.
還有記事comment關連的東西根本還未開始弄. 連template裡也沒有相關記述. 但我仍然有考慮弄回去.

還有幾個小bug. 例如記事別頁面時的頁頂分頁. 似乎是忍者blog獨自構文的bug.
然後是右上的按鈕位置似乎也要用JS控制了. "今天"的表記要加入年月的條件式.


最後這版面我在製作時有分別測試chrome和firefox的支援程度, 總之最新版一定沒問題.
但IE看來不是11以上的話都會有缺憾. safari和opera應該正常的...我想.

話說還有一個點想改動. 那就日記標題. 以前我還平均一個月最少20篇記事, 那叫作日記還算正常.
但最近除了旅行的月份外都甚少過10篇...其實是否該改用一個比較貼切的描述? 隨便想到叫"Glog", 怪怪的...

三張相片並排的問題勉強算找到解決方法了. 結果還是得靠javascript幫手. 方法大概是這樣:
首先以後三張3:2放在一起時會特別設為200px高, 其餘照用216px. 相片間的margin縮減到4~5px.
然後利用javascript計算viewport和記事column的闊度, 然後全部相片按比例縮小.
由於要遷就舊記事所以記事column還是有最低闊度, 沿用現在的780px.

邏輯上只是把一列相片當成一條很長的panorama方塊來看, 取得每個相片個別闊度再整合成一個闊度值.
之後只要計算這個方塊的長闊比和取得記事column的當前闊度就可以得出最後的縮放比例.

如果所有相片都在同個高度的話就可以用純css的方法解決, 在我的情況這就不可能了. 除非我不再拍portrait比例...


同一時間雖然依舊完全沒點子, 但試著弄了一個網站header用的parallax效果.
網站方面其實早幾天我在紙上把所有內容列出來, 並把不再需要的都劃掉. 粗略估算大概七成的內容都會砍掉.
現階段我傾向把整個相片區砍掉, 只留一條往flickr的連結. 但也保留日後再嚴選舊照重新擺放的可能性.

之後會把小姐們的一些記錄類的二線資料砍掉吧. 但設定類的我仍然想保留, 倒是有必要進一步簡化.
最後是ABOUT區幾乎整個只砍剩兩段文字, 而且會簡化重寫.

反正我改版原意就是縮小更新規模, 這程度的簡化我覺得剛剛好.
這程序有助我估算網站成品的資訊量, 便於我決定要用何種content-flow...
好吧one page web, fullpage, horizontal scroll, vertical split 我都想試, 該用哪個好 囧

日記版面因為旅行前準備和回來後的整理一直放置play, 最近拾起來繼續弄, 弄到中途又想起一件事.

我說本來要改版是要讓自己比較快按到我需要的連結, 簡言之是頁底那些管理用連結.
當然只把連結移到記事部份上面就好了, 但又感到部件沒有分類整理好, 心情上接受不到.
結果來說還是要改版面.

但改版面還有另一個目的, 那是希望讓記事部份的空間變得較闊.
我沒替這第四代日記版面做調整前只能放兩張3:2的landscape相片, 以高度210px來算的話.
後來去年寫北海道旅記錄時我把記事部份硬拉闊到能放兩張landscape和一張portrait, 但已是極限.

之前我一直都沒有特地去測試自己在弄的版面究竟能否達到要求, 今天突然想起這事, 於是實際試一下.

我的目標是記事中的相片能三張3:2並排在一起, 或者 16:9, 3:2, 2:3 各一.
於是以高210px來算的話最低闊度要有960px才成, 其中25px是相片間的空隔.
但這裡有另一個問題, 16:9的話高210時無法得出整數的闊度. 這又是另一個心情上接受不到的地方.
經過一點計算, 確定高216時就可以容納16:9, 3:2, 2:3, 還有4:3和3:4的整數闊/高度.

進一步計算, 假設相片間隔固定在10px, 我的目標分別需要992px和872px闊度.
再把記事layout的padding和margin等等的算進去搞不好記事column要有1020~1050px闊.
以FullHD的螢幕來說就是54%闊. 而我現在的layout暫時是設計成四六開. 左邊的四是cover+aside.
換句話說我要看自己的記錄時我就要把window開到最大才能看到三張landscape照並排.

...算到這邊就發現這根本本末倒置. 我改版是為要迎合自己不會把app window開到最大的使用習慣.
但我得到的點子卻迫使自己把app window開到最大.

至於解決方法嘛, 要不就改設計, 要不就放棄三張. 或者只有要放三張時把相片再縮小...
看來得出答案前還是得繼續停擺. 或者先試試畫一下普通layout好了...

網站翻新還沒甚麼進展. 現在唯一有的是確定了幾個東西的做法, 也未知是否真的會用到.
但旅行前我卻得到日記改版的點子. 剛好旅行日記也完成得差不多, 可以開始稍微處理這邊的事.

首先以前我弄出這個超大型header是因為當時的web trend有這種趨勢.
當時用來eye catching的大型header到今天己轉化成用於宣傳的hero area, 但我這是日記沒啥好宣傳的.
另一點是我無法在不scroll的情況下按到往頁底的連結, 感到麻煩. 這和我使用task window時的習慣有關.

基於以上兩點我想到的解是把整個header砍掉, 並把viewport重新分割為左右兩邊.
一邊是分類等資訊另一邊是記事部份. 其實即是把一般的2 column式layout放大到塞滿整個viewport而已.
由於想儘可能minimal化, 大概所有資訊都會收起來. 展開的部份也就靠JQ了.

有了這個layout的大方向接下來可以考慮visual的問題了. 雖說minimal化, 最低限度還是要有張cover image.
基於現時的新記事多數和兩位小姐有關, 或許直接用她們的照片當cover image就好.

話是這麼說, 搞不好弄到一半又突然把所有東西打掉重來. 雖然layout已經在測試...

去年的這個時期說到網站要翻新一下, 事隔一年水面上甚麼動靜都沒有.
水底下則和旅記更新以及irfa換身的事並列進行, 實際進度其實好慢. 但也不是甚麼都沒做過.

去年為了放置旅行的相片我全面恢復flickr頁面的更新. 此後連娃照及普通照也都用flickr來放.
但在這裡就顯生了一個問題 : 娃照都用flickr來公開那不就和個人網站的用途重疊?

確實是這樣. 起初我的取向是把網站內的照再篩選一部份才放上flickr.
後來開始出現一些網站不會放但卻想放上flickr的照, 令事情變得混亂. 再加上日記的照就更亂.

網站的照其實我都嘗試加入關連和序列性, 因此就算有一兩張照拍得不好我還是會硬塞進去.
日記的照也是從相對比較難和其他照串連在一起的眾多照片中挑選出來的.
不過如果要從網站的照再篩選才放到flickr的話, 這個串連性質就減弱甚至失去了.

而且近年我自己也有意無意把這要素淡化. 以前一定有的"一輯相片的標題"現在也都沒了.
如果沒有了這個串連性, 其實也沒有必要特地把幾張相片歸納成一輯用一個固定網頁放置.

結果自去年五月ixra換身後拍的那輯照開始, 我都只放在flickr了. 變相令網站進一步停頓.


首先整理一下.
"Liberi Mei" 這個網站主題是我家兩隻人偶, 裡面有的是我對她們的定義(=設定)和她們的相片.
簡言之是一個很常見的古代個人興趣網站. 這個年頭這種東西已經絕跡了.

如果把相片去掉就只剩下設定的敘述云云. 另外比較不顯眼或次要的還有link區, 網站簡介, 主頁圖等等.
都是些古代個人網站裡面常有的元素. 但我希望的是把這個網站"現代化".


回想起來當時設計網站的v4版面時我有去找尋同類型的網站作參考, 但找不著.
這次再找當然也是沒有結果. 個人興趣網站早在Web2.0時代就沒落, 現在已經絕跡.

當然並不是說"已經不會有人再為自己的興趣製作網頁". 只是現今"架網頁"的形式已經改變.
若有人需要這麼做大可架個blog, 或乾脆使用facebook instagram flickr等的服務.
現在要動手DIY的話大抵目的都在推銷某種東西, 例如個人作品集, 或商品專頁.

實在找不到同類型的網站之下我改從個人作品集網頁裡找inspirations. 也是和上次改版一樣...
但看著看著就覺得現在的網站大抵都同一個格式. 單說首頁的情況:

無非是左上有個logo, 右邊或下一行的置中位置有個main navigation.
然後是一張用掉整個viewport寬度的相片. 而且很多時也會有一段文字overlay在相片上面.
再來下一行就是一些facebook like或地址電話twitter等的資訊. 至此構成一頁.

整體感覺上網站的layout的美觀要素被壓抑至最低限, 網站本身變成一個純粹的資訊載體.
搞不好我在上次改版時已發覺這件事, 這次只是重新體認. 其實以上元素都有設計理論支持就是.

似乎這就是現今的web trend. 但我本來只想現代化而沒想要緊貼潮流.
在這想法驅使下我有點傾向避開這種公式化設計. 但總是找不到一些anti-grid的範例.
同時我的需求大概比較難擺脫這公式. 因為我有主頁圖.


其實現在我根本沒有很具體的設計概念就是...沒有visuals, 也沒有structure.
還是得先定好大概有那些內容會留下再說.

點算一下網站內有的元素, 大概最先會砍掉的就是link區. 本來就不多連結, 加上已經死亡或停止的佔多數.
其次是更新記錄. 這東西只是用來告訴人”網站還有在動啊"的告示板. 然而日記的更新記事就代替這機能了.
比較詳細的例如"哪項內容需要刪改"之類的暫時還沒有個譜. 但是其實我也有想過要把比較古舊的東西去掉.

說到底也就是究竟應否持續在網站內放新相片, 以及舊相片的處理而已.
nox aeterna雙子先後在9年目和10年目換身換頭, 對於她們的存在歷史而言是個milestone.
從這裡引申, 我該怎麼在這個milestone以前那大量而未經整理的過去資訊?

這可能是我徹底執行翻新前有必要得到答案的問題.

更新profile的圖了. 為了遷就照片構圖反而把版面一部份東西切除了.
然後top圖是同一張照. 連處理方法也幾乎一樣...

九年目的拍照之後即是兩姐妹開始接受轉變的時期. 對我而言, 九年目的照算是挺特別的.
感覺近似於milestone之類吧. 或者也沒那麼遠大.

這之後其實還有一或兩套要今年的照會放. 不過先並行處理網站改結構的project...
還有三次元裡要把衣櫃清空放置她們. 不然怎塞得下三或四姐妹...