web-dev-qa-db-ja.com

HTML / CSS / JSのみを使用したラピッドプロトタイピングのベストプラクティスは何ですか

Webアプリケーションのprototypeを開発しています。 HTML、CSS、JavaScriptのみを使用したい。私はテキストエディターを使用し、Axureのような新しいツールを習得(またはそのために支払う)する必要がないことを好みます。

あなたの考えでは、ベストプラクティスは何でしょうか?私にとって、良いプロトタイプには多くの資質があります。

  • 迅速に開発
  • 改善が簡単
  • UXに関する公正な忠実度(これは、ワイヤーフレームに特化したOmnigraffleやPowerPointなどのツールを失格にします)

私はできるだけ早く学習するように努めていますが、あなたの経験に基づいて、どのようにして迅速かつ機敏に対応できるかについて知りたいと思います。

参照:

8
charlax

プロトタイプを捨てて、後で実際のアプリをやり直す場合は、( PowerPoint または Balsamiq または紙。忠実度が低いため、ユーザーは操作に集中でき、色や泡のボタンに集中できなくなります。このように少ない投資で、より多くのねじれがより速く効果的に実行されます。

コードを実際のアプリの基盤として最終的に使用することを目的としている場合、次に Webmatrix または同等のRuby/Java IDE。 Webmatrixは、IDEである無料のツールであり、サイトの設計とモックアップを非常に迅速に行い、SQL Expressを使用するのにも役立ちます。IIS Expressおよび.NET Webスタックの他の部分(すべて無料)をローカルで使用し、後でVisual Studioにアップグレードする場合は、アプリに何も実行せずに実行できます。

6
Ryan Hayes

適切なツールを選択すれば、プロトタイプを実際のアプリケーションにすぐに適用できます。私は最近、内部データを管理する古い画面のコレクションを最終的に置き換える内部ツールを試作しました。古いシステムはあまり直感的ではなく、新入社員には非常に混乱します。

私のスタック:

これをMVCフレームワークの上に置き、選択したサーバー側アプリケーションコードに結び付ければ、1日で稼働させることができます。

5

* 迅速にプロトタイプを作成する方法*

これに戸惑う人もいます。プロトタイピングに関しては「速度」のレベルはさまざまですが、最も速いのは1つだけです。相互作用のレベルに最も近いため、常に最速になります。それがブラウザです。

プロトタイプを迅速に作成する方法は?

1-「ブラウザー内での設計」にあるものをすべて見つけようとします-フロントエンドを設計する最善の方法は「できるだけ早くコードにアクセスすること」であると専門家は言います-Chris Coyier。

2-迅速であることは再利用を意味します。 -ラピッドプロトタイピングの秘訣#1は、「既に構築済みの他のコンポーネントに基づいて構築できるコンポーネントを構築すること」です。

例:-これは、1つのページで証明されたタブのようになる可能性があります-別のページで証明されたチャート-次に、3番目のページで証明された豊富なコンボボックス

 - In a fourth page, the three prior prototypes combine into a complex-component.

 Mixing - Components together, is key. 

3-ピートのために、もしあなたがラピッドプロトタイピングをしているなら-ITはだらしないことができます。フォーマットコードが必要になることをごまかさないでください。ラピッドプロトタイプとは、プロトタイプをレビューした後でも、どちらにしても対処または自動化できる、使い捨てコードまたは進化型コードです。プロトタイプのポイントは、建築の活力を決定することです。私たちはほとんどの場合、最小実行可能製品について話しているので、ページ上でコードをできるだけ早く取得します。これは単なる概念実証であり、プリンの証明ではありません。

4-私は自動化について述べましたが、良いIDEは非常に重要です-ホットキーがたくさんあるものです。「プロトタイプをすばやく作成するには、マウスではなく指を飛ばす必要があります。」-しかし、もっとあります。 。多くのIDEはコードを自動的にフォーマットします。多くは、作業中に糸くずが出て、エラーが発生したときに検出したり、保存時にブラウザを更新したりできます。構文の強調表示。シンプルですが効果的です。

結論:ラピッドプロトタイピングは、これらのタイプのベストプラクティス特性をまとめたものです。私たちの誰もすぐに門を出てすぐに速くはありません。そのため、それはあなたのスピードを拾う進化のプロセスです。これは速度としてアジャイルで測定されます。あなたは考えなければなりません-より速く進む方法、そしてもっと前に傾く方法。

**時間をかけてできるすべての開発最適化を組み込みます。 **プロトタイプのウィジェット、テクノロジー、およびAPI墓地のライブラリを構築します。 **その時が来たら、それらを複製し、それらを混ぜ合わせます-新しいものを進化させながらオリジナルを維持します。 **これは、多くのJSフレームワークに特に当てはまります。

お役に立てば幸いです。

1
Jack Stone

Twitterの Bootstrap またはYahooの Pure を検討しましたか?

どちらも非常に簡単に導入して実行でき、「箱から出して」すぐに使えるものだけで、かなり複雑なインターフェイスを作成できます。

私は長い間プロトタイピングにBootstrapを使用してきましたが、多くの場合、プロトタイプの同じ骨が完成品に侵入します。

0
BenLanc