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

Webアプリケーションのプロトタイプを開発しています。HTML、CSS、JavaScriptのみを使用したい。私はテキストエディターを使用することを好み、Axureのような新しいツールを学ぶ（またはそのために支払う）必要はありません。

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

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

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

参照：

• http://www.boxesandarrows.com/view/prototyping-with

プロトタイプを捨てて後で実際のアプリを最初からやり直す場合は、PowerPointやBalsamiqなどのツール、あるいは紙を使用することをお勧めします。忠実度が低いため、ユーザーは操作に集中でき、色や泡のボタンに集中できなくなります。このように少ない投資で、より多くのよじれをより速く効果的に得ることができます。

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

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

私のスタック：

• HTML5 Boiilerplate
• グリッドとレイアウト用のブループリントCSS
• JavaScriptとレイアウトを処理するためのjQueryおよびjQueryUI
• クライアント側のフォーム検証のためのjQuery Validate

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

* 迅速なプロトタイプの作成方法 *

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

プロトタイプを迅速に作成するには？

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

2-迅速であることは再利用を意味します。-ラピッドプロトタイピングの秘訣＃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。「プロトタイプをすばやく作成するには、マウスではなく指を飛ばす必要があります。」-しかし、もっとあります。多くのIDEがコードをフォーマットします。多くは、作業中に糸くずを出し、エラーが発生したときにそれを見つけます。保存時にブラウザーを更新できるものもあります。構文の強調表示。シンプルですが効果的です。

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

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

お役に立てば幸いです。

TwitterのBootstrapやYahooのPureを検討したことがありますか？

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

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