Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web PlatformMoving Forward!Masataka Yakura (myakura)
HTML5
実装進んでます!
HTMLパーサはFx4, Cr7で実装。dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
HTML中にSVGを書ける。グラフや高解像度対応に最適。
フォームの実装も着々と。developer.mozilla.org/ja/HTML/HTML5/Forms_in_HTML5
<input type=foo> のフル実装とフォームのスタイルづけが課題か。
W3C Confirms May 2011 forHTML5 Last Callwww.w3.org/2011/02/htmlwg-pr.html
5/24に Last Call 公開(予定)ただ、一回じゃ終わらない。
安定すると思いきや大きな変更の可能性も……
<hgroup> なくなるかも?www.w3.org/html/wg/tracker/issues/164
CSS
CSS 2.1, Selectors, Colorそろそろ勧告。www.w3.org/TR/CSS/standards.mitsue.co.jp/resources/w3c/TR/css-2010/
CSS2がひと段落したので今後はCSS3, CSS4 (!) が進む。
CSS AnimationsAppleの拡張由来。Geckoで実装。dev.w3.org/csswg/css3-animations/
CSS3 Text影、下線、行送りなど。dev.w3.org/csswg/css3-text/
text-decoration下線とかのスタイルを変更できる。
mark.spelling {  text-decoration-color: red;  text-decoration-style: wavy;}
CSS Image Values &Replaced Content Moduledev.w3.org/csswg/css3-images/
Gradients, image(), element(),object-fit などを定義。
GradientsOpera, IEでも実装中。
-webkit-linear-gradient(...)    (._. )...-moz-linear-gradient(...)-ms-linear-gradient(...)-o-linear-gradient(...) linear-g...
Gradientsを先に進めるため遅れたものは Level 4 行きかも?
image()代替画像、dpiの指定。
body {  background-image :    image( "vector.svg",          “raster-hi.png" 150dpi );  ...}
element()任意の要素を画像として取得。
-moz-element() の標準化。hacks.mozilla.org/2010/08/mozelement/
object-fitアスペクト比を保って拡大縮小。dev.opera.com/articles/view/css3-object-fit-object-position-ja/
img {  width: 500px;  height: 500px;  border: 10px solid;  ...}
img {  width: 500px;  height: 500px;  border: 10px solid;  object-fit: contain;  ...}
CSSレイアウト
レイアウトに関係するモジュールがやたら多い。
• Template Lyt   • Regions• Grid Align     • Exclusions
Template Layoutdisplay, position を拡張。www.w3.org/TR/css3-layout/
body {  display: "aaaa"           "bccc"           "dddd";}#header { position: a }#sub       { position: b }#main      { p...
実装なし。なくなるかもしれない?
Grid Alignmentテーブルっぽい指定。dev.w3.org/csswg/css3-grid-align/
#doc {  display: grid;  grid-columns: 150px 1fr;  grid-rows: 50px 1fr 50px;}#item1 {  grid-column: 2;  grid-row: 1 4;}
Microsoftが提案IE10で試験的に実装中。blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layout...
Regionsテキストの流れる領域を指定。
Exclusions四角形以外でfloatするような。
どちらもAdobeの提案。試験実装あり。www.adobe.com/devnet/html5/articles/css3-regions.html
被る機能があるのでそれぞれの提案を評価中。lists.w3.org/Archives/Public/www-style/2011Mar/0216.html
Multi-column Layoutwww.w3.org/TR/css3-multicol/
テキストを段組         これまで段組は          から文章中心ので 表 現 す る CSS   table を 使 っ て    Webサイトで広モジュール。複         無理やり実現す          く活用されてい数...
#intro {  column-count: 3;  column-gap: 1.5em;}
Gecko, WebKitは接頭辞あり、Opera, IE10では接頭辞なしの実装。
Flexible Box Layoutdev.w3.org/csswg/css3-flexbox/
幅にあわせ伸びるボックス、ボックスの並び替えなどを実現。
SD   HD
ここは固定幅 ほどよくのびてくれる
Gecko, WebKitが独自に実装。TridentもIE10で実装中。
新しいWDで仕様が変更に……(実装は古いものを参照)
そのほか
WebApps WGwww.w3.org/2008/webapps/wiki/PubStatus
File APIs, IndexedDBが実装中。Clipboard Oprsなど新しい仕様も。
Web Performance WGwww.w3.org/2011/04/webperf
時間計測、描画最適化などパフォーマンス関連の仕様を策定。
requestAnimationFrame()dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html
オフスクリーン時などのアニメーションの処理を最適化。paulirish.com/2011/requestanimationframe-for-smart-animating/
CSS WG (!?)
CSSOM ViewgetClientRects()とかを定義。dev.w3.org/csswg/cssom-view/
window.matchMedia()メディアクエリーをスクリプトから。developer.mozilla.org/en/CSS/Using_media_queries_from_code
var mql = matchMedia("(orientation:landscape)");mql.addListener(handleOrientationChange);function handleOrientationChange(...
いろんなことが進んでますよ!
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Upcoming SlideShare
Loading in …5
×

Web Platform -- Moving Forward!

6,916 views

Published on

Firefox Developers Conference 2011 in Osaka (2011年5月14日開催) のトークセッションで使ったスライドです。

Published in: Technology
  • ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ I love this site. It always finds me the best tutors in accordance with my needs. I have been using it since last year. The prices are not expensive compared to other sites. I am glad I discored this site:)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2F7hN3u ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE Format, ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Web Platform -- Moving Forward!

  1. 1. Web PlatformMoving Forward!Masataka Yakura (myakura)
  2. 2. HTML5
  3. 3. 実装進んでます!
  4. 4. HTMLパーサはFx4, Cr7で実装。dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
  5. 5. HTML中にSVGを書ける。グラフや高解像度対応に最適。
  6. 6. フォームの実装も着々と。developer.mozilla.org/ja/HTML/HTML5/Forms_in_HTML5
  7. 7. <input type=foo> のフル実装とフォームのスタイルづけが課題か。
  8. 8. W3C Confirms May 2011 forHTML5 Last Callwww.w3.org/2011/02/htmlwg-pr.html
  9. 9. 5/24に Last Call 公開(予定)ただ、一回じゃ終わらない。
  10. 10. 安定すると思いきや大きな変更の可能性も……
  11. 11. <hgroup> なくなるかも?www.w3.org/html/wg/tracker/issues/164
  12. 12. CSS
  13. 13. CSS 2.1, Selectors, Colorそろそろ勧告。www.w3.org/TR/CSS/standards.mitsue.co.jp/resources/w3c/TR/css-2010/
  14. 14. CSS2がひと段落したので今後はCSS3, CSS4 (!) が進む。
  15. 15. CSS AnimationsAppleの拡張由来。Geckoで実装。dev.w3.org/csswg/css3-animations/
  16. 16. CSS3 Text影、下線、行送りなど。dev.w3.org/csswg/css3-text/
  17. 17. text-decoration下線とかのスタイルを変更できる。
  18. 18. mark.spelling { text-decoration-color: red; text-decoration-style: wavy;}
  19. 19. CSS Image Values &Replaced Content Moduledev.w3.org/csswg/css3-images/
  20. 20. Gradients, image(), element(),object-fit などを定義。
  21. 21. GradientsOpera, IEでも実装中。
  22. 22. -webkit-linear-gradient(...) (._. )...-moz-linear-gradient(...)-ms-linear-gradient(...)-o-linear-gradient(...) linear-gradient(...)-webkit-gradient(linear, ...)
  23. 23. Gradientsを先に進めるため遅れたものは Level 4 行きかも?
  24. 24. image()代替画像、dpiの指定。
  25. 25. body { background-image : image( "vector.svg", “raster-hi.png" 150dpi ); ...}
  26. 26. element()任意の要素を画像として取得。
  27. 27. -moz-element() の標準化。hacks.mozilla.org/2010/08/mozelement/
  28. 28. object-fitアスペクト比を保って拡大縮小。dev.opera.com/articles/view/css3-object-fit-object-position-ja/
  29. 29. img { width: 500px; height: 500px; border: 10px solid; ...}
  30. 30. img { width: 500px; height: 500px; border: 10px solid; object-fit: contain; ...}
  31. 31. CSSレイアウト
  32. 32. レイアウトに関係するモジュールがやたら多い。
  33. 33. • Template Lyt • Regions• Grid Align • Exclusions
  34. 34. Template Layoutdisplay, position を拡張。www.w3.org/TR/css3-layout/
  35. 35. body { display: "aaaa" "bccc" "dddd";}#header { position: a }#sub { position: b }#main { position: c }#footer { position: d }
  36. 36. 実装なし。なくなるかもしれない?
  37. 37. Grid Alignmentテーブルっぽい指定。dev.w3.org/csswg/css3-grid-align/
  38. 38. #doc { display: grid; grid-columns: 150px 1fr; grid-rows: 50px 1fr 50px;}#item1 { grid-column: 2; grid-row: 1 4;}
  39. 39. Microsoftが提案IE10で試験的に実装中。blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts.aspx
  40. 40. Regionsテキストの流れる領域を指定。
  41. 41. Exclusions四角形以外でfloatするような。
  42. 42. どちらもAdobeの提案。試験実装あり。www.adobe.com/devnet/html5/articles/css3-regions.html
  43. 43. 被る機能があるのでそれぞれの提案を評価中。lists.w3.org/Archives/Public/www-style/2011Mar/0216.html
  44. 44. Multi-column Layoutwww.w3.org/TR/css3-multicol/
  45. 45. テキストを段組 これまで段組は から文章中心ので 表 現 す る CSS table を 使 っ て Webサイトで広モジュール。複 無理やり実現す く活用されてい数のブラウザで るしかなかった。 くのではないだ実装が進行中だ。 Multicol は こ れ ろうか。
  46. 46. #intro { column-count: 3; column-gap: 1.5em;}
  47. 47. Gecko, WebKitは接頭辞あり、Opera, IE10では接頭辞なしの実装。
  48. 48. Flexible Box Layoutdev.w3.org/csswg/css3-flexbox/
  49. 49. 幅にあわせ伸びるボックス、ボックスの並び替えなどを実現。
  50. 50. SD HD
  51. 51. ここは固定幅 ほどよくのびてくれる
  52. 52. Gecko, WebKitが独自に実装。TridentもIE10で実装中。
  53. 53. 新しいWDで仕様が変更に……(実装は古いものを参照)
  54. 54. そのほか
  55. 55. WebApps WGwww.w3.org/2008/webapps/wiki/PubStatus
  56. 56. File APIs, IndexedDBが実装中。Clipboard Oprsなど新しい仕様も。
  57. 57. Web Performance WGwww.w3.org/2011/04/webperf
  58. 58. 時間計測、描画最適化などパフォーマンス関連の仕様を策定。
  59. 59. requestAnimationFrame()dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html
  60. 60. オフスクリーン時などのアニメーションの処理を最適化。paulirish.com/2011/requestanimationframe-for-smart-animating/
  61. 61. CSS WG (!?)
  62. 62. CSSOM ViewgetClientRects()とかを定義。dev.w3.org/csswg/cssom-view/
  63. 63. window.matchMedia()メディアクエリーをスクリプトから。developer.mozilla.org/en/CSS/Using_media_queries_from_code
  64. 64. var mql = matchMedia("(orientation:landscape)");mql.addListener(handleOrientationChange);function handleOrientationChange(mql) { if(mql.matches) { // よこよこ // 横のなにか } else { // 縦のなにか }}
  65. 65. いろんなことが進んでますよ!

×