Attractive HTML5

Attractive
HTML5
HTML5の魅力をこっそりと

@shoito
HTML5-FIT

ソフトウェア設計ツールの開発

Flex(Flash)アプリ開発 [3y]

ITシステムの変遷
高

C/S RIA
ユーザビリティ

1990年代初頭∼ 2003年後半∼

メインフレーム Web
1990年代中頃∼
/ダム端末
∼1980年代頃

低コストパフォーマンス高

参考文献：RIAシステム構築ガイド Essential 2007 p005

Hokuriku.lang - HTML5
2009/10

HTML5 Tech Talk in 金沢
2009/10

HTML5勉強会＠めがね会館
2010/03/12

WCAF Seminar Vol.3 - HTML5
2010/03/20

Chrome Extensions with HTML5作ろう会
2010/04/12

Google Hackathon for Chrome Extension
2010/04/17, 24

今日の目的
HTML5の魅力を

✤ 皆さんに共有すること

✤ 皆さんから共有してもらうこと

標準技術
HTML, CSS, JavaScript

デザイナ 1
ー
3
JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現データ構造を表現
機能を実現

1
ー開発者
3
標準技術
HTML, CSS, JavaScript

Browser is a Platform
Webアプリケーションの制約からの解放

No Plug-in
Flash player, Silverlight plug-in, JavaFX runtime

Cross-Platform
Windows, Mac OS X, Linux, Chrome OS

Multi-device
PC, Mac, Mobile, .....

叶わなかった願い - Flash
iPhone OSへのFlash Playerの搭載

iAd
iPhone/iPad向け、モバイル広告広告はHTML5で作る

非Andoide Mobile AP-PFの共同開発
ブラウザのHTML5対応はどうなる？

Server-Side less
オフライン、ローカルストレージ、Drag&Drop、File API、WebWorker

Web/Desktopの低い垣根
Drag&Drop/File API、ネイティブアプリケーションとしてラッピング

<header>

<section>
<header>
<nav> <aside>
<article>

<footer>

<footer>

Webがよりセマンティックに
header, nav, section, article, footer, aside

HTML5 is Simple!
doctype, meta, script, link 省略...

<!doctype html>

<meta charset= utf-8 >

<script src= xxx.js ></script>

<link rel= stylesheet href= xxx.css ></link>

段階的変化の許容
HTML4/XHTMLからHTML5へ - 前方/後方互換性の維持(革新より発展)

N
ew
！

常に最新のソフトウェアを使える
Webアプリケーションの特性

低コストな開発/実行環境
デバッグ、プロファイラなどがブラウザに組み込める/まれている

皆さんが感じたHTML5の魅力って？
時間がなかったら懇親会で話しましょう

巷のFlash悲観論
FlashってFlash Playerのこと？
Flash CSのこと？

HTML5とFlashの共存
ExternalInterfaceを利用した
JavaScript ActionScript連携

HTML5 / Flash 比較
HTML5 Flash

公平性 ○ (標準技術) (Adobe独占)

互換性 (ブラウザ依存) ○
(Flash Playerのみ)

PC普及率 (IE未サポート) ○ (ほぼ100%)

モバイル普及率 △ △
開発者数 ○(HTML, JavaScript) △ (ActionScript)

開発ツール ○ ○

HTML5,
いつから使えるの？

もう, 使える機能から部分的に

iPhone/Android
＆
IE以外のブラウザでは
既に結構イケる

HTML5は
デザイナ/開発者にとって魅力的

次期Web標準技術なので
無視できない

これまでの
Webの制約が変わります

別に作りたいサイトや
Webアプリはないという方

Chrome Extensionsで
便利なツールを作っては？

Thanks!
shoito
sho.ito@air-life.net
http://twitter.com/shoito
HTML5-FIT

Attractive HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Attractive HTML5

Ähnlich wie Attractive HTML5 (20)

Mehr von Sho Ito

Mehr von Sho Ito (19)

Kürzlich hochgeladen

Kürzlich hochgeladen (10)

Attractive HTML5