Home > CSS

CSS Archive

[seminar] WCAN 2009 Autumn SESSION-2 菊池崇さん [study]

Pocket

wcan2009AutumnL

時間作れたんで、昨日の続き。

[seminar] WCAN 2009 Autumn [study]

ではでは、WCAN 2009 Autumn のSESSION-2 菊池 崇さんのお話について。

2)60分できる!実践 HTML5 & CSS3ウェブサイト 菊池 崇さん

印象が残っている内容と、メモ書きしている内容を列挙。

・HTML5の日本の盛り上がりはすごい!海外では日本よりはあんまり盛り上がっていない。なぜなら、仕様がまだFixしてないから。

・W3Cがフィードバックが欲しいため、2009年10月公開と発言!まんまとしてやられたということです。
(今のドラフトはまだ変わる。仕様決まるのは来年2~3月くらい???)

・XHTML+SVG+SMIL+XForm(XHTML2.0は互換性がない。。。)

・Web Forms2+Web Application1.0=HTML5の基本の基本。

・HTML5が生まれた理由は、ブラウザのパーサ問題とエラーのハンドリング問題を解決しようよ!という趣旨。
(HTML5が生まれた理由:「ブラウザのパーサーの問題」、「エラーの扱いの問題」。
Safari、Chrome、Firefox、OperaはHTMLパーサーと、XMLパーサーを搭載しているが、
Internet Explorerは8でもHTMLパーサーのみ。。。やっぱりIEですね。。。)

・Alexsaのトップサイト93%がなんらかのエラーを含んでいる。 (93% invalid)

・DOM(ドキュメントオブジェクトモデル)を基本として、作成すれば、パーサ問題とエラー問題が解決!

・全部、Javascriptを使うと、いろんなことができる!!
(Web Works,Web socket,Web Storage,Web Database,Geolocation API)

コンテンツ・モデル – HTML5タグリファレンス – HTML5.JPから引用。

content-venn

・HTML5について、<h1>がいくつあってもOK。html5にはDTDはない。、<!DOCTYPE html>でスッキリ。
img要素にaltが必須ではなくなった。すげぇー!まぁ必須ではなくなったんで、あってもいいんですよ。
html5

・チェックするならこのサイトが一番いい!
Validator.nu (X)HTML5 Validator

・html5用のreset.cssには、sectionなどの新しい要素に対してはdisplay:block;をかける必要がある。
(なぜなら、モダンブラウザがHTMLの新要素をインライン要素として扱ってしまうため。)

・IE8専用のjavascriptをレミーさんが作ってくださった。その名も、html5.js

・CSS3について、Vender prefixについて要確認!

・簡単に言えば、CSS3だけで、グラデーションや、ドロップシャドーとかができるようになった。あのiPhoneの下側が透明で反射してるやつも可能。
けどね、あれはもう古いデザインだと思うんですよ。ww

・マウスオーバーすると変化するようなアクションも可能。数秒違いで、ぜんぜんイメージが変わってくる。

・Blockで定義しているので、レイアウトの配置を変更することが簡単になった。

最後に、
html5はjavascriptとDOMを勉強しておいてくださいね。
とのことです!

そんな感じですです。

From xxxYukihiroxxx

Pocket

[blog] どうしてキャッシュから見てしまうのか?

Pocket

ここ最近、キャッシュからのアクセスが目に付く。
キャッシュで見なくても、正常にページは閲覧できるのに、なぜかキャッシュからアクセスしている。

どういう心理でアクセスしているのかがわからないんですが、自分なりに考察。

1)キャッシュで見ると、探している単語に色が付くから見やすい。(Googleの場合)
2)有効なアクセス数をカウントしたくない。(これはキャッシュで見てもアクセスにカウントされちゃってるんで、(オリジナルのカウンター)どこからアクセスしているのかもしっかりわかる。)

ログチェックはサーバーから3時間単位で、指定したメールアドレスに飛ばすようにしています。
3時間の間で1000アクセスオーバーしてた場合、こりゃ晒されてるのか?って心配になってアクセスログを見るわけです。w
けれど、それはbotさんの足跡で、嬉しいことなんです。

今までに自分がキャッシュで検索したことがあるといえば、普通にクリックして、ページが見れなかった場合とかはキャッシュを見に行くようにしています。

それ以外、キャッシュは使ったことがないんですゎ。w

まぁWeb上に公開する限り、キャッシュしないでね。っていうタグを入れればキャッシュされずに済むわけですが、キャッシュしないでね。というのは
ほとんどセキュリティで403を返しています。
認証が必要なのだから、キャッシュも取れないし、アクセスも出来ないわけで。

ちなみに、キャッシュしないでね。のタグはこれ。
˂meta name="robots" content="noarchive"˃

これは有効なタグなのかどうかというのは、他の方が書いているので、検索してみてください。

まぁキャッシュだと一目で探している単語が発見できるという点は優れていますが、他になにが有意義なのかが未だにわかりません。

皆さんはキャッシュ意識して使ったことありますか??

From xxxYukihiroxxx

Pocket

[html5] どこまで作りこむことができるか挑戦したいと思う。 [challenge]

Pocket

ベースをどうしようか?というのが問題だが、とりあえず、先日記事として投稿した3Dベースでやってみたいと思うが、まずは自分が知っているJavascriptでできる限り操ってみようかと。

no flashかぁ。。。

時間が許される限り、いろいろと作りこんでみて公開?するかどうかはさておき、やってみたいと思う。
CMS系は恐らくXHTML1.0で止まるかもしれません。すでにHTML4.1で止まっているCMSもありますので。

けれど、XHTML2がHTML5に統合という話も出てきておりますので、今後の動向に注目です。

XHTML 2 WGが活動終了へ、XHTML 2.0も策定終了に Web標準Blog ミツエーリンクス

消えちゃうといけないので、とりあえず引用しておきます。

2009年07月03日
XHTML 2 WGが活動終了へ、XHTML 2.0も策定終了に
フロントエンド・エンジニア 矢倉

タイトルのとおりですが、XHTML 2.0をはじめとする各種XHTML仕様を策定していたXHTML 2 WGの活動が、年内で終了することがアナウンスされました。W3Cは、今後はHTML5に注力すると発表しています。

今後のXHTMLはHTML5でXHTML 1.1などのメンテナンスは活動終了までに行うものの、次世代のXHTML仕様はXHTML2 WGで行いません。すなわち、XHTML 2.0の策定は終了ということになります。

今後のXHTMLは、HTML5で定義されます。名前が「HTML5」とあるため紛らわしいのですが、HTML5仕様にはXML構文も含まれており、これは「XHTML5」と便宜的に呼ばれています。XMLでもcanvasやvideo要素などを利用することができるのです。

「XHTML 2.0と統合する」というわけではありませんが、機能のほとんどすべてがXHTML5でもカバーできるとされています。
#たぶんここ、誤字かと。XHTML5->HTML5

XHTMLの今後に関するFAQも公開
HTML5の策定については以前より「XHTMLを蔑ろにしている」といった誤解が多く見られます。今回の決定でさらに誤解が広まることを危惧したのか、「Frequently Asked Questions (FAQ) about the future of XHTML」という文書があわせて公開されています。先ほど日本語訳を公開しましたので、参考にしていただけたらと思います。

XHTML の今後に関する FAQ

解決すべき問題の幅広さ、大きなテーマである「実装の互換性確保」など、HTML5の策定には時間がかかります。少しずつですが進んでいってくれればと思います。

W3C,マークアップ言語「XHTML 2」を「HTML 5」に統合へ:ITpro

消えちゃうといけないので、とりあえず引用しておきます。

W3C,マークアップ言語「XHTML 2」を「HTML 5」に統合へ 記事一覧へ >>  Web関連技術の標準化団体World Wide Web Consortium(W3C)は米国時間2009年7月2日,マークアップ言語HTMLをXMLで再定義した言語「XHTML 2」について,策定担当ワーキング・グループ(WG)の憲章(行動指針)「XHTML 2 Working Group charter」の適用を2009年末で打ち切ると発表した。同憲章を更新せず,HTML担当の「HTML WG」に投入するリソースを増やすことで「HTML 5」仕様の策定作業を加速させ,HTML開発の方向性を明確化する考え。

W3CはXHTMLをHTMLのXMLシリアライゼーション(XML形式への変換)と見なしている。HTML 5仕様にXMLシリアライゼーションを含め,引き続きHTML WGで検討していく。現在HTML 5仕様でこのXMLシリアライゼーションは「XHTML 5」と呼んでいるが,今後HTML 5仕様のなかで定義する見込みという。

XHTML 2 WGが提供している仕様書などは,ほかのWGが作業を引き継ぐ。

[発表資料へ]

(ITpro) [2009/07/03]

最近、注目していた記事が消える消える。。。
キャッシュを探しに行くというのもなんか嫌なんで、引用するようにします。
本当にMemo代わりになってしまいそうですが、申し訳。

From xxxYukihiroxxx

Pocket

[モバイルサイト] 構築の際の注意点

Pocket

ちょっとここで整理。
構築というか、コーディングと言った方が正解??

<a>:リンクタグ
<img>:画像挿入タグ
<div>:汎用ブロックレベル
<br>:改行タグ
<font>:フォントタグ
<hr>:区切り/水平線タグ
<center>:中央揃え
<marquee>:マーキータグ

いろいろと3キャリアでも制限や規制がかかっていてどうもこうもいかないときがあります。
しかも、PCとは違い、CSSも読み込まれません。
だから、どうするか?というお話です。

結論、<div style= “” ></div>で行ってしまえ!
という話です。w

キャリア対応はもちろん、その機種の横幅がどれぐらいなのか?というのも必要ですが機種別に横幅(width)を切り替えて表示するようなのがあればすごい嬉しいので、ちょっと探してみようかと。恐らく完全対応しているところもあると思うが、それを自分でカスタマイズしてみたいという願望もある。w

ちょっと携帯Flash待受けで自分が作った作品を販売すると仮定して考えたとき、何が必要か?って想像したら
サーバー・カード決済(電子決済システム)・各種キャリア対応・そして、横幅(width)自動対応。

Flashの場合は、おまじないをかけてるので問題は特にないが、ビミョーに修正が必要。

ここまで揃っていれば、ASPでも提供は出来ると思うし、パッケージとして販売することもできる。
お金が発生するとメンテナンスももちろんのこと、サポートも必要になる。
恐る恐る自分のHPだけで稼働中というのもおかしくはない。

iPhoneもiTouchのアプリケーションもそうだが、無料であればみんな興味があるのはダウンロードしてくれて、ありがたいレビューも頂ける。

脱線してしまったが、すべてはブラウザの幅で決まってしまうという現実なんですよね。。。
モバイルサイトでは、220pxから230pxぐらいで考えてるけど。。。曖昧な数値だとマズイんだよな。。。

From xxxYukihiroxxx

Pocket

[Javascript] border-radius.js – Javascriptライブラリ – HTML5.JP [CSS]

Pocket

IE6とIE7でちょっとカスタマイズが必要になりましたが、これは本当に助かりました。
規制もあるのですが、特に自分は問題なく当て込むことができました。

今制作中のデザインを上げてから、コーディングへと移っているのですが、ボーダーをHTMLにclassで定義するだけで
丸みを帯びたボーダーが出来ちゃうのはIE以外だったらしっていたのですが、IEまで対応しちゃってくれるかゆい所に手が届くというか
本当に助かったscriptでした。

なので、もしボーダーで丸みをつけたいという方はぜひ使ってみて下さい。

border-radius.js – Javascriptライブラリ – HTML5.JP

今まではイメージで右上と左上がセットになったイメージと右下と左下のセットになったイメージ、複雑になると、各4か所切り離して使っていたこともありましたが
もうおさらばです。

CSS3.0からIEも対応すればいいのにね。って思うのは自分だけか??

From xxxYukihiroxxx

Pocket

ホーム > CSS

Search
Feeds

Return to page top