Our first PSU will be held on  October 1s 6PM central US. If this is a horrible time for the broader  population let me know because US members on our site are mostly outside the US. Sign up for the event here and also join the PSU group where you will be given the freeware software we will need for the 1st PSU.  

Menu 101

This first PSU will open up the box and see what is inside the PSU menu, also looking at the options for customization. Each session will end with a question and answer period. If you already have some questions on the menu, please post them in the event and we will touch on them in the presentation - see ya there

Take a look at your toaster. Now your DVD player. Next, your coffee machine. They have some solid gold advice for your social network.

It might sound crazy, but all of these appliances have design standards, and the Web is no different. Consider the 'play' button on your old VCR. When users know what that button is, they can recognize it on their DVD players, MP3 players, online videos and more, and instantly know how to use them. 

Changing the Web standards of your network is like forcing your user to learn a new language.

It asks them to give up on ideas that they are familiar and comfortable with, and that means they spend more time learning how to interact with your site and less time actually interacting with it. 

Take a look at your page stats over at crazyegg.com and your Google analytics - You may be shocked at how impatient your users are. No one wants to buy a toaster they don't know how to use. On the Web, that means going over to another site. 

How do you apply these standards to your site? 

- Prioritize.
Your toaster has one giant button to push the toast down and to warm up the coils. That's the first priority. The other controls are for advanced users - those who want to control the darkness of their sliced bread. 

Prioritize your site and think about what they'll most likely be looking for (or what you want them to be looking for) on every page. Make sure that option is highlighted in an easy-to-find way. Let users fine-tune if they want to, but make access and interaction as fast and simple as possible. 

- Stay traditional, even if you don't.
We talked about that big green triangle on the DVD players, the universal signal to users that "this starts the movie."

Design a DVD player without that triangle somewhere and you're guaranteed to confuse

people. 

You may have the next killer site that will take the world by storm, with new ideas and a new architecture all its own. That's great. But it won't matter if no one knows how to use it. If you can use a button, use a button; if you can use a text field, use a simple text field. 

If you have a stunning, simpler idea for how these things can work better, try them out, but do so carefully. Once you understand what users are looking for, you can play with the rules, or present them in a new way. But you must learn what works for your users first, and work to those expectations.


Hopefully all this talk has left you seeing your toaster, and your Web site, in a way that leaves you hungry to improve - or, at least, hungry for some toast. 

The new CSS3 will provide many features that were not available with CSS2 and older applications. While some of these features are still being developed, there are others that are working right now as well.

One of the new features is called "substring matching attribute selectors". There are three additional attribute selectors provided for matching substrings in the value of an attribute.

*[att^=val]
Represents an element with the att attribute whose value begins with the prefix "val". The selector does not represent anything if "val" is the empty string.

*[att$=val]
This will represent an element with the att attribute whose value ends with the suffix "val". Again if "val" is an empty string then the selector doesn't represent anything.

*[att*=val]
Represents an element with the att attribute whose value contains at least one instance of the substring "val". Just as in the other two, if "val" is the empty string then the selector does not represent anything.

Another feature of CSS3 is the ability to manipulate borders. You can play around with border color, border image, border radius, and box shadow applications to customize borders.

**Border-color
At the moment this is only available to those using Mozilla/Firefox browser. By using the CSS code available you can change the color of the border around a boxed set of text. Want the border around your message to be blue, just use the CSS code. Red,yellow, gray, or whatever color you want can now be used to give your borders more style.

**Border Image
This currently works in Firefox 3.1 and Safari. This feature is split into two categories which are border-corner-image and border-image. Instead of using the normal border of any element, you can now just use this feature to change the images around the border. You can change the corners or the whole box if you wish.

**Border Radius
This can be used on Safari 3 and Mozilla Firefox. This function allows the corners on a box to be rounded. You can choose to round off just one corner, or round off all corners of the box.

**Box Shadow 
This can be implemented in Firefox 3.1 and Safari 3+. Color is one attribute you can alter as well as three lengths that can be used. 
1. Horizontal offset of the shadow means that the shadow will be to the left of the box if using a negative offset, or will be to the right of the box when using a positive offset.
2. Vertical offset puts the shadow on the bottom of the box with a positive offset and the top of the box with a negative offset.
3. Blur Radius means how blurry you want the shadow to appear. A setting of zero will mean there is no blur and as your setting goes up the blurrier the shadow will be.

There are also other features for CSS3 that deal with colors. A feature that can be used with Mozilla, Konquerer, Safari 3 and Opera 9.5 is HSL colors. HSL stands for hue, saturation, and lightness. The colors and tunes are now available in a much wider spectrum than they were previously.

**Hue is a degree on the color wheel. The basic values are green is 120, blue is 240, and red is 0 or 360. Different shades are represented by the numbers in between.

**Saturation deals with a percentage value with 100 percent being the full color. 

**Lightness also deals with percentages, with black being zero percent and 100 percent being light. 

HSLA sets the opacity of an element and is currently only available for Firefox 3 beta and Safari 3.

There are also features you can use that apply to user interface. These include box sizing, resize and outline. 

**Box Sizing
Can be used with Firefox and Safari 3. Changes the behavior of the browser in calculating the width of an element. By using the border-box setting the browser will render the box with whatever height and width are specified while also adding the border and the padding within the box.

**Resize
Allows user to specify if a box can be resized. You can resize vertically, horizontally, or both.

**Outline
Currently works in Safari, Firefox and Opera. Offset can be rendered away from the specified element, and the outline will be another box surrounding the border. 

These are only some of the features available with the new CSS3. There are also newer features that are presently in the works as well. 

Well, we're almost ready! Still nailing up the shack here and there, so if you see something off, please to shot me a email. Prosocialgo.com was created to service social go owners that want to expand and push the boundaries of socialgo networks. Though we will be providing much material this is also a group effort, and I hope you will jump in here with us and play in the sand box. We have big plans for our members and potentials alike (more so for members). First off is the BLOG.

The Blog
This is the place you will come for the latest news and any rumors we can squeeze out of the guys over at widget laboratory, the premiere widget developer for socialgo. We will accept articles from members that fit our standards, and would love to find some good guest or staff writers. We will also be posting detailed tips at least once a week that may or may not correspond to our podcast. Hey! That reminds me... the podcast. 

Podcast
Once a week you can look forward to the Pro socialgo Podcast, It's not up at the time that I'm writing this, but you can catch a sample edition on the welcome page (scroll down a bit). The podcast is made to compliment the information you receive here as a member and also to gain new recruits. It will cover the basics of creating a network on to CSS and graphics. We hope to wade in some deep waters on the podcast, but the real meat is for the members.  

Tutorial Series
Once a month we will release a in-depth tutorial to members only. This series will cover many aspects of design, and CSS. We want the Podcast to carry most of the CSS load and the Tutorials the graphics and design. We will go through very technical aspects of apps such as Photoshop, Illustrator, Flash and Fireworks but also have more Imaginative design casts that will focus on the fundamentals of design. 

 
Marketing Insider
With the help of our, as now unannounced partners, we will provide our members with a monthly insider magazine. This will be a PDF that follows a linear Marketing plan for our Networks. There will be lots of help in link building, social marketing, and even some on profit and how to get it. If you miss a edition, no worries just pick it up at our store for free. 

Pro Store
Our store will hopefully launch a few months after Pro socialgo's launch. The members will receive  a 15% discount on all purchases. But what will there be to purchase? I will be selling all my son's toys and my wife's angel collection at bargain prices. :) JK. Actually we will have Template starter Kits, Notable books and reference guides, DVD training, HTML slicing and code snips all to directly impact your network. 


If that's not enough, there will also be give-aways and door prizes galore, Site reviews and my ugly avatar's mug will be hanging out around the forum trying to answer as many questions as I can and still get work done.

I hope you join us and help build a truly useful community.

-ezra
 

I've had allot of questions from other Socialgo'ers that smelled strangely of my early days and I want to scream stop! go back to go and collect $200. I decided to create a ground zero fundamentals series, and I hope it's helpful to those brand new to code, and those looking to sturdy their foundation.

A huge mistake I made, and still constantly make, is the lust for instant gratification at the expense of knowing what I'm consuming. Translated to XHTML and CSS this seemingly ambitious drive to get to the good stuff, causes what I call Rat's nest Code. Hey, but it does the trick right? Maybe, kinda like duck tape does the trick.

The problem with racing down the road with out knowing what all the road signs mean is you'll eventually collide head first with a pedestrian, and that pedestrian is usually one of your pissed off users, a client or a boss. How this happened to me, countless times, is I got the site going, looking good -- by the skin of my teeth. Then 4 months later, after I had done twenty more sites, tragedy struck. Something goes wrong, someone sneezed on your CSS or something and you got to go rescue the site. Well I would open up those four month old sites and nearly collapse. I didn't remember what I did, or how I did it. I had ripped most of the code from other sites and the rest ducked taped together with 20 different tutorials from 20 different versions of how to code. I can't tell you how many cuss words I learned back then, some of them would make the 18+ sights blush.

For you as a socialgo network owner,it probably will mean loss of members, loss of profits, loss of confidence.

I've only been at socialgo for a short time, and I have already broken my sites, in a big way, accidentally. ( Usually   because if you have several networks, whenever you go to admin it still pops back to your first network on the list. well, I'd go in the wrong network and start deleting stuff and so on..)

The malfunction, for me at least, was simply that I didn't know what the hell I was doing and didn't want to admit it. I'd learned how to steel code and make it work, but I never learned how to write code and understand how it was supposed to work together.

I finally forced myself to re-read all those books on my shelf and pay attention to the 90% I skipped over.

(By the way, after my little sermon, my code is still ratty... I'm working on it)

This is the real beginning fundamentals, so if you know all this please skip to the next blog.

SIMPLE SELECTOR

A HTML page is made up of ELEMENTS and ELEMENTS are different structures like buildings.

Here is a

ELEMENT:

With a CSS SELECTOR, I can grab hold of a TAG by it's NAME Like this:

 p  {}

Thats it!

p is

's name. This is a SIMPLE SELECTOR because it's so damn simple. Now I can tell this p what to do with CSS.

ID SELECTOR

But, hell there are like two thousand

's in my network, what if I just want to grab hold of one element that talks about my dog's breath. Just like I my State ID refers to me in a broad term saying that I am a MALE- and then in a specific term, that I am EZRA. The element works the same. I just have to give it the specific name, we'll call it Hara because that's my dogs name.

 #hara {}

That's it! This is a ID SELECTOR.

Class SELECTOR
Now, lets say my Network is all about dogs and cats and I want all the Cat Elements to be orange and the dog Elements to be blue. Because dogs and cats are two different CLASSES of animals; I have to give them a CLASS so instead of a specific name ID like

I'll give them a class so I can call all the dogs and cats:

Think of it this way:

 = animal
 = dog
 = my dog

now I'll call the cats with CSS:

.cat {}

Thats it. This is a CLASS SELECTOR.    

Wrap it up Now
To close it all up I'll show you what it looks like when I order my dogs and cats to be orange and blue. We'll do this by commanding the selectors with Properties and Values which we will be covering in the next lesson. Here is a peek at how it looks all together:

.cat {

 color: orange;

 }

 
.dog {

 color: blue;

 }


and i'll make my dog pink.


 #hara {

 color: pink;

 }