The Aperture | The Shutter |  The ISO

Welcome back for the third and last part of the beginners guide to your camera series. This part I will focus on the ISO setting and how it effects your photographs. If you have not read the other parts in the series I recommend you do so. I explain a few basics as well as the aperture and shutter mode.

The ISO

ISO is a numbering system created by the International Organization for Standardization to represent the sensitivity of film negatives. Film sensitivity may also use a scale created by the American Standards Association or ASA however most digital cameras now call the setting ISO. There is a bunch of complicated math that goes into figuring out the ISO number for a sensor or file negative. However your digital camera will come with several predetermined levels for you to select.

The lower the number the less sensitive the sensor will be in your camera. The trade off for using a low number is that your images will contain less noise. This is the same for digital photography as it is for film photography. Film negatives work by suspending silver particles in an emulsion. Those silver particles absorb light and when put through a chemical process produce a film negative. The way to create a most sensitive film negative was to create larger silver particles. Those would then absorb more light faster and allow for less exposure time. The larger particles created a grain or noise in images because they are more distinctive.

Enough about film, you get the same effect when you crank up the ISO on your digital camera. The real difference is that film noise can really add style to a photograph where it just looks bad in a digital image. Most cameras use a smoothing / sharpening algorithm to eliminate the noise after you take an image. That the noise ends up taking away more than it adds.

Using the ISO

Unlike in the previous articles there is no ISO mode. If you can change your ISO it will be in a setting or menu. Most cameras also have an automatic mode however I recommend keeping your camera at its lowest ISO setting unless you will be needing the higher sensitivity. The pros of keeping your camera at a lower sensitivity is that you will get cleaner and smoother images. You will get the sharpest images your camera can produce. As you start to crank up the ISO you should notice the slow addition of noise to your images. Most cameras have a point in the scale were things get exponentially worse. This comes from the way the ISO works, each notch in the scale is twice as sensitive as the one before it. So ISO 200 is twice as sensitive as ISO 100.

How the ISO effects images

Because the ISO makes your camera more sensitive to light it effects all the other settings on the camera. With a higher ISO you can shoot at faster shutter speeds with the same aperture. This would work well for indoor images or low light situations. If you know your camera does pretty well between ISO 100 and 800 then you can crank up the ISO while shooting indoors. This will allow for a faster shutter speed and create images with less blur. Essentially it acts as if your camera is receiving more light. This is going to greatly depend on what sort of camera you have. Digital SLR style cameras handle higher ISO settings better because they normally have a larger (in scale not megapixel) sensor, allowing for more surface area, than a point and shoot camera.

The ISO is not as important to understand over the other settings described previously. Once you have a handle on the shutter and aperture you will notice the effects of the ISO more.

I hope these articles have helped you better understand your camera as well as take better photographs. This is just be beginning, the real learning comes from experience. So get out and play with the settings, take several photographs of the same thing but only change one setting. Try using the full manual mode and have some fun.

The Galaxy Tab has been surrounded in secrecy for some time now. Samsung has recently unveiled the product to the public and there are several interested decisions that were made. A quick run down of the hardware and software. The Tab is a 7 inch LCD tablet with a rectangular design. It has a front facing and rear facing camera, all the accelerometers you expect and cellular connectivity. The Tab comes in a 16 gig and 32 gig version and they all come with an SD card slot for expanded memory. The current version also runs Android 2.2

Lets break down the market for something like this. Large companies only put out devices that they think will sell. That means they think one of a few things, there is enough market demand to add another device, their device is better than the competition or there is no competition. There is a market for tablet devices but Samsung is not the only one in it. So who is Samsung competing with? I think most people would agree that this is in the same market as the Apple iPad. It is in the same form factor as the Kindle and the Nook as well. Although I believe the functionality is much different.

The first question I have is why did Samsung go with a 7 inch screen? Did they think that a wildly successful 9.7 inch tablet was to big? At least in the smart phone market it seems like larger screens are becoming more of the norm. I believe that holding a tablet that is more than 10 inches seems like it would be to large. But I wonder how much research Samsung did on the screen size. It is such an important part of a tablet, it is the first thing you notice. You are not going to put either the iPad or Tab in your pocket, they seem to have equal portability. I will say that the iPad seems like it could be more of a two handed device while the Tab appears to be more of a one handed device. Maybe Samsung was willing to risk those customers who want the larger screen for product separation. Give the Tab a 10 inch screen may have put off customers who thought they were coping Apple.

My second question is more of a concern. What makes the iPad so great is the App market. Because Apple makes the iPad and is in charge of the App market they could create a whole new section of tablet specific apps. The Tab runs Android which is not run by Samsung. The Android market place is full of great apps but how are those going to look on the 7 inch screen. iPhone apps on the iPad look very pixelated and do not scale well at all. From what I have heard Google’s app creating tools already support the higher resolution but will developers get on board with this. Will there need to be a special view in the Android app market to see higher resolution apps.

It seems like there are a bunch of questions still unanswered. I am sure that Google knew about this device well before we did so they must have an opinion. Most of us can agree that what really makes a mobile device are the apps. Samsung has provided several of it’s own apps and it’s own apps store but will that be enough. I am not sure if Samsung even lets third party developers in their own app market. I hope this is cleared up as we get closer to the American release. I believe the Tab looks like a very appealing device. Something that could compliment a laptop when traveling on the road.

Your thoughts? The Tab is being released over seas first and will later come to America, maybe with the announcement of Android 3?

A lot of things have happen in the tech world since I last posted. Apple has updated their MacBook pro line up with Core i’s, the iPhone 4 was announced and released, Microsoft demoed Kinect and released a new slimmer Xbox, Sony announced their “Plus” online subscription package, Hulu is testing a paid version and is expanding to new devices, I could go on and on ( I guess that means it has been awhile). The problem is I don’t always have time to write about all these special events. I do however sent links and updates on my twitter feed (twitter.com/7ontheline), so if you are in the dark about the previously mentioned events then please follow my twitter feed and stay in touch.

I hope to make more time to write articles. I have several tutorials and informational pieces I want to get on here. I also am not a Palm Pre owner anymore, the Pre started to really feel sluggish and outdated after only six months. I still really love WebOS and think it executes as a mobile operating system very well. I want to see Palm pair it with a phone that has the specs of my new  device, the Sprint EVO. I am currently an Evo user with Android. I got it on launch day and am really happy with the performance so far. I may do a write up at some point but there is already a ton of information available online.

That is all and see you back here shortly.

You can check out Apple’s web site for some more detail or continue past the break for some more discussion.

Steve talked about their implementation of multitasking being the best on any phone. However Steve did not define what multitasking is to Apple. Steve is not talking about running two different applications at the same time. He is talking about building a structure where applications and run predetermined processes while suspended. There are seven different things apps can do while suspended:

1. Play music
2. Continue a VOIP session
3. Get your location through GPS or cellular triangulation
4. Receive push notifications
5. Create local notifications
6. Finish a task
7. Continue from a suspended state quickly

If your idea of multitasking is outside of those seven things then you are out of luck. I am interested to see if an IM client will be allowed to receive IMs while being suspended and when you switch back will the messages be there or will they have to be pulled down. Apple talked about how Skype will keep you logged in while suspended in the background and allow you to take calls still. Also the additional power to run special features like multitasking will not be fully supported in the first generation of iPhone / iPod Touches. No word on pricing either.

I think there are a lot of questions about what is possible and what is not. The development kit was released today and I am sure answers will be provided shortly.

There were several other things Apple talked about today, including their venture in the advertising. There is not a whole lot on information about iAd other than they will get companies to provided the ads while splitting the profits 60 / 40.

More information will be added as it comes in. Look for the full release this summer.

The Aperture | The Shutter |  The ISO

Welcome back for the second part of the beginners guide to your camera series. This part will focus on the shutter speed and how it effects photographs and your flash. If you have not read the first part in the series I recommend you do so. I go over some of the basics of selecting modes on your camera. I also explain the aperture mode and how to best use it.

The Shutter Speed

The shutter mode on your camera is most often represented by the letter “S” or “Tv”. When using this mode you tell the camera a specific shutter speed to use and the camera does the rest. Often the shutter speed is displayed as a large whole number. You can think of this number as itself over 1. So if your camera is displaying 250, in reality it is 1/250 or two hundred fiftieth of a second. Unless you are shooting in a low light environment without a flash your shutter speed should be less than one second.

What does this mean specifically? This number is telling you the amount of time the shutter will be open during the exposure. The larger the number the less time the shutter will be open (1/60 of a second vs 1/800 of a second). This has several effect on your final photograph. First if your shutter is open longer the more light it will let in. This can lead to brighter photographs in very dark environments. However we also know that the aperture has the same effect. If the aperture is open wider it lets more light in as well.

The shutter speed effects your photographs in one other way as well. It can allow you to better “stop time”. If you have a fast moving subject and you want the photograph to be sharp then you should use a fast shutter speed. With the shutter open for a shorter amount of time, your camera is exposed to less movement of your subject. A good example of this is to take two photographs of moving water (like a waterfall or from a hose) outside where you can get plenty of light. User shutter priority mode and take one photo with a slow shutter (around 1/30) and another one with a fast shutter (around 1/1000). Assuming it is a sunny day you should get two similarly exposed photos but with very different looks of the water.

The same idea of motion blur in your subjects can be translated into motion blur from camera shake. The same way a slow shutter speed can create blur in fast moving subjects, it can also create blur from you moving the camera while the shutter is open. Camera shake blur most often happens when you try and take a photo indoors without a flash. Normal room lighting is not adequate enough for your camera to use a fast enough shutter speed for hand holding. Some people have a steady hand and can hold the camera very still so the specific speed at which you start to see camera shake blur will be different from others.

The Flash

This leads to my final thought on shutter speed. You may have noticed when you connect a flash or use a flash with your camera you are limited to a maximum shutter speed. This is called your camera’s maximum flash sync speed. I am going to get a little technical for a second. The shutter on most digital cameras are created with two collapsible dividers, one on each side of the digital sensor. The shutter speed, up to your max flash sync speed, is created by the first divider opening and exposing the sensor for the correct amount of time and the second divider closing just before the time as elapsed. This allows the whole sensor to be exposed at one time. Speeds faster than the max sync speed are created by the first divider opening but before it finishes the second divider starts to close on it’s tail. This allows the sensor to be exposed for the correct amount of time however the whole sensor is never exposed at the same. Instead only the slit between the dividers exposes the sensor as it passes.

Why does this matter when using a flash? Well your flash bulb is only lit up for a very small amount of time. So this means that if you use a speed above your max flash sync the light from the flash will only be exposed on part of the sensor as the shutters move across (or not at all depending on if it fires to soon or late). This also means that when using a flash changing the shutter speed does not effect the brightness of the flash. If you use 1/60 or 1/200 the same amount of light will be put out from the flash. However you can use your aperture to effect the brightness of your flash, because the aperture constricts the opening of light to the sensor.

I could talk about flashes a whole lot more but that is for another article. If you have any questions please leave a comment and I hope this helped you with the basic understanding of shutter speed.

So why would you want to switch. The average internet user probably won’t. Depending on your ISP and your location you could see an improvement in the time it takes for you to reach the DNS servers and for them to respond. We are talking about small amounts of time being saved however you probably make hundreds of DNS calls a day. Also if you are like me and don’t understand why your browser has two text entry bars at the top, you can get the search functionality from the URL bar (although this probably already happens).

All of this is great but what I really want over my ISP DNS is reliability. I want a service that will always be up and I think Google can promise that as well as any other company could.

In the end this is another way for Google to gather information and in reality a pretty good way. Now they can track what straight urls people are going to without going through search. It really fills in a whole data set they have been missing. There are other services that do and promise the same experience. OpenDNS comes to mind. I have used it in the passed without problems.

Check out the service and let me know if you have tried it out.

Word on the street is that the Barnes and Noble e-reader will be available in the store on November 30th. That is just three days short of the famous Black Friday shopping extravaganza. If you try and pre-order a Nook online you will be met with a message telling you it will be shipped on Dec 18th. I find it strange that B&N would be selling the Nook three weeks early in their brick and mortar stores. May they are trying to take advantage of the one thing they have over the competition, a physical store. Allowing people to see / play before they buy is going to help the Nooks chances. More on the Nook Here.

Palms new phone, the Pixi, is hitting shelves Nov. 15th (this Sunday). The Pixi will be Palms second device carrying their flagship Web OS. The device is smaller than the Pre and has its keyboard on the front instead of a slide out. The phone looks and feels like a Centro replacement and a welcome one at that. The Pixi is a candy bar phone with a full keyboard and a 2.63″ touch screen. It is priced at $100 but I feel like that price will come down very shortly. It did not take long for the price of the Pre to drop dramatically and I think the same will happen with the Pixi.

I have seen several articles and videos that say the Pixi’s performance is somewhat lacking. The browser can hang at times while loading pages and the scrolling can be laggy in general around the OS. Some of these problems can be contributed to the slower processor and the overall lower spec of the Pixi compared to the Pre. However I want to point out that Web OS does not take advantage of the graphics processor that is available in both phones. Basically this chip is sitting there doing nothing while the cpu handles all the graphical duties. Palm is working on a solution and when that hits I believe most of the laggy issues will be resolved. In the end the Pre has the same specs at the iPhone 3Gs but does not feel like it from a consumer view.

Enough of that, here are some links to more in-depth review of the Palm Pixi.

Engadget Review

Phone Arena Review

Gizmodo Hands On

Precentral.net Reveiw

Enjoy.

I want to show how a vertical sliding menu can take on some of the features WordPress has implemented but also keep it simple to explain. I did not want to use any images to style the menu and keep everything as clean as possible. What I ended up with was 50% css, 25% jquery and 25% html. I used a few advanced CSS selectors and attributes (like border radius) to refine the effect.

Take a look at the final product here and read on for the explanation. Like always I have put the CSS and jquery in the same file to make it easy for you to inspect and download.

Lets start out with the base HTML. We start with a simple list

<div id="menu">
 <ul class="navmenu">
   <li><div class="menutop"><a href="#">Posts</a><div class="toggle">+</div></div>
     <ul class="submenu">
       <li><a href="#">Add New</a></li>
       <li><a href="#">Tags</a></li>
     </ul>
   </li>
   <li><div class="menutop"><a href="#">Pages</a><div class="toggle">+</div></div>
     <ul class="submenu">
       <li><a href="#">Add New</a></li>
       <li><a href="#">Edit</a></li>
     </ul>
   </li>
   <li><div class="menutop menusingle"><a href="#">Comments</a></div></li>
   <li><div class="menutop"><a href="#">Users</a><div class="toggle">+</div></div>
     <ul class="submenu">
       <li><a href="#">Manage</a></li>
       <li><a href="#">Add New</a></li>
       <li><a href="#">Profile</a></li>
     </ul>
   </li>
 </ul>
 </div>

I start by wrapping the whole thing in a div with a class of ‘menu’. Then everything else is nested unordered lists. Let me go over the rest of the class names.

navmenu

This is the class for the top most unordered list.

menutop

This is given a div within the line items that will be displayed as visual headers for each section. Wrapping your links inside of a div is only necessary for the heading line items.

menusingle

This is a special class applied to the heading line items that will not have a nested list.

toggle

This class is applied to a div tag which is inside the menutop div. This allows you to link the header title to a page while the toggle div is clicked to expand the list.

submenu

This is applied to the ‘ul’ tag of the nested lists.

What really makes the list look nice is the CSS.

 /*Toggle Area*/
 #menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px solid white; border-left:1px solid #E0E0E0; color:#999;}
 #menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}

 /*Menu Setup*/
 #menu ul{padding:0; margin:0; width:150px;}
 #menu ul ul{border:1px solid #CCC;}
 #menu ul.navmenu li {margin:0; list-style:none;}
 /*Links*/
 #menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
 #menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
 /*Heading Outer div*/
 #menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
 /*Header Links*/
 #menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
 /*Header Link Hover*/
 #menu ul.navmenu .menutop a:hover{color:#333;}
 /*Removes white border for the first header*/
 #menu ul.navmenu li:first-child .menutop a {border-width:0px;}

 /*Single Menu Width Fix*/
 #menu ul.navmenu .menusingle a{width:140px;}

 /*Border Radius and Special Border Width*/
 #menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
 #menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
 #menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
 #menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;}

Lets break it down. There is a lot here so I am only going to hit on each area.

Toggle Area

This sets up the styling for the area with the “+” and “-”. Because this is floated to the right of the heading div it needs a width and it will be used as a click-able area so I added the pointer when you roll over it. The line that uses li:first-child only selects the first line item within the ul.navmneu selection. That this way I can remove the white top border for the very first header

Menu Setup

This is the basic stuff to reset the margin, padding and to set the list style to none. I also add a border around the nested lists so that they create some separation when opened.

Links

Nothing to special here. I make sure to apply all the padding that I want for each line to the link tag. That way when I apply a hover style I can change the background color and the whole line will change.

Heading Outer Div

In order to get the appropriate border around the menu I decided to let each heading area have a border and then the nested list get their own border. This area not only applies the border to just the sides of the heading div but also sets it’s width and overflow. The overflow is important because the items within the div will be floated so the height will not be calculated correctly without the overflow setting.

Heading Links

This area sets up the links within the heading section. The width is set because the item is floated. Remember to add in your padding and border widths when figuring your widths.

Single Menu

I wanted to show the flexibility of coding for different situations. I made sure to take into account if a menu heading will not have any sub links. This sets the width correctly thinking that the toggle area will be removed.

Border Widths and Radius

This area has a lot of extra code for the rounded borders that look nice in Firefox and Webkit. However it also creates the top and bottom border that completes the border around the whole menu. I am using :first-child and :last-child to select the top and bottom header items. As a special note none of the border radius styles will work in IE, which is no big deal. However the :last-child also is not followed by IE but I have a fix for that in the java code.

I tried to create something that was usable out of the box but still very simple. If you are having trouble understanding the CSS I recommend getting Firebug for Firefox and using that to see what CSS is effecting what area.

For the javascript I am using the Jquery library and it looks like this.

if ($.browser.msie){
   $('#menu ul.navmenu li:last-child .menutop').css('border-width','0 1px 1px;')
 }

 $('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide();    

 $('.toggle') .click(function(){
   if ($(this) .hasClass('toggle-open')) {
     $(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250);
     $(this) .parent('.menutop') .removeClass('menutop-open') .addClass('menutop-closed');
   }else{
     $(this) .parent('.menutop') .removeClass('menutop-closed') .addClass('menutop-open');
     $(this) .removeClass('toggle-closed') .addClass('toggle-open') .empty('') .append('–') .parents('li') .children('ul') .slideDown(250);
 }
 })

This all within the normal doc.ready function that starts up the Jquery code. I first start out with a simple fix for IE not following the :last-child selector. I thought if IE does not support it I bet Jquery still does and this works. I check to see if the browser is IE and then apply the style as an inline element.

Before proceeding I need to explain a little about how the menu is going to work. Basically the java code will check for any toggle divs with the class of “toggle-open” and then close all the menus where the open class is not found. This is also how the java code will know if a menu is open or closed and how you can style items depending on if they are open or not.

$('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide();

This line looks for all the items with the class “toggle” and then looks to see if that item has “toggle-open” if not it finds the previous line item and then the next ul tag and hides it. We could have just hand coded in to hide all the sub menus before hand however this will allow those people without java enable to still view the contents of the menu. Also this allows you to specify if a menu is going to be open or not before the java gets to it.

The next java line is a click function that makes the sub menus slide open and closed. It starts with an if statement that looks to see if the toggle element has the class “toggle-open”, if not then it knows the menu is closed.

$(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250);

The next line is used if the “toggle-open” class if found and the menu should be closed. “This” refers to the clicked item. So it removes the open class and adds the “toggle-closed” class. It then empties the text held within the toggle div and adds a plus sign. Then the parent line item is found and the next ul tag after that. Finally it slides up the sub menu.

The next line that adds the open or closed class to the menutop div is just for styling and I do not use it here. This would allow you to style the whole heading area for each section depending of if they are open or closed.

After the else statement the code is just the opposite. The only special thing is instead of adding a plus sign I add an “ndash”. This looks better than the minus sign but you can change this to add whatever you want or not add anything if you are using background images.

That is it. It seems like a lot of code for something so small but having a menu that is easy to use and easy on the eyes can go a long way. Please leave any questions or comments down below and thanks for reading.

Check out the final product in the demo.

In the next installment I will talk about how to set cookies in order to remember what menus are open between page views and also and easy way to create active styling for the current page.