html5 css3 websocket

HTML5 CSS3 websocket@kanayannet

2010年10月11日月曜日

はじめに

2010年10月11日月曜日

時間的に厳しいので「これは!」

っていうのだけです。

2010年10月11日月曜日

HTML５

2010年10月11日月曜日

今までの動画タグ(streaming)

2010年10月11日月曜日

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="動画URL(swf)" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="425" height="344" src="動画URL(swf)" allowscriptaccess="always" allowfullscreen="true"></embed></object>

2010年10月11日月曜日

HTML5の動画タグ

2010年10月11日月曜日

<video src="mp4などのURL" width="400" height="300" controls autobuffer>未対応ブラウザへのメッセージ</video>

2010年10月11日月曜日

実際に画面見てみましょう。

2010年10月11日月曜日

音声だけなら同じように<audio>で行けます。

2010年10月11日月曜日

新しい form 部品

2010年10月11日月曜日

<input type="range">

<input type="date" value="2010-10-09">

<input type="search" placeholder="検索ワードを入力">

2010年10月11日月曜日

実際に画面見てみましょう。

2010年10月11日月曜日

他にも色々ありますが、HTML5 ここまで

2010年10月11日月曜日

ここから CSS3

2010年10月11日月曜日

今までの丸みを帯びた、タブメニュー

2010年10月11日月曜日

画像と<td>タグを駆使して表現

<td background=”丸みのある画像”>

2010年10月11日月曜日

CSS3 のタブメニュー

2010年10月11日月曜日

border-radius (ボーダーラディウス).radius{ width: 200px; border-radius: 10px 10px 0px 0px; background-color: #ccecf4; border:solid 5px #7fcfe2; text-align: center;}

2010年10月11日月曜日

実際に画面見てみましょう。

2010年10月11日月曜日

アニメーション

2010年10月11日月曜日

今からアニメを見せます。

2010年10月11日月曜日

今までの アニメーション

2010年10月11日月曜日

アニメgif or flash or javascriptで頑張る

2010年10月11日月曜日

でも実は CSS3 で動いてますw

2010年10月11日月曜日

.anime{-moz-animation: 'anime1' 5s ease -2s infinite alternate;-webkit-animation: 'anime1' 5s ease -2s infinite alternate;-o-animation: 'anime1' 5s ease -2s infinite alternate;-ms-animation: 'anime1' 5s ease -2s infinite alternate;

}.....2010年10月11日月曜日

コーディングが長く感じますが、アニメーションの定義（色やalpha）を細かく設定できます。

2010年10月11日月曜日

また、javascript で同じアニメーションを作成するよりも、簡単(codeが少ない) 、端末の負荷も抑え気味に出来ましたw

2010年10月11日月曜日

次は、、改行に関わる話

2010年10月11日月曜日

皆さん、半角英数の連続で改行ポイントがずれる現象味わってませんか？

2010年10月11日月曜日

画面見せますね。

2010年10月11日月曜日

そんな時、「これ」使いたいけど...な事ありますよね

2010年10月11日月曜日

word-break: break-all;

これ

2010年10月11日月曜日

ファイアーフォックスなど未対応、、、

2010年10月11日月曜日

CSS3 で ついに必須になりますw

2010年10月11日月曜日

文字数、数えて<br>タグを入れる必要がなくなる

2010年10月11日月曜日

こ、こんな嬉しい事はない

2010年10月11日月曜日

CSS3 ここまで

2010年10月11日月曜日

websocket

2010年10月11日月曜日

って何？

2010年10月11日月曜日

通信プロトコルです

2010年10月11日月曜日

具体的には?

2010年10月11日月曜日

始めの接続にHTTPを使用

その後の通信はWebSocket独自

2010年10月11日月曜日

どんな特徴?

2010年10月11日月曜日

ヘッダが非常に小さくオーバーヘッドが少ない

ひとつのコネクションでデータの送受信が可能

2010年10月11日月曜日

通信が非常に高速なので。。。リアルタイムの表示が可能になる

2010年10月11日月曜日

もしかして、「リアルタイム」ですか～？ J太郎:「Yes Yes Yes...」「Web」ですか～～？ J太郎:「Yes Yes Yes...」

2010年10月11日月曜日

リアルタイムWeb チャット見せます

2010年10月11日月曜日

node.js を使います

2010年10月11日月曜日

/usr/local/bin/node ./server.js

2010年10月11日月曜日

!?

2010年10月11日月曜日

JSファイルをサーバから呼び出す時代！？

2010年10月11日月曜日

どれだけ早いか？もう一つブラウザを立ち上げますね

2010年10月11日月曜日

問題

2010年10月11日月曜日

まだまだ、未実装のブラウザもあります。

2010年10月11日月曜日

どうする？

2010年10月11日月曜日

手段はあるはず！

2010年10月11日月曜日

実装されたブラウザのみサービス展開してみる※user agent などで 画面を分岐するなど

2010年10月11日月曜日

みんな使っているうちに需要が高くなっていつのまにか、当たり前になってるかも？

2010年10月11日月曜日

Ajax がそうでしたねw

2010年10月11日月曜日

みんな、使ってみようw

2010年10月11日月曜日

ご清聴、ありがとうございました

2010年10月11日月曜日