ラベル html5 の投稿を表示しています。 すべての投稿を表示
ラベル html5 の投稿を表示しています。 すべての投稿を表示

2011年1月12日水曜日

リンクのリファラをカットしてくれるGoogle Chromeの拡張

HTML5ではreferrerを送らないという記述ができるらしい。
WebKit nightlies support HTML5 noreferrer link relation.ja – WebKit

これを利用して、Google Chromeでreferrerを送らないようにする拡張があった。
Google Chrome拡張 「noreferrer link」を作りました - awef

これでいよいよFirefoxからChromeに本格乗り換えか？ （でも面倒だなあ．．．）


というわけで2011年もよろしくお願いいたします。

tags: , , , , , 0 コメント

2010年5月8日土曜日

HTML5のテンプレート例

（2010/05/28 変更：Google Analytics非同期版が正式リリースされたので、Beta版から正式版に変えた）
（2010/08/30 変更：div構造を少しすっきりさせた）
（2010/11/04 変更：Google Analyticsのコードをhead要素内へ移動）
（2011/04/25 追加：IEの条件付きコメント（Conditional Comments）の例を追加）

Google Analytics非同期版とYUI 2 Grids CSSとjQueryを組み込んだHTML5の例。
header要素等のHTML5の新要素は使わない。（今のところあまりメリットを感じないので、）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>{{ TITLE }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="alternate" type="application/rss+xml" href="{{ RSS_URL }}" title="{{ FEED_TITLE }}" />
<link rel="alternate" type="application/atom+xml" href="{{ ATOM_FEED_URL }}" title="{{ FEED_TITLE }}" />
<link rel="stylesheet" href="{{ STYLESHEET_URL }}" />

<style>
{{ STYLE }}
</style>
<!--[if lt IE 9.0]>
<style>
{{ STYLE for IE8- }}
</style>
<![endif]-->

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-{{ GOOGLE_ANALYTICS_ID }}']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>

<!-- @see http://developer.yahoo.com/yui/grids/builder/ -->
<body id="doc4">

<div id="hd">
{{ HEADER }}
</div><!-- #hd -->

<div id="bd">
{{ MAIN_CONTENT }}
</div><!-- #bd -->

<div id="ft">
{{ FOOTER }}
</div><!-- #ft -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="{{ JAVASCRIPT_URL }}"></script>
<script>
{{ JAVASCRIPT }}
</script>

</body>
</html>

使うときに不要な要素は減らす。
{{ }}のところは置き換える。

PHPの場合、default_charsetを設定してあれば<meta charset="UTF-8" />は無くても大丈夫。

YUI 2 CSS Toolsはcommon.cssとか作ってその中でimportした方が変更に強い。

Google Analyticsは外部JavaScriptファイルにした方がすっきりするけど、そのためだけにHTTPアクセスを1回増やすのもどうかと思う。
「http://www.google-analytics.com/ga.js#UA-XXXXXXX-X」の形で呼び出せるようにすればいいのに。
（ただし静的なHTMLに埋め込む場合は、変更が発生したときに全部変更するのは大変なので外出ししておいた方がよい。）

jQueryはプラグインをいろいろ使うならマイナーバージョン（1.4とか）まで指定しておいた方が無難。


（2010/11/04 追記）
Google Libraries APIのCDNから読み込むJavaScriptが複数ある場合は、google.load()を使って非同期で読み込んだ方が少し早くなる場合がある。
<!-- 例：jQueryとjQuery UIを非同期で読み込む -->
<script src="//www.google.com/jsapi?key={{ GOOGLE_LOADER_API_KEY }}"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(function() {
    $(function() {
        //初期処理
    });
});
</script>

注意点としては、google.load()を使うには先に http://www.google.com/jsapi 読み込む必要がある。これを読み込むコストを考えると、必要なJavaScriptが1つしかないならgoogle.load()を使ってもそれほど効果はないか、逆に遅くなる。


（2011/03/15 追記）
シンプル版も書いておく。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>HTML5 Simple Template</title>
<link rel="stylesheet" href="stylesheet.css" />
<style>
/* STYLE */
</style>
</head>
<body>

CONTENT

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript.js"></script>
<script>
/* JAVASCRIPT */
</script>
</body>
</html>

tags: , , , , , , 0 コメント

dataスキームによる画像を手軽に作れるジェネレータ

dataスキームはIE6・7は未対応。IE8から対応した。


グラデーション画像は、cyokodogさんが作った生成ツールが便利そう。
IEはfilterにより表現されるのでIEでも表示できる。



画像ファイルからdataスキームを生成したい場合は[JavaScript] dataスキームURI生成（画像データのBase64変換）が便利そう。


その他の場合でかつHTML5のcanvasで描けるような図形の場合、toDataURL() メソッド - Canvasリファレンス - HTML5.JPを参考にしならが自分で作る。

tags: , , , , 0 コメント

2010年4月16日金曜日

HTML6の仕様を HTML5までに至る HTMLの進化から予想する

HTMLの記述は、HTML5の登場により劇的にシンプルになった。
試しに、HTML5の前バージョンの1つであるXHTML 1.0 StrictとHTML5をシンプルなWebページの記述例で比べてみる。


XHTML 1.0 Strict

<?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" xml:lang="ja" lang="ja">

<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>XHTML 1.0 Strict</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">
span.foo {
    text-decoration: underline;
}
</style>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript"> alert("hello"); </script>
</head>

<body>
<div>
<span class="foo">XHTML</span> <span style="color: #ff0000;">1.0 Strict</span>
</div>
</body>

</html>

XHTML 1.0の場合、head要素までの記述が大量かつ複雑であることが目に付く。
同じ内容をHTML5で記述するとこうなる。


HTML 5の例
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>HTML 5</title>
<link rel="stylesheet" href="stylesheet.css">
<style>
span.foo {
    text-decoration: underline;
}
</style>
<script src="javascript.js"></script>
<script> alert("hello"); </script>
</head>

<body>
<span class="foo">HTML</span> <span style="color: #ff0000;">5</span>
</body>

</html>

劇的にシンプルになった。
style（CSS）とJavaScriptのMime Type（Content-Type）についてデフォルトの値が定義されたことが地味に効いている。

素晴らしいことに、このHTML5は既存の主なWebブラウザで既に使うことができる。（※新しく登場した要素は除く）


しかし、賢明なる読者諸君にはここで考えてもらいたい。これは十分にシンプルだろうか？
いや、違う。マークアップエンジニアはまだ仕様に振り回されて不要な文字列をマークアップすることを強要されている。

来るべき次のバージョンのHTML、すなわち「HTML 6」では、さらに進んでこれくらいシンプルになるのではないだろうか？


HTML 6 ?
<html>

<head>
<title>HTML 6?</title>
<script src="javascript.js"></script>
<script> alert("hello"); </script>
</head>

<body>
<u>HTML</u> <font color="red">6 ?</font>
</body>

</html>

特徴的なのはstyle要素やCSSを排し、下線や文字色等について直接マークアップすることが可能になったことだ。
これにより、難解なCSSセレクタ間の力関係や醜悪なdiv地獄から開放されるかもしれない。

素晴らしいことに、このHTMLは既存のほぼ全てのWebブラウザで、もう既に使うことが可能だ。驚くことにここで言うWebブラウザには、世界からガラパゴスと恐れられ、聖域となる独自仕様に守られている日本の携帯電話のWebブラウザですら含まれているのだ。

今後の展望としては、JavaScriptを使わずにHTMLのマークアップだけでユーザーにハイパーなエクスペリエンスを提供するため、表示コンテンツを点滅させたり（blink）、文字を画面狭しと左右に走り回らせたり（marquee）といった機能も実装されるに違いない。

tags: , , 2 コメント

登録: 投稿 (Atom)

ブログ アーカイブ

tags