Getting Started with Web Workers | Envato Tuts+
One of the many design goals of the JavaScript language was to keep it single-threaded and, by extension, simple. Though I must admit that, given the idiosyncrasies of the language constructs, it is anything but simple! But what we mean by being "single-threaded" is that there is only one thread of control in JavaScript; yes, sadly, your JavaScript engine can do only one thing at a time. Now, does
Yahoo! PipesライクにWebブラウザ上で音声ファイルにイフェクト「Audiograph」 - MOONGIFT
AudiographはWebブラウザ上で音声ファイルのイフェクトを行うソフトウェアです。 HTML5になって様々なAPIが追加されていますが、実際にどんなことができるかはまだ模索段階という方が多いようです。そこで一例としてAudiographを紹介します。音声ファイルをWebブラウザ上で加工できるソフトウェアです。 最初の画面です。 Yahoo! Pipesライクにコンポーネントを接続していきます。 例えばこんな感じにループさせることもできます。 説明です。 各種クラウドストレージまたはファイルアップロードを使って音声ファイルをアップロードします。 Playを押すと再生されます。この他マイクを使うこともできます。 ポーズした時の表示です。 コンポーネントとしては音声の左右バランスを変更したり、遅延させたりと言ったものがあります。他にもたくさんの編集機能があり、それらをパイプでつないで一つの
意外と実用的。Webブラウザで指先を使ってページ送り·Webcam Swiper MOONGIFT
Webcam SwiperはWebブラウザ上でWebカムの映像を解析し、ページ送りを行うライブラリです。 HTML5のgetUserMediaが一般化してきたことで、Webブラウザ上でWebカムを使って楽しむソフトウェアが増えてきました。今回紹介するWebcam Swiperもその一つ、マウスに触れずにページ送りを実現するソフトウェアです。 最初のアクセス時にWebカムへのアクセスが求められます。 許可すると通知が出ました。 分かりづらいですがデモです。マウスは動かしていません。 実際の認識率から言うとそれほど高くなかったりします。誤動作してしまうケースもありました。しかしWebブラウザだけで指を動かしてページ送りができてしまうというのは新しい体験で非常に面白いです。 Webcam SwiperはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
New iPhone 5 and iOS 6 Features for HTML 5 Developers - DZone
Quick review I’m going to divide this post in two parts: iPhone 5 and iOS 6 new stuff. On iPhone 5: New screen sizeNew simulatorWhat you need to doProblems New features on iOS 6: File uploads and camera access with Media Capture and File APIWeb Audio APISmart App Banners for native app integrationCSS 3 FiltersCSS 3 Cross FadeCSS Partial Image supportFull screen supportAnimation Timing APIMulti-res
すげえ！Webブラウザ上だけでアニメーションGIFを作成·Mothereffing animated gif MOONGIFT
Mothereffing animated gifはWebブラウザ上で任意の画像からアニメーションGIFを作成するソフトウェアです。 これまではローカルのアプリケーションでしか出来ないと思っていたようなことがどんどんWebアプリケーションでできるようになっています。今回は画像をまとめてGIFアニメーションにしてしまう、そんなMothereffing animated gifを紹介します。 まず画像をドロップします。 画像サイズ、切り替え時間、クオリティなどを変更できます。終わったらAnimateボタンを押します。 ちゃんとアニメーションGIFになりました。 画像を入れ替えたり、回転させることもできます。 Mothereffing animated gifはサーバサイドに画像をアップすることなく、クライアントサイドだけで画像の処理を行います。GIFなのでJPEGをアップするとかなり画像が荒く
HTML5 APIs You Didn't Know Existed
When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature addition like placeholder made us "take a minute." Despite many HTML5 features being implemented in modern browsers, many developers are unaware of some of the s
alert('イチオシ'); // 書評 - JavaScript逆引きハンドブック : 404 Blog Not Found
2012年09月03日19:30 カテゴリ書評/画評/品評iTech alert('イチオシ'); // 書評 - JavaScript逆引きハンドブック 出版社より献本御礼。 JavaScript逆引きハンドブック 古籏一浩 待ってましたこういうの。 EcmaScript 5のサポートが一通り完了して、これからHTML5のAPIが充実していくという今は、JavaScriptを学ぶ最高の旬。だけどWebの情報は断片的で、折角の新APIを使おうにもどこから手をつけていいのかわからなかった。これで勝つる。 本書「JavaScript逆引きハンドブック」は、「Ruby逆引きハンドブック」の出版社によるJavaScriptのシソーラス。「辞書」や「参考書」なら巷にあふれかえっているJavaScriptであるが、これがなかなかなかった。ましてやES5にHTML5といった最新の機能をカヴァーしているも
HTML5 & CSS3 Fundamentals: Development for Absolute Beginners
Want to learn a different language? Over the course of 21 episodes, our friend Bob Tabor from www.LearnVisualStudio.net will teach you the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features. We'll walk you through getting the web prinic... Want to learn a different language? Over the course of 21 episodes, our friend Bob Tabor from w
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery
Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user. Getting Started For this tutorial I’m using jQuery and an icon font called symbolset. If you don’t want to get symbolset you could use an alternative or just not use a symbol font all together!
Webはここまできた。怖いくらいに再現度の高いスーパーマリオワールド·Mario5 MOONGIFT
Mario5はHTML5で作られたスーパーマリオワールド風ゲームです。 どれだけゲームの技術が進化しようとも忘れてはならないのがマリオです。任天堂の新しい筐体には必ずマリオのゲームがあります。そんな愛すべきキャラクターゲームをHTML5で再現したのがMario5です。 まさにスーパーマリオワールド。音も鳴ります！ 矢印キーで移動して、CtrlキーがBボタンになります。 キノコを取ってパワーアップ。 敵キャラはクリボン、ノコノコ、トゲゾー、パックンフラワーなど。 クリアー！旗はないようです。 変なことをするとバグるのもご愛嬌。 ゲームオーバー…。 レベルエディターもあります。 こんな感じに好きに配置できます。 Mario5の再現度はかなり高いため、著作権的な部分が心配になってしまう作りではあります（指摘されれば終わってしまうでしょう）。しかしHTML5+JavaScriptでここまで作れてし
HTML5で作られたポータル風ゲーム·Stick Portal MOONGIFT
Stick Portalは棒人間による2Dのポータル風ゲームです。 ポータルというゲームがあります。壁に二つの穴を開けて、その間を移動できるようにするポータル銃を使ってパズルを解き、ゴールを目指すゲームです。そんなポータル風ゲームをHTML5で再現したのがStick Portalです。 まず基本。左にいるキャラクターを右にある四角まで持っていけばゴールです。 ちょっと高い場所にゴールがあります。真ん中にある踏み台を使うと高くジャンプできます。 やっとポータルらしい場面です。太い線の部分にはポータル銃で穴があけられます。 まず一つ目の穴。 ついで二つ目の穴。飛び込めばゴールです。 こんな感じの面も。ポータル銃は穴だけでなく、物体の移動にも使えます。 こうやって重ねると高い場所でもゴールできます。 邪魔するキャラクター登場。放ってくる弾に当たっても死にませんが、一気に吹っ飛ばされます。 箱がい
HTML5--押さえておくべき10のタグ
HTML5では、ウェブ開発時に強力なパワーや効率性、柔軟性を発揮するタグと属性が新たに追加されている。本記事では、そういったタグを10個選んで紹介する。 HTML5では、他のシステム（特に検索エンジン！）がドキュメントをより容易に解析できるようにしたり、今までにないデータ表示を可能にしたり、複雑なJavaScript、あるいは「Adobe Flash」や「Microsoft Silverlight」といったブラウザのプラグインを必要としていた機能に取って代わるような数々の新たな要素や属性が追加されている。以下では、HTML5を用いてあなたのウェブサイトを構築する際に役立つ10個の新たなタグを紹介する。 ＃1：<video>タグと<audio>タグ FlashやSilverlightといったテクノロジを用いる最大の理由は、マルチメディアコンテンツの再生にあると言ってもよいだろう。HTML5で
How To Build A Real-Time Commenting System — Smashing Magazine
The Web has become increasingly interactive over the years. This trend is set to continue with the next generation of applications driven by the real-time Web. Adding real-time functionality to an application can result in a more interactive and engaging user experience. However, setting up and maintaining the server-side real-time components can be an unwanted distraction. But don’t worry, there
はじめてのHTML5 第2回『HTML5のさらに詳しいCSSリセット方法』 | HTML5でサイトをつくろう
リセットCSSとは 各ブラウザ(IE・FireFox・safariなど)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートのことを『リセットCSS』と呼んでいます。 ブラウザ毎のデフォルトスタイルをリセットする理由 例えばデフォルトのまま文字を表示すると、ブラウザ毎に文字サイズが変わってしまいます。そこで、デフォルトのスタイルをすべてリセットするCSSを読み込み解決します。 ※ただし、リセットCSSは必ず必要というわけではありません。今回、詳しい説明などはいたしませんが、ブラウザのデフォルトスタイルを有効に使っていこうという考え方もあります。 HTML5のリセットCSS XHTML1.0でのリセットCSS いままでのXHTML1.0で主に使用しされていた代表的なリセットCSSは、 YUI LibraryのCSS Reset Eric Meyer’s
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
『コンテンツ・モデル』について / HTML5マークアップ時の基本 | HTML5でサイトをつくろう
HTML5 『コンテンツ・モデル』について HTML5でコーディングする場合に、知っておくべきことの一つに『コンテンツ・モデル』があります。その『コンテンツ・モデル』とは、各要素ごとに内包できるコンテンツを定義したものを言います。 つまり、要素ごとにどんなコンテンツを入れて良いのかが決まっているということみたいですね。 また、HTML5からは『ブロック/インライン要素』の概念がなくなり、『コンテンツ・モデル』を意識することになるので、間違ったコーディングをしないように、今回の記事でしっかり理解したいと思います。 カテゴリーによる定義 まず、コンテンツ・モデルとして大抵の場合はカテゴリーの定義が考えられるようです。前回記事≪HTML5のカテゴリーについて / HTML5マークアップ時の基本≫でカテゴリーの種類について勉強しましたが、下記にカテゴリーの関係を示した図がありますのでこちらも確認し
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Blank WordPress Theme
HTML5 autofocus Attribute
http://gamecenter.grantgalitz.org/