FC2ブログ

スポンサーサイト

  1. トップ
  2. スポンサー広告
  3. スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | コメントを書いてくれる人はこちら(-) | トラックバック(-) | [編集]
このページのトップへ移動する。

職業訓練WEBクリエーター科14日目

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科14日目

職業訓練WEBクリエーター科14日目

感想・・・

今日でHTMLでの学習は終了となり、明日はいよいよ演習課題に入ります。

今日まで学習してきたHTMLとCSSのタグを駆使してWEBページを作成していきたいと思います。

そのうち今まで作成した成果をWEB上に掲載したいと思います。

1コマ目

WEB制作のワークフロー ベーシックデザイン P23~41

表示を統一させるために、レイアウトは表を使って表示させる。

データ量・・・4~5秒で表示したほうがよいので、8M~10Mぐらいに抑えておくこと。

チームワーク

チームワークに大切なのは、コミュニケーション能力・・・組織でWEBを制作するにあたって、目的を明確にするため。

ワークフロー(作業手順)

企画・計画・・・組織でWEBを制作するためには、クラインアント・組織を含めた共通の「認識・目的」を持つために行う。

設計・・・設計図を書く。 構造やリンク等を設計する。 現在ツリー構造での制作が多いみたいだ。(クライアントが更新する方法を設計も考慮)

製造・・・WEBを制作する。 設計図に基づいて製造する。  変更部分はクライアントの意向しだいである。

テスト・・・WEBを作成して、動作の確認 計画・企画どうりにできたかテストする。 デバック(不具合)等の修正をする。

運営・・・更新作業 (クライアントが更新する場合もある。)そのままWEB制作会社で行うケースもある。

重要になってくるのは、下に行けばいくほど高くなってくる。

 

2コマ目

役割分担(WEB制作に関わるスタッフ)

ディレクションスタッフ・・・現場監督

プランニングスタッフ・・・計画を立てる人(大体は現場監督が兼任する。)

制作スタッフ・・・WEBの制作~テストをする人まで含む。

  • デザイン・・・レイアウト 色づかい・・・deramweaver
  • コンテンツ・・・WEBページの本文・写真
  • プログラム・・・スクリプト・機能 JavaScript Flash

職業訓練で学習している部分はこの制作スタッフ部分の勉強が主

WEB制作の流れ

コンセプトの設定・・・クライアントから話を聞き箇条書きで要点(目的を設定する。)

ターゲット(WEBページを見る人)を絞る。・・・どんな環境の人が利用しているのか予測する。

コンセプト(サイトの内容を膨らませる)を立案する。

コンテンツのリストアップ・・・ブレインストーミング(箇条書きで挙げていく)

コンテンツの分類・・・フォルダ化にして情報を整理をする

情報の構造化・・・各コンテンツをどのような構造にしていくかを構想する。

デザインのガイドライン・・・大体の方針を決めて、方向性(何色を使うのか)を決める。 基調色(ブルーが強い) ・アクセント(補色で赤色が多い)

トッページのデザイン・・・サイトの顔となるので、ラフスケッチを描く。

デザインのフォーマット(画面の構成)を決める

コーディング・・・javascriptを使用して機能を作る。

デバック・・・環境の違い(OS・ブラウザ・解像度)を確認して、レイアウトが崩れていないかチェックする。 リンク切れ。 データサイズ

データ(ファイル)管理・・・下記のようなルールをあらかじめ決める。

  • 命名規則・・・(例)全て小文字、拡張子 html 
  • ディレクトリ(フォルダ)構成
  • バージョン管理・・・ どれが新しいファイルなのか(チェックイン・・・サイト構成ファイルの一覧に入れる/チェックアウト・・・修正中のフラグを立てる。)
    ※ WEB制作で制作したファイルをファイルサーバーとゆう機械に入れ、分かるようにするようにチェックイン・チェックアウトをする。

 

3コマ目

WEB制作ツール

コンテンツ作成ツール

  • スキャナ・デジタルカメラ
  • 編集ソフト(フォトレタッチ・ペイント)・・・Photoshop・Fireworks等、
  • グラフィックソフト(ドローイング)・・・Illustrator・Fireworks等、

コーディングツール

  • WEBソフト・・・Dreamweave・Golive

FTP(ファイルアップロード)ツール

  • FFFTP等(フリーソフトのものが多い)

企画書・設計書ツール

  • Word・・・文章を作る
  • Excel・・・表を作る
  • Powerpoint・・・プレゼンテーションソフト(授業中にプレゼンテーションをする予定)

 

4コマ目

WEBページをインターネットに公開する WEBサイト作成術 P248~254

いままで、HTMLで作成したデータをWEBサーバーに送る。

今回配布されたセミナー用の情報を使用する。

必要な情報は、

WEBサーバーのアップロードをする先のアドレス

ユーザーアカウント

パスワード

今回は、FFFTPとゆうソフトを使用してアップロードをする。

  1. FFFTPソフトを立ち上げる。
  2. 右側にあるホストの立ち上げをクリックする。
  3. 立ち上がった画面にホストの設定名に名前を付ける ※ここは任意で名前を付ける。
  4. ホスト名を入れる。 ※ここは、アップロードするWEBサーバーへアクセスするため、サーバーのアドレス(ftpで始まる)を入れる。
  5. WEBサーバーで設定されているFTPアカウント・パスワードを各設定項目入力欄に入力する。
  6. ローカル初期フォルダの設定項目で、今回アップロードしたいフォルダを選択する。
  7. ホストの初期フォルダの設定項目は記入しなくてもよい。
  8. OKボタンをクリック
  9. ホスト一覧が表示されるので、接続をクリック

 

5コマ目

WEBページをインターネットに公開する続き WEBサイト作成術 P248~254

  1. 接続したら、FFFFTPのメイン画面が出てくるので、右側に出ているindex.htmlを削除する。
  2. 左側の項目を全部選択して、左側(WEBサーバー側)にドラック&ドロップしてファイルをアップロードすると完了

6コマ目

明日・明後日からの制作の予習

明日・明後日で、HTMLタグを使用して、趣味のサイトを作成する。

今回僕の趣味のテーマてして、テニスを題材にしたいと思います。

 

スポンサーサイト
このページのトップへ移動する。

評価・感想を書いてくれた人の内容

この記事に対する評価・感想を投稿

管理者にだけメッセージを送る

トラックバック トラックバックURL:
http://hamacom.blog4.fc2.com/tb.php/36-939cf639
  • -【】 管理人の承認後に表示されます
【2007/09/28 05:14】
サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。