Your SlideShare is downloading. ×
0
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 入門

3,969

Published on

姫路IT系勉強会で発表した内容です。

姫路IT系勉強会で発表した内容です。

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,969
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 入門2013.3.16 @姫路IT系勉強会@spark6251 (N@N)
  • 2. 自己紹介• N@N(@spark6251)• N@N→NOaN→NOAN→ノアン• 明石高専 電気情報工学科四年生• プログラミングあんまりしてない• たぶんWeb屋進行中のお仕事• 明石高専
  • 3. ねらい• HTML5について幾らか知ってもらう• セマンティクスな構文を
  • 4. ねらい• HTML5について幾らか知ってもらう• セマンティクスな構文を• あとXHTMLdis
  • 5. セマンティクスについて――
  • 6. 内容• HTMLとは• HTML5とは• HTML 4.01との比較• 読める!DTD――1分で分かる?DTD入門• まとめ
  • 7. 1. HTMLとは
  • 8. ところで
  • 9. そもそもHTMLとはなんぞや?
  • 10. まずMIMEタイプの話Content-Type:• text/html• text/css• image/jpeg• application/pdfURLの付いてるもの全てにあるどう表示・処理すべきかの唯一の指標。参考:IANA | MIME Media Types(http://www.iana.org/assignments/media-types)
  • 11. XHTMLの話• 要素名は小文字(ex. <html>• 空要素は閉じる(ex. <br />• 全ての属性値は囲む(ex. <div width=“100”>• <html lang=“ja-JP” xml:lang=“ja-JP”>ちなみにXHTML 1.1でlang属性は廃止
  • 12. XHTMLの話1998.02:W3CによるXMLそもそもXMLは厳格な構文であるHTMLをXMLの形式で再定義できたXHTMLは厳格であるapplication/xhtml+xmlで厳格なチェック!エラーがあっても正常に[要出典]動作するHTMLとはおさらば!
  • 13. 結局使われたのはXHTML 1.0でtext/htmlつまり構文はXHTMLながら実情はHTML• application/xhtml+xml(理想)• XHTML 1.0でtext/html(現実)
  • 14. ___/ || ̄ ̄|| ∧_∧|.....||__|| ( ) どうしてこうなった…| ̄ ̄\三⊂/ ̄ ̄ ̄/| | ( ./ /W3C
  • 15. そもそもtext/htmlという逃げ道を置いていたのが悪い
  • 16. どうしてこうなった?• そもそもHTMLの時代からエラーのあるHTMLを書いている人が多かった。(現在でも99%以上のWebページが一つのエラーを含んでいるという推測も有り)
  • 17. 結論
  • 18. 誰もわざわざ厳しくしようとしなかった
  • 19. W3Cの対策• XHTML 1.1でMIMEタイプはapplication/xhtml+xmlのみに限定• XHTML 1.2、XHTML 2.0も同様(結局両方共中止)
  • 20. そして今ほとんどXHTML 1.0であり1.1は普及しなかった。XHTMLを使っているとは名ばかりのXMLらしいHTMLである。
  • 21. XHTML(developer)disXHTMLdis実態はXHTML(developer)dis
  • 22. XHTML(developer)disXHTMLdis実態はXHTML(developer)disHTMLdisちゃんとした構文で書かない
  • 23. XHTML(developer)disXHTMLdis実態はXHTML(developer)disHTMLdisW3Cdis結局そうなったのは誰のせい?ちゃんとした構文で書かない
  • 24. XHTML is HTML
  • 25. XHTML is HTMLというギャグを
  • 26. 2. HTML5とはHTML5になって何がどうなったか。HTML5で何ができるか。
  • 27. HTML5とは一体何でしょう?
  • 28. そうですね、HTML5とかJavaScriptで作ったコンテンツのことです
  • 29. 冗談はさておき
  • 30. 冗談はさておきいや割と冗談でもないんですが
  • 31. 小話• 2004.06:W3Cがワークショップを開くWebアプリケーション開発者向けの機能が出るがW3Cの構想ではない……• HTMLやCSSのためにDOMの拡張を?→否決• その機能を実現しようと離反(WHATWG)• W3CはXHTML 2.0、WHATWGはフォームなどの機能• XHTML 2.0は終息し、W3CとWHATWGは共同作業、HTML5開発へ
  • 32. つまり• HTML5の目的:明確なタグ構造、デベロッパーへの機能• 事実HTML5とはWeb Applications 1.0+Web Forms 2.0• FLASHの代替だとか、速度云々だとか、完全な勘違い
  • 33. HTML5とは• HTMLのver. 5• 2014年に策定予定• デベロッパー泣かせ(主にブラウザのせい)• HTMLと5の間にスペースは挿れない• HTML+XHTML1+DOM2 HTML• フォームがかなり強くなった
  • 34. HTML5とは今までのHTML• タグ付けした文書の製作• Webアプリケーションには不向きHTML5• より強固なタグ付け• Webアプリケーションの開発の手助け• 便利[要出典]• わかりやすい[要出典]• 神[要出典]
  • 35. canvas
  • 36. Web StorageFile APIWebGLWebSocketGeolocation API
  • 37. HTML5の機能でもJSを使う更にはJSの優良ライブラリの増加
  • 38. HTML5とは• <br />• 物理タグの論理タグ化• 意味の変わった要素• 消えた要素、新しい要素
  • 39. • u:下線→軽いラベル付け• i:イタリック体→思考や専門用品• hr:水平線→段落レベルの区切り
  • 40. • u:下線→軽いラベル付け• i:イタリック体→思考や専門用品• hr:水平線→段落レベルの区切り最早要素名から予測不可能
  • 41. • 【重要】small:小さい文字→注釈や著作権表示• address:連絡先など→連絡先のみ
  • 42. 消えた要素これについては一言だけ
  • 43. まともなHTML書いてたら消えた要素なんか使ってないので知らなくていいです
  • 44. 新しい要素• nav• section• header• footer• article• aside• video• audio• canvas
  • 45. 2013年5月2日発売
  • 46. nav<nav><ul><li><a href=""></a></li><li><a href=""></a></li></ul></nav>• 主要なナビゲーションに用いる• <ul id=“mainMenu”>に相当する(もちろんそれ以外でも主要であれば該当)
  • 47. section<article><section><header></header><div></div></section></article>• 汎用セクション• 基本的にヘッダを伴う• div要素のが汎用なブロック要素に対し、section要素は汎用なセクション
  • 48. header<header><img src="" alt="" /></header><!-- サイトのヘッダ --><section><header></header><!-- 記事の見出し --><p></p></section>• ヘッダ• 見出し• ページ全体のヘッダでも良いし、セクションごとの見出しでも良い
  • 49. footer<section><p></p><footer></footer></section><footer></footer></body></html>• フッタ• サイト全体のフッタでも良いし、セクションごとのフッタでも良い
  • 50. article<article><section><header></header><div></div></section></article>• 例えば文書、ブログ記事、コメント欄、もしくはサイト内で自己完結してる項目
  • 51. aside<article><aside></aside><!-- articleと密接な関係 --></article><aside></aside><!-- そうではない -->• 話の内容から少しそれたもの• 印刷物の囲み記事• 広告
  • 52. video<video src=""></video><video src="“ controls></video><video src="" autoplay></video>• 動画を再生する• controlsでインターフェース表示• autoplayで自動再生
  • 53. audio<audio src=""></audio><audio src="" controls></audio><audio src="" autoplay></audio>• 音声を再生する• controlsでインターフェース表示• autoplayで自動再生
  • 54. canvas<canvas id="sample"></canvas>• 図形を描く• 標準のHTMLとJSのみで図形が描ける(!)• widthとheightのデフォルト値はそれぞれ300と150
  • 55. canvas$(function() {//var ctx =document.getElementById(sample).getContext(2d);var ctx = $(#sample).get(0).getContext(2d);ctx.beginPath();ctx.fillStyle = rgba(0, 0, 0, 1);ctx.fillRect(10, 10, 10, 20);});
  • 56. 参考:HTML5 &CSS3 Support(http://www.findmebyip.com/litmus)
  • 57. 参考:HTML5 &CSS3 Support(http://www.findmebyip.com/litmus)
  • 58. 登場させる意味• 当然わかりやすい構文になる(人間にも機械にも)• (そもそもユーザエージェントはid名から意味を推測してはいけない(!))
  • 59. 3. HTML 4.01との比較HTML5ではどう書けるのか
  • 60. HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="ja-JP"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Style-Type" content="text/css"><meta http-equiv="Content-Script-Type" content="text/javascript"><title>Title</title><link rel="stylesheet" href="style.css" type="text/css"><script src=“main.js” type="text/javascript"></script>HTML5<!DOCTYPE html><html lang="ja-JP"><head><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href="style.css" /><script src=“main.js”></script>
  • 61. MIMEタイプの消失単純な話、Webで使われている標準のスタイルシートはCSSのみで、スクリプト言語はJavaScriptのみである省略された
  • 62. JavaScript
  • 63. The type attribute gives the styling language.If the attribute is present,its value must be a valid MIME typethat designates a styling language.The charset parameter must not be specified.The default value for the type attribute,which is used if the attribute is absent, is "text/css"参考:HTML Living Standard(http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-elementhttp://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-script-element)The src attribute, if specified,gives the address of the external script resource to use.The value of the attribute must be avalid non-empty URL potentially surrounded by spacesidentifying a script resource of the type given by the type attribute,if the attribute is present,or of the type "text/javascript", if the attribute is absent.
  • 64. type属性はスタイルシート言語を提供する。属性が存在する場合、その値は言語を指定する有効なMIMEタイプでなければいけない。charsetパラメータが指定することはできない。属性が存在しない場合、type属性のデフォルト値は”text/css”である。
  • 65. HTML 4.01<div class="header"><img src="" alt=""></div><div class="article"><div class="section"><div class="header"></div><p></p></div></div>HTML5<header><img src="" alt="" /></header><article><section><header></header><p></p></section></article>
  • 66. 4. 読める!DTD――1分で分かる?DTD入門ところでDTDは読めますか?
  • 67. <!ELEMENT HTML O O (%html.content;)-- document root element --><!ELEMENT DL - - (DT|DD)+ -- definition list --><!ELEMENT DT - O (%inline;)* -- definition term --><!ELEMENT DD - O (%flow;)* -- definition description --><!ELEMENT IMG - O EMPTY -- Embedded image -->参考:strict.dtd
  • 68. 形式 意味A, B A, Bがこの順でA&B A, Bが順不同で+A 子孫にAが記述可能-A 子孫にAが記述不可
  • 69. <!ELEMENT HTML O O (%html.content;)-- document root element --><!ENTITY % html.content "HEAD, BODY"><!ELEMENT HEAD O O (%head.content;) +(%head.misc;)-- document head --><!ENTITY % head.misc"SCRIPT|STYLE|META|LINK|OBJECT“-- repeatable head elements --><!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL)-- document body -->
  • 70. あれhtmlもheadもbodyも省略できるじゃん
  • 71. <!DOCTYPE html><html lang="ja-JP"><head><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href="css/style.css" /><script src=“js/main.js”></script></head><body><article><section><header></header><p></p></section></article></body></html>
  • 72. <!DOCTYPE html><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href="css/style.css" /><script src=“js/main.js”></script><article><section><header></header><p></p></section></article>
  • 73. htmlもheadもbodyもいらんかったんや!
  • 74. 結局DTDっているの?• HTML5にDTDは存在しない←表現しきれない• 自身で考えてコーディング• 自身で思う適した書き方で良い参考:WCAN mini Markup vol.11をとおして、HTML5のDTDについて考えてみた(http://chifffon.net/blog/web/entry-135.html)
  • 75. コンテンツモデル• Metadata、Flow、Sectioning、Heading、Phrasing、Embedded、Interactiveの6つのコンテンツもでるによる文書構造• 例えばa要素はFlow、Phrasing、Interactiveに属す。• block要素、inline要素の区別ではない
  • 76. <a href=""><header></header><p></p></a>問題ない構文
  • 77. それでもDTDを軽く知っておくことはミスをなくせるし、正しい文書構造にさせることは間違いない。
  • 78. 5. まとめ• HTML5で新しく出た要素でわかりやすいHTMLを• jQueryなどの手軽に使えるライブラリが増えてるのでこの機にJavaScript等の言語も<!DOCTYPE html><html lang="ja-JP"><head><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href=“css/style.css" /><script src=“js/main.js”></script></head>
  • 79. 御清聴ありがとうございました

×