• Like
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 6,177 views
Published

Firefox Developer Conference 2011 in Osaka で使用したスライド …

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,177
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
44
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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