Your SlideShare is downloading. ×
0
HTML5:New capabilities, new markup新しい機能、新しいマークアップ   Daniel Davis, Opera Software         @ourmaninjapan
User Agents – not just browsersユーザエージェントはブラウザだけではない
Browsersブラウザ       User Agents   ユーザエージェント
Why use new markup?新しいマークアップの利点は?
●    Accessibility      ●                           アクセシビリティ●    Easily indexable   ●                           検索エンジンが見つけ...
Create wonderful websites with HTML5?HTML5で素敵なホームページが作れますか?
Why not use new markup?新しいマークアップの欠点は?
●    Too broad       ●                        分野が広すぎる●    Too difficult   ●                        難しすぎる●   Unsupported   ...
HTML4XHTML        HTML5
Removed elements 無くなった要素     <center>      <font>     <strike>       <u><frame>/<frameset>     <applet>        ...
Added elements追加された要素    <article>    <section>     <aside>    <hgroup>    <header>    <footer>      <nav>     <time><vide...
“Pave the cowpaths”「牛の通り道を舗装する」       flickr.com/foxypar4
Flexible syntax柔軟性のある文法      <br>      <br/><div id=”example”> <div id=example>
“If you like it, you can keep it”「今のままが良いであれば、今のままで良い」                               diveintohtml5.org
What about unsupported elements?   対応されていない要素は?
if(!/*@cc_on!@*/0) return;var e = "abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgrou...
article, aside, dialog, details, figure,footer, header, hgroup, nav, section, time {    display:block;}                htm...
flickr.com/laffy4k HTML5 in practice...HTML5を使ってみよう!
HTML5: New capabilities, new markup
HTML5: New capabilities, new markup
HTML5: New capabilities, new markup
HTML5: New capabilities, new markup
Upcoming SlideShare
Loading in...5
×

HTML5: New capabilities, new markup

418

Published on

新しい機能、新しいマークアップ

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
418
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5: New capabilities, new markup"

  1. 1. HTML5:New capabilities, new markup新しい機能、新しいマークアップ Daniel Davis, Opera Software @ourmaninjapan
  2. 2. User Agents – not just browsersユーザエージェントはブラウザだけではない
  3. 3. Browsersブラウザ User Agents ユーザエージェント
  4. 4. Why use new markup?新しいマークアップの利点は?
  5. 5. ● Accessibility ● アクセシビリティ● Easily indexable ● 検索エンジンが見つけやすい● Future-proof ● 将来のための対策● Cool ● かっこいい
  6. 6. Create wonderful websites with HTML5?HTML5で素敵なホームページが作れますか?
  7. 7. Why not use new markup?新しいマークアップの欠点は?
  8. 8. ● Too broad ● 分野が広すぎる● Too difficult ● 難しすぎる● Unsupported ● 対応されていない
  9. 9. HTML4XHTML HTML5
  10. 10. Removed elements 無くなった要素 <center> <font> <strike> <u><frame>/<frameset> <applet> ...
  11. 11. Added elements追加された要素 <article> <section> <aside> <hgroup> <header> <footer> <nav> <time><video>/<audio> <canvas> …
  12. 12. “Pave the cowpaths”「牛の通り道を舗装する」 flickr.com/foxypar4
  13. 13. Flexible syntax柔軟性のある文法 <br> <br/><div id=”example”> <div id=example>
  14. 14. “If you like it, you can keep it”「今のままが良いであれば、今のままで良い」 diveintohtml5.org
  15. 15. What about unsupported elements? 対応されていない要素は?
  16. 16. if(!/*@cc_on!@*/0) return;var e = "abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(,);var i=e.length;while(i--){ document.createElement(e[i]);} remysharp.com/2009/01/07/html5-enabling-script
  17. 17. article, aside, dialog, details, figure,footer, header, hgroup, nav, section, time { display:block;} html5doctor.com/html-5-reset-stylesheet
  18. 18. flickr.com/laffy4k HTML5 in practice...HTML5を使ってみよう!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×