Are you a Photoshop CS4 user thinking about upgrading to Dreamweaver CS4 for web design? If so, you will find that the new Photoshop CS4 features for the web will make your web developing task faster and easier. The most important thing to consider is time when you are developing, editing or updating a website. Time is of the essence. Inserting or changing CSS code can take a lot of time; if you have done any web design you know this is especially true if the style sheet is very large.

Photoshop Dreamweaver CS4 has a new and improved interface. Most of the previous features are still there, but they have added a wide selection of predefined workspace options. The new interface gives you more flexibility and control. You can personalize your workspace. 

The new Related Files and Code Navigation feature allows easy access to both the CCS source code and the parent page. This is done by using the Related Files bar. When you click a file in the Related Files bar you will see the CSS code in the Code View and the parent page in the Design View. This feature makes editing or adding code extremely easy. In the Design View you highlight the desired item that you want to edit or change, and Dreamweaver CS4 will search and locate the associated CSS source code and highlight it. You will see the results in the Code View. This is a powerful feature because you can make changes and examine them in the Design View. Manually searching for CSS source code can be timely, but this new feature eliminates that process. 


The Code Hinting feature for Javascript frameworks and AJAX will give code hints to help web developers. This makes the process much quicker, and errors are dramatically decreased.

The new Live View feature is a web developers dream come true. Previously, after editing code developers needed to click a shortcut key to view their changes in a web browser. The design view in Dreamweaver looked different than it would when displayed in a web browser. Developers needed to toggle back and forth while editing code. Now, with Live View web developers can see the changes within the Dreamweaver CS4 application as they will appear in a web browser while they are working. The changes made to any code is simultaneously updated in the design and displayed.

The In Context Editing feature is useful for web developers who would like to allow end users edit ability on particular parts of a web page. It is a web based service that enables the end user to access the service and update or change web page content.

Three of the best new features in Photoshop CS4

Content-Aware Scaling allows you to resize or change the image format from horizontal to vertical without bending pixels and distorting your image. It only scales low detail information, and this is done by removing pixel “seams” of unimportant areas. 

New 3D feature adds three-dimensional capabilities. Users can create 3D objects from scratch, change a 2D image to 3D object, and paint on 3D objects using an advanced 3D work area that has a full set of 3D tools. 

Vibrance Feature is used for adding saturation to weak colors, but it does not over saturate colors that are strong. The new “protect skin tones” feature is fantastic, although the Vibrance is changed there is very little, if any, changes made to skin tones.

The Photoshop CS4 new features and the new Dreamweaver CS4 features gives users a powerful suite of tools that will increase productivity, and save time.

How Should You Use Ads For Your Site?

The question of when and how to use ads in your web based business is such a tough one! I have struggled endlessly with it myself over the last few years. I have read what other blog owners have to say about the issue, and I've found that there are many schools of thought on this. After considering all the angles, it seems to me that nobody is really wrong. It really all depends on what works for you and for your site, and you can't figure that out until you try a few things, can you?

I have heard from people who think it's best to start with lots of ads, right from the very beginning.

Some readers don't mind that at all, realizing that the blog owner has to finance the blog somehow

Some readers don't mind that at all, realizing that the blog owner has to finance the blog somehow and that ads are a necessary part of that. Unfortunately, I have noticed that quite often these readers also have sometimes trained themselves to completely ignore the ads, and will certainly never click on them or consider a donation to the blog. 

Other website owners think that it is worth skipping the ads completely in the beginning because they are afraid of running customers off. Well, I do understand that way of thinking and it is quite true that some people will see one ad and run. However, if you begin with no ads at all and then suddenly put them on your site, it can drive customers away equally as quickly. Starting off with no ads will not work too well in my opinion, because after all we all need to make a living!

I have found that a good way to deal with the question of ads is to use them, but to do so wisely and at a measured pace. Of course plastering your site with ads from day one will be a bad idea, especially when you think about the fact that we all want our sites to be inviting and friendly. My favorite way to do this is to put just a few select ads on my site, choosing the more unobtrusive ones in the beginning. I have found that 
partnership ads, or "sponsor" ads, are a really good way to dip your toe into the blog ad pool without having to dive in all the way. You could even consider putting up a few reviews or slight inline links that your blog readers are well suited to.

Another way to get financial support for your site is a donation button, accompanied by brutal honesty. 
I think that a donation button that just says something like "Please help defray my costs with a financial contribution" is not the tone that most readers respond to. For one thing, it is a little boring. It is also not that personal, and as most site owners know, it is really important to have a connection to your readers. When your readers feel as if they are your friends, they are much more likely to offer financial support. Maybe a brightly colored donation button that says something along the lines of: "I need money to feed this blog - it has taken over my life!"

"I need money to feed this blog - it has taken over my life!"

Another great little trick to get some quick income is by making it relevant to your readers.
After all, they come to your blog for your unique content. Maybe you can tell readers that you will be able to provide more content and options if they contribute one dollar per month. I know, you are thinking it is not enough to really help. But, before you say that a dollar is not enough to accomplish anything, consider the volume of customers the web offers. A brick and mortar business may have 1000 customers who are regular buyers. With the Internet, that number is usually tripled or more. Those small donations can really add up when you are dealing with thousands of customers.

It can be a little bit tricky to determine exactly how to use ads with your site. I know that it took me a while, but I finally got there. If you can hit that middle ground, you will get the same results that I do: Happy customers who donate regularly, and a popular site.

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. 

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. 

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

Is it just me? Did I miss something? I've been known to do that and anounce a new socialgo feature after it had already been discontinued! haha.

The New Profile Designer

Well it's here.. the new Socialgo Profile designer. Now we can just throw in the towel and become mini myspace? SG Forbid! this thing allows you to tell your members what they can touch and not touch... which on my site there will only be a few options - cause i'm that way.

instal and configure

You will find the little doodad in your SG widget box on the right hand side of your Layout Manager as usual. You need to drag it to your "I" zone at the very bottom then double click (this feature doesn't seenm to work in the ne safari) or click the edit widget up top and you get this..

look at all those Options!

Now if you check all of them your members can do a beautiful page, effecting many parts such as the content boxes, the header font, color, background, nav, nav color, background image, and the list goes on. Just look at what your site will look like.. isn't it exciting! 

How it works

Once you configure your new shiney widget your members will see a new button on thier profile page right there with the other configure buttons.



Now, the widget kinda messes up your site when it opens, and it has a few bugs at the moment that I won't go into because I'm sure SG is busy fixing them as I write. you'll the drop down at the top of your page, and there you can select eather color or advanced.





Color takes care of Color;) and advanced is your background images.It's pretty straight forward. The changes happen as you change them, close the widget and your done. Here is what I did in my profile.

If your trying to put a logo on one of our templates this will work for most, you will just need to adjust the height.. don't mess with the width because it already spans the page. As you see I use the !important to overide anything in our original style sheet.. (comes in handy) One More thing for the love of  Al Gore's green earth don't try to add headers and logos through the SG network designer.. it is not made to work with templates from the template store (yet).

 

Ya baby... all right there all the time.. check out this new toolbar we've been working on that tidys up all the waisted space and into a nice tight horizontal row. 

 


It covers your search bar, add list, managed account, My stuff (like my topics, my blogs etc..) and your mail inbox and all custom icons and graphics. sweeww all in about 33px height 0:



Does it work though? well.. i certainly hope so, i was hired to free up some side bar real-estate so we'll find out tomorrow when i start testing.

A few problems with labtabs have come to my attention (especially with my templates :0) But also with some "objects" that are added bellow the menu such as flash banners/ads. Not all the time, and I'm not sure why, but your lab tabs will show up behind your flash or OBJECT. A simple fix that I will be rolling out in my templates is this - z-index:

Please visit our new PSU forum and give us your wish list of topics for the soon to come ProSocialgo University Broadcast classroom. We have some great guest lined up on topics including SG CSS, General Business, SEO/Marketing and if there is a demand AJAX/PHP and flash design. These will be very small intimate classrooms to keep our heads from blowing up. You can email us at psu@prosocialgo.com or visit our forum to vote on the topics you want first.