Showcase of Beautiful HTML5-Powered Websites
HTML4, after ruling for more than a decade, is now being replaced by HTML5, which has much more advanced multimedia integration and animation capabilities. Being backward compatible, it runs on almost every browser out there, including for mobile platforms, providing faster load times and smoother connection with third-party applications. Many developers are putting their bets on HTML5. We’ve prev
HTML5カンファレンス2012の資料まとめ
HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-（矢倉眞隆さん） HTML5 や CSS3 の新しいタグやプロパティについての解説。 でもその前に、W3C と WHATWG についての話。 一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。 セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick
iOS でサポートされた viewport 以外の meta タグ
前回の記事のついでに viewport 以外の iOS でサポートされているメタタグについて整理してみましょう。 Supported Meta Tags <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> apple-mobile-web-app-capable content が yes にセットされているならば、ウェブアプリケーションはフルスクリーンモードで実行されます。デフォルトのふるまいは、ウェブコンテンツを表示するために Safari を使用することです。JavaScript
Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
そろそろ実践投入もありうる？Audio Sprite - komagataのブログ
ご存知の通りスマホのHTML5 Auidoは現状酷い状態です。 全プラットフォーム共通で再生できるフォーマットが無かったり、iPhoneは独自仕様で自動再生はできず、ユーザー操作由来のアクションからしか再生できなかったり、複数音が再生できなかったり、Androidは2.2までは全然動かなかったり。 対応策として知られているのがCSS SpriteならぬAudio Sprite。複数の音楽ファイルをつなげて一つのファイルにし、シーク位置を制御することで好きな音を鳴らしたりループしたりする姑息なテクです。 そんな面倒なことやってられるかと思ってたんですが、そろそろAudio Sprite用のツールも揃って来ました。 jukebox zynga/jukebox ひとつはAudio Sprite用の再生ライブラリjukebox。Zyngaが作ってるのでちょっとマジっぽいです。 var settin
html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
暑さでやる気がでないWebデザイナーにおくるHTML5表現まとめ
仲夏。HTMLファイ部の本多です。 jsdo.itにて、コーディングコンテスト「Web Creator's Contest Q」を開催しています。 QはWebクリエイターのためのコンテスト、HTML5、JavaScript、CSSを駆使して挑戦しましょう！ 募集中のテーマはズバリ、 ＼ 夏を涼しくする表現 ／ 暑い夏をひんやり涼しくしてくれる作品をお待ちしています！ 本記事では、続々と集まっている投稿作品の一部をご紹介します。 夏の暑さでやる気のでない方、涼しくてアツいHTML5作品をご堪能あれ！ ※ Chrome、Safari など、最新のモダンブラウザでご覧ください。 夏を涼しくするコードまとめ！ ripple sound 音と波紋を合わせた表現が爽やかで良いですね...！ A～Zのキーを押すと自分で波紋を出せます。
HTML5導入前に覚えておきたいこと｜Webクリエイターネット
Category HTML iPhone・iPad・Androidといったモバイル端末では、HTML5は普通に使われていますが、PCサイトでもInternet Explorer9の登場で無視できない存在になってきました。 今回はPCサイトにおけるHTML5の導入に関して少し書こうと思います。 Keyword：HTML5,DOCTYPE,IE対応,html5.js,IE9.js SafariやFirefoxといったモダンブラウザは以前からHTML5の新要素に対応していましたが、Internet Explorerが対応していなかったため、以前と同じようにXHTMLでサイト制作をすることが多かったのですが、バージョン9の登場でHTML5でサイト制作をするのも珍しくなくなってきました。 ですが、Internet Explorerは一番使用率の高いブラウザですので、前バージョンの7や8等も無視できま
リッチスニペットにも使われる構造化データの状態をGoogleウェブマスターツールで確認可能に
[対象: 上級] サイトに実装している構造化データをGoogleがどのように認識しているかの状態をGoogleウェブマスターツールで確認できるようになりました。 ウェブマスターツールの [最適化] メニューのなかに [構造化データ] というダッシュボード（レポート）ができています。 レポートには以下の3種類があります。 サイト レベル アイテム レベル ページ レベル 1. サイト レベル サイトレベルのレポートは、どんなタイプの構造化データをGoogleが認識しているかを表示します。 Googleがサポートする構造化データは、schema.orgやmicroformats、RDFaなどいくつかありますが、どの仕様のどの型をGoogleが得検出しているかを知ることができます。 2. アイテム レベル アイテムレベルのレポートは、その構造化データがどのページで検出されたかを表示します。 最終
HTML5 for IA
3. セマンティックWebとは セマンティック・ウェブ（Wikipediaより） セマンティック・ウェブ(Semantic Web)はW3Cのティム・バーナーズ＝リーによって提唱された、 ウェブページの意味を扱うことを可能とする標準やツール群の開発によってWorld Wide Webの利利便便 性を向上させるプロジェクト。セマンティック・ウェブの⽬目的はウェブページの閲覧という⾏行行為に、 データの交換の側⾯面に加えて意味の疎通を付け加えることにある。 現在のWorld Wide Web上のコンテンツは主にHTMLで記述されている。HTMLでは⽂文書構造を伝え ることは可能だが、個々の単語の意味をはじめとする詳細な意味を伝えることはできない。これに対 し、セマンティック・ウェブはXMLによって記述した⽂文書にRDFやOWLを⽤用いてタグを付け加え る。この、データの意味を記述した
HTML5仕様をめぐるW3CとWHATWGについて、Ian Hickson氏がメーリングリストに書いたこと
HTML5の仕様策定が、今後W3CとWHATWGに分裂するのではないか、といった言説が流れています。発端となったのは、W3CのWHATWGグループにIan Hickson氏が投稿したメールです。 [whatwg] Administrivia: Update on the relationship between the WHATWG HTML living standard and the W3C HTML5 specification from Ian Hickson on 2012-07-19 ([email protected] from July 2012) [whatwg] Administrivia: Update on the relationship between the WHATWG HTML living standard and the W3C HTML5 spec
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
2. 目次 • 自己紹介 • これから書き始める人の悩み • ついついやってしまうセキュリティホール • HTML5まわりで起こるセキュリティ対策 • まとめ • 参考文献 HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info 3. 自己紹介 • 名前：松本 悦宜(よしのり) • Twitter : @ym405nm • 会社：神戸デジタル・ラボ • 業務：Webプログラマー、セキュリティエンジニ ア、セキュリティコンサルタント セキュリティ JavaScript HTML5 Android Web 神戸ITフェスティバル 讃岐うどん 小ネタ HTML5など勉強会 #05 2012/07/21 @ym405nm http://ym405nm.info 4. 自己紹介 • セキュリティ診断 事例 : ECサイト 管理者アカウントがのっと
ol要素のstart属性を使わずにCSSで番号を途中から振る方法
ol要素のstart属性を使わずに、CSSで番号を途中から振る方法を紹介します。 番号付きリストで「第10位以降のランキング」など、途中から番号を振るケースは少なくないと思いますので、ご活用頂ければ幸いです。 １．基本 ol要素を使えば番号付きリストを作成できます。 HTML <ol> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ol> 実行結果 あああ いいい ううう ol要素にstart属性を使えば、番号を途中から割り振ることもできます。 例えば、次のようにstart属性に「5」を設定すれば、番号付きリストを「5」から開始することができます。 HTML <ol start="5"> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ol> 実行結果 あああ いいい ううう ただし、このstart属性はHTMLあるいは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最新技術を学べるHTML5 Conference 2012の発表資料
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Learn Forms | web.dev
pdf.js：PDF を HTML5 と JavaScript で表示する
http://blog.e-riverstyle.com/2012/07/html5table.html
Modern Syntax
Web Design and Development Tutorials - Design Articles - SEO Tips