Webサイト制作科 | 受講記録 | 苦楽中道

2014年01月27日開講の求職者支援訓練(フェリカTA_Webサイト制作科)における受講メモと習熟度記録

ポートフォリオ差し替え

 

仮置きしていたポートフォリオだが、デザインがシンプル過ぎたので、パララックスを取り入れたデザインへ差し替え

 

バックグラウンドの画像を採取して奥行きを表現し、コンタクトフォームのコンファームページを作れば完成

 

http://sophisticated.sub.jp/portfolio/

http://mrada.net/

 

 

フェリカTA Webサイト制作科の受講を決めたあなたへ

 

結論から言って、求職者支援訓練の最終目標は、雇用保険のある企業への就職です。

 

この目標を果たすためには、この学校で学んだスキルや知識を、採用担当者へアピールしなければなりません。そのアピール方法はいくつかありますが、講義の成果物であるポートフォリオの作成と、受講の記録となるブログの作成がもっとも効果的な方法であると言えます。

 

まずは、開講後すぐにブログを開設しましょう。先生からは、はてなブログを勧められると思いますが、どのブログであっても問題ありません。このブログに受講の過程をこつこつ積み上げて行った時、就職活動の力となるのはもちろんの事、復習をする際に受講内容を確認したり、自分で構築したWebサイトのSEO対策にも使えます。

 

ポートフォリオについては、講義の終了一ヶ月前ぐらいから着手し始める内容ではありますが、開講時から取り溜めた受講内容のHTMLファイルなどを、仮置き用のサイトにアップロードしておく事をお勧めします。作成に伴って、不明点は先生から丁寧に教えて頂けますが、無料のレンタルサーバー登録とアップロード環境(学校のPCなど)さえあれば、別段難しいことではありません。受講の記録として、下記サイトのような簡素なものを予め作成しておく事によって、本格的なポートフォリオ制作時に、あわてることなく作業が進められると思います。これは、実際の私の経験に基づいてお伝えしているので、是非実行してみてください。就職活動とポートフォリオ制作が平行して走る事となるであろう、受講後半に際して、きっと役に立つと思います。

 

http://sophisticated.sub.jp/

 

上記、二つの内容をこつこつと実行している受講生は、就職活動に必ず成功していると先生からも伺っており、実際、私の就職活動にも役立ち、めでたく内定を得ることができました。

 

私のこの6ヶ月という受講期間は、あっという間に過ぎ、悔いる部分も多々ありますが、自分の成長につながる充実したものであったと断言できます。

 

最後に、受講を決めたあなたの学生生活が、より良いものになりますように…

 

 

紙で作るポートフォリオについて

 

 

表紙にはインデックスを

裏表紙にはスキルやプロフィールを

見開きにはA3左右ページにナビゲーション的なものを跨がせて共通項を作る

ナビゲーションの項目を色分けし、その色を基調色とした各ページを作る

 

画像のプリントは、大き目の画像を用意し、フォトショップで編集しイラストレーターで出力する(イラレは解像度依存ではないので、綺麗にプリント可能

 

文字の大きさは9ポイント13Qを基準として作成する

ちなみに、新聞の文字は12.5Q 

 

 

TIPS

 

photomargeの機能:

ぶつ切りの画像を自動編集して、一つの画像にする(パノラマ写真風

 

ドロップレットを作成:

デスクトップにショートカットを作り、フォトショップを立ち上げずに画像処理が可能(フォルダに入った画像を一括して、縮小や画像効果をつける

 

 

フェリカTA Webサイト制作科の受講をご検討されている方へ

 
まず、はじめにお伝えしたい事は、どういった仕事であっても、それが学校であっても、優秀な方について行く、追いかけて行く事が、自分自身が成長する一番の近道であるということです。
 
その点に関して、この学校の講師陣、特にT先生に関しては、間違いなく理想的な講師であると断言できます。
 
T先生は、Webデザイン業界において、黎明期からデザイナーとしてたたき上げてきた方で、机上の空論ではなく、あくまでも実際に自分の目で見て確かめて、試行錯誤して、自分自身で身につけた経験則に則った正確な理論のみを、私たち受講生に、やさしく噛み砕いて教えてくださいます。
 
また、大変素晴らしい人格者であり、講義の合間を縫って、説法を説いて下さいます。今の時代は、学校を卒業して社会に出たとしても、先輩や上司が説法を説くなどという事は極めて稀であり、この説法を聞く事ができるだけでも、講義を受講する価値があると思います。
 
この説法の内容については、多岐に渡り、受講修了後の生き方や、趣味の音楽の話題、もちろんWeb業界の最新の動向や新しいコンテンツについても触れた上で、親身に受講生の立場にたった素敵な言葉をかけて下さいます。
 
たまに話題が逸れ、説法から漫談に変わることもありますが、それもまた楽しく、皆から笑みがこぼれ、緊張を和らげて下さいます。
 
T先生は、この講師というご職業をご自身のライフワークとして捉えていらっしゃる方で、私たち受講生にご自身のカケラをたくさん分けてくださいますが、その真剣な想いに応えるべく、本気で講義に臨む姿勢や努力を、決して忘れてはなりません。
 
もし、この学校で本気でWebデザインを学ぼうとするならば、先生に本気でぶつかってください。
 
そうすれば、先生はきっとあなたの声に応えてくれるでしょう。
 

PHP DB

 

phpMyAdmin

 

DELETE FROM

'items' WHERE 1

テーブル全体を削除する(運用しているDBを扱う場合は要注意)

 

DELETE FROM 'items' WHERE 'item_code' = 10

末尾の番号のレコードを指定して削除

 

ORDER BY:句

 

CRUD:データベース管理システムの基本的な4つの機能。

データの作成(Create)、読み出し(Read)、更新(update)、削除(Delete)を表す言葉。

 

 

 

 

 

 

 

 

データベース&Photoshop紙媒体&Illustrator紙媒体

$k:インデックス、添え字

 

 

////////////////////////////////////////////////////////////////////////////////////

Photoshop

 

出版物に使用する画像ファイルはPhotoshopEPSで保存

EPS:プレビューとプログラムでできている EncapslatedPostScript

オープンパスはできるだけ避ける

 

CMYKカラー

8bit/チャンネル 2の八乗=256色

改行コードを取る

 

一般的なプリンタはイメージセッターがPS1

PS1~PS3まである

PCからの印刷で、0.08mmぐらいまでの線が引ける

輪転機は1時間数千万程度の金額がかかる場合がある

 

CTF→CTP(刷版)

 

文字校正(プルーフ

 

//////////////////////////////////////////////////////////////////////////////////////////

Illustrator

 

ボックスを作成し、テキストの読み込み

テキストファイルから読み込む場合は、shiftJISを使用する

 

書式→スレッドテキストオプション→作成

cmykで m:100 Y:100 は金赤

 

編集→カラーを編集→オーバープリントブラック

属性:オーバープリントブラック(印刷には必須の設定

小さな黒文字をはっきりさせるための設定

大きな面積の場合は、リッチブラックを設定する

 

環境設定→環境のアビアランス→リッチブラックの設定ができる

 

CMYで色を設定してKで色味を抑える

 

画像の切り抜きの場合は先割りのレイアウトを作成し、マスク版を作る

画像を背面にしてレイアウトした四角でトリミングする

 

マスク版には色をつけてはいけない

 

 

Webサイト百選 課題着手

 

http://sophisticatedweapon.jimdo.com/

 

長らく放置していた課題着手

今朝方20件ほどサムネイル貼り付け

紹介文と残り80ほどは後ほど

 

今月までにポートフォリオと課題の類を終わらせて、就職活動に専念したい

ポートフォリオ仮アップロード

 

求職者支援訓練受講から、はや5ヶ月が過ぎようとし、就職活動が本格化したためにポートフォリオ作成が急務となり、暫定版としてテンプレートを使用したものを仮アップロードした。まだ作成途中で習作まではアップロードできてないが、今日明日中には仮置きしておきたいと思う。

 

mrada.net

 

訓練校のカリキュラムには、求人を行っている企業からの説明会の時間が設けられており、今日現在までで4社ほどの企業による会社案内と求人内容の説明が行われた。

 

説明を聞く中で、どの企業においても多様なスキルを要求されることがわかり、残り一ヶ月の受講期間をどのように使っていくのか考えさせられた。

 

自分がどの方向へ進んで行けばいいのか、どこにプライオリティをつけていくのか、時間は残されていないが迷いながら前に進んで行きたいと思う。

 

 

Google Feed API & CSS3

 

http://news.7zz.jp/web/1458.html

画像も表示

 

border-radiusの設定

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>CSS3 角丸</title>
<style>
#radius1, #radius2, #radius3, #radius4 {
  border: 4px solid #F90;
  width: 200px;
  height: 100px;
  margin: 30px 50px;
}
#radius1 {
  border-radius: 20px;
}
#radius2 {
  border-radius: 10px 15px 20px 25px;
}
#radius3 {
  border-top-left-radius: 10px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 25px;
}
#radius4 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
</head>
<body>
<divid="radius1"></div>
<divid="radius2"></div>
<divid="radius3"></div>
<divid="radius4"></div>
</body>
</html>

 

PHP データベース

 

MySQL

DB作成→テーブル作成→カラム数設定

 

データ型:INT(整数

     VARCHAR(文字

A_I(Auto Increment 自動増加

照合順序:utf8_general_ci

 

StrageEngine:MyISAM

 

コンパネ→挿入:データを挿入

PDO:PHPDataObjects

$dbh:データベースハンドル

$stmt:ステートメント

$rec:レコード 配列>field

$dbh = new PDO(DBの情報,ユーザーアカウント,パスワード)

DBの情報:localhost 127.0.0.1

 

SQL文をPHPでHTMLへ記述すると反映が可能

 

<?php
//データベースへ接続する設定
try{
$dsn = 'mysql:dbname=wordpress; host=localhost; charset=utf8;';
$db_user = 'root';
$db_pass = 'root';
$dbh = new PDO($dsn,$db_user,$db_pass);
} catch (Exseption $e){
print $e;
}
//データベースからデータを抜き出す
$sql = 'SELECT * FROM items WHERE 1;';
$stmt=$dbh->query($sql);
foreach($stmt as $rec){
echo $rec['item_code'].'<br>';
echo $rec['item_name'].'<br>';
echo $rec['item_price'];
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>データベース</title>
<style>

table {
border: 1px solid;
}


</style>
</head>
<body>
<div id="container">
<h1>登録商品一覧</h1>
<form action=".php" method="post" id="">
<table>
<tr>
<th>商品コード</th><th>商品名</th><th>価格</th><th>修正</th><th>削除</th>
</tr>
<tr>
<td><?php echo $rec['item_code'] ?></td><td><?php echo $rec['item_name']; ?></td><td><?php echo $rec['item_price']; ?></td><td></td><td></td>
</tr>
</table>
</form>
</div>
</body>
</html>

 

PHP メールフォーム セッションの管理

 

セッションハイジャックを防ぐための設定

 

session_regenerate_id(true);

現在のセッションIDを新しく生成したものと置き換える

 

レンタルサーバーなどはセッションが切れるデフォルト時間は24分

 

セッション:サーバー側

クッキー:PC側

 

session_destroy();

セッションに登録されたデータをすべて破棄する

 

 

TIPS

 

多数決と噂に真実はない

寄生虫を下すために砒素を呑まなければいけない場合もある

05/07 課題サイトアップロード完了

 

 

初めてのサイト作成課題である下記サイトが05/07に完成アップロード完了した。

 

shirakawa-piano.com

 

当初の目標であるレスポンシブなどの目標が未達成ではあるが、一応の完成をみた。

 

特徴として、モノトーンでミニマルなデザインで、ピアノ教室の象徴であるピアノの配色を意識して、FlashjQueryプラグインなどを配置してある。

PHPでメールフォーム作成

 

セッションの使い方などを学んだ。

後日センドメールの設定などに進む。

 

 下記URLにアップロード済み

http://sophisticated.daiwa-hotcom.com/

 

 

無料サーバーへWordPressテスト環境構築

 

PHPver5.5の不具合でWordPressが動かず(ダッシュボードは表示される)、

暫定で下記URLへテスト環境構築。

 

http://www55.atpages.jp/thermobaric/wordpress/

 

試行錯誤の後、ローカルサーバー環境も破壊してしまったので、

いそぎ再構築しようと思う。

 

 

苦難の道はまだまだつづく

テストサーバー環境構築 ローカルへWordPressインストール 悪戦苦闘録

 

講義の進行では、XAMPPのインストールでApacheMySQLが使用できる環境を構築し、PHPのテスト環境を構築をすると指示されていたが、何事も本質を追求したいという面倒な性格のためApacheMySQLを単独でインストールし、環境の構築を行った。

 

程なくして、ポートフォリオ作成のためにWordPressのテスト環境が必要になったのだが、上記が災いしてなかなか上手くインストールができない。

 

結果、数時間かけて環境は整ったので良しとするが、備忘録と情報共有のため、顛末を記そうと思う。

 

http://webdesignrecipes.com/wordpress-install/

まず上記サイトを参考にphpMyAdminをインストール

MySQLwordpressと名付けたDBを作成する

 

wp-config.phpを編集したが、WordPressインストールができず。。。

 

 

下記サイトでPHP.iniの設定を確認し再設定

http://ja.forums.wordpress.org/topic/6316

f:id:sophisticatedweapon:20140523034222j:plain

 

 

なんとか前に進むもダッシュボードが表示されず。。。

ブラウザに当該ディレクトリのフォルダが表示されてしまう

 

下記サイトでApachehttpd.confの設定を確認し再設定

http://nanaowls.blogspot.jp/2013/07/wordpress.html

f:id:sophisticatedweapon:20140523005547j:plain

 

これでようやくWordPressのダッシュボードへたどり着いた。

 

XAMPPを使わずにApache等のローカルサーバーを運用できる人は、こんなところでつまずかないのだろうが、この記事が探究心ある方の糧となれば幸いです。

 

受講生の皆さんも頑張ってください。。。