Extras

Week 9

CDGD304 - Fall 2011
http://bit.ly/massart-web304-9

Order of Business

Final Project Design Critiques
Images - what you can't and can't put on the web
Hosting and Uploading your own site
Basic Contact Form
Pulling a Twitter Feed
Rollover & Drop-down navbars

Final Project Review

Homework

Shuffle

Images on the Web

Know the Basics

8bit vs 24bit
Compresed vs Uncompressed
Lossy vs Non-lossy
Transparency

Know your Formats

GIF
JPG
PNG
SVG
ICO

.tiff

.psd

.eps

gif

non-lossy
8bit
1bit transparency
small
RLE
Can be animated

jpg

lossy
FFT-compression
24 bit

png

upgrading gif
24 & 8bit
24 bit supports "soft" transparency

svg

scalable vector graphics
good support only recently

ico

favicon (the only time you would use it)

Which Format?

Hosting & FTPing your website

quick and cheap

DreamHost

Fetch FTP

Basic Navbar

<style>

#menu {  
    list-style:none;  
    width:940px;  
    margin:30px auto 0px auto;  
    height:43px;  
    padding:0px 20px 0px 20px;  
}

#menu li {  
    float:left;  
    display:block;  
    text-align:center;  
    position:relative;  
    padding: 4px 10px;  
    margin-right:30px;  
    margin-top:7px;  
    border: 1px solid white;  
}

#menu li:hover {  
    border: 1px solid gray;  
    background: #F4F4F4;  

}

#menu li a {  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:14px;  
    color: gray;  
    display:block;  
    outline:0;  
    text-decoration:none;  
}

#menu li ul {
	display:none;
	position:absolute;
	top:20px;
}

</style>

<ul id="menu">  
    <li><a href="#">Home</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Portfolio</a> 
 		<ul>
		   <li><a href="#">Print</a></li>  
		   <li><a href="#">Photography</a></li>  
		   <li><a href="#">Web</a></li>
		</ul></li>
    <li><a href="#">Contact</a></li>  
</ul>

Rollover Navs

pure CSS

Drop-Down

Adding :hover selector

<style>


#menu {  
    list-style:none;  
    width:940px;  
    margin:30px auto 0px auto;  
    height:43px;  
    padding:0px 20px 0px 20px;  
}

#menu li {  
    float:left;  
    display:block;  
    text-align:center;  
    position:relative;  
    padding: 4px 10px;  
    margin-right:30px;  
    margin-top:7px;  
    border: 1px solid white;  
}

#menu li:hover {  
    border: 1px solid gray;  
    background: #F4F4F4;  

}

#menu li a {  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:14px;  
    color: gray;  
    display:block;  
    outline:0;  
    text-decoration:none;  
}

#menu li ul {
	display:none;
	position:absolute;
	top:20px;
}

#menu li:hover ul {
	display:block;
	
}


</style>

<ul id="menu">  
    <li><a href="#">Home</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Portfolio</a> 
 		<ul>
		   <li><a href="#">Print</a></li>  
		   <li><a href="#">Photography</a></li>  
		   <li><a href="#">Web</a></li>
		</ul></li>
    <li><a href="#">Contact</a></li>  
</ul>

Drop-Down Navs

add a few line of javascript

Click Drop-Down

basic HTML & CSS


<div id='dropdowns'>
<h3><a href="#">Section 1</a></h3>
  <div>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>

<h3><a href="#">Section 2</a></h3>
  <div>
   <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>

<h3><a href="#">Section 3</a></h3>
  <div>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>

<h3><a href="#">Section 4</a></h3>
  <div>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>

<script>
  $(function() {
      $("#dropdowns > div").hide();
      $("#dropdowns h3").click(function() {
        $("#dropdowns > div:visible").slideUp();
        $(this).next().slideDown();
       });
   });
</script>
<style>

  body { width:300px; marging: 0 auto; color:gray; font-family:Georgia, serif;}

  p { padding-top:7px;}

  h3 { 
    margin-top:30px;
    background-color:#dddddd;
    padding:3px;
    line-height:1.2em;
}
  h3 a { 
    text-decoration:none;
    color:gray;
    font-weight:bold
  }

</style>

jQuery Accordian

Click Drop-Down

jQuery Accordian

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#accordion").accordion();
	$( ".selector" ).accordion({ collapsible: true });
  });
  </script>
</head>
<body>
	<div id="accordion">
		<h3><a href="#">Section 1</a></h3>
		  <div>
		    <ul>
		      <li>List item one</li>
		      <li>List item two</li>
		      <li>List item three</li>
		    </ul>
		  </div>

		<h3><a href="#">Section 2</a></h3>
		  <div>
		  	<p>
		  	Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		  	purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		  	velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		  	suscipit faucibus urna.
		  	</p>
		  </div>

		<h3><a href="#">Section 3</a></h3>
		  <div>
		    <ul>
		      <li>List item one</li>
		      <li>List item two</li>
		      <li>List item three</li>
		    </ul>
		  </div>

		<h3><a href="#">Section 4</a></h3>
		  <div>
		    <ul>
		      <li>List item one</li>
		      <li>List item two</li>
		      <li>List item three</li>
		    </ul>
		  </div>
	</div>

	</body>
	</html>
	<style>

	  body { width:300px; marging: 0 auto; color:gray; font-family:Georgia, serif;}

	  p { padding-top:7px;}

	  h3 { 
	    margin-top:30px;
	    background-color:#dddddd;
	    padding:3px;
	    line-height:1.2em;
	}
	  h3 a { 
	    text-decoration:none;
	    color:gray;
	    font-weight:bold
	  }

	</style>
</body>
</head>
</html>

Twitter Feeds

pull a twitter feed

Pulling Your Twitter Feed

Twitter Feed

paste your code here

Forms

a basic contact form

HTML5 Form

 <div id="contact-form">    

<form id="contact" method="post" action="somewhere.php">
<fieldset>    

	<label for="name">Name</label>
	<input type="text" name="contact[name]" placeholder="Full Name">

	<label for="email">E-mail</label>
	<input type="email" name="contact[email]" placeholder="name@domain.com">

	<label for="phone">Message</label>
	<textarea name="contact[message]" placeholder="enter your message"></textarea>


<input type="submit" name="submit" id="submit" value="Send Message" />

</fieldset>
</form>

</div>
<style>
label {display:block;}
input, textarea { display:block;}
</style>

What does somewhere.php do?

Well, we haven't covered PHP, but here's a example..

<?php
if($_REQUEST['contact']) {

  $content = "Contact Details:\n";
  foreach($_REQUEST['contact'] as $key => $value) {
     $content .= "$key: $value\n";
  }
  mail ("myemail@domain.com","Form Submission!",$content);
  
  header('Location: contact.html');
  exit(0);
}
?>
<!DOCTYPE HTML>
<html lang="en">
  <head></head>
  <body>
    No Contact Request Received
  </body>
</html>

Homework

Design

Keep working on your final project - we only have 2 classes left before the final presentation!
Email me with problems and I will include them in the next class
Add a form and a Twitter feed to your website.

Extras

Week 9

Order of Business

Final Project Design Critiques

Images - what you can't and can't put on the web

Hosting and Uploading your own site

Basic Contact Form

Pulling a Twitter Feed

Rollover & Drop-down navbars

Final Project Review

Homework

Images on the Web

Know the Basics

8bit vs 24bit

Compresed vs Uncompressed

Lossy vs Non-lossy

Transparency

Know your Formats

GIF

JPG

PNG

SVG

ICO

.tiff

.psd

.eps

gif

non-lossy

8bit

1bit transparency

small

RLE

Can be animated

jpg

lossy

FFT-compression

24 bit

png

upgrading gif

24 & 8bit

24 bit supports "soft" transparency

svg

scalable vector graphics

good support only recently

ico

favicon (the only time you would use it)

Which Format?

Hosting & FTPing your website

quick and cheap

DreamHost

Fetch FTP

Basic Navbar

Rollover Navs

pure CSS

Drop-Down

Drop-Down Navs

add a few line of javascript

Click Drop-Down

jQuery Accordian

Click Drop-Down

Twitter Feeds

pull a twitter feed

Pulling Your Twitter Feed

Twitter Feed

Forms

a basic contact form

HTML5 Form

What does somewhere.php do?

Homework

Design

Keep working on your final project - we only have 2 classes left before the final presentation!Email me with problems and I will include them in the next class

Add a form and a Twitter feed to your website.

Keep working on your final project - we only have 2 classes left before the final presentation!
Email me with problems and I will include them in the next class