WEB開発について質問があります。
私は、オープン系の開発経験はありますが、
web開発は初めてです。
こういう画面を作成して下さいという仕様と
画面イメージを渡されて、
画面イメージどおりに
どうやってweb画面を作成していいかわからない
場合はどのようにして開発を勧めていったら
いいでしょうか?
(イメージに近いホームページを見つけて
そのソースを解析するのが一番はやいでしょうか?)
一応、html、css、jQueryの基礎的な知識は
勉強済みです。
よろしくお願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
要件の確認
・静的サイトなのか動的サイトなのか
・リリース後の運用は誰がどの程度の頻度で行なうのか
・CMS導入するなら何を使うのか
・サーバーは誰が用意するのか、サーバ環境は要件に見合っているのか
・レスポンシブなのかそうでないのか
・動作環境はどこまでサポートするのか(OS/ブラウザver)
・コーディング規格に制限はあるのか(マークアップ規格・文字コード・改行コード・記述ルール等)
・サイトマップ/物理ディレクトリ一覧は揃っているか
・納期は?
↑こういったことを先に確認してください。
それによってどうやって進めるのが最適なのか選択肢がかなり変わってきます。
進め方
単純に画面イメージ(完成デザインカンプPSDと仮定します)から静的なページを作成するだけであれば、
1.画面イメージから文書構造・レイアウト構造の設計を検討する(マークアップ構造の検討)
2.PSDから必要な画像素材を切り出して適切に圧縮し、適切な名前をつけて画像フォルダに格納する
3.検討したマークアップ構造に合わせてHTMLを書く
4.画面イメージと同じようになるようにCSSを書く
5.プラグイン導入・JSを書く(必要であれば)
6.各環境で表示確認し、おかしかったら修正
7.サーバにUPして公開
ザックリこんな流れです。
CMSを導入するなら一旦静的HTMLで表示を確認したのち、
8.CMS用のテンプレートに組み直す
9.CMSのインストール・設定・DB設定
10.サンプルデータを投入して動作確認
あたりが追加されます。
上記は既存のフレームワークやテーマを使わず、フルスクラッチで作る場合の流れなので、
既存のフレームワークやテーマを使うのであればその仕様に合わせて作業する必要があります。
どちらが楽かは内容とスキルによります。
投稿2016/06/20 03:51
編集2016/06/20 03:57総合スコア3763
0
画面イメージから、HTML や CSS へ変換・コーディングできないのであれば、Webオーサリングソフトを使うことを検討したほうがいいかもしれません。
プレビューを見ながら、配置できるので、HTML やCSS が、馴染みなくてもそれなりに作ることができます。
Webデザイナーさんがよく使っている代表的なものとして、
Adobe Dreamweaver
が、あります。
投稿2016/06/20 03:27
編集2016/06/20 03:31総合スコア25171
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
htmlで文章、CSSで装飾、JavaScriptでプログラムを作成します。
表示するものはhtml、デザインはCSS、機能を搭載する部分はJavaScriptで作っていきます。
CSSにもJavaScriptでのjQueryのようなものがあります。Bootstrapというのですが、
jQueryとBootstrapを使用すれば、開発効率は格段に上がります。
もし知っていたらご了承下さい。上から敷居が低い順に載せます。
jimdo、WiX等は、html, CSS が操作できれば綺麗なサイトを作成できます。
Web上でちゃちゃっと作成するタイプです。Webアプリケーションです。
CHERRYさんがおっしゃっている Dreamweaver は主に、
html, CSS3.0, JavaScript を操作します。ホームページビルダーも同じようなソフトです。
こちらは、スタンドアロンでGUIです。
オンラインゲーム、スマホゲームのデータ保存、
ブログ機能やユーザーログイン、ショッピングサイト等多くのデータを管理しなければならない場合、
データベースを使用します。
→MySQL,MariaDB,PostgreSQL,SQLite,OracleDBなど(ちゃちゃっと作りたい場合はSQLiteがおすすめです。)
データベースを使用する場合、データベースをインストールします。グルー言語(グルーは接着剤という意味)を使用して、サーバに送られてきたデータを、このグルー言語が受け取り、データベースとのやり取りを行い、受け取ったデータをクライアントに返します。(≒スクリプト言語)
Perl,Ruby,Python等です。
Java,PHPでも接続できます。
サーバにOSだけインストールされている場合は、
Webサーバソフトウェアをインストールして、設定する必要があります。
Apache,Tomcat,nginx,nodeJS等があります。
サーバだけ用意されている場合は、OSのインストールも必要になります。
セキュリティ設定を行います。rootでの接続を禁止したり、sshを使用したりです。
Ubuntu,CentOS,Debian等
投稿2016/06/20 04:12
総合スコア12
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
「それっぽい」ページを見つけて、を繰り返してたくさんのページを作ると、まず間違いなくページごとに使用するライブラリやプラグインがちぐはぐになり、開発がカオスになるでしょう。
とりあえず昨今の流れで考えるなら、自分が使いやすいと思うレスポンシブデザインのフレームワークを選び、そこからページ全体の枠組みから組み始めることがよいと思います。
レスポンシブ対応のCSSフレームワーク25選
確認ですが、そのサイトは「全くデータ更新の必要がない」ものですか?基本的に仕事として受けるようなサイトであれば、必ずと言っていいほどサーバサイド、データベースのコーディングも必要になるかと思いますが…「こういう画面」を作るのに必要な要素を仕様からまず把握することが最優先かと思います。
投稿2016/06/20 03:27
総合スコア9206
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/20 04:08