• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5: New capabilities, new markup
 

HTML5: New capabilities, new markup

on

  • 617 views

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

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

Statistics

Views

Total Views
617
Views on SlideShare
617
Embed Views
0

Actions

Likes
1
Downloads
2
Comments
0

0 Embeds 0

No embeds

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

    HTML5: New capabilities, new markup HTML5: New capabilities, new markup Presentation Transcript

    • 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 ● 検索エンジンが見つけやすい● Future-proof ● 将来のための対策● Cool ● かっこいい
    • 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><video>/<audio> <canvas> …
    • “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,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
    • article, aside, dialog, details, figure,footer, header, hgroup, nav, section, time { display:block;} html5doctor.com/html-5-reset-stylesheet
    • flickr.com/laffy4k HTML5 in practice...HTML5を使ってみよう!