沒穿方服

索引

顯示╱隱藏內文

本來想把今年寫過的網頁都列出來,不過成果有點糟,所以還是自律了……刪一刪剩下1個,桃園縣的「認識世界遊戲網站」,內容大致就是把教材放上網,讓小朋友多一個地方可逛。

我從企劃開始投入,參考學校教材(有課程和繪本配合)擬網站架構,然後就做 PHP, CSS 等,除了設計、美工和 Flash、小遊戲以外的東西。

由小學老師組成的指導團,提出許多值得學習的建議,後來我們幾乎只是幫忙實現而已 我中意的樣式,不過 ie 有困難,所以做了這個以後就算了

原本是夢想外國小朋友也能使用這個網站,交流含有在地文化的小遊戲(遊戲先由我們供應)之類;不過沒來得及規劃、敘述清楚,就變成「小遊戲」網站了——倒也落得明確。

拙作小圖 - Public Domain
自製不精圖,公眾授權,
可至 DivShare 下載

程式部分有六成以上時間都花在遷就 ie(要是不用管它,收費真的可以打折),像半透明 PNG 的 hack 就跟別的功能衝到,換了幾支現成 script 卻怎麼搭都爆掉,最後認命重寫才解決;悶的是,原因還是沒搞清楚。

還是瀏覽器。網站後來有個展示會,我建議別用 ie,這時校長(案子是由小學教學團隊指導的)便爽快地指示「那個很熱門叫 Firefox 什麼的,到時候所有電腦先灌好它」—— 雖然最後只有當天有換,但領導的英明還是令我印象深刻。

再來好像就沒什麼特別的,歷經幾次修改,就變成現在的樣子,也上線一段時間了。希望別讓使用者委屈憤怒才好,曾看到小朋友留言「我覺好爛」特別逗趣,哈哈哈,(網站)是我寫的啊!

如果對網站有意見,又怕留言在那邊嚇到小朋友,不妨直接告訴我,給點檢討的機會。

雖然有共識世界觀不要偏向英語世界,但還是做了英語句型 同事畫各國小朋友畫得不錯

製作 bookmarklet 有個問題是,怎麼把寫好的 JavaScript 縮成一行?這方面網路上有個 Bookmarklet Builder 看來不錯,像是將「%20」轉成空白這樣的功能也有準備。

而我目前的作法,是拷貝 PSPad 的擴充 script PSPadJSMin 並稍作修改(原本是用來壓縮 JavaScript 的),以後在 PSPad 下就可以「寫 JavaScript → 按熱鍵壓成 bookmarklet → 複製、貼上網址列測試」——也還算方便。

因為只有小改,故不好意思提供下載,僅列改法:

  1. 先去官網PSPadJSMin.zip ……解開放進 PSPad 的 Script/JScript 資料夾。
  2. 直接複製 PSPadJSMin.js 並改名為 PSPadJSMin_bookmarklet.js
  3. 編輯 PSPadJSMin_bookmarklet.js 內容:
    • function JSMin() 改名為 function JSMinBookmarklet()
      其實愛改什麼名字都行,只要前後對應別弄錯即可。
    • function jsmin(input, level) 底部的:
      return ret;
      改為
      return 'javascript:(function(){' + ret.replace(/\n/g,'').replace(/([\s\"])/g, function(s,p){return encodeURI(p);}) + '})();';
      這樣會把 JSMin 壓的東西縮成一行,對空白、引號做個 encodeURI,最後包成 javascript:(function(){高濃縮原始碼})(); 的樣子。
    • function Init() 內部的:
      addMenuItem("JSMin", "", "JSMin", "Ctrl+Shift+J");
      改為
      addMenuItem("bookmarklet", "", "JSMinBookmarklet", "Ctrl+Alt+B");
      這樣會在 PSPad 工具列的 Scripts 選單加上 bookmarklet 項目,並綁上熱鍵。
  4. 執行 PSPad 工具列的 Script → 重新編譯 Scripts
    這邊我是有先重開 PSPad,否則似乎不會成功。

這軟體應該沒人聽過吧…… Dataton(讀作 Data 燙)WATCHOUT 是一套多螢幕投射系統,用在高解析、大畫面的節目有其優勢。很不幸地我對這方面完全沒興趣,也從一開始就認定這是「錯誤」的工作(對我而言),所以每次做心情都很糟,連行走速度都會變慢。

不知道是否有人能幫忙接這種案子,我做的是 WATCHOUT Production 節目編排的部分,就是簡單的剪輯,比較特別的是:

  1. 編修方便,所以會很頻繁地修改、修改、重做。
  2. 軟體功能毫無掩飾地陽春,這方面「編修方便」盡是鬼扯。

如果你在意有效率地工作,你就是被這軟體氣死的高危險群。

我從 WATCHOUT 2.3 開始用到現在 4.0(試用但沒做案子),一直都是用它獨有的特殊方式來增加效率——如果把它 Snap (Ctrl + N)、Click Jumps To Time (Ctrl + T) 的功能包裝一下,光是時間軸上的複製/貼上就能成為一個小遊戲——有趣嗎?每次新版本推出方便功能,我的感覺除了如釋重負,還有很大部分是「果然沒錯,原本的做法果然很爛」,好比做相同步調的淡入淡出,我會複製其他做好的 Tween 點來貼上,雖然掌握要訣之後動作可以變得很快,但我強烈認為這種作法是錯的!即使不以惡小而不為,一個節目做上幾百次也不小了,這不是開玩笑,是確實會發生的人格殘害。

很想請它還我青春 的軟體

廢話了一堆,其實我是從不相關領域跑來代打的,所以有什麼怨言也可視為外行人的可笑話。倒是有興趣做這個的大俠,不妨瞭解一下 WATCHOUT,編輯部分沒有什麼進入成本(實際播放的硬體授權才要錢),去官網抓一下就可以裝在 Windows 用了。

這裡有一份空白專案檔案(wo_empty_public.7z - DivShare),不過因為版權問題,裡面的多媒體素材(真正有用的東西)都拿掉了;因為沒素材,我預先編好的特效(還算實用)便無法重現,所以也拿掉了……真慷慨,那還剩啥?裡面有業界最前線的 WATCHOUT Media 資料夾結構(沒意義,但可以看看我們的整理方式)供您參考,還有用 Photoshop 批次產生字幕圖用的檔案(比一張一張做快太多啦)在 WIP 資料夾內。

這工作應該有自由工作者能做吧,我真的不想再做了,誰要願意救我,我可以把從地獄帶回來的 know-how 統統送你,全力護送您去受苦。

以下是 blogger 文章編輯器「上傳一張圖片」自動產生的原始碼:

夾雜許多用途不明的東西,而且 bp.blogspot.com 這樣的鏈結會讓某些 lightbox 特效掛掉。 (2009-05-19: 後來發現 lightbox 掛掉其實是鏈結中「-h」禁止外連造成的。
所以我做了一支 bookmarklet 把它清理成下面的格式:

將 bookmarklet 加進書籤 → 清理 blogger 插入的圖片標籤
在文章編輯器的「修改 Html」模式點了就立刻執行,不會多問,所以請自己保重(文章弄壞、Ctrl + Z 又沒用的話,我也沒辦法負責啊。)

原始碼拆解如下:

javascript:
document.getElementById('textarea').value = document.getElementById('textarea').value.replace(
  /<a onblur=\".+\" href=\"(.+)\"><img style=\".+\" src=\"http:\/\/(\d)+\.bp\.blogspot\.com\/(.+)" border=\"0\" alt=\"\"id=\".+\" \/><\/a>/g,
  function(str, p1, p2, p3) {
    return &apos;<a href="http://lh&apos; + (parseInt(p2)+2) + &apos;.ggpht.com\/&apos; + p3.replace(/s(\d)+(-h)?\//,&apos;&apos;) + &apos;"><img src="http://lh&apos; + (parseInt(p2)+2) + &apos;.ggpht.com\/&apos; + p3 + &apos;" alt="" /></a>\n&apos;;
  }
);void 1

Page Info Forms and Links鏈結表單分頁沒有圖示的時候(例如,預設的佈景主題就沒有)會以媒體的圖示代替……我想趁此機會多少發洩對媒體的怨氣,於是用 userChrome.css 把它改了。

完成圖

先說明開發者的想法是使用佈景主題既有的圖示,以免出現風格不搭的情形;所以若要自行修改,換佈景的時候也請自行留意。

原套件的相關設定在 chrome://pifal/skin/overlay.windows.css,貼在這裡供參考:
(取自 0.7 版本原始碼,應該是 Windows 用的樣式)

#formsTab,#linksTab{-moz-image-region:rect(0px 64px 32px 32px)!important;}

而這篇做的 userChrome.css 修改如下,圖示是從 Link And Forminfo 套件取出的,印象中是公眾授權的圖片。

#formsTab,#linksTab{-moz-image-region:rect(0, 0, 0, 0) !important;}
#formsTab{list-style-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADcUlEQVRYhe2Wz29UVRTHP/e+ee/Nz85MbZ0RptgGKWmtKSFgBV0gIm2EsNFYISYaQiS4AVw0rkSbuNCVujDRxMR/woWJihqQaOJCjAu6EJOaWlJJq1UUmHuui2nfzJt50742giZ6ksncOffc8/3cc++Z9+AfNrXOdd1AcWl8Bfjl78GJZ3mgn9HKexwfsBwfsOzsPrneZM46xEuM3Dle2bPhhVNHfLJbepjRztjNP6oLzFz78lYC1MXHeiaPHtJM/VZiQRTbhx7AuO7Yz4sLa4aICxAp/qvArCiuGs34zoPM2vk1Q8QFuJtd5XF2lydPPJ7gm8XazmdF8WMV+pI99KVL3DcwxNmr346h+Inp37+Okzh+F7xyv10e3rO7xDWBeQHHejy/cT/7SzvY986JevyZr2LlTsQGqCXs542HLn1/AwQFFp4tjZBz07WYvAenzq2ptZcB+mOvKHiIKAZSJR7tGqbby4fmYuaaagbgwHMvXYqj/0HyAhObDtR33WhJJ36edydVCADgzYln0NrBcTRKQdQV2fTFhWjxJXvt5FMtvkI+j+PU7/uxM28H4xCAUopKZSNaK7TWbUV2dQ62nburXA47lML3/eBnOpUMTUdeQqVWvkf7Pn1xxflGW2kjbQGstW0h5MkPERGMEUQMVWMQI1SNAWtb4htLHwnYLGyXktiIZPWY5m8bKa60XrUCwWwy4QAWawURG4JpBhQRrK19iIhbNtd1I/01rZoFR1BIeUiDAGi0bq1ErfSyFFergkQAuK7b9hgLKa8VoCPlIcZiRHA0TE/PoJQK2tFig91aK4i1iLGImBaApO+TyWRCvlxHB41aLQDZtI9YQYzBWsvm1x+LpF/NHu7dzt6tIy3+06PHgnE2XW/LACCX8sCCEYuDgOsgb11cVfDpc4d4oucwn8+d5ZHSKD/8ucierm2cn7/Mg8U+zs9fZu67mdCaXEMFgkuYSfsUi3m0VlSNQG+euJZN5BjKb6M3u5msG7Gu4IV+ZqIqkE17gMJxEmhtObxjbyzxiXtfppQssyHTyx1+J4M2QVeyk+GCS1eyyHDB5aPF8DtrTasJwGnoV6UUg4U+Xr34fuCbu77AdXOTSro7AmOVo2pqhkattu8Dp7e0PlRuha38N/VfAGg5gubH5e0CmAL4+JPPbqv4//avsL8AFM5Ar51T9ksAAAAASUVORK5CYII=') !important;}
#linksTab{list-style-image:url('data:image/png;base64,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') !important;}