沒穿方服

封存

顯示╱隱藏內文

除了 Mozilla Taiwan 討論區: 如何刪除在 about:config 所建立的資料 提到的方法外,以 bookmarklet 協助刪除也是個選擇。

將 bookmarklet 加進書籤 → about:config 刪除偏好項目

使用步驟:

  1. 備份 pref.js(保險起見。刪除跟重設不同,砍掉就真的沒救了!)
  2. 由網址列進入 about:config(在一般網頁不可執行)
  3. 執行 bookmarklet,會詢問要刪除的分支(分支指的是 nsIPrefBranch),可以輸入:

    輸入要刪除的分支

    • 整個分支

      例如輸入 browser.startup 會刪除 browser.startup.homepage 等項目。可以將點(.)也輸入而變成 browser.startup.,效果一樣。
      註:與 about:config 的篩選條件不同,輸入 browse 或 browser.startup.h 皆無法找到前述項目。

    • 單一項目

      例如輸入 browser.startup.homepage 就會刪掉 browser.startup.homepage 這個項目。

  4. 出現確認畫面。若項目很多(超過 50 個)會再確認一遍。

    確認要刪除的項目

  5. 出現「已執行」訊息。不過我沒有真的檢查是否已刪除,需要重新載入才知道成功與否。

    已執行


原始碼拆解:

javascript:
var v = "", b = null;
try {
  b = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService);
}
catch(e) {
  alert("錯誤:無法取得 Firefox 服務。");
}
if(b) {
  while( v == "" ) {
    v = prompt("請輸入要刪除的擴充套件分支:\n(例如「megaupload.toolbar.」)","");
  }
  if( v != null ) {
    var str = "" ;
    var dot = (v.substr(-1)==".");
    var count = 0;
    b = b.getBranch(v);
    b.getChildList("",{}).forEach(function(i) {
      if( dot || i[0]=="." || i=="" ) {
        str += ( "\t" + v + i + "\n" );
        count++;
      }
    });
    if(count==0) {alert("沒有符合的項目。");}
    else if( confirm(count+" 個項目將被刪除:\n" + str + "\n") ) {
      if( count<=50 || confirm("(項目超過 50 個)確定要刪除嗎?") ) {
        b.deleteBranch("");
        alert("已執行。");
      }
    }
  }
}
void 1

Mp3tag 是個優秀的 MP3 tag 軟體(雖然 foobar2000 也很夠用了),它的匯出 (export) 功能可以把資料輸出為文字檔、網頁等各種格式。我也照著說明寫了個網頁格式的轉換設定:

說明:

  • 按照資料夾(folderpath)分類、排序。這點在匯出時已固定,無法更改。 
  • 若音軌有註解(comment)標籤,會在標題右邊劃線,且滑鼠移上去會顯示小提示。
  • 表格內容、表格標頭(th)可以隱藏/顯示。
  • 沒有標題(title)的音軌,會以斜體字顯示檔名代替。
  • 若把匯出的網頁跟 sorttable.js 放在同一資料夾,就可以點選表格標頭(th)排序。
  • 資料稍多(大約幾 GB 音樂)時,匯出網頁可能會龐大到把瀏覽器凍住……
  • 如果音樂 tag 不是 utf-8 編碼,就顯示亂碼給妳看。
  • html_leq_folder_index 在 ie6 上不好看。

擷圖:(已為完整尺寸)

html_leq_folder 擷圖 html_leq_folder_index 擷圖

※設定檔(.mte)使用方式可參考官方論壇,專收匯出設定檔的討論串 Export Configuration Archive - Mp3tag Forums

SyntaxHighlighter(目前版本 1.5.1)在幫 pre 標籤變色時,需要 name="code" 這樣的標記才能生效,很不幸 pre 的 name 屬性不在 XHTML 1.0 規範內;所以如果你很喜歡 valid 的貼紙,還是參考 kev.in » Using dp.SyntaxHighlighter with Valid XHTML 自行改造 shCore.js 吧,改三行程式即可。

先確認改完後的用法:假設以 dp.SyntaxHighlighter.HighlightAll('code'); 啟動 SyntaxHighlighter,則網頁的 HTML 可以是 <pre class="code html">,或如原文所述用 <code> 標籤的進階語法。至於舊的 <pre name="code" class="html"> 寫法不必全面更新沒關係,仍然可以相容(當然仍不符標準)。


詳細步驟原文寫得很清楚,這邊只提出最後 regex 的部分:

options = options.replace(new RegExp("\\s*"+ name +"\\s*"),'');

原文中 RegExp("^"+name+"\\s") 僅符合 class="code html" 其中 code 出現在開頭的情形;改為以上 pattern 的話則會符合 class="html code  ",應該有稍微通用一點才是。

註:我自己是用 <pre class="javascript sh-code"> 這種型式。

Valid XHTML 1.0 Strict

唉~沒有相機,只能貼擷圖

Blogger in Draft 的新裝備 Embedded Comment Form(中文版很擰巴地譯為已內嵌下列文章)隱藏了「以電子郵件傳送後續意見」和「預覽」等舊功能,恐有干擾使用習慣之慮。

在 blogger 變更規格前,暫且自行插入「彈出留言視窗」鏈結吧,如圖中傘形符號,點下去就會另開視窗。

以下具體說明,需要表單已內嵌才適用:(別忘了備份模版以防萬一)

手動插入「彈出留言視窗」鏈結

在模版中找到 <b:includable id='comment-form' var='post'> ……(中略) </b:includable> 一段,裡面會有 <h3><data:postCommentMsg/></h3>,該 h3 就是內嵌表單上方的「張貼意見」幾個字。接著插一行鏈結的原始碼進去,變成:

<h3>
  <data:postCommentMsg/>
  <a class="comment-link" title="彈出留言視窗" expr:href='&quot;http://www.blogger.com/comment.g?blogID=把我改掉&amp;amp;postID=&amp;quot; + data:post.id + &quot;&amp;amp;isPopup=true&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,resizable=yes,width=400,height=740&quot;); return false;'>彈出視窗</a>
</h3>

其中 blogID(把我改掉)要改成自己的 blog 號碼,有疑問請參考官方說明 我的 Blog ID 號碼是多少?
其餘文字和 width 什麼的參數比較不重要,可以視需要修改。

至此就完成了…… 其實「內嵌」與「彈出視窗」應該可以共存才對,沿用彈出視窗的模板 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>彈出視窗</a> 也比較單純,不過目前這樣寫 data 都沒東西,似乎跟「表單已內嵌」相衝的樣子。

Lightbox 2 三月放了新版本 v2.04,算是令人振奮的消息,因為上個版本我看不懂他的原始碼(這算啥理由,況且現在也沒看懂),想不到這改版一等就是 10 個月。

升級過程中我也驚覺之前 以 JavaScript 啟動 Lightbox 2 文章問題挺大的……順便修理一下。

v2.04 Changelog

  • NEW - Prototype 版本由 v1.4 升級至 v1.6.0.2。
  • NEW - 新增 labelImagelabelOf 設定項目,用來改「Image 1 of 4」部分的文字。
  • UPDATE - 程式碼大幅改寫。考慮全域命名空間和原生的 javascript 物件。(反正有變聰明就對了)
  • FIXED - 展示有 caption(說明文字)的圖片後,再展示無 caption 的圖片,caption 會顯示 "null" 而非沿用之前的文字。
  • FIXED - 按下 close 按鈕後位置不會因 focus 的框線而跑掉。

再補幾個:

  • 檔案大小由 24 KB 減至 19 KB。
  • 現在不會建立 myLightbox 這個物件了,之前有靠這個亂改的也會出狀況。
  • 不只滑鼠左鍵,連中鍵、右鍵都會啟動 Lightbox。

使用上跟舊版相容,若之前就按官網的 How to Use 安裝,直接升級也不會有問題。


接下來負責的作者要修正之前寫的 以 JavaScript 啟動 Lightbox 2 (更新版) 系列文章。

以 JavaScript 啟動 Lightbox 2(又改版)

先貼上發表文章用的 HTML

<a href="http://原圖.png">  
  <img src="http://縮圖.png" alt="替代文字" />  
</a>

之前最大問題是可能在 a 裡面又 insert 一個 a 元素,現在把整段 script 改成:(使用 Lightbox 2.04Prototype 1.6.0.2

$$('.postcontent img').each( function(i) {
  var fullSrc = i.src;              // 原圖的位址(預設跟縮圖位址相同)
  if( i.up('a') && i.up('a').href ) // img 外層有 a 的話,其 href 值可能就是原圖位址
  {
    var srcExt = i.up('a').href.split('.').pop().toLowerCase();
    if( srcExt == 'png' || srcExt == 'jpg' || srcExt == 'gif' || srcExt == 'bmp' )
    { fullSrc = i.up('a').href; }
  }
  if( i.up('a') ) {  // 把 Lightbox 需要的屬性/值寫到 a 上
    i.up('a').writeAttribute( { rel: 'lightbox[post]', href: fullSrc, title: i.alt } );
  }
  else {             // 外層沒有 a 就做一個包上去
    i.wrap('a', { rel: 'lightbox[post]', href: fullSrc, title: i.alt });
  }
});
Lightbox.prototype.updateImageList();   // updateImageList 會再次解析圖片,然後把 Lightbox 的功能綁上去

然後我還動了 lightbox.js 幾根寒毛:

  1. 只讓左鍵啟動 Lightbox
    updateImageList: function() {   
      this.updateImageList = Prototype.emptyFunction;
    
      document.observe('click', (function(event){
        if( !Event.isLeftClick(event) ) {return;} // 插入這一行
        var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
        if (target) {
          event.stop();
          this.start(target);
          }
      }).bind(this));
    },
  2. 把 Lightbox 內 next, prev, close 鏈結的 href='#' 全拿掉

    因為覺得 url# 出現在狀態列很礙眼,所以在原始碼的 initialize 部分把 Builder.node('a',{id:'nextLink', '#'}) 這類鏈結的 , '#' 統統刪除。
    不過滑鼠移上去的游標變成箭頭了,所以又去 lightbox.css 加上一行 #lightbox a {cursor:pointer;}


測試一下連 Picasa 的圖效果如何

第一張是自己從 Picasa 複製圖片網址,第二張是在 blogger 上傳圖片時自動插入的網址。參考原始碼:

<img alt="複製圖片網址 於 Picasa" src="http://lh3.ggpht.com/bootleq/R2aEsSUz5LI/AAAAAAAAAKE/RPzxhtdHhxE/lightbox2_exh1.jpg" width="200" />
 
<a href="http://3.bp.blogspot.com/_z34accOoRZI/SHXJVw28caI/AAAAAAAAAVY/gjsqI3_21mI/s1600-h/sansao.png">
  <img id="BLOGGER_PHOTO_ID_5221300718735749538" alt="山臊行樂圖 - 圖片網址由 blogger 產生" src="http://3.bp.blogspot.com/_z34accOoRZI/SHXJVw28caI/AAAAAAAAAVY/gjsqI3_21mI/s320/sansao.png" />
</a>

複製圖片網址 於 Picasa

山臊行樂圖 - 圖片網址由 blogger 產生

好樣的,blogger 插的還是不行。換網址重貼。

山臊行樂圖

(Ctrl+F) 阿 Sir,那就是導盲磚,我來為您講解……

導盲磚以文字「:::」顯現 咱們行政院研考會推行的無障礙網站規範,所有檢測等級都必須做到「定位點」(又名導盲磚)設計,不同於 <a href="#fragment-identifier" accesskey="F"> 這種常見的導覽鏈結,而是特化為「:::」文字的導盲磚功能,可說是台灣網站獨步全球的特產。初次接觸應當仔細審視一番,以冀日後製作時有個分寸。

先看看官方解說什麼是定位點(原名導盲磚)?

所謂定位點(原名導盲磚),其顯示方式是利用三個冒號(:::)來代表,且需要搭配快速鍵設計來使用。主要用途在於幫助使用者快速定位及搜尋。主要優點有以下:

  1. 快速跳躍至網頁不同區塊,可避免使用者迷失在網頁中。
  2. 方便使用者在各框架頁 (frame) 間快速移動。
  3. 可導引使用者依自己需要,跳至所需的區塊中。

定位點的設計程式碼如下:

<a accesskey="L" href="intro.jsp" title="左側區域"> ::: </a>
<a accesskey="C" href="intro.jsp" title="中間區域"> ::: </a>
<a accesskey="R" href="intro.jsp" title="右側區域"> ::: </a>

title 屬性文字方便語音合成器告知使用者,是在網頁中的哪一個區塊。
每一個瀏覽器都有搜尋的功能,可以讓使用者搜尋所需資訊的地方。在 HTML 4.0 中 accesskey 的功能可以搭配 ALT 鍵使用,跳到所需的區塊。
請將網頁定位點 (:::) 搭配快速鍵的使用說明,描述於網站導覽或明顯處供使用者瞭解,請不要隱藏於 ::: 的連結處,以提供各種使用者使用。

所以最基本的認識,就是照抄上面的程式碼,放在網頁各區域的前面。例如 Google 台灣 可能會變成:

相信 Google 不會做此等在地化

先別急著美化(免得改壞),目前網頁應已接近無障礙服務網所重視的幾項要求:

  1. 定位點必須是「找得到」的

    官方堅持使用者以 Ctrl + F 尋找功能搜尋「:::」字串時,必須能「發現」定位點。
    ……在此戲稱「導盲磚必須看得見」原則。參考官方留言板,以下作法會被退件:

    1. display:none 隱藏定位點(相當於由顯示中移除,可能導致沒有定位點)
    2. 把 ::: 幾個字改為圖片(Ctrl + F 找不到)
    3. 把 ::: 字體設為極端小(Ctrl + F 找得到,但是不容易看到,也是不行)

    再者,倒是允許把 ::: 文字顏色設為跟背景色相同,無障礙服務網亦如此設計。

  2. 定位點數量不宜過多

    要設計幾個「:::」端視頁面內容而定。例如若網頁沒有選單/內容區的分別,就不必硬加上定位點。

    過多的導盲磚反而造成使用者混淆

  3. 定位點應搭配 accesskey 和 title 屬性使用

  4. 快速鍵(accesskey)不應與瀏覽器的快速鍵設定相同

    不清楚照範例用 L, C, R 是否就萬事 OK,在常見問題 - 定位點(::: )搭配快速鍵常見問題與解決方案 裡列出了常見的熱鍵,優先避開它們應該就差不多了。

  5. 若有標題元素,定位點應置於標題元素之前

    這裡強調定位點在文件中的位置,應置於該區域的完整內容之前。前例中沒有標題元素(h1, h2, ...),有的話應作如下安排:

    :::
    <h5>示範選單</h5>
    • <li>列表項目</li>
    • <li>列表項目</li>
    :::
    <h5>示範段落</h5>

    <p>內文</p>


    而不是:

    <h5>示範選單</h5>
    <h5>示範段落</h5>
    :::

    <p>內文</p>


    如此在跳至定位點後,循序瀏覽才不會錯過標題。

  6. 展示「定位點 + 快速鍵」的使用說明

    快速鍵的說明一定要提供,並且跟網站導覽(sitemap)擺在一起。形式可參考研考會的網站導覽

  7. 定位點的 href 屬性值應為鏈結錨點,而非連結至其他文件

    定位點的 href 屬性要使用含 # 的頁內鏈結(例如 href="#section_2")以避免按了快速鍵後瀏覽器跟著鏈結出去。參考官方解說定位點(:::)設定連結時,Firefox與IE瀏覽器瀏覽時的差異

    若於定位點 (:::) 上設定超連結時,於不同瀏覽器"解析"定位點 (:::) 的超連結語法時,將呈現以下的差異:

    1. Firefox 瀏覽器,解析定位點內含的超連結語法時,將直接執行內含的超連結,而自動轉至超連結指向的頁面,使定位點失去最重要的「定位」功效。
    2. IE 瀏覽器,解析定位點內含的超連結語法時,瀏覽器不會自動執行該超連結,會正常定位在定位點 (:::) 上,而定位點內含指向的超連結頁面,須透過「ENTER」鍵才會觸發。

    故,設計定位點 (:::) 搭配快速鍵時,考量各瀏覽器不同的語法解析,請勿於定位點上設定超連結,並將『快速鍵定義說明』統一載明於「網站導覽」頁內容區上方。

    這點和 <a accesskey="L" href="intro.jsp" title="左側區域"> ::: </a> 形成矛盾…… 看來是發現 Firefox 處理 accesskey 的行為後,為了顧全不同瀏覽器而忍痛自打嘴巴,所以語氣才會有點悻悻然吧。

    其實一般的瀏覽器都會跟著鏈結出去……


其實以上規定,最大特徵不外乎用 Ctrl + F 尋找 ::: 文字的行為,把握這點、合理設計你的網頁應該就能過關了。

但是為什麼要通過檢測?

當然無奈的理由居多,但是此規範是否合理?所謂君子詐善,無異小人之肆惡,負責任的設計者請不能懶得思考,好歹也要看看文章、看看討論才是,這裡引用一位積極貢獻者不惑仔中肯留言

定位點應算是本國自創的方法,其提出的作法個人也不太認同,因為這種方式親和力不夠,對沒有學習過定位點操作的盲人(甚至非盲人),沒什麼太大作用(根本不知道什麼是::),必須是經過強迫訓練的盲生才比較有幫助,而這些人應只佔少數之少數吧。

不過定位點的概念是值得認同的,因為可以讓非滑鼠操作者,在一個複雜內容的頁面,以快速鍵快速轉至想要閱讀的區域,其實可以想像成電話語音服務一樣,按1. 做什麼... 2.做什麼... 3. 做什麼...等等,就像我先前提的,如果有一天,上網是用聽和說的時候,這樣的概念就很重要了。因此,個人認為較好的作法,應該是直接在每一頁做成有指示的連結列跳至指定的區域,如,本文(C)|主目錄(M)|分類子目錄(N)|細項目錄(L)...這樣就不需要特別的學習就可以使用了,而且每一頁也可以有不同的連結。其實,對盲人來說,文件內容只有前後(上下),並沒有所謂的左邊欄、右邊欄、或中間區,硬是要分那邊實在不符實際,而且快速鍵連結本來就直接可以跳至 id 位置,不需要另外製作一個無意義的::,這根本是對語意誤解的作法。

參考 http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey 節錄如下

”...when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.”

真高興終於有人提出這問題了,是沒有必要一定要按照研考會提出的方式製作,用我提出的要比他們的::,更有意義多了,而且更具親和力。

~不惑仔

其建議「本文 (C)|主目錄 (M)」形式就是個很實在的通用設計,再回頭看「:::」便顯得短視不可靠,舉個例子,在談論 ::: 的文章內按Ctrl + F 搜尋 :::,不是會找到一堆非定位點的東西嗎?

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

更令人不安者,政府的「無障礙」顯然輕忽 W3C 提供的網頁標準。包括研考會無障礙網路空間服務網在內,送到 W3C Markup Validator 檢驗都無法過關,誤解 HTML 語意的情形也屢受批評。而這諸多障礙,在無障礙網路空間服務網的官僚作風下(參考留言板與網路討論),後續發展教人難以期待。


到此心理有底,就別抱怨,標章照貼,寫法看個人良心吧。

以下是我偏好的定位點原始碼,主要在 href 屬性上說事:

<a accesskey="C" href="#start-content" title="主要內容區" id="start-content">:::</a>

沒有規定 a 元素一定要有 href 屬性,但一般瀏覽器對缺少 href 的 a 元素之 accesskey 沒有反應;所以給 a href="#fragment-identifier 並搭配相應的 id(或 name)以做定位。

另外研考會和無障礙服務網使用的 a href="#" 是個很普遍、但不在 W3C 文件中的寫法;一個不指向外部資源或頁內錨點的 a 元素應該是無理、錯誤的。所以瀏覽器對 # 的處理可能出乎設計者的意料(例:重讀頁面、捲至頁首)而喪失定位點的功能,與其等出狀況再滅火,不如現在就停用該寫法,一次做對才是。

綠色編號 擷圖

目前 CSS3 裡面還沒把 ::marker 擬類別制定清楚,我們也沒有簡單規則可以指定它的樣式(如圖中綠色的部分)。

委屈一點,通常的作法是在 CSS 中:

li {color:green;}  /* 把整個 li 變成綠色 */
li * {color:blue;}  /* 再把 li 裡的元素變回原色(假設為藍色) */

然後回到 HTML,用 p, div, span 或其他標籤把 li 內容沒包的包起來,否則不符 li * 選擇規則的內容會變不回藍色。


方法已經說完了,補充一下剛講的有包沒包是啥意思:

<ol>
  <li>第一項</li>      <!-- li 之下直接出現內容,這叫做沒包的 -->
  <li><span>第</span><i>二項</i></li> <!-- 這行就不必改了 -->
</ol>

要改為:

<ol>
  <li><span>第一項</span><li>   <!-- 被 span 包起來 -->
  <li><span>第</span><i>二項</i></li>
</ol>
凜凜威風三寶圖
  • 適用環境:Microsoft Windows
  • 使用授權:Public Domain
  • 檔案大小:3.22 KB (7z)
  • 內容:圖示檔 (ico) 三個,加速 MVC 模式之軟體開發循環。
  • 下載:http://www.divshare.com/download/4845557-71b (DivShare)

使用前:傳統的檔案總管

使用前 - 傳統的檔案總管

使用後:視覺化、機能性、具時尚感的檔案總管

使用後 - 視覺化、機能性、具時尚感的檔案總管

視窗切換功能也變得更加親切、聰明、一目瞭然。

更人性化的視窗切換

使用方法提示

Windows 資料夾上按右鍵 → 內容 → 自訂 → 變更圖示 → 瀏覽至本產品 → 確定。