Question of the day:
If you saw "There's no place like 127.0.0.1" on a t-Shirt, why would it be funny?

LIGO! NOW!
More creepy things about the Internet

here's a nifty geo-location website

From "Google Location Service in Mozilla Firefox Privacy Policy"

If you allow a website to get your location via this service, we will collect, depending on the capabilities of your device, information about the wifi routers closest to you, cell ids of the cell towers closest to you, and the strength of your wifi or cell signal. We use this information to return an estimated location to the Firefox browser and the Firefox browser sends the estimated location to the requesting website. For each request sent to our service, we also collect IP address, user agent information, and unique identifier of your client. We use this information to distinguish requests, not to identify you.

Oh and by the way, if your house is in Streetview, we probably already have this info anyways. :)
Google Maps "location history"

A hacker at the black hat hacker convention gave a talk called "How I met your girlfriend" in which he talks about how to get the exact location of anyone who visits your site using the streetview MAC address database. Creeepy.

You can get raw data from cell phone images that will tell you a lot, including location.
exif lookup site
please rob me (not longer working but you get the idea)
Stolen camera finder

discgolf joe Unknown

scrolling to handle overflow

You can manage how overflowing text is displayed with in a div tag.

auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum bibendum sapien ut dignissim. Sed luctus ullamcorper libero et euismod. Fusce mauris erat, hendrerit ut auctor blandit, pellentesque quis leo. Nam malesuada cursus nulla non semper.

auto (with image)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum bibendum sapien ut dignissim. Sed luctus ullamcorper libero et euismod. Fusce mauris erat, hendrerit ut auctor blandit, pellentesque quis leo. Nam malesuada cursus nulla non semper.

scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum bibendum sapien ut dignissim. Sed luctus ullamcorper libero et euismod. Fusce mauris erat, hendrerit ut auctor blandit, pellentesque quis leo. Nam malesuada cursus nulla non semper.

visible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum bibendum sapien ut dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum bibendum sapien ut dignissim. Sed luctus

hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum bibendum sapien ut dignissim. Sed luctus ullamcorper libero et euismod. Fusce mauris erat, hendrerit ut auctor blandit, pellentesque quis leo. Nam malesuada cursus nulla non semper.


The Cool Sounding "Pseudo-Classes"
Pseudo-Classes are used to extend the power of css.

You can control the colour and appearance of your links.
Copy and past the following into the css file.

	
a:link {
	color:red;
}
a:visited{
	color:orange;
}
a:focus{
	color:purple;
}	
a:hover{
	color:green;
}
a:active{
	color:blue;
}
	
Now make links in the html file and they will be the color you described in the CSS. The link controlling pseudo-classes need to be in this specific order or they won't work right.

you can combine psudo classes with other styles within your CSS. In the following case the class you created called "red" would have a blue link color.

	
.red{
	color: red; 
}

.red a:link {
	color: rgb(20, 200, 110);
} 
You can also control the color style and font of the first line of a paragraph. The following example will make the first line red and in all caps.
	  #sidebar{  
		position: relative;
        margin-right: -10px;
        width: 200px; 
        left: -30px;
      	height: 400px; 
      	float: left; 
     	background: purple;  
     	padding: 2px;  
		float: left;
	}
	
	#sidebar:first-line {  
		color:#ff0000;^&
		font-variant:small-caps;
	}
	

The first line in the sidebar div will be red and all caps.

  #sidebar P:first-letter {  
   	   font-size: 2.4em; 
	   font-style: 'Times', serif;
	}
The psudo class "hover" is also useful for some simple interactivity that does not involve javascript. you can create a special condition the hover and use it to change the appearance of the div - you could even do this to create a simple rollover image.
 .rollovertest2{
	background-image:url('images/down.gif');
	width: 131px;
	height: 215px;
	}

   .rollovertest2:hover{
	background-image:url('images/up.gif');
	width: 131px;
	height: 215px;
	}
The pulldowm menus on this site use a combinations of CSS rollovers to create their effects.

Making an entire div a link is a little tricky. You cannot put a div inside an "a href" tag because you cannot have a "block" element inside an "inline" element. There is an elegant solution, however, which involves creating an inline element and telling to "behave" like a block element.

  1. create your div
  2. define the links for the div as being "display: block;"
  3. give a width and height of the block as 100%
  4. in the html create your link - th ewhole div should be an active link.
.rolloverarea{
 width: 50px; 
 height: 50px;
  float: left; 
  margin: 10px; 
padding: 3px; 
background: rgb(100, 100, 250);  
box-shadow: 10px 10px 5px rgb(20, 20, 20);

 }
.rolloverarea:hover{
position: relative; 
top: 7px; 
left: 7px; 
box-shadow: 3px 3px 3px rgb(20, 20, 20);
background: rgb(100, 255, 0);  

 } 
 .rolloverarea a {
    display: block;
    width: 100%;
    height: 100%; 
}

test
test
test
test
test
test

Here's a handy sample page with pseudo-class

Transform
Last week we peeked at transform to center a DIV vertically - lets look more closely. It works a bit like adding a value to the position of a div that has been given a relative positioning. Right now you can transform the loacation, scale and rotation.

transform:translate(100em, 20em)
transform:rotateX(20deg);
transform:scale(2em);

Okay, but who cares? Well ... ecause of ... (cue the music) ...

Transitions!
Transition lets you animate your changes. This gives you some animation control before we dip into any javascript. This is new, and if it's imaprative that the site work in all browsers it's good to know about prefixes. webkit for safari, Moz for firefox, ms for Explorer (hi mom!). So it would look like:

-webkit-transition
-moz-transition
-ms-transform
transition

Chrome doesn't need them , and I've left them off for this example, but if you're finding a tranisiton works in one browser but not another, prefixes could be your solution.
	<style>
		.box{
			background: green;
			width: 200px;
			float: left;
			transition: all 1s ease-in-out;
		}

		.box:active{
			background: red;
			transform: translate(3em,0);
		}
	</style>
Check online at the W3School for other ways to animate the transitions, but not's go nuts because the best way to do this is with Javascript, which is on the horizon. For example - how do I change one div by rolling over another? Look up the scary sounding "adjacent sibling combinator".

Lab for week 4

Reading
Pick one of the web sites that you have an account with and read the EULA (End User License Agreement). Write a response. http://techtalk.pcpitstop.com/2012/06/12/it-pays-to-read-license-agreements-7-years-later/