How Did We Get Here? - Dive Into HTML5 (日本語訳)
❧ Diving In 私は最近、ある Mozilla の開発者が 標準の策定における葛藤 についてこう述べているのを目にした。 実装と仕様は、繊細なステップを踏みながら踊り続けないといけないんだ。仕様が安定する前に実装が始まって欲しくないというあなたの気持ちは分かる。そんな未完成の実装に人々が依存しはじめて、それがあとあと仕様そのものにも影響することを怖れているのだろう。でも、仕様が実装や制作者が試す前に固まってしまうのも考え物だろう。それは、仕様にはフィードバックが必要だからだ。両者の間には常に葛藤があって、僕らはその間でなんとかやっていくしかないんだ。 この言葉を心にとどめておいてほしい。では、なぜ我々が HTML5 に至ったのかを話そうじゃないか。 ❧ MIME types この本は HTML5 についての本で、前のバージョンの HTML や XHTML についてのものではない。た
iOS6のSafariでサポートされるHTML5の機能 | DevelopersIO
以前、HTML5でカメラやGPSなどスマートフォンならではの機能がどこまで使えるのか調べました。 最近、iPhone5を買ったので今度はiOS6のSafariでサポートされたHTML5の機能を試して見ようと思います。 試したのは以下の5つです。iPhoneで確認できるようにサンプルを作ったので試してみて下さい。 ファイルアクセス(File API)とカメラ(HTML Media Capture) 音声処理・合成(Web Audio API) アニメーション(Animation Timing API) CSS Filter Effects Remote Debugger ■ファイルアクセス(File API)とカメラ(HTML Media Capture) ファイルアクセスとカメラ連携のサンプルです。iOS6ではFile APIの書き方でカメラも使えました。 [ファイルを選択]ボタンを押すと
flash変換ツールまとめ（swiffy,CreateJS,ExGame,reel） | ECサイト｜システム開発会社｜スターフィールド
iOSでFlashを搭載しない変わりに代替する技術として、HTML5とJavaScriptによるアニメーション表現が発達してまいりましたが、マルチデバイス対応及びフィーチャーフォン（ガラケー）向けの資産を再利用したいという理由でflashを変換するツールも同時に複数立ち上がっています。 それぞれ案件でこなしながら、flash変換ツールに関して代表的なツール4つのメリット・デメリットをまとめてみました。 非エンジニアの筆者がまとめております点、ご容赦下さい。技術情報については末尾に参考記事を掲載しております。 swiffy（提供：GOOGLE） flaファイル変換系 https://www.google.com/doubleclick/studio/swiffy/ メリット 再現率が高い デメリット 出力したソースが複雑（minifyされている）であるため改修は困難。 画像がSVG形式である
)
Adding SVG to a webpage (Windows)
This topic introduces common ways to render SVG in your webpage and assumes that you have basic HTML and JavaScript knowledge. Introduction Ways to Render SVG Inline HTML5 Inline XHTML Stand-Alone SVG Embedded Plug-in Summary Related topics Introduction If you are just learning about Scalable Vector Graphics (SVG) and you want to experiment with it, one of your first questions might be how to add
iframe 要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.7.2 iframe 要素 カテゴリー: フロー・コンテント フレージング・コンテント エンベッディッド・コンテント インタラクティブ・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: エンベッディッド・コンテントが期待される場所 コンテントモデル: 本文に書かれた要件に準拠するテキスト コンテント属性: グローバル属性 src - リソースのアドレス srcdoc - iframe にレンダリングするドキュメント name - ネストされるブラウジングコンテキストの名前 sandbox - ネストされるコンテンツのセキュリティ規則 width - 水平方向の寸法 height - 垂直方向の寸法 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: application, document
iframe 要素の seamless 属性を試してみた
WebKit Nightly Buildsが iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。 Last week in WebKit: Inspector's sources panel and private names ： Surfin' Safari Add seamless layout code (and pass most of the remaining seamless tests) ： Changeset 118291 WebKit 現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド （Dev channel） の最新版 「21.0.1155.2」 で動作しているのが確認できました。インストール済みの方は下記にデモページ
svg要素の基本的な使い方まとめ
この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり． 注意事項 仕様はここを参照のこと． 本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない． スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい． 目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い
Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
これがHTML？と言いたくなるようなPDF変換ソフトウェア·pdf2htmlEX MOONGIFT
pdf2htmlEXはレイアウトの再現性を極めたPDFからHTMLへの変換ソフトウェアです。 PDFはそのままでは容易に編集できないフォーマットです。そこが利点でもあり欠点でもあります。PDFを別フォーマットに変換するソフトウェアは幾つかありますが、今回は驚いてしまうくらい品質高いHTML変換を行うpdf2htmlEXを紹介します。 これがHTMLだと思えないくらいの再現度です。 計算式にも対応。 段組み、画像埋め込みも問題なし。 白黒に限らず扱えます。 中国語。マルチバイト対応です。 まるで素のPDFを表示しているかのような再現度の高さがpdf2htmlEXの売りです。PDFを一つのHTMLファイルとして出力し、色や文字の装飾も反映します。リンクもそのまま使えます。なお、Type3のフォントには対応しておらず、テキスト以外のオブジェクトは画像としてレンダリングされるようになっています。
Webチェックツールの紹介：松延拓生（和歌山大学システム工学部）
開発したツールの紹介 アイトラッキングを利用したウェブユーザビリティ評価ツール 詳細は別ページ（アイトラッキングを利用したWebユーザビリティに関する研究）にて紹介するが，視線位置のコンテンツを特定して，ユーザビリティ評価を支援するツール．ヒートマップによる分析ではなく，コンテンツ単位で注視状況を定量解析できるのが特徴．インタビューを支援する機能もある． アイトラッキングを利用した意思決定過程解析ツール 眼球運動を分析することでウェブ利用中のユーザの興味の推移を分析することができるツール．UX（ユーザエクスペリエンス）を踏まえたデザインを行う．ウェブコンテンツ単位で注視状況や興味の変化を解析できるため，ウェブアプリケーション，ウェブサービスの情報構造，UIを検討可能． 既存のツールの紹介 Webサイトを作成する上で有効な様々なツールが公開されている．ここではWeb上で入手・実行可能かつ無償
Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
hifive - HTML5企業Webシステムのための開発プラットフォーム
ダウンロード Download ダウンロード カスタムダウンロード ツール/ライブラリ ギャラリー Gallery ギャラリー ガイド Guide チュートリアル Webアプリ入門 基本編 データモデル編 データバインド編 リソースFW編 リファレンス APIドキュメント レシピ Recipe レシピ 資料室 Reference HTML5資料室 HTML5用語辞典 開発者向け Developers Developer Channel ユーザーグループ 開発リポジトリ リリースノート コードホスティング 開発者ブログ hifive開発情報 ヘルプ Help 本サイトについて FAQ 本ウェブサイトでは、利便性及び品質の維持・向上を目的に、クッキーを使用しております。本ウェブサイトにおけるクッキーの使用についてはプライバシーポリシーをご参照いただき、クッキーの使用にご同意頂ける場合は「同意す
HTMLのリスト、テーブルをソート、フィルタリング、検索可能に·List.js MOONGIFT
List.jsはリストやテーブルを検索やソート可能にするJavaScriptライブラリです。 HTMLではよくリスト表示やテーブル表示を行います。一旦表示したデータを並べ替えたり絞り込んだりできる便利なライブラリがList.jsです。 基本のサンプルです。データがリストになって並んでいるのが分かるかと思います。 名前でソートしました。 カテゴリで絞り込んで表示しています。 検索です。インクリメンタルに絞り込まれます。 こちらはテーブルのサンプル。行ごとに削除、編集が出来ます。 曖昧検索です。多少文字が違っていても絞り込んでくれます。 データを動的に生成するサンプルです。1,000行程度であれば77msで生成できます。 検索です。こちらは12ms。高速です。 List.jsはデータをJSONで渡すことも、素のHTMLを対応させることもできます。検索で絞り込んだりデータを追加、編集するのも容易
「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい
「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい 「Meteor」は、Webアプリケーションを開発するためのフレームワークと実行環境を提供しています。アプリケーションはすべてJavaScript、HTML、CSSで記述できるため、サーバ側でRubyやPerlやJavaなどのプログラミングをする必要はありません。 TechCrunchの記事では、JavaScript/HTML/CSSだけでWebアプリケーションが開発できる点にフォーカスが当たり話題になりましたが、公開されたデモンストレーションのスクリーンキャストを見たところ、Meteorにはそれ以上に新しい仕掛けが盛り込まれていました（スクリーンキャストはこの記事の末尾に埋め込んであります）。 それは「リアルタイムなWebアプリケーションを構築す
Mozilla におけるリッチテキスト編集 - 開発者ガイド | MDN
Mozilla 1.3 は、Microsoft® Internet Explorer の designMode 機能の実装を導入しました。 Mozilla 1.3 のリッチテキスト編集機能は、HTML 文書をリッチテキスト編集環境へと変える designMode 属性をサポートします。更に、Firefox 3 以降、Mozilla は、あらゆる要素を編集可能にしたり編集不能にしたりする (後者は、編集可能な環境に含まれる固定したい要素の編集をできなくするのに使います) Internet Explorer の contentEditable 属性をサポートするようになりました。 リッチテキスト編集機能は、ドキュメント内の iframe 要素などの designMode プロパティを "On" にすることによって初期化されます。designMode が "On" にされると、そのドキュメントは
SVGフォントを使った外字表現
SVG 2011 5 30 W3C SVG WG fujisawa.jun@canon.co.jp HTML5 Web � HTML5 � EPUB 3.0 HTML 10 2011 5 25 Last Call www.w3.org/TR/html5/ � HTML5 HTML5/CSS/SVG/WOFF Open Web Platform � Web � CSS @font-face Web � OpenType SVG WOFF � EPUB SVG SVG � SVG � PDF Flash www.w3.org/TR/SVG/ � Web EPUB HTML5 � SVG � TrueType SVG � SVG � OpenType SVG � SVG � ’font’ ’glyph’ � ’d’ � ’unicode’ � 2 � HTML SVG � ’font-face-
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
みなさんは、サイトをスクラッチで作る時にどうされていますか？ HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか？ それは、 パーツが完璧に揃いすぎている！ のが原因です。 Twitter Bootstrapがバージ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The data: URI kitchen
Learn to Code Online | Treehouse
