過去にHTML、CSS、PHPのコーディングを行ってきましたが、すでに「完成」したものにしか取り組んでおらず、ゼロからWebサイトを始めたことがありません。しかし、最近ドメインとホスティングを安価で購入し、HTML、CSS、およびJavascriptのスキルを向上させて、Web開発者/ウェブマスターとしてもう少し市場性を高めたいと思っています。
通常、Webサイトを開始するにはどのプロセスを使用しますか？紙にレイアウトを描いてからコードを作成しますか？または、コーディングを開始して、好みに合わせて出力を調整するだけですか？
回答:
私のプロセスは一般的に次のようになります。
1.機能。鉛筆と紙で、サイトを構成する個別の機能/ページをレイアウトします。これは大まかなストロークの質問になります-あなたはお母さんのためのシンプルな情報とグラフィックサイトを構築していますか？中小企業向けのeコマースソリューション？写真家の友人のためのブログ/ギャラリー？あなたの答えは、あなたが従う必要があるビルドパスについて多くを決定します。この段階では、クライアントまたはボートを運転している人（あなたでない場合）とのかなりの議論も含まれます。
2.ワイヤフレーム。必要なすべての機能をレイアウトしたら、ワイヤーフレームを作成します。紙の上または花火のようなツールを使用して、非常にシンプルなナビゲーション機能を構築できます。ワードプレスのようなCMSを使用している場合、静的コンテンツはどのように処理されますか？これは、ファイル構造について考え始める良い機会でもあります。プロジェクトにカスタムデータベースが必要な場合は、今がその設計と実装の計画を開始するときでもあります。これは重要な段階です。スマートプランニングは、エラーが発生した場合やプロジェクトのクリープが発生した場合に、多くのバックトラッキングと再作業を節約できるためです。
3.テクノロジー。計画段階が比較的うまくできたら、テクノロジーを選択します。あなたはストレートHTMLをやっていますか？ランプ環境でphp cms？.net mvcストアフロント？これらの質問は、ホスティング環境に必要なものと、物事を実行するためのコストに影響を与える可能性があります。あなたが店頭をやっている場合、ここでのセキュリティが第一の関心事です（たとえば、SSLやPCIコンプライアンス）。優れたテスト環境（localhostなど）が確立されていることを確認してください。
4.設計/レイアウト。機能リストとワイヤフレームが十分に決定されたら、サイトの設計について考え始めることができます。何がページを埋めるのかを知ることは、明らかに前提条件です。私はPhotoshopで働き、マークアップ構造の類似物としてフォルダーを多用します。私は、意図したマークアップとcss識別子で名前を付けています。あなたが本当に詳細を知る前に、おそらくいくつかのフリーフォームの描画を行うのが賢明です。私は要素を引き出し、「プロセス」ファイルに配置する「レイアウト」ファイルを使用する傾向があります-実稼働グラフィックスを出力するために使用するファイル。
5.マークアップ/ CSS。かなりきれいなデザインが完成したら（プロダクションモードに移行する際に少し曲がりますが）、マークアップを書き始めることができます。私は一般に、サイト内のすべてのコンテンツに対応する標準レイアウトを使用することを好みます。そのため、ここで重要なのは、クリーンで柔軟なことです。レイアウトマークアップは、CSSの記述を開始する前にかなり完了しているはずですが、互いに通知するために多くのことを行っていることがわかります。また、この段階で多くのSEO最適化を行います（画像またはAタグの適切な命名、メタ情報、Doctypeなど）。
5.1テーマ管理。CMSを使用していて、デザインがカスタマイズされたテーマとして採用される場合は、目的のアプリケーションでそれを正確に行う方法に関するチュートリアルを見つけてください。率直に言って、これは気が遠くなる可能性があります;）テーマ要素に切り刻む前に、かなり完全なCSSで静的マークアップレイアウトを常に構築します。
6.動作。マークアップとcssがかなり完成していて、テーマが整っている場合、ビヘイビア（ロールオーバーなど）の開発を開始できます。絶対にそれを必要とする機能（ajax重いギャラリー、またはデータ駆動型のフラッシュコンテンツ）。一般的なルールは-JavaScriptをオフにして誰かがあなたのサイトを訪れた場合、彼らは何を見ますか？私は時々静的な要素を削除し、実行時にインタラクティブなバージョンに置き換えます。
7.コンテンツ。デザインがコンテンツに依存していない限り（たとえば、画像はコンテンツである場合があります）=私は通常、デザインと動作が十分に確立されるまでプレースホルダーテキスト/グラフィックスを使用します。複数回作業することは避けてください。製品データを入力する場合は、慎重なエラーチェックとテストが必要になります。
その時点で、常に再加工と修正と研磨の期間があるようです。しかし、本質的には、それをライブにする時間です。それからおやつを食べに行きます。
うーん。それは「開始方法」以上のものだと思います。しかし、とにかくそれが役立つかもしれません。がんばろう！
ワークフローの最初の部分は、なぜですか？私がクライアントと仕事をしている場合、彼らがウェブサイトに何を成し遂げたいかについて明確に定義されたビジョンを持つようにする必要があります。
あなた自身と、なぜあなたがこれをしているのかについて少し教えてください。
顧客は誰ですか？彼らの具体的なニーズ/痛みは何ですか？さまざまなタイプの顧客、彼らが必要とするもの、ウェブサイトが彼らのために何をするかについてのいくつかの特定の例を提供してください。
ビジネスについて教えてください。あなたが正確に行うことは何ですか？
次の男よりあなたを良くするものは何ですか？
サービスを検索している場合、あなたのビジネスはあなたがそれを見つけるためにGoogleに入力するものを提供しますか？
自分でサイトを構築する場合は、これらの答えが何であるかを既によく知っている必要があります。
上記の質問への回答に基づいて、これらの人々が真面目であり、実際には良いアイデアを持っていると判断した場合。次に進みます（まだ支払われていないことを忘れないでください。ただし、雇ってもらいたい場合は、靴下を脱いだ方が良いでしょう。）
クライアントと彼のビジネスの調査に時間をかけます。彼らの過去の成功と彼らが遭遇した問題を見つけてください。あなたは彼らが雇った3人目の開発者ですか？他の2人はどうなりましたか？
顧客が必要としているものを見つけます。このサイトを誰のために構築しますか。顧客は60歳の退職したベテランか、Facebookで1日中Farmvilleをプレイしている16歳のニキビに直面した子供ですか。
競合他社を確認します。彼らも知らないかもしれません。5〜10人の競合他社の競合分析を行い、Serpsでキックする必要があるユーザーを見つけます。これは、キーワードのターゲットが何であるかを知るために必要な段階です。後で、すでに失敗しています。
彼らのビジネスについてのあなたの知識で彼らを吹き飛ばし、ウェブサイトの契約/提案を考え出し、彼らが同意したらあなたの契約に備えてください。署名済みの契約書と50％のデポジットを取得して、ステップ3に進みます。
ここには共通のテーマがあります。これらすべてのケースで、ミッションは製品そのものではありません。ミッションは、「真剣に」真剣に考えている場合、製品が絶対に驚くべきものになることを必要とする「ちょうど」何かであるため、それを実現します。必要に応じて、これらのミッションがすべての答えになります。なぜ新しい機能を追加したのですか？ではなく、どの新しい機能を追加するのですか？- ベンジャミン・ポラック。
誰もが見通しに期待できるように、タイムラインを確立する必要があります。
ほとんどの人がここから始めるので、プロセスを説明しますが、状況、チーム、クライアントなどに最適なワークフローを決定する必要があります。
私にとっては、コンテンツが最初に来ます。私は、コードが書かれる前に、クライアントが大部分を完了していることを確認します。私たちは、最終ドラフトの校正編集ではなく、ページ上にあるテキストの単語について多少話している。マーケティングチームが関与している場合、これには時間がかかる場合があります。
サイトがどのように見えるかについては、すでに知っているはずです。コンテンツが必要です。ここで、ステップ3で思いついた目標を達成するレイアウトと一般的な設計原則に取り組む必要があります。
私はワイヤーフレームが嫌いですが、それらが必要であることを理解しています。サイトがクライアントのように見えないことを知っているからといって、そうではないかもしれません。これはあなたの保護とクライアントのためです。誰もが満足しているとき、「これは私たちがあなたに建設のために支払っているものです」と言う何かにサインオフさせます。
フロントエンド開発とUI-HTML、CSS、およびDESIGNING IN THE BROWSER、Andy ClarkeのHardboiledテクニック。Photoshopで多くの時間を無駄にすることにうんざりしているのは、より現実的な高速のモックアップを実演できれば、開発の有利なスタートを切ることができるからです。
あなたは最終的にいくつかの楽しみを持つようになります。あなたとクライアントのために、始める前にバージョン管理を設定してください。バージョン管理を行っているので、作業中にバグ追跡を設定する必要があります。
そのコンテンツを覚えていますか？コピー編集が必要なときです。私はこれを吸うので、他の人を雇うか、多くの人に読んでもらうようにします。手順2で説明したキーワードがSEO用に最適化されていることを確認してください。私たちのコンテンツが素晴らしく、実際にそれらのキーワードに関するものであれば、これは当然のことです。
あなたのサイトの前に座って、それを使い始めるために、いくつかの本当の生きている呼吸する人間を得てください。私は時々電話をして、なぜ彼女のプリンターが印刷されないのか知りたいと思っている母に参加するのが好きです。これらの種類のユーザーは、もちろん上記の16歳の吹き出物に直面した子供の例を使用していない限り、サイトをナビゲートできる必要があります。
サーバービーストとの戦いを担当しているのは誰でも知っていることを確認してください。
1か月後、私たちが行った競合分析を参照し、サイトを分析したサイトと比較します。あなたのSEOプランを作成するには、このデータを使用し、NO Iの話ではない、蛇油SEO私は必ずあなたのまだのrelaventコンテンツを生成することについて話している（あなたのとても素晴らしいので）、サイトは自然にあなたにリンクしていると、あなたのタイトルタグ本文に一致します。SEOは、スタックオーバーフローと高品質のコンテンツを生成する1,410万人のユーザーがいない限り、長いプロセスです。
質の高いコンテンツと「ハイフンでつながれたサイト」で見つけるものとの間には大きな違いがありますが、これはリンクしません。（ノーフォロージュースがそれらに滴るのを防ぐため）。
すべてが機能しますか？素晴らしさを構築するという使命は達成されましたか？打ち上げ計画を立てて実行します。
手順1〜6ですべてを正しく行った場合、問題なく起動できるので、問題なく起動できます。準備を整えて、間違いを修正してください。
請求書を送り、すすぎ、繰り返します。
答えのほとんどはすでに詳細に説明されていますが、基本を書き直す時間を無駄にしないために、フレームワークまたはテンプレートを使用する必要があることを付け加えます。
多くのPHPフレームワークが利用可能です（Kohanaは私の個人的なお気に入りです）または多くの人がWordpressをベースとして使用しています。また、CSSフレームワークを使用することもできますが、やはり多くありますが、最も人気のあるものの1つは960グリッドシステムです
ウェブサイトを設計するとき、通常どのように始めますか？
あなたのように、私は数年前にウェブ開発者/デザイナーとして自分自身を売り込む必要性を見出しました。私の出発点は、私のウェブサイトを訪れた訪問者にどのような情報、画像、メッセージを提供したいかを自分の心で理解することです。そして、私がユーザーに私のウェブサイトにアクセスしながら達成/実行してほしいこと。
設計プロセスの理解がより明確になったことがわかりました。ホームページの要素と、それらのアイテムを伝える後続のページの要素を書き留めることができました。
例えば、私は自分の履歴書を簡単に見つけてダウンロードできるようにすることに非常に熱心でした。それで、私のサイトを設計するとき、私は自分の履歴書とそれがどこで容易に入手できるかに関する情報を確実にしました。
物語の教訓は関連することです。あなたのウェブサイト上のすべてが目的を果たすべきです。