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 (soon)

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.

Sorry I missed the charts last week. This week I have posted both weeks for you. I have been working on a new vertical menu post that will be coming out very shortly. Because I missed last week I should have something good to recommend this week. Well I have not been doing much in the way of musical exploration but I will say that Owl City has some staying power.

There for I am going to set you up with their album this week. It is Owl City, Ocean Eyes. Take a listen on iTunes or however you get your music.

Now the charts.

Top 10 Songs – Oct. 26th

1. Down – Jay Sean Featuring Lil Wayne
2. Whatcha Say – Jason DeRulo
3. Party in the U.S.A. – Miley Cyrus
4. Run This Town – Jay-Z and Rihanna
5. 3 – Britney Spears
6. Paparazzi – Lady Gaga
7. Fireflies – Owl City
8. I Gotta Feeling – The Black Eyed Peas
9. Meet Me Halfway – The Black Eyed Peas
10. You Belong With Me – Taylor Swift

Top 10 Songs – Nov. 2nd

1. Fireflies – Owl City
2. Whatcha Say – Jason DeRulo
3. Down – Jay Sean Featuring Lil Wayne
4. Party in the U.S.A. – Miley Cyrus
5. Run This Town – Jay-Z and Rihanna
6. Paparazzi – Lady Gaga
7. Meet Me Halfway – The Black Eyed Peas
8. 3 – Britney Spears
9. I Gotta Feeling – The Black Eyed Peas
10. Sweet Dreams – Beyonce

Top 10 Albums – Oct. 26th

1. Crazy Love – Michael Buble
2. The Twilight Saga: New Moon
3. The Blueprint 3 – Jay-Z
4. Love Is The Answer – Barbra Streisand
5. The Time of Our Lives – Miley Cyrus
6. The E.N.D. – The Black Eyed Peas
7. Fearless – Taylor Swift
8. Embryonic – The Flaming Lips
9. D.N.A – Mario
10. Memoirs of an Imperfect Angle – Mariah Carey

Top 10 Albums – Nov. 2nd

1. The Twilight Saga: New Moon
2. Southern Voice – Tim McGraw
3. Crazy Love – Michael Buble
4. The Blueprint 3 – Jay-Z
5. The Time of Our Lives – Miley Cyrus
6. The E.N.D. – The Black Eyed Peas
7. Fearless – Taylor Swift
8. Ocean Eyes – Owl City
9. Love Is The Answer – Barbra Streisand
10. Colour Me Free – Joss Stone

Charts are provided by Billboard.com check them out for more information.

Looks like Britney Spears tops the charts again with her song “3″. The only enjoyment I get out of this song is trying to figure out what she is trying to say. The lyrics in my head are probably funnier than the real thing. It is good to see Owl City hit the charts with their song Fireflies. I have heard that song for a while now and really enjoy their album. They have a spacey relaxing sound which really appeals to me.

However that is not what I am listening to this week. That would be The Veronicas specifically the album Hook Me Up. You might know the song “Untouched” which has hit number 17 on some charts.

They have a good beat and dance thing going for them. They and sisters and as such they sing about relationships and girlie topics (some people like that). I don’t necessarily enjoy that sort of thing but the rhythms and beats get me every time. Every song on their album has a different feel and vibe which makes the whole thing easy listening.

Noted tracks – “Untouched”, “Hook Me Up”, “This Love”, “Popular” and “Goodbye to you”

Top 10 Songs

1. 3 – Britney Spears
2. Down – Jay Sean Featuring Lil Wayne
3. Party in the U.S.A. – Miley Cyrus
4. Whatcha Say – Jason DeRulo
5. Run This Town – Jay-Z and Rihanna
6. I Gotta Feeling – The Black Eyed Peas
7. Paparazzi – Lady Gaga
8. You Belong With Me – Taylor Swift
9. Fireflies – Owl City
10. Use Somebody – Kings Of Leon

Top 10 Albums

1. Crazy Love – Michael Buble
2. Sonic Boom – Kiss
3. American Ride – Toby Keith
4. Love Is The Answer – Barbra Streisand
5. The Blueprint 3 – Jay-Z
6. Doin’ My Thing – Luke Bryan
7. Memoirs of an Imperfect Angle – Mariah Carey
8. The Time of Our Lives – Miley Cyrus
9. This Is Us – Backstreet Boys
10. Dear Agony – Breaking Benjamin

Charts are provided by Billboard.com check them out for more information.