すべての記事 - ページ 597

それで、あなたは、HTML5に関するすべての噂がAdobe Flashを引き継ぐだろうと聞いたことがあります。ほとんどのWebコミュニティはそれが可能であるかどうかを主張していますが、あなたはHTML5を強力にするものを放浪している必要があります。. この記事がある理由はここにあります、私達はHTML5ができることについて話すつもりはありませんが、HTML5がJavaScriptのような他の言語で達成できる魔法のことの実演を見せます。. 注：HTML 5はInternet Explorerなどの特定のWebブラウザでは完全にはサポートされていないため、以下のHTML 5デモをすべて表示するにはFirefoxブラウザを使用することを強くお勧めします。. アニメーション HTML 5のキャンバス要素は、HTML 5が特定のFlashアニメーションを置き換えるための決定的要素です。 Javascriptを使用して、2Dシェイプおよびビットマップイメージの動的でスクリプト可能なレンダリングを構築できます。これは、他の意味では制御可能なアニメーションです。. オーディオバーストアニメーション HTML5のキャンバスとオーディオタグで作成された快適で素晴らしいアニメーション. ボールプール 前回のGoogle I / Oイベントで紹介されたこのデモでは、HTML5がいかに動的にできるかを説明します。. ブロブサラダ あなたを喜ばせるであろうHTML5生成の生き物. ボモモ Bomomoでは、HTML 5でシミュレートしたさまざまな原子運動を観察できます。. ブラウザボール この「クロスブラウザ」HTML5ボールに驚かせてください. 泡 色の異なる無限の浮遊泡を作成して楽しんでください. キャンバス漫画アニメーション HTML5のキャンバス要素で何ができるのかを理解するのに役立つ、シンプルで面白いHTML5の漫画....

HTML5革命は、世界中のあらゆる分野のエキサイティングなWebデザイナーです。新しい仕様は、セマンティックWebサイトを構築するための多数の要素と属性をサポートしています。これらの新機能には、オーディオおよびビデオフォーマット用のマルチメディアタグが含まれています。. 過去数年間に、FlashベースのメディアプレーヤーはWeb上でのストリーミングには十分すぎるほどであり、このテクノロジはレガシーブラウザをサポートするために依然として必要です。しかしありがたいことに現代の標準規格は進歩しており、HTML5ビデオを含めることは何十もの新しい機会への扉を開きます. このガイドでは、Web用のHTML 5ビデオについて紹介します。ネイティブのブラウザ内プレーヤーとそのすべての機能を理解するには、いくらか練習が必要です。そして、親しむための最善の方法は、最初に頭の中でダイビングすることです。! 1.メディアの種類 フラッシュビデオプレーヤーを使用しているときは、すべてのビデオフォーマットを.flvで関連付けることは一般的です。これはうまくいきますが、ほとんどのflvファイルはより高度なファイルフォーマット/コーデックの近くではどこでも品質を保つことができません。 HTML5でサポートされている3つの重要なビデオタイプがあります：MP4、WebM、そしてOgg / Ogv。 MPEG-4ファイルタイプは、一般的にH.264でエンコードされているため、サードパーティのFlashプレーヤーでの再生が可能です。これは、代替方法をサポートするために.flvビデオコピーを保存する必要がないことを意味します。 WebMとOggは、HTML5ビデオに関連する2つの新しいファイルタイプです。 Oggは、オープンソースの標準オーディオファイルフォーマットに基づいたTheoraエンコーディングを使用しています。これらは、拡張子.oggまたは.ogvで保存できます。. WebMはGoogleによって公開されているプロジェクトで、WebM ProjectのWebサイトで詳しく読むことができます。フォーマットは、Opera、Google Chrome、Firefox 4+、そして最近ではInternet Explorer 9ですでにサポートされています。それは、ほとんどのWeb専門家にはまだ知られていません。. 2.ブラウザのサポート Webサイトに必要なファイルの種類はどれですか。理想的には、3つすべてが完全なサポートスペクトラムを提供するので、3つすべてが素晴らしいでしょう。しかし、これは現実的ではありません。実際、2つのベースですべてのベースをカバーできます。これは、各ブラウザで機能するものの内訳です。 Mozilla Firefox - WebM、Ogg Google Chrome - WebM、Ogg オペラ -...

HTML5は多くの機能と改良をもたらします。 Webフォーム, 導入された新しい属性と入力タイプがあります 主にWeb開発者の生活を楽にし、Webユーザーにより良い経験を提供するため. そのため、この記事では、次のようにしてログインページを作成します。 HTML5フォーム 新しく追加された機能がどのように機能するかを確認する. デモ ソースをダウンロード HTML5の入力 次のマークアップを見てみましょう. Eメール パスワード HTMLフォームを以前に使用したことがあれば、これはおなじみのことでしょう。しかし、違いもあります。入力は プレースホルダー そして 必須 attributes、HTML 5の新しい属性. プレースホルダー の プレースホルダー 属性を使用すると、入力に最初のテキストを入力できます。 フォーカス 以前は、JavaScriptを使用していましたが、この新しい属性を使用するとはるかに簡単になります。. 必須属性 の 必須 attributeはフィールドを必須に設定するため、フォームが送信される前に空白のままにしないでください。したがって、ユーザーがフィールドに入力していない場合は、次のエラーが表示されます。. 新しいセレクタはCSS3でも導入されました,...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. この記事では、架空のプロジェクトに取り組み、iPhone 4Sを提供する単一の製品ページを作成します。このプロジェクトでは、以前の記事で説明した方法も実装します。の 要素と否定セレクタ. 始めましょう. HTML5マークアップ まず、作成する必要があります html 次のマークアップで文書化します。 アップルiPhone 4 - 16GB まだ最も素晴らしいiPhone. 高速デュアルコアA5チップまったく新しい光学系を搭載した8MPカメラも1080p HDビデオを撮影します。そしてシリを紹介します。それはまだ最も素晴らしいiPhoneです. 製品の特徴 フル1080pビデオ録画付き8メガピクセルカメラ シリ声助手 iCloud エアプリント...

Webデザイン業界の大手企業は近年HTML 5を採用していますが、実用的な解決策としてそれを使用している人は他にあまりいません。言語が一定期間宣伝されているのであれば、HTML5テンプレートジェネレータとフレームワークを作成することによってあなたの問題を解決することに熱中する人がいるでしょう. Hongkiatでは、常に開発作業をできるだけ簡単にしたいと考えています。そのため、HTML5開発を高速化したり、ブラウザの互換性などの問題を軽減したりするためのHTML5テンプレートジェネレータおよびフレームワークを次に示します。一日の終わりまでに、あなたのHTML5開発はこれらのジェネレーターとフレームワークによってより簡単で幸せになるでしょう! なぜフレームワークなのか? 実際にフレームワークを習得するには時間がかかるかもしれませんが、フレームワークの準備が整っていれば、追加する必要があるのはコンテンツと好みに応じたわずかな変更だけです。また、心配する必要はありません。HTML5テンプレートジェネレータまたはすぐに使用できるフレームワークを使用していることにうっかり惑わされることはありません。. 実用性が最優先! その上、使用するためにそこにあるフレームワークは通常忠実な支持と支持を持っています。フレームワークを使用することの利点は、ブラウザ間やプラットフォーム間の互換性などの深刻な問題を心配する必要がないことです。しかし、もちろん、あなたはそれらの原因に貢献することができます、特にオープンソースのライブラリとフレームワークのために。. 結局のところ、それはあなたのデザインツールボックスに余分なギアを持っていることは常に良いです! テンプレートジェネレータとフレームワーク イニシャライザ HTML5テンプレートを自分で生成するのに必要なクリック数はほとんどありません。 Initializrでは、テンプレートにJavaScriptまたはjQuery、サーバー設定、およびGoogleアナリティクスを含めるかどうかを選択できます。. InitializrはHTML5BoilerPlate、あなたのHTML5の把握を拡張し、機能性を追加し、そしてあなたのサイト全体を改善するためのもう一つの素晴らしいツールにも基づいています. HTML5テンプレートジェネレータ 代替手段はShikiryu.comのHTML5テンプレートジェネレータです。それはあなたがそれらを自動的にテンプレートに挿入したい場合に備えて、ウェブサイトの作者のための説明を含めるための追加のオプションを持っています、またFaviconとApple Touchアイコンのためのオプションを含みます. SwitchToHTML5 もう1つの優れたHTML 5フレームワークジェネレータはSwitchToHTML 5です。他の人と同様に、それはあなたがのようないくつかの要素を追加することを可能にします , , , , その他。 SwithToHTML5では、Internet Explorerをサポートするかどうかを選択できます。IE9より前のバージョンではHTML 5がネイティブでサポートされていないためです。. 改革された たとえば、フォームを作成するのが嫌いなのは私だけではありません。フォームを作成するのは面倒な作業です。少なくとも私のような人々にとっては、清潔で機能的なフォームを作成するのを助けるために改革が行われた理由です。...

Flashキラーとして噂されているHTML 5は、Webアプリケーション開発においてAppleが革命を起こす画期的なWeb技術です。画像やアニメーションの描画用のキャンバス要素、ビデオやオーディオの埋め込みのサポート、オフラインWebアプリケーション用のストレージデータベースが含まれています。最も重要なのは、これらすべての機能を利用するためのプラグインは必要ないということです。最新のブラウザはそれをサポートします。. かなりクールに聞こえますが、HTML5は実際に何ができるのでしょうか。さて、この記事では、描画アプリケーション、チャート作成アプリケーション、および時間管理アプリケーションなど、一連の実用的なHTML5を使用したWebアプリケーションを紹介することで、HTML5の機能に関する好奇心をかき立てます。技術文書はもうありません。HTML5の本当の可能性を目の当たりにしましょう。! 19 HTML5対応のWebアプリ DeviantART muro MuroはHTML5ベースのスケッチアプリで、最近のすべてのブラウザで機能します。Flashや他のプラグインを使用せずに、空白のキャンバスに飛び込んで描画を開始できます。誰でも利用できるブラシがいくつかありますが、より高度な機能にアクセスするには、DeviantArtアカウントが必要です。. HootSuite いくつかの優れた機能を備えたHTML5ベースのソーシャルメディアダッシュボード：地理位置のつぶやき検索、新旧のスタイルのリツイートの選択、Google Analyticsへの接続、ドラッグアンドドロップ編集、カスタムインターフェースなど。プロのブランド管理のための完璧なオンラインツール. Xワールド あらゆるサイズの子供にとってクールで面白いもの。あなたはあなたのキャラクターの絵を提出し、それが素晴らしいイラストに変わるのを見ることができます。次のX-ワールドスーパーヒーローになろう! 鳥小屋の画像エディタ 使いやすくて驚くほど強力なHTML5搭載のフォトエディタ。 HTML 5の使用（Flash、Silverlight、または他のRIAフレームワークとは対照的に）以外に、このアプリを際立たせているのは、ポータブルになるように設計されているため、開発者は自分のサイトまたはアプリに直接統合できる. CSSWarp CSSWarpは、任意のテキストを曲線パスまたは円に添付してから、純粋なCSSとHTMLでワープテキストを作成することを可能にするオンラインツールです。. Flickrブラウザ FlickrブラウザはクールなアプローチでFlickrの写真を閲覧するためのユニークなHTML5アプリです。. CSS3.0メーカー 開発者にとって素晴らしいアプリです。スライダーやライブプレビュー領域を利用してブラウザ間のマークアップを生成します。. クーレンダール HTML5ベースのカレンダーWebアプリ効果的な時間管理のためのシンプルでクリーンなインターフェースと便利な機能. Twimbow Twimbowは、フィルタリングを中心とした、カラフルなHTML 5およびCSS 3ベースのTwitterクライアントです。インターフェースはTweetDeckとSeesmicに似ていますが、その主な違いはそのカラフルなインターフェースにあります。さまざまなユーザーやグループにさまざまな色を割り当てたり、カラータグを追加してツイートの色を変更したりできます。! スケッチパッド...

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る. HTML5で利用可能ないくつかの新しいタグの中で、仕様（例： 図, figcaption, そして さておき）, 細部 そして 概要 私の意見では、タグが最も便利です。これらの新しいタグを使用すると、長いコンテンツの一部を非表示にして概要のみを表示できます. 私たちは実際にこの効果をよく目にすることがありますが、それらのほとんどは依然としてJavaScriptまたはその兄弟であるjQueryに基づいて構築されています。さて、これらの新しい要素を使って - 詳細 そして 概要 - 物事は簡単になります. それでは、実際のシナリオでタグがどのように機能するかを見てみましょう。. このデモでは、製品の説明をまとめます。最初に「details」タグを作成してから、次の例のように、その中に「summary」タグとともにすべてのコンテンツを配置しましょう。 MacBook Proの仕様...

の新機能の1つ HTML5 私を魅了したのはネイティブのフロントエンドエディタです。この機能は一般にブラウザから直接コンテンツを編集するためにコンテンツ管理システムに適用され、通常JavaScriptとAJAXで完全に構築されています。 HTML 5を使用すると、プロセスが少し簡単になります。 満足できる 属性. それは何ですか 任意の要素に適用されたとき、この属性は私たちを可能にします 編集する その内容は、下の例を見てみましょう。 クッキーマフィンクロワッサン。 Faworkiデンマークビスケット。ナツメパウダークッキーケーキビスケットhalvah halvah。ビスケットグミゼリービスケット. 甘いロールティラミスチョコレートバーシュガープラムキャラメルトゥーツロールキャラメル。チョコレートケーキと綿菓子のアイシング。 Applicakeゴマスナップ甘草菓子クロワッサンキャラメルフルーツケーキジンジャーブレッドビスケット。ドーナツタフィーキャンディー. この例では、追加しました 満足できる 属性と設定 本当の そのため、コンテンツは編集可能になります。この属性に追加できる値は他に2つあります。 偽 これは逆になります。コンテンツは編集できなくなります。 受け継ぐ;次の場合はコンテンツが編集可能になります。 直接の親 編集可能です. デモを見る 上記のデモをチェックアウトした場合は、コンテンツをブラウザから直接編集できることがわかります。ただし、この要素は変更内容の保存をカバーしていないため、変更後にページを更新すると、コンテンツは元に戻ります。. 変更を保存する方法 変更を保存するかどうかは、データをどこに保存するかによって異なります。通常、データベースに保存されます。しかし、このチュートリアルではデータベースにアクセスできないので、変更を保存する方法を説明します。...