Enviar pesquisa
Carregar
Web Platform -- Moving Forward!
•
7 gostaram
•
3,436 visualizações
M
Masataka Yakura
Seguir
Firefox Developers Conference 2011 in Osaka (2011年5月14日開催) のトークセッションで使ったスライドです。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 69
Baixar agora
Baixar para ler offline
Recomendados
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
Recomendados
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
Polymerで作る次世代ウェブサイト
Polymerで作る次世代ウェブサイト
Eiji Kitamura
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
Jun-ichi Sakamoto
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
Mais conteúdo relacionado
Mais procurados
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
Polymerで作る次世代ウェブサイト
Polymerで作る次世代ウェブサイト
Eiji Kitamura
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
Jun-ichi Sakamoto
Mais procurados
(20)
GDG Women DevfestW
GDG Women DevfestW
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
HTML5開発最前線
HTML5開発最前線
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
_HTML5で組んでみた_
_HTML5で組んでみた_
Polymerで作る次世代ウェブサイト
Polymerで作る次世代ウェブサイト
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
マークアップ講座 01b HTML
マークアップ講座 01b HTML
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
Semelhante a Web Platform -- Moving Forward!
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
Attractive HTML5
Attractive HTML5
Sho Ito
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
CSS Design and Programming
CSS Design and Programming
Taku AMANO
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
日本マイクロソフト株式会社
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Makoto Kato
JavaScript.Next
JavaScript.Next
dynamis
HTML5 in Firefox4
HTML5 in Firefox4
dynamis
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
日本マイクロソフト株式会社
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
y_uuki
NET5 and Diagnostics
NET5 and Diagnostics
Kazushi Kamegawa
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
taskie
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
Masakazu Muraoka
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
david9142
Ruby on Rails Tutorial Chapter5-7
Ruby on Rails Tutorial Chapter5-7
Sea Mountain
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
Oda Shinsuke
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
ThinReports
Semelhante a Web Platform -- Moving Forward!
(20)
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Attractive HTML5
Attractive HTML5
Mvc conf session_5_isami
Mvc conf session_5_isami
CSS Design and Programming
CSS Design and Programming
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
【BS4】時は来たれり。今こそ .NET 6 へ移行する時。
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
JavaScript.Next
JavaScript.Next
HTML5 in Firefox4
HTML5 in Firefox4
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
NET5 and Diagnostics
NET5 and Diagnostics
Html5概要 & デモ
Html5概要 & デモ
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Ruby on Rails Tutorial Chapter5-7
Ruby on Rails Tutorial Chapter5-7
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Último
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
Último
(9)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
Web Platform -- Moving Forward!
1.
Web Platform Moving Forward! Masataka
Yakura (myakura)
2.
HTML5
3.
実装進んでます!
4.
HTMLパーサはFx4, Cr7で実装。 dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline- svg-speed-and-more/
5.
HTML中にSVGを書ける。 グラフや高解像度対応に最適。
6.
フォームの実装も着々と。 developer.mozilla.org/ja/HTML/HTML5/Forms_in_HTML5
7.
<input type=foo> のフル実装と フォームのスタイルづけが課題か。
8.
W3C Confirms May
2011 for HTML5 Last Call www.w3.org/2011/02/htmlwg-pr.html
9.
5/24に Last Call
公開(予定) ただ、一回じゃ終わらない。
10.
安定すると思いきや 大きな変更の可能性も……
11.
<hgroup> なくなるかも? www.w3.org/html/wg/tracker/issues/164
12.
CSS
13.
CSS 2.1, Selectors,
Color そろそろ勧告。 www.w3.org/TR/CSS/ standards.mitsue.co.jp/resources/w3c/TR/css-2010/
14.
CSS2がひと段落したので 今後はCSS3, CSS4 (!)
が進む。
15.
CSS Animations Appleの拡張由来。Geckoで実装。 dev.w3.org/csswg/css3-animations/
16.
CSS3 Text 影、下線、行送りなど。 dev.w3.org/csswg/css3-text/
17.
text-decoration 下線とかのスタイルを変更できる。
18.
mark.spelling {
text-decoration-color: red; text-decoration-style: wavy; }
19.
CSS Image Values
& Replaced Content Module dev.w3.org/csswg/css3-images/
20.
Gradients, image(), element(), object-fit
などを定義。
21.
Gradients Opera, IEでも実装中。
22.
-webkit-linear-gradient(...)
(._. )... -moz-linear-gradient(...) -ms-linear-gradient(...) -o-linear-gradient(...) linear-gradient(...) -webkit-gradient(linear, ...)
23.
Gradientsを先に進めるため 遅れたものは Level 4
行きかも?
24.
image() 代替画像、dpiの指定。
25.
body {
background-image : image( "vector.svg", “raster-hi.png" 150dpi ); ... }
26.
element() 任意の要素を画像として取得。
27.
-moz-element() の標準化。 hacks.mozilla.org/2010/08/mozelement/
28.
object-fit アスペクト比を保って拡大縮小。 dev.opera.com/articles/view/css3-object-fit-object-position-ja/
29.
30.
img {
width: 500px; height: 500px; border: 10px solid; ... }
31.
img {
width: 500px; height: 500px; border: 10px solid; object-fit: contain; ... }
32.
CSSレイアウト
33.
レイアウトに関係する モジュールがやたら多い。
34.
• Template Lyt
• Regions • Grid Align • Exclusions
35.
Template Layout display, position
を拡張。 www.w3.org/TR/css3-layout/
36.
body {
display: "aaaa" "bccc" "dddd"; } #header { position: a } #sub { position: b } #main { position: c } #footer { position: d }
37.
実装なし。 なくなるかもしれない?
38.
Grid Alignment テーブルっぽい指定。 dev.w3.org/csswg/css3-grid-align/
39.
40.
#doc {
display: grid; grid-columns: 150px 1fr; grid-rows: 50px 1fr 50px; } #item1 { grid-column: 2; grid-row: 1 4; }
41.
Microsoftが提案 IE10で試験的に実装中。 blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview- and-css-features-for-adaptive-layouts.aspx
42.
Regions テキストの流れる領域を指定。
43.
44.
Exclusions 四角形以外でfloatするような。
45.
46.
どちらもAdobeの提案。 試験実装あり。 www.adobe.com/devnet/html5/articles/css3-regions.html
47.
被る機能があるので それぞれの提案を評価中。 lists.w3.org/Archives/Public/www-style/2011Mar/0216.html
48.
Multi-column Layout www.w3.org/TR/css3-multicol/
49.
テキストを段組
これまで段組は から文章中心の で 表 現 す る CSS table を 使 っ て Webサイトで広 モジュール。複 無理やり実現す く活用されてい 数のブラウザで るしかなかった。 くのではないだ 実装が進行中だ。 Multicol は こ れ ろうか。
50.
#intro {
column-count: 3; column-gap: 1.5em; }
51.
Gecko, WebKitは接頭辞あり、 Opera, IE10では接頭辞なしの実装。
52.
Flexible Box Layout dev.w3.org/csswg/css3-flexbox/
53.
幅にあわせ伸びるボックス、 ボックスの並び替えなどを実現。
54.
SD
HD
55.
ここは固定幅 ほどよくのびてくれる
56.
Gecko, WebKitが独自に実装。 TridentもIE10で実装中。
57.
新しいWDで仕様が変更に…… (実装は古いものを参照)
58.
そのほか
59.
WebApps WG www.w3.org/2008/webapps/wiki/PubStatus
60.
File APIs, IndexedDBが実装中。 Clipboard
Oprsなど新しい仕様も。
61.
Web Performance WG www.w3.org/2011/04/webperf
62.
時間計測、描画最適化など パフォーマンス関連の仕様を策定。
63.
requestAnimationFrame() dvcs.w3.org/hg/webperf/raw- file/tip/specs/RequestAnimationFrame/Overview.html
64.
オフスクリーン時などの アニメーションの処理を最適化。 paulirish.com/2011/requestanimationframe-for-smart-animating/
65.
CSS WG (!?)
66.
CSSOM View getClientRects()とかを定義。 dev.w3.org/csswg/cssom-view/
67.
window.matchMedia() メディアクエリーをスクリプトから。 developer.mozilla.org/en/CSS/Using_media_queries_from_code
68.
var mql =
matchMedia("(orientation:landscape)"); mql.addListener(handleOrientationChange); function handleOrientationChange(mql) { if(mql.matches) { // よこよこ // 横のなにか } else { // 縦のなにか } }
69.
いろんなことが進んでますよ!
Baixar agora