• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Concentrated HTML5 & Attractive HTML5
 

Concentrated HTML5 & Attractive HTML5

on

  • 3,352 views

「ぎゅ〜っと濃縮、HTML5」と「Attractive HTML5」セッションの二本立て

「ぎゅ〜っと濃縮、HTML5」と「Attractive HTML5」セッションの二本立て

Statistics

Views

Total Views
3,352
Views on SlideShare
3,264
Embed Views
88

Actions

Likes
4
Downloads
26
Comments
0

5 Embeds 88

http://nofoon.com 74
http://www.slideshare.net 6
http://twitter.com 6
http://webcache.googleusercontent.com 1
file:// 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Concentrated HTML5 & Attractive HTML5 Concentrated HTML5 & Attractive HTML5 Presentation Transcript

    • ぎゅ∼っと濃縮、HTML5 & Attractive HTML5 マークアップからAPI、その魅力まで @shoito HTML5-FIT
    • 自己紹介/shoito
    • 宮城 → 福井 [3.5y]
    • ソフトウェア設計ツールの開発
    • Flex(Flash)アプリ開発 [3y]
    • 技術系コミュニティ
    • HTML5に興味を持った訳
    • ITシステムの変遷高 C/S RIAユーザビリティ   1990年代初頭∼ 2003年後半∼  メインフレーム Web 1990年代中頃∼   /ダム端末 ∼1980年代頃低 コストパフォーマンス 高 参考文献:RIAシステム構築ガイド Essential 2007 p005
    • HTML5とワタシ
    • 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
    • まずはご覧ください
    • 9elements.com
    • Sketchpad
    • HTML5 presentation
    • Mozilla Bespin
    • HTML5 QUEST
    • chrome://newtab
    • これまでのWebの制約が変わります
    • ここからの目的• HTML5の可能性を知ってもらうこと• HTML5に興味を持ってもらうこと• HTML5を 分かった気 になってもらうこと
    • お話すること• HTML5の概要• HTML5の構文, 追加される要素/属性• 関連APIの拡張で実現される機能• HTML5の魅力
    • 今、HTMLはVer. 4 大前提
    • WHATWG W3C Web Applications 1.0 HTML5 HTML5 Microdata HTML5 Microdata canvas 2D Context HTML5 2D ContextCross-document messaging HTML5 Communications Channel messaging device HTML Device Web workers Web workers Web storage Web storage Server-sent events Server-sent events Web sockets Web sockets
    • HTML5と関連仕様 Indexed Web workers Database API Web Storage Geolocation APIHTML5 WebSocket File API Web SQL ...etc Database
    • マークアップとAPIの仕様 HTML5
    • 前方互換性と後方互換性 HTML5の設計原則
    • 革新より発展を優先する HTML5の仕様策定スタンス
    • マークアップはよりセマンティックに Webアプリはよりリッチに HTML5がもたらす変化
    • Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により見栄えを表現 データ構造を表現 機能を実現
    • Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により見栄えを表現 データ構造を表現 機能を実現
    • Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により見栄えを表現 データ構造を表現 機能を実現
    • 新しく追加されるタグ• セクショニングする新たなタグ • section, article • header, footer • aside, nav, ...• canvas, video, audioタグ• ...etc
    • 削除されるタグ• applet• big• font• frame• strike/s• tt• ...etc
    • セクショニングする新たなタグ<article> <footer>ブログやニュース記事における セクションのフッタを表現記事本体を表現 <header><section> セクションのヘッダを指定文書などにおける一般的な <nav>セクションを表現 ページ内のリンクなど<aside> ナビゲーション情報を保持ページ内容の主題と関連が ...etcあまりない内容を指定
    • ...etc<mark> <datalist>マーキングされたテキストを表現 inputタグのlist要素と組み合わせて<progress> 入力候補を指定ダウンロードや実行中のタスクの <embed>進捗を表現 プラグインを利用するコンテンツに<command> 利用ユーザーが実行するコマンドを表現 <meter><time> ディスク容量などの測定値を表現日付や時刻などを表現 ...etc
    • HTML4の構造   HTML5の構造 html5を使ったブログのデザイン -html5doctor- -HTML5.JP
    • 入力サポート• Non-JavaScriptでバリデーションチェック• データの種類 • email • url <input name="pass" • date • tel password type="password"> • number • range • demo
    • canvasタグ<canvas id= sky ></canvas>
    • canvasタグ名前を指定してcanvas領域を置く <canvas id= sky width= 320 height= 240 />canvasに描画するにはJavaScriptを使う<script> var canvas = document.getElementById( sky ); var context = canvas.getContext( 2d ); context.fillStyle = rgb(255, 0, 0) ; context.fillRect(0, 0, 100, 100);</script>
    • video<video src= movie.mov ></video>
    • videoタグ• W3Cはタグの規定のみ• コーデック/コンテナは規定していない ブラウザの対応 Firefox ogg/theora Opera ogg/theora Safari H.264Google Chrome ogg/theora, H.264
    • videoタグsrc属性に動画ファイルのパスを指定する <video src= me.mov controls= true />ブラウザ毎にサポートフォーマットが違う複数フォーマットを指定しておくのが有効<video controls= true > <source src= me.mov type= video/quicktime /> <source src= me.ogg type= video/ogg; codecs= theora, vorbis /></video> demo
    • 独自データ属性data- で始まるサイト独自の属性適当な属性や要素がない時に独自定義<ul> <li data-country= JP >ハナミズキ</li> <li data-country= US >恋のマイアヒ</li> ....</ul>
    • XHTML1からHTML5へ その変換方法
    • <!DOCTYPE html PUBLIC -//W3C/DTDXHTML 1.0 Strict//EN http://www.w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd > DOCTYPEを変更するだけ <!DOCTYPE html>
    • XHTML / HTML5の誤解
    • JavaScript API拡張 アプリケーション・プラットフォームとしての 機能性を実現
    • Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により見栄えを表現 データ構造を表現 機能を実現
    • 関連API• Application Cache API• Communication API• Geolocation API• Web Storage• Web SQL Database• Web Workers• Web Socket• File API• ...etc
    • Application Cache オフライン実行
    • ネットワークに接続していなくてもアプリケーションを利用できるようにするAPI マニフェストファイルにファイルを列挙する CACHE MANIFEST hello.html hello.js NETWORK: server.cgi<!DOCTYPE html><html manifest= hello.manifest >
    • Communication API ウィンドウ間連携
    • Cross Document Messaging ウィンドウ間でメッセージの送受信を行うAPIメッセージの受信 window.addEventListener( message , function() { ... }, false);メッセージの送信 postMessage( hogehoge , http://example.com/ );
    • Geolocation API 位置情報
    • ブラウザ経由で位置情報を取得するAPI function showMap(position) { .... } navigator.geolocation.getCurrentPosition(showMap);位置情報の取得方法はブラウザの実装次第Firefox 3.5はGoogle Location Serviceを利用 demo
    • Web Storage セッション・ストレージ ローカル・ストレージ KEY : VALUE KEY : VALUE KEY : VALUE
    • セッション・ストレージ• ウィンドウ毎のデータを保持するストレージ• ウィンドウが閉じられるとデータは消える sessionStorage.myKey = myValue; sessionStorage.setItem( yourKey , yourValue ); sessionStorage.clear();
    • ローカル・ストレージ• 複数ウィンドウをまたがるストレージ• オリジン(プロトコル+ドメイン+ポート)毎に異なるスト レージ• ウィンドウが閉じられてもデータは保持される localStorage.myKey = myValue; localStorage.removeItem( myKey ); localStorage.clear();
    • Web Workers 並列処理
    • JavaScriptでバッググラウンド処理を実現するAPI• バッググランド処理スレッド(ワーカー)を生成する• ワーカーはJavaScriptファイルに定義する• ワーカー間ではメッセージの送受信でデータ通信する制約• バッググランドワーカーはDOMをいじれない• DOM操作はこれまで通りUIスレッド側で行う
    • File APIブラウザ上でファイル操作
    • ブラウザ上でファイル操作をするAPIファイル読み込みの制約•ユーザーアクションが必要(DnD, ファイル選択)•勝手にローカルファイルを読み込まれないように demo
    • Attractive HTML5 HTML5の魅力をこっそりと
    • ここからの目的HTML5の魅力を✤ 皆さんに共有すること✤ 皆さんから共有してもらうこと
    • 私が感じる魅力
    • 標準技術HTML, CSS, JavaScript
    • 標準技術HTML, CSS, JavaScript
    • デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3標準技術HTML, CSS, JavaScript
    • 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、ネイティブアプリケーションとしてラッピング
    • <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アプリケーションの特性
    • 低コストな開発/実行環境デバッグ、プロファイラなどがブラウザに組み込める/まれている
    • 私のイチバン
    • デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3標準技術HTML, CSS, JavaScript
    • 皆さんが感じたHTML5の魅力って?時間がなかったら懇親会で話しましょう
    • HTML5対応チェック
    • When can I use...
    • HTML5 Demos and Examples
    • Modernizr
    • 巷の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に関してコメント
    • HTML5,いつから使えるの?
    • もう, 使える機能から部分的に
    • iPhone/Android &IE以外のブラウザでは 既に結構イケる
    • HTML5はデザイナ/開発者にとって魅力的
    • 次期Web標準技術なので 無視できない
    • これまでのWebの制約が変わります
    • 提案
    • 別に作りたいサイトやWebアプリはないという方
    • Chrome Extensionsで便利なツールを作っては?
    • Thanks! shoito sho.ito@air-life.net http://twitter.com/shoito HTML5-FIT