Rethinking Web!!

Must Know- Php Developers

2013-01-09T18:44:00.001+05:30

1. Use PHP Core Functions and Classes

If you’re trying to do something that seems fairly common, chances are, there’s already a PHP function or class that you can take advantage of. Always check out thePHP manual before creating your own functions. There’s no need to create a function to remove the white space at the beginning and at the end of a string when you can just use the trim() function. Why build an XML parser for RSS feeds when you can take advantage of PHP’s XML Parser functions (such as xml_parse_into_struct)?

2. Create a Configuration File

Instead of having your database connection settings scattered everywhere, why not just create one master file that contains its settings, and then include it in your PHP scripts? If you need to change details later on, you can do it in one file instead of several files. This is also very useful when you need to use other constants and functions throughout multiple scripts.

Using a config file is a popular web application pattern that makes your code more modular and easier to maintain.

3. Always Sanitize Data That Will Go into Your Database

SQL injections are more common that you may think, and unless you want a big headache later on, sanitizing your database inputs is the only way to get rid of the problem. The first thing you should do is learn about popular ways your app can be compromised and get a good understanding of what SQL injections are; read about examples of SQL injection attacks and check out this SQL injection cheat sheet.

Luckily, there’s a PHP function that can help make a big heap of the problem go away:mysql_real_escape_string. mysql_real_escape_string will take a regular string (learn about data types through this PHP variables guide) and sanitize it for you. If you use the function together with htmlspecialchars, which converts reserved HTML characters (like <script> becomes <script>), not only will your database be protected, but you’ll also safeguard your app against cross-site scripting (XSS) attacks when rendering user-submitted HTML (such as those posted in comments or forum threads).

4. Leave Error Reporting Turned On in Development Stage

Looking at the PHP White Screen of Death is never helpful except for knowing something is definitely wrong. When building your application, leave error_reportingand display_errors turned on to see run-time errors that will help you quickly identify where errors are coming from.

You can set up these run-time configurations in your server’s php.ini file or, if you don’t have access to override the directives in this file, set them on top of your PHP scripts (using the ini_set() function to set display_errors to 1, but it has its limitations when done this way).

The reason behind turning on error reporting is quite simple — the sooner you know about your errors, the faster you can fix them. You might not care about the warning messages that PHP might give you, but even those usually signal towards a memory-related issue that you can take care of. When you’re done building out your application, turn error_reporting and display_errors off or set their values to a production-ready level.

5. Don’t Over-Comment Your Code

Proper documentation of your code through comments in your scripts is definitely a good practice, but is it really necessary to comment every single line? Probably not. Comment the complicated parts of your source code so that when you revisit it later you’ll quickly remember what’s going, but don’t comment simple things such as your MySQL connection code. Good code is self-explanatory most of the time.

Good Example of Commenting

<?php

/* CONNECT TO THE DATABASE */

$hostname = "localhost";

$username = "";

$password = "";

$dbname = "";

$connectionStatus = mysql_connect($hostname, $username, $password) or die(mysql_error());

$selectionStatus = mysql_select_db($dbname) or die(mysql_error());

/* END DATABASE CONNECTION */

Bad Example of Commenting

<?php

/* DEFINE THE CONNECTION VARIABLES */

$hostname = "localhost"; // Hostname

$username = ""; // Username

$password = ""; // Password

$dbname = ""; // Database name

// Connect to the database or display an error

$connectionStatus = mysql_connect($hostname, $username, $password) or die(mysql_error());

// Select our database here

$selectionStatus = mysql_select_db($dbname) or die(mysql_error());

6. Keep Favorite Code Snippets Handy

You’ll be coding a lot of the same things throughout your PHP development career, and keeping code snippets always available will help you save a lot of time. There are several apps that can keep and sync your code snippet collection for you, so no matter where you are, you can always have your snippets available. Some apps you can use to corral your code snippets are Snippet, snippely, Code Collector, and Snipplr(web-based).

Most integrated development environments (IDEs) such as Eclipse (which can store code templates) and Dreamweaver (via the Snippets Panel) may have built-in features for storing code snippets.

Even a simple and well-organized directory called snippets that contain text files (or PHP scripts) — and possibly synced in the cloud using an app like Dropbox if you use multiple computers — can do the trick.

7. Use a Good Source Editor to Save You Time

Your editor is where you’ll spend the majority of your time, so you want to use something that helps you save time. Syntax highlighting is a must and definitely something you should be looking for as a software feature. Other bonuses include code hinting, code navigation and built-in debugging tools. All of these features can end up saving you massive amounts of time. An example of a source code editor/IDE for PHP is phpDesigner.

Take the time to get familiar with your source code editor’s features by reading the documentation and reading tutorials online. A bit of time investment in this arena can really streamline your coding workflow.

Check out this list of source code editors for developers as well as this list of free text editors for coders to discover popular code-editing applications.

8. Use a MySQL Administration Tool (Like phpMyAdmin)

I know some crazy hard-core developers who like working with MySQL (the popularDatabase Management System pairing for PHP) via command line, which, to me, is inefficient and just, well, crazy. It’s a good thing to know how to administer your MySQL database using mysqladmin, but afterwards, you should use a graphical user interface like phpMyAdmin to speed up database development and administration.

phpMyAdmin, in particular, is an excellent open source database viewer/manager that allows you to view your MySQL databases graphically so that you don’t have to waste time doing things via the command line. You can quickly build databases and their tables, export your databases into SQL files, run SQL queries, optimize tables, check for issues, create MySQL database users and set up their privileges quickly, and much more. There is a good chance your web host already has phpMyAdmin installed, and if not, it only takes minutes to install.

Check out this list of the best MySQL database management tools and this list ofMySQL apps for alternatives to phpMyAdmin.

9. Use a PHP Framework

It took me a really long time to accept the fact that using a web application development/rapid application development framework would help me out. You have a small learning curve in the beginning, and there will be a lot of reading to do to learn how the API of the framework works, but you get amazing productivity and efficiency benefits later. Using a framework forces you to use better web development patterns that you might not be using right now.

Using a PHP framework pays off big time when you have to share your code with others later on or when you have to work together with someone; it gives you a standardized platform for building web applications. I learned the importance of this the hard way when I had to start hiring other developers.

Some popular PHP frameworks are CakePHP, CodeIgniter, symfony, and Zend.

10. Connect with Other PHP Developers

You don’t know it all. And even if you think you do, there are thousands of others out there that know how to do something better than you do. Join a PHP community likePHPDeveloper and interact with others. By connecting with other developers, you’ll learn better ways of doing the things you’re currently doing.

Many thanks: http://sixrevisions.com

5 things an e- commerce site "Must Have"

2012-12-05T19:11:00.000+05:30

If you own a small business but don’t actually sell products on your website, you need to pay ATTENTION!!!. For retail and restaurant websites, these are some of the features that your site MUST contain, but many sites miss some or all of IT. For retail and restaurant websites, these are some of the features that your site MUST contain, but many sites miss some or all of these, or they’re too hard to find to be effective.

Even if your website consists of only a single page, make sure that it has no less than the following, in no particular order.

Store hours

Telephone number

Street address of all locations

A list of products and brands that you carry

Specials, sales, and web coupons

1. Store Hours

Make sure that your site clearly lists the standard operating hours and holiday scheduling. If you aren't operating an eCommerce site, try to put these on every page. If you have multiple locations, make sure to put the hours for every location if they are different.

Don’t make it difficult to find your operating hours. Putting them prominently in the sidebar or footer of every page is a great way to do this in a clean and elegant manner.

2. Telephone number

Your local, and toll free if you have one, phone number should be clearly listed on every page of the website. If your business provides any sort of continuous support, make sure you put your after hours or other pertinent support numbers on there as well.

3. Street address of all locations

Every location that you operate should be listed on your site. If you only have 1 location, put the street address and a link to a Google map on every page. The footer is an excellent place to do this.

If you have a handful of locations, use a dedicated page for all locations, and make sure to include a Google map link, and the business hours for each location on the same page.

If you have many locations, a “find nearest location” search function should be accessible from every page. These are best placed in both the header and footer of the site. You can put a quick zip code based look up in the header of every page to make it extra-easy. Again, on the detail page for each location, make sure to put a maps link, the phone number, and the business hours for that particular location.

4. A list of products and services that you carry

You know a lot about your business, but a new customer probably won’t know specific details just from your name alone. You should always list major brands that you carry, or if you provide services, and anything else a customer might want to know before coming into your store.

“We sell sporting equipment” is not a good description.

“We sell the finest rock climbing, kayaking, and camping gear, and a full lineup of outdoor supplies and equipment” is much better!

5. Specials, sales and coupons

When you market to an audience on the internet, you are just one of a million other websites trying to sell to the same people. By providing web coupons, listing specials, and current sales, you instantly connect with your customer and they are far more likely to stay on your website, bookmark it, and later come into your store.

This is probably the least utilized marketing effort by small retail businesses, and it makes a big difference. You've paid someone to design, program, and host your website. If you aren't getting the people that visit it, to take action, you’re wasting your money. Or they’re too hard to find to be effective.

Why Websites SUCK and how we make them BETTER!!!

2012-09-14T20:28:00.000+05:30

!!!!!!!!!Here is a list of ten reasons on why most small business websites suck and ten ways to make their small business website better!!!!!!!!!

Reason why websites "SUCK":

Static websites with no fresh content
They took the “cheapest” route to get online just because they heard they should
No call to actions
Design is horrible
Using Flash
Using a free website solution that either uses a sub domain like yoursitename.freeservicename.com or puts their ads on the free website until you upgrade to take it off.
Small Business owners are usually great at what they do but don’t have a clue on the latest user interfaces, user experience techniques, and just think once they have a website they are done.
Most of the small business websites we see are great for “current clients” in mind but aren’t used as sales tools or a welcome mat for new customers to sign up, call, or buy your product or service.
They built their website in 1999 when people and phones both were not "Smart" and folks used terms like "Floppy drives" and it still looks like they were built in 1999
They don’t treat their website like they do their location or real estate. When they find an office or a location to start their business they put thought into that and maybe even are willing to invest 20k a month for their retail or office space. But then they go and spend 2k on a crappy website? Your web space is virtual real estate and should be looked at that way.

How will we make it better:

Use WordPress
Invest money in (local web designer's) who have an updated portfolio of websites that fits your style and needs. Obviously like us!
Check out services like www.rethinkingweb.com if you still want a great web design but are on a low budget.
Get a great domain name and consider either a great brand strategy related to your business name or use the main keywords of your service or product within the domain name. www.webmaharaja.com is a great place to buy domain names because they don’t sucker you into going through ten pages of crap to try an upsell stuff you don’t need.
Use really good hosting that has 24/7 live chat support similar to www.webmaharaja.com and allows use to build other websites down the line if you need to. They also have 1-click installation of content management systems like WordPress.
Think of a content strategy once the website is up. Are you going to blog to keep your site fresh with content related to what you do? Or maybe have a videos that you do and upload to the site if you aren’t into writing all the time.
Answer questions that customers always ask you in person on your website. This way when they call they are ready to buy or just need a little more clarification before pulling the trigger on using your service.
Don’t use flash, we are now in 2012
Use WordPress plugins to make your site mobile friendly or help with the on page SEO structure of the site
OR – Find a website management & marketing company you become familiar with, like and trust to do all of this for you so you can focus on your business. You don’t expect a web design and internet marketing company to know how to pull a tooth if you are a dentist, or change your oil if you are an auto repair shop, so we don’t expect you to build all of this better then someone that lives and breathes this every day..? If you want to take a shot at it keep some of these tips above in mind and let us know if you have any questions.

Why is it alright to pay a little more for a well designed website!!!!

2012-09-08T16:40:00.000+05:30

Your website is open 24/7

A website allows your business to be open 24 hours a day, 7 days a week and 365 days a year. There are millions of people, from all over the world, online at any time of the day. Many of them are looking to source products or services. If you run a conventional brick and mortar business, you can only attract the people who walk or drive past your shop, in any one day. Having a website designed for you allows you to attract new customers that would otherwise never find you - and they can do so when your shop is closed! A well designed web site also gives them a reason to revisit the site in the future. While we invest millions in designing and maintaining our shop or office to make sure we create the right impression on our customers, the same should apply for our website, wherein, not every designer or agency can achieve your vision and put it online in a professional and aesthetic manner.

Websites increase customer confidence

A professional, well designed website, with the right content, easy navigation and quickly accessible contact details, greatly increases customer confidence in your company. A well designed website shows people that you are forward thinking and customer focused, much in the way a well designed business card did in the past, which is an important factor in any buying decision that they have to make.

Websites increase customer referrals

What is easier to remember, www.rethinkingweb.com or +919167677045?
A website address is much easier to remember than a telephone number, so it stands to reason that having a website increases the likelihood of referrals - and let's face it, referrals are one of the most important sources of new business. Without referrals and leads any business around the globe would stand no chance of surviving.

A website address increases the ROI when advertising

Including your website address on all of your adverts, business cards, letterheads, invoices, etc allows people to take action straight away, when they view an advert, or hear about your product or service. Visiting your website is so much easier than driving to your store, telephoning or writing a letter to you. When online, a potential customer can take their time and enjoy finding out about your products or services without the pressure of having a salesman floating about in the background. In fact with constant updates and technological development it is much easier now a days for your potential and existing customers to interact with you whilst they are on the website via tools like live chat, contact forms etc.

Website sales

Your website is one of the most impressive sales presentations that you will ever have. Allowing your customers to buy your products or services online is a wonderful and inexpensive way to expand your business. Spending thousands on advertising, for an ad that is featured in one mag, for one month simply doesn't compare to investing in a long term sales marketing solution - or a well designed website as we like to call them!

Even if you do not offer a product or service that can easily be purchased over the Internet, a website still acts as an impressive first contact, convincing the potential customer that they need what you are offering and inviting them to contact you, via telephone, email or contact form on your website. In short your website acts as your silent salesman.

Websites promote future business

When a potential customer comes into your shop and leaves without making a purchase and without speaking to anyone, they are basically a dead prospect. When someone views your well designed website and doesn't make a purchase straight away, they can easily revisit anytime to make the purchase in the future. On top of that, you can use your website to collect the email addresses of visitors and send them periodical promotional emails, newsletters or updates on your product or service. So although they may not buy first time around, you have more than one opportunity to close the sale!

RethinkingWeb believes in designing and developing websites which work for you and not just be brochures online which just give out information and not give back ROI. With “Dynamism” being the name of the game, we always have tried giving more than required. When it comes to delivering the best results we don’t compare we set the benchmark for others to follow.

Email communication- Important and Effective!!!

2012-08-29T16:43:00.000+05:30

Email Signature Tips @ www.rethinkingweb.com

Make it easy for people to contact you and find your services by creating a great email signature. Here are some tips:

Use 2 hyphens and a space (-- ) as the first line of your signature. It's the official way to indicate the start of a signature
Make sure it's in plain text so people can copy/paste it
Keep it as short as possible, say less than 10 lines
Don't exceed 70 characters per line
Include your full name
Include your position
Include your business name
Include important phone numbers
Include your websites address and make it a link
Include a small logo or even photo of you. Keep it smaller than 100x100 and make sure you specify its width and height in the html
Reference images from somewhere on the internet so others can see them. E.g. on your website.
Don't include personal stuff like your own website. Keep a separate signature for that
You don't need to include your email address. That's already in the from field
Only add a legal disclaimer if required
Only include your business address if you have walk in customers
Don't add quotes or personal comments as they make a signature large and may offend

Email Signature Ideas

And some ideas on how to further enhance your signature...

Use your business colours and font
Include links to other networks such as LinkedIn, Facebook Fan Page and Twitter accounts
Link to a vCard file (don't attach one) which can be used to quickly add you to their address book
Add some sales pitch, like a link to a new offer or service
Encourage clients to write a review or testimonial about you
Add certification images

It's best to use a branded email address if possible. E.g. use your websites domains based email account over your ISP (@bigpond.com.au) or web (@hotmail.com) addresses. It's more professional and invokes trust.

I have several signatures for different uses. E.g. personal, business, replies, promotions. Make your signatures suite the moment. Reply signature should be shorter than main signature so that you don't clog up long conversations with long signatures.

Facebook Comments Will Now Be Indexed By Google

2012-03-16T15:41:00.000+05:30

Google’s indexing initiative has potentially raised eyebrows of many people, while providing smile for others. News points to Google’s intention to index facebook comments (including others which are accessible only through an HTTP POST request).

Indexing by Google

With the indexing of comments, Google shall present user comments as standard search engine outcomes. The aim is to contain anything which lies hidden behind a form, like facebook, Disqus and other JavaScript-based applications. These powerful and easy to use web applications have served considerably in connecting people across the web effortlessly (one of the most vital reasons for their huge popularity).

There are two key requests which can be initiated on the web, namely GET and POST. The GET request is meant to read data, while the POST can ‘alter’ data. For this reason, search engine robots (like Google’s) have been sticking to the GET requests. Since reading data brings in no alteration to the content being read, Googlebot (program which determines which web sites to crawl and collects documents from the web) seemed a passive observer. But now, it can interact (and possibly alter) the content it crawls. However, there is less feasibility that Googlebot will ‘alter’ data.

Google could have done indexing of web content much earlier. With the emergence of Ajax (the technology which reduces the time lag between your click and search result) long ago, Google could have implemented this technique earlier. However, this is only an opinion.

The favorable element

Expanding search engine operation can extend the content and increase suitability. Users can expect to receive more appropriate results and click on what exactly they have been looking for.

This interesting change can be good news for SEOs, who otherwise find commenting platforms not much usable. The blog commenting did not provide search boosts to their websites till now. However, with this change, the text from comment boxes will be delivered in Google search.

More importantly, it will help users discriminate between what to comment and what not to comment online.

The unfavorable element

Considering the other side of the story, there is concern among developers regarding the POST requests of Googlebot. The involvement of robots increases the feasibility of errors, and any untoward incident may not be outright rejected. However, robots.txt file can be used to disallow Googlebot from crawling a website’s forms (for POST URLs).

Private users may not be happy regarding the invasion being done to their comments. Facebook users use the privacy settings to their advantage, when not wanting to socialize liberally. But with indexing, their names and comments will be revealed. Individuals have their boundaries set, and intruding into a ‘restricted area’ may be unwelcome. Facebook may come to help it users in some way, protecting their privacy.

Wait and watch

Google has revealed responsibility and does not intend to perform any task which can potentially lead to an ‘unintended user action’. With the growing popularity of user-friendly community portals like facebook, traffic is a crucial component in the industry. Many users may find it discomforting for their words to be made public.

It is time to actually ascertain the ups and downs of a technological innovation. Words are said to be more harmful than the deadliest weapons in the world, and it appears that there is going to be a sound motivation to this guideline.

Written by Guest Author

This post is written by guest author

Kindle'd!!!!! FIRED up Amazon

2011-10-01T14:17:00.002+05:30

THE tablet computer has been the most talked about piece of technology since Apple launched its iPad in March last year.

Profitable and aspirational, that device sparked a rush from rival manufacturers eager for a slice of a new market.

This week it was Amazon’s turn, and the Kindle Fire looks set to be the first gadget to have a real chance of sales on the scale of the 50m the iPad is set to sell worldwide in 2012.

In fact, however, the two tablets are very different: where Apple’s device sells from $499 in America and £399 in the UK, the Kindle Fire will be just $199 – no Asian release details have yet been made public. The difference is down to the firms’ contrasting approaches: Apple seeks some profit up front, while Amazon may be losing up to $50 per device because it sees the Fire simply as a means to the end of selling digital music, films, apps and games. Analyst Gene Munster says: “Apple is monetising the hardware up front with a 30pc-plus gross margin on the iPad.”

In short, Amazon is not suggesting its tablet is simply a device – chief executive Jeff Bezos told technology blog TechCrunch that what he was launching was in fact “an end to end ecosystem”, offering consumers the opportunity to purchase huge amounts of content. In that sense, like the original Kindle, the Fire is an old-fashioned loss-leader.

Bezos, who is also Amazon’s founder, said the full-colour, touchscreen device, would be a premium product “at a non-premium price”, and called the new Fire “an incredible achievement”.

Certainly, no rival has managed to produce a device of the quality of the iPad for significantly less than Apple’s prices. When HP, however, decided to leave the tablet market, demand for its discounted TouchPad massively outstripped supply and demonstrated a huge public appetite for tablets at the right price.

Munster claimed the Kindle Fire’s 7in screen size put it at a disadvantage to the iPad’s 10in format. Amazon, however, has seen its older Kindle sell well because its similar small size makes it more portable.

For Forrester analyst Sarah Rotman Epps, Amazon’s tablet strategy is set to succeed. She praised the company’s approach, writing that “Amazon is competing on price, content, and commerce”.

While Rotman Epps concedes that “Amazon still lacks a convincing global strategy compared with Apple”, because the Kindle Fire will only be available in the US, she believes that “Amazon will sell millions of tablets, and the rapid-fire adoption of the Kindle Fire will give app developers a reason – finally – to develop Android tablet apps.”

But the company, crucially, is doing so not by competing with Apple directly. Amazon’s ambition is mass market adoption, leaving Apple with its traditional, massively profitable niche. It will be an uphill battle.

Blog referenced by Mr. Warman, Consumer Technology Editor

Facebook's new feature

2011-09-14T20:44:00.002+05:30

Hi all,

Just laid my eyes on this fantastic article, about how facebook is going to outdo Google+. So here goes.

Friend Lists, of course, have been available on Facebook for years now. But most people never bother with them because they’re a total pain — scrolling through hundreds upon hundreds of friends to compile lists is just a chore without much immediate reward. But Facebook thinks this new feature will change that, at least for some users.

The feature, which I’ve been briefed on but haven’t gotten a chance to test out myself, works much as you’d expect. First, Facebook will generate a handful of lists automatically — one for your coworkers, one for people you attended school with, and one for friends who live within the same city as you. That’s a good start, and it’s also easy to make lists of your own. Facebook says that if you create a new list and add a few friends, the site will automatically suggest additional friends that it believes belong in the same list.

Finally, there’s one list, adorned with a star, that highlights your very best friends. Facebook won’t automatically suggest anyone for this list — the company thinks users will only want to include five or ten people, and that it’s best to leave it to users to choose them. And the list has a special property: every time someone on this list of close friends makes an update or posts a photo, you’ll see it in your feed no matter how small a change it is, and you’ll (optionally) get a notification about it (notifications are those alerts marked with a red badge at the top of the screen).

And there’s a new list called Acquaintances that also has special properties, but in reverse: add someone to it, and only the most important status changes (marriages, new jobs, etc.) will appear in your News Feed; you’ll ignore their day to day posts.

Once you’ve created your new friend lists, you’ll be able to use them the same way you’ve always been able to: namely, you can selectively share content with certain groups, and you can change permissions on your profile visibility for each list.

Today’s launch will doubtless draw some comparisons to Google+, which has a strong emphasis on sorting your friends into Circles, which are analogous to Facebook’s friend lists. But despite that emphasis, Facebook has actually beaten Google+ to the punch on recommending who you put into these groups — Google+ is great at surfacing people you might be interested in following, but it doesn’t yet do much to help you sort them.

A 21st century blunder

2011-09-02T19:23:00.002+05:30

With so many web designers and so called web designing companies, we are now on the verge of "Designer Explosion" somewhat similar to our very own problem of the country, "Population Explosion". Anyway, it is also heartening to know that many young and old alike, responsible citizens of our country are now channelizing their energies into designing than just waiting to vote every year and see how that plays out until next.

Now with all sincerity, these freelancers have now got to also understand that by just sitting their for years doing the same thing over and over again is not only squashing their designing world's but also making them redundant and useless. There are certain things which one needs to be aware about regarding working in a dynamic environment, where change is bound to happen one point or the other. Now you either be a part of the change or say "ta da" to your so- called profession. Many designers and sometime people themselves commit certain common errors which diminishes their power to impress prospective clients. These errors are the biggest blunders, that could tarnish your own portfolios and profiles.

Some of the things a designer has to keep in mind all the time are:

1) You create a website to engage your viewers in the content and images on your website and not to squander their patience. The imagery and content has to be relevant to the central theme of the website, making the most of USABILITY, adding confusing language and images to impress God knows whom, our so called designers make the visitors impatient, resulting in them calling these designers a few names and saying goodbye. SO STOP THIS.

2) Flash based websites- It looks good when those images are moving in a particular manner on your website and then you have flash intros and flash headers which make your website look really "Exclusive" (Yes, that is what designers have told me,Exclusive), however, how much of good are you going to get out of that, if only you can pleasure yourself out of it and no one else even sees it. Grow up! it is time we used "latest technology" (which is available freely) and use them for these similar effects rather than conning your clients out of money promising them exclusivity.

3) Using images for text- For the vast majority of basement web designers doing this for the first time, it is extremely common to pitch a site with an unsupported font for a header or body content. Come development time you realize that you can’t put that font in real text and your client absolutely loved it! In fact it’s so unique they’d never seen a site do that before (for a reason), you’re a hero! We’ll guess what ::fail::… now you have to put all that great content in an image and none of the engines will ever get to read it.. Stay away from this mistake, learn the difference between a web safe font and a non-web safe font. D'oh!

4) Check your spelling and Grammar- When I have some time to waste, I indulge myself in reading letters and articles which have spelling mistakes, and there is no shame on laughing at these errors. When there are many ways of proof reading and making sure whether your statements are grammatically correct and your words are spelled correctly, people still commit these follies, and so do our "basement designers". You give websites marvelous designs and layouts but then throughout the website, if there is one spell error, you are done for! Those hate mails, disgusted looks among fraternity and taunts from customers and the woman walking her dog would be unbearable, confining you to your basement.

5) Set your design standards as high as possible- Never refrain from learning, don't go around saying, "Oh, I know everything", people who say that, normally, are the one's living in the Ice age, because in the 21st century, technology, criteria, mechanisms etc. are changing every day, in fact every hour. So get out there read books, blogs, articles related to latest trends and keep your webbed head up to date.

Saying so, I must warn each and every one of you designers out there, We have the Chinese, American and designers all over the world to compete with and not just "Basement buddies" Pull your socks up (if you wear any) and get your designs out there. Happy Eid and Ganesh Chaturthi to all.

Using Gmail, Calendar and Docs without an Internet connection

2011-09-01T21:43:00.002+05:30

The great thing about web apps is that you can access all of your information on the go, and we’ve introduced ways to use Google Apps on a variety of devices like mobile phones and tablets. But it’s inevitable that you’ll occasionally find yourself in situations when you don’t have an Internet connection, like planes, trains and carpools. When we announced Chromebooks at Google I/O 2011, we talked about bringing offline access to our web apps, and now we’re taking our first steps in that direction. Gmail offline will be available today, and offline for Google Calendar and Google Docs will be rolling out over the next week, starting today.

Gmail Offline is a Chrome Web Store app that’s intended for situations when you need to read, respond to, organize and archive email without an internet connection. This HTML5-powered app is based on the Gmail web app for tablets, which was built to function with or without web access. After you install the Gmail Offline app from the Chrome Web Store, you can continue using Gmail when you lose your connection by clicking the Gmail Offline icon on Chrome’s “new tab” page.

Google Calendar and Google Docs let you seamlessly transition between on- and offline modes. When you’re offline in Google Calendar, you can view events from your calendars and RSVP to appointments. With Google Docs you can view documents and spreadsheets when you don’t have a connection. Offline editing isn’t ready yet, but we know it’s important to many of you, and we’re working hard to make it a reality. To get started using Google Calendar or Google Docs offline, just click the gear icon at the top right corner of the web app and select the option for offline access.

IT administrators can deploy Chrome Web Store apps to users en masse by setting uporganizational policies for Chrome.

Today’s world doesn’t slow down when you’re offline and it’s a great feeling to be productive from anywhere, on any device, at any time. We’re pushing the boundaries of modern browsers to make this possible, and while we hope that many users will already find today’s offline functionality useful, this is only the beginning. Support for offline document editing and customizing the amount of email to be synchronized will be coming in the future. We also look forward to making offline access more widely available when other browsers support advanced functionality (likebackground pages).

The Era of Online Relationships

2011-08-02T16:13:00.000+05:30

Online presence is a must for organizations today to promote and build up their brand and also business. Read on to know how Indian SMBs should do it.

Some 25 years ago, a tech company called Symbolics registered the first .com domain name, marking the first time that a private company had presence on the Internet. At that time, most people had no idea what a mobile phone was in India, much less a website or an email. A quarter century later, economic reforms and tectonic changes in India have opened flood gates for consumers and consequent competition among brands. Though the fundamentals of managing relationships with various stakeholders remain the same, the contours have undergone a sea change in the digital era. The traditional media is itself witnessing a major transformation as the 'giant world wide web' envelopes the world. 2011 will be remembered in history as the era of online relationships, and Indian businesses, entrepreneurs and particularly the 15 Million SMBs operating in the Indian business-scape must adopt online brand building in their strategies and adapt to this unprecedented rise of Web 2.0.

Consider some of these statistics that substantiate the need to invest in online relationships. According to industry reports there are about '1.5 billion Internet users globally', compared to an estimated '81 million users' in India. The country is projected to become the 'third largest' globally in terms of Internet users by '2013', only behind China and US, which have 300 million+ and 200 million+ users, respectively of the Internet population. The total number of domains registered in India is only about '1.5 to 2 million', viz-viz the '190 million domains registered worldwide.' There is a huge gap here, and the potential' of growth for the domain registration industry is huge, with Indian businesses getting ready to explore a whole new business dimension in the online space.

The time is ripe for small & medium businesses and entrepreneurs with large ambitions to bring their brands alive and reach out to their consumers through optimal media. The web offers an exciting opportunity to complement high-level storytelling with product related education.

Websites: Your gateways to brand popularity

So how do we do it? For the purpose of this article, let's focus on one of the most integral and effective tool of enhancing brand presence and managing online relationships – your own website. Here's a simple guide to create your website and use it for myriad purposes -- internal communication, external sales, marketing and yes, recruitment. Here goes:

Get a friendly and memorable domain name to drive competitive advantage! : Your domain name is your gateway and reflects your personality in the online world. A friendly and memorable domain name is the essential first step that should not be ignored. The choice of your domain name is often something that is not pre-thought of, but can work wonders to eventually build your brand. A domain name that is crisp, easy to remember, resonates with people and has relevance will give you that competitive edge. For e.g. if you were a professional choreographer and were to build a website that focuses on teaching the dance form of Salsa, the domain name “learnsalsa.com” would give people an idea of what your website stands for! In other words, a domain name identifies a particular site and is the most elementary and defining tool to have a powerful online presence. Do note that once a domain name has been registered, it is no longer available. In short, What's in a name... Everything.

Select your 'host': If a builder needs to build a shopping complex, he would have to buy a space first! Similarly, to create a website, you have to buy a “Hosting service” - a type of service that allows individuals and organizations to make their own website accessible via the World Wide Web.

Design it...Yourself: Many entrepreneurs and businesses miss the bull's eye due to lack of technical knowledge involved in making a website or associated costs. A good option is the 'Do-it-Yourself' services that allow you to make your own sparkling new website in just minutes, and add your personal touch without any prior HTML or coding knowledge!

Leverage SNS for promotion: People today are increasingly getting social in the virtual world! With an array of social networking sites, people are constantly sharing personal profiles, interests, socializing with like- minded individuals. With the onslaught of social media, promotions have become so easy. Apart from opening up a fan page on your favorite networking platform, and linking your website on the same, it is essential to generate traffic on your website to drive sales queries. Next, register your webpage with credible search engines / internet directories for successful rankings for one or more popular search phrases.

Do not fill it, shut it, forget it: It's crucial to constantly monitor your website's performance in terms of bandwidth, search engine rankings, ability to generate traffic. Usually, your host provider will provide you with some of this information free of cost. You may use one of the many Analytics softwares and to ensure that you get regular traffic, you would need to invest in services like SEO. Also, it is important to secure the customer's privacy on your website. Secure your customer's identity and financial details with digital certificates that help you gain customer confidence and increase the level of security on your site.

So, go ahead and take that first crucial step in unleashing the true potential of your brand.

Author: Bhavin Turakhia, CEO and Founder of Directi and BigRock.com

How to remove Malware from Your Site?

2011-07-14T23:50:00.002+05:30

Nowadays, more and more Websites are facing online threats and being infected with viruses, injections, backdoors, malware, adware pop-ups etc. When someone opens an unsecured Website then infections gets transferred to his/her computer through cookies and cache. On detection of malware, famous search engines and security software companies can blacklist your Website. To be on safe side, you should scan your Website through online tools and take necessary steps to remove the infections. We will illustrate the ways to detect and remove virus infection through your Website in this article.

NOTE: We suggest you taking the backup of your Website (files & database) and scan it on following tools on weekly basis.

Detection

You can scan your Website at following famous online tools:

McAfee SiteAdvisor

AVG Threat Labs

Sucuri Site Check

Norton Safe Web

Google Safe Browsing

TrendMicro Site Safety

Unmask Parasites

Amada Malware Database

URL Void

VirusTotal

PhishTank

Online Link Scan

Browser Defender

Confirming the Detection

If any one of above scanner list the infection then it is the time to trace it out. You can use the ‘Firebug’ extension for Google Chrome & Firefox to trace the culprit code. Most of the times, the infected code is hidden in the files or adds up as a redirect in the .htaccess file. Following are the steps to confirm the virus infection: -

If you have a backup of Website files prior to detection of virus infection, then download all the new files from the server.

Download and install WinMerge Tool to compare the files.

Compare the new files with previously backed up files using WinMerge.

Download Lynx, command line browser, to browse the Website and detect any hidden code.

Protection from blacklist

Do you want to save your Website from being blacklisted? Yes, then you should immediately purchase a hosting at a new Hosting Provider, which provides secured Web Hosting on daily or monthly basis. If necessary, you can also book a new domain name quite similar to your Website.

You must have a good & safe backup of your Website files and databases, dating before virus detection. Upload these previously backed up file and export database to the new hosting. Make sure to change the DNS settings in order to redirect the visitors to new safe Website. If necessary, take help of new Website Hosting Provider to configure the DNS properly. After recovery, you can change the DNS settings to redirect the visitors to the old Website.

Action Time

It is the time to remove the infections and retrieve your Website. Perform following two actions when a tool detects infection:

List out the tools, which have notified your Website as unsecure and download their reports.

Note down the infected links, their location, type of infection and other details mentioned in the reports.

Scan the computer(s) on which you have access to the Website with a trusted antivirus and dedicated antispyware product.

Erase all the login details to access your Website like that of FTP, Control Panel (cPanel), CMS Dashboard etc.

Reset the browser(s) and completely delete their Browsing History.

Before proceeding to next steps, you should make sure that your computer(s) are totally secure and does not have a single infection. If necessary, you can backup your data and get formatted your computer. Now, you have to take following actions to remove infections from your Website.

After performing each step, you should open your Website in the browser to check the symptoms and test at the listed tools of Step 1.

Check the .htaccess file and remove any suspicious code. Not sure which one is the suspicious code then replace it with the default .htaccess file. If you do not have the backup of default .htaccess file then visit CoolTips htaccess Generator, configure the options and generate a new .htaccess file for you. If you are using a CMS then visit their support/forum section and get a default .htaccess file.

Visit http://www.htaccesstools.com/htpasswd-generator and generate the code to apply username and password to access .htaccess file. Insert this code inside the .htaccess file.

If you have not booked a new domain and hosting then create a Site Maintenance page specifying that ‘Your Website is under maintenance for NN hours/minutes.”

Add a redirect in the .htaccess file to redirect all of the visitors to a Site Maintenance Page.

You can also email the registered users or subscribers about the downtime with a request not to browse your Website in prescribed timings with a genuine reason like “to avoid load shedding” or “to help in quick maintenance”. After the recovery process, you can email them again specifying that your Website is up and running.

Immediately remove the identified suspicious code from each location of your Website.

If you using a CMS then disable all the plug-ins or extensions, themes etc. one by one. We suggest you to disable one at a time until you identify the main culprit extension. If you do not find any conflicting plugin or theme, then do not enable the plugins/themes back.

Remove each additional code from your Website, which you have added for extra features like social sharing options, analytics code, license code, banners etc.

Test your Website now with above tools. If they do not find any infection then it is good to go else continue to perform steps.

Most of the Website Hosting companies provide the options to scan the file system and database through trusted antivirus on demand. Contact your host and check whether they provide such service or not.

If your Web Host do not provide scanning services then download all the files to your computer through FTP or SFTP.

Take back up of the downloaded files at a safe location.

Scan the files with trusted antivirus.

Remove infections, if detected. If not then skip step 15 to 17.

Remove all the files from the File System of your Website and upload the scanned files through FTP or SFTP.

Try to open your Website and check whether it opens up or not.

If the Website does not open then remove the files at your server and upload the backup taken in Step 9.

If above steps does not work then take services of experienced security professionals to recover your Website.

Still no help after performing each step then it is the time to reinstall or re-setup your Website from scratch. Backup all the files & databases; remove them from server, and then setup from the beginning of the time. If you are using a CMS then reinstall it from starting and re-tailor it according to your need.

Conclusion

It is the best practice to backup your Website and scan it using above listed tools on weekly basis. In addition, you should perform above steps to recover your Website from the infections. We invite our readers to provide feedback and suggestions through their valuable comments. You can list your experience with virus detection and removal at your Website.

CTRL+F5 RethinkingWeb

2011-07-12T12:21:00.005+05:30

Hi followers,

With the monsoon living up to its expectations (not in the case of some people like my partners), anyway, I am enjoying the monsoons and also the fact that it is now more than a year that RethinkingWeb has been in operations and thanks to all you well-wishers and a larger share of thanks (if there was any) to our esteemed clients and partners, who have made this a convenient journey and helped RethinkingWeb up its scale of operations and go big!

We have just recently revamped our website and have also started our full scale operations from Mulund. It has been an excellent journey so far and we have met some fantastic people throughout this journey, we have added a few new team members and are expecting a few more in. A lot of time and energy has been spent behind designing the new look for our website, we have tried to keep information which is most relevant on there for you and have taken careful steps to make sure that the navigation and visual characteristics appeal to our visitors, so do make sure you visit our website www.rethinkingweb.com and give us a feedback on what you liked there and what you would like to see. We thought of adding a lot more to our site, however, are contemplating on different ideas. We are also planning on adding new content every now and then to help our visitors with new information, and not just data. Our designers are trying to work out the best possible designs and by incorporating latest technology and concepts.

While on our website do not forget to browse through our portfolio to witness some amazing works through us. Some of our clients have said some wonderful things about us and we shall soon post them on the website. All of this trust and adulation has been promising sign and hence we have now set up our new office in Mulund to be there for you all the time.

We will also be available on chat at all times on our website, so if you want to chat to any of our Rethinkers just log on to our website and chat with us about any questions you have. We will be integrating voice chat options soon, stay tuned to know more.

Do make an appointment and visit our new office at Mulund and we shall be happy to discuss business and weather with you (We form strong opinions on weather). Otherwise if you have something in mind and want us to sort it out for you, just give us a call and we shall pay you a visit. As it is, monsoons have given us a reason to launch our new office and website, we are also offering a 25 % discount on new websites and web designing projects.

As mentioned earlier we will make changes to our content and designs from time to time, we will also change our offers every month and will keep updating you via blogs and mailers. So stay tuned for what’s to follow.

Thank you all, it is a pleasure sharing all of this with you, we hope you enjoy prosperity this monsoon.

Bye for now.

Firebug Tutorial – Using Commandline API in Firebug

2011-06-02T14:59:00.005+05:30

Section 1: Console Tab : Using Commandline API in Firebug

Introduction

Commandline is one of the most useful features of Firebug. If you have some experiences in using Microsoft Visual Studio, you may know the usefulness of “Immediate window” and “Watch window” of VS while you are debugging.

Firebug’s commandline is like the “immediate window” from Visual Studio. You can inspect the value of a particular object at anytime. One better thing with firebug’s commandline is that it can be used at design-time also. ( Note: “Immediate” window from VS can be used at debugging-time only). And, another advantage is that you can write the Javascript Code in commandline and execute those codes on the fly.

The list of Commandline APIs for Firebug are available in the official website of Firebug. [ link: http://getfirebug.com/commandline.html]. What I’m going here is that I’m gonna write about all Commandline APIs with examples in this tutorial. I hope that you will find it useful.

Types of CommandLine

There are two types of Commandline in Console panel.

One-line Commandline
Multi-lines Commandline

One-line Commandline

This one is the default one for Console panel of Firebug. It allows you to write one line at a time. The advantage of one-line commandline is that it supports autocomplete feature.

What is Autocomplete?(Ref: http://getfirebug.com/cl.html)

Using the tab key you can autocomplete the name of variables and object properties. Keep hitting it to cycle through the complete set of possibilities, and use shift-tab to go backwards.

Autocomplete works at many levels. You can start hitting tab before you type anything to cycle through global variables. You can hit tab after typing “document.b” to cycle thorugh all properties that start with “b”. You can even hit tab after a complex expression like “document.getElementsByTagName(‘a’)[0].” to see all properties of the first link in the document.

Plus, You can also use “Up” or “Down” keys to get the command that you typed earlier.

Multi-lines Commandline

The multi-lines commandline is the enhancement version of one-line commandline. It allows you to type the Javascript code more than one time. And you can execute the code on the fly.

Both one-line commandline and multi-lines commandline have their own advantages. So, you can use either one based on what you wanna do with Firebug. For me, I used to use one-line commandline at the most of the time.

CommandLine API with example

Before start reading the tutorials, note that all of those APIs can be used both design time or run-time. However, those are more useful while you are in debugging mode. I’m telling you this because you may wonder why you need those APIs. :)

Download ~ Demo Zip File

List of APIs

$(id)
$$(selector)
$x(xpath)
dir(object)
dirxml(node)
cd(window)
clear()
inspect(object[, tabName])
keys(object)
values(object)
debug(fn) & undebug(fn)
monitor(fn) & unmonitor(fn)
monitorEvents(object[, types]) & unmonitorEvents(object[, types])
profile([title]) & profileEnd()

#1. $(id)

Returns a single element with the given id.

This is the shortcode for document.getElementById(”) in Javascript.

Example ( 1.0 )~

<body>
Name : <input id="nameTextBox" class="normalText" type="text" /> 
</body>

How-to ~

Paste the code above in blank HTML file and open it in Firebug.
Open the Firebug console and click “Console” tab.
Type $(‘nameTextBox’) in CommandLine and Press Enter Key

Output ~

It seems very simple (and looks like not very useful) but I would say that it is useful while you are debugging the code or writing the script in multi-lines commandline.

Let’s see how to use multi-lines commandline, how to execute the Javascript on the fly.

Click “Options > Larger Command Line”
Copy the code below and paste them in multi-lines commandline (larger commandline).
Click “Run”

var txt = $('nameTextBox'); 
txt.value = 'Michael Sync';
txt.textAlign = 'center';
txt.style.color = 'blue';
txt.style.borderStyle = 'double';
txt.style.borderColor = 'pink';

Output ~

#2. $$(selector)

Returns an array of elements that match the given CSS selector.

Note: Check the link here if you don’t know what CSS selector is.

Example ( 1.1 )~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Firebug</title>
<style type="text/css">
div{ background-color:Black;color:White; border: solid 1px grey;  }
</style>
</head>
<body>
<div id='div1'>This is DIV1.</div>
<br />
<div id='div2'>Here is one more.</div>
</body>
</html>

Note: I’m using “Type CSS selector” in this sample.

How-to ~

Type $$(‘div’) in CommandLine and Press Enter Key (You will get both div objects (div1 and div2) as an array. )

#3. $x(xpath)

Returns an array of elements that match the given XPath expression.

Note: If you have no idea about XPath, you may check the XPath tutorial here [^].

Example ( 1.2 )~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CommandLine -
$</title>
</head>
<body>
<div id='container' style="width:800px">
<div id='leftsidebar' style="width:100px; background-color:Gray;min-height:400px;float:left;"> </div>
<div id='content' style="width:600px;min-height:400px; background-color:ThreeDShadow;float:left;">
<div id='content-header' style="padding:2px;font-family:Calibri,Trebuchet MS;">
<h2>All about Firebug</h2> </div>
<div id='content-body' style="padding:2px;font-family:Calibri,Trebuchet MS;">
<p>Firebug is the most popular tool in web revolution.</p>
</div>
</div>
<div id='rightsidebar' style="width:100px; background-color:Gray;height:400px;float:right;"></div>
</div>
</body>
</html>

We will test this API in multi-lines commandline.

Paste the code below in multi-lines commandline.

var obj = $x('html/body/div/div');
console.log(obj[0].id);
console.log(obj[1].id);
console.log(obj[2].id);

Output ~

#4. dir(object)

Prints an interactive listing of all properties of the object. This looks identical to the view that you would see in the DOM tab.

It is like console.dir() that I already mentioned in Part I. So, I think you already have some idea about what console.dir is and how to use. I’m not going to write the new HTML code for this example. Instead, I will use the previous example (eg 1.2) and I will change the Javascript code that I wrote in multi-lines commandline.

var obj = $x('html/body/div/div');
<strong>dir(obj);</strong>

The result will be like the pic below. You will get all properties and methods of those three DIV objects (leftsidebar, content, rightsidebar).

#5. dirxml(note)

Prints the XML source tree of an HTML or XML element. This looks identical to the view that you would see in the HTML tab. You can click on any node to inspect it in the HTML tab.

I already showed you how to use console.dirxml() in this tutorial. Only one thing is different. You can type dirxml() (eg: dirxml(‘container’) with the example 1.2.) in commandline instead of writing in HTML file.

#6. cd(window)

By default, command line expressions are relative to the top-level window of the page. cd() allows you to use the window of a frame in the page instead.

Note: This API seems doesn’t work properly. I will inform to Firebug team and will let you know the result.

#7. clear()

Clears the console. If you wanna clear the console, just type this “clear()” in commandline and press “Enter” key. You can also use “console.clear()” in Javascript Code.

#8. inspect(object[,tabName])

Inspects an object in the most suitable tab, or the tab identified by the optional argument tabName.

The available tab names are “html”, “css”, “script”, and “dom”.

How-to ~

Open “example 1.2″ in firefox.
Type inspect($(‘content-header’),’html’) in one-line commandline.
The HTML tab will be opened and the DIV called “content-header” will be selected. (check the pic below)

#9. keys(object)

Returns an array containing the names of all properties of the object. The object can be either Javascript object ( eg: var objCar = new Car() ) or HTML element (eg: document.getElementById(‘table1′)).

Example 1.4 ~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Keys and Values</title>  
</head>
<body>
<table id="tbl1" cellpadding="0" cellspacing="0" border="0">
<tr>  
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function Car(){
this.Model = "Old Model";
this.getManufactor = new function(){  return "Toyota";  }  }
</script>
</body>
</html>

How-to ~

Open “Example 1.4″ in firefox
Open the “console” tab.
Go to multi-lines commandline by clicking “Larger Command Line” in Option menu
Write the following code in commandline
```
var o = new Car();  keys(o);
```
You will get the names of all properties of this JS class called “Car”.

Note: If you wanna practice this API, try to get the names of all properties of the HTML table called ‘tbl1′ by using this API. Let me know what result you get. :)

#10. values(object)

Returns an array containing the values of all properties of the object.

Example : Ref: to example 1.4.

How-to ~

Open “Example 1.4″ in firefox
Open the “console” tab.
Go to multi-lines commandline by clicking “Larger Command Line” in Option menu

Write the following code in commandline

var o = new Car();  <strong>values(o);</strong>

You will get the values of all properties of this JS class called “Car”.

Note: As the getManufactor of Car() class is a function, it shows “Object” (green link) instead of the value “Toyota”.

#11. debug(fn) and undebug(fu)

Adds or removes a breakpoint on the first line of a function.

Note: I’m not going to cover about this API in this tutorial. Please read more about this in next section.

#12. monitor(functionName) and unmonitor(functionName)

Turns on/off logging for all calls to a function.

Normally, If we want to know whether a particular function is invoked or not, we used to put “alert()”or “console.log()” in that function. It’s too much work if we are working on large script files because we need to find that function in all script files and put “alert()” or “console.log” in that function. and save that file again and run on the browser. With firebug, you don’t need to do those things. You only need to know the function and you can trace how many time that function is invoked. You will get the notification in console when that function that you monitored is invoked. Plus, it will give you a link that is pointing the function in script.

Example 1.5 ~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Monitor and Profiler</title>   
<script type="text/javascript"> 
function func1(){  //doSomething  } 
function func2(){  //doSomething  } 
function func3(){  //doSomething  } 
</script> 
</head> 
<body> 
<input id="btn1" type="button" value="Invoke func1()" onclick="func1();"/>
<input id="btn2" type="button" value="Invoke func2()" onclick="func2();"/> 
<input id="btn3" type="button" value="Invoke func3()" onclick="func3();"/>
</body>
</html>

How-to ~

type “monitor(func1) ” in one-line commandline (wait a few seconds until “>>> monitor(func)” is shown in commandline)
then, you can click any of those buttons to invoke the function that you like.
Since we are monitoring the function called “func1()”, we get the link ( check-out the picture below) as a notification whenever you click the button “Invoke func1()”. But you won’t get anything when you click other buttons. This is how the monitor API works in Firebug. You will get the notification when the functions that you are monitoring are invoked.
Type “unmonitor(func1)” to remove monitoring the func1();

Output ~

#13. monitorEvents(object[, types]) and unmonitorEvents(object[, types])

Turns on/off logging for all events dispatched to an object.

The optional argument “types” may specify a specific family of events to log. The most commonly used values for types are “mouse” and “key”.

The full list of available types includes “composition”, “contextmenu”, “drag”, “focus”, “form”, “key”, “load”, “mouse”, “mutation”, “paint”, “scroll”, “text”, “ui”, and “xul”

Note: Unfortunately, this API doesn’t work propertly. I will contact with Firebug Team and will update about that later. Sorry.

#14. profile([title]) and profileEnd()

Turns on/off the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile report.

There are three ways to start Javascript Profiler in Firebug.

Javascript Profiler can be started ~

by clicking “Profile” button in Console Toolbar.
by using console.profile(‘My Profiler Title’) from Javascript Code
by using profile(‘My Profiler Title’) from commandline

If you wanna know more about Javascript Profiler in Firebug, please read my previous tutorial (Firebug Tutorial – Logging, Profiling and CommandLine (Part II)).

Conclusion

This is all about console tab. Even thought it is just a tab, I have to divide my tutorials into three parts (part 1, part 2 and this one). Now, I have covered everything about console tab and its functionalities. I hope you will find it useful.

Our New Logo....

2011-03-28T16:03:00.004+05:30

Check out the new face of Rethinkingweb. if you like it then do not hesitate to comment here.

Useful Tips for Effective Web Design

2011-02-13T22:41:00.000+05:30

Listed below are some useful and rather important tips for designing a professional and high quality web site:

Neat and Easy Navigation: Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, what do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them. Read our article on Web site Navigation Tips.
Clean Layout Design: A clean layout that uses a lot of white space enhances a site's looks. Try to keep the focus on your content, use dreamweaver templates for this. Use fonts that will be available on all computers to prevent your site looking messed up.
Program using pure CSS: The world is moving away from table based websites to pure CSS websites because it offers accessibility, reusability and considerably reduces file size apart from giving greater control over the look of your website. The single most important skill you can learn today to become a quality web designer is CSS programming! Even if you are not an expert at CSS you can learn to use the following simple CSS Styles Effects to enhance your website:
1. Cool Text Effects using CSS Styles: Text Links Rollover, Text Case Setting, Text Spacing and Line-through Effect
2. Bullets in HTML or Deamweaver: Using CSS Styles with bullets (shapes, decimal, roman-numerals, images, etc.)
3. Links without Underline: Use CSS Styles to display links without the appearance of the underline.
Optimum Load Time: Make sure your load time is low. For this you must:
Minimize Graphics, Flash and scripts: They hugely increase your file size.
Optimize your HTML & script code: Make sure that your site doesn't have any unwanted tags or unused scripts.
Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster.
Read our article Tips for a Fast Loading Site for more.
Design for all Screen Resolutions: A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn't look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site.
Read our article Designing for all Screen Resolutions for more.
Ensure Web site scalability: Make sure your code and design is scalable. As technology advances and configuration of computers & their monitors keep increasing and varying it is impossible to test your site in all screen sizes and platforms.
Cross Browser Compatible: Make sure you check your site for Internet Explorer 5+, Mozilla Firefox 1+, Opera 7+, Safari 3+ and Netscape Navigator 6+ as they constitute 95% of the world's browsers.
Courtesy: http://www.smartwebby.com/web_site_design/webdesign_tips.asp

30 Golden SEO tips

2010-12-04T09:26:00.003+05:30

Welcome to the web's top SEO tips - the best and most comprehensive SEO guide on the internet for increasing your web site's traffic.

SEO consists of two fundamental eleme

nts: producing search-engine-friendly content and obtaining high-quality inbound links. There is a third element that you should take seriously: staying on the right side of Google and avoiding Google penalties at all costs, since Google is the foremost search engine and getting banned is pretty much a death sentence for a web site, especially if it is a young web site without an established following. If you follow the SEO tips in this article your web site will attract a lot of traffic from the search engines and will grow exponentially.

A. Producing search engine-optimised content

1. Produce excellent copy

Your content should be written extremely well; great copy writing is the heart and soul of SEO. Firstly, excellent writing is better for your users and is more likely to attract inbound links. Secondly, Google has ways, some of them very subtle, of determining just how good and useful a piece of writing is (see latent semantic indexing). Write with your users in mind, with a view to giving them the best and most useful experience possible. With regard to Google's subtle ways of assessing the quality of a piece of writing, you should avoid using the same keywords again and again, even if it feels natural to do so. Instead, you should use of a variety of synonyms for every keyword. This makes your writing more readable and interesting, and also persuades Google that your content is not run-of-the-mill spam, but authoritative and useful.

2. Content is king

The only thing Google respects is high-quality text with some links pointing to it. Google considers web sites that constantly add content much more useful than web sites that add content infrequently. For this reason you should set yourself a realistic target for the production of new content and stick to it. Depending on how ambitious you are, you can aim for one new page of content per day or per week. Whatever you choose, remember that Google likes fresh content. It has an intrinsic preference for web sites that focus on creating new content over web sites that keep tweaking their existing content again and again. In other words, Google wants to see that you are working on producing new content, not on optimizing content that you already have on your web site. The ideal word count for each page is between 500 and 1500 words.

3. Use the Google sandbox

The Google sandbox is an incredibly useful tool that suggests keywords and key phrases on the basis of what people have been searching recently. For example, you might type "SEO consultant" and the Google sandbox will tell you that, in addition to searching for "SEO consultant," other frequent searches are "SEO expert" and "SEO services." Using the Google sandbox will give you an inexhaustible supply of ideas for the creation of fresh content. Put simply, you use Google's sandbox to find out what people are searching for, and you then write content that targets those keywords. The aim is, of course, to rank highly in the search engine results pages (SERPs) for those queries.

4. Use the h1 tag

The h1 tag is one of the great secrets of SEO. The h1 tag tells search engines that this is the main title of the page ("heading #1"). The h1 tag is an incredibly powerful tool and Google takes it seriously, providing it is substantiated by the page's content. In other words, the words in the h1 title tag should also appear in the main text. Using the h1 tag is an excellent way to optimize a page for specific keywords.

Here is how you use the h1 tag:

Your keywords

The h1 tag will make the text quite large; you can have the benefit of the h1 tag without such enormous text by using CSS to format it as desired.

You should also use the h2 and h3 tags for your sub-headings, making the content of your page hierarchical.

5. Keyword density

The keywords you are targeting should appear in the main body of your text reasonably frequently, but don't overdo it: a page that is stuffed with keywords destroys the credibility of your web site and is easily identified by Google as spam. Putting your keywords at the beginning of the page, in most of the paragraphs, and somewhere near the end will be quite sufficient. Do not forget the importance of using synonyms too, as mentioned above. If you want to check the keyword density for a page, you can use this keyword density tool.

6. Use bold, italics and underlining on keywords

When you bold, italicize or underline a word, Google assumes that this is one of your keywords. You should therefore bold, italicize or underline some of the keywords on your page.

Be very careful, because this can also work against you: if you use bold, italics or underlining on words that are not keywords, you will confuse Google and will weaken the effect of these tags on your real keywords.

7. Keywords in the URL

Deciding the URL of a page is an important part of SEO. The page should have a file name that contains your keywords, and the page should be in a directory that also has keywords in its name. For both the directory and the page itself, the keywords should be separated by dashes.

You should follow a sensible rationale when deciding what to call directories and files; it should reflect the hierarchical nature of your web site. For example, if you are writing a page about obtaining inbound links, a good URL for it would be:

polyseo.com/seo-tips/how-to-obtain-inbound-links.html

This is a good URL for these reasons:

a) "SEO tips" and "how to obtain inbound links" are related queries and Google knows it;

b) "how to obtain inbound links" is a subset of "SEO tips." Google will give you extra respect for using hierarchical URLs. Don't forget that Google was developed by two clever mathematicians!

Depending on exactly what pages you plan to create for your web site, there are several ways of naming a URL. For example, with regard to the example above, if you're going to write many different articles on the topic of "links," you could name your URLs as follows:

polyseo.com/SEO/links/how-to-obtain-inbound-links.html

polyseo.com/SEO/links/why-outbound-links-will-benefit-your-website.html

and so on. (In this example "how to obtain inbound links" is a sub-category of "links," and "links" is in turn a sub-category of "SEO." Furthermore, all three sets are related to each other: they are all about SEO.)

8. Use a high content-to-code ratio

Search engines will give your page a higher ranking if it has a lot of text relative to the amount of code. You should aim for a high signal-to-noise ratio on your page, which means that there should be more content than code. Open any page on the Internet, right click on it and select "view source" (or its equivalent). If there is a lot more code than text, search engines are not going to love it.

If you are serious about SEO you will produce pages with good, clean HTML and will avoid anything that requires a lot of code. A small amount of HTML code and a lot of quality text is what search engines (and users) really love.

9. Split substantial articles into several pages

If you write an article about a big topic, it is inevitable that the article will in fact deal with a number of sub-topics. In these cases you should split the article into several pages: one page for each subtopic. This has the following advantages:

a) you will be able to have highly focused search-engine optimization that targets each specific page, instead of trying to optimize one enormous page for keywords that are relevant to only 10% of it. Remember that Google decides what content is about on a page-by-page basis: this means that every page should focus on one topic - only one;

b) users prefer to read articles that are split over several pages rather than articles that have the "toilet roll" format. The links that take you from one page to the next should have the target page's title as the anchor text (more about this later).

The page you are reading is an exception; pages with a list of tips generally work better as a single page, even if very long.

10. Avoid frames like the plague

From the point of view of SEO, frames must rank amongst the most disastrous thing you can do. Users hate them, and search engines hate them even more. Put simply, search engines are not able to index web sites that use frames; the most they can do is index your homepage. For all intents and purposes you will simply not be present in search engine indexes if your web site uses frames. The brilliant Jakob Nielsen has more to say about why frames suck.

11. Avoid Flash like the plague

After frames, Flash is the biggest enemy of SEO and usability. Search engines are not able to read Flash files. Therefore any text displayed on the Flash page will not be read by the search engines and will not give you any SEO benefit. As importantly, Flash is an enormous barrier between your web site and its users. I have always found Flash-based web sites extremely frustrating and very often leave before the homepage has even finished loading. In the rare occasions in which I waited for the home page to load, the web site invariably turned out not to be worth the wait. Truly useful web sites have indexable content, preferably in the HTML format. Good, clean, minimalist HTML code is the true friend of SEO. Do not use Flash if you are serious about SEO and getting real traffic from the search engines.

UPDATE: Google has greatly improved its ability to index Flash. It can now read textual content in any SWF file. The words that appear in these Flash files will be taken into account when the algorithm decides how to rank your page for a given query. Of course, text that is displayed graphically - as in a JPEG file, for example - will not be read by Google. It never has been, and will continue not to be.

I still hate Flash, and advise EVERYONE against using it, but if you really must, at least now you can be confident that its text data will be spidered and indexed by Google.

12. Interlink your pages

Every page on your web site should have at least a couple of contextual links that point to other pages on your web site. These links should follow naturally from the content of your page. For example, if your page mentions an SEO consultant, you can use those words to link to a page that is relevant to them. That's a contextual link.

This will ensure that Google PageRank will be shared among your pages, and is an additional way of telling Google what your pages are about.

13. Put high-quality outbound links on every page

Every page of the content on your web site should also have at least one contextual link that points to a high-quality external web site. It has been shown experimentally that Google gives a higher ranking to pages that link to a high-quality external web sites. In other words, other things being equal, a page with good outbound links will be placed higher in the search engine results pages than a page with no outbound links.

Deciding who to link to is relatively simple. Choose a word or group of words in your text and do a search on Google. Look at the top 3 or 4 web sites and choose one that does not compete with you. Go back to your page and make those keywords the anchor text for an outbound link that points to that high-ranking external web site. Google will love you for linking to a web site that it deems to be of a high quality, especially if the link's anchor text has words for which that web site ranks very high on Google. Doing this on every page in your web site will have the following major advantages:

a) as mentioned above, Google will give you a higher placing in its results pages;

b) it shows your users that you are in good faith and not a sleazy spammer. Remember that the traffic you get from the higher Google ranking will massively outweigh the traffic you will lose through the outbound links, and in any case people will only leave your web site if they have not found what they are looking for, in which case they would have left anyway. Outbound links will have the net effect of increasing your web site traffic.

14. Produce an HTML sitemap

By "sitemap" I do not mean those special files that tell search engines about the structure and your web site, although that kind of sitemap is a good idea too. In this instance I am referring to an HTML page that contains links to every single page on your web site, just like a directory. There are two reasons that make such a page essential:

a) f or the purposes of SEO, no page should be more than two clicks away from your homepage. Search engines do not like pages that need a lot of clicks to be found. Furthermore, it makes every page on your web site receive some of the Google PageRank of your homepage (the homepage will inevitably have a higher PageRank than any other page on the web site);

b) it is extremely useful for users to be able to access any page on your web site from a single page of links. In this way they can access a page very quickly, even if it is the last page of multi-page article.

15. Put the menu on the right

To make your web site even more search engine- friendly, consider putting the menu on the right, as with this web site. This will ensure that the first thing Google sees after the section is your content. This is because search engines read pages from top to bottom and from left to right. Putting the menu on the right-hand side ensures that search engines will come to it after your main content. This is related to having a high signal-to-noise ratio.

16. The TITLE! tag
This is vital because, like the h1 tag, it tells search engines what you claim your page to be about. The title tag should have the same contents as the h1 tag. The title tag for this page is:
tag</h3><p class="text" style="font-family: Arial, Verdana, sans-serif; font-size: 11pt; color: rgb(0, 0, 0); text-decoration: none; text-align: left; ">This is vital because, like the h1 tag, <strong>it tells search engines what you claim your page to be about.</strong> The title tag should have the same contents as the h1 tag. The title tag for this page is:</p><p class="text" style="font-family: Arial, Verdana, sans-serif; font-size: 11pt; color: rgb(0, 0, 0); text-decoration: none; text-align: left; "><title>SEO tips

17. Produce META tags with great care

There are three META tags of interest in SEO: ROBOTS, content and KEYWORDS. The first two are vital; the third no longer plays a big role.

The robots tag should be as follows:

The contents tag should be identical or similar to the title tag - it has been found that Google loves this. The content tag for this page is as follows:

In the dark ages of the pre-Google anarchy the keywords meta-tag was taken very seriously by the primordial search engines. Accordingly, the SERPs were dominated by spam web sites that stuffed their meta-tags with keywords. Nowadays the keyword tag is almost irrelevant. By all means include it, but make absolutely sure that no keyword appears in the tag more than once. Do not put more than 20 words in the meta-tag. The keywords meta tag for this page is as follows:

18. Remember that search engines cannot read pictures

The essence of SEO is putting high-quality content on a page, and making sure that search engines can fully read and understand the content. This means that the heart of SEO is quality text. Any text that is displayed as a JPEG file or other graphics cannot be read by the search engines. Look at the source code of a web page: that's what search engine can see. If you can't read it in the source code, search engines will not be able to read it either, and you will therefore get no search-engine credit for it. I have seen entire articles displayed as a JPEG file. The author is probably despairing over why Google won't show it in its search results at all.

Therefore, do not use graphics to display content. This does not mean that you should not use pictures; when used appropriately, pictures enhance your users' experience and make your content more useful.

You can tell search engines what a picture is about by using the ALT tag. Make sure that the description in the ALT tag faithfully describes the content of the picture; stuffing the ALT tag with keywords that are not relevant to the picture is considered spam.

19. Make sure you have "index, follow" in the ROBOTS tag

Every single page on your web site should have this tag. It tells search engine spiders to index the page, and it also tells them to follow all links to their respective target pages. This is useful in making sure that all the pages on your web site are indexed.

Spiders are programs that search engines use to analyze pages on the Internet; they go from page to page, following links and reading every page, making decisions on their quality and keeping a copy in order to show them on the search results pages for relevant queries. SEO is essentially about convincing these automated programs that a given page deserves to rank highly for a specific search query.

20. When you produce a new page of content, link to it from the homepage

Once your homepage has a few quality inbound links, Google will regularly spider your homepage. Therefore, a good way to make sure that Google spiders and indexes a new page as soon as possible is to link to it from the homepage. Search engines will follow the link and index the target page within a few days.

21. Use a unique IP address for your web site

It is very important that your web site be associated with a single, unequivocal IP address. There are two reasons for this:

a) If you use a shared IP address and another web site with that IP address gets a Google penalty, your web site will also suffer;

b) Google will take your web site a lot more seriously if it has a unique IP address.

Having a unique IP address for your web site will cost you a few extra dollars a month but it is undoubtedly worth it.

22. Use a quality web host

You cannot develop a successful web site without using a reputable, high-quality web host. You should also make sure that you have a top-notch traffic statistics program that will display detailed data regarding your traffic and search engine referrals.

B. Links

23. Get inbound links

Inbound links are the kingpin of the Google algorithm. Google revolutionized online search by introducing a simple but very effective answer to a complicated question: "If a user performs a search for widgets, and there are one million web pages about widgets, how do we decide the order in which these web pages should be presented in the search results? In other words, how do we rank them?"

The answer provided by Larry Page and Sergey Brin was simple: pages that have more links pointing to them are more likely to be useful than pages with fewer links pointing to them. Google considers inbound links as votes in favor of a particular web page.

It is therefore absolutely imperative to obtain inbound links that point to your web site and to content pages within your web site. The links that are most beneficial are one-way inbound links: links that point to your web site without your web site linking back. Google considers these the most genuine endorsements and therefore the most reliable indicator of a page's objective usefulness. Buying links is a great way to obtain high-quality links quickly. Text Link Ads is the most reputable link broker and offers a whopping to new advertisers.

How much weight Google will give to a link depends on the page's PageRank and on whether the link's target page is related to the content on the linking page. In other words, a link pointing to a page about SEO is worth more if is in a page about SEO; if the link is on a page about cars, it will be less beneficial.

24. Link anchor text is important

The anchor text of links is extremely important, because it answers Google's all-important question: what do users think this page is about? The more relevant the inbound link's anchor text is to the target page, the more the page will benefit.The most beneficial links for SEO purposes are one-way inbound links with relevant anchor text. If you manage to get a one-way inbound link with a anchor text that contains the words in the target page's h1 tag, to Google this is an independent third party confirming the topic and usefulness of your page, and your ranking will go through the roof. Such links are worth pursuing.

This is not to say that other links are useless. Getting inbound links from pages with a high PageRank, even if the links are reciprocated, will still be beneficial. Links with "click here" as the anchor text should be avoided as they do not tell Google what the linker thinks the target page is about.

Probably the only way to start out with links is to start e-mailing webmasters, once you have produced some quality content, and ask to trade links. Most will decline, but some will say yes, and this will get you started. Remember that no decent web site will link to you unless it has free useful content. Part of the point of writing excellent content is to obtain natural, unsolicited one-way inbound links. For this reason, such content is sometimes referred to as link bait.

25. Use advertising to generate some traffic

A web site's traffic should grow exponentially once a certain critical level of traffic is reached, because the more people visit your web site, the more incoming links you will get, the higher your ranking will be, which in turn will bring in more traffic - assuming, of course, that your web site offers value to its visitors. Posting a coolvideo is an excellent way to gain exposure. If you follow the SEO tips in this article your web site will get good search engine traffic from the get-go.

Precisely because traffic breeds more traffic, you might want to consider spending a small amount of money on advertising at the beginning. Although advertising does not have a search engine benefit, the extra visitors it brings might link to your useful content, which will have an SEO benefit. Google'sAdsense is a cool program for this sort of thing.

26. Post in forums

An excellent way of getting one-way inbound links is to post in forums and place contextual links pointing to pages on your web site, in addition to a link to your homepage in your signature. Of course this is only acceptable (and beneficial) if the forum's topic is the same as your web site's.

Make sure all such links have anchor text that is a highly focused on the target page's content. Not all forums make this possible, but I have seen several that publish posts as HTML pages and that allow links. The most beneficial forums are those that allow you to post a link without the rel=nofollow tag. Of course, make sure that you write quality posts that add value to the forum, or your posts will be considered spam. Also, the outbound links will be worth more if they are embedded within a good chunk of quality text.

27. Use press releases to obtain backlinks

A great way to obtain one-way inbound links is to broadcast a press releasethrough an online service. By all accounts PRWeb is the best facility for this sort of thing. Make sure that your press release is well-written and interesting, and of course make sure that it has a link to your web site.

28. Do not link to bad web sites

If you link to a web site that Google has penalized or that for some other reason Google considers to be a bad web site, your web site will be penalized. Google will not penalize you if a bad web site links to you, but it will penalize you if you link to a bad web site. For this reason you should only link to the best web sites, and you should check those links frequently to ensure that the web site does not have a new, spammy owner (it can happen).

You should avoid so-called bad neighborhoods. Bad neighborhoods are clusters of interlinked web sites that are suffering a Google penalty (maybe without even realizing it). If you link to a web site which in turn links to a penalized web site, you are part of a bad neighborhood. Avoid this like the plague.

29. Produce link bait

One-way inbound links are essential to SEO. The only reason anyone will ever link to you is if you have something useful or interesting on your web site. I have already stressed the importance of writing great content. Other examples of link bait include:

* free resources, such as my free SEO tools;

* offering a free e-book for download (make it a PDF file with at least one link to your web site).

30. Staying on the right side of Google

The third vital element in search engine optimization is avoiding anything that is even remotely spammy or unethical. You should follow Google's Webmaster Guidelines scrupulously. If you do any of the things banned by the Google Webmaster Guidelines, sooner or later Google will find out and penalize your web site. The following tricks are expressly prohibited by Google:

* Cloaking: this means displaying a different version of your web site depending on the IP address of those accessing it

* Redirecting your homepage to another page

* Using text that is the same color as the background

* Hidden links

* Registering many domains and interlinking them all

The Google algorithm has become very sophisticated and if you breach any of the Google Webmaster Guidelines sooner or later your infractions will be detected and you will be subjected to a penalty. An irritated user might also file aGoogle spam report.

Conclusion

--> SEO really works. If you write high-quality content that is search-engine-friendly and get some quality inbound links, Google will give you a goop placing in its search results pages and your web site's traffic will increase exponentially. It's incredibly satisfying to see a page you created on the first page of search engine results! With some hard work, it will allow you to build a useful web site that gets a lot of referrals from the search engines. Good luck!

Firebug Tutorial – Logging, Profiling and CommandLine (Part I)

2010-11-25T21:23:00.005+05:30

Section 1: Console Tab : Logging, Profiling and CommandLine (Part I)

Overview of Console Tab

This tab is mainly used for logging. It also can be used as CommandLine window (like immediate window in Microsoft Visual Studio) while you are debugging the Javascript. It can be used for monitoring the execution of Javascript code by using Profiling service.

The following topic will be covered in this section.

Logging in Firebug (with String Substitution pattern )

Grouping the logs or messages

console.dir and console.dirxml

Assertion ( console.assert() )

Tracing ( console.trace() )

Timing ( Measuring the time of your code)

Javascript Profiler (An introduction in this tutorial, the details will be covered in next tutorial.)

#1. Logging in Firebug

Firebug supports logging in Console tab. So, you don’t need to use alert(‘something’) or document.write(‘something’) anymore.

There are five types of logging in Firebug.

console.log : Write a message without icon.

console.debug : Writes a message to the console, including a hyperlink to the line where it was called

console.error() : Writes a message to the console with the visual “error” icon and color coding and a hyperlink to the line where it was called.

console.info() : Writes a message to the console with the visual “info” icon and color coding and a hyperlink to the line where it was called.

console.warn() : Writes a message to the console with the visual “warning” icon and color coding and a hyperlink to the line where it was called.

Example Code:

Open the htm file called “Plain HTML” or create one HTML file.

Paste the following code with <body> tag.

1 <script language="javascript" type="text/javascript">

2 console.log('This is log message');

3 console.debug('This is debug message');

4 console.error('This is error message');

5 console.info('This is info message');

6 console.warn('This is warning message');

7 </script>

You will get the following output. If you click on hyperlink (“test.htm” in this case), it will take you to script tab and will highlight the line that wrote this message.

String Substitution Patterns

String substitution parterns can be used in console.log, console.info, console.debug, console.warn and console.error . You can use the same way that we used in C/C++.

%s        String

%d, %i   Integer (numeric formatting is not yet supported)

%f          Floating point number (numeric formatting is not yet supported)

%o        Object hyperlink

Example :

Note: I will use console.log in the example below even all console objects (console.log, console.info, console.debug, console.warn and console.error ) support string substitution.

Remove “script” tag that we pasted for the previous example.

Paste the code below within <body> tag.

01 <script language="javascript" type="text/javascript">

02
03 //This is for normal string substitution " %s, %d, %i, %f".

04 console.log("My Name is <strong>%s</strong>. My Date of Birth is <strong>%dth %s, %i</strong>. My height is <strong>%f</strong> m.", "Nicolas Cage", 7, 'January', 1964, 1.8542);

05
06 function Foo(){

07 this.LeftHand = function(){

08 return "Left Hand";

09 }

10 this.RightHand = function(){

11 return "Right Hand";

12 }

13

14

15 //This is for object "%o".

16 var objFoo = new Foo();

17 console.log('This is <strong>%o</strong> of Foo class.', objFoo);

18

19 </script>

If you are using %o in your log, the object will be shown as a hyperlink in green color. This hyperlink is linked to the DOM tab. So, If you click “object” in second line, you will see the list of properties of that object (LeftHand and RightHand in this case.)

#2. Grouping

Firebug allows you to group the message or log in Console tab. If you have some many logs in your code, you can probably divide your log into small group or subgroup

Example ~

01 <script language="javascript" type="text/javascript">

02

03 var groupname = 'group1';

04 console.group("message group : %s " , groupname);

05 console.log("log message 1 from %s", groupname);

06 console.log("log message 2 from %s", groupname);

07 console.log("log message 3 from %s", groupname);

08 console.groupEnd();

09

10 groupname = 'group2';

11 console.group("message group : %s " , groupname);

12 console.log("log message 1 from %s", groupname);

13

14 var subgroupname = 'subgroup1';

15 console.group("message group : %s " , subgroupname);

16 console.log("log message 1 from %s", subgroupname);

17 console.log("log message 2 from %s", subgroupname);

18 console.log("log message 3 from %s", subgroupname);

19 console.groupEnd();

20

21 console.log("log message 3 from %s", groupname);

22 console.groupEnd();

23

24 </script>

#3. console.dir and console.dirxml

console.dir : It can be used for getting all properties and methods of a particular object. According the example below, we can get the Model (property) and getManufactor (method) of Car object by using console.dir(); You can also pass the object of HTML element (eg: console.dir(document.getElementById(‘tbl1′)); ) instead of objCar and let’s see the result. (You will get all properties and methods of the HTML table called “tbl1″).

console.dirxml : print the XML source tree of HTML element.

01 <table id="tbl1" cellpadding="0" cellspacing="0" border="0">

02 <tr>

03 <td>A</td>

04 <td>B</td>

05 <td>C</td>

06 </tr>

07 </table>

08 <script language="javascript" type="text/javascript">

09 //Create a class

10 function Car(){

11 this.Model = "Old Model";

12

13 this.getManufactor = new function(){

14 return "Toyota";

15 }

16 }

17

18 //Create a object

19 var objCar = new Car();

20

21 //Firebug

22 console.dir(objCar);

23 console.dirxml(document.getElementById('tbl1'));

24

25 </script>

#4. Assertion ( console.assert() )

You can use console.assert() to test whether an expression is true or not. If the expression is false, it will write a message to the console and throw an exception.

Example :

01 <script language="javascript" type="text/javascript">

02 function whatIsMyAge(year){

03 var currYear = 2007;

04 return currYear - year;

05 }

06

07 var yearOfBirth1 = 1982;

08 var age1 = 25;

09 console.assert(whatIsMyAge(yearOfBirth1) == age1);

10

11 var yearOfBirth2 = 1982;

12 var age2 = 11;

13 console.assert(whatIsMyAge(yearOfBirth2) == age2); //You should get the error here.

14 </script>

#5. Tracing ( console.trace() )

This function is very interesting. Before I tell you the way that I understand, let’s take a look what console.trace does exactly in official website.

console.trace()

Prints an interactive stack trace of JavaScript execution at the point where it is called.

The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.

This function will tell you about the route information from start point to end point. If you are not clear what I mean, let’s take a look at the sample code and the result.

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml" >

03 <head>

04 <title>Firebug</title>

05 <script language="javascript" type="text/javascript">

06 function startTrace(str){

07 return method1(100,200);

08 }

09 function method1(arg1,arg2){

10 return method2(arg1 + arg2 + 100);

11 }

12 function method2(arg1){

13 var var1 = arg1 / 100;

14 return method3(var1);

15 }

16 function method3(arg1){

17 console.trace();

18 var total = arg1 * 100;

19 return total;

20 }

21

22 </script>

23 </head>

24 <body>

25 <input type="button" value="Trace" onclick="startTrace('Result');"/>

26 </body>

27 </html>

Suppose: we wanna know how “method3″ function is invoked. So, we put this code “console.trace()” in that method. then, we run the program and we got the result as picture above. If we read the result from bottom to top, we will see “onclick(click clientX=34, clientY=26)”. That means the execution of Javascript started at on click event of button. then, we got “startTrace(“Result”)” in second line. That means startTrace function is invoked after firing onclick event and the parameter is “Result”. If we keep on checking from bottom to top, we will figure out the completed route from onclick event to method3.

If you wanna test more, you can move this code “console.trace()” to method2(). then, firebug will give the new route from onclick event which is a started point to method2() which is the end point.

I think that it’s pretty useful if you are debugging the other developer’s source code and you have no idea why this function is invoked.

Let me know if you are not clear what I’m trying to explain about console.trace();.

#6. Timing ( Measuring the time of your code)

You can use console.time(timeName) function to measure how long a particular code or function take. This feature is very helpful if you are trying to improve the performance of your Javascript code.

Example :

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02 <html xmlns="http://www.w3.org/1999/xhtml" >

03 <head>

04 <title>Firebug</title>

05 <script language="javascript" type="text/javascript">

06 function measuretheTime(){

07 var timeName = 'measuringTime';

08 console.time(timeName);

09

10 for(var i=0;i<1000;i++){

11 ///do something

12 for(var j=0;j<100;j++){

13 //do another thing.

14 }

15 }

16

17 console.timeEnd(timeName);

18 }

19 </script>

20 </head>

21 <body>

22 <input type="button" value="Trace" onclick="measuretheTime();"/>

23 </body>

24 </html>

Result : measuringTime: 16ms

#7. Javascript Profiler

You can start the profiler thought code (console.profile(‘profileName’)) or by clicking “Profile” button from “Console” tag. It can be used for improving the performance of Javascript. It is similiar to the console.time() function but profiler can give your more advanced and detailed information.

I will tell you about this more details in next tutorial (Part2) . I hope you all are clear about this tutorial.

Firebug Tutorial – Overview of Firebug

2010-11-21T17:33:00.001+05:30

A few words from me

It has been over 1 year that I’m using Firebug in web development. I found it very useful. I’m really thank to SangSing who introduces me about Firebug. I used to encourage a lot of my techie friends to use Firebug but they said that they don’t know how to use it. They told me that they wanna get something that include all features of firebug and examples. I googled a lit bit but I didn’t find nice resources that covers everything about firebug. So, I decided to write this tutorial. I will try to cover all features of firebug as much as I can. I will show each features with sample sourcecode and screenshot if it required. Don’t hesitate to contact me if you have any suggestion or comment.

There are 5 sections in this tutorial.

Section 1: Overview of Firebug : An introduction of Firebug and feature lists, how to install it and a few notes

Section 2: Logging, Tracing and CommandLine : Everything related to Console tab. An introduction of CommandLine windows which is the same as Immediate windows or Watch window from Visual Studio.

Section 3: HTML DOM Inspector and HTML CRUD operation : This section will tell you about what HTML inspecting is, how to inspect the HTML element, why it is useful and etc. I will also show you how to create/update/delete the HTML DOM dynamically in HTML tab.

Section 4: Javascript debugging with Firebug : This section will cover everything about javascript debugging which is the most famous feature of Firebug. It will also show you how to use Console tab while debugging the Javascript.

Section 5: CSS, DOM and Net Tab : (I haven’t decided whether I should write about them in one section or not. )

As I said above, I will try to cover as much as possible. If I miss out something in this tutorial, please let me know. I appreciated it.

Getting Started : Overview of Firebug

Note: I will cover some basic understanding about firebug and its features, installation and a few screenshots in this section. So, if you already have some ideas about Firebug, you may probably skip this section.

What is Firebug?

Firebug is one of the most popular Mozilla Firefox’s extensions (a.k.a addon). It is also a tool that make the web developers’ life easier. It includes a lot of cool features such as debugging, HTML inspecting, profiling and etc which are very useful for web development.

Features

Javascript debugging

Javascript CommandLine

Monitor the Javascrit Performance and XmlHttpRequest

Logging

Tracing

Inspect HTML and Edit HTML

Edit CSS

Where to get Firebug Addon?

Go to the official firebug website http://getfirebug.com .

There is the image as below at the right-side of the firebug website. Click this image to install.

The following dialog will be shown after clicking the image above. Click to “Install Now” button.

After the installation is completed, you need to restart the browser.

Screenshots

Main Menu (under “Tools” Menu)

“Firebug” and “Error Console” menu will be shown under “Tools” menu of Firefox.

Firebug : It is just a placeholder for Firebug’s submenus.

Error Console : If you click this menu, one console window will be launched with the list of errors, warnings and message. Actually, this error console is the same as the console tab from Firebug console.

Firebug Menu

If you click “Firebug” menu under “Tools”, the following submenus will be shown.

Open Firebug : Open the firebug console within the browser. If you don’t wanna click this menu, you can simply press “F12″ to open the firebug console.

Open Firebug in New Window : Open the firebug console in separated window.

Disable Firebug : It is for disabling firebug. This option is very important. You should disable the firebug if you don’t need it because If you don’t disable the firebug, it might be a lit bit slow to surf the Ajax-enabled websites like GMail.

Disable Firebug for **** : You can disable the specific website instead of disabling the whole firebug.

Allowed Sites : You can add the list of website that you want to surf with Firebug enabled option.

Inspect the Element : This menu is for inspecting the HTML element. Please read more about this in section 3.

Profile Javascript : This option is available in Firebug enabled mode only. It is used for monitoring the execution of javascript code. This option is really useful when you have performance issue with your code. Please read more about this in Section 4.

Clear Console : Clear the console tab of Firebug console.

CommandLine : Open the console tab

Search : Set the focus to the Search textbox of current tab.

Content Menu

There is only one menu called “Inspect Element” in content menu. This menu is very useful. Please read more about this in Section 3.

Firebug Console

The picture below is Firebug console.

It contains six tabs such as Console tab, HTML tab, CSS tab, Script tab, DOM tab and Net tab.

Console tab : It is for logging, profiling, tracing and commandline.

HTML tab : It is for inspecting HTML element, editing HTML and changing the stylesheet at runtime. CSS, Layout and DOM console are already included as the subtabs.

CSS tab : You can check how many css file included in the webpage easily. You can simply select the CSS file that you like and you can made the changes to that file on the fly. (I don’t use that tab that much since the same one is already included in HTML tab. )

Script tab : It is for debugging Javascript code. Watch and Breakpoints consoles are the subtab of Script tab.

DOM tab : It is for exploring DOM. (I don’t use that tab that much. Instead, I used to use DOM tab from HTML console and Script tab.)

Net tab : It is for monitoring network activities. It helps you to know why your page (or a particular webpage) is taking so long to load in the browser.

Status Bar

You will see the green cycle if there is no error on your page.

You will see the red cycle and the count of errors if there is some errors in your page.

Keyboard and Mouse Shortcuts

F12. I used to use only F12 to open/close the Firebug console.

If you wanna read the completed list of shortcuts, you can check-out here.

Problem?

Please check-out this FAQ page.

If you still have problems, you drop a comment in my blog. I will reply as soon as possible. Or you can probably contact with Firebug User Group.

Conclusion

That’s all. :) I think you now have some ideas about what firebug is, how it looks like and how to install. If you are already familiar with firebug, this section will be too plain for you since I didn’t put anything new in this section. I will tell you more details about each tab in next section. So, come back tomorrow!!

Push Your Web Design Into The Future With CSS3

2010-11-11T20:19:00.001+05:30

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward.

Here are five techniques snatched from the future that you can put into practice in your website designs today.

1. Border Radius

Probably the most common CSS3 feature currently being used is border-radius. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

Border-radius can also be used to target individual corners, although the syntax for -moz- and -webkit- is slightly different:

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-top-right-radius: 20px;

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome.

2. Border Image

Border-image, as the name suggests, allows an image file to be used as the border of an object. The image is first created in relation to each side of an object, where each side of the image corresponds to a side of the HTML object. This is then implemented with the following syntax:

border: 5px solid #cccccc;

-webkit-border-image: url(/images/border-image.png) 5 repeat;

-moz-border-image: url(/images/border-image.png) 5 repeat;

border-image: url(/images/border-image.png) 5 repeat;

The {border: 5px} attribute specifies the overall width of the border, and then each border-image rule targets the image file and tells the browser how much of the image to use to fill up that 5px border area.

Border images can also be specified on a per-side basis, allowing for separate images to be used on each of the four sides as well as the four corners:

border-bottom-right-image

border-bottom-image

border-bottom-left-image

border-left-image

border-top-left-image

border-top-image

border-top-right-image

border-right-image

Supported in Firefox 3.1, Safari and Chrome.

3. Box Shadow and Text Shadow

Drop shadows: don’t you just love them?! They can so easily make or break a design. Now, with CSS3, you don’t even need Photoshop! The usage we’ve seen so far has really added to the design, a good example being this year’s 24 Ways website.

-webkit-box-shadow: 10px 10px 25px #ccc;

-moz-box-shadow: 10px 10px 25px #ccc;

box-shadow: 10px 10px 25px #ccc;

The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.

Also, the text-shadow attribute is available for use on textual content:

text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only).

4. Easy Transparency with RGBA and Opacity

The use of PNG files in Web design has made transparency a key design feature. Now, an alpha value or opacity rule can be specified directly in the CSS.

rgba(200, 54, 54, 0.5);

/* example: */

background: rgba(200, 54, 54, 0.5);

/* or */

color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect.

Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:

color: #000;

opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).

As used by: 24 Ways (RGBA).

5. Custom Web Fonts with @Font-Face

There has always been a set of safe fonts that can be used on the Web, as you know: Arial, Helvetica, Verdana, Georgia, Comic Sans (ahem…), etc. Now the @font-face CSS3 rule allows fonts to be called from an online directory and used to display text in a whole new light. This does bring up issues of copyright, so there are only a handful of specific fonts that can be used for @font-face embedding.

The styling is put into practice like so:

@font-face {

font-family:'Anivers';

src: url('/images/Anivers.otf') format('opentype');

}

The rest of the font family, containing secondary options, is then called as usual:

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Supported in Firefox 3.1, Safari, Opera 10 and IE7 (with lots of fixes: if you are brave enough, you can make font-face work in IE (thanks for heads up, Jon Tan))

As used by: TapTapTap.

Although CSS3 is still under development, the rules listed here are supported by some browsers right now. Safari in particular has extensive support for these new features. Unfortunately, despite being a top-quality browser, Safari has a relatively low number of users, so it is probably not worthwhile adding extra features solely for this group of users. But with Apple’s Mac computers making their way into everyday life, Safari’s usage is likely to continually increase.

Firefox, on the other hand, now has a considerably large user base. What’s more, the soon-to-be-released Firefox 3.1 has added support for a range of CSS3 features. Assuming that most users of Firefox will update their browsers, there will soon be a large group of users with support for these new styling rules.

Google Chrome was released this year. Based on the WebKit engine, this browser has much of the same support as Safari. While Safari makes up a good proportion of Mac users, Chrome has burst onto the scene, making up a decent proportion of Windows users.

Percentage-wise, the W3′s browser statistics indicate that, as of November 2008, 44.2% of W3School’s users across the Web were browsing with Firefox, 3.1% with Chrome and 2.7% with Safari. That means almost 50% of all Internet users should be able to view these features. Within the Web design community in particular, which is much more conscious of browser choice, the range of users with CSS3 support is much higher, at 73.6% (according to the stats at Blog.SpoonGraphics).

6. The downside

Your website may now have a range of fancy new design features, but there are a few negatives to take into consideration:

Internet Explorer: 46% of Internet users won’t see these features, so don’t use them as a crucial part of the design of your website. Make sure that secondary options are in place, such as a standard border in place of border-image and a normal font in place of @font-face. Please notice that Internet Explorer supports @font-face with EOT (more details) since v4 (thanks for heads up, Jon Tan).

Invalid style sheets: These CSS3 features have not been released as a final specification. They are currently implemented with tags that target different browsers. This can invalidate your style sheet.

Extra CSS markup: Following the last point, having to add a different tag for each browser to specify the same rule, as well as include the standard rule for the final CSS specification, adds a lot of extra code to your CSS markup.

Potentially horrific usage: Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular ring warning bells for us; we’re not looking forward to seeing the Marketing Department’s choices with that one!

IE CSS Bugs That’ll Get You Every Time

2010-11-01T22:32:00.002+05:30

IE 6 actually had the best CSS support of any browser when it first came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn’t work in IE 6. While I generally refuse to pander to IE 6′s limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that’ll get you every time:

The Box Model

This is perhaps the most common and frustrating bug of all in IE 6 and below. Let’s say you declare a box like this:

IE 6 will calculate the width of the box to be 100px.

Modern browsers will calculate the width of the box to be 124px.

This kind of discrepancy can cause HUGE layout problems. I even think the IE version makes a little bit more sense logically, but that is not how the spec was written. IE 6 can actually get it right if you are in standards-compliant mode, which is rare these days as just using an HTML 4.0 transitional doctype will trigger quirks mode and the box model problem.

I generally work around this issue by just not using padding on boxes I am using for layout. If that box has some text inside it in a <p> element, I’ll apply the padding it needs directly to that p element. Just side-steps the issue, but it works.

The Double Margin Bug

Using our box example from above, let’s say we need that floated to the right:

IE 6 will double the 20px to 40px. Again, causing potentially huge layout borks. The commonly thrown-around “fix” for this is to add “display: inline;” to the div. I’m not sure how this “fix” got so much traction, but its a bit impractical. We can’t set static widths on inline elements, now can we?

I also like to side-step this bug whenever possible. If you really need to push that box away from the right side of it’s parent element, you can likely do so by adding padding to the parent element, which is more likely to keep your grid consistent anyway. Also don’t forget about padding. This bug does not affect padding, so you can offen get away with adding padding to the side you need an achieve the same result.

No Min Widths / Min Height

Setting min-width and min-height on elements is such a natural and logical thing that it makes me tear up sometimes thinking I can’t count on them. IE 6 doesn’t just get it wrong, it just completely ignores them. Min-height is incredibly useful for something like a footer. Say your footer needs to be at least 100px tall because you are using a background image down there, but you don’t want to set a static height because you want it to grow nicely if, say, the text size is bumped up significantly. Min-height is perfect for this, but using it alone will get you no height whatsoever from IE 6. In a bizarre twist of luck, IE 6 treats the regular height property like modern browsers treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack since it validates just fine.

Stepdown

Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren’t using IE 6. IE 6 appends a line break effect after each floated block element which will cause “stepdown”. The fix here is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements. More on preventing stepdown here.

No Hover States

Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, andeven then you don’t get them if your anchor doesn’t have a href attribute. The solution here is to use a proprietary fix, or just deal with not having hover states on everything you want.

No Alpha Transparent PNG Support

Kind of funny that Microsoft themselves developed the PNG format, but their own browser doesn’t natively support it (until IE 7)*. I have a whole roundup of different fixes for this. Do remember that regular non-alpha transparent PNG files work fine without any fix in IE 6, and are often better than their GIF sisters.

*Update: I was totally wrong about the Microsoft thing, no idea how that got in my head. Tom Boutell actually developed the PNG format. Thanks all!

So…

All these bugs are either fixable or side-steppable, but they will get ya if you don’t do your testing. My general philosophy is: design with the most modern techniques possible, but then just make sure it ain’t busted in older ones.

15 CSS Tricks That Must be Learned

2010-10-31T23:27:00.002+05:30

As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.

1. Absolute positioning inside a relative positioned element.

Putting an absolutely positioned element inside a relatively positioned element will result in the position being calculated on its nearest positioned ancestor. This is an excellent technique for getting an element to “stick” in a certain spot where you need it, for instance, a header badge.

2. Z-Index and positioning.

z-index can be somewhat of a mystery to developers. Often, you will find designers putting a very large z-index value on a div or element in order to try and get it to overlap another element. What we need to keep in mind, is that z-index only applies to elements that are given a “position” value. If you find an element will not adhere to a z-index rule you’ve applied, add “position:relative” or “position:absolute” to the troublesome div.

3. Margin Auto

Using margin auto in a theme is a fantastic way to get an element centered on the screen without worrying about the users screen size. However, “margin: auto” will only work when a width is declared for the element. This also means to apply margin: auto to inline elements, the display first must be changed to block.

4. Use Padding Carefully and Appropriately

One mistake I often made when starting off with css was using padding without knowing all the effects and the CSS Box Model. Keep in mind that according to the box model, padding adds to the overall width of the element. This can cause a lot of frustration with elements shifting out of place. For example:

#div { width:200px; padding: 30px; border:2px solid #000; }

Equals a total width of 264px (200 + 30 + 30 + 2 + 2). In addition, remember that padding, unlike margins, cannot contain negative values.

5. Hiding text using text-indent

Lets say you have an image you are using for your websites logo. This image will be inside an h1 tag, which is good for SEO, however, we also want to have our text title written in the h1 tags so the search engines can read it easily. Some may be tempted to use “display:none” on an element. Unfortunately, we would have to separate the image logo from the h1 tag if we used this technique. Using text-indent and negative values, we can get passed this like so.

h1 { text-indent:-9999px;/*Hide Text, keep for SEO*/ margin:0 auto; width:948px; background:transparent url("images/header.jpg") no-repeat scroll; }

This will ensure that all text is not visible on any resolution while allowing it stay inside the h1 element containing the logo. This also will not hide the text from screen readers as display none will.

Read more about using text-indent to hide text:

SitePoint-Using text-indent

6. IE Double Float Margin Bugs

I’m sure we have all dealt with this one, as this is one of the most common css “hacks” we need to use. If you haven’t seen this bug before, basically, a floated element with a given margin suddenly has doubled the margin in IE 6 and has dropped out of position! Luckily, the fix is super simple. We just change the display of the floated element to “inline” as seen below.

.yourClass { float: left; width: 350px; margin: 20px 0 15px 100px; display: inline; }

This change will have no effect on any browsers since it is a float element, but for some reason in IE it fixes the double margin issue.

7. Using CSS to Fight Spam

This would be something you could include to really spice up your theme description. Alen Grakalic of CSS-Globe.com wrote a fantastic post on how to use css as a kind of CAPTCHA technique. A form is declared like so:

<label for="Name">Name:</label> <input type="text" name="name" /> <label class="captcha" for="captcha">Answer?</label> <input type="text" name="captcha" id="captcha" />

For the id “captcha”, we use a background image via css. This would require the spam scripts to find your html element, scan your css, compare selectors, find the certain selector and background image, and then read that background image. Its pretty safe to say most wont be able to do this. The downside is if someone is not surfing with css enabled, they wont know what to do.

Read more about using css to fight spam:

Fighting spam with CSS

8. PNG in IE 6 Fixes

I’m sure we could all agree dealing with transparent png’s in IE 6 is a real headache. The fixes range from complex Javascript techniques to just using a Microsoft proprietary filter, to using conditional comments to swap them out for a .jpg. Keep in mind, all of these but the conditional comments rely on the Microsoft AlphaImageLoader.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

Read more on how to fix IE 6 PNG transparency:

SuperSleight Fix

Twin Helix Fix

Google’s IE 7.js

9. CSS Cross Browser Transparency

Believe it or not, it is pretty simple to get decent cross browser transparency using css. We can cover, IE, Firefox, Safari, Opera, and old browsers like Netscape Navigator. Chris Coyier recently came to our rescue again demonstrating these techniques.

.yourClass { filter:alpha(opacity=50);/*Needed for IE*/ -moz-opacity:0.5;/*Older mozilla broswers like NN*/ -khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/ opacity: 0.5;/*FF, Safari, and Opera*/ }

This wont validate, but its not really an issue and the ThemeForest staff is pretty understanding when it comes to techniques like this.

10. Use CSS Image Sprites

CSS Image sprites are a fantastic way to load many of your css images at one time, in addition to reducing http requests and the file size of your theme. In addition, you wont have to deal with any images “flickering” on hover. CSS Image sprites are achieved by putting many of your image elements all into one image. We then use css to adjust the background position, width, and height to get the image where we want it.

Resources for image sprites:

A List Apart-CSS Sprites

How to use image sprites

David Walsh on CSS Sprites

11. Use Conditional Comments to support IE 6

Far too often, web developers are forced to introduce new css rules and declarations that only apply to certain versions of IE. If your not familiar with a conditional comment, the code below would only link to a style sheet if the users browser is less than or equal to IE 7:

This code would go in the head section of your html file. If the css does not seem to be taking place in IE after you have linked to your specific style sheet, try getting more specific with your css selections to override default styles.

12. CSS Specificity

As mentioned above, CSS styles follow an order of specificity and point values to determine when styles override one another or take precedence. Nettuts recently had a nice article in which the point values for css were explained. They are like so:

Elements – 1 points

Classes – 10 points

Identifiers – 100 points

Inline Styling – 1000 points

When in doubt, get more specific with your style declarations. You can also use the !important declaration for debugging purposes if needed.

13.Achieving a minimum height in all browsers.

When developing, we often realize we need an element to have at least a certain height, and then stretch to accommodate more content if needed. Unfortunately, IE doest recognize the min-height property correctly. Fortunately, we have what is known as the min-height fast hack, that goes like so:

#yourId { min-height:300px; height:auto !important; height:300px;/*Needs to match the min height pixels above*/ }

Simple, effective, and it validates just fine. This is also one of the few cases when the !important feature comes in great handy.

14. The * HTML hack

If you need or wish to avoid linking to IE specific style sheets, one can use the * html hack. In a perfect world, the HTML element will always be the root element, so any * before html would not apply. Nevertheless, IE treats this as a perfectly legitimate declaration. So if we needed to target a certain element in IE, we could do this:

* html body div#sideBar { display:inline; }

15. Sliding Doors Technique

One major problem with using images for navigation buttons, is that you run the risk of the clients text being too long and extending past the button, or being cut off. Using two images and the css sliding doors technique, we can create buttons that will expand to fit the text inside. The idea behind this technique, is using two images for each button, and applying the images via a background declaration in CSS. For example:

HTML Markup: Your Title CSS: a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Image height */ margin-right: 6px; padding-right: 20px;/*Image Width*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Image Height */ padding: /*Change to how you see fit*/ }

Read more about sliding doors technique:

A List Apart on Sliding Doors

Dynamic Drive-an example of the sliding doors technique

And there you have it, a list of 15 css techniques to help you when developing a theme. CSS is great for designers as it allows us to be creative with code and use our own techniques to accomplish a job.

Joomla! Security – Ever been hacked? Sorting fact from fiction. Useful security tips for Joomla! users.

2010-10-27T21:21:00.000+05:30

I think it is fair to say that Joomla! has received a lot of unjustified and misinformed criticism from many in the web hosting community. In my opinion the main reason for this is that when a Joomla! powered website is hacked on a host’s server then the vast majority of providers automatically assume the problem lies with Joomla! itself (because that’s what the site is running) and immediately tag it as a script with a lot of security problems without any proper research. Some hosts have even gone as far as banning Joomla! from their servers.

The vast majority of security issues that come up with Joomla! sites are nothing to do with the core code released by Joomla! themselves but due to poorly coded, insecure or out of date third-party extensions that are installed under Joomla. Even if your Joomla install is kept fully updated but you have a single insecure extension installed then this will allow your entire site to be compromised. Vulnerable extensions are lethal to your site security.

1. Host your site on a server that runs PHP in CGI mode with su_php. This means that PHP runs under your own account user instead of the global Apache user and you don’t need to set insecure global permissions like CHMOD of 777. Not having PHP configured in this way opens you up to cross-account attacks from other users on the shared server since you will need to CHMOD to 777 any directories Joomla! need to be able to write to. It also makes installing and managing extensions a real nightmare for the webmaster.

2. Providing you are hosted on a server that runs PHP as directed above then you should ensure all of your files are CHMOD to 644 and directories to 755. You should never CHMOD any files or directories to 777, especially your configuration.php file.

3. The Joomla! FTP Layer was developed as a work around solution in case a user was hosting a site on a server that did not run PHP under the account user. It allows for extensions to be installed under Joomla without running into file ownership issues. Unfortunately, it also opens up a potential security hole since your FTP details are stored in plain text under a Joomla! configuration file. If you are hosting in a secured and tuned environment, like we have here at Rochen, then you don’t actually need the FTP layer to be enabled as extensions will install out of the box without any hassle and you can manage them without running into file ownership issues. You should disable the Joomla FTP Layer and ensure it has not stored your login details.

4. There was a security issue with Joomla reported around a month ago that allowed an attacker to reset the Joomla administrator password for a site. Although it is not a complete solution a really simple thing you can do to help protect yourself if an issue like this comes up again is to change your Joomla! administrator username. Change it from the default “admin” to something else like “chris.admin”. Make it that bit harder for an attacker to compromise your site.

5. Although it might be tempting to install every extension under the sun (there are a lot of wonderful ones out there and some not so great!) only install the ones you need. The more you install under Joomla! then the more likely your site is to be compromised. You should also ensure you remove any components (including the files themselves via FTP) for any extensions you are not using.

6. It might seem like an obvious one but ensure your web hosting provider is keeping up with their responsibilities. Ensure they are keeping PHP and other software on the server updated (nobody should be running PHP4 anymore as it is now “End of Life” and potentially open to security issues), ensure they are running their operations in a secure way (PHP in CGI mode with su_php as noted above) and ensure they are taking steps to help ward off attackers by running modules like mod_security under Apache and open_basedir under PHP. Having mod_security on your server can help to stop a lot of XSS attacks against your Joomla! install getting through, but it can’t stop them all so you still need to ensure you keep up with your Joomla! security updates.

7. Ensure you are setting secure passwords for both your Joomla! administrator user but also your web hosting account control panel and FTP logins. It would be a real shame to have spent lots of time securing your Joomla! install to then let an attacker in through a weak password. I recommend a password that is at least 8 characters in length and containers letters (both upper and lower case), numbers and at least one symbol. Also ensure your passwords do not contain dictionary words. Using a password generator is a good idea.

8. Another useful tip I can share with you is to password protect your Joomla! /administrator directory. You can do this under an Apache web server using a .htaccess file and if you are a Rochen customer this can be easily configured using the “Password Protection” option within your control panel. By password protecting the /administror directory you will have to enter a username and password prior to reaching the Joomla! administrator login page. It means that even if your Joomla! admin password is stolen then your site is still largely protected since the attacker will not be able to reach your administrator login page. Remember, it is important to use a diffrent password on the /administrator directory than you do for your Joomla! admin password or it defeats the purpose of doing this.

9. Last but not least, and probably most important, you need to ensure you keep your Joomla install itself fully updated with the latest security patches from Joomla. You also need to ensure you keep all of your extension installs updated too. Remember, even if your Joomla install is updated having even one insecure extension can allow your site to be compromised. You should subscribe to the Joomla Security Mailing List as well as the mailing lists maintained by the developers of third-party extensions you have installed. If you are using an extension from a developer that doesn’t maintain a security mailing list, then question them why. It is something all developers should be doing.

One other thing worth mentioning. If your Joomla! site hosted at Rochen is hacked then you can easily roll your account back within a few minutes to points in time over the past 30 days using Vault recovery system (if provided by your Hosting service provider). Simply login, select the files you want to restore and boom – your site is rolled back to an unhacked state. You do of course then need to secure the site otherwise it will simply be hacked again, but if you follow what I have outlined in this post then your Joomla! powered sites being hacked should be a thing of the past.

Top 7 CSS Tricks for Better SEO

2010-10-20T22:46:00.002+05:30

As most of us know it is often really difficult to build websites for both the user and Google.

Google still needs to be assisted in finding and assessing a website’s worth to such an extent that it can break the user experience altogether.

Of course there are plenty of CSS solutions to remedy Google’s weaknesses. Although I do not like the term tricks I have to refer to them as CSS tricks as in fact these are often workarounds to suit Google. Google spiders are still barely able to deal with most advanced web technologies like Flash or AJAX.

Google spiders are like little children, you really have to assist them to find stuff and understand it.

There are other search engines of course but they struggle even more so to keep it simple I will concentrate on Google, which is the by far dominant search engine in most of the western markets.

On a side note: “Trick” sounds like “black hat SEO” or cheating search engines. Well, take a look at them yourself and tell me whether I’m cheating or whether Google is making web development a pain in the back.

OK, then. Let me present to the top 7 CSS tricks for better SEO in no particular order:

1. CSS Pagination

Google has a serious problem with ranking long articles which are divided into several parts. Also long one page articles will outrank short ones usually. Apart from that the usability is key in making your visitors read the whole article so you don’t want users neither to scroll for ages nor to click a link and send a request each time they want to get to the next page of your article.

The solution is CSS pagination. Isn’t it hidden text though? Hidden text is one of the oldest “tricks” to cheat search engines, webmasters still employ it and my potential clients sometimes wonder why they don’t rank while using hidden text. So hands off hidden text! Anyways this way you can divide the content into easily digestible parts while still having it on one page. Take heed to another limitation of Google: The crawler might not crawl a very large page in its entirety.

2. Absolute Positioning

The higher your content is on a given page the more it counts for Google. Google does not see a page like a human being, it crawls the code. Thus the higher your content is in the code the better. So if you have a complex site with lots of menus, scripts and other gimmicks you should consider absolute positioning otherwise Google might even stop crawling your page before it reaches the main content. You can place the actual content high up in the code, at the top, while the users will see it in the middle of the page below the menus.

3. Styling h1, h2, h* Headlines

In HTML the h1 headline appears huge by default, the h2 is still much larger than the rest of the page copy etc. Many web designers thus used divs and spans for headlines for years to style them the way needed. Now Google won’t know what the headline is unless you tell Google by using h* tags. It’s like in 1999: You really need to use h1, h2 etc.

Of course you don’t have to make huge h1 headlines like in pre CSS times. Just style the h1 the size you want, also you can get rid off the line-height etc. which h1 headline force upon you by using the display: inline; attribute.

4. sIfr/Image Replacement for Headlines

Many people will argue that styling headlines with CSS is not enough for web designers. They are in fact right. I think it’s by now grotesque that we’re in 2010 and we still are quite limited to less than a dozen basic standard “web safe” fonts for web design. We were meant to have flying cars by 2000 and now we do not even have real typography on the web.

Many people have tackled this problem with image replacement techniques for headlines, which in short will hide the original headline and insert an image in it’s place. Some of them are fairly advanced , others are very simple. No isn’t it hidden text again? Yes, it is! Also some of these methods will hamper your SEO efforts more directly as the crawlers won’t recognize the headline anymore.

There is one popular image replace technique called sIfr which has been officially approved by Google. It uses Flash to display the headline in any font you wish but in code the h* tags are still recognizable.

5. Using Lists (ul/ol)

Most SEO experts agree by now that so called keyword density is not a major positive ranking factor. It means that mentioning your keywords 20 times instead of 5 will not make you rank better in Google. You may get penalized for so called keyword stuffing though. Now what to do in case where you really need to use the same words over and over?

Use an unordered or ordered list. Google allows repetition in lists without penalizing you.

With CSS you can style lists in any way you desire so that if you do not want a list to be clearly visible list style it accordingly. Some people do even a whole site design without tables and layers (divs) or even spans.

6. CSS Sprites

Now that site speed is an official ranking factor at Google even the webmasters who didn’t care about fast loading pages until now have to. One simple technique to use reduce page load and the number of requests is the usage of so called CSS sprites. CSS sprites are basically several small images merged into one big image.

Instead of loading each image by itself you can load just the CSS sprite and display only part of it depending on the user interaction. You use a background-image for that purpose and move the displayed area on click or mouse over then. In order to accomplish that you simply change the background-position in the CSS.

7. Pure CSS Menus

While pure CSS menues are not really a trick most people still assume that you need JavaScript or other enhancements to make dynamic menus. Well it’s not true, many advanced CSS only menus offer slick interactivitywhile being the best choice for Google and other search engine spiders.

Now can you use this methods for cheating Google? Well, I guess you can, but these techniques are so low level that Google won’t count it anyway. For all those who mistake SEO with spam: Spam works on a whole different level nowadays so using stuff like hidden text is ridiculous by now.

These CSS tricks can help you with legitimate SEO efforts.

I do not like the term white hat SEO as it acknowledges that there is another kind of SEO (I don’t agree with that premise, I rather divide: Either it’s SEO or it’s spam). Nonetheless: It’s all white hat SEO if you ask me.

Now you might argue this is not SEO 2.0, these are SEO basics known for years but it’s not really the case, the web developer community is rather keen on web standards to the point of dogma where for instance absolute positioning is frowned upon. So most people won’t use it.

Facebook and Microsoft partner on new social-search features

2010-10-15T09:20:00.000+05:30

Microsoft and Bing are partnering to “make Bing search more social.” In Web 2.0 speak, the idea is search graph + web graph = better answers.

Microsoft and Facebook execs outlined their latest people-focused search work during an event on Microsoft’s Silicon Valley research campus on October 13.

The main idea is to improve Bing results’ relevance by using Facebook Instant Personalization. And to improve Facebook’s Web-search results that are powered by Bing. From the Facebook explanation of today’s announcement: “When you search for something on Bing or in web results on Facebook (powered by Bing), you’ll be able to see your friends’ faces next to web pages they’ve liked.” (Don’t worry: You can opt out.)

The actual deliverables from today’s announcement are two new social search features Microsoft and Facebook developed in tandem. They will begin rolling out to users on October 13 and will continue to populate in “the coming months.” The features are “Liked Results” (recommendations from their Facebook friends that are built on Facebook’s public “Like” feature) and “Facebook Profile Search” (which will provide user-search results based on their relevancy to the searcher’s Facebook network and friends.)

Microsoft researchers have been working on these kinds of social-search concept for a while. The first reference I could find was a Microsoft Research project codenamed “Nocturnal.”

“Nocturnal that aims to use an established online community to provide a mechanism for giving reviews and recommendations from your social circle a higher priority when you search the Web,” explained an article on the Microsoft Research web site from 2007.

More recently, Microsoft researchers published a white paper entitled “A Comparison of Information Seeking Using Search Engines and Social Networks.” (Microsoft shared the paper at the SMX East conference earlier this month.)

The Microsoft researchers conducted a study in which 12 participants posted a question to Facebook while simultaneously trying to find the answer to the same question using Web search. The result? “Search engines and social networks each provide value at different stages in the search process.”

I’d agree with that assessment. Some queries I wouldn’t mind asking my Facebook “friends.” What’s the best place for Dim Sum in San Francisco? Sure, I’d want to see what my Facebook friends think.

Some queries I wouldn’t trust to those friends. No offense to my “friends,” but my Facebook account is a work account and while it includes some people I would call “friends,” many of the folks I’ve accepted I’ve never met. I don’t know them and they don’t know me. They’re folks who follow my coverage of Microsoft. I don’t want to know which movies they think I should see or which iPad case I should buy.

From what the executives said at today’s press conference, it sounds like Microsoft and Facebook have other jointly-developed search tricks up their sleeves. (Facebook CEO Mark Zuckerberg made a passing reference to another maps-related one, with no details.)

I see today’s announcement as indicating even more clearly that Bing and Facebook are taking different paths with search. Bing is definitely optimizing for the everyday consumer’s search habits. ut I am not the typical search user: I typically use search as much, if not more, to find specific quotes at press conferences, technical articles and other general-search results. I still find the best results for these kinds of research queries on Google, not Bing.