Enviar pesquisa
Carregar
HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~
•
3 gostaram
•
1,228 visualizações
Fuminori Mori
Seguir
2014-06-26に鹿児島市のソフトプラザかごしまで開催された一般社団法人鹿児島県情報サービス産業協会(KISA)主催のセミナーの講演スライドです。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 74
Baixar agora
Baixar para ler offline
Recomendados
2012: A Web Odyssey
2012: A Web Odyssey
Fuminori Mori
2013 wordcamptokyo初心者keynote
2013 wordcamptokyo初心者keynote
Takahiro Nakahata
体験してみようWordPress.com
体験してみようWordPress.com
Yusuke Hayasaki
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
会社を作って1年たっての考察
会社を作って1年たっての考察
Masanori Oobayashi
2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこる
Yusuke Yamamoto
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
Createjs jp study #4 20130726
Createjs jp study #4 20130726
Seigo Tanaka
Recomendados
2012: A Web Odyssey
2012: A Web Odyssey
Fuminori Mori
2013 wordcamptokyo初心者keynote
2013 wordcamptokyo初心者keynote
Takahiro Nakahata
体験してみようWordPress.com
体験してみようWordPress.com
Yusuke Hayasaki
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
会社を作って1年たっての考察
会社を作って1年たっての考察
Masanori Oobayashi
2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこる
Yusuke Yamamoto
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
Createjs jp study #4 20130726
Createjs jp study #4 20130726
Seigo Tanaka
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
Mitsuru Ogawa
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
Fuminori Mori
HTML5の話
HTML5の話
Hiroyuki Nozaki
記事には書けなかったHTML5の話
記事には書けなかったHTML5の話
Shumpei Shiraishi
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
Kazumich YAMAMOTO
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
人の言うことを簡単に信じるな!
人の言うことを簡単に信じるな!
Mitsuo Kawashima
HTML と CSS の社内勉強会を主催した話
HTML と CSS の社内勉強会を主催した話
suno88
HTML初心者向け勉強会
HTML初心者向け勉強会
SakiKomuro
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
KoichiNakagawa4
モダンなモバイル開発のススメ
モダンなモバイル開発のススメ
Daichi Kamemoto
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜
Yuzuru Sano
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
「Onedrive for Business」をチョットだけカスタマイズしてみる
「Onedrive for Business」をチョットだけカスタマイズしてみる
Kosuke Kuromiya
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Hirofumi Ota
Office 365 とのつき合い方
Office 365 とのつき合い方
Hirofumi Ota
実践!構造化マークアップ
実践!構造化マークアップ
Hiroyuki Ogawa
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
Akihiro Sugiyama
Mais conteúdo relacionado
Semelhante a HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
Mitsuru Ogawa
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
Fuminori Mori
HTML5の話
HTML5の話
Hiroyuki Nozaki
記事には書けなかったHTML5の話
記事には書けなかったHTML5の話
Shumpei Shiraishi
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
Kazumich YAMAMOTO
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
人の言うことを簡単に信じるな!
人の言うことを簡単に信じるな!
Mitsuo Kawashima
HTML と CSS の社内勉強会を主催した話
HTML と CSS の社内勉強会を主催した話
suno88
HTML初心者向け勉強会
HTML初心者向け勉強会
SakiKomuro
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
KoichiNakagawa4
モダンなモバイル開発のススメ
モダンなモバイル開発のススメ
Daichi Kamemoto
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜
Yuzuru Sano
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
「Onedrive for Business」をチョットだけカスタマイズしてみる
「Onedrive for Business」をチョットだけカスタマイズしてみる
Kosuke Kuromiya
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Hirofumi Ota
Office 365 とのつき合い方
Office 365 とのつき合い方
Hirofumi Ota
実践!構造化マークアップ
実践!構造化マークアップ
Hiroyuki Ogawa
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
Akihiro Sugiyama
Semelhante a HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~
(20)
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
HTML5の話
HTML5の話
記事には書けなかったHTML5の話
記事には書けなかったHTML5の話
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
人の言うことを簡単に信じるな!
人の言うことを簡単に信じるな!
HTML と CSS の社内勉強会を主催した話
HTML と CSS の社内勉強会を主催した話
HTML初心者向け勉強会
HTML初心者向け勉強会
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
HoloLensで初めての客先デモ~覚えておきたい4つのコト~
モダンなモバイル開発のススメ
モダンなモバイル開発のススメ
Htmlのコトバ
Htmlのコトバ
エンタープライズパッケージを利用しました〜HTML Exporter編〜
エンタープライズパッケージを利用しました〜HTML Exporter編〜
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
「Onedrive for Business」をチョットだけカスタマイズしてみる
「Onedrive for Business」をチョットだけカスタマイズしてみる
SharePoint Online を JavaScript でイジる。
SharePoint Online を JavaScript でイジる。
Office 365 とのつき合い方
Office 365 とのつき合い方
実践!構造化マークアップ
実践!構造化マークアップ
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
HTML5 Will Take You Higher! ~HTML5は実務で使える段階へ~
1.
HTML5 Will Take
You Higher! ∼HTML5は実務で使える段階へ∼
2.
目次 ✦ 自己紹介 ✦ HTML5って? ✦
実務で使えるHTML5 ✦ 便利ツール ✦ 学習サイト ✦ 本日のまとめ
3.
自己紹介
4.
自己紹介 名前 森 史憲(もり ふみのり) 出身・現住所 鹿児島市 特徴 丸メガネ、丸ぼうず(休止中) 2014年5月4日 枕崎市 火之神公園
5.
自己紹介 フリーランスのHTMLコーダー ★基本的にはコーダーですが、 鹿児島ではディレクションもお受け してます! ★基本はシステム用のテンプレート HTMLのコーディング ★最近は対象ブラウザが「IE9以上」 という案件も出てきてます。 Suite HAIR DESIGN http://www.suite-hairdesign.com/ ディレクション/コーディング/運用
6.
自己紹介 雑誌記事 / 書籍執筆 ★HTML5&CSS3 ポケットリファレンス (技術評論社) ★イラストいっぱいで子供さんの プログラミング教育にもおすすめ! ★Amazon、7netショッピングや 全国の書店でお求めいただけます! ★電子版は技術評論社の電子書籍 サイトでお求めいただけます!
7.
自己紹介 Webサイト制作技術講師 ★Webサイト制作技術専門講座 NPO法人 鹿児島インファーメーション ★HTML5&CSS3およびjQuery、 HTML5 APIを学習する講座
8.
カレーLOVE! カレー屋 匠 ★匠盛 (和牛・黒豚あいがけ) ビールLOVE! 城山観光ホテルの地ビール ★ベルギーホワイト ★スタウトエール黒糖 チョコレートLOVE! パティスリー・ヤナギムラ ★薩摩チョコチップス 自己紹介
9.
HTML5って?
10.
★HTML5はHTMLの5つめのバージョン ★これまでのバージョンであるHTML4、 XHTML1と互換性がある HTML5って?
11.
★Webアプリケーションを作ることを志向 ✴ 狭い意味でのHTML5は文書構造だけ ✴ 広い意味では見た目の装飾をする「CSS3」、 デバイスの機能を利用可能にする 「JavaScript
API」を含む HTML5って?
12.
http://en.wikipedia.org/wiki/HTML5 狭い意味のHTML5 ↓ 広い意味のHTML5→
13.
HTML5って? ★実例 ✴ 幅によってレイアウトを変更するWebサイト -レスポンシブWebデザイン スマホ版 PC版
14.
HTML5って? ★実例 ✴ 3DCGを利用した ゲーム -翠星のガルガンティア http:// fly.gargantia.jp/
15.
HTML5って? ★実例 ✴ IDを必要としないビデオ通話アプリ ✴ talky -
https://talky.io/
16.
なぜHTML5は街へ出るの? https://talky.io/
17.
★実例 ✴ 表示をHTML5で行う モバイルOS (アプリもHTML5) - Firefox
OS - Tizen HTML5って? Firefox OS スクリーンショット
18.
★実例 ✴ アプリからTVに 動画配信を指示 ✴ Chromecast向け アプリ開発 https://github.com/ googlecast HTML5って?
19.
HTML5って? ★実例(ニュース) ✴ デジタルサイネージの表示 ✴ 通常時は広告・公共情報、災害時は災害情報 ✴
NTT、スマホで情報をリレーして街中のデジタル サイネージを連携させるシステムを実験 http://www.rbbtoday.com/article/ 2013/11/19/114056.html
20.
HTML5って? ★実例(ニュース) ✴ 車載ディスプレイのブラウザ&アプリ ✴ ブラウザ表示をWebkitベースに変更 ✴
車載組込ブラウザの過去7年と今を40分でまとめ てみる http://www.slideshare.net/naohikowatanabe/ 740-30295639
21.
http://helloracer.com/webgl/
22.
★実例(ニュース) ✴ スマート家電をHTML5アプリで操作 ✴ Kadecot(カデコ)プロジェクト http://kadecot.net/ HTML5って?
23.
http://kadecot.net/
24.
実務で使えるHTML5
25.
HTML編(5つ紹介)
26.
実務で使えるHTML5(HTML 1/5) ★意味付けをする新しい要素 ✴ nav,
article, section, aside, header, footer, main ...etc 例)<article> <h1>ベルギーのチョコレート</h1> <p>ゴディバもおいしいけどピエール・マルコ リーニもね。</p> </article>
27.
※IE8は JavaScript (HTML5shiv)
で補うことが可能
28.
実務で使えるHTML5(HTML 2/5) ★すべての要素に任意の属性を設定 ✴ data-*属性 例)<div
data-beertype=”ホワイトエール”> 城山ブルワリー ベルギーホワイト </div>
29.
30.
実務で使えるHTML5(HTML 3/5) ★プラグインなしで動画や音声を埋め込み ✴ video要素、audio要素 例)<video
controls width="800" height="600"> <source src="video.mp4" type="video/ mp4"> <source src="video.webm" type="video/ webm"> </video>
31.
32.
33.
実務で使えるHTML5(HTML 4/5) ★オフライン時に閲覧するファイルリストを 指定 ✴ html要素のmanifest属性 例)<html
lang="ja" manifest="manifest.appcache"> … <p>オフライン時でもこのファイルは見ること ができます</p>
34.
★html要素のmanifest属性 例)manifest.appcache CACHE MANIFEST index.html 実務で使えるHTML5(HTML 4/5)
35.
★html要素のmanifest属性 例).htaccess AddType text/cache-manifest .appcache 実務で使えるHTML5(HTML
4/5)
36.
37.
★入力例の表示 ✴ input要素placeholder属性 例)<input type=
text name= curry_shop placeholder="例)カレー屋 匠"> 実務で使えるHTML5(HTML 5/5)
38.
39.
CSS編(6つ紹介)
40.
実務で使えるHTML5(CSS 1/6) ★角丸表示 ✴ border-radiusプロパティ 例)div
{ background: green; border-radius: 10px; }
41.
42.
実務で使えるHTML5(CSS 2/6) ★ウインドウ幅によって表示を変える ✴ @media 例)#wrapper
{ width: auto; margin: 0 auto; } @media only screen and (min-width:600px) { #wrapper { width: 600px; } }
43.
44.
★端末内にないフォントを使って文字を表示 ✴ @font-face 例)@font-face { font-family:
"Butterfly Effect"; src: url(UnT_efeitoBorboleta.eot); } body { font-family: "Butterfly Effect"; } 実務で使えるHTML5(CSS 3/6)
45.
46.
★複数の背景指定 ✴ backgroundプロパティ 例)div { background:
url(bg1.png) no-repeat 0 0, url(bg2.png) no-repeat 0 0 skyblue; } 実務で使えるHTML5(CSS 4/6)
47.
48.
★レイアウトに影響しない線 ✴ outlineプロパティ 例)input:focus {
outline: 2px solid orange; } 実務で使えるHTML5(CSS 5/6)
49.
50.
★変形 ✴ transformプロパティ 例)div { transform:
rotate(30deg); -webkit-transform: rotate(30deg); } 実務で使えるHTML5(CSS 6/6)
51.
52.
JavaScript編(4つ紹介)
53.
実務で使えるHTML5(JavaScript 1/4) ★ブラウザにデータを保存 ✴ localStorage,
sessionStorage 例)var storage = sessionStorage; storage.setItem("height","172"); var myheight = storage.getItem("height");
54.
55.
★ウインドウ幅によって動きを変える ✴ matchMedia 例)if (window.matchMedia(
"(min-width: 600px)" ).matches) { /* ウインドウ幅600px以上の時 */ } else { /* ウインドウ幅599px以下の時 */ } 実務で使えるHTML5(JavaScript 2/4)
56.
57.
★グラフなどの描画領域を確保 ✴ canvas要素 例)var ctx
= document.getElementById("myChart"). getContext("2d"); ctx.fillRect(0,0,50,50); 実務で使えるHTML5(JavaScript 3/4)
58.
chart.js→ http://www.chartjs.org/
59.
★緯度・経度の取得 ✴ navigator.geolocation 例)navigator.geolocation.getCurrentPosition( function(pos){ //正常処理 }, function(pos){ //エラー処理 }); 実務で使えるHTML5(JavaScript
4/4)
60.
61.
便利ツール
62.
★ブラウザのサポート状況を確認する ✴ Can I
use... http://caniuse.com/ ✴ Quirksmode http://www.quirksmode.org/ 便利ツール
63.
★ブラウザごとの違いを吸収する ✴ Modernizr(HTML5 shiv
+ α) http://modernizr.com/ ✴ normalize.css http://necolas.github.io/normalize.css/ ✴ jQuery http://jquery.com/ 便利ツール
64.
★手っ取り早く形にするフレームワーク ✴ Bootstrap(最も知られているフレームワーク) http://getbootstrap.com/ ✴ 主要なフレームワーク http://webnaut.jp/CSS-Framework-Comparative-Chart/ ✴
いろーんなフレームワーク http://usablica.github.io/front-end-frameworks/ compare.html 便利ツール
65.
学習サイト
66.
✴ ドットインストール http://dotinstall.com/ ✴ CodeAcademy (英語に抵抗が少なければおすすめ) http://www.codecademy.com 学習サイト
67.
本日のまとめ
68.
★ HTML5の活用領域はかなり広い! ★ 実務で使えるHTML,
CSS, JavaScript APIは だいぶ増えてきた! ★ ツール類、学習サイトが充実してきた! 本日のまとめ
69.
HTML5を実務で どんどん取り入れて
70.
いち早く新しい価値を 生み出しましょう
71.
鹿児島ならではの問題を 解決する製品で
72.
世界を目指しましょう!
73.
ご清聴ありがとうございました! m(__)m
74.
http://codepen.io/ moonglows76/public-list/
Baixar agora