2015年7月 第一回AITC女子部 HTML5 講演資料

1. 自己紹介
HTML5
パラレックス
ビデオと地図の活用
Trend 紙のようなデザイン 写真と記号の活用
Trend デジタルの３つの側面
Trend 好きなアーティスト
AITC 女子部 第一回 Web技術 HTML5

2. 自己紹介
エンジニア （アプリケーション開発 ＋ システム運用）
経歴
テキサス州ヒューストン育ち
中央大学法学部国際企業関係法学科 2003年卒業
シェルサービスインターナショナル (SSIJ) 2003 – 2008
アクセンチュア 2008-2015
入村 夏実
システム運用
• エネルギー会社
• コンサルティング
コンサルティング
• B2B B2C
• CMS システム導入

3. HTML5の8つの特徴的な技術
Offline &
Storage
Device AccessGraphics
Performance
& Integration
Semantics
Connectivity
CSS3
Multimedia

4. HTML5
機
能
情
報
役割
技術サーバーサイド クライアントサイド
HTML5
2014’
HTML 4/4.01 97/99’
HTML 3.2 97’
HTML 2.0 95’
93’
HTML 1
93’
Javascript / Plugins
[Silverlight, Flash]

5. HTML5
機
能
情
報
役割
技術サーバーサイド クライアントサイド
ウエブターミナル クライアントサイド
ウエブアプリケーション
情報系のクライアントサイド
ウエブアプリケーション
伝統的な
ウエブアプリケーション
Yahoo.com
Paypal
AIRregi
Google Maps
Kobo Instant Reader
MS Office 365
1 2
3 4
詳しい資料は後日 共有させていただきます

6. 事例
Parralex デザインのサイト
Sony Apple
https://www.apple.com/macbook/
http://www.sony.com/be-moved/

7. 事例
Parralex デザインと紙のような表現
unfold
http://unfold.no/

8. New York Times
http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
事例 ビデオと地図の活用
Pulitzer賞を受賞した記事

9. 事例 紙のようなデザイン、写真
と記号の活用

10. デジタル ３つの側面
ウエブデザイン/デジタルストラテジー
サービスデザインマーケティング / ブランド
FJORD
Reactive
Acquity

11. 好きなアーティスト
- Sagmeister -
http://www.sagmeisterwalsh.com/
リアリティのある写真
http://www.nobumichiasai.com/jp/main.html
日本にも影響？
紙のようなデザイン