HTML5 for Designers Slides @ Firefox DevCon 2011 in Osaka       by Tomoya ASAI (dynamis)                   last update on ...
Tomoya ASAI (dynamis)            Mozilla Japan - Technical mktg.            http://dynamis.jp/            http://facebook....
Facebook   Twitter
Agenda
Agenda         about:Mozilla         Firefox.Future         CSS Design         Mobile Web         Animation         Securi...
about:mozilla.com brain .org heart
http://www.flickr.com/photos/intothefuzz/5577427601/
http://royal.pingdom.com/2011/03/24/firefox-infographic/
http://royal.pingdom.com/2011/03/24/firefox-infographic/
http://royal.pingdom.com/2011/03/24/firefox-infographic/
http://blog.mozilla.com/blog/2011/03/25/
http://blog.mozilla.com/blog/2011/03/25/
http://www.flickr.com/photos/intothefuzz/5578011308/
: http://www.mozilla.org/about/manifesto.ja.html
http://www.flickr.com/photos/intothefuzz/5577430083/
Firefox.FutureRapid Release...
http://blog.mozilla.com/channels/
https://dev.mozilla.jp/2011/04/add-on-compatibility-rapid-releases/
5/14          Aurora                    Betahttps://developer.mozilla.org/en/Firefox_5_for_developers
https://developer.mozilla.org/en/Firefox_5_for_developers
https://developer.mozilla.org/en/Firefox_5_for_developers
5/7   Nightly
https://developer.mozilla.org/en/Firefox_6_for_developers
https://developer.mozilla.org/en/Firefox_6_for_developers
5/7
https://apps.mozillalabs.com/
:   UI
https://wiki.mozilla.org/Labs/F1
http://blog.mozilla.com/joe/2011/04/26/introducing-the-azure-project/
http://blog.mozilla.com/dmandelin/2011/04/22/mozilla-javascript-2011/
Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
http://decomoji.jp/
http://webfonts.fonts.com/
http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
http://hacks.mozilla.org/2009/10/font-control-for-designers/
http://hacks.mozilla.org/2009/10/font-control-for-designers/
http://freesoft.tvbok.com/tips/net_tips/ie9_doctype.html
http://subtech.g.hatena.ne.jp/mayuki/20110510/1304997242
https://bugzilla.mozilla.org/show_bug.cgi?id=574907
http://shopdd.blog51.fc2.com/blog-entry-932.html
Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
http://dynamis.jp/demo/css-gradients/
http://css-tricks.com/examples/ButtonMaker/http://gradients.glrzad.com/http://www.patternify.com/http://ie.microsoft.com/t...
Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
https://developer.mozilla.org/en/CSS/-moz-transform
https://developer.mozilla.org/En/CSS/Using_CSS_transforms
IE9   ...
http://hacks.mozilla.org/2010/06/css3-calc/
:link   :visited   :-moz-any-link
http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
http://hacks.mozilla.org/2010/08/mozelement/
JS   mozSetImageElement()
http://hacks.mozilla.org/2010/08/mozelement/
http://hacks.mozilla.org/2010/08/mozelement/
https://developer.mozilla.org/en/CSS/Media_queries
cm                            iPhone
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
http://colly.com/
http://colly.com/
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
WebKit                            DL
WebKit                                 DL
setTimeout()/setInterval()
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
https://developer.mozilla.org/en/Canvas_tutorial
http://www.w3.org/TR/html5/the-canvas-element.html#security-with-canvas-elements
http://googlecode.blogspot.com/2011/05/creating-2d-games-with-javascript-html5.html
http://muizelaar.blogspot.com/2011/02/drawing-sprites-canvas-2d-vs-webgl.html
http://processingjs.org/http://code.google.com/p/cakejs/http://graph.tk/http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uup...
https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL
http://dynamis.jp/demo/smil/       	      	                                                                      	 	 	 	  ...
animateColor   https://bugzilla.mozilla.org/show_bug.cgi?id=436296
http://raphaeljs.com/http://g.raphaeljs.com/http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-a...
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
http://hacks.mozilla.org/2010/07/firefox4-beta2/
https://developer.mozilla.org/en/CSS/CSS_animations
http://www.khronos.org/webgl/
                                                        	       	                     	           	     	                 ...
http://blog.jprosevear.org/2011/05/13/webgl-security/
http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/
http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
Fx 3.6.9   https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header
https://developer.mozilla.org/ja/Introducing_Content_Security_Policy
https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy
https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy
https://developer.mozilla.org/en/http_access_control
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
http://dl.dropbox.com/u/130643/dih5ja/history.html https://github.com/
https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
Any Question ?
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Upcoming SlideShare
Loading in …5
×

HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

6,765 views

Published on

Firefox Developer Conference 2011 in Osaka で使用したスライド
http://mozilla.jp/events/2011/fxdevcon-osaka/

公開用に一部修正やスライド追加しました

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,765
On SlideShare
0
From Embeds
0
Number of Embeds
128
Actions
Shares
0
Downloads
48
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

  1. 1. HTML5 for Designers Slides @ Firefox DevCon 2011 in Osaka by Tomoya ASAI (dynamis) last update on 2011.05.20
  2. 2. Tomoya ASAI (dynamis) Mozilla Japan - Technical mktg. http://dynamis.jp/ http://facebook.com/dynamis http://twitter.com/dynamitter dynamis@mozilla-japan.orgdynamis ( dunamis)
  3. 3. Facebook Twitter
  4. 4. Agenda
  5. 5. Agenda about:Mozilla Firefox.Future CSS Design Mobile Web Animation Security plus alpha
  6. 6. about:mozilla.com brain .org heart
  7. 7. http://www.flickr.com/photos/intothefuzz/5577427601/
  8. 8. http://royal.pingdom.com/2011/03/24/firefox-infographic/
  9. 9. http://royal.pingdom.com/2011/03/24/firefox-infographic/
  10. 10. http://royal.pingdom.com/2011/03/24/firefox-infographic/
  11. 11. http://blog.mozilla.com/blog/2011/03/25/
  12. 12. http://blog.mozilla.com/blog/2011/03/25/
  13. 13. http://www.flickr.com/photos/intothefuzz/5578011308/
  14. 14. : http://www.mozilla.org/about/manifesto.ja.html
  15. 15. http://www.flickr.com/photos/intothefuzz/5577430083/
  16. 16. Firefox.FutureRapid Release...
  17. 17. http://blog.mozilla.com/channels/
  18. 18. https://dev.mozilla.jp/2011/04/add-on-compatibility-rapid-releases/
  19. 19. 5/14 Aurora Betahttps://developer.mozilla.org/en/Firefox_5_for_developers
  20. 20. https://developer.mozilla.org/en/Firefox_5_for_developers
  21. 21. https://developer.mozilla.org/en/Firefox_5_for_developers
  22. 22. 5/7 Nightly
  23. 23. https://developer.mozilla.org/en/Firefox_6_for_developers
  24. 24. https://developer.mozilla.org/en/Firefox_6_for_developers
  25. 25. 5/7
  26. 26. https://apps.mozillalabs.com/
  27. 27. : UI
  28. 28. https://wiki.mozilla.org/Labs/F1
  29. 29. http://blog.mozilla.com/joe/2011/04/26/introducing-the-azure-project/
  30. 30. http://blog.mozilla.com/dmandelin/2011/04/22/mozilla-javascript-2011/
  31. 31. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  32. 32. http://decomoji.jp/
  33. 33. http://webfonts.fonts.com/
  34. 34. http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
  35. 35. http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
  36. 36. Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  37. 37. : http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  38. 38. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  39. 39. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  40. 40. http://freesoft.tvbok.com/tips/net_tips/ie9_doctype.html
  41. 41. http://subtech.g.hatena.ne.jp/mayuki/20110510/1304997242
  42. 42. https://bugzilla.mozilla.org/show_bug.cgi?id=574907
  43. 43. http://shopdd.blog51.fc2.com/blog-entry-932.html
  44. 44. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  45. 45. http://dynamis.jp/demo/css-gradients/
  46. 46. http://css-tricks.com/examples/ButtonMaker/http://gradients.glrzad.com/http://www.patternify.com/http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
  47. 47. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  48. 48. http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  49. 49. Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
  50. 50. http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
  51. 51. https://developer.mozilla.org/en/CSS/-moz-transform
  52. 52. https://developer.mozilla.org/En/CSS/Using_CSS_transforms
  53. 53. IE9 ...
  54. 54. http://hacks.mozilla.org/2010/06/css3-calc/
  55. 55. :link :visited :-moz-any-link
  56. 56. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  57. 57. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  58. 58. http://hacks.mozilla.org/2010/08/mozelement/
  59. 59. JS mozSetImageElement()
  60. 60. http://hacks.mozilla.org/2010/08/mozelement/
  61. 61. http://hacks.mozilla.org/2010/08/mozelement/
  62. 62. https://developer.mozilla.org/en/CSS/Media_queries
  63. 63. cm iPhone
  64. 64. http://www.alistapart.com/articles/responsive-web-design/
  65. 65. http://www.alistapart.com/articles/responsive-web-design/
  66. 66. http://www.alistapart.com/articles/responsive-web-design/
  67. 67. http://colly.com/
  68. 68. http://colly.com/
  69. 69. https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
  70. 70. WebKit DL
  71. 71. WebKit DL
  72. 72. setTimeout()/setInterval()
  73. 73. http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
  74. 74. http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
  75. 75. http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
  76. 76. https://developer.mozilla.org/en/Canvas_tutorial
  77. 77. http://www.w3.org/TR/html5/the-canvas-element.html#security-with-canvas-elements
  78. 78. http://googlecode.blogspot.com/2011/05/creating-2d-games-with-javascript-html5.html
  79. 79. http://muizelaar.blogspot.com/2011/02/drawing-sprites-canvas-2d-vs-webgl.html
  80. 80. http://processingjs.org/http://code.google.com/p/cakejs/http://graph.tk/http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]http://www.canvasdemos.com/
  81. 81. https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL
  82. 82. http://dynamis.jp/demo/smil/
  83. 83. animateColor https://bugzilla.mozilla.org/show_bug.cgi?id=436296
  84. 84. http://raphaeljs.com/http://g.raphaeljs.com/http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspxhttp://www.codedread.com/svg-support.php
  85. 85. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  86. 86. http://hacks.mozilla.org/2010/07/firefox4-beta2/
  87. 87. https://developer.mozilla.org/en/CSS/CSS_animations
  88. 88. http://www.khronos.org/webgl/
  89. 89.               http://webos-goodies.jp/archives/getting_started_with_webgl.html
  90. 90. http://blog.jprosevear.org/2011/05/13/webgl-security/
  91. 91. http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/
  92. 92. http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
  93. 93. Fx 3.6.9 https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header
  94. 94. https://developer.mozilla.org/ja/Introducing_Content_Security_Policy
  95. 95. https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy
  96. 96. https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy
  97. 97. https://developer.mozilla.org/en/http_access_control
  98. 98. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
  99. 99. http://dl.dropbox.com/u/130643/dih5ja/history.html https://github.com/
  100. 100. https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
  101. 101. https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
  102. 102. Any Question ?

×