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