訂閱

上次更新

December 19, 2014 08:00 PM

所有時間皆為協調世界時(UTC)。

Powered By

Planet

摩茲星球 | MozTW Planet

這邊是工作人員碎碎念的地方,您可獲得最新出爐的資訊以及最不成形的想法 :P

December 04, 2014

Othree

關於 TypeScript

type-error

這幾年各種 compile to JavaScript language 盛行,大部分都是朝向讓程式碼更好寫的方向來前進,微軟在 2012 年也推出了 TypeScript 這個 compile to JavaScript language,不過他的方向卻不一樣,TypeScript 是一個 JavaScript 的 superset,意思就是所有的 JavaScript 都是合法的 TypeScript,而 TypeScript 多了一些語法,加入了一些新功能,不過這些新的語法完全都不用也是可以正常的寫程式,給 TypeScript compiler 編譯。

TypeScript 顧名思義,它著重的在資料型別這個部分,JavaScript 是 weak type (弱型別)的語言,寫起來算是很方便,不過這個特性卻也是一些問題的來源,首先最常見到的是因為資料型態不嚴謹而造成的 bug,第二個常被提出來的就是為了實做 weak type 而造成的 performance 下降,因此一直有一些聲音在對抗弱型別這個特性,第一個是 Douglas Crockford 先出聲的,不過一開始是從程式碼的嚴謹和可靠性來說的,因為他當時主力在 JSLint 上,所以對於可靠的程式碼的要求比較高,JSLint 一度還把這項檢查放入,後來接著 Google V8 引擎也對沒有改變型別的變數作了最佳化,然後有 TypeScript,接著未來的 ES7 也可能會加入型別宣告的語法進來,這部分似乎是 Douglas 參與推動的,然後 Google 也打算推出 AtScript 的樣子,AtScript 是 TypeScript 的 superset,更進一步增加了型別相關的特性進來。

TypeScript 是一個介於中間的語言,當然為了支援 JavaScript 不能直接把整個環境都改成強型別的,所以 TypeScript 的作法是讓形別的宣告變為可省略的,如果沒有宣告型別,則一切和以前一樣,如果你的變數有宣告型別,那個變數才會是強型別,在編譯的時候,如果把不同型別的值給它,就會跑出警告訊息,像是 JSLint 一樣。TypeScript 的型別宣告語法中,一些比較簡單的可以和程式碼一起寫:

var str:string;

可是稍微複雜一點,和物件有關係的話,就要獨立寫一段宣告的程式碼了:

interface HotkeysProvider {
    template: string;
    includeCheatSheet: boolean;
    get(combo: string): ng.hotkeys.Hotkey;
    toggleCheatSheet(): void;
}

這段宣告其實是完全獨立於程式碼的邏輯本身,全部砍掉程式也可以運作,本身不牽涉到任何邏輯,所以可以完全獨立出去,在 TypeScript 中稱為 type definition(型別定義) ,常用的副檔名是 .d.ts,感覺上很像是 C 語言的 header file,其實我對於 TypeScript 本身的發展是不太樂觀的,覺得他的佔有率永遠不會起來,但是它的型別定義這塊我到覺得是大有可為,主因是目前沒有比較在業界有使用的到型別定義的語言,寫標準所用的 WebIDL 普極度實在很低,相關的工具開發和支援實在很少,反而 .d.ts 檔知道的人比較多,編譯器也都有了,而且多虧 TypeScript 有開放原碼,事實上也有其它專案有借助 TypeScript 定義檔,像是我在用的 TernJS 這個 JavaScript 自動補完工具,就有提供一個 from_ts 工具 可以把 .d.ts 檔轉成它可以讀的定義檔案,加上有 DefinitelyType 專案,各種不同 JavaScript Library 的定義檔都已經有了,所以 TernJS 就可以利用這些資源,提供各種 Library 的自動補完支援了,不過前提是使用者要知道有這些東西,官方文件其實沒有把這塊講得這麼連貫。

除了 TernJS 的應用外,我相信這些定義檔還可以讓編輯器或是 IDE 可以提供更多的輔助功能,像是或許可以拿來產生編輯器用的 syntax 定義檔,在編寫程式時直接提出警告等等,其實現在想的到的這些功能微軟的 Visuall Studio 應該都有了,不過有個公定格式做中介還是比較方便第三方應用,雖然目前好像只有看到 TernJS 的第三方應用,有些可惜,而且微軟的 Compiler 常常偷改,TernJS 提供的 from_ts 是需要使用到一些 compiler 內部的 function 才能用的,而從我接觸 TernJS 以來,微軟至少已經改過兩次改很大造成 from_ts完全不能用的情形。

總之微軟的 TypeScript 我覺得使用人數也不會有什麼大變化,但是定義檔 .d.ts 的部分倒是比較可以期待,變成半個 JS 用的標準介面定義文件格式,競爭對手的話應該是 WebIDL 吧,不過 WebIDL 比較不親切,也不太有人去實做和推廣他的應用,ES7 的型別暗示其實是只是針對那五個基本型別為主,沒有像 WebIDL 和 TypeScript 那樣完整。

December 04, 2014 03:06 PM

November 25, 2014

Othree

前端工程師都應該知道的 fetch

之前介紹 ES6 Promise 的時候就有提到一些過去的標準應該也可以更新到來支援 Promise,沒想到就看到 WHATWG 的 fetch 了,fetch 就是個 XMLHttpRequest(XHR)的 替代品,幾乎是集了這幾年前端領域 Pattern 之大成。

首先是命名很簡單,和 XHR 完全不一樣,那個時期的網路標準的命名都很繁雜,尤其像是 XML Schema 的那個時期,聽說是找了些語言學家來一起制訂的,那個時期的東西很多都名稱弄的很冗長,當然不可否認這樣有個好處是比較容易理解東西的源由,像 XHR 看名字就可以知道其實主要目的是為了抓 XML,而那個時期會想要抓 XML 大概就是為了 SOAP 協定的 Web Service 吧,只是真的用來抓 XML 的已經很少了,一直用這個名稱早就已經覺得很奇怪了,至於新的 fetch 顧名思義就是為了抓東西用的,反而和現在 XHR 使用的情境很符合,而且命名很簡單,好記,就像是 jQuery 的 on 取代了 addEventListener 一樣。(PS: 另外有一個叫 sendBeacon 的是只管送出,不管回來的東西的。)

第二個特點是使用了 Options Object,不過 XHR 倒也不是收很多參數,他的設計是先產生物件後才對它操作:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'test.html');
xhr.setRequestHeader('Tester-Name', 'mike');
xhr.setRequestHeader('Tester-Name ', 'peter');
xhr.send();

雖然沒有搞不清楚參數順序的問題,卻也是多了很多步驟才能達成目標,不過其實產生了 XHR 物件但是卻不送出 request 的使用情境我實在想不太到,大概是因此,新的 fetch 才改成像是 jQuery 的 $.ajax 那樣,產生物件時直接就發出 request 了吧。

第三個特點當然就是回傳的是 ES6 Promise 物件,另外也支援 FormData 等等新東西,不過要說能不能完全取代 XHR 呢?目前看起來是不行的,最主要是因為 ES6 Promise 並沒有支援 progress 的機制,而且已經不是 event-based 的物件了,所以沒辦法抓上傳進度之類的資訊。

因為這個 spec 還很新,目前是沒瀏覽器支援,不過 Github 有提供一個 polyfill 了,把基本的功能都做好了(還有缺一些比較少用到的細節),有興趣想開始用的人可以從這邊開始,大概要注意的有兩個,第一個是因為它是用 ES6 Promise,所以還要引入 ES6 Promise polyfill,第二個是回傳資料的處理,雖然 fetch 在發 request 的時候和 jQuery 的設計很像,不過回傳的資料處理方式就差距比較大了。

jQuery 的 ajax 收到 Response Body 時,會自動根據 Header 的 Content-Type 來處理,像是 JSON 會自動用 JSON.parse 把文字轉成 JS 物件,不過 fetch 不會,根據 spec 所說, fetch 算是一個底層的 library,所以這種事情就要自己來了:

fetch("https://pk.example/berlin-calling.json", {mode:"cors"})
  .then(res => {
  if(res.headers.get("content-type") == "application/json") {
    return res.json()
  } else {
    throw new TypeError()
  }
}).then(processJSON)

fetch 需要你自己在程式碼裡面判斷回傳資料的格式是什麼,然後可以用它提供的 method 擷取到相對應格式的資料,像是這個例子中抓的是 JSON 格式的資料,就直接執行 Response 物件的 json 這個 method,當然你也可以不判斷就直接執行 json(),只是無法 parse 時會直接 throw error 出來,又因為在 Promise 串接過程中,後面就會跑到 reject 的 callback function 那邊去,除了 json 外,其他支援的還有 arrayBufferblobformDatatext。這些從 response 物件中讀取 body 資料出來的動作(spec 中稱為 consume)只能操作一次,如果真的很想讀很多次,建議是直接把回傳資料的那個 Promise 儲存起來,還有一個方法是用 clone 複製 Response 物件,不確定那個方法好就是了,這部分這樣設計的原因似乎是為了處理少一點事情,讓效能比較好。

而除了 Response Body 外,其它的回傳資訊像是 Response Header 等,都有新定義的物件來儲存,不過沒有很複雜,設計的很直覺,和送出去的 Options Object 很接近。不過講到 Header 就有一點還是要說一下,其實 HTTP Header 是可以重複送出一樣的 key 的,先不管合不合規範,現實是 HTTP Protocol 的實作都還可以處理這種狀況,以前的 XHR 也可以做出這樣的行為,印象中也有 framework 會這樣用,不過不太確定,總之 fetch 因為 Header 是給 Options Object 中的一個物件,而物件的 key 不能重複,所以不會允許這種行為出現,我個人是覺得這樣其實也比較好啦。

目前這個標準還未廣為人知,但是我是覺得前景非常看好,Spec 寫的也異常詳細,雖然不能把 XHR 的所有功能都取代,不過大部分的 XHR 應用都可以用的上了,也有 Github 提供的 polyfill,應該很容易吸引人進去使用,加上也沒其它的類似候選標準,除了沒有 progress 和回來的資料格式要自己判斷外,應該是沒什麼缺點了,而且判斷資料格式的部分也是可以自己寫點程式碼把他處理掉,所以嚴格一點說的話,問題就剩下沒有 progress 可以看這點了。

November 25, 2014 12:48 PM

November 13, 2014

Othree

ES6 Promise

ES6 Promise 目前各家瀏覽器的支援程度雖然還沒到可以直接用的程度,但是目前已經有非常多的 polyfill,差不多是可以開始使用的時候了。

如果習慣了 jQuery 設計的 Deferred 物件,應該會對於 ES6 的 Promise 設計很不習慣吧,相較於 jQuery 是產生好物件然後提供一些 method 做操作,要不要封裝起來也是開發者的事,ES6 Promise 的設計更是強調了封裝的特性,要怎麼 resolve、reject,在一開始就要決定好了,只有在建構函數裡面碰的到 resolve 和 reject 的觸發點:

new Promise(function (resolve, reject) {
  //...
});

這樣的設計雖然在物件封裝上比較嚴謹,但是其實會讓一些程式碼多了一層的縮排,例如本來用 jQuery Deferred 包起來的 XHR:

function JQXHR(url) {
  var xhr = new XMLHttpRequest();
  var dfd = new $.Deferred();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) { dfd.resolve(xhr.response); }
  }
  xhr.open('GET', url);
  xhr.send();
  return dfd.promise();
}

用 ES6 Promise 就要改寫成:

function ESXHR(url) {
  var xhr = new XMLHttpRequest();
  var dfd = new Promise(function (resolve) {
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) { resolve(xhr.response); }
    }
  });
  xhr.open('GET', url);
  xhr.send();
  return dfd;
}

第二個差異就在於回傳的 thenable 物件要怎麼把結果改掉,以前 jQuery 的時候可以在 callback 裡面回傳新的 Deferred 物件改結果:

dfd.then(null, function () {
  return $.Deferred().resolve();
});

沒特別傳 Deferred 物件的話不管用 then 串接幾次的話結果都不會改變,不過 ES6 Promise 就不一樣了,不管是 resolve 狀況還是 reject 狀況,then 回傳的預設就是一個新的 resolved 狀態的 Promise 物件。那要怎樣改變狀態呢?這裡就要用 throw new Error() 了。在 ES6 Promise 的 then 裡面,不管是 resolve 還是 reject 的 handler,都是回傳任意值會讓後面拿到新的 resolved 的 Promise 物件,而如果在執行中 throw error 出去,就會讓後面拿到 rejected 的 Promise 物件:

dfd.then(function (val) {
  if (val === 0) {
    throw new Error('');
  }
});

然後就是 rejected 狀態的 Promise 也是有值的,如果是 throw error 產生的,那就是看 throw 什麼東西,那個東西就會變成新的 Promise 物件的值,而以往手動 throw error 時,為了相容性都會產生 Error 物件,在這邊就不必如此了,其實可以隨便傳想要給後面使用的值。

再來,有時候只想要處理 reject 的狀況,會寫成:

dfd.then(null, function () {
  //rejected handler
});

有個 null 放前面其實蠻討厭的,不過 ES6 有提供一個 catch 可以用:

dfd.catch(function () {
  //rejected handler
});

這個以前倒是沒有類似的東西,蠻方便的。大概瞭解到這樣就可以使用 ES6 Promise 了,另外還有 Promise.allPromise.race 可以做和 jQuery.when 類似的事情(race 是新的控制),至於我為什麼說現在差不多可以開始使用呢,除了 Polyfill 齊全外,其實還有一個原因是一些新的網路標準也開始使用 ES6 Promise 了,像是 Web Crypto,看 spec 比較不明顯,不過看 MDN 的介紹,就有列出 encrypt、decrypt、sign 等花時間的 method 回傳都是 Promise 物件,實做就可以丟到背景的 Worker 去處理,才不會把 UI 卡住。而除了 Web Crypto 外,還有像是 ES7 可能會有的 await 語法也是要接 Promise 物件,總之是個未來趨勢,我覺得現在比較尷尬的是在 ES6 Promise 出來前的一堆標準都是用 event base 設計的,像是 File Reader 之類的,不知道有沒有機會慢慢都改到 Promise。

November 13, 2014 03:54 PM

November 03, 2014

timdream

Tim’s Dream for the Web

Even before I get myself this username (timdream) and polluted the search result, search result of that term will give you a link to on LogicError, appropriated titled “Tim’s Dream for the Web”. That “Tim” was Sir Tim Berners-Lee, and he imagines the Web to be the powerful means for collaboration between not only people, but machines.

Weaving the Web, credit: W3C.

Weaving the Web, credit: W3C.

Collaboration between people has been closer than ever because of the Web. It have already grew closer thanks to the technologies set branded as “HTML5”, and the technologies will only grew stronger, hopefully beyond the catchphrase. As of the machines, a form of Semantic Web is indeed slowly emerging, but not in the ideal open, collaborative way and in a more top-down, proprietary approach, limited to the centralized design in which many are asked to interface with few proprietary platforms who encapsulates all data.

It’s a good thing for people to start enjoying what it is possible when the data is linked — yet, having them linked in a more open way while safeguarding our privacy remain the work to be done. This week we saw the 20th anniversary of W3C, and the HTML5 spec reaches Recommendation status — the events themselves are testimony of the rough history of the Web. I remain cautiously optimistic on this one — the organizations rally on this front is largely intact, and people will, eventually more aware of the danger when as they enjoy the convenience of the technologies.


The LogicError page was in my bookmark since a long time ago, like Firefox 0.8-ish, but not until now I realized LogicError is in fact an Aaron Swartz project. The footnote itself, with the name, kind of say something.

by timdream at November 03, 2014 03:32 PM

MozLinks-zh

Firefox 10 週年了,短片募集中!

一個轉眼之間,MozTWFirefox 都已經十歲了。上述的影片是 Mozilla 的一個行銷活動,希望能夠邀請全球愛用 Firefox 的使用者手持著「Firefox 是我自己的選擇」的自製看板拍照;並加上 hashtag 「#ChooseIndependent」以及「#fx10」上傳至自己的社群網路上 ( Twitter / Facebook / Plurk 等等 )。

獨立自主的選擇,為何如此重要

十年前的這個時候,為了追求更加進步的網路,於是 Firefox 因應而生。在這十年,我們獨立自主、自由選擇,不因財團主意而破壞追求網路自由與開放的意願。

照片、影片募集中

看到了這個活動之後,立刻讓我想到 Mozilla 曾經拍攝過的一部影片叫「I am a Mozillian」。自己覺得如果能夠拍攝類似的影片的話,應該還蠻酷的!而且 MozTW 打算為 Firefox 在 11/15 舉辦一場盛大的 10 週年生日趴,所以我自己希望能夠透過這部影片吸引更多人來參加活動、認識 MozillaMozTW

* 影片中除了會推廣 MozTW 所舉辦的 Firefox 10 週年派對 以外,也會宣傳 Mozilla Taiwan Firefox 10 週年系列活動

募集方式

感謝你願意協助拍攝,照/影片中可以一個人或多個人;拍攝的時候別忘了要拿著一張板子上面寫「Firefox is my independent choice in “你所在的都市”」。影片的格式希望能在 720p (含) 以上,檔案格式可以為 mp4 / mts / m2ts / mov 。

拍攝完畢之後上傳到任意免空或自己的空間,然後寄信給我 orin@moztw.org 就可以囉。謝謝大家 !!

原文 / Orin's Blog - Firefox 10 週年了,短片募集中!
作者 / Orin

編按:由 MozTW 社群舉辦的 Firefox 10 週年歡慶派對已經在日前開放報名了。活動適合想認識 Mozilla、MozTW、及 Open Sourse 或是完全沒有經驗但覺得有趣的人來(簡單來說就是適合各式各樣的人),內容非常豐富有趣,絕對不會讓你失望,請大家務必報名參加喔! ;-)

by 極地狐 (noreply@blogger.com) at November 03, 2014 04:00 AM

October 30, 2014

orinx

Firefox 10 週年了,短片募集中!

一個轉眼之間,MozTWFirefox 都已經十歲了。上述的影片是 Mozilla 的一個行銷活動,希望能夠邀請全球愛用 Firefox 的使用者手持著「Firefox 是我自己的選擇」的自製看板拍照;並加上 hashtag 「#ChooseIndependent」以及「#fx10」上傳至自己的社群網路上 ( Twitter / Facebook / Plurk 等等 )。

獨立自主的選擇,為何如此重要

十年前的這個時候,為了追求更加進步的網路,於是 Firefox 因應而生。在這十年,我們獨立自主、自由選擇,不因財團主意而破壞追求網路自由與開放的意願。

照片、影片募集中

看到了這個活動之後,立刻讓我想到 Mozilla 曾經拍攝過的一部影片叫「I am a Mozillian」。自己覺得如果能夠拍攝類似的影片的話,應該還蠻酷的!而且 MozTW 打算為 Firefox 在 11/15 舉辦一場盛大的 10 週年生日趴,所以我自己希望能夠透過這部影片吸引更多人來參加活動、認識 MozillaMozTW

* 影片中除了會推廣 MozTW 所舉辦的 Firefox 10 週年派對 以外,也會宣傳 Mozilla Taiwan Firefox 10 週年系列活動

募集方式

感謝你願意協助拍攝,照/影片中可以一個人或多個人;拍攝的時候別忘了要拿著一張板子上面寫「Firefox is my independent choice in “你所在的都市”」。影片的格式希望能在 720p (含) 以上,檔案格式可以為 mp4 / mts / m2ts / mov 。紙板可以在這邊下載

拍攝完畢之後上傳到任意免空或自己的空間,然後寄信給我 orin@moztw.org 就可以囉。11/5 收稿之後會先剪第一部影片,等 12 月初的時候我還會用這些素材來完成 Firefox 10 週年活動的回顧影片喔。謝謝大家 !!

 

by Orin Chen at October 30, 2014 12:38 PM

October 24, 2014

Othree

IE video 標籤記憶體問題

最近遇到一個 IE 會 crash 的問題,找很久才發現是記憶體問題,然後因為那頁有用到大量的 <video> 標籤,所以就直接鎖定目標,結果發現果然 video 就是問題元兇,測試到 IE 11 還是同樣行為。

目前發現的問題有兩層,第一層問題是如果 IE 在遇到 video 沒有設定 poster 時,會自動初始化整個 video 元件,去把影片抓下來,只為了產生 poster 圖片,第二層問題,就是這個初始化 video 元件的動作,會吃掉很多的記憶體,即使我的影片只有五百多kb,IE 還是一個 video 就吃掉數十 mb 的記憶體,即使這些 video 都沒有播放,甚至還用 CSS 藏起來了,然後因為一個頁面上有很多的影片輪流播放,所以把記憶體吃光後就當掉了。

要解決這個問題,一開始是想說設定正確的 poster 圖片就好了,確實解決了第一層的問題,但是因為影片還是會輪撥,遲早會把記憶體吃光,所以試了幾個方法想要避免這種情形,像是把 dom node detach 甚至砍掉之類的,不過都沒有效果,吃掉的記憶體不會還回來,最後只好讓 IE 不做輪撥了。

這個問題我看 stackoverflow 好像也沒有,看來在單一頁面上放很多 video 的使用情形真是很少見啊。

October 24, 2014 04:01 AM

October 23, 2014

Othree

Resource Hints

Resource Hints 是最近剛公開的一個 W3C Working Draft,目前看作者都是 Google 的人,Resource Hints 是依附在 <link> 標籤或是 header 下的,用來告訴瀏覽器有哪些資源可以先讀好的一個慣例語法,犯例如下:

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com">
<link rel="preload" href="/assets/font.woff" as="font" loadpolicy="next">
<link rel="preload" href="/assets/logo.webp" as="image" loadpolicy="next inert">

可以發現有兩種 hint,分別是 preconnectpreload,當然就照字面上的意思就可以理解了,preconnect 就是先建立好連線,像是 HTTPS 連線就需要先做 handshake 交換好加解密用的 key,影響比較直接,preload 當然就是先把特定的檔案拉下來,而且還可以指定要不要先做處理,像是 decode jpg 圖檔之類的動作可以推遲到真的需要圖片時才做。

目前看起來是不適合大量的檔案,應該還是要用來指派較關鍵的一些檔案,像是主要背景、大圖、字形之類的,而且因為可以根據設定 block onload event,拿來讀字形似乎可以避免 FOUT 的狀況,感覺是個看似簡單,但是功能其實還蠻多的新東西。

October 23, 2014 06:18 AM

October 22, 2014

MozLinks-zh

2014 Webmaker 社群發展

這篇文章檢視了 Mozilla Webmaker 社群的原則,以及我們在 2014 年推動社群的主要努力方向

一起型塑出以下成果希望來年能有更多更多人一起加入,讓 Mozilla 的使命能散佈與擴大到更多地方。

以下是 Chris Lawrence 跟我暱稱作「後設敘事」的草稿。這篇稿子試圖描述一些我們 2014 年預計要做的事情,以及為什麼要做這些事。非常歡迎大家提供各種想法與建議!

MozFest

我們的原則

我們相信,讓人們能透過開放平台進行協作,對個人的成長與眾人的未來是很重要的。

Webmaker 社群團隊承諾會基於 Mozilla 使命,建立一個符合以下敘述的網際網路:

  • 易於了解:它是透明的-我們可以關注它、認識它。
  • 協同工作:它提供一個可以輕鬆玩及創新的機會。
  • 屬於眾人:它對所有人公開,由我們自己去定義它。

我們可以藉由 Connected Learning principles 來引導我們,它主張學習該是:

  • 以生產力為中心:透過實際動手操作,將會擁有更深入的學習。
  • 開放地連結起來:不管在學校、家庭還是社群都可以使用。
  • 互相分享目標:利用網路的力量,讓有志同道合的人一起合作。

將這些原則編織在一起後,我們的目標是:

  • 塑造充滿創意、創新以及合作的環境
  • 建立產品、專案、實作練習,讓更多的人藉由動手做而學習。
  • 茁壯社群,使之能參與並致力其中。
  • 開放的教與學,給人一項生活中可以實際用上的工具。

為什麼要有 Web 素養?

我們已經有很多透過 Web 所得,不論是數位或類比的經驗。網路讓我們更完整地看待世界、並與其他人互動。不論是無意識或是過度地,網路都正在建構著我們,而同時我們也正塑造它

教與學無法自外於這個轉變;通常人們害怕的心態會多於被賦予能力的感覺。到底我們要怎樣,才能夠讓人更加能夠學習關於網路的五四三呢?

我們相信,能有 Web 素養是很重要的,意思就是說我們要增長以下的知識:

  • Web 文化
  • Web 技巧
  • Web 公民權

重要的是,網路素養是一個整體的觀點。他不僅僅只是簡單的「學寫程式」,而是闡述線上與線下地帶變得模糊的地帶,以及網路和現實世界複雜的互動方式

到目前為止的故事

為了先闡述這件事,我們透過網路組織,號召個人和團體一起推行讓人知道得更多、做得更多、做得更好的運動

在 2013 年 1 月,我們啟動了第一輪行動。Webmaker 社群開始測試一些催化全球網路素養躍進的策略與專案,於各地扎根。

我們集合現有的行動,諸如 Hive Learning NetworkSummer Code Party,同時也規劃新的活動,好比 Teach the Web MOOC網路素養一覽

現在,一年過去,這些計畫還在持續散佈及擴展

Webmaker 社群

我們的社群成員尋求:

  • 提升他們的 Web 素養。
  • 建構和分享教學工具。
  • 增加實際的人脈網路。
  • 參與並協同行動。
  • 鑑別具有在地風格的全球運動。

下面這張圖是我們的「領先用戶」。 這裡有一些在專案中,非常積極參與的社群成員,這些成員可以被分成幾種類型。本圖只是大致繪製,並不是非常完整。目的在於蒐集一些社群成員的動機,然後以視覺化方式互相比較。

我們的團隊

我們提供我們的社群:

  • 開放的網路群體:連結人群及尋找合作、創新的組織。
  • Webmaker.org:完整、具影響力,專注為推展 Web 素養設計的產品。持續提供入門課程、工具、徽章和使用者頻道,讓使用者能夠成為 Web 的製造者。有了這個產品,我們將能推行在「學習寫程式」之外,另一個差異化的「Web 素養」空間。(webmaker.org)
  • Web 素養:定義人們真正地「懂 Web」時所需具備的素養和能力(Web Literacy Map
  • 發展專業能力:使用開放的網路平台,增進開放的教學技巧和方法。(Teach the Web)
  • 運動:舉辦活動以擴展與宣傳我們「從做中學」的理念。(Maker Party)
  • 脈絡化的品牌識別:建構具有在地特色的全球品牌。(Hive Learning Network)

更詳細的未來路線,將會在近期推出。

這是提供支援與貢獻的組織成員概觀

2014 年大事件:

在 2014 年,我們將會進行:

  • #teachtheweb 訓練:一月開始 – 進行中,有線上活動,也在某些地方舉辦實體活動
  • Hive Summit:二月,位置未定
  • Webmaker 社群工作週:暫定在第一季結束時推出,地點待定
  • Maker Party:六月~九月,全球活動
  • Mozfest :十月中後期,地點位於倫敦

持續還有很多活動企劃中。

我們剛開始計劃本年的活動,非常歡迎你提供意見給我們。如果你很感興趣的話,寄信給我們來湊一咖吧!

編按:本文寫於 2014 年初,上述預定活動剩下 10 月底倫敦舉辦的 Mozilla Festival。MozTW 將會在活動結束後舉辦連續聚,邀請參加 Mozfest 的朋友們,談談這個令人感到好奇的活動裡面到底有些什麼!屆時請不要錯過囉~
原文 / Webmaker Community in 2014 | Michelle Thorne
作者 / Michelle Thorne
授權 / 創用 CC 姓名標示-相同方式分享-3.0

φ 交大服務學習 翻譯 - 極地狐、petercpg、Irvin 編輯

by 極地狐 (noreply@blogger.com) at October 22, 2014 04:00 AM

October 16, 2014

MozLinks-zh

TED 演講:Ryan Merkley 展示 Popcorn

TG12_45577_2R6A8993_1920

今日,來勢洶洶的 Popcorn Maker 首度在 TED.com 亮相,展示 Popcorn 擁有在網路裡改變敘事方法的潛力。

Mozilla 營運長 Ryan Merkley,6 月 29 日在 Edinburgh 的 TED Global 中,現場實際操作 Popcorn Maker。 這個線上工具是 Mozilla Webmaker 專案的一部份,非常容易上手,它可以讓任何人將即時的內容添加到任何影片內 - 像是照片、地圖、社交媒體等等。

影片突破框架

「影片誕生於網路世界時是在一個小小的盒子裡,與它相關的眾多資訊跟影片本身並沒有辦法連動。但 Popcorn Maker 改變了這個框架。」Merkley 這樣說。

「Popcorn 將影片打造成新的模式,讓它就好像是網頁本身一般——動態的、充滿超連結、可混搭,然後他就突破以往的框架了。」

Popcorn + TED 演講

Mozilla 也實驗性的 在 TED Talks 內用其他的方法演講。Popcorn 團隊今天發佈了 Dr.Beau Lotto 做的 TED Talk 混搭版。他在影片裡加入了一層可點選的圖層,讓任何人都可以在這一層當中加些新東西、編輯、或者混製。

「我們將 TED 影片加入一些內容,來測試新的 Popcorn Maker 應用程式。這是個很棒的方法,Popcorn Maker 的新功能是我們去年在做的東西。」Popcorn 計劃總監、Brett Gaylor 這樣說。 「我們直接用 Popcorn 在影片內新增連結、維基百科條目、圖片及地圖。這讓我們有更多學習的機會,也能夠更深入地溝通。」

對 TED 來說是非常興奮的事,Popcorn Maker 擁有讓 TED Talks 創造出更多、更豐富的資訊生態的潛力。——來自編輯團隊、演講者、還有身為觀眾的你」—— TED.com

在 Mozilla Festival 推出 Popcorn Maker 1.0

Mozilla 會在十一月位於英國倫敦的 Mozilla Festival 推出 Popcorn Maker 1.0。同時,我們也會放出跟今天在 TED 演講上發表的內容一樣的新 Beta 版。 在團隊為最後成品努力的同時,Beta 版就已經有完整的功能,可以給任何想第一個嘗試的人使用。

深入了解

關於TED

TED 是一個非營利組織,透過科技、娛樂與設計的世界致力宣揚「理念值得推廣」。全世界的人在 TED.com 上都可以免費觀賞最精彩的演講與表演。

開放原始碼行動

Popcorn Maker 是由許多摩茲人建構的,包括 Popcorn.js 的社群貢獻者,例如 Bobby Richter、Jon Buckley、Kate Hudson、Scott Downe 以及 Ben Moskowitz,這些有才華的團隊成員加強了工具功能。貢獻者還包括與 Mozilla 有特別合作關係的 Toronto’s Seneca 大學。Popcorn Maker 如果沒有由老師 David Humphrey 領導學生 Christopher de Cairos、Matthew Schranz、還有 David Seifreid 的話,也不會完成。

原文 / TED Talk: Ryan Merkley demos Popcorn
授權 / 創用 CC 姓名標示-相同方式分享-3.0

φ 交大服務學習 翻譯 - 極地狐 編輯


編按:
這篇是 2012 年的文章,Popcorn 的 TED 演講影片已在 ted.com 釋出繁中版本,Popcorn Maker 也已有繁中的成品了。另外 Webmaker 整個專案也有其他好用的工具等你來玩玩看喲!

by 極地狐 (noreply@blogger.com) at October 16, 2014 04:00 AM