2014年11月26日 星期三

20141126 | Progress tag、meter tag

根據20141125的進度，該繼續補充20141117 今日學習的內容，要從Custom Elements: defining new elements in HTML的How elements are upgraded這節開始，但是我今天沒有如此做，而是去了解progress bar所需要學習的內容，明天11/27開始雙進度閱讀，同時學習不同的事物。

查看投票地點和名冊號次(第幾頁第幾號)，很重要!!!
討厭柯P的Xdite發佈她寫的Ruby書，For Free，雖然不認同她的政治理念，但我感謝她。
今天想看東瀛霸者李前市長的沃草專訪
發現該死的全程台語聽不懂QAQ，後來看沃草的動態發現有HackPad聯作逐字稿，HackPad真的太正了，這才是E化學習與分享模式
看到Teach for Taiwan發一篇動態，關於芬蘭教育的文章，真的很正
  • 芬蘭教育 世界第一的祕密 | 天下雜誌
  • 芬蘭不是砸更多錢辦教育，而是選擇「專注」策略，把資源配置在「最需要的地方」，也就是初級中學（相當於台灣國中階段）和學習遲緩者身上。 因為「這階段的小孩正發展自己的學習方法，需要最多的資源。」
  • 「我們強調的是學習，不是競爭，芬蘭絕對不會用競爭來刺激品質。」說得一口流利英文，亨卡拉再三強調，在芬蘭，教育的目的是學習，而非競爭。
從Custom Elements: defining new elements in HTML的How elements are upgraded這節開始。另外有必要研究昨天找到的Animated Progress Bar · CSS Demo，然後自行建構出我要的雙血條CSS，對於CSS的印象已經有點模糊了，所以先回去復習20141106 今日學習的內容，學習CSS的ID、class、span、div、grouping、nesting。20141113 今日學習的內容，學習CSS的Pseudo Classes、href，學習DOM，(15:40)。

測試了一下22-progress-bar-anim裡的index，(即Animated Progress Bar · CSS Demo)

套上CSS，文字置中風格美麗漂亮
未套上CSS，文字擠在左上角，醜陋
所以說要借鏡這CSS的美學，然後用custom element像是mike-map那樣，來當作我們遊戲的血條
偶然發現，Three.js裡有progress bar的code，請見這篇
progress bar、Meter資料查詢
由於要學習progress bar CSS的緣故，搜尋相關資料

看CSS3 Progress Bars | CSS-Tricks看到一個奇怪的寫法 ">"，估狗找到What does the ">" (greater-than sign) CSS selector mean? - Stack Overflow這篇文章   (尚未閱讀)

另外發現這篇文章的寫法似乎是較舊的寫法，較新的方法是透過HTML5內建的 progress tag、meter tag，基礎知識可看以下三篇文章

progress tag
meter tag
在這篇裡除了文字說明外，還有透過codePan來show demo，私心認為要練習HTML與CSS的基礎用CodePan會比用JSBin還要好
另外由於我們希望能直接操作progress bar，所以必要撰寫script，這篇文章有相關的範例
StackOverFlow上面也有如何撰寫script來操作我們的progress bar，有放demo在他的JSFiddle上，在輸入框裡按下鍵盤上的enter鍵，就可以讓血條上升
資料查詢就先到這裡，我不知我是否足夠聰明，但我知道我夠聰明來開始，當我完成時，我就更聰明了。

學習Progress Bar、Meter

從閱讀The HTML5 progress Element | CSS-Tricks這篇文章開始。我們透過progress element來生成progress bar，progress element有兩個基本attributes：max與value，我們可以先看<progress> - HTML (HyperText Markup Language) | MDN對這兩個attritube的介紹，一個簡單的例子<progress value="30" max="100">70 %</progress>，它的概念非常的簡單，我已經在JSFiddle上測試過了，它的概念真的很簡單max就是你的最大HP，value就是你現在的HP，所以這段code的結果就是我剩70%的血。
(以下2014/12/02更新)

現在讀The HTML5 progress Element的Styling progress bars這節。在CodePen上練習，早上在CodePen實作了-webkit-progress-bar與-webkit-progress-value這兩個。-webkit-progress-bar成功看到效果，但是-webkit-progress-value失敗，-webkit-progress-value的paradigm中看到一些gradient的東西，paradigm裡CSS裡的gradient在Cross Browser HTML5 Progress Bars In Depth這篇看到有相關介紹，這篇讀完可以找機會閱讀這篇。 (尚未閱讀)

在實作時遇到coding CSS卻沒讓我們DOM裡的elemetn產生變化，困惑一陣子看了Cross Browser HTML5 Progress Bars In Depth的But I Want To Style Them My Way!這節的第一小節Step 1: Turn off default styling裡第一個paradigm，在CSS的開頭加入progress, 如此一來就會讓All HTML5 progress enabled browsers。
終於有效果了
(以下2014/12/03更新)
現在讀The HTML5 progress Element的Adding Animation這節。學習到Adding Animation這節時發現學習成效不太好，換The progress element | HTML5 Doctor這篇文章閱讀，並開一個新CodePen一邊讀一邊實作。這一篇我們學習道可以撰寫<progress><span>0</span>%</progress>在透過script去操作progress bar的value，這篇中常使用到Math.floor，估狗看到Math.floor()最大整數 | Javascript，可以取得小於等於的整數，i.e Math.floor(46.385)，取得46。

在閱讀這篇時知道，若要修改progress bar的外型，在chrome與Safari，要修改progress bar的外貌要透過兩種pseudo-class，progress::-webkit-progress-value 修改progress bar裡value的color，progress::-webkit-progress-bar修改progress bar裡background的color。在閱讀這篇時，有提到一個keyword，meter tag。並提供一份資料可供閱讀
由於實作The progress element 的paradigm沒看到效果，所以先測試HTML 5 Tutorial Progress Bar For Progressive Javascript Events Processing這篇的paradigm在CodePen上面，確實可行，下午回家後繼續實驗與閱讀。

找到一個progress bar的demo
還需要更多progress bar的知識，於是先閱讀How to use the Meter & Progress Elements | Treehouse Blog，由於已經有一點知識了所以我直接從STYLING PROGRESS BARS這節開始讀，有趣了，我們可以先刪除browser內定的style，透過把-webkit-appearance、-moz-appearance、appearance這三個attributes設為none，就可以關掉browser預設的style，測試發現不同瀏覽器none style都不一樣 XD
(以下2014/12/04更新)
另外如果我們想要調整meter的長寬的話，則要在CSS設定meter{width:任意數字px, height:任意數字px}，width改變長度，height改變高度
接著我們來為progress bar做造型，透過progress::-webkit-progress-bar{修改style}。首先修改border-radius，測試結果如下
在撰寫CSS時要注意，與JavaScript不同的點在於，CSS每行都要加分號。不同於Chrome/Safari，FireFox只有-moz-progress-bar可以控制CSS style，這段先跳過。

現在繼續The Meter Element這節。meter tag與progress tag相似，但是卻有不同的purpose。progress tag是用來說"完成"了多少進度，meter tag是用來"量測"一個刻度、量尺
  • <meter> element is used to display a measurement on a known scale
照這樣看來，如果我要做血條，meter會比progress更適合。查了一下meter的意思：計量器，儀表。有趣了，meter的attritube好多喔 XD
  • min – The minimum value on the scale.
  • max – The maximum value on the scale.
  • low – The upper-boundary of the low section on the scale.
  • high – The lower-boundary of the high section on the scale.
  • optimum – The optimum value.
  • value – The measurement.
這裡面只有value是一定要有的，其他都使選擇性的。

插播一下，也順便估狗一下如何用three.js 做meter
另外這篇雖然是談音響動畫的，但也有提到一些meter的構想
很可惜，three.js裡meter相關的資訊真的不多。

另外也找了一下，如何用JavaScript操作meter以及demo
另一個JavaScript操作meter的demo

接著回到這篇文章繼續，有趣的是透過把-webkit-appearance、-moz-appearance、appearance這三個attributes設為none，在Chrome與FireFox測試，並沒有改變style，可能meter當初預設時就是如此style吧。讀到這時我跑去瀏覽另一篇文章The HTML5 meter Element | CSS-Tricks，好像不錯所以先跳到這篇讀，這篇的Experiment #1 - Different states of meter element這節，讀了後了解meter的attritube要怎麼用了，直接用progress bar with script pt.1來測試，low="25" high="75"，這是我們的正常範圍，value若是低於25或高於75，則會出現警告配色。
接著繼續瀏覽這篇，學習-webkit-meter-optimum-value這pseudo class並測試之發現一件有趣的事，配色若是沒有成對撰寫，會有漸層的效果
meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
  90deg, 
  #8bcf69 10%, 
  #e6d450 25%, 
  #f28f68 55%,
  #cf82bf 80%, 
  #719fd1 100%
  );
  background-size: 100% 100%;
}
若不想要看到漸層，想看到明確的分層，可以這樣做
meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
  90deg, 
  #8bcf69 10%,
 
  #e6d450 10%,
  #e6d450 25%, 

  #f28f68 25%,
  #f28f68 55%,

  #f28f68 55%,  
  #cf82bf 80%,

  #cf82bf 80%,  
  #719fd1 100%
  );
  background-size: 100% 100%;
}
他的概念其實很簡單，為了避免下一層的顏色漸層，所以你先讓下一層的顏色，重新塗一次上一層的範圍。

再來讀CSS3 Transition/Animation這節。剛剛我們撰寫meter的pseudo class，meter::-webkit-meter-optimum-value，使我們的血條色彩能分層，若我們想要與血條有所互動，可以用:hover來操作，以前沒學過:hover，所以我估狗讀了這篇教學 | CSS 網頁互動的好幫手 - hover的應用 @ Dribs & Drabs :: 痞客邦 PIXNET ::，原來:hover是讓滑鼠游標移到DOM理特定的child node時會產生特殊效果，它的概念如下node:hover{產生所要的特殊效果}，當滑鼠移到DOM中的node時，產生所要的特殊效果，恩....這不是我要的，我還是要從JavaScript去著手，所以這段瀏覽看看就好。

(以下2014/12/05更新)
The HTML5 meter Element從Pseudo Elements這節開始，在此之前我們先來練習一下透過JavaScript操作meter，首先閱讀meter - JSFiddle與HTML5 meter element - JSFiddle，並開啟一篇新的CodePen | control meter by script來練習，為了要創造button來操作meter，所以再加讀When To Use The Button Element | CSS-Tricks這篇，讀這篇時開了button by script - JSFiddle來練習最後面純用JavaScript創造button，實作時有個小插曲錯誤的寫法body.appendChild("button");應該要body.appendChild(button)這樣寫才對，但這樣寫有個缺點，不清楚頁面上到底有多少個button，個人還是較偏好在DOM裡用button tag再加上onclick attritube。

反思
稍微思索一下，為何會犯這錯誤，應該是因為前面寫document.createElement()與document.getElementsByTagName()以及addEventListener()都是要用"thing's name"，所以才會在用body.appendChild()時搞錯，再提醒一次appendChild(object)。

於是參考另外一篇onclick Event | W3School的第一個demo參考操作button的寫法，control meter by script | CodePen已成功瞬間砍血增血，但是沒有漸進的動化效果。起初有考慮像HTML5 meter element - JSFiddle使用setInterval，後來想起以前在20141027 今日學習有紀錄不要用setInterval與setTimeout，於是回去閱讀20141027 學習操作requestAnimationFrame。

(以下2014/12/06更新)
今天早上修改了control meter by script | CodePen，測試雙血條，以測試成功可以動了，一切功德圓滿可以上台北了。
  (從這開始)

(以上2014/12/02、12/03、12/04、12/05、12/06更新)
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)