Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ25種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
この記事は5/23に掲載された「A HTML5 Primer for the Overwhelmed」を訳したものです HTML5がグーグルやアップルにより、リッチインターネットアプリケーション(RIA)のためのソリューションとして強力にサポートされ始めた結果、HTML5という言葉がバスワード化しています(特にGoogle I/O以降)。そして、HTML5という言葉が広く流布するにしたがって、その言葉本来の意味とは違う意味で使われ始めていることも、驚きではなくなっています。「HTML5の経験があること」が採用条件となっているような採用情報も既に存在しますし、シンプルなJavaScriptアニメーションもCSS3によるアニメーションもひっくるめてHTML5のサンプルとして紹介されていたりします。 ちょうど00年代中頃に「次世代のWeb開発」を指すバズワードとして「AJAX」や「Web2.0」
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 最近、HTML5の影響やタッチデバイスのUXからの転移もあってか、これまでとは異なるデザインのWebサイトが増えてきているように感じます。 例えば、イギリスのデザイン・エージェンシー、TME Solutions。 このサイトの構造は従来のページ遷移型の構造をしていません。いちおページ単位で個別のヴィジュアルが展開されていますが、構造的には紙を折り畳んだパンフレットのように上から下まで連なった形をしています。 グローバルナビゲーションが後から追いかけてくるUXの是非はともかく、ページを遷移せずにみせる形式は一枚の紙の一覧性の良さと同様に、ユーザー自身が情報全体のなかでの自分が見ている現在位置を把握しやすいという利点があります。 類似の構造をもつのがReverse Büroです
mindmaps HTML5ベースのオープンソースなマインドマップ作成ツール「mindmaps」 マインドマップツールも色々ありますが、HTML5ベースで、インタフェースも結構イケてるツールの紹介。ソースのダウンロードも可能です。 項目をマウスオーバーすると赤い丸が出るのでそれをドラッグ&ドロップでツリーをどんどん広げていけるインタフェースも使いやすいです。 マウスホイールでマインドマップ自体の拡大・縮小が可能で、細かいところにも配慮がされています。 Chromeであればサクサク動いて、本来の目的である思考に集中することができるでしょう。 ツリーの折りたたみなんかもできちゃいます。 ソースはこちらのgithubにてダウンロード可能
Adobe Labs に Adobe Edge のプレビュー版が公開されました。Edge は HTML5, JavaScript, CSS3 ベースのアニメーションやインタラクションを、描画ツールやタイムラインを使って制作できるオーサリングツールです。昨年秋の MAX でプロトタイプが紹介されて以来の更新となりました。 (Adobe Edge@Labs) Edge は、本格的なオーサリングツールというよりは、Dreamweaver や Flash Professional を補完する、軽量かつ高速なツールと位置づけられているようです。比較的単純なアニメーションの制作に特化したツールです。 実際に Edge プレビュー版を使って制作したサンプルがいくつか公開されています。 wordAnimation wordAnimation2 その他にも、Edge のソース付きでこちらのページに紹介されて
HTML5のモバイルアプリを“ネイティブアプリ化”する「PhoneGap」が正式版に。オンラインでの変換サービスも発表 HTML5、CSS、JavaScriptなどのWeb標準の技術で作成したモバイルアプリケーションを、iPhoneやAndroidなどのデバイスにインストール可能なネイティブアプリケーションへと変換するフレームワーク「PhoneGap」が、正式版「PhoneGap 1.0」になったと開発元のnitobiより発表されました。 PhoneGapはオープンソースソフトウェアとして開発されているソフトウェアで、無料でダウンロードし利用することができます。 デバイスごとのネイティブアプリケーションに変換 PhoneGapを、jQuery Mobileのようなマルチデバイスに対応したモバイルアプリケーション用フレームワークと組み合わせると、HTMLやJavaScriptなどのWeb標準
ブラウザでスライドを表示し、HTMLベースで作成できるプレゼンテーション用のスライドを簡単な操作方法と合わせて紹介します。
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes : HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
写真●SpinMedia Extensionsを利用した広告例。タッチ操作で製品を回転させて、様々な方向からデザインを確認できる 電通とヤッパは2011年7月22日、両社の提携事業である電子雑誌の有料配信サービス「マガストア」のiOS用アプリとAndroid用アプリで、誌面や広告面を体感型に表示できるビューア拡張システム「SpinMedia Extensions」(スピンメディア エクステンションズ)を開発したと発表した。 これまでマガストアのビューアは、PDF形式の雑誌誌面を電子化し閲覧する方式だったが、「SpinMedia Extensions」ではHTML5を使ってページを表示できる。誌面・広告面の画面操作でページ送りのアニメーション効果を持たせたり、画像の切り替え、動画の埋め込み/再生、簡易的なアニメーションなどのインタラクティブな表現が可能となる。 出版社やマガストアの雑誌に出稿
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ!というデザイナーさんは覚えておくとよさそう
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
Webブラウザとサーバのあいだで専用のプロトコルを用いて通信を行うことで、サーバからのプッシュなど、より柔軟なデータのやりとりをWebブラウザとサーバ間で可能にするWebSocket。当初はHTML5仕様の一部として検討され、その後独立した仕様となりましたが、昨年12月にセキュリティ上の問題が発覚。見直しが行われていました。 WebSocketはプロトコルをIETFが、APIをW3Cが策定中ですが、IETFがセキュリティ問題を解決したプロトコル仕様のラストコールを発表しています。いつもWeb標準の動向を伝えてくれる「Web標準Blog」の記事「WebSocketプロトコルがLast Callに」が伝えています。 過去のバージョンとの互換性はなし WebSocketは、昨年にFirefox 4やOperaに実装されましたが、プロトコルにセキュリティの問題が発覚。いったん機能が無効になりました
ウェブ実装技術が支える電子書籍「読書体験」のデザイン - HTML5・CSS3 でつくった EPUB 3.0 ファイルで実感してみよう EPUB 3.0 の仕様が5月23日に固まり、あとは正式公開を見守るだけという段階になりました。先週末まで開催されていた国際電子出版エキスポの様子からも、出版・印刷各社が本気で電子書籍・EPUB に注力しているのがうかがえます。 EPUB とはなにか・EPUB 3.0 でなにができるのかは、以前このブログにディレクタの内藤が書いた記事(1・2)などで確認していただくとして、今日は、EPUB 電子書籍の制作とウェブデザインとの関連をテーマにしてお話ししたいとおもいます。 EPUB も 3.0 から HTML5 ベース(XHTML5)となり、ウェブページの表現や設計実装に起きている大きな変化の流れに一層寄り添うことが決まりました。 今後、ウェブ制作業界は、HT
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは? アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
グリー<3632>は、本日(7月11日)、FlashコンテンツをiOS端末上で表示させる自社開発の技術を開発パートナー向けに順次提供していく、と発表した。 今回開発した技術は、SWFファイルをHTML5へ変換するグリーの自社開発技術で、フィーチャーフォン向けに制作されたFlashコンテンツを、スムーズかつ容易にiOS端末上へ移植することができる。この新たな技術を用いることで、開発パートナーは、さらなる開発コストと期間の軽減が可能になるとのこと。 なお、7月5日よりiPhone向けに提供を開始した「踊り子クリノッペ」には、この技術が採用されているという。グリーでは、フィーチャーフォンで表現されるFlashコンテンツはそのままに、高画質な大画面とタッチ操作などスマートフォンならではの豊かな表現力と機能が楽しめる、としている。
2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識~活用まで カテゴリ: CSS3 HTML HTMLとCSS タグ:CodingCSS3ジェネレーター作成支援ツール 現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ(@CROO1379)が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く