Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
•
5 likes•2,630 views
すでに多くの Web サイト、アプリケーションで利用が進んでいる HTML5。本セッションでは、Web デザインにフォーカスした HTML5 や CSS3 の機能紹介、そしてスマートフォンやタブレットに見られる、これからの Web デザインについて考えるべきことをご紹介いたします。
Google Developer Day 2010 Japan: HTML5 とウェブサイトデザイン (矢倉 眞隆)
- 3. HTML5
- 5. 単なる流行り?
- 10. • HTML5 • CSS3 • Performance • Smartphone
- 11. HTML5 HTML5 For Web Designers by Jeremy Keith flic.kr/p/8e3R8d
- 12. デザインは見た目だけじゃない。
- 15. <header> <footer> <section> <nav> <aside> <article> <figure> ...
- 18. Chrome 5, Safari 5, Firefox 4 からサポート。
- 19. Firefox 4, Chrome 7 には HTML5 パーサも内蔵。
- 21. header, footer, section, nav, article, aside, hgroup, ... { display: block }
- 22. Forms (2.0)
- 23. 新しいコントロールの追加。
- 24. <input type=search> <input type=email> <input type=url> <input type=tel> <input type=date> <input type=range> <input type=number> ...
- 27. UI の実装は Opera が進む。 Chrome, Firefoxも実装中。
- 30. <input type=tel>
- 32. CSS3 CSS Carved Pumpkin by Maurice Svay flic.kr/p/7bHSNq
- 36. 背景画像を複数重ねられる。
- 37. #elem { background-image: url(bg-front.png), url(...), ... , url(bg-rear.png); }
- 40. border-image
- 41. 画像をボーダーにする。
- 42. #elem { border-image: url(bdr.png) 5 round; }
- 44. Awesome Overlays with CSS3's Border-Image Property www.zurb.com/playground/awesome-overlays
- 46. Gradients
- 52. Visual Effects
- 55. 2D Transforms
- 56. 拡大/縮小、回転などを行う。
- 60. Transitions
- 61. 段階的に値を変化させる。
- 62. For A Beautiful Web forabeautifulweb.com
- 65. 3D Transforms
- 68. Animations
- 70. Star Wars in CSS & HTML www.gesteves.com/experiments/starwars.html A long time ago in a galaxy far, far away...
- 71. Pure CSS3 AT-AT Walker anthonycalzadilla.com/css3-ATAT/
- 79. 速くて悪いことはない。
- 80. Best Practices for Speeding Up Your Web Site developer.yahoo.com/performance/rules.html
- 81. Best Practices for a Faster Web App with HTML5 www.html5rocks.com/tutorials/speed/quick/
- 82. Mobile Web Application Best Practices www.w3.org/TR/mwabp/
- 83. • ファイルサイズは小さく。 • リクエストは少なく。 • スクリプトは高速に。
- 86. CACHE MANIFEST # ver. 2010-09-28 style.css script.js ...
- 88. data: URI scheme
- 89. 画像を base64 エンコードし data: URI にして埋め込む。
- 92. Auditing Your Web App For Speed goo.gl/ltJH
- 95. High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ t32k.com/mol/2009/11/high-performance-web-design/
- 98. All about smartphones by Denis Dervisevic flic.kr/p/7XHVjx Smartphone
- 100. 2011 年には米国で 半数がスマートフォンを所持。 Smartphones to Overtake Feature Phones in U.S. by 2011 blog.nielsen.com/nielsenwire/consumer/smartphones-to-overtake-feature-phones-in-u-s-by-2011/
- 101. 2013年にはブラウザーが載る モバイル端末が PCを超える。 Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond www.gartner.com/it/page.jsp?id=1278413
- 103. これからの Web 開発は PC だけを考えていられない。
- 107. iPhone 4.0 by Robert Scoble flic.kr/p/89Utsr Screen Size & Resolution
- 110. ズームもできるが 情報量が多いと大変。
- 112. 小さい・せまいと タップしづらい。
- 116. pixels iPhone 4 by Jordi Masagué flic.kr/p/8s33Kx Pixel Density
- 117. PCよりも高解像度 → きれい！
- 119. PC : 96 dpi iPhone 3 : 163 dpi Android* : 240 dpi iPhone 4 : 326 dpi
- 121. iPhone 4では csspx : dpx = 1 : 2
- 122. Android*では csspx : dpx = 1 : 1.5
- 123. 1 : 1 でないと 画像がぼやけて見える。
- 125. 画像を使わない表現が増えてくる?
- 126. 1. ボタンなどは CSS でつくる
- 129. 2. SVGを使う
- 130. The New York Times www.nytimes.com
- 133. ※ Androidはこれから対応……
- 136. 回線速度・品質も 大きな問題になる。
- 138. サイズは小さく リクエストは少なく。
- 139. モバイルから 設計を始めることも?
- 141. So?
- 146. ありがとうございました。