[JS]Canvasを使って、リアルタイムにヒートマップを描くスクリプト -real time heatmap
[JS]Canvasを使って、リアルタイムにヒートマップを描くスクリプト -real time heatmap real time heatmap デモ [ad#ad-2] デモの画像の上でマウスを動かすと、その動いた量に伴いカラーがブルー、グリーン、イエロー、レッドとマウスの移動し滞在した量をヒートマップとして生成します。ヒートマップのデータはエクスポートも可能です。 また、iPhoneのシングルタップもサポートしている、とのことです。 スクリプトはjQueryなどの他のスクリプトは依存せず、下記のようになります。 JavaScirpt /* Copyright (c) 2010, Patrick Wied. All rights reserved. Code licensed under the BSD License: http://patrick-wied.at/static/li
HTML5関連のデータベースAPIとWeb Storageの基本
HTML5時代にはWebブラウザでデータベースを扱える 最近のWebの世界で、トレンドになっている技術の1つとして、「HTML5」があります。Webブラウザ上で動作するアプリケーション（Webアプリケーション）が一般化したことがあって、Webブラウザに求められる機能が増えてきました。そこで、その状況に即してHTMLをバージョンアップしようという流れが起こり、HTML5の仕様策定が進められています。 HTML5では、HTMLのタグの仕様だけでなく、周辺のAPI（Application Programming Interface）の仕様も明確化して、Webブラウザによる動作の差異をなくそうという方向になっています。また、Webアプリケーションを作る上で従来不十分だった機能について、各種の新しいAPIも追加されます。 APIの中で、特に不足していた分野の1つとして、「データ管理」が挙げられます。
HTML5でWebページをマークアップするための基礎知識
最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします 5からHTMLの“文法”が変わるって知ってた？ 連載第1回の「Webの3つの問題を解決する「HTML5」とは何なのか」では、HTML5という技術革新の意義、そして本連載の大まかな流れについてお話ししました。連載第2回である今回は、HTML5のマークアップを行うための基礎知識についてお話しします。 HTML5では、その文法が大きく変化しました。「HTMLが、どれほど普及しているか」「根底となる“文法”が変わってしまったら、どれほどの影響があるか」に想像が及ぶ方であれば、非常な驚きと不安を抱かれるかもしれません。
HTML 5におけるアプリケーションキャッシングのためのキャッシュマニフェスト - builder by ZDNet Japan
キャッシュマニフェストの記述方法 キャッシュマニフェストには、ブラウザにキャッシュしておきたいリソースを記載する。キャッシュマニフェストはUTF-8形式のテキストファイルで記述し、改行文字はLFまたはCR、あるいはその両方が使用できる。また、MIMEタイプはtext/cache-manifestとして送信されなければならない。 リスト1にキャッシュマニフェストの記述例を示す。 リスト1 キャッシュマニフェストの記述例 CACHE MANIFEST # version 1.0 # キャッシュマニフェストの記述例 index.html content.html images/icon.png NETWORK: server.cgi CACHE: style/style.css manifest属性の値としてこのキャッシュマニフェストが指定されたドキュメントにアクセスした場合、index.htm
最近のWebSocket事情についてまとめとく - Keep on moving
id:Jxck(@Jxck_)さんからのリクエストもありましたので、現状でのWebSocket情報をまとめておきます。 ※この情報は2010/9/1時点のものです。ご覧になっている時点の情報とは変わっている可能性があります。 ※2010/9/1:いろいろ更新しました。 ※書かれてから相当な日数がたっていますので、このエントリーは役に立ちません。WebSocketはRFC(http://www.ietf.org/rfc/rfc6455.txt)がでました。最新の状況は他のサイトをご覧になることをお勧めします。情報をアップデートできなくてすみません。 ざっくり説明 一言で説明すると、WebServerとWebBrowser用の双方向通信用のプロトコル。 Server側からのプッシュができるので、XHRでポーリングする必要がない。 現行のWebSocket対応ブラウザ側には，same origi
http://devcheatsheet.com/tag/html5/
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
HTML5 基礎知識 - web探検隊
HTML5を書くための基礎知識をメモHTML5の雛形XHTML5ではなくてHTML5のマークアップについて html> head> title>HTML5 基礎知識title> meta charset="UTF-8"> head> body> body> html> HTML5の新要素 文章構造に関するものsection汎用的なセクション。文章のアウトラインを構成する。articleセクションの一種で、Webページから独立したコンテンツを表す。asideセクションの一種で、外側のセクションに対する補足情報を表す。navセクションの一種で、外側のセクションに対するナビゲーションメニューを表す。footerセクションのフッター。headerセクションのヘッダー。hgroup複数の見出し(h1-h6)をまとめる。 外部コンテンツの埋込みfigureキャプションを伴うような内容のものを文章中に埋
HTML5 Techtalk#2開催しました。 - IT-Walker on hatena
昨日（11/27）、渋谷Googleさんのオフィス・・・ではなくて食堂でHTML5 Techtalk#2を開催してきました。 今回はぼくはスピーカではなく単なる一司会者として参加しました。 以下は簡単なまとめ。 プレゼン資料 「HTML5 Forms で healthy living!」by ダニエルさん（Operaウェブエヴァンジェリスト） HTML5で強化されたフォーム要素についての説明。 http://people.opera.com/danield/html5/forms/ （Opera10で開き、フルスクリーン表示するとスライド形式で見る事ができます） 「HTML5 Show Case」 by 羽田野さん（HTML5.jp） HTML5で書かれた各種デモの紹介とソースコード解説。 http://docs.google.com/present/view?id=0ATqZea7ST5
HTML5 JavaScript APIs
HTML5 is all the rage with the cool kids, and although there's a lot of focus on the new language, there's lots of interesting new JavaScript APIs both in the HTML5 spec and separated out. This presentation will take you through demos and code behind the new JavaScript APIs, and explore where these features can be usedRead less
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記
はじめに Safari 3.1 には Client-side database storage （SQL API とも呼ばれています。）という新しい仕様が実装されました。 というわけで、この新しい API について色々調べたことを簡単にまとめておきます。 Client-side database storage が使えるブラウザ 2008 年 03 月 27 日現在では、 Safari 系のブラウザのみです。 Safari 3.1 WebKit Nightly Client-side database storage とは Selectors API とは HTML5 で定義された仕様です。詳細に関してはこちらをどうぞ。 簡単に説明すると JavaScript 内でリレーショナルデータベースを使えるということです。 もっと簡単にイメージするために、実際のコードを示すとこんな感じです。 va
HugeDomains.com
Captcha security check widgetpad.com is for sale Please prove you're not a robot View Price Processing
The Great WebKit Comparison Table
On this page I compare WebKits in order to prove that there is no “WebKit on Mobile” and to figure out which one is the best. My hope is that eventually I’m going to gain some insight in the “family tree” of all WebKits. This page only contains tests of CSS and JavaScript items that work in some WebKits but not in all. Adding more items, all of which are either supported by all or by none of the W
Google WaveがHTML5ブラウザーへのシフトを加速する
Internet Explorer 3.0/4.0 の開発に関わっていた人間として言うのも変な話だが、そろそろIEには主役の座を降りてもらった方が良いと思っている。いろいろな要因がからみあって今の状況があるわけで、その部分について今さらここであれこれ言うつもりはないが、実際のところ、 IEが他のブラウザー（Safari/Firefox/Chrome/Opera)と比べてHTML5やCSS3のサポートに関して大きく遅れている そもそもIEの進化のスピードが（というかMicrosoftから出る製品すべての進化のスピードが）遅すぎる にもかかわらずIEのシェアが大きいため、業界全体の足を引っ張っている という現状があることは誰にも否定できない。 HTML5やCSS3の新しい機能により可能になる新しいウェブアプリをどんどんと作って行きたいと考えているエンジニアは私だけではないわけで、その意味では「
本の虫: QuirksBlog: HTML5のドラッグ＆ドロップはクソだ
QuirksBlog: The HTML5 drag and drop disaster QuirksBlogで有名なPeter-Paul Kochさんが、HTML5のドラッグ＆ドロップに関して、酷くののしっている。かなり好い文章で、興味深かったので翻訳してみた。記事が長いので、blockquoteを使うのは御免を被る。 一日半もテストして、HTML5 drag and drop moduleはクソなばかりか、ゲロみてえな臭いがプンプンするってことが、いやというほど分かったね。 コイツはHTML5規格から、ソッコーで消すべきだし、もっとまともな規格が制定されるまでは、現行ブラウザは、この機能を、一刻も早く無効にするべきだ。 Web開発者は、HTML5のドラッグ＆ドロップを使うな。絶対使うな。RFC2119で規定されているMUST NOTの意味で使うな。使いたきゃ、従来通りのスクリプトで実装
最近公開のHTML5関連の参考サイト色々まとめ:phpspot開発日誌
最近公開のHTML5関連の参考サイト色々をまとめてみました。 チュートリアル〜チートシートまでをご紹介。 Coding A HTML 5 Layout From Scratch | How-To, Tutorials | Smashing Magazine ゼロからHTML5レイアウトを行うためのチュートリアル HTML 5 Reset Stylesheet | HTML5 Doctor HTML5用のCSSリセットスタイルシート How to build a desktop WYSIWYG editor with WebKit and HTML 5 - Ars Technica WebkitとHTML5を使ってWYSIWYGエディタを作成するチュートリアル HTML5 drag and drop in Firefox 3.5 ? 0xDECAFBAD Firefox3.5でHTML5のド
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL：http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル：HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日：2011/05/26 最終更新日：2011/05/26
“Misunderstanding Markup” 日本語訳
このコミックは、“Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip”にあるコミックを、著作者の許可を得て日本語に訳したものです。 元になった記事の翻訳も行っています。“Misunderstanding markup”をご覧ください。 先週、W3CはXHTML 2 Working Groupが年内でその活動を終了すると発表したんだ。単刀直入で、歓迎されるべきことだったんだけど、「XHTMLが終わってしまう」と多くの人を混乱させてしまった。Zeldmanのblogポストに寄せられたコメントを読むと、それが分かると思う。 仕方のない部分もある。異なる技術に、同じような名前がついていたことが原因なんだから。しかも、これは今に始まったことじゃあない。 たとえば、JavaScript。Javaになにか関係しそうだけど、そうじゃないよね。書き方がすこ
【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (1) 本特集の趣旨 | エンタープライズ | マイコミジャーナル
本特集は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。特集の後半となる今回は、Webアプリケーションを作成するにあたって有用な、JavaScript APIを中心として取り上げる。今回紹介する内容は以下の通りだ。 アプリケーションキャッシュ クロスドキュメントメッセージング Web Workers Web Storage Web Database Web Sockets Geolocation API HTML5で新しく導入されたタグなどに関しては、前回の特集を参照していただきたい。 今回調査対象としたブラウザは、前回と同じく次の通り。ベータバージョンも含めた最新のバージョンをチョイスした。Internet Explorerについては、最新バージョンの8でもHTML 5への対応があまり進んでいなかったため
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
