YouTube上で世界中から集められたソーシャルネットワークムービー

Sense of wonder

『LIFE IN A DAY』

http://www.youtube.com/movie?v=JaFVr_cJJIY&ob=av5n&feature=mv_sr
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　14/100

オリジナルサイト
http://www.liad2011.com/

Youtubeサイト
http://www.youtube.com

Trailer

Comment
・2010年7月24日の一日の出来事を撮影された動画が世界192カ国、8万本がYoutube上で投稿され集められた。合計4500時間。これらをブレードランナーで知られる英国人映画監督リドリー・スコットと弟のトニー・スコット制作の元に1本の映画として編集され、無料でYouTube上で公開されている。

・YouTube等で動画等を各地から集めて編集する企画は以前から出回っているが、プロの大物の監督がこういった企画を手掛けることが興味深い。

・誰しもが日常にふと考える事。今この一瞬に家族や友達、そして世界中の自分が見た事も無い土地で他者がどのように生き、生活しているのか。そういった事柄を具現化して、日常の想像力に僅かながらエッセンスを与えてくれる映像。

CSSでポップアップ風画像置換

CSS

http://000.tyabo.com/HTML%26CSS/CSS_popup/index.html

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>CSS_ポップアップ練習</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/style.css" rel="stylesheet" type="text/css" 
media="screen, print" />

</head>
<body>
<div id="container">
<div id="header">
<h1>SUOMI</h1>
</div>
<!--/div#header-->

<div id="wrapper">

<div id="content">

<div class="box1">
<div class="photo1">
<a href="#"  class="thumb">
<img src="images/p01_s.jpg" alt="" width="180" height="125"/>
<img src="images/p01.jpg" alt="" width="460" height="320" class="large1" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box2">
<div class="photo1">
<a href="#"  class="thumb">
<img src="images/p04_s.jpg" alt="" width="180" height="125"/>
<img src="images/p04.jpg" alt="" width="460" height="320" class="large1" />
</a>
</div>
<p class="caption"></p>
</div>


<div class="box3">
<div class="photo2">
<a href="#"  class="thumb">
<img src="images/p03_s.jpg" alt="" width="180" height="125"/>
<img src="images/p03.jpg" alt=""  width="460" height="320"  class="large2" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box4">
<div class="photo2">
<a href="#"  class="thumb">
<img src="images/p02_s.jpg" alt="" width="180" height="125"/>
<img src="images/p02.jpg" alt="" width="460" height="320" class="large2" />
</a>
</div>
<p class="caption"></p>
</div>

</div>
<!--/div#content-->

<div id="content2">

<div class="box5">
<div class="photo3">
<a href="#"  class="thumb">
<img src="images/p05_s.jpg" alt="" width="180" height="125"/>
<img src="images/p05.jpg" alt=""  width="460" height="320"  
class="large3" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box6">
<div class="photo4">
<a href="#"  class="thumb">
<img src="images/p06_s.jpg" alt="" width="180" height="125"/>
<img src="images/p06.jpg" alt="" width="460" height="320" 
class="large4" />
</a>
</div>
<p class="caption"></p>
</div>

</div>
<!--/div#content2-->

<div id="content3">

<div class="box7">
<div class="photo5">
<a href="#"  class="thumb">
<img src="images/p09_s.jpg" alt="" width="180" height="125"/>
<img src="images/p09.jpg"alt=""  width="460" height="320" 
class="large5" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box8">
<div class="photo5">
<a href="#"  class="thumb">
<img src="images/p08_s.jpg" alt="" width="180" height="125"/>
<img src="images/p08.jpg" alt="" width="460" height="320" 
class="large5" />
</a>
</div>
<p class="caption"></p>
</div>


<div class="box9">
<div class="photo6">
<a href="#"  class="thumb">
<img src="images/p07_s.jpg" alt="" width="180" height="125"/>
<img src="images/p07.jpg" alt="" width="460" height="320" 
class="large6" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box10">
<div class="photo6">
<a href="#"  class="thumb">
<img src="images/p10_s.jpg" alt="" width="180" height="125"/>
<img src="images/p10.jpg" alt="" width="460" height="320" 
class="large6" />
</a>
</div>
<p class="caption"></p>
</div>

</div>
<!--/div#content3-->

</div>
<!--/div#wrapper-->

</div>
<!--/div#container-->

</body>
</html>
||< 



<h5>CSS</h5>
>||
@charset "utf-8";
/* CSS Document */

/* リセット　*/

html, body, h1, h2, h3, h4, h5 h6, p,  address,
ul, ol, li, dl, dt, dd, table, td, th, pre, form, 
fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
}

image {
	border: none;
}


/* レイアウト */
body {
	background: ;
	font-family: Georgia, 
	"Times New Roman", 
	Times, serif;
}

h1 {
	margin : 0 0 10px 145px;
	color: #444;
	font-size: 1.1em;
	border-radius: 10px;			
	border-top: 10px solid #B8C2bb;
	border-bottom: 10px solid #B8C2bb;
	border-left: 10px dotted #fff;
	border-right:10px dotted #fff;
	width: 120px;
	padding-left: 35px;
	
}


#container {
     margin: 0 auto ;
	 width:auto;	
	}

#header {
	height: 50px;
	width: 100%;
	padding: 10px 0;
	background: #fff;
	background:-webkit-linear-gradient(#ccc, #fff);
	background:-moz-linear-gradient(#ccc, #fff);
	background:-ms-linear-gradient(#ccc, #fff);
	background:-o-linear-gradient(#ccc, #fff);
	background:linear-gradient(#ccc, #fff); 
	border-bottom: 5px solid #B8C2bb;
	}

	
#wrapper {
    background: #222;
	background: -webkit-linear-gradient(#222, #444);
   background: -moz-linear-gradient(#222, #444);
   background: -ms-linear-gradient(#222, #444);
   background: -o-linear-gradient(#222, #444);
   background: linear-gradient(#222, #444);		
	width: auto;
	height: 600px;
	padding: 20px 100px;

}

#content {
	width: 1050px;
	height: 145px;
	clear: both;
	margin: 0 0 60px 0;
	border : 1px solid #333;
	border-radius: 10px;	
}

#content2 {
	width: 1050px;
	height: 145px;
	clear: both;
	margin: 0 0 60px 0;
	border : 1px solid #444;
	border-radius: 10px;	
}

#content3 {
	width: 1050px;
	height: 145px;
	clear: both;
	margin: 0 0 0px 0;
	border : 1px solid #555;
	border-radius: 10px;	
}


.box1, .box2, .box3, .box4 {
  float: left;	
  display: block;
  width:  180px;
  height: 125px;
  margin: 10px 40px;
}

.box5 {
  float: left;	
  display: block;
  width:  180px;
  height: 125px;
  margin: 10px 0 10px 40px;
}

.box6 {
  float: left;	
  display: block;
  width:  180px;
  height: 125px;
  margin: 10px 0 10px 600px;
}


.box7, .box8, .box9, .box10 {
  float: left;	
  display: block;
  width:  180px;
  height: 125px;
  margin: 10px 40px;
}

.photo1 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo1 a .large1 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
}

.photo1 a.thumb:hover .large1{
	display: block;
  position: absolute;
	left: -15px ;
	top: -15px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}


.photo2 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo2 a .large2 {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 1px;
	}

.photo2 a.thumb:hover .large2{
	display: block;
  position: absolute;
	top: -15px;
	right: -15px ;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}


.photo3 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo3 a .large3 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	}

.photo3 a.thumb:hover .large3{
	display: block;
  position: absolute;
	left: -15px ;
	top: -90px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}

.photo4 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo4 a .large4 {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 1px;
	}

.photo4 a.thumb:hover .large4{
	display: block;
  position: absolute;
	right :-15px ;
	top: -90px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}

.photo5 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo5 a .large5 {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	}

.photo5 a.thumb:hover .large5{
	display: block;
    position: absolute;
	left: -15px ;
	bottom: -15px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}

.photo6 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo6 a .large6 {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	}

.photo6 a.thumb:hover .large6{
	display: block;
  position: absolute;
	right: -15px ;
	bottom: -15px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}

フォームに入力した内容を取得する：応用

PHP

ブログにアップする為、送信先メールアドレスは一旦消してあるが、送信成功になってもメール受信されず...

http://oi0y0io.noor.jp

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お問い合わせフォーム</title>
</head>
<body>
■お問い合わせ内容を入力してください。
<br>
<form action="check_inquiry.php" method="post">
お問い合わせタイトル：
<br>
<input type="text" name="title" size="50">
<br>
<br>
お問い合わせ内容詳細：
<br>
<textarea name="message" cols="40" rows="5"></textarea>
<br>
<br>
<input type="submit" value="お問い合わせ内容の確認">
</form>
</body>
</html>

PHP

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<?php
	// お問い合わせタイトル、詳細のセット
	$title = htmlspecialchars($_POST['title'], ENT_QUOTES);
	$message = htmlspecialchars($_POST['message'], ENT_QUOTES);
?>
■お問い合わせ内容を確認してください。
<br>
<form action="send_inquiry.php" method="post">
<input type="hidden" name="title" value="<?php echo $title; ?>">
<input type="hidden" name="message" value="<?php echo $message; ?>">
お問い合わせタイトル：
<br>
<?php echo $title; ?>
<br>
<br>
お問い合わせ内容詳細：
<br>
<?php
	// 改行部分にBRタグを埋め込む
	echo nl2br($message);
?>
<br>
<br>
<input type="submit" value="お問い合わせ内容の送信">
</form>
</body>
</html>

PHP

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<?php
	// お問い合わせタイトル、詳細のセット
	$title = htmlspecialchars($_POST['title'], ENT_QUOTES);
	$message = htmlspecialchars($_POST['message'],
		ENT_QUOTES);

	// 日本語（UTF8）の指定
	mb_language('ja');
	mb_internal_encoding('UTF8');

	// Fromアドレスの設定（自動送信<送信元のアドレス>）
	$name = '自動送信';
	$email = '＜送信元のメールアドレス＞';
	$header = 'From: '. mb_encode_mimeheader($name) . '<' . $email .'>';

	// メール送信
	$result = mb_send_mail("＜送信先メールアドレス＞", $title, $message, $header);

	//メール送信の確認
	if ($result) {
		// メール送信の成功
		echo '■お問い合わせ内容を担当者へ送信しました。';
	} else {
		// メール送信の失敗
		echo '■担当者への送信に失敗しました。';
	}
?>
</body>
</html>

課題：PHPフォームに入力した内容を取得する

Project

http://oi0y0io.noor.jp

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8" />
<title>データの取得</title>
</head>
<body>
<form action="action.php" method="POST">
<label for="my_name">お名前：</label>
<input id="my_name" type="text" name="my_name" size="35" 
maxlength="20" value="" />
<input type="submit" value="送信する" />
</form>
</body>
</html>

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8" />
<title>データの取得</title>
</head>
<body>
<?php
$name=htmlspecialchars($_POST['my_name'], ENT_QUOTES); 
?>
<p>こんにちは、<?php print($name); ?>さん！</p>
</body>
</html>

パリを拠点にしたデザインユニットのサイト

Sense of wonder

M/M (Paris)

http://www.mmparis.com/
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　13/100
http://www.mmparis.com/


Bjork "Hidden place" Directed by M/M (Paris)

Comment
・グラフィックのみならず、ミュージッククリップ等も手がけるパリジャン二人組。

・タイポグラフィー等も手書き風でありながら、有機的でエロティックな様相を帯びて、似たような他のデザインからも秀でたセンスを持ち合わせている。

・サイト自体はごくごくシンプルで殆ど文字ベースであるが、所々使われている原色のアクセントがポップで遊び心もありなんともフランス人らしい。

ロンドンのグラフィック・映像製作会社のサイト

Sense of wonder

『tomato』

http://www.tomato.co.uk/
　　　　　　　　　　　　　　　　　　　　　　　　　　　　12/100

http://www.tomato.co.uk/

Comment
・過去の膨大な作品をアーカイブ化してシンプルにアクセスしやすくしている。

・会社の特徴でもある映像やグラフィック作品を分かりやすく配置して、一目で会社の特色が分かりやすくデザインしてある。

・映像、グラフィック作品は例のごとく完成度が高く、エッジの効いたアブストラクトなものが多いが、サイトに関しては色味を抑えて作品を見せやすくしている。