HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
PuzzleScript - an open-source HTML5 puzzle game engine
PuzzleScript! PuzzleScript is an open-source HTML5 puzzle game engine. Make A Game First Steps Gallery
CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル
CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 デモページ：サムネイルのホバー時 サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。 実装 実装はポイントをまとめて紹介します、Stepは3つです。 元記事では詳細に書かれているので、参考にしてください。 Step 1: HTML 画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。 <ul class="portfolio-items"> <li class="item"> <figure> <div class="view"> <img src="images/1.jpg"> </div>
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応 インテルは、先週4月10日から11日かけて中国北京で開催された「Intel Developers Forum Beijing 2013」（IDF Beijing 2013）において、クロスプラットフォームに対応したHTML5アプリケーションの開発ツール「Intel XDK」を発表しました。 Intel XDKはブラウザ上で動作するHTML5アプリケーション開発ツール（ChromeブラウザとJavaのインストールが必要）。HTML/CSS/JavaScriptで開発したアプリケーションを、PhoneGap機能でビルドし、iOS/Android/Kindle/Facebookなどのアプリケーションが開発できます。開発したアプリケーションは、各アプリストアで販
http://inputxoutput.com/html-doctype/
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
HTML5によるハイブリッドアプリ開発に関する雑記 - id:anatooのブログ
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
脱Flash！素人でも簡単にHTML5アニメが作成できるMacアプリ「Hype」を使ってみた。なにこれ超楽しい！
Web制作に携わっていると頭を悩ませる項目の一つが「Flash」への対応。 動きのあるコンテンツを作成するにはやはりまだまだFlashが便利なわけですが、iPhoneをはじめとするiOSでは再生できない（一部再生できるブラウザアプリはありますが）ので、困った困ったなのです。 そこで次代を担う（であろう）コンテンツがHTML5を使用したムービー。 先日も、「Form Follows Function」と言うHTML5で作られた、動きのあるコンテンツを紹介したWebページをご紹介したばかりですが、ここまで複雑なものは出来なくとも、私のような初心者でも超簡単にHTML5アニメが作れると噂のMacアプリ、HypeをDLして使ってみました。 タイムラインを使って簡単にHTML5アニメを作れる！ 起動。 Welcome to UNDERGROUND… 「Watch Getting Started Vi
Form Follows Function
Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
HTML5はバズワード化してカオスな状態に、トッププレイヤーが語る正しい認識と最新情報 | Web広告研究会セミナーレポート
「HTML5の捉え方が人によって異なるため、議論していてもまったく別のものを指してHTML5と言っている場合がある」と前置きする森田氏は、「今回のディスカッションでも一定のリテラシーを決めて行ったほうがよい」と話す。そのうえで、HTML5のおおよその歴史を次のように説明する。 W3C（World Wide Web Consortium）がXHTMLを策定してXHTML2の勧告を目指していたがなかなか進まなかったWHATWG（Web Hypertext Application Technology Working Group）がWA1（Web Applications 1.0）とWeb Form2を策定したW3CがXHTML2の策定を諦めてWA1とWeb Form2を採用してHTML5 WD（Working Draft）として発行した一方で、大多数の現場的歴史観は異なると森田氏は説明する。X
HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
HTML5 開発者向け！「ブラウザ仕様確認ツール」をリリースしました。 - NTTドコモ開発者情報Blog
本日2回目のブログ更新となります！ 本日1回目のブログでもお伝えしていていましたが いよいよ開発者の皆様に向けた新規企画の発表です！ （タイトルでバレバレですが^^;） 本日、HTML5 開発者に向けた （スマートフォン）搭載ブラウザの仕様を確認するツール ※PCブラウザでも確認できます。 ブラウザ仕様確認ツールをリリースしました！！ URLはこちらです！↓ http://spec.nttdocomo.co.jp/spbss/ 上記のURLにブラウザでアクセスすると W3Cのカテゴリに基づいたHTML5の仕様を 搭載ブラウザで利用できるか判定をして OK or NGで結果を返します！ TOP画面はこんな感じで UAの情報を確認できるようにしています！ 今回は、判定項目数を約2600個用意しました！ あれこれ精査していくうちに開発者の皆様により多くの項目を見
WordPressのテーマファイルをHTML5にするチュートリアル
このサイトはまだHTML5にしてないので、WordPressのテーマファイルをXHTMLからHTML5にするステップごとに解説されたチュートリアルを紹介します。 Convert Your WordPress Theme to HTML5 下記は各ポイントを意訳したものです。 チュートリアルのゴール HTML5のベーシックなレイアウト Step 1: header.phpをHTML5化 Step 2: index.phpをHTML5化 Step 3: sidebar.phpをHTML5化 Step 4: footer.phpをHTML5化 Step 5: single.phpをHTML5化 Step 6: style.cssをHTML5化 チュートリアルのゴール このチュートリアルは、XHTMLでつくられたWordPressのテーマファイルをHTML5にするものです。テーマファイルはそれぞれ
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！
HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますｗ 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き＠kazuhi.to: 巷（何処）で話題のmain
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
真面目なアニメーション (html5j 2013, Web Animations)
cmmntr.com