2012-04-19 グループサイト制作リリース
■グループサイト制作リリースしました
11月14日開講の受講生は個人サイトを１つ作り上げた後、
グループ制作の実習に入ります。
グループ構成は
webマスター
：クライアントさんと制作グループの調整役・グループのマネジメント
ディレクター
：要件定義書、サイト設計、ページ設計、制作仕様書を担当
デザイナー
：ページ設計に基づき、それぞれのページのカンプを制作
マークアップエンジニア
：サイトのページ設計からテンプレートコーディングを起こしコーディングルールを確定して、コーダーに指示する。
コーダー
：html+cssでマークアップコーディングをし、ページを構築する。また、JavaScriptやAjaxライブラリを用いてインタラクティブな動きをクライアントサイドに付加する。
グラフィッカー
：この職種はゲーム業界から流れて来た言葉なのであまり使わないのですが、あえてここで使います。バナーやアイコン、ボタンなどのグラフィック要素を制作する人。
という役割分担になります。
個人サイト制作で見えてきたそれぞれの特性でポジションにつきます。
出来たサイトはご覧のとおり。
とてもクオリティの高い商用サイトになっています。
竹末洋紙株式会社サイト
http://takesue.sitemix.jp/
たかはし耳鼻咽喉科サイト
http://doctor-koala.com/
株式会社福守サイト
http://fukumori.biz/
渡邊智弥建築設計事務所サイト
http://tw-a.jp/
（建築家さんのご要望でとてもシンプルなサイトになっています）
一級建築士事務所「艸の枕」
http://www.kusanomakura.jp/
（建築家さんのご要望でとてもシンプルなサイトになっています）
大切なことは、
クラスの全員が初めてweb制作を体験しているという事実です。
開講から４か月目に制作グループがキックオフした時、
全員がプロフェッショナルモードに様変わりしました。
そして、それぞれの制作ポジションで職務を全うしました！
web開発の現場には
必ずあなたができるポジションがあります。
見つけて下さい。あなたのポジションを。
Permalink | コメント(0) | トラックバック(0) | 19:34 
2011-12-18 11月14日開講web制作科
formとJavaScriptを組み合わせる
formとJavaScriptを組み合わせる事によって、CGIを使わなくても、動的な動きを実現する事ができます。Webページが表示されたり、リンクがクリックされたりといった様々なイベント発生時の処理をイベントハンドラと言います。
Webページ読み込み時の処理(onLoad)
<body onLoad="処理">
googleMap APIを導入してみます。APIを読み込ませるため、bodyタグにonLoadを記述します。
サンプル
※注 initialize () 関数
この関数が記述された Scriptノードがロードされた直後に、全てのイベントに先だって自動実行されます。
クリック時の処理(onClick)
<input type="button" onClick="処理"> <input type="radio" onClick="処理"> <a href="...." onClick="処理">
サンプル
このonClickを利用した処理に、パスワードを入力して秘密のページに飛ぶ事ができます。暗号化などを使用していなくても、ページ名を指定しておけば、ページ名を入力した場合のみ遷移するので便利です。下記のサンプルでは、kikin.htmlが飛びたいページの名前なので、ボタンをクリックで現れたポップアップウィンドウにkikinと入力します。
サンプル
フォーム変更時の処理(onChange)
<select name="name" onChange="処理"> <option value="val1">option_val1</option> <option value="val2">option_val2</option> </select> <input type="radio" name="name" value="val1" onChange="処理">str1 <input type="radio" name="name" value="val2" onChange="処理">str2
2011-10-19 開講前の1ヶ月に自宅で学習する事まとめ
当クラスでは商用サイトを作ります
WEB製作者は毎日毎日色んなサイトを見まくります。例えばフレンチのレストランサイトを受注したなら、サイト設計をする前に検索上位100サイト位のフレンチレストランサイトを検証します。そうすることによって検索上位に来るサイトの法則・人気のフレンチレストランの法則が見えてくるのです。
求職者支援訓練「基本から学ぶWEB制作科」では、まず教科書にそって一つ見本のサイトを作ります。
その中でhtmlとcss、そしてjavaScriptの基本を学びます。
その後は各受講生が一からそれぞれ受注した商用サイトを作ります。
サイト作りのために、今からネットを検索して色んな優良サイトを見て下さい。
こちらに「優良デザインサイト」をまとめてあります。優良サイトと言うより大手企業を集めた感じなのですが、ここに上がっているサイトを見ているとWEBページの法則・定番、なぜそうなっているのかなどが見えてくると思います。
2011-10-17 開講前の1ヶ月に自宅で学習する事まとめ
WEB制作科ってどの職種を目指す学科？
皆さんはどんな職種からWEB制作への転職を考えてこられたのでしょうか？
「基本から学ぶWEB制作科」の転職対象職種は、WEBデザイナーやコーディングスタッフです。
具体的な業務内容は「ウェブ制作現場の職種と必要なスキルのまとめ」に詳しくまとめられています。
ハローワーク発表の今年の有効求人倍率
- 芸術家・デザイナー関係=0.22倍
- IT関係=1.68
グラフィックだけできても（デザイナー枠）1人の求人者につき0.22件の求人募集案件という有様ですの上記サイトで言うところの「コーダー、マークアップエンジニア、フロントエンドエンジニア」を習得していくと有効求人倍率がぐんと上がることになります。もちろんこのクラスはWEBプログラマーを目指すクラスではなく、主にWEBデザイナーを目指すクラスですのでWEBデザイナーが習得すべきコーディングを学んでいきます。コーディングとはhtmlとcss、それにjavaScriptを打ち込んでいく作業です。
タイピングは早ければ早いほど良い
コーディングは正確さとスピードが命です。タイピングが苦手な人は、ネット上に多数あるタイピング練習サイトで一日に2時間位練習しておきましょう。
「タイピング練習広場」こちらに色々な無料タイピングソフトのまとめがあるので気に入った物を探して取り組んでみましょう。
2011-08-29
■ウォンツケーキ店サイトにJQueryのlightboxを導入する
1)head内に、lightbox用のjsファイルと、cssファイルのリンク、そして以下のjavascriptを挿入します。
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>
2)jquery.lightbox-0.5.jsをjsフォルダに、jquery.lightbox-0.5.cssをcssフォルダに格納します。
3)lightboxを表示させたいアンカーリンクにclass="lightbox"を指定します。
ここでは、「大きな写真を見る」のイメージを囲んでいるアンカータグに指定します。
4)lightboxが生成された時に必要な画像パーツをimagesフォルダの中に格納します。
5)ローカルでクロスブラウザで動作確認します。
6)UPロードしたら再度クロスブラウザで確認します。
Permalink | コメント(0) | トラックバック(0) | 21:23
■ウォンツケーキ店サイトにJQueryのsliderを導入する
１ヶ月作ってきた「クマヒゲの世界一やさしい」のケーキショップサイト。
ビルボード部分にJQueryのsliderを導入してみましょう。
【準備】
1)昨日制作の５枚のビルボード画像をjpgでそれぞれ保存。名前はmain_photo.jpg、main_photo2.jpg、main_photo3.jpg、main_photo4.jpg、main_photo5.jpg。imagesフォルダに格納。
2)直下にjsフォルダを作り、中にjquery.jsとeasySlider1.5.jsを格納します。
3)index.htmlのheadタグ内に、上記２つのjsへのリンクを貼ります。コードは以下の様になります。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.5.js"></script>
4)同じく、slider専用のcssのリンクも貼ります。
<link href="css/Scroll.css" rel="stylesheet" type="text/css" />
5)index.htmlのdiv id="header"の中のulの修了タグの下に以下のコードを加えます。
<div id="slider"> <ul> <li><a href="item.html"><img src="images/main_photo.jpg" alt="Css Template Preview" /></a></li> <li><a href="products.html" title=""><img src="images/main_photo2.jpg" alt="" /></a></li> <li><a href="item2.html" title=""><img src="images/main_photo5.jpg" alt="" /></a></li> <li><a href="products.html" title=""><img src="images/main_photo4.jpg" alt="" /></a></li> <li><a href="order.html" title=""><img src="images/main_photo3.jpg" alt="" /></a></li> </ul> </div>
※titleとaltには、ビルボード画像中の文章と同じ文章を入れておきます。
6)元々div id="header"の終了タグ直下にあった、main_photo.jpgのimgタグを削除します。
7)ローカルでクロスブラウザでの確認をします。
8)サイトに上げて、再度クロスブラウザ確認をします。
Permalink | コメント(0) | トラックバック(0) | 20:46
