• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
いま、Html5でできること
 

いま、Html5でできること

on

  • 3,384 views

 

Statistics

Views

Total Views
3,384
Views on SlideShare
3,211
Embed Views
173

Actions

Likes
2
Downloads
20
Comments
0

4 Embeds 173

http://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com 169
http://www.slideshare.net 2
url_unknown 1
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

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
  • \n
  • \n
  • ディスレクシア(識字困難)の方のための情報提供。\n障がい者だけでなく、被災すると負傷などで一時的にそのような状態になることもある。\n避難や対策が必要になったときに、そのような方々が情報的不利にならないように。\n
  • \n
  • \n
  • 急いでいたのでマークアップはてきとう。\nheaderとかfooterとか、cssの指定がめんどかったからやめた。\n
  • controls 属性をつけるだけでプレイヤーができるっていうのは改めて便利と感じた\n
  • \n
  • jquery mobile の javascript と CSS を読み込む\njquery も必ず読み込むこと\n
  • jQuery Mobileのカスタムデータ属性を付加する\n
  • \n
  • toggle() でcssを切り替えてテキストを表示したり隠したりする\nこれでUI完成。\n
  • オープンソースの音声合成エンジン Open JTalk\n読み違えを修正しながら wav ファイルを作成した。\n200字以上入らないから、少しづつ繰り返し合成した\n
  • 音声合成に意外と時間がかかった。\nなのでたぶんUIの作成は4~50分くらいだったんじゃないか。\n
  • \n
  • \n
  • とにかく速攻で配信したい時にすぐできる。\n
  • alpha4 で WP7 に対応した。3/31\nカスタムデータ属性でUIを指定しているのがいい。なぜかは最後に説明する。\n
  • AndroidのWebkitはogg theoraでやってみたけど無理だった。\nつーかちゃんとオーディオファイル再生できる?\n
  • audioコントローラーがちっちゃすぎ、なぜかPC Safariよりもちっちゃい。\n\n
  • ちょっとダサいけど大きいのがいい。\nこれくらいじゃないと使いにくいよね。\n
  • \n
  • デモ。JavaScriptを一切使ってない。\n
  • \n
  • \n
  • 物資の供給や義援金に比べて、ITが被災地に直接貢献できることはすくない。\nしかし、これから避難や復興の段階になるとWEBの情報が重要になってくる。\nクリエイターの皆さんは、WEBコンテンツを作成する技術を持っている。その技術で何が出来るか?震災にどのように貢献できるかを考えてほしい。そのアイデアの中にはHTML5などでやると効率がよいケースがあるはず。\n震災対策に貢献しながら、新しい技術を習得していくよい機会であるともいえる。\n
  • \n

いま、Html5でできること いま、Html5でできること Presentation Transcript

  • HTML5 2011.4.3 Untitled!!!!!!!!HTML5-WEST.jp
  • @bathtimefishWeb IT /Web /HTML5-WEST.jp / GTUG / CSS Nite in OSAKA / OSC Kansai / IT HTML5-WEST.jpHTML5 JavaScript Python Google Apps http://html5-west.jp/
  • • 1• HTML5 (AudioElement) + jQuery Mobile• Open JTalk•
  • HTML
  • AudioElement<audio controls src=”audios/a01.mp3”></audio>
  • jQuery Mobile
  • <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" /><script src="http://code.jquery.com/jquery-1.5.2.min.js"></script><script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
  • <div data-role="page" id="main"> <div data-role="header" data-position="inline" data-backbtn="false"> <h1> </h1> </div> <div data-role="content"> <p>Web </p> .... </div> <div data-role="footer"> <div data-role="navbar" id="mobile-footer-links"> <ul> <li><a href="list.html" data-transition="slideup"> </a></li> <li><a href="about.html" data-transition="slideup"> </a></li> </ul> </div>
  • / <div style="text-align:center" class="reader"> <p> 1 </span></p> <audio controls id="a01" src="audios/a01.mp3"></audio> <a href="#" id="c01" class="txtbtn"> </a> <div id="t01" style="display:none;text-align:left;padding:3px;"> ... </div> </div>
  • $("#c01").toggle( function () { $("#t01").css("display","block"); $(this).text(" "); }, function () { $("#t01").css("display","none"); $(this).text(" "); });
  • Audacity mp3
  • <video></video> <audio></audio>
  • jQuery Mobile• iPhone, Android, WinPhone, BlackBerry• non JavaScript, non CSS• HTML UI
  • Android• Android Web• Opera for Android, Firefox for Android
  • mobile safari ...
  • Firefox for Android
  • jQuery Mobile +CSS MediaQuery
  • 100
  • • jQuery Mobile HTML5• CSS3 PC• HTML5 + CSS3 + WebFw WEB
  • Thanks.