初めてのHtml5 20120612
Upcoming SlideShare
Loading in...5
×
 

初めてのHtml5 20120612

on

  • 703 views

 

Statistics

Views

Total Views
703
Views on SlideShare
703
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

初めてのHtml5 20120612 初めてのHtml5 20120612 Presentation Transcript

  • 初めてのHTML52012.07.07
  • ・自己紹介・HTML5とは・策定の進捗・XHTML/HTML4.01との違い ・レイアウト ・グラフィック・最後に
  • 岩倉 洋平 iwakura yohei主に大阪・香川を拠点として活動しているWeb制作業者です。SE/PGと営業しています。所属 : zamuu :日本Androidの会 四国支部Twitter :@dr_covaSite :http://zamuu.net/
  • HTML5とは
  • HTML5とはWhatwgとW3Cが策定を進めている次世代のHTMLです。今までのHTML4に対し、新たなタグが追加されたり、非推奨となったり。
  • HTML5とはHTMLを取り巻く要素 CSS3 Browser HTML5 JQuery PC/Phone
  • HTML5とは …とこれは『狭義のHTML5』今までのマークアップ言語は言語そのものの定義という役割で収まっていました。
  • HTML5とはもう1つ『広義のHTML5』というものがあります。カメラ・マイク・各種センサーへのデバイスアクセスデータストレージ通信制御(ソケット)マルチメディア(ビデオ・オーディオ)(まだまだありますが、代表的なAPI機能を記載)
  • HTML5とは広義のHTML5・・・HTMLでデバイス制御ができるとか夢が広がりませんか?
  • HTML5とは百聞は一見にしかずHTMLでカメラ制御(OperaMobile)<!DOCTYPE html><h1>Simple web camera display demo</h1><videoautoplay></video><script type="text/javascript">var video =document.getElementsByTagName(video)[0], heading =document.getElementsByTagName(h1)[0];if(navigator.getUserMedia){ navigator.getUserMedia(video, successCallback, errorCallback);function successCallback( stream ) { video.src = stream; }function errorCallback( error ) { heading.textContent ="An error occurred: [CODE " + error.code + "]"; }} else{ heading.textContent = "Native web camera streaming is notsupported in this browser!";}</script>
  • 策定の進捗
  • 2008年1月 HTML5 草案第1版2011年5月 HTML5 最終草案 最新技術がいい正式勧告は・・・ でしょ!
  • 2年後の2014年を目指しているそうです。冷静に考えたらHTML5ってまだ早すぎなんじゃない? そりゃないぜ~ フライング失格のボ〇ト
  • XHTML1.1/HTML4.01との違いWebサイト・Webアプリケーション・スマホアプリそれぞれ、環境条件が違います。ここでは変更点を見ながら、HTML5をどのように対応したらよいか考えてみたいと思います。
  • HTML5との大きな違いとして、そのHTMLのDOC宣言部分が良くとりあげられます。<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"lang="ja"><head profile="http://gmpg.org/xfn/11"> <title>タイトル</title></head><body>XHTML1.0です</body></html><!DOCTYPE html><html dir="ltr" lang="ja"><head> <title>タイトル</title></head><body>HTML5です</body></html>
  • DOCTYPEが簡素化されます。<!DOCTYPE html>先頭がこのタグだったらHTML5と考えてよいと思います。Web系やHTMLに弱くてもここは押さえておきましょう。
  • XHTML1.1/HTML4.01との違い- レイアウト -HTML5の中でも狭義の定義(マークアップ言語)として代表的なタグの紹介をします。
  • その他、代表的な追加タグを記載します。<header> <hgroup> <nav><section><footer>
  • 表示上は同じでも、タグがより明確に役割を宣言するようになりました。HTML5では、サイトを見る側(人・検索ボット)などにとって読みやすいようになっています。SEO対策を気にするようなWeb制作時には、より優位になると推測できます。
  • ブラウザの下位互換はどのようになるのでしょうか? え、非対応 ブラウザなの!? IE8 HTML5でサ イト作って ~♪ お任せくだ さい!
  • HTML5でマークアップしただけのサイトメニューに<nav>が適用され<li>が崩れています。
  • 下位互換表示用にhtml5.jsというライブラリを紹介します。
  • 「html5.js」を読込んだサイト<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  • もう1つサイト制作でよく使うタグ類があります。問合せフォーム等の<input>タグです。こちらも種類が増えています。date、datetime、datetime-local、month、week、time、number、range、search、tel、url、email、color
  • 入力Validatorをブラウザが勝手に行ってくれるので非常に楽です。…が、これらinput typeは未実装のブラウザがあります。
  • サイト制作において、レイアウトはHTML5の追加タグを使用していった方がSEO対策としても優位に働いてくれそうです。が、フォームについては現状のHTML4.01などと同様のままの方がよいと考えます。
  • XHTML1.1/HTML4.01との違い- グラフィック -
  • 追加タグの中でもマルチメディア関連も目立つのですが、もう1つサイト制作において使用しそうなのがグラフ描画などの<canvas>タグです。<canvas>タグで囲まれた中にJavaScriptで線や円が描けます。今までグラフ専用ライブラリ使用してませんでしたか?既にJSライブラリ化され、グラフ描画も比較的楽に描けるようになっています。
  • デモ
  • たのしい<canvas>HTML5が取り上げられるもう1つの要素スマートフォン
  • 1.ブラウザによってはレイアウト崩れや表示されないなど、未サポートであるタグも多々見受けられます。ただ、Web業界においてはこれからの動向を考えると(SEOの観点からも)、互換性を考慮しながらできるだけ導入した方が賢明だと考えます。2.デバイス連携やグラフィックなどのサポートにより、Web制作業者、システム業者ともにJavaScriptの重要性がより高まり、要望も増えて死ねる 夢が広がります。
  • ご清聴ありがとうございました。