PDAのレイアウト、パート2

すでにPocketPCデバイスのレイアウトについて書いていますが 、その週、私はとても恥ずかしいことをすべてまとめて、小さな結果をまとめました。



1.ガム。

PDAの下のレイアウトはゴムでなければなりません。 追加のソフトウェアがなければ、PDAデバイスで異なる解像度をエミュレートすることは不可能です。 誰も実際にこれを必要としない=)ほとんどの場合、320x440または640x480ですが、非標準の解像度もあります。 いずれにしても、サイトはすべての解像度で同じように見えるはずです。 それらの広がりはそれほど大きくないので、レイアウトはゴムでなければなりません。



2. 1列。

例外もありますが、ほとんどの場合、サイトのスケルトンは単一列にする必要があります。 つまり サイトのソースは2、3列にすることができますが、ほとんどの場合、PDAバージョンは1列になります。 スペースがほとんどありません。 ほとんどの場合、左側の列(ナビゲーション)は<選択>に変わり、右側の列はメインコンテンツの下をスライドします。



3. PDAデバイス+ pda.site.ruドメインの自動検出。

PocketPCの定義はそれほど難しくありません。 HTTP_USER_AGENTには「windows ce」+ブラウザ(モバイルIE)が含まれており、HTTP_UA_OSなどの多くのヘッダーが追加されます。 したがって、モバイルデバイスからsite.ruを表示する場合、最適化されたレイアウトを表示する必要があります。 ただし、これに加えて、PDA組版を取得するための無条件の方法が必要です。最も単純なのはpdaサブドメインです。 それは便利であり、あらゆる種類の検索ボットにとって重要であり、サイトのpdaバージョンもあることを事前に通知します...



4.機能を維持する必要があります。

サイトのPDAバージョンは、ソースのすべての機能を維持するために必要です。 モバイルデバイスを使用する訪問者は、欠陥を感じることはありません! これは、サイトの機能だけでなく、デザインにも適用されます。 元の要素と手法を保持する必要があります。 サイトのPDAバージョンの白い背景、黒いテキスト、青いリンク( 多くの例があります )以外は、最新のモバイルデバイスの所有者に対する最高の無礼と軽contです



5. CSS。

モバイルIEはCSS2をサポートしています。もちろんすべて条件付きです=)現時点では明確なドキュメントをコンパイルすることはできませんが、一部の要素の絶対配置、浮動配置、背景プロパティに問題がありました。 基本的なCSS2サポートは存在しますが、見栄えの良いきれいなサイトを作成できます。



6. JavaScript。

そして、ここからトラブルが始まります...勝利のヒントを伴うJS(xmlhttprequestオブジェクト、単にAJAX、他のActiveXなどのサポート)が、それを行う方法がわからないことがあります。 通常のIDは読み取り専用で、classNameはまったく存在しません(使用したモバイルIEはWM 5.0の標準です。最新のモバイルは、idとclassNameの両方での使用を既に学習しています)。 多くのDOMメソッドは優れています(たとえば、element.childrenがありますが、element.childNodesはありません)など、多くの驚きがあります。 しかし、最悪の部分は、AJAXオブジェクトがresponseTextメソッドを返すが、responseXMLを返さないことです。 私のプロジェクトでは、より理解しやすいAPIのためにXMLを使用しています。 JSがハンドヘルドでデータを読み取れるように、JSON形式でデータを出力する機能を追加する必要がありました。 つまり 言い換えれば、XMLファンはAJAXインターフェースを追加/書き換える必要があり、JSONとプレーン/テキストファンは踊って楽しむでしょう。



7.ポップアップ。

必要なポップアップは、それぞれ新しいページとして開く必要があります。 それには何の問題もありません; PDAデバイスのユーザーはそれに慣れています。 しかし、そのようなウィンドウの戻るボタンまたはキャンセルボタンは、空気のように重要です。



これが初めてです。 テストには、デバイスを直接使用することをお勧めします。 または、microsoft.comからエミュレーターをダウンロードできます。



デバイスでのより便利なテストのために、無料のユーティリティMy Mobilerを使用しました。 これにより、コンピューターからPocketを制御できます。 便利です。テーブルの反対側のクレードルに突く口を挿入しました。マウスで自由にコントロールできます。



そして最も重要なことは、モバイルデバイスが増えたことを忘れないでください! すべての自尊心のある開発者には、モバイル版のサイトが必要です=)

私のpdaのレイアウトの例は、ここpda.basher.ruおよびpda.catalog.mobilz.netにあります。



All Articles