web-dev-qa-db-ja.com

シングルまたはマルチページのWebアプリケーション

従来のマルチページ遷移を使用してWebアプリケーションを構築するか、ページの他のコンポーネントがAJAXとjQueryを使用してページを表示せずにコンテンツをロードする単一ページアプリケーションを作成する負荷？

私は単一/複数ページのフォームについて話しているのではありません。ここで言及しているのは、Webアプリケーション全体です。

website-designweb-appajax
14
edocetirwi

それはすべて、あなたのウェブアプリケーションが何をすることになっているのか、そしてすべてのページであなたのサイトがどれだけ変化しているかに依存しています。

  • 変更する必要があるサイトの小さなセクションがある場合、AJAXが最適なオプションです
  • サイトの大部分が変更されている場合（たとえば、ナビゲーションとフッターのみがすべてのページで同じである場合）、おそらく複数のページに移動する必要があります。

注：AJAXを選択した場合でも、ページごとに個別のURLがあるとよいと思います（たとえば http://example.com/index#home と http://example.com/index#browse ）ので、ユーザーはページを更新したり、 URL。

11
Savv

適切に構築されていて、モバイルデバイスの場合、ユーザーが1つのページをナビゲートし、おそらく低速で帯域幅が制限されているデバイスで各ページを読み込む必要がないと言います。

モバイルユーザーはモバイルデバイスを使用しているため、コンテンツにアクセスするにはスクロールするかクリックする必要があることをモバイルユーザーが理解していることを示すユーザー調査研究があります。

次に、デスクトップエクスペリエンスの単一ページレイアウトを維持するか、複数ページレイアウトを実行するかを選択できます。

単一ページのレイアウトを行う場合は、ページのセクションをアンカーでナビゲート可能にすることをお勧めします。

ナビゲーションには次のようなリンクがあります

<nav role="navigation">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#content1">Content 1</a></li>
        <li><a href="#content2">Content 2</a></li>
        <li><a href="#content3">Content 3</a></li>
     </ul>
</nav>

次に、コンテンツを構成するマークアップを次のようにします。

<section id="about">
    <a name="about"></a>
    About content goes here
</section>
<section id="content1">
    <a name="content1"></a>
    Content 1 content goes here
</section>
<section id="content2">
    <a name="content2"></a>
    Content2 content goes here
</section>
<section id="content3">
    <a name="content3"></a>
    Content 3 content goes here
</section>

また、ナビゲーションの位置を固定して（CSSで）、ユーザーがこれらのページまでスクロールするか、ナビゲーションのリンクをクリックして、ブラウザーがページのこれらのセクションに移動すると、ナビゲーションが常にビューポート。はい。これにより、コンテンツの表示領域が少なくなり、モバイルデバイスで問題になる可能性がありますが、ユーザーは、ナビゲーションに移動するために常に上にスクロールする必要なく、サイトをナビゲートできます。

私がいくつかを助けてくれることを願っています！

1
IMUXIxD

「単一ページ」アプリが適切に構築されている場合は、「ページの読み込み」が速い以外は違いを確認できません。

0
Dmitriy Budnik