HTML5 Web Storage API は、データ サイズに制限されず、より優れた柔軟性とアーキテクチャを備え、データを書き込むことができる Cookie の拡張バージョンとみなすことができます。本機のROMでは、ネットワークトラフィックを軽減するために、ブラウザを閉じて再度開いたときにデータを復元することもできます。
同時に、この機能は、バックグラウンドリソースを占有することなく、別の方向のバックグラウンド「操作記録」とみなすことができ、デバイスハードウェアへの負荷を軽減し、操作の流暢性を高めます。
オンライン アプリは、オフライン キャッシュの使用中にオフライン キャッシュをダウンロードすること、またはオフライン キャッシュをダウンロードしないことをサポートしていますが、オフライン アプリは使用する前にオフライン キャッシュをダウンロードする必要があります。
比喩的に言えば、クッキーには電話番号とメニューが保存されており、テイクアウトを注文したい場合、どれくらい待つ必要があるかは交通状況によって異なります。オフライン キャッシュでは、食べ物を冷蔵庫に直接保存することができます。食べたいときにすぐ食べられます（もちろん、最新のものを食べたい場合は、電話で予約することもできます）。
デザイナーは、ユーザーにオフライン キャッシュをダウンロードさせるタイミングを知る必要があります (オンライン アプリとオフライン アプリの違いに注意してください)。
テキストとオーディオとビデオが混在するマルチメディアコンテンツの場合、テキスト、画像、オーディオ、ビデオを分離する必要があるため、ネイティブ開発方法は比較的面倒です。対応する URL を解析し、別々に扱います。
HTML5 はこの点でまったく制限がなく、完全にまとめて処理できます。
デザイナーは、ウェブビューを特別に埋め込むことなく、ニュース、Weibo、ソーシャル アプリケーションの情報プレゼンテーションにテキストとマルチメディアを混在させることができれば素晴らしいことになることを知っておく必要があります。少なくとも現時点ではネイティブな方法で実装できます。まだまだ困難はあります。
測位におけるモバイルデバイスの利点を最大限に活用し、LBS アプリケーションの開発を促進します。
GPS、Wi-Fi、携帯電話、その他の方法を包括的に使用して、測位をより正確かつ柔軟に行うことができます。
地理位置情報により、測位とナビゲーションはナビゲーション ソフトウェア専用ではなくなり、マップ用に非常に大きなマップ パッケージをダウンロードする必要はなくなり、キャッシュによって解決できるため、どこにでもより柔軟にダウンロードできるようになります。
デザイナーは、LBS 機能を組み込んだアプリケーションが増えていることを知っておく必要があります。これは、デスクトップ PC と比較したモバイル デバイスの最大の利点の 1 つでもあり、デザインでの使用方法を慎重に検討する必要があります。アプリで使ってみよう！
Canvas APIを使用してヒートマップを簡単に描画し、ユーザーエクスペリエンスデータを収集
画像の移動、回転、拡大縮小などの通常の編集をサポート
キャンバス – 2D描画機能サポート
Canvas 3D – 3D 描画機能のサポート
SVG – ベクター画像のサポート
デザイナーは、画像を移動、回転、拡大縮小する方法を知っておく必要がありますか?基本すぎるので自分で描くにはちょっとした使い方を考えてください。
ブラウザーに表示される HTML5 フォーム要素と対応するキーボード:
タイプ 目的 キーボード
テキスト 通常の入力内容 標準キーボード
電話番号 数字キーボード
電子メール 電子メール アドレス テキスト ボックス@ と
url を含むキーボード Web ページの URL .com と
Search を含むキーボード サイトの上部に表示される検索ボックスなど、検索エンジンに使用されます 標準キーボード
範囲 特定の値の範囲値セレクターはスライダー、スライダー、またはカルーセルです
さまざまなスタイルのキーボードへの呼び出しを完了するには、単純なステートメント だけが必要です。これはシンプルで便利です。
デザイナーは知っておく必要があります。使用するときは研究開発の同僚に忘れずに伝えてください。
インタラクション機能の向上: ドラッグ、履歴操作の取り消し、テキスト選択など
トランジション – コンポーネントの移動効果
トランスフォーム – コンポーネントの変形効果
アニメーション – 動きの追加変形アニメーションのサポート
デザイナーは、HTML5 が非常に豊富なインタラクティブなメソッドのセットを提供していることを知っておく必要があります。それらを使用するかどうかはあなた次第です。
開発コストとメンテナンスコストが削減される;
ページが小さくなり、消費電力が削減されます。開いた直後に最新バージョンが利用できるため、アップグレード パッケージを再ダウンロードする手間が省け、使用中にオフライン キャッシュが直接更新されます。
デザイナーは、ユーザーが何を望んでいるのか、HTML5 がユーザーに何を提供できるのかを知る必要があります。
8.CSS3 ビジュアルデザイナーの補助ツール
セレクター – より柔軟なセレクター
ウェブフォント – 埋め込みフォント
レイアウト – 多様なタイポグラフィーオプション
固定半径グラデーションシャドウ – 丸い角、グラデーション、シャドウ
境界線の背景 – 境界線の背景のサポート
CSS3 を使用して視覚的な作業の一部を完了し、コードと画像を保存し、ユーザーの帯域幅も節約します。
デザイナーは、1 つのインターフェイスで数十のマテリアル画像を使用するのはすでに常識外れであることを認識する必要があるため、すぐに CSS3 に怠け者を助けてもらいましょう。
以前は、HTTP プロトコルとブラウザの設計により、リアルタイム通信の効果を「シミュレート」するために使用できるのは一部の技術のみでした。完全なリアルタイム通信をサポートします。
デザイナーは、リアルタイムのコミュニケーションと情報コンテンツがリアルタイムのリマインダーのためにアプリケーションに埋め込まれていること、そして HTML5 がこれを実現するのに役立つことを知っておく必要があります。
Gmail などの新しい Web プログラムで、ファイルを電子メールの添付ファイルとしてドラッグ アンド ドロップできることに気づきましたか? HTML5 ファイルの Drag'n Drop および File API 関数です。
設計者は、モバイル アプリケーションでのデータ送信の需要が高まっており、従来のパス選択方法が面倒すぎることを認識する必要があります。HTML5 のドラッグ アンド ドロップ アップロード機能を試してみてください。
セマンティック ネットワークにより、コンピューターは Web ページのコンテンツをよりよく理解できるようになり、検索エンジン最適化 (SEO) やレコメンデーション システムに非常に役立ちます。
デザイナーは、HTML5 により検索がより高速かつ正確になることを知っておく必要があります。
iPhone/Androidのシェアが急速に拡大している現状から、将来的に先進的なスマートフォンでアプリを書きたい場合は、どちらかを選択する必要があります。 Objective-C + CocoaTouch Framework を使用して iPhone/iPad アプリケーションを作成するか、Java + Android Framework を選択して Android アプリケーションを作成する必要がある場合は、両方のプラットフォームを同時にサポートする必要があります。始めたばかりの場合は、維持費が少なく手頃な価格であると考えられます。
HTML5 と CSS3 を使用して Web ベースのアプリケーションを作成します。iPhone と Android の両方をサポートしたい場合は、ほとんど 1 つのコードを維持するだけで済みます (クライアントに応じて小さな部分を変更する必要があります)。また、他のモバイル デバイスがサポートしている場合でも、将来的には、ブラウザーが HTML5 をサポートする場合、同じ WebApp に追加のサポート プラットフォームが直接追加されることになります。
Google の一連のサービスは、オフライン アクセス プログラムの効果を実現するために、HTML5 の多くのキャッシュ、ストレージ、データベース仕様を使用しています。モバイル デバイスのネットワーク接続はデスクトップ アプリケーションよりも不安定で、移動中にネットワークが利用できない場合があるため、これらのテクノロジを使用すると、ユーザーは非ネットワーク環境でも Web アプリを使用し続けることができます。これは、HTML5 の主なサービス対象が依然として Web アプリケーションであり、すべてのアプリ開発に脅威をもたらすわけではないことを示しています。これにより、さまざまな種類のアプリケーションがさまざまな開発方法を使用し、柔軟性が向上します。
以上がHTML5 モバイル アプリケーション開発の 12 の主要な機能の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
