2013-01-05

32回目授業内容　JavaScript～脱線

授業 JavaScript Dreamweaver

32回目授業内容　JavaScript～脱線

JavaScript

画像をクリックしてアラート

<body>
<p><img src="img/1.jpg" width="1280" height="720" alt="綺麗な写真" onClick="alert('綺麗な写真です');"></p>
</body>

マウスオーバーでアラート

<body>
<p><img src="img/1.jpg" width="1280" height="720" alt="綺麗な写真" onMouseOver="alert('綺麗な写真です');"></p>
</body>

マウスアウトでアラート

<body>
<p><img src="img/1.jpg" width="1280" height="720" alt="綺麗な写真" onMouseOut="alert('綺麗な写真です');"></p>
</body>

開いた瞬間アラート

<body>
<p><img src="img/1.jpg" width="1280" height="720" alt="綺麗な写真" onload="alert('綺麗な写真です');"></p>
</body>

ボタンをクリックでアラート

<p>問題</p>
<p>大阪人の突っ込みの定番は・・・</p>
<p><input type="submit" value="答えを見る" onClick="answer()"></p>

<script>
function answer(){
	alert('なんでやねん！');
}
</script>
</body>

ボタンをクリックで答えアラート（JavaScriptで計算）

<p>問題</p>
<p>一年は何秒？</p>
<p><input type="button" value="答えは" onClick="Click()"></p>

<script>
function Click(){
	alert('60x60x24x365='+(60*60*24*365));
}
</script>
</body>

if文

数字を入力してif判定

<body>
<script>
	var test;
	test = prompt('点数を入れて下さい。','');
	if(test > 80) {
	if(test == 100) {
	 alert('満点です！');
	 } else {
		alert('もう少しです。');
	 }
	 } else {
		 alert('頑張りましょう！');
	}
</script>
</body>

function

ボタンによって計算を変える（functionを使う）

<body>
<p>aの値は28</p>
<p>bの値は7</p>
<button onClick="tashizan()">足し算</button>
<button onClick="hikizan()">引き算</button>
<button onClick="kakezan()">掛け算</button>
<button onClick="warizan()">割り算</button>

<script>
var a,b,kai;
a = 28;
b = 7;
	
	function tashizan() {
		kai = a + b;
		alert('答えは' + kai + 'です。');
	}
	function hikizan() {
		kai = a - b;
		alert('答えは' + kai + 'です。');
	}
	function kakezan() {
		kai = a * b;
		alert('答えは' + kai + 'です。');
	}
	function warizan() {
		kai = a / b;
		alert('答えは' + kai + 'です。');
	}
</script>
</body>

Illustrator & PhotoShop

カンプの準備

脱線話（復活）

四十路男Tokiyoの人生再スタートblogもやってます。

2013-01-04

31回目授業内容　プレゼン２～Flash～脱線

授業プレゼン Flash ActionScript

31回目授業内容　プレゼン２～Flash～脱線

プレゼン２

実際に製作に当たる場合
- 実店舗の写真なり言葉なりが全て出てくるわけではない
- 1ヶ月のくくりなら2週間で具が全てあるべき
- 載せたいものは無くてもイラストなりで実装しておくのが良い
- 外側に公開して十分使えているものだけが評価の対象になる

Flash

if文
- 比較演算子

onClipEvent (load) {
	var speed = 10;
	var leftEdge = -20;
	var rightEdge = 520;
}
onClipEvent (enterFrame) {
	this._x += speed;
	if (this._x >= rightEdge){
		this._x = leftEdge;
	}
}

function文

var speed:Number;
var rightEdge:Number;
var leftEdge:Number;
this.onLoad = function() {
	speed = 10;
	leftEdge = -20;
	rightEdge = 520;
}
ball_mc.onEnterFrame = function() {
	ball_mc._x += speed;
	if(ball_mc._x >= rightEdge) {
		ball_mc._x = leftEdge;
	}
}

y軸もプラスする

- 最初に書いたScript

onClipEvent (load) {
	var speedx : Number = 8;
	var speedy : Number = 10;
	var rightEdge : Number = 450;
	var leftEdge : Number = 50;
	var topEdge : Number = 50;
	var bottomEdge : Number = 350;
}
onClipEvent (enterFrame) {
	if(_x > rightEdge) {
		speedx *= -1;
	} 
	if(_x < leftEdge) {
		speedx *= -1;
	}
	if(_y > topEdge) {
		speedy *= -1;
	}
	if(_y < bottomEdge) {
		speedy *= -1;
	}
		_x += speedx;
		_y += speedy;
}

- プログラマ的に書くと

onClipEvent (load) {
	var speedX : Number = 9;
	var speedY : Number = 10;
	var rightEdge : Number = 500;
	var leftEdge : Number = 0;
	var topEdge : Number = 0;
	var bottomEdge : Number = 400;
}
onClipEvent (enterFrame) {
	if(_x > rightEdge - _width/2 || _x < leftEdge + _width/2) {
		speedX *= -1;
	} 
		_x += speedX;

	if(_y < topEdge + _height/2  || _y > bottomEdge - _height/2) {
		speedY *= -1;
	}
		_y += speedY;
}

グローバル変数の場合（タイムライン上）

	var speedX : Number = 9;
	var speedY : Number = 10;
	var rightEdge : Number = 500;
	var leftEdge : Number = 0;
	var topEdge : Number = 0;
	var bottomEdge : Number = 400;
this.onEnterFrame = function() {
	if(beer_mc._x > rightEdge - beer_mc._width/2 || beer_mc._x < leftEdge + beer_mc._width/2) {
		speedX *= -1;
	} 
		beer_mc._x += speedX;

	if(beer_mc._y < topEdge + beer_mc._height/2  || beer_mc._y > bottomEdge - beer_mc._height/2) {
		speedY *= -1;
	}
		beer_mc._y += speedY;
}

脱線話（復活）

先生がたばこを辞めた理由は「おしゃぶりみたいに口に付けてるのがかっこ悪いと思ってそのままグシャッと潰してやめた」んだそうですｗ。でもこうでないとやめれないよね！

四十路男Tokiyoの人生再スタートblogもやってます。

2012-12-28

30回目授業内容　プレゼン～脱線

プレゼン

30回目授業内容　プレゼン～脱線

[授業][JavaScript][Dreamweaver]

プレゼン

1月終わりまでに製作するWebページのプレゼン日
- 特徴を掴む
- いくつかのデザイン案を最初に見せてみる

四十路男Tokiyoの人生再スタートblogもやってます。

2012-12-27

29回目授業内容　JavaScript～脱線

授業 Dreamweaver JavaScript

29回目授業内容　JavaScript～脱線

[授業][JavaScript][Dreamweaver]

今日のダイアリーデータが飛んじゃった・・・。

なのでやったことのソースを載せます。

JavaScript

画像置換０１

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像置換０１</title>
<link rel="stylesheet" href="css/style1.css" media="screen, print">
<script src="js/rollover.jp"></script>
</head>

<body>
<nav>
<ul>
<li id="home"><img src="images/btn01.jpg" onMouseOver="this.src='images/btn01_o.jpg'" onMouseOut="this.src='images/btn01.jpg'" width="160" height="50" alt="HOME"><a href="#"><em>HOME</em></a></li>
<li id="css"><img src="images/btn02.jpg" onMouseOver="this.src='images/btn02_o.jpg'" onMouseOut="this.src='images/btn02.jpg'" width="160" height="50" alt="HOME"><a href="#"><em>HTML+CSS</em></a></li>
<li id="js"><img src="images/btn03.jpg" onMouseOver="this.src='images/btn03_o.jpg'" onMouseOut="this.src='images/btn03.jpg'" width="160" height="50" alt="HOME"><a href="#"><em>JavaScript</em></a></li>
<li id="as"><img src="images/btn04.jpg" onMouseOver="this.src='images/btn04_o.jpg'" onMouseOut="this.src='images/btn04.jpg'" width="160" height="50" alt="HOME"><a href="#"><em>ActionScript</em></a></li>
<li id="php"><a href="#"><img src="images/btn05.jpg" onMouseOver="this.src='images/btn05_o.jpg'" onMouseOut="this.src='images/btn05.jpg'" width="160" height="50" alt="HOME"><em>PHP</em></a></li>
</ul>
</nav>
</body>
</html>

@charset "UTF-8";

#nav {
	width: 800px;
	margin: 10px;
}
ul {
	list-style-type: none;
	overflow: hidden;
}
li {
	float: left;
	display: inline;
}
li a {
	text-decoration: none;
	display: block;
}
em {
	display: block;
	/*visibility: hidden;*/
	text-indent: -999px;
}

ソファーのあるインテリア

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ソファーのあるインテリア</title>
<link rel="stylesheet" href="css/style2.css" media="screen, print">
</head>

<body>
<div id="container">
<h1>ソファーのあるインテリア</h1>

<p class="thumbnail">
<img src="images/1.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='images/1.jpg'">
<img src="images/2.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='images/2.jpg'">
<img src="images/3.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='images/3.jpg'">
<img src="images/4.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='images/4.jpg'">
<img src="images/5.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='images/5.jpg'"></p>
<p class="main"><img src="images/1.jpg" width="600" height="450" alt="" name="mainImg"></p>
</div>
</body>
</html>

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}
body {
}
#container {
	width: 700px;
	margin: 0 auto;
	text-align: center;
}
h1 {
	font-size: 1.5em;
	color: #00C;
	margin-top: 10px;
}
p.main {
	background-color: #fff;
	background-image: url(../images/main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	height: 510px;
	width: 660px;
	margin: 0px auto;
}
p.main img {
	margin-top: 30px;
}
p.thumbnail img{
	margin: 10px 2.5px 5px 2.5px;
}

画像置換０２ーrollover.js

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像置換０２</title>
<link rel="stylesheet" href="css/style1.css" media="screen, print">
<script src="js/rollover.js" type="text/javascript"></script>
</head>

<body>
<nav>
<ul>
<li><img src="images/btn01.jpg" width="160" height="50" alt="HOME" class="imgover"><a href="#"><em>HOME</em></a></li>
<li><img src="images/btn02.jpg" width="160" height="50" alt="HOME" class="imgover"><a href="#"><em>HTML+CSS</em></a></li>
<li><img src="images/btn03.jpg" width="160" height="50" alt="HOME" class="imgover"><a href="#"><em>JavaScript</em></a></li>
<li><img src="images/btn04.jpg" width="160" height="50" alt="HOME" class="imgover"><a href="#"><em>ActionScript</em></a></li>
<li><img src="images/btn05.jpg" width="160" height="50" alt="HOME" class="imgover"><a href="#"><em>PHP</em></a></li>
</ul>
</nav>
</body>
</html>

2012-12-26

p128回目授業内容

授業

28回目授業内容

自己理解・他者理解

就職には自己理解が不可欠
- ジョブカードを書き自分を理解する
  - 履歴書
  - 職務経歴書

ジョブカード様式２ー職務経歴シート
- 職務の内容
  - 客観性を見られる
  - 箇条書き
- 職務の中で～～
  - 主観性を見られる
  - 思い出す気づく内容を書き留める

ジョブカード様式３の上ーキャリアシート
- 働いた経験全部
- 自分の能力、強み（弱み）
- 得意（不得意）希望
- 適正
- 文章にして書く
- 自分のジョブカードを作成して気づきました

ジョブカード様式１ー履歴シート２ー志望動機
上記2つを書くことにより志望動機が書けるようになる

ジョハリの窓

自己開示
- カタルシス（浄化）作用
  - 自己の明確化
  - 自己の客観化
  - 社会の妥当性
  - 返報性
- 退陣関係の向上

四十路男Tokiyoの人生再スタートblogもやってます。

2012-12-25

27回目授業内容　プレゼン資料の製作～課題ケーキ屋さんサイト完成！〜自分紹介サイトトップページ制作〜脱線

授業 Dreamweaver

27回目授業内容　プレゼン資料の製作～課題ケーキ屋さんサイト完成！〜自分紹介サイトトップページ制作〜脱線

プレゼン資料の製作

ワークフローとは？
- 業務一連の流れを大まかに決めていくこと
  - お問合せ
  - オリエンテーション・ヒアリング
    - Webサーバー環境/URL
    - サイトの役割
    - サイトのデザイン
    - サイトの内容
    - コンテンツ素材
    - 予算・納期
    - 保守・管理
    - 参考サイト

- - 提案書・見積書
  - プレゼンテーション
  - 受注

提案書の内容
- サイトの目的
- メインターゲット
- コンテンツ内容
- アフィリエイトの導入
- 最後に

課題ケーキ屋さんサイト完成！

自分紹介サイトトップページ制作

2012-12-22

26回目授業内容　卒業生の言葉～ActionScriptの練習～デザイナーの本質～脱線

授業 Dreamweaver ActionScript

26回目授業内容　卒業生の言葉～ActionScriptの練習～デザイナーの本質～脱線

卒業生の言葉

本日は前回の卒業生の色々なアドバイスを頂きました。とてもためになる話ばかりで本当によかったです。そのアドバイスをしっかりと受け止め早め早めのスケジュールを組んで頑張りたいと思いました。ありがとうございました！

ActionScriptの練習

ボールをループさせる

var speed:Number;
var leftEdge:Number;
var rightEdge:Number;

this.onLoad = function() {
	speed = 10;
	leftEdge = -20;
	rightEdge = 520;
}
ball_mc.onEnterFrame = function() {
	ball_mc._x += speed;
	if(ball_mc._x >= rightEdge){
		ball_mc._x = leftEdge;
	}
}

デザイナーの本質

5つある果実。デザイナーが考える売りたいものは1対4にしてお奨めを1つに限定する
見る側が望んでいる基本レイアウトは
- １新商品
- 2キャンペーン情報
- 3関連商品
- 4会社情報
- 5連絡先その他の情報
紙とWebの違い
実店舗の場合は
- チラシから入るのが鉄則
- 1年間続けて売上が維持できれば次がWeb

余白は十分に空けるのが格好いいサイト
サーチュレーション
- サイドはエネルギー軸と関係がある
- 弱々しいとグレーが入ってくる
エスニックは色的に喧嘩している色が同居している
英語で白黒
- Still Life
色とは心理学的に人の感じ方を把握して使うこと
写真を見て次の瞬間を感じられる想像出来るものを「シズル感」という
近い人ほど
- パステルカラー
- 自然物の色
- 薄い色
- 明るい色
遠い人（企業や会社）
- 紺色・薄いグレー
- 黒・濃いグレー
もっと遠い存在（神社・神）
- 金銀

ブランディング・色を選ぶ手順
- 目的内容
- 業界・業種のイメージ職
- 発信者の独自色

第一位のコーポレートカラーは真似できない
- 2位以下は情報で勝負！

広告業の勉強
- ランチェスターの法則を勉強！
  - 相手がいる距離で法則が変わる

情報には5W1H
- いつ（When）
- どこで（Where）
- 誰が（Who）
- ナニを（What）
- 何故（Why）
- どのようにするか（How）

デザインに季節の色を合わせる
- 12ヶ月を意識する

コンポジションを意識

四十路男Tokiyoの人生再スタートblogもやってます。

32回目授業内容 JavaScript～脱線

if文

function

Illustrator & PhotoShop

脱線話（復活）

31回目授業内容 プレゼン２～Flash～脱線

プレゼン２

Flash

脱線話（復活）

30回目授業内容 プレゼン～脱線

プレゼン

29回目授業内容 JavaScript～脱線

今日のダイアリーデータが飛んじゃった・・・。

28回目授業内容

自己理解・他者理解

27回目授業内容 プレゼン資料の製作～課題ケーキ屋さんサイト完成！〜自分紹介サイトトップページ制作〜脱線

プレゼン資料の製作

課題ケーキ屋さんサイト完成！

自分紹介サイトトップページ制作

26回目授業内容 卒業生の言葉～ActionScriptの練習～デザイナーの本質～脱線

卒業生の言葉

ActionScriptの練習

デザイナーの本質

32回目授業内容　JavaScript～脱線

31回目授業内容　プレゼン２～Flash～脱線

30回目授業内容　プレゼン～脱線

29回目授業内容　JavaScript～脱線

27回目授業内容　プレゼン資料の製作～課題ケーキ屋さんサイト完成！〜自分紹介サイトトップページ制作〜脱線

26回目授業内容　卒業生の言葉～ActionScriptの練習～デザイナーの本質～脱線