先進的。HTML5/CSS3対応のデザインフレームワーク·52Framework MOONGIFT
52FrameworkはHTML/JavaScript/CSS製のオープンソース・ソフトウェア。これまでのWebデザインが今後、大きく変わっていく可能性を秘めているのがHTML5やCSS3だ。まだ実験段階というイメージが強いが、GoogleやYoutubeをはじめとする大手サイトでも取り入れられ始めている。 Safari4での表示 最大シェアを持つIEの対応がいまいちなため、積極的に取り入れていくのは難しいと感じているかも知れない。しかし時代は進んでいる。ついにHTML5/CSS3をターゲットにしたデザインフレームワークが登場した。それが52frameworkだ。 52frameworkはHTML5でコーディングされ、CSS3を使った角丸やテキストの影、ボックスの影、グリッド表示、CSSリセットなどを行っている。グリッドはウィンドウを16のブロックに分割する。一つのブロックはフレームワーク
?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clockmaker+%28ClockMaker+Blog%29
アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。 「なぜAppleはiPadにFlashを載せるべきではない」のか AdobeのCTO、Kevin LynchがFlashを擁護―「HTML5はウェブビデオを暗黒時代に投げ戻す」 そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。 (上の画像はクリックで拡大できます) 左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Fl
HTML5 video、ブラウザ対応状況とコーデックまとめ | エンタープライズ | マイコミジャーナル
Robert’s talk 先日、YouTubeとVimeoがHTML5 videoを使った動画配信の試験サービスを開始した。Dailymotionは2009年にはすでに同様の試験サービスを開始している。動画共有サービスの最大手YouTubeがHTML5 videoに対応したことは大きく注目されたが、問題も浮き彫りにした。The video element in HTML5 - great possibilites, but also codec and licensing problems - Robert's talkでこの問題がわかりやすくまとめられている。 これまでの動画配信サービスでは、Flashがデファクトスタンダードの位置にある。videoによる動画配信はFlashプラグインをインストールする必要がなく、用意した動画を次のように指定するだけでいい。サイズや再生の振る舞いも簡単
HTML5に関するW3Cのスライドをリデザイン
先日、Twitter経由で「Web標準化 (W3C) とHTML5の状況 (PDF形式)」というスライドが総務省のWebサイトで公開されているのを知りました。早い時期から国に働きかけているのだなと関心しましたし、どのような内容を紹介しているのだろうと興味があったので早速ダウンロードしてみました。HTML5 の概要をコンパクトにまとめている点は良かったのですが、プレゼンのスライドとしての質はあまり高いものではない内容でした（一番最後のページに「ありがとうございました」と書いてあるのでスライドの可能性大）。 W3Cに携わる教授という視点だと考えられなくはない内容なのですが、国の方（もしくは IT プロフェッショナルではない方）に向ける内容ではない気がしました。せっかくHTML5を多くの方に知ってもらうという素晴らしい機会があってもこれではどうかなと私は思いました。以下が私が気付いた課題点です。
HTML5用のリセットCSS（正式版？） - IT-Walker on hatena
今年も明けましておめでとうございます。 白石です。 正月明けからイッパイイッパイです。 で、いきなり本題。 HTML5用のリセットCSS（どのブラウザでもデフォルトの見た目が同じになるよう、強制的に表示を調整するCSS）と言えば、昔HTML5Doctorで紹介されたやつが有名です。Google Codeでプロジェクトがホスティングされてもいます。 でもこのCSS、ちょっと悩ましいことに中途半端なんですよね。例えば、HTML5ではあらゆる要素にhidden属性を指定することができるのですが、「hidden属性のついた要素は非表示にする」と言ったスタイル指定が行われていなかったり。 で、完全なものはないのかというと、あります。それも仕様書の中に。これは、HTML5仕様が正式に「提案」しているものです。 でもどう見てもHTML5DoctorのCSSのほうが有名ですよね。 で、みんながその中途半端
[Think IT] 第1回：結構良さそうだぞHTML 5！ (1/3)
【即実践！HTML+CSS】ポストWebコーディング 第1回：結構良さそうだぞHTML 5！ 著者：吉田 光利 公開日：2008/04/07（月） HTML 5時代はすぐそこまで来ている！ HTML 5と聞いたとき、皆さんはどう思ったでしょうか。 筆者の場合は「え？HTML 5？また覚えなきゃいけないことが出てくるの？」「もうHTMLはいいだろ」「今あるサイトはどうなっちゃうの？」「W3Cの勧告なんてあてにならないからなぁ」などというネガティブな感じです。 しかし、HTML 5について学んでいくと「おお！結構良さそうだぞHTML 5」「これは来るな！」という気持ちに変わりました。 2010年の正式勧告される予定で、そこに向かってすごいスピードで広がっています。もしかしたら、それくらいの時期には定着しているのではないかと筆者は考えています。なぜならばあのInternet Exploreもこの
Firefox3.6βで利用できるFile APIの可能性について：マピオンラボ(Javascript)
FileAPIとは？ HTML5関連のAPIです。これ。 http://www.w3.org/TR/FileAPI/ こんなことが出来る バイナリーで読み込める 文字列としても読み込める ただしローカルのファイルには保存が出来ない フローの変化 １）今まで ファイルをサーバに上げる サーバで処理する クライアントに表示 サーバを更新 ２）FileAPIを使うと？ クライアントでファイルを処理 サーバを更新 シンプルなフローを実現することが可能になりますね。 サンプル サンプルは、ソースファイルをただ表示するだけというシンプルなものです。 File APIでソースコードを表示するサンプル ※文字コードはUTF-8限定。 実はこのスクリプト、1秒おきに表示を更新しています。 書いている人が保存をするたびに表示が更新されるので、同じファイルを読み込める環境であればチームメンバーのコードの進捗
HTML5/CSS3を使ってみた | Security.GS Magazine
http://puzzel.jp/sample/HTML5/n3/index.html 先日、私のサイトPuzzel.jpを公開してその中のコンテンツでHTML5/CSS3のサンプルサイトを作りました。 そこで色々分かったことなどがあったのでメモっておきます。 ①Webfont @font-face { font-family: mplus-1p-light; src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-light.ttf') format("truetype"); } でフォントを呼び出して .de { font-family: mplus-1p-light; } でフォントを表示します ②Transform transformを使って画像を傾けています。 -webkit-transform: rotate(
File APIをFirefox 3.6で試してみる | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable W3C FileAPI in Firefox 3.6において、Firefox 3.6で新しくサポートが追加されるW3C File APIの利用例が紹介されている。W3C File APIは特にXMLHttpRequestと組み合わせての利用を想定して策定されているファイルアクセス用のインタフェースとAPI。非同期でのファイルの読み込みやイベント処理を規程している。現在のところワーキングドラフトの段階で、インタフェース、API、イベントモデルなどが定義されている。W3C File APIから特にポイントとなるインタフェース、メソッド、イベント、属性を次に掲載する。 インタフェース 内容 属性 FileReaderインタフェース ファイルの読み込み操作を提供 readyState,
HTML5サンプル集 - 株式会社あゆた
このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。 このサンプルの多くは、弊社技術顧問の白石氏がマイコミジャーナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。 どれも非常にシンプルなものではありますが、HTML5の各機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプリケーションキャッシュのサンプル (ダウンロード) (Safari4、Google Chrome3で動作確認済み。Firefoxだと、アプリケーションキャッシュのイベントが正しく発生せず、動作しないと
HTML5のMicrodataとは何か？
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。 Microdataとは、文書の内容に対して機械に
こてさきAjax:twitterを javascript だけで自動分類（WebDatabaseで機械学習） - livedoor Blog（ブログ）
WebDatabase使って何か面白いことできないかなぁ・・・と。 で、思いついたのが 「簡単な機械学習作って、文書分類とかできちゃうんじゃない？」 という素朴なアイディア。 例えば、メーラーの迷惑メールフィルターで、「このメールはスパム」と指定すると、似たようなメールをスパムとして自動判定してくれるけど、そんな類のことをjavascriptだけで出来ちゃうんじゃないかなと。 というわけで、twitterのsearch結果を、自分好みに自動分類してくれるサンプルを作ってみました。（safari4と、iPod touchで動作確認。WebDatabaseとwebkitがMUSTになってます） http://komachu.sakura.ne.jp/twittersearch/ 窓から、好きな言葉でtwitterを検索できます。例えば「田町」と入れると といったように、twitterが表示され
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
http://code.google.com/speed/articles/html5-performance.html JavaScriptの高速化手法を紹介する、Googleのプロジェクト「speed」がリニューアルしたと言うので見てたら、「HTML5でパフォーマンスアップ」てなタイトルがあったので「なぬ？」と思って読んでみました。 HTML5使ってもそんな効力得られないだろう・・・と思って読んでみたら、「HTML5の記法を使えばnバイト節約」みたいなチョコザイな手法が主だったのでちょっと苦笑(^^; とはいえ、script要素に今度から加わるasync属性について等は、日本語で説明されている記事がほとんどないので、全体的に要約しておきます（あくまで翻訳ではなくて要約。時間がないので超適当です。正確なところは原文を読んでください）。 DTD HTML4までは以下のように書かなきゃいけな
HTML5, きちんと。
This document describes how to configure Spring Security for authentication and authorization in a web application. It defines a WebSecurityConfig class that configures HTTP security with roles like OWNER and MANAGER for access control. It also defines a UserDetailsManager service for loading users and a User entity class implementing UserDetails. Tests are shown for security configuration, login,
Flashは比べようもないほどHTML5より優れている
アドビシステムズはFlashコンテンツのスマートフォン展開など，本格的にFlashの多デバイスへの対応を強化しつつある。次期バージョンであるFlash CS5の発表を2010年に控え，米アドビシステムズ社でFlashのプロダクトマネージャーを務めるリチャード・ガルバン氏に，スマートフォンとFlashという“ビッグカップル”の将来について聞いた。（聞き手は矢野りん＝ライター） 次期Flash制作ツールのAdobe Flash Professional CS5（以下Flash CS5）でiPhone用ネイティブ・アプリケーションを作成できるという話題が先行していますね。今回インタビュー用にご用意いただいたレジュメにこの話題が含まれていないのですが，なぜですか？ 我々は特定のデバイスにFlashという技術が対応するのだと思われるのは避けたいと考えています。特定のデバイスへネイティブ対応することを
HTML5でHTMLの何がかわるのかを知る3分間ガイド | エンタープライズ | マイコミジャーナル
secretGeek HTML5の仕様策定がある程度進んできたこと、IEを除く最新のブラウザがHTML5機能の実装を順次はじめたこと、MicrosoftのチームがHTML5の策定に積極的に参加をはじめたこと、Webアプリケーション開発者やWebデザイナの関心が高まってきたことなどを受け、HTML5の新機能を紹介したり、HTML4とHTML5の違いを紹介する記事やブログが増えている。 そうした紹介記事のひとつに、secretGeekに掲載されたHTML5, a 3 minute guideがある。HTML5の新機能を紹介する記事では、HTML5が生まれる経緯を簡単に説明したあとで、新しく追加される要素について紹介するスタイルをとることが多いが、この記事では従来の記述例をHTML5にしたらどうなるかという違いを視覚的に示したあとで、その違いを説明している。 HTML5, a 3 minute
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
http://www.designwalker.com/2009/11/html5.html
[CSS]HTML5, CSS3, jQueryを使用して実装する画像ギャラリー