Attractive HTML5
Post on 25-Jan-2015
1747 Views
Preview:
DESCRIPTION
Transcript
Attractive HTML5
@shoitoHTML5-FIT
HTML5の魅力をこっそりと
自己紹介/shoito
宮城 → 福井 [3.5y]
ソフトウェア設計ツールの開発
Flex(Flash)アプリ開発 [3y]
技術系コミュニティ
HTML5に興味を持った訳
ITシステムの変遷
メインフレーム/ダム端末～1980年代頃
Web1990年代中頃～
C/S 1990年代初頭～
RIA2003年後半～
低 高
高
コストパフォーマンス
ユーザビリティ
参考文献：RIAシステム構築ガイド Essential 2007 p005
HTML5とワタシ
Hokuriku.lang - HTML52009/10
HTML5 Tech Talk in 金沢2009/10
WCAF Seminar Vol.3 - HTML52010/03/20
Chrome Extensions with HTML5作ろう会2010/04/12
Google Hackathon for Chrome Extension2010/04/17, 24
今日の目的 HTML5の魅力を
✤ 皆さんに共有すること
✤ 皆さんから共有してもらうこと
まずはご覧ください
9elements.com
chrome://newtab
私が感じる魅力
標準技術HTML, CSS, JavaScript
標準技術HTML, CSS, JavaScript
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
デザイナ
開発者
標準技術HTML, CSS, JavaScript
ー13
ー13
Browser is a PlatformWebアプリケーションの制約からの解放
No Plug-inFlash player, Silverlight plug-in, JavaFX runtime
Cross-PlatformWindows, Mac OS X, Linux, Chrome OS
Multi-devicePC, Mac, Mobile, .....
余談
叶わなかった願い - FlashiPhone OSへのFlash Playerの搭載
iAdiPhone/iPad向け、モバイル広告 - 広告はHTML5で作る
非Andoide Mobile AP-PFの共同開発ブラウザのHTML5対応はどうなる？
Server-Side lessオフライン、ローカルストレージ、Drag&Drop、File API、WebWorker
Web/Desktopの低い垣根Drag&Drop/File API、ネイティブアプリケーションとしてラッピング
<section>
Webがよりセマンティックにheader, nav, section, article, footer, aside
<header>
<nav> <aside>
<header>
<footer>
<footer>
<article>
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へ - 前方/後方互換性の維持(革新より発展)
常に最新のソフトウェアを使えるWebアプリケーションの特性
New！
低コストな開発/実行環境デバッグ、プロファイラなどがブラウザに組み込める/まれている
私のイチバン
HTMLデータ構造を表現
CSS見栄えを表現
JavaScript各種APIの拡張により
機能を実現
デザイナ
開発者
標準技術HTML, CSS, JavaScript
ー13
ー13
皆さんが感じたHTML5の魅力って？時間がなかったら懇親会で話しましょう
HTML5対応チェック
When can I use...
FlashってFlash Playerのこと？Flash CSのこと？
巷のFlash悲観論
ExternalInterfaceを利用したJavaScript ⇔ ActionScript連携
HTML5とFlashの共存
HTML5 / Flash 比較HTML5 Flash
公平性
互換性
PC普及率
モバイル普及率
開発者数
開発ツール
○(標準技術) ×(Adobe独占)×(ブラウザ依存) ○(Flash Playerのみ)
×(IE未サポート) ○(ほぼ100%)
△ △○(HTML, JavaScript) △(ActionScript)
○ ○
HTML5に関してコメント
HTML5,いつから使えるの？
もう, 使える機能から部分的に
iPhone/Android＆
IE以外のブラウザでは既に結構イケる
HTML5はデザイナ/開発者にとって魅力的
次期Web標準技術なので無視できない
これまでのWebの制約が変わります
提案
別に作りたいサイトやWebアプリはないという方
Chrome Extensionsで便利なツールを作っては？
Thanks!shoitosho.ito@air-life.nethttp://twitter.com/shoitoHTML5-FIT
top related