1.
HTML5 for Designers
Slides @ Firefox DevCon 2011 in Osaka
by Tomoya ASAI (dynamis)

2.
Tomoya ASAI (dynamis)
Mozilla Japan - Technical mktg.
http://dynamis.jp/
http://facebook.com/dynamis
http://twitter.com/dynamitter
dynamis@mozilla-japan.org
dynamis ( dunamis)

3.
Agenda

4.
Agenda
about:Mozilla
Firefox.Future
CSS Design
Mobile Web
Animation
Security

5.
about:mozilla
.com brain .org heart

6.
: http://www.mozilla.org/about/manifesto.ja.html

7.
Firefox.Future
Rapid Release...

8.
http://blog.mozilla.com/channels/

9.
https://dev.mozilla.jp/2011/04/add-on-compatibility-rapid-releases/

10.
5/14 Aurora Beta
https://developer.mozilla.org/en/Firefox_5_for_developers

11.
https://developer.mozilla.org/en/Firefox_5_for_developers

12.
https://developer.mozilla.org/en/Firefox_5_for_developers

13.
5/7 Nightly

14.
https://developer.mozilla.org/en/Firefox_6_for_developers

15.
https://developer.mozilla.org/en/Firefox_6_for_developers

16.
5/7

17.
: UI

18.
https://wiki.mozilla.org/Labs/F1

19.
http://blog.mozilla.com/joe/2011/04/26/introducing-the-azure-project/

20.
http://blog.mozilla.com/dmandelin/2011/04/22/mozilla-javascript-2011/

21.
Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face

22.
http://decomoji.jp/

23.
http://webfonts.fonts.com/

24.
http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html

25.
http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html

26.
Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

27.
: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf

28.
http://hacks.mozilla.org/2009/10/font-control-for-designers/

29.
http://hacks.mozilla.org/2009/10/font-control-for-designers/

30.
http://freesoft.tvbok.com/tips/net_tips/ie9_doctype.html

31.
http://subtech.g.hatena.ne.jp/mayuki/20110510/1304997242

32.
https://bugzilla.mozilla.org/show_bug.cgi?id=574907

33.
http://shopdd.blog51.fc2.com/blog-entry-932.html

34.
Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

35.
http://dynamis.jp/demo/css-gradients/

36.
http://css-tricks.com/examples/ButtonMaker/
http://gradients.glrzad.com/
http://www.patternify.com/
http://ie.microsoft.com/testdrive/Graphics/
CSSGradientBackgroundMaker/Default.html

37.
Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

38.
http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

39.
https://developer.mozilla.org/en/CSS/-moz-transform

40.
https://developer.mozilla.org/En/CSS/Using_CSS_transforms

41.
https://developer.mozilla.org/en/CSS/Media_queries

42.
cm iPhone

43.
http://www.alistapart.com/articles/responsive-web-design/

44.
http://www.alistapart.com/articles/responsive-web-design/

45.
http://www.alistapart.com/articles/responsive-web-design/

46.
http://www.alistapart.com/articles/responsive-web-design/

47.
http://colly.com/

48.
http://colly.com/

49.
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

50.
WebKit DL

51.
WebKit DL

52.
IE9 ...

53.
http://hacks.mozilla.org/2010/06/css3-calc/

54.
setTimeout()/setInterval()

55.
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html

56.
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html

57.
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html

58.
https://developer.mozilla.org/en/Canvas_tutorial

59.
http://people.mozilla.com/~dynamis/demo/smil/

60.
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions

61.
http://hacks.mozilla.org/2010/07/firefox4-beta2/

62.
https://developer.mozilla.org/en/CSS/CSS_animations

63.
http://www.khronos.org/webgl/

64.
http://webos-goodies.jp/archives/getting_started_with_webgl.html

65.
http://blog.jprosevear.org/2011/05/13/webgl-security/

66.
http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/

67.
http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html

68.
Fx 3.6.9 https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header

69.
https://developer.mozilla.org/ja/Introducing_Content_Security_Policy

70.
https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy

71.
https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy

72.
https://developer.mozilla.org/en/http_access_control

73.
Any Question ?