All Web Design Info

20 Chrome Extensions for Web Designers & Developers

harisree782@gmail.com (Mariam Williams) — Wed, 28 Jul 2010 07:02:00 +0000

We take a look at 20 of the best Chrome extensions for web designers and developers. Rather than cover the ones you'll find in every list, we've concentrated on some lesser known ones which are every bit as useful. Give them a go.

Considering that Google Chrome was only released in late 2008, the speed at which it has become a viable competitor to Firefox is quite astounding. While Firefox is still the number one choice for most web design and development professionals, thanks to its superior number of add-ons, Chrome is snapping at its heels and could soon become every bit as powerful.

While you might very well be resilient to the idea of switching lock, stock and barrel from Firefox to Chrome, especially if you've spent years tweaking your browser environment to your every whim, it's very important that you give Chrome a try, to experience its potential benefits and understand what other people are using.

Below, we take a look at 20 of the best Chrome extensions for web designers and developers. Rather than cover the ones you'll find in every list (such as Firebug Lite, Pendule, Aviary Screen Capture, Speed Tracer and Lorem Ipsum Generator, all of which come highly recommended), we've concentrated on some lesser known ones which are every bit as useful. Give them a go.

1. Eye Dropper

Eye Dropper lets you identify any color used on any website that you're viewing. Simply click on a pixel and you'll be provided with the associated HTML color code and RGB levels.

2. PlainClothes

With PlainClothes, you have complete control over the font style, font color, background color and link color (unread and visited) for the page that you're viewing. You can preview different color schemes and combinations to see how they work.

3. FlashBlock

FlashBlock does exactly what it says on the tin- it blocks Flash elements on a webpage, lowering memory usage, reducing CPU cycles and getting rid of annoying ads. If you want to load some Flash elements and not others- you can- no problem.

4. MeasureIt!

MeasureIt! proves that the simplest extensions are often the handiest. It lets you draw out a ruler onto any webpage to measure the pixel width and height of any element.

5. LastPass

Web designers and developers visit more websites than anybody else, meaning they're more likely to have a ridiculous number of passwords to remember. LastPass is a completely secure password manager and effective form filler, which lets you import passwords from other storage vendors like RoboForm.

6. Chrome Sniffer

An absolutely crucial extension for all web designers and developers, Code Sniffer lets you inspect the framework and JavaScript library running on the webpage you're viewing.

7. Google Tasks

This extension is useful for everybody that uses Google Tasks. It makes Gmail, Google Calendar and iGoogle accessible at all times, from any webpage.

8. Color Picker

Ideal for all web designers, Color Picker is a feature-packed color editor which gives you the Hex color code and RGB color values of any clicked color, as well as letting you adjust hue, saturation and balance.

9. Domain Availability Checker

Domain Availability Checker does exactly what you'd expect. It lets you check the availability of domain names straight from your toolbar, so that you don't have to navigate to other sites.

10. Pixlr Grabber

Pixlr Grabber lets you take screenshots of web pages (full page or selection), sharing them with others and modifying them using the Pixlr editor. If you need to take a screenshot in a hurry, this is the extension for you.

11. Web Developer

This popular Firefox extension, now available for Chrome, adds a toolbar button to your browser that's packed full of useful tools for web developers. You can Disable Styles, View CSS, Edit CSS and so much more.

12. Ibrii

Ibrii is an extension with social networking at its very core. Users can take snippets of pictures, text and even video from web pages before sharing them via Facebook and Twitter. You can even mix videos, images and text from different web pages into a single note.

13. IE Tab Classic

This extension lets you run Internet Explorer in Chrome, so you can see how web pages appear in the Microsoft browser.

14. Window Resizer

When you're making or researching a website, you're going to want to know how it will appear on screens of various sizes. If you don't want to go out and buy a monitor of every imaginable size, you can use Window Resizer- easier and much cheaper! You can even see how a webpage will appear on a mobile.

15. JavaScript Console

A little experimental, but practical all the same, this extension can be used by developers to carry out simple JavaScript prototyping on any webpage. It's similar to Greasemonkey, the Firefox extension, but not quite as goodÉ yet.

16. SEOQuake

Web masters that deal with SEO will instantly fall in love with this extension, which is popular on Firefox already. It lets you delve into the SEO parameters of any webpage you're viewing, taking account of Google PageRank, Alexa and much more.

17. Image Cropper

This handy extension makes cropping images in any website possible, on the fly. Cropped images are saved as PNGs.

18. CSS Reloader

Created by Kenneth Auchenberg, CSS Reloader is a popular Firefox add-on as well as a Google extension. Once installed, users can simply press F9 to reload the CSS of any site without reloading the page itself.

19. Personalized Web

Personalize web pages on the fly with this neat little extension by adding your own custom HTML, JavaScript and CSS. It works very effectively as an AdBlocker too.

20. Inline Code Finder

Inline Code Editor's uses are limited, but what it does, it does extremely well. Quite simply, it trawls through a webpage, circling any HTML elements containing Inline JavaScript events, inline style or JavaScript: links. Tick the relevant boxes to choose exactly what to look for.

Alissa Walker Interview About Design

harisree782@gmail.com (Mariam Williams) — Sat, 24 Jul 2010 07:05:00 +0000

Even before her New York-walking adventure transformed into the architectural guide City Walks Architecture: New York (Chronicle Books, 2009) last year, Alissa Walker has been walking and writing. The car-less Los Angeles resident has been writing about design, architecture, cities, transportation and food for outlets such as Fast Company, GOOD, Dwell, and KCRW’s “DnA: Design and Architecture,” where she is an associate producer. In addition to walking and writing, Alissa is also an avid gelato eater, which she tries to perfect the art of eating of, whenever she can.

Some of my favorite writings that you’ve covered include the Fast Company piece about the design of LA transit, the appearance of architectural dining spots in Downtown in Dwell, and the fake freeway sign that you wrote about for GOOD Magazine. Los Angeles in general seems to be a large component in your writing. How does the City of Angels influence and inspire your ideas?

"No topic inspires me more than LA! It’s a vast, complex, beautiful place. I’ve lived here for almost nine years and I don’t think a day has gone by when I haven’t thought about how lucky I am to live here. I think partially because it has such a bad reputation in the minds of, like, everyone else in the world, and suffers from all these stereotypes, that I feel a responsibility to share these really amazing stories about the people and places I come across.

Los Angeles has so much to offer in terms of culture. Do you feel the design industry reflects that as well?

"I think the really cool thing about LA’s design industry is that it’s the result of so many creative overlays. There’s, of course, the film industry, a heavy street art influence, an awesome DIY community, the tech aspects of the gaming and animation industries, most of the country’s auto design studios, and probably the most innovative architects in the world. Combine all that with lots of space for people to experiment, a history of manufacturing and fabrication, and an authentic focus on sustainability, and you’ve got what I think is the most diverse and exciting design industry on the planet.

You also write about creativity outside of LA. Throughout the nation, have you noticed any emerging trends in design?

"I get really excited about the work that designers are doing in service of their cities. I’m seeing designers get involved in real policy issues, launching projects around big issues like public transit and urban farming. This is something we’ve tried to catalyze through the GOOD Design program where we have events in cities that pair designers with urban problems as proposed by city leaders. We’ve done programs in LA, San Francisco and New York and I just got back from Sarasota, Florida where I saw the presentations made at our second student event, where Ringling College of Art & Design students presented three solutions for conserving and celebrating water. We also just launched a school garden design contest with LAUSD, and we’re going to build the winning designs.

It’s great that designers are out there wanting to make a change in their surroundings. What is it about creative thinking and processes do you feel, bring people together?

"I think there’s a real camaraderie between creatives because there’s always that possibility to collaborate, which is usually what ends up happening when you get them together enough. I organize a monthly design party named de LaB where we have events that range from making t-shirts and posters at a screenprinting shop, to holding a fundraiser at the house of the architect Richard Neutra, to a tour of Chinatown galleries on bikes (with a stop for dim sum of course)…and recently we organized a pop-up shop for people to sell whatever items they’ve been making. These events are so fun because they expose all these different creatives to other people’s practices, and to each other, and we’ve heard so many stories of people going on to work together. It kind of goes beyond networking.

You’re in the midst of working on a new design site for Fast Company, which is very exciting. How is that going?

"Especially now as we continue to hear bad news about everything magazine-related, it’s pretty amazing that Fast Company is able to launch this new experience for its readers. The design content has been the fastest-growing part of Fast Company as far as traffic and it makes sense to corral it into its own curated site. I will be editing it along with the amazing Cliff Kuang, who I’ve been working alongside for a year, and we’re going to break news and report stories where most blogs just publish pretty photos (but we’ll still have photos!). Also, the site was designed by my friend Scott Thomas, who was the person behind all the beautiful and smart Obama campaign websites. That’s about all I can say about it now, but it’s launching soon, so you’ll see for yourself!

Why do you think design content has been the most popular?

"Design has finally been embraced as a way of thinking, not necessarily this obsession with pretty stuff. Fast Company has done an excellent job of not only positioning design as problem solving, but also challenging the typical “business” angle when it comes to the kinds of stories they publish—our editors really push us to show how design can translate to everyday life, or be applied to more mainstream stories. I think that’s the common thread through all Fast Company’s stories—unexpected and innovative solutions for all kinds of problems, from product launches to social issues, executed by really creative people. I think people understand that creativity is good for business.

You’ve been writing under the moniker, Gelatobaby, for years. As an expert gelato-eater, what’s your best memory of eating gelato?

"There are so many! There’s the “original” best memory—the reason that I named my site Gelatobaby in the first place—which was a summer I was kind of aimlessly touring around Europe by myself trying to decide what to do next. I crossed from France into Italy on the train and got off Vernazza, this tiny town that everyone knows about in the Cinque Terre, and could not believe my eyes. There was gelato sold on every corner. There were gelaterias next door to gelaterias and across the street from another gelateria. No one had prepared me for this! No one told me Italy in the summer is basically this technicolor ice cream wonderland. I truly spent the next three weeks eating as much gelato as I could (sometimes three, four times a day) and found myself so creatively fulfilled that I knew there was a correlation.

Site Manager Jeffrey Interview

harisree782@gmail.com (Mariam Williams) — Thu, 22 Jul 2010 07:06:00 +0000

Most of you are familiar with Jeffrey, for those who are not, Jeffrey Way is the manager of leading web templates Marketplace Themeforest and the editor of the most popular web development blog Nettuts. He is a well known personality and recently was the guest on the jQuery podcast.

1) First of all thanks for the Interview. Can you tell us how did got started in this field and first came across envato ?

Sure. I, probably like many web designers, got started in this field after agreeing to build my parent’s website without a single shred of experience. Needless to say, the “great business idea” never took off. Anyhow, the next day, I walked out of a book store with “Eric Meyer on CSS,” and some other HTML book, $80 poorer. But, as we all know, these books quickly pay for themselves.

My position as Editor of Nettuts with Envato came out of shear luck. Around May of 2008, I contacted Cyan Ta’eed about contributing some articles to Nettuts. However, it just so happened that I soon, serendipitously, discovered that Envato were currently in need of an editor for the new site.

After I submitted my first two articles, “15 Resources to get you Started with jQuery from Scratch” and “Solving 5 Common CSS Headaches” , she offered me the editor position — total luck. Luckily, this role allowed me to continue writing tutorials and recording screencasts for the site, which I really love. ( More tuts from Jeffrey )

2) You are the manager of Themeforest, CodeCanyon , editor of Nettuts, you have your own blog and you have written a book recently. How do you find time to manage all these things and your personal life ?

A few ways. The key is automation. I often joke that I waste so much time researching productivity tools, but the truth of the matter is, these tools have served me quite well. As an example, I use TextExpander religious, and utilize it for all my code snippets, as well as one liners, such as when answering ThemeForest support queries. This is essential; if you find yourself rewriting the same sentences over and over again, you’re doing it wrong.

Beyond that, I use tools like Forklift to expedite working with the file system and S3; and then there’s Teux Deux, which is laughably simple, but is the perfect solution for scheduling weekly tasks. For Twitter, I use a combination of HootSuite and Echofon to schedule tweets, and interact with the community.

But honestly, we find time for the things we enjoy. I genuinely enjoy working on these sites; so it doesn’t feel like work. Isn’t that the goal when searching for a job? Find something that you’d do for free…and then make money from it!

3) Many Authors on themeforest are making high incomes, what do you find in common in these authors ?

The differences between the big earners – meaning the guys that earn five figures every month – is that they treat this as a full-time job; it’s a business to them. The wonderful thing about ThemeForest, or any of the Envato marketplaces for that matter, is that it can be whatever you want it to be. If you’d prefer to sporadically upload a new template once every few months or so, that’s perfectly acceptable.

Passive income is fantastic. However, with that said, some authors go above and beyond what’s convenient — and their efforts really do speak for themselves. This consists of constant promotion on social networking sites, continuously improving and updating older themes, promoting items, via BuySellAds.com, and plenty of other creative avenues.

4) Recently Themeforest surpassed Templatemonster, what is the success factor that is making TF go so well in such a short span of time.

To clarify, ThemeForest recently surpassed TemplateMonster, in terms of page rank. If you examine the graph below:

…you’ll realize just how far ThemeForest has sky-rocketed, when compared to even five months ago. Needless to say, we’re all really excited, especially when ThemeForest was, in response to this new data, declared as the “new king in web template marketing.” On a lower level, this means that, whether you’re a buyer or author, ThemeForest has proven itself to be the premier website for your needs.

So what’s the reason behind our success? I’d ask your readers to tell me even three different marketplaces to sell, for instance, their WordPress templates. It’s not quite as easy as you might think. Many of the popular marketplaces around the web are subscription based, and don’t necessarily appeal to individual WordPress authors. ThemeForest, and its siblings, fills that niche quite nicely. Beyond that, cheap prices, and a strong community are always helpful!

5) What do you think ,the future of web development is going to be ? Will digital stock goods dominate in the near future.

I think I don’t know! If you had asked me a few years ago, I would have wagered that Flash was really the way to go. It was booming in popularity at the time. Don’t get me wrong, it’s still doing quite well for itself, but, between jQuery and HTML5, I think Flash has a tough road ahead. We’re specifically seeing this prove true in the last week or so, with the Apple/Adobe battle in full steam.

Speaking of which, what was Adobe thinking when they, in their global launch video, continued to promote their Flash -> iPhone feature. Shouldn’t that have been edited out? Apple’ not going to suddenly pull a 180 and change their mind. That one baffled me.

Okay, so I really haven’y answered your question. The truth is, I’m perfectly happy letting those far smarter than me determine what the future will be for our industry.

6) What are your hobbies ? I know you love playing guitar, what are your favorite songs and any chance of launching guitar.tutsplus.com.

Growing up, the plan was to be a studio musician. I went to an arts high school, called Nashville School of the Arts, and was on scholarship at Middle Tennessee State University, where I studied music theory. But, life never goes according to your plans. Thankfully, I’m very happy with the way things turned out. Guitar can remain a hobby… an hour or so per day.

So yeah, I jokingly made a comment on Twitter one day about wanting to launch guitar.tutsplus.com. I strangely received a lot of positive feedback on the idea. It would definitely be fun for me — think… the weekly Nettuts video tutorials, except for guitar; things like, “How to Mimic Billy Gibbons’ Playing Style.” But, I doubt that the bosses have any plans at this time. It doesn’t quite fit in with our other Tuts site. But who knows, maybe in a couple years, I’ll convince Skellie!

7) CodeCanyon is almost 4 months old, how is it going and what advice would you give to new authors?

CodeCanyon is doing quite well, but we’re only now just beginning to dig in our heals. The first step is with our newly launched Plugins category. While we’ll be updating this with multiple subcategories over the coming months, we’re launching with Magento extensions (as a companion to our recently launched Magento themes on ThemeForest), and will soon be moving on to a new subcategory, that I’m certain the community will be happy about.

The advice I’d give to new authors is the same advice I always give: solve problems. As an example, we recently received a PHP script submission that could be used to determine if a particular website domain name was available for purchase. Whether or not this item was coded well is moot. Who needs such a script, when there are a variety of free options online? Solve a problem, and the sales will roll in. But that’s the challenge…determining where the problem lies!

8 ) Sneak Peak at new websites or features coming to Envato ?

Absolutely. We’re all really excited about our upcoming Sessions website. At the beginning of each month we’ll be launching a two-week Session on a creative topic. Sessions will cover everything from digital illustration, to typography, to web design. The articles in each Session aren’t like your usual Tuts+ content. Instead of step-by-step tutorials, they teach the theory behind the techniques and practices. You’ll learn the Whys, not just the Hows.

9) Some quick questions -

Your favorite OS – Mac
Your favorite game besides Mass effect 2 - “Legend of Zelda: Link to the Past” will forever be my favorite game of all time, if only for the nostalgia. I still play through it once every year.
Your favorite IDE – Ahh, tough one. More than any other code editor, I find myself using Textmate the most – if only because it’s so dang fast; but that’s not really an IDE. If I had to choose right now, I’ve been super impressed with WebStorm, from the JetBrains guys, though it’s still in Beta. http://www.jetbrains.com/webstorm/index.html
Your favorite Themeforest and Codecanyon Author – Can’t show favorites.
Your favorite Nettuts Author - Again, no favorites. But I am truly thankful for people like Siddharth, Jeremy McPeak, Andrew Burgess, Burak Guzel, Dan Wellman, and James Padolsey, who consistently submit incredible tutorials and articles.

JavaScript’s evil features

harisree782@gmail.com (Mariam Williams) — Tue, 20 Jul 2010 07:03:00 +0000

Anyone who has followed Douglas Crockford’s writing or lectures knows about the “evil” parts of JavaScript: The parts that are confusing and/or that prevent us from writing clean code that performs well. The eval() function and the with statement are the two most egregious examples of evil JavaScript. Though there are other considerations, both of these features force YUI Compressor to stop replacing variables. To understand why, we need to understand the intricacies of how each works.

Working with eval()

The eval() statement’s job is to take a string and interpret it as JavaScript code. For example:

eval("alert('Hello world!');");

The tricky part of eval() is that it has access to all of the variables and functions that exist around it. Here’s a more complex example:

var message = "Hello world!";

function doSomething() {
eval("alert(message)");
}

When you call doSomething(), an alert is displayed with the message, “Hello world!”. That’s because the string passed into eval() accesses the global variable message and displays it. Now consider what would happen if you automatically replaced the variable name message:

var A = "Hello world!";

function doSomething() {
eval("alert(message)");
}

Note that changing the variable name to A results in an error when doSomething() executes (since message is undefined). YUI Compressor’s first job is to preserve the functionality of your script, and so when it sees eval(), it stops replacing variables. This might not sound like such a bad idea until you realize the full implications: Variable name replacement is prevented not only in the local context where eval() is called, but in all containing contexts as well. In the previous example, this means that both the context inside of doSomething() and the global context cannot have variable names replaced.

Using eval() anywhere in your code means that global variable names will never be changed. Consider the following example:

function handleJSONP(object) {
return object;
}

function interpretJSONP(code) {
var data = eval(code);

//process data
}

In this code, pretend that handleJSONP() and interpretJSONP() are defined in the midst of other functions. JSONP is a widely used Ajax communication format that requires the response to be interpreted by the JavaScript engine. For this example, a sample JSONP response might look like this:

handleJSONP({message:"Hello world!"});

If you received this code back from the server via an XMLHttpRequest call, the next step is to evaluate it, at which point eval() becomes very useful. But just having eval() in the code means that none of the global identifiers can have their names replaced. The best option is to limit the number of global variables you introduce.

You can often get away with this by creating a self-executing anonymous function, such as:

(function() {
function handleJSONP(object) {
return object;
}

function interpretJSONP(code) {
var data = eval(code);

//process data
}
})();

This code introduces no new global variables, but since eval() is used, none of the variable names will be replaced. The actual result (110 bytes) is:

(Line wraps marked » —Ed.)

(function(){function handleJSONP(object){return object}function »
interpretJSONP(code){var data=eval(code)}})();

The nice thing about JSONP is that it relies on the existence of just one global identifier, the function to which the result must be passed (in this case, handleJSONP()). This means that it doesn’t need access to any local variables or functions and gives you the opportunity to sequester the eval() function in its own global function. Note that you also must move handleJSONP() outside to be global as well so its name doesn’t get replaced:

//my own eval
function myEval(code) {
return eval(code);
}

function handleJSONP(object) {
return object;
}

(function() {
function interpretJSONP(code) {
var data = myEval(code);

//process data
}
})();

The function myEval() now acts like eval() except that it cannot access local variables. It can, however, access all global variables and functions. If the code being executed by eval() will never need access to local variables, then this approach is the best. By keeping the only reference to eval() outside of the anonymous function, you allow every variable name inside of that function to be replaced. Here’s the output:

function myEval(code){return eval(code)}function handleJSONP »
(a){return a}(function(){function a(b){var c=myEval(b)}})();

You can see that both interpretJSON(), code, and data were replaced (with a, b, and c, respectively). The result is 120 bytes, which you’ll note is larger than the example without eval() sequestered. That doesn’t mean the approach is faulty, it’s just that this example code is far too small to see an impact. If you were to apply this change on 100KB of JavaScript code, you would see that the resulting code is much smaller than leaving eval() in place.

Of course, the best option is not to use eval() at all, as you’ll avoid a lot of hoop-jumping to make the YUI Compressor happy. However, if you must, then sequestering the eval() function is your best bet for optimal minification.

How to Design Mini Icons

harisree782@gmail.com (Mariam Williams) — Fri, 16 Jul 2010 07:07:00 +0000

Numbers of people have asked me how to design my popular Mini Pixel Icon pack. In fact, they are relatively easy. All you need is just some basic Photoshop skills. Here I will show you how to use the Pencil tool to design pixel icons, and then re-use them to create a full collection. This is the technique that I used to create over 320 icons within a day.

1. Create a new document

In Photoshop, create a new document 14 x 14px size with transparent background.

2. Draw shape outline

Use the Pencil tool, select 1px brush from the palette. Pick a dark gray color and start drawing the outline of the page icon. To draw a straight line, first click at the starting point, then hold down shift key and click at the ending point.

Tips: At any time if you want to erase the pixels, use the Eraser tool, select Pencil mode and 1px brush size.

3. Base gradient

Make a selection of the empty cutout by the Magic Wand tool. Create a new layer. Set your foreground color to light gray and background to white. Use Gradient tool, drag from top corner to lower corner diagonally.

4. Highlight and shadow

Create a new layer. Draw a 1px white inner top border to create the highlight effect. Then, draw a medium gray inner bottom border.

5. Group all layers

In the Layers palette, select all layers and press Cmd+G to group all layers in a folder.

6. Draw a pencil

Again, start drawing the outline first and then fill the inner area with either solid color or gradient. When you are done, group these layers in a separate folder.

Tips: If you want to have consistent color throughout the icon set, store the colors that you have used in the color swatches.

7. Re-use them

Here shows how I re-used the layer groups to create entire collection:

8. Export for web

After you’ve done entire set, toggle (invisible / visible) the layer groups and save them for web (Cmd+Alt+Shift+S).

Too lazy to do this tutorial? You can download my free mini icon set.

8 Amazing HTML5 Canvas and Javascript Animations

harisree782@gmail.com (Mariam Williams) — Wed, 14 Jul 2010 07:03:00 +0000

HTML5 canvas has changed the way javascript used to be. We're now able to achieve complex animation however we do need a powerful browser to interpret it. The following is 8 new HTML5 + Javascript animation effect you probably have not seen before! Play with each of them, you'll be blown away by the creativity and robustness of HTML5 canvas!

I like Tunnelers and Bomomo the most! You've to try Bomomo, it's fun!

Tunnelers

Processing to sketch out the animation and form, then rewrote it from scratch in Javascript / Canvas HTML5. Simply awesome and amazing!

The Mesmerizer

A simple experiment with a 16x16 grid of squares. Moving the pointer over the squares causes colours to appear and bleed into adjacent squares with an effect that is quite mesmerizing. Try clicking the corner squares or typing on the keyboard for additional effects.

Burn

A simple test of local pixel-based modifications of an HTML5 canvas drawing area. Hold a mouse button down for a "slide down" effect.

Cheloniidae Live

This project is pure JavaScript, though it uses a library that dynamically recompiles JavaScript functions to implement operator overloading. (This is done inside the browser, not ahead-of-time.) Pretty fun, you can alter the code and make your own drawing!

Canvas 3D engine

A 3D engine on canvas, currently supporting a collection of basic prefab shapes, textures, and basic interaction. Current work includes collada (import) support, and improved texture and lighting features.

Bomomo

Best give it a try yourself... just use your mouse & mouse button! All of the sudden, I have become artistic. :)

DDD

Move mouse to draw, drag to rotate. This one is pretty fun, you have to try to see it.

Plasma Tree

Inspired by nature - a visual presentation of a algorithm

How to Exporting Cliping Paths in Adobe Photoshop

harisree782@gmail.com (Mariam Williams) — Mon, 12 Jul 2010 07:01:00 +0000

Create a Clipping path when you want to create transparent areas in an image you intend to use in an application such as Adobe Illustrator, QuarkXPress or Adobe InDesign.

A clipping path makes aread of the image outside the path transparent, allowing you to see past the outline of the image to the background on which the image is placed.

1. Create a saved path. If you have more than one path in the Paths palette, make sure you select the appropriate path. Use the pop-up palette menu to select Clipping Path.

2. Use the Path pop-up to specify a different path to make into a clipping path if necrssary. Enter a Flatness value.

3. Whn you have saved a clipping path, you need to save the file in EPS or TIFF file format for output. Choose File>Save As. In the Save As dialogue box, give the file a name and specify where you want to save it.

4. Choose Photoshop EPS or TIFF from the format pop-up. Click Save. Cliping Paths saved with the image are automatically exported with the file when you save in Photoshop EPS or TIFF file format.

5. See the section on saving in Photoshop EPS format for information on Preview and encoding options.

6. When you import the file into a QuarkXPress or Adobe InDesign page, the clipping path hides areas of the image outside the clipping path. The second version of the same image on this Quark page has a black background and does not have a clipping path.

Hot Tip:-

1. Flatness allows a PostScript printer to create less memory-intensive paths at output. If you use too high a flatness value., you get an approximate path that does not accuratley conform to the path you created.

2. For high-resolution printing(1200-2400 dpi) a flatness value of 8 to 10 should be acceptable. Use a value of 1 to 3 for low resolution printing (300-600dpi). Leave the field blank to use the printers default setting. This usually produces good results with most images.

Don’t Dorget:-

Remember to convert the file to an appropriate mode – e.g. CMYK – before you save the file in EPS format.

60 Awesome Creative Examples Of Illustration In Web Design

harisree782@gmail.com (Mariam Williams) — Sat, 10 Jul 2010 07:04:00 +0000

Illustration in web design is one way to make sure your website stands out from the crowd. Whether it be cute cartoon characters, blocks or fancy shapes it’s one sure way to get peoples attention. In this collection of 60 stunning examples you can see some of the finest illustrations on the web. If you think I have missed any site off then please let me know. Hope you enjoy!

Prism Tone

Candy Candy Jewellery

The Great Bearded Reef

Corvus

Phizz

CJS

Banjax

Digiti

Meomi

Jwit

Brizk

Siringa

Forrst

Viget

K4 Lab

Website Validation and Testing Free Online Tools

harisree782@gmail.com (Mariam Williams) — Tue, 06 Jul 2010 07:02:00 +0000

As you probably know already, it’s important to check and test your Website to help ensure that it looks great and works beautifully regardless of the browser or platform used. Testing a website before launch is one thing that you cannot afford to take lightly. Just like a minor negligence while constructing a building can cost life of millions of residents , the same way a small error left unnoticed can prove to be fatal for your website.

Therefore, this implies that we must run our website through all necessary tests. This includes CSS Errors, HTML Errors, Cross browsing Errors, WAP Errors (if your site is WAP enabled) and various other tests.Below is the list of Online Tools for Website Validation and Testing. So make it sure that you go through this post and run all the necessary tests on your website before making it live.

Validation tools

1.W3C markup validation service

This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. This is an exclusive standards check for the document, so other checks are not available.

Checks done on:

Syntax and style analysis – Yes
Source code – Yes

2.CSS validator

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.The important thing is if you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid.

3.Checklink

Check links and anchors in Web pages or full Web sites.This Link Checker looks for issues in links, anchors and referenced objects in a Web page, CSS style sheet, or recursively on a whole Web site. For best results, it is recommended to first ensure that the documents checked use Valid (X)HTML Markup and CSS.

4.Feed

This is the W3C Feed Validation Service, a free service that checks the syntax of Atom or RSS feeds.You can validate by URL or Validate by direct input.

5.Mobile checker

This checker performs various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification. A Web Page is mobileOK when it passes all the tests. And find Is your Web site mobile-friendly?

6.Unicorn

Checks your site for all the general standards and see if there are rooms to improvement. It checks for the XHTML and CSS compatibility.

7.HTML Validator

The WDG HTML Validator is similar in many ways to the W3C HTML Validation Service. Most of the previous differences between the two validators have disappeared with recent development of the W3C validator. The errors reported are the same in virtually all cases.

8.Dr. Watson’s site validation check

Dr. Watson is a free service to analyze your web page on the Internet. Just give the URL of your page and Watson will get a copy of it directly from the web server. Watson can also check out many other aspects of your site, including link validity, download speed, search engine compatibility, and link popularity. It rolls many features into one, so if you are looking for a single stop for checks, this one is the place to be.

List of checks :

Page load time check – Yes
Syntax and style analysis – Yes
Word counts – Yes
Spelling checks – Yes
Link checking – Yes
Search Engine Optimization check – Yes
Incoming links check – Yes
Source code – Yes

9.XML well checker and validator

Use this form to check an XML document for well-formetness and (optionally) validity. External entity references are included, even when not validating.It checks for spaces and syntax errors, while pointing to the line number at which the error was spotted.

10.Robots checker

This tool checks if your Robots.txt file is valid. Thought it may show some exclusions you’ve done as errors, they are good pointers to check if the commands will be misinterpreted or not. Good one and it is simple,powerful and accurate one.

11.URL checker

While it’s important to know if your website is running and your host is providing a good service, it’s even more important to be proactive about getting it back online fast so you don’t lose search engine position, miss out on possible revenue or blow.InternetSupervision™ is a service that monitors the availability of HTML, FTP, SMTP, POP3 email servers), supervises the performance of website and e-commerce transactions (including website forms) and provides website content supervision (cyber-attack monitoring).

12.Web page reports

There are various online services offering automated web page checks. pinkjuice.com/check is just a simple tool generating links to the report pages of some of those services, including emulators, validators, and accessibility checkers.And it’s handy to have a list of all the results pages, for example when sending a status report to a client about a website that’s being worked on.

Accessibility and evaluation tools

13.Webaccessibility checker

This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker.

14.Color contrast

AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments. AccessColor will find the relevant color combination within your HTML and CSS documents rather than requiring you to find each value to input yourself in order to test the contrast between each color combination.

15.Web accessibily evaluation tool-WAVE

WAVE is a free web accessibility evaluation tool provided by WebAIM. It is used to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.

16.FAE – Functional Accessibility Evaluator

Use this tool to evaluate the functional accessibility of a single web page. It evaluate multiple pages via web crawling,Generate a Sitewide Report that identifies problem pages,Save reports in an account-specific Archived Reports list.

17.Accessibility with style

HERA is a tool to check the accessibility of Web pages according to the specification Web Content Accessibility Guidelines. HERA performs a preliminary set of tests on the page and identifies any automatically detectable errors or checkpoints met, and which checkpoints need further manual verification.

18.Section 508

The Section 508 checking tool automatically compares your HTML code against Section 508 checklist and shows your results quickly. Results are simple to understand too.

19.Adobe PDF conversion

This conversion service will convert to text Adobe PDF files that are in English.By submitting content through these tools, you understand and agree that Adobe may occasionally access the content you submit for purposes of quality control and administration of the conversion service.

Website performance checkers

20.Pingdom tools

The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser.The load time of all objects is shown visually with time bars.

21.Webpage analyzer

Free web site speed test to improve website performance.The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time

Cross Browser Testing

22.Browser shots

Browsershots makes screen shots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated servers for your review.

23.IE net renderer

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high-speed data center located in Germany.

Which tools do you use for your website? Feel free to share them with us via comments. Via: 1stwebdesigner

How to Edit Points Using Pen Tool

harisree782@gmail.com (Mariam Williams) — Sun, 04 Jul 2010 07:40:00 +0000

Paths invariably need to be modified and fine-tuned to produce the result you require.

1. To edit a smooth point, make sure the path is selected, then click on the anchor point to select it. Direction points appear either side of the anchor point. Direction points control the shape and length of a curve segment.

2. When you drag a direction point of a smooth anchor point, as you change the angle of one side, the other direction point moves to balance the point you are moving. This ensures the curve is always smooth through the anchor point.

3. The further away from the anchor point you drag a direction point, the longer the associated curve segment becomes. As the curve segment is anchored at the anchor points at either end, this causes the curve segment to bow out more. Bring the direction point closer to the anchor point and the curve segment becomes shorter.

4. When you drag direction points on a corner anchor point, each moves totally independently of the other, allowing a sharp change of direction at the point.

Don’t Forget:-
Select the Dorect Selection tool to edit paths and points.

Hot Tip:-

Select an anchor point and press the arrow keys to move the selected point in 1-pixel increments.
With the Pen tool selected. Hold down Command/Ctrl to toggle temporarily to the Direct Selection tool. Hold down Alt to toggle to the Convert Point tool.

The Basics of CSS3 Properties

harisree782@gmail.com (Mariam Williams) — Thu, 01 Jul 2010 16:10:00 +0000

In This Post explained the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.

RGBA

The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque).

RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc.

Text Shadow

Text shadow is structured in the following order: x-offset, y-offset, blur, and color;

Set a negative value for x-offset to shift the shadow to the left. Set a negative value for y-offset to shift the shadow to the top. Don’t forget you can use RGBA values for the shadow color.

You can also specify a list of text-shadow (separated by a comma). The following example uses two text-shadow declarations to make a letter press effect (1px top and 1px bottom).

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

Border Radius

The shorthand for border radius is similar to the padding and margin property (eg. border-radius: 20px). In order for the browsers to render the border radius, add "-webkit-" in font of the property name for webkit browsers and "-moz-" for Firefox.

You can specify each corner with a different value. Note Firefox and Webkit has different property names for the corners.

Box Shadow

The structure for box shadow is same as the text-shadow property: x-offset, y-offset, blur, and color.

Again, you can apply more than one box shadow. The following example is a list of three box shadow declarations.

-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

How to Add, Delete and Convert Points Using Pen Tool

harisree782@gmail.com (Mariam Williams) — Sat, 26 Jun 2010 12:47:00 +0000

To achieve a precise path, you often need to add points and delete points on a path.

1. To add a point, make sure the path is selected, select the Add Anchor Point tool from the Pen Tool group, position your cursor on the path and then click. If you click on a curve segment you automatically get an anchor point with drection points. If you click on a straight line segment, you get just an anchor point.

2. To delete a point, make sure the path is selected, select the Delete Anchor Point tool, position your cursor on an existing anchor point then click. The path redraws without the point.

3. To convert a smooth point into a corner point, select an anchor point with the Direct Selection tool. Select the Convert Point tool, position your cursor on a direction point then click and drag. Use the direct Selection tool to make any further changes to the direction points.

4. To convert anchor points on straight line segments into smooth points, select the Convert Point Tool, position your cursor on the anchor point then click and drag. Direction lines appear around the point. Use the Direct Selection tool to make any further changes to the points.

5. To convert a smooth point into a corner point without direction lines, select the Convert Points tool then click on an anchor point.

The Power of jQuery with Ajax

harisree782@gmail.com (Mariam Williams) — Sat, 26 Jun 2010 12:39:00 +0000

As the web evolves, new technologies are emerging and uniting in remarkable ways. The combination of Ajax and jQuery, in particular, is one of the most powerful unions to date.

The purpose of this article is to give a brief and generalized overview of both Ajax and jQuery, and also discuss how jQuery has made Ajax development easier than ever before.

What is Ajax?

Since its conception in 2005[1], Ajax (Asynchronous JavaScript and XML) has changed the web as we know it today. It’s helped websites evolve into Rich Internet Applications (RIAs) by allowing web pages to make direct requests to web servers without reloading the page. This capability is vital in replicating the rich user experiences achieved in client applications.

Ajax in Practice

Let’s say that you have a login form for your web application. To ensure that the provided login name and password entered by the user is a match without using Ajax, your web application would have to load a whole new web page that shows an account screen if the login was successful, or show an error screen if the login failed. This is the old way of handling logins.

A more savvy approach to this problem would be to check if the login and password is correct using Ajax.

Here’s how Ajax would work in this instance: Once the user has typed in a login name and password and submitted the login web form, you could have a JavaScript function that invokes an Ajax call that sends two parameters — the login name and password.

The web server (usually through a server-side script/language such as PHP) takes the two parameters and then queries your user database to see if there is a match.

If there is a match found in your database, then the web server can return a success flag. Otherwise, the web server could return an error message.

Next, you would then have a JavaScript function that accepts the Ajax response. If the response is successful, it could use window.location to send the user to their account screen.

If the response contains an error message, the application can display the error on the screen without ever reloading the page.

The main thing to take away from this is that you don’t have to reload an entire page just to handle username/password verification, making your web application more responsive and, if the page is heavy, saving you some significant bandwidth.

What is jQuery?

Released in January of 2006, jQuery is a cross-browser JavaScript library designed to simplify the client-side script of HTML.

Used by close to a million websites[3], jQuery is the most popular JavaScript library in use to date.

jQuery makes it easy to handle DOM objects, events, effects and Ajax, automatically takes care of JavaScript leaks, and has countless third-party plugins.

The Problem with Ajax

Despite its revolutionary impact on the web, Ajax can be difficult to use even for veteran developers.

People will usually create their own custom functions to handle Ajax calls so that the functionality can be reused across a web application. This can become very tedious when a web application makes use of different types of Ajax calls — such as the ability to handle both synchronous and asynchronous calls — or the ability to handle different response formats such as string messages, HTML, CSV, XML, JSON, etc.

As a professional web developer, I’ve personally spent countless hours building custom methods to handle Ajax calls.

Traditional Ajax calls usually take on the following form:

function httpRequest(id) { if (window.XMLHttpRequest) { // code for IE7+, FF, Chrome, Opera, Safari http=new XMLHttpRequest(); } else { // code for IE6, IE5 http=new ActiveXObject("Microsoft.XMLHTTP”); } http.onreadystatechange=function() { if (http.readyState==4 && http.status==200) { response = http.responseText; // do something with response } } dest=”servlet.php?id=” + id;
http.open("GET”, dest);
http.send();
}

If your web application only uses one Ajax call, it’s not that big of a deal to implement. The problem occurs, however, when your web application leverages lots of Ajax calls and you try to break the code apart to make it reusable.

The idea of Ajax is to send a request to some web server, wait for a response, and update your HTML page. It would be convenient to create a custom function like httpRequest() that takes two parameters — a request URL and a response function — that could be reused throughout your system.

Once you start setting this up, however, you’ll immediately see that the simple task of making an Ajax call suddenly becomes a nightmare when you try to construct response function evaluations using eval() and figuring out how to make your new function handle synchronous calls, asynchronous calls, and different response formats.

At the end of the day, the simple idea of creating a custom httpRequest() function quickly turns into a big project.

The other advantage of jQuery is that it has additional Ajax functions and methods that you can use, which can further reduce development and debugging time.

Hello Ajax. Meet jQuery.

Among other advantages, one of my favorite features of jQuery is its ability to leverage Ajax with very little effort. To make an Ajax call, you can do something like this:

$.Ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
If you’ve developed Ajax applications before without jQuery, you’ll immediately see the value here. jQuery has put all of the properties of Ajax into one simple API. You can control everything including the url, cache, success function, data type, and even synchronization, all from one neat declaration. It’s nothing short of beautiful. Via: Six Revisions

7 Common Mistakes in E Commerce Website Designing

harisree782@gmail.com (Mariam Williams) — Tue, 22 Jun 2010 16:55:00 +0000

Selling online is a huge profitable business. When your shopping store can remain open for 24*7 and reaching global market without any operational expenses, it can surely bring huge profits if everything is properly carried out. Unlike physical store, in this you do not come into direct interaction with your customers. The interface between the service provider and the customers is the website. If your website is not properly designed, then it may lead to the loss of visitors inspite of the fact that you are providing good products/services. There are plenty of things to consider when designing an ecommerce site. If visitors are not finding their navigation enjoyable on the website, it is the clear indication that your business is into big trouble. Below are 7 common mistakes that you need to avoid while designing an e commerce website.

1.Lack of necessary details of the product on website: When we shop in a physical store, we have the freedom to see, touch and ask about the product. But on Internet we can only see the product. Also there is no interaction between seller and customers. So for the ease of customers, you need to place good quality of images of product on the website. Keep a short and necessary info (like size, materials used, price, dimensions etc.) about the product as standard and details as the option for the visitors to
see.

2.To get registered before buying: No doubt, Sign up is a very important tool for the sales team to track the customers or do follow ups. But by asking them to register first and then letting them to buy products, you have placed another obstacle in the path of conversion of buying decision to the act of purchase. Instead of requiring a customer to sign up for an account before they order, offer them the option at the end of their ordering process. Or you can ask them to save their account information for tracking the status of their current order easily.

3.Too many steps in order process: This is one of the common mistakes which almost all e commerce websites commit. You have to make the order processing steps as easy as possible. These should be simple enough to understand and short too. Don't check customers patience. More number of steps you put, implies more number of opportunities you are giving them to leave the site.

4.Limited payment modes: One of the major mistakes is the limitations in payment methods. Make all
the methods of payment available on your website for the ease of the customers.

5.No Contact Information: It is quite obvious that customers would want to know about the company with whom they are dealing with. They want to be ensured that if they have a problem they’ll be able to talk to a real person and get the help they need. Never hide your contact details. So what you need to do is- Put your contact information in an easy to find place on every page of your website.

6.Poor customer support: This is quite similar to the above. Make the procedure to contact you very easy and simple, in case they have a problem or question. Offering a help request form for customers to fill out can instill more confidence than just an email address.

7.Complex Navigation: Always remember that you are selling products and not the web design. Don't make your design complicated. Nothing can be worst than the time consuming task of finding a product on E Commerce website. Often, some websites do not even use categories for their products. Avoid this and make it simple for customers to look through different categories, and get to their shopping cart.

11 Easy Steps For Installing Apache ActiveMQ & PHP Application

harisree782@gmail.com (Mariam Williams) — Mon, 21 Jun 2010 18:23:00 +0000

Apache ActiveMQ is one good option for implementing message queue in your PHP application. It can be easily installed on your server and it’s web accessible admin interface really makes administrator’s life easy. It can be easily connected with PHP via STOMP. I will suggesst to use MySql for Data persistance and start ActiveMQ as unix service.

Basic requirements: java, php, mysql.

So lets starts with installation steps:

ActiveMQ installation

I am installing ActiveMQ in /usr/share/php directory.

cd /usr/share/php
wget http://mirror.its.uidaho.edu/pub/apache/activemq/apache-activemq/5.3.0/apache-activemq-5.3.0-bin.tar.gz
tar zxvf apache-activemq-5.3.0-bin.tar.gz
mv apache-activemq-5.3.0 activemq

We have renamed the directory to “activemq” for ease.

Run Apache ActiveMq

activemq/bin/activemq

Don’t close this terminal, open a new terminal for running below commands

Check running status of ActiveMq

netstat -an|grep 61616
ps -ef|grep activemq

ps command will show the process id (PID) of running ActiveMQ

ActiveMQ Web Admin interface

http://localhost:8161/admin/

Here you can monitor your current status of queues, topics, connections etc. You can also browse, delete, add data according to requirement.

Stop Apache AcitveMQ

kill -9 [PID]

where [PID] is the process id of the ActiveMQ process. Take it from ps command

ActiveMQ admin command

ActiveMQ is taking configuration details via simple xml (default:activemq.xml) file located in conf directory.

vi activemq/conf/activemq.xml

Make a small change in activemq.xml and your activemq-admin command will start working
Change the default createConnector=”false” to createConnector=”true” like below:

Now you can use below command for starting Apache ActiveMQ, stopping it and listing the connected brokers.

activemq/bin/activemq-admin start
activemq/bin/activemq-admin stop
activemq/bin/activemq-admin list

Configure STOMP transport connector, so that your PHP application can communicate with ActiveMQ

vi activemq/conf/activemq.xml

The default transport connector is openwire for native connectivity to Java and it will be available at tcp port 61616.

Change below code:

Data Persistence with MySql

Download latest MySQL Java Connector (mysql-connector-java-5.0.6-bin.jar) from MySql website. Copy the file into “activemq/lib/optional” folder

Launch the MySQL command line program and create a database for ActiveMQ

mysql> create database activemq;

vi activemq/conf/activemq.xml

The default persistence adapter is kahaDB which is fast but not very reliable. You can test it according to your condition or give MySql a change and take the better one.

Change below code:

Start the ActiveMQ and check the MySql

mysql> use activemq; show tables;
Database changed
+--------------------+
| Tables_in_activemq |
+--------------------+
| ACTIVEMQ_ACKS |
| ACTIVEMQ_LOCK |
| activemq_msgs |
+--------------------+

Your MySql data persistence is working fine.

Installing PHP STOMP client

pecl install stomp-beta

It will generate a stomp.so in /usr/lib/php/modules/ directory. Open /etc/php.ini and load the extension like below

extension=stomp.so

Restart httpd service like below

service httpd restart

PHP message queue producer and consumer code

Now you have to make two php sample files, one for producting messages in queue and other for consuming those messages.

producer.php

getMessage());
}

for($i=1;$i<10;$i++) msg1 = "queue one my data">send($queue1, $msg1, array('persistent' => 'true'));
}

unset($stomp);
?>

In above code, I have generated a few messages via loop. In real senerio, it will be generated by events whenever something need to be processed in queue.

consumer.php

getMessage());
}

$stomp->subscribe($queue1);

while(1)
{
$frame = $stomp->readFrame();

if ( $frame != null)
{
echo $frame->body; //process your message
echo "\n";
$stomp->ack($frame);
}
}

unset($stomp);
?>

If you look at the code carefully, the consumption of messages are in a infinite loop. The consumer is ready to process all incoming messages.

You have to run the consumer code from your terminal like below:

nohup php consumer.php > consumer.log 2>&1 &

It will start consumer.php forever with nohup command, directs the messages in the consumer.log file

Configure ActiveMQ as Unix Service

ActiveMQ should be configured as Unix Service and it should start automatically if your server restarts.

Create ActiveMQ startup script /etc/init.d/activemqstart.sh with the following content:

#!/bin/bash
export JAVA_HOME=/usr
/usr/share/php/activemq/bin/activemq &

Create ActiveMQ stop script /etc/init.d/activemqstop.sh with the following content:

#!/bin/bash
export JAVA_HOME=/usr
/usr/share/php/activemq/bin/activemq-admin stop

Create ActiveMQ Linux service configuration script /etc/init.d/activemq with the following content:

#!/bin/bash
#
# activemq Starts ActiveMQ.
#
# chkconfig: 345 88 12
# description: ActiveMQ is a JMS Messaging Queue Server.
### BEGIN INIT INFO
# Provides: $activemq
### END INIT INFO

# Source function library.
. /etc/init.d/functions

[ -f /etc/init.d/activemqstart.sh ] || exit 0
[ -f /etc/init.d/activemqstop.sh ] || exit 0

RETVAL=0

umask 077

start() {
echo -n $"Starting ActiveMQ: "
daemon /etc/init.d/activemqstart.sh
echo
return $RETVAL
}
stop() {
echo -n $"Shutting down ActiveMQ: "
daemon su -c /etc/init.d/activemqstop.sh activemq
echo
return $RETVAL
}
restart() {
stop
start
}
case "$1" in
start)
start
;;
stop)
stop
;;
restart|reload)
restart
;;
*)
echo $"Usage: $0 {start|stop|restart}"
exit 1
esac

exit $?

Enable ActiveMQ service configuration as Linux Daemon:

chmod +x /etc/init.d/activemqstart.sh
chmod +x /etc/init.d/activemqstop.sh
chmod +x /etc/init.d/activemq
/sbin/chkconfig --add activemq
/sbin/chkconfig activemq on

Restart the server.

reboot

All done, Enjoy!
Cheers!!

How To Create Avatar Movie Wallpaper

harisree782@gmail.com (Mariam Williams) — Sat, 12 Jun 2010 18:35:00 +0000

Here is an interesting tutorial how to create Avatar movie wallpaper. A lot of people were impressed by watching this movie and I’m not an exception. I am insanely obsessed with it. That’s why I decided to make the tutorial how to create wallpaper on this great movie.

In the beginning you should create a new document sized 1900х1200 pixels and fill it with black color.

Then I would like to bring the picture one of the heroes to our canvas. You can find different pictures on Google Images or feel free to use mine. Open up the picture and using Ctrl+C copy it , then go back to the main canvas and press Ctrl+V to paste copied fragment. Move this fragment to right lower corner.

As you can see the picture less then canvas, in this way press Ctrl+T and hold Shift button to enlarge the picture pro rata. The result should look as mine:

After increasing the image sharpness has become worse. We can fix this problem by duplicating current layer with Ctrl+J and Filter > Other > High Pass with next parameters:

After that change layer mode to Overlay and you will get the next result:

Ok, continue our tutorial. Merge current layer with previous and move new layer to the right as shown on my screenshot below.

Then to change color balance a little bit to get the picture with the same hue as on advertising posters apply Image > Adjustments > Layers with similar settings to these:

The result should be next:

Ok, move to the next step. We have to make eyes color more bright and contrasting, to add accent on the picture. For this effect apply Polygonal Lasso Tool and create selection as on my picture below:

Holding Shift button select the second pupil of the eye area.

After that use Select > Modify > Feather to feather selection about 2 pixels. Then apply Image > Adjustments > Color Balance with similar settings to these:

You can see the result below:

Remove the selection with Ctrl+D. Looks good, isn’t it? Then create a new one layer, select the Brush Tool and a soft round brush about 400 pixels to hide image borders like on my picture you can see below:

Move to the next step. After that we need to add the text. Select the Horizontal Type Tool and write out the name of the film with different color, it doesn’t matter. The set up next text presets for this text line:

The result should be next:

In the above image I’ve used Papyrus as my font of choice. Actually, it is commercial, but if you don’t have it, you can easily find a good alternative. Ok, after that apply Outer Glow, Bevel and Emboss, Contour and Gradient Overlay layer styles to this layer:

Now we have something like this:

And the last one thing that we have to do to add glowing balls on the background. How we can do this? Ok, I will show you the easer way. Select the Brush Tool and a hard round brush about 15 pixels. Then click the button ‘Toggle the Brushes palette’ on the Options Bar to open brush presets window or by choosing Window > Brushes. Here we can see a couple of presets. Now, set up the following presets for current brush:

After that add a few strokes to the background on the new layer using color of #c9eaff.

Duplicate this layer with Ctrl+J and apply Filter > Blur > Gaussian Blur with similar settings to these:

Merge current layer with previous.

After that apply Outer Glow layer style to new received layer.

The result should be next:

Ok, to finish off the tutorial create new layer and fill the left upper corner with black to transparent gradient.

Ok, we are done! Enjoy your own cool looking wallpapers!

1024×768 | 1280×1024 | 1600×1200 | 1680×1050 | 1900×1200

12 Helpfull Adobe Flash ActionScript Tutorials

harisree782@gmail.com (Mariam Williams) — Fri, 04 Jun 2010 16:32:00 +0000

Adobe Flash is an excellent technology that allows developers to add interactivity and smooth animations to web pages. Its popularity is so immense that you’ll find many websites dedicated to helping developers interested in Flash.

I hope this article very help full Since there’s so many websites out there dedicated to Flash development, I can’t include them all, so if you didn’t see your favorite – please share it with all of us in the comments.

metah.ch

metah.ch has some awesome video tutorials on Flash, ActionScript, Flex, and AIR. Files associated with the tutorials can be downloaded and used in your own projects.

LukaMaras.com

LukaMaras.com offers detailed Flash tutorials and resources designed to help you learn Flash. There’s also a small forums section with over 3,000 registered users where you can discuss anything related to Flash.

kirupa.com

kirupa.com is a site that features excellent Flash tutorials (as well as Silverlight, ASP.net, PHP, and Photoshop). There are plenty of well-written, detailed tutorials and articles pertaining to Flash sectioned into seven categories including Basic Drawing, Special Effects, Server-side Flash, and Game Development.

gotoAndPlay()

gotoAndPlay() is dedicated to providing resources for Flash game developers. It’s a community that has a forum, interviews from professional developers, and reviews of books and resources. It also has tutorials and articles about Flash game development that can be filtered by topic, expertise, and type.

gotoandlearn.com

Some people learn best by visualization and following along with the instructor step-by-step in real-time. If you’re the type that prefers to learn by watching instructional videos, check out gotoandlearn.com – a website by Lee Brimelow that offers free Flash video tutorials.

Flashmagazine

Flashmagazine is an online magazine dedicated to Flash news, reviews, information, and resources. The Tutorials section has some excellent tutorials for Flash developers.

Flash Tutorials on Pixel2Life

Pixel2Life, according to the site, is the "largest tutorial index catering to graphic designers, webmasters and programmers". With over 40,000 indexed tutorials, you’ll find many links to tutorials in their Flash Tutorials section.

Flash Perfection

Flash Perfection is a website with a large collection of Flash tutorials, tips, and tricks from various websites. Flash Perfection has 23 categories to help you find information more quickly.

Flash Kit

Flash Kit is one of the biggest and oldest community dedicated to Flash development. With over 600,000 members, you won’t have a hard time finding people with a similar interest in Flash. There’s a forums section, free resources that you can download and use in your Flash projects, and a large tutorials section that includes 18 categories.

Flash and Math ActionScript 3 Tutorials

Flash and Math has a great collection of tutorials on AS3. They cover basic to advanced topics so that Flash developers of any level can find something they can read and learn from. Many of the tutorials include the source files for download.

Adobe – Flash Developer Center

Adobe’s Flash Developer Center is a community for Flash developers. Here, you’ll find tutorials, articles, and related resources about Flash. You should also check out the ActionScript Technology Center for articles on specifically about ActionScript.

ActionScript.org

ActionScript.org is a site that provides resources and information pertaining to Flash, Flex, and ActionScript. They have a fairly active Forums section as well as an ActionScript Library that currently has over 700 objects you can download.

7 Awesome Digital Clocks Using CSS And Javascript

harisree782@gmail.com (Mariam Williams) — Thu, 03 Jun 2010 17:56:00 +0000

7 Awesome analog and digital clocks to use in your next project. I find these clocks really cool and impressive. Moreover these clocks shows the power of CSS and Javascript which is why it makes these clocks worth watching.

1. CSS and JS clock

2. CSS3 and Jquery clock

3. Analog Clock

4. CSS3 and Jquery clock

5. Sliding clock

6. Digital epiclock

7. Jquery Digital clock

Here is a simple javascript clock script which you can modify by using CSS code

(Click on the Image for Full Version)

36 Best WordPress Ecommerce Themes

harisree782@gmail.com (Mariam Williams) — Tue, 01 Jun 2010 16:01:00 +0000

Yes, you can even create your own online store. These Wordpress themes make it really easy to start your own webshop. and there is a wide range of themes available to help sellers reach target customers. This post presents 36 of the best ecommerce themes

[Free Website Templates]

[SaWeb]

[EShop]

Setting Up FTP in Dreamweaver

harisree782@gmail.com (Mariam Williams) — Tue, 01 Jun 2010 07:02:00 +0000

Okay, you created a Web site and tested it, and you're ready to upload it to the Web. It's time to put the Dreamweaver publishing tools to work. If you're using a commercial service provider, you most likely need the Dreamweaver FTP features, covered in detail in this task and the remaining tasks in this chapter. Note that you must complete the site-setup process, before you can configure the site for uploading. You also need the following information from your Web hosting service:

- The FTP host name
- The path to the Web directory (optional but useful)
- An FTP login or user name
- An FTP password

After you gather all your FTP information and complete the site setup, you're ready to access the Dreamweaver publishing tools and prepare the program to upload your Web site. In this task, you set up Dreamweaver to connect to your server via FTP, a process you need to do only once for each site you work on. In the next task, you use Dreamweaver to upload pages to your server by using the connection you establish in this task.

Follow these steps:

1. Choose Site?Manage Sites to open the Manage Sites dialog box.Alternatively, you can choose Manage Sites from the bottom of the Site drop-down list in the Files Panel, as shown in this figure.

2. In the list of defined sites, select the site you want to publish and then click the Edit button.

3. Select the Advanced tab from the top of the Site Definition dialog box, and then select the Remote Info category from the left side.

4. Click the drop-down arrow to the right of the Access box, and then select the publishing option best suited to your Web server and development environment. If you're using a commercial Web host (the most common option for small do-it-yourself sites), choose FTP. If you're working at a university, a large company, or an organization that has its own Web servers, refer to the nearby sidebar, "The multiple Dreamweaver publishing options," to understand your choices here, and check with your system administrator to find out which option is best for your system.

5. In the FTP Host text box, type the host name of your Web server. Directory text box, type the directory on the remote site in which documents visible to the public are stored. The information you enter in this field depends on your server. In some cases, you can leave the field blank if you log in directly to your site; in other cases, you use a different path, such as users/mysite/domain. Check with your service provider or site administrator to find out how your server is set up.

6. Enter your login name and password. Web services require a username and password to gain access to your Web server, to ensure that you're the only person who can make changes to your Web site. If you select the Save check box, Dreamweaver stores the information on your local computer and you don't have to retype it every time you log in to your Web server. Click the Test button to make sure that you entered everything correctly. If there are no problems, Dreamweaver responds with the message Adobe Dreamweaver CS3 connected to your Web server successfully.

7. Select the Use Passive FTP option or the Use Firewall option only if your service provider or site administrator instructs you to do so. If you a use a commercial Web-hosting service, you shouldn't need to select any remaining options in this section of the dialog box. Select Use Secure FTP if you have a secure Web server, but be aware that not all hosts support secure FTP. If you select this option and see an error message when you press the Test button, deselect the option and test again.

8. Click to select the Maintain Synchronization Information check box; Dreamweaver then automatically keeps track of any changes you make to pages on your local computer that haven't been uploaded to the server. Note: I never recommend that you select the Automatically Upload Files to Server on Save check box because I think that you should test your pages on your local computer before you publish them to the local site.

Leaving this box deselected prevents the possibility of accidentally uploading errors automatically every time you save a page on your local computer. The Enable File Check In and Check Out option opens an advanced feature that can be used to track files when multiple people are working on a Web site. 9. Click OK to save your Web server information settings and close the Site Definition dialog box. You're ready to start using the Dreamweaver FTP features, covered in the next section.

How to Select A Domain Name And Buy Web Hosting [Part 2]

harisree782@gmail.com (Mariam Williams) — Mon, 31 May 2010 15:28:00 +0000

What is a domain name?

A domain name is the internet address of a site. (For example, allwebdesigninfo.com is the domain name of this site.) You'll need to choose a domain name.

A domain name will cost around US$10-20 per year, but some web hosts will give you one for free.

Some domain name advice

A good domain name is simple, short, and obvious. What would people guess your domain name is?

Buy a .com domain name, even though it's harder to get a good one. Cheap domain names like .biz, .ws and .info are usually markers of low quality.
Acronyms are fine, but avoid abbreviations. Also, don't use numbers or dashes (without very good reason.)
Try to have your site name match its domain name. If you can, name your site to match its domain name, not the other way round.

What is web hosting?

Web hosting is where your website actually sits, on a computer, in a building somewhere, when you put it on the internet. You'll need to purchase web hosting, to put your site on.

Web hosting is the only thing you have to pay for, to set up a website. Everything else can be done for free.

Likely Cost: up to US$10 per month.

Choosing a web hosting provider is not easy. There's a huge number of very similar web hosts out there, and 99% of the information about them is from dishonest "review" sites.

Feel free to do your own research into web hosting, but I think you'll find it mind-boggling.

My recommendation for web hosting

I use FatCow web hosting for my sites, and I'm very happy with it. I switched to it because it has more positive reviews, on web hosting forums, than any other host I can find. It offers everything that a typical web host does, at a far lower price, and includes a free domain name. It also sells Canadian and UK domain names (.ca and .co.uk).

I've looked around for a cheaper alternative, but haven't found anything good that's cheaper than FatCow.

This is a link to a discount voucher for FatCow. When you're ready to sign up for web hosting and a domain name, make sure you visit FatCow through this link, and they'll give you 50% off the price: Sign up for FatCow hosting ($3.67/month) >>

Also, if you use FatCow, I can tell you exactly what to do, to set up your website.

Domain pointing (only do this if you buy a domain name elsewhere)

Go to the site you bought your domain name from. Log in, and look for Domain Pointing or DNS. Set your first two nameservers to NS1.FATCOW.COM and NS2.FATCOW.COM. Then wait. Contact them if you need help.

On the FatCow website, go to the Control Panel. Click Add Registered Domain to Account. Type in your domain.

You Might also Like
How to Create a Website – A Beginner's Guide [Part-1]

Flash Web Design Benefits and Drawbacks

harisree782@gmail.com (Mariam Williams) — Sat, 29 May 2010 07:09:00 +0000

Flash is a powerful tool that adds a fillip to website design, if used judiciously.

But before you use it, consider the Whys and Why Nots of Flash web design.

Advantages of Flash Websites

Interactive movies, animation and menus are possible
Flash animation is easy to create and easy to view
Flash is independent of browsers and operating systems. It can be viewed correctly by anyone who has the Flash plug-in.
Animated banner advertisements in Flash have higher click-through rates than static gifs.
Flash is good for web site intros and adds zing to a site
Video works well in Flash applications. It doesn’t need a plug-in that’s dependent on a specific operating system like MediaPlayer or QuickTime.

Disadvantages of using Flash Websites

Search engines crawl text, not Flash intros and banners. It’s tough to get an all-Flash website to rank high in search engines. Search engines have problems indexing images, even text rendered as an image. HTML pages get indexed in search engines like Google while Flash pages do not. This is a major reason not to use Flash. To overcome this problem you may need to create another site in HTML for the search engine crawlers. Be sure to include a robots.txt file that bars the Flash pages, so that these pages are not seen as duplicate content. You will also have to face the added effort of creating and maintaining two sites.
Ask yourself, what’s the purpose of using Flash? In general, Flash for the sake of using Flash serves no useful purpose. Visitors come to websites for information, not animation. Using a flashy introduction to grab a person’s interest won’t work unless your website provides well-written content that provides the information he’s looking for. Routine Flash website intros, with images fading in and out and text messages changing position, don’t capture the reader’s attention unless the messages are focused on his area of interest or stimulate him to visit the rest of the site.
Flash intros make the homepage take too long to load.Flash increases the size of the homepage which takes too long to download.Readers are time-conscious and may flip to another website by the time your Flash intro loads. Give them a “Skip intro” option so that they don’t miss the content on your site.
Audio files embedded in Flash increase download time.This can turn off visitors who might otherwise be interested in your site content.
Music and sound can be annoying to some readers.
They are forced to listen to the audio of your choice, not theirs. This can turn off visitors who may quickly exit from your site

Fresh Floral Logo

harisree782@gmail.com (Mariam Williams) — Fri, 28 May 2010 07:01:00 +0000

Now that Mother’s Day has come and gone, you might think that flowers would be so yesterday, however with our leap into spring, there’s still plenty of time left to enjoy a bright colored bouquet. So, in the spirit of the season, today’s Photoshop tutorial takes us though the steps of arranging an attractive floral logo design Follow me this steps

Step 1:

Create a New Document with a Multi-Colored Gradient Background

Let’s start with creating a new document with the size of 17×11 inches (the largest of the 3 brochure template sizes). Now, fill it with a gradient, use #e93e8b for your foreground color, and #fdd537 for your background color. Then, select Gradient Tool (G) and drag from the middle of the page to the bottom right diagonally to achieve the effect below:

Step 2:

Add Your Basic Text

This logo is going to appear on the lower right on our corner, so we will only use a small part of the canvas that we set up in step 1. So, let’s insert your text in now; we’re using Hursleys font face, downloaded from dafont.com, and a clean and simple white font color.

Step 3:

Create a Blurred Outline Effect Around the Text

Right click on your text layer, and select Duplicate Layer to make a duplicate copy. Then drag the duplicate layer underneath the original layer, go to Filter > Pixelate > Fragment. Then click Control F to apply the same effect again

Step 4:

Add Patches of Grass to the Logo

We have a basic logo set up, and to give it a nature feel, we’re going to add some grass effects. Create a new layer on top of all the layers, go to Brush (B) and select the one shown below:

Then go to Brushes Window, enter 25% for Spacing

And under shape dynamics, enter size jitter 100% and 8% for angle jitter

Then under Scattering, enter 3% for Count

Next, use #c2ee13 and slightly paint some grass on the text like what shown below:

Now let’s use a darker tone of green to give some depth to the grass, create a new layer, use #94b804 and change the brush pixel to 92, then paint some darker grass over the ones now:

Step 5:

Adding in Leaves & Flowers

Now, let’s add some leaves to our text. We’re going to be picking out some clean looking leaf photos, and then dragging the images and placing them underneath the text layers.

We will do the same using photos of fresh flowers. Place these images next to the the grass like how we did:

Now, let’s add more flowers using varied colors and sizes:

Step 6:

Using Floral Brushes for Decorative Touches

We are almost done here, and we only need to add some final touches. First, download some floral brushes to decorate the design; go to dezignus.com and download soulfulflowers2 brushes. You can try different brushes here, and with different colors. Just place it underneath your text layer.

Then, right click on the brush layer and select Blending Options, go to Outer Glow and change the capacity to 100% and size to 8%.

This is how it looks now:

Now our fresh spring logo has been completed.

Here are the logo’s results after placement in the brochure:

How to Create a Website – A Beginner's Guide [Part-1]

harisree782@gmail.com (Mariam Williams) — Thu, 27 May 2010 16:43:00 +0000

I'm Maiam Williams, a professional web designer from Uganda.

I wrote this beginner's guide to help the large number of people who want to create a website, but have absolutely no idea of what to do.

In Website Setup Guide, I show you exactly how to set up a proper, normal website with a .com domain name, from start to finish. I've omitted everything you don't need to know, so you can publish your site as fast as possible.

Setting up a website and running it this way will cost you about $3-4 per month in total. The information in this site is all free.

Many people have set up successful business websites, personal websites, and blogs, by following these instructions. It's very easy to set up a website by following this guide, but if you ever get stuck, you can email me[mariamwilliams786@gmail.com], and I'll let you know what you need to do.

Creating a website, in a nutshell

Take note of this overview. It's important.

To set up a website, you only need to do these two things:

1: Choose a domain name (i.e. something.com), and buy website hosting.

2: Create a website, using a web page editor or WordPress.

I will explain both of these things to you in the next two steps. Bookmark this page now, for future reference, and we'll begin with the first of these two steps

Adobe Flash To Eliminate Bandwidth Costs With P2P

harisree782@gmail.com (Mariam Williams) — Thu, 20 May 2010 17:36:00 +0000

Adobe is getting serious about their implementation of peer-to-peer technology to assist Flash-based video streaming and applications. The upcoming release of Adobe’s Flash Player 10.1 will enable publishers to dramatically reduce bandwidth costs by outsourcing media distribution to users.

The Flash team from Adobe has been working on their P2P Flash implementation for a while, but with the release of the 10.1 player it can really make a difference for online media distribution.

Kevin Towes, Product Manager of Adobe Flash Media Server told Beet.TV that the upcoming release of the Flash player will include new P2P technology that will “significantly change the way we think of media delivery.” According to Towes, this technology could in some cases completely eliminate bandwidth costs.

The system Adobe is offering to support P2P Flash is called Stratus. It is offered to developers free of charge and can support both live and on-demand video streaming. Besides video, Stratus can also be used for Flash based multi-player games and other forms of real time communication.

For broadcasters and video services, Stratus has the capacity to eliminate a significant amount of bandwidth costs. Instead of serving the media from a central server, users will provide the necessary bandwidth. Adobe’s Stratus system serves as an intermediary in this process, managing the communications between Flash players much like a BitTorrent tracker does for BitTorrent transfers.

Towes explained that Stratus users will first have to agree to participate in a P2P-enabled Flash swarm, similar to how they are now asked to indicate whether Flash can use their webcam. If users do not want to share bandwidth, the broadcaster has the option to offer a regular stream, a degraded stream or no stream at all.

Adobe’s Stratus project is not the first to combine P2P technology with Flash. Last year, during the inauguration of President Obama, CNN used P2P-assisted technology to send out the live stream to a million viewers worldwide. This required users to install a browser plugin called Octoshape, which then made the Flash video P2P compliant.

Other initiatives to serve on-demand and live streaming have been showcased by the Triber research team, who use a BitTorrent-based solution that does not require any central servers. Tribler is currently working with several European TV-broadcasters to test this technology in the real world.

The impact of Adobe getting seriously involved in P2P streaming could be a real game changer though. One of the main advantages Adobe’s Flash has is that nearly every computer has it installed, which should facilitate the adoption rate among content providers. One less hurdle to take, and a significant one. Via: Torrentfreak