View
1.170
Download
0
Category
Preview:
Citation preview
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日月曜日
Recommended