Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

March 29 2012

00:00

6 Must Read Tips Before Registering a Domain Name

There are many things a web designer has to think of when designing a website. Moreover, if he has full responsibility, he has to come up with a good domain name as well. Although many think it is not so important, the domain name is as important as your company name, the website or the Facebook page. Having a good domain name will many times not only bring you more traffic, but also make your webpage easier to remember – and this brings traffic too.

Finding the perfect domain name is not easy in today’s web. Many of the domains which you could think of using are either used by another company or bought for profit by individuals or even other businesses. Web professionals often spend more time finding the right domain name than designing an identity or a website.

Branding

Branding is a very important concept for a business. Every company has a brand, which represents their name, logo, color schemes and visual identity. However, not all of them are branded. The difference is in the brand awareness. A company with a brand awareness relies on their customers’ ability to recall and recognize their brand in different conditions and link them to their brand elements. It has something to do with clients being satisfied with a product and recognizing the products. It is the difference between Coca-Cola and a no-name Cola company. Or the difference between Apple and a Taipei-based unknown tablet producer.

Ten years before it was not the case, but today if you have a company and want a powerful brand, basic knowledge of domain names is very important, as it is similar to your office address. It is where people can find and get in touch with you.

Extensions

The three most used extensions in the world are .com, .net and .org. A domain name with one of these extensions might seem ideal for any kind of business. Going for a free international domain such as .tk might not be so successful. It happens many times that visitors can’t remember your website, so they try the name and these three popular extensions. This is what I also do most of the time, as I assume a company I would be interested in doing business with, or a website I would be interested in visiting would have one of these three extensions. The three top extensions got so popular that, as I just said, visitors just expect companies to use them.

Some domain names providers offer the option of buying all three at a discounted price. Having all three of them with your brand name will be very useful for you in the future – this is a very intelligent move that will put you in pole position.

Another advantage of using all three (or one of the three) is that they are very cheap to buy. The support for them is also all over the place and it it more difficult to find a provider which doesn’t sell them than one which does. Now I am not saying you simply have to own one of these three. WordPress co-founder Matt Mullenweg has one of the coolest domain names ever: www.ma.tt. Yes, he has a Trinidad & Tobago domain, but  it fits his name perfectly. If you can find something intelligent like that, go for it. But think of the fact that people who don’t know too much about the web don’t even realize there is something else besides .com, .net and .org.

This section should be food for thought. However, choosing the domain extension should be one of the easiest task in creating a powerful brand. But wait, there is much more to follow.

Location

Talking about extensions, location is something else you might want to think of. It depends a lot on your business and its purpose. It depends a lot on the audience, market and their behavior. If you have a Danish company targeting only Danes, having a website ending in .com would make no sense, when the option of having a .dk extension is easy to spot. All countries have their own domain extensions. TLDs (top-level domains) are obviously not the only ones available.


Image by annaOMline.

Using a country-code TLD is mostly for companies and individuals in the respective country. Wikipedia has a long and complete list of worldwide TLDs. It is easy to notice that some of them require either having a company registered in the country or at least a permit of residence, therefore registering them might not be so easy if you look at coming up with a trick as Matt did.

It is also an option for the ones targeting nations not using an English alphabet, like the Asian or Arabian countries; or Russia. Those are called IDNs (Internationalized Domain Names) and you should only use them to supplement a .com address (or any other TLD); otherwise it will get confusing for visitors whose main language is English or whose alphabet is the one we use in Europe or America.

Hacks

We talked about them a bit earlier. Hacks are those smart things you can do to integrate the domain extension into your domain name. Surprising or not, there are even tools out there on the web that can help you find possible combinations. Domai.nr is probably the best one to use, as it gives you very many options at a simple search. People decide to use hacks not only because they are cool, but mostly because they are very close to finding the right domain name for their company, but it is taken. This is so frustrating and it will happen so many times when you search for a domain name. Finding the right domain name for you is not going to be easy, therefore you might want to look into hacks.

Before buying

Great, now you found your domain and are ready to buy it. No, you are not! Something is missing. You need to make sure your domain name does not create legal issues. Make sure it is not similar to the one of another company doing the same business as you do.

Microsoft vs. MikeRoweSoftis the most popular dispute regarding domain name infringement. This happened almost 10 years ago and was a huge case in the media, when the young web designer Mike Rowe was disputing his domain name with the American giant because of the domain name’s resonance.

Applying for a trademark is something huge companies do, as they know their websites will be popular by default, but this is really expensive to go for. If you are just in the beginning, you might want to protect your name some other way and leave purchasing a trademark for later down the road. Some technique you could use is called bulk purchasing. Many individuals prefer to buy lots of domains with different extensions, but the same name, and redirect all of them to the main website.

WHOIS services

A mistake many individuals make is registering their domains under a WHOIS privacy service. This is a very dangerous technique, although it seems like it is a helpful one first time you hear about it. What happens if you register your domain under a WHOIS privacy service is that your contact details are hidden. Instead, the fields are filled in with the name of your provider. Why is this dangerous? Because according to ICANN policies, is the name in the WHOIS details that owns the domain.

This means that if your website gets hacked, you have little chance of proving the domain was actually yours. If their name is in the records, it is actually them owning the domain you paid for. So even if you want to protect your name, I don’t advise you to do it by using these services, as it is very dangerous.

Conclusion

Having a good domain name can also improve the user experience on your website. Even if today many of a website’s visits come from search engines and referrals, having an easy to remember domain name is always going to be helpful. They are likely to reduce the percentage of people forgetting how to find you.

Keep in mind that top-level domains can help you in search engine results. A .com will always be indexed faster and better than a .ru. Spending time to think of all details and find the right domain name is something that will take a lot of time.

Is there a specific way you search for a domain? Have you ever paid for a domain through an auction? Do you think the domain name matters?

February 10 2012

10:00

Extensive Roundup of the Best WordPress Plugins You’ll Ever Need: Year 2012 Edition

Besides being a beautiful, easy to use and powerful platform by itself, WordPress is also loved because of it’s high level of customization and optimization. Plugins are the best way to optimize and enrich your WordPress blog. And it’s not limited to performance only. The plugins WordPress offers range from page speed optimization, user engagement, advanced backup, full theme modification to social sharing and search engine optimization.

No matter what kind of website or blog you own, you’ll definitely find something that will make your site better. Just like with clothes some plugins are one size fits all, and other are quite specific. Almost every blog will encounter spam, security concerns and will want to expose their content to the largest audience possible. This two article series focuses on the most essential and useful WordPress plugins every blog will find useful. Whether you’re bored with the default comments platform, want to try custom fonts or just add neat social sharing options, continue reading to find the best WordPress plugins out there. The plugins are sorted into categories and only a few of them have the same features so you can find the very right ones for you.

The first part will cover optimization, forms, comments, site backup, posts, security, design & theme customization and media. Stay tuned for part 2 which will contain even more specific and targeted WordPress plugins.

The second part will cover ecommerce, SEO, social media, marketing and lot of great miscellaneous plugins.

Optimization

1. WP Super Cache

WP Super Cache is a very fast caching engine for WordPress that produces static html files. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

2. WP-Optimize

WP-Optimize is a WordPress 2.9++ database cleanup and optimization tool. It doesn’t require PhpMyAdmin to optimize your database tables. It allows you to remove post revisions, comments in the spam queue and un-approved comments within few clicks.

3. W3 Total Cache

W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.

Forms

1. Contact Form 7

Contact-best-wordpress-plugins-every-blog

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail content flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

2. Fast Secure Contact Form

A super customizable contact form that lets your visitors send you email. Blocks all automated spammers. No templates to mess with.

3. Gravity Forms (Premium –  $39)

Gravity-forms-best-wordpress-plugins-every-blog

Gravity Forms is hands down the best contact form plugin for WordPress. Build and publish your WordPress forms in just minutes. No drudgery, just quick and easy form-building.

4. AJAX Contact Forms (Premium – $10)

Ajax-contact-form-best-wordpress-plugins-every-blog

This is a jQuery based AJAX powered HTML / PHP contact form with Twitter Direct Messaging, easily integrated into WordPress via shortcodes and functions.

Comments

1. Disqus Comment System

Disqus, pronounced “discuss”, is a service and tool for web comments and discussions. Disqus makes commenting easier and more interactive, while connecting websites and commenters across a thriving discussion community.

2. GD Star Rating

GD Star Rating plugin allows you to set up an advanced rating and review system for post types and comments in your blog using single, multi and thumbs ratings.

3. Wizzart – Recent Comments

This plugin offers a highly customizable widget to show recent comments of your visitors in your sidebars.

4. Facebook Comments

Full Facebook Comments moderation and management for your WordPress site. Quick and easy to set up. Insert automatically or via a shortcode.

5. Thank Me Later

Automatically send a ‘thank you’ e-mail to those who comment on your blog. This plugin engages visitors by reminding them to check back for new comments and interesting content.

6. Disable Comments

Allows administrators to globally disable comments on their site. Comments can be disabled according to post type.

7. WP Customer Reviews

WP Customer Reviews allows your customers and visitors to leave reviews or testimonials of your services. Reviews are Microformat enabled (hReview).

Site Backup

1. WP-DBManager

Allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. Supports automatic scheduling of back ups, optimizing and repairing of database.

2. BackUpWordPress

BackUpWordPress will back up your entire site including your database and all your files once every day.

Posts

1. Editorial Calendar

Calendar-best-wordpress-plugins-every-blog

The Editorial Calendar makes it possible to see all your posts and drag and drop them to manage your blog.

2. Yet Another Related Posts Plugin

Related-posts-best-wordpress-plugins-every-blog

Yet Another Related Posts Plugin (YARPP) gives you a list of posts and/or pages related to the current entry, introducing the reader to other relevant content on your site.

3. SimpleReach Slide

Simplereach-best-wordpress-plugins-every-blog

The Slide recommends related posts from within your site on a widget that “slides” in at the bottom of the page.

4. WordPress Popular Posts

WordPress Popular Posts is a highly customizable sidebar widget that displays the most popular posts on your blog. You can use it as a template tag, too.

5. Raw HTML

Lets you use raw HTML or any other code in your posts. You can also disable smart quotes and other automatic formatting on a per-post basis.

6. Auto Post Thumbnail

Automatically generate the Post Thumbnail (Featured Thumbnail) from the first image in post or any custom post type only if Post Thumbnail is not set.

Security

1. Akismet

Akismet-best-wordpress-plugins-every-blog

Akismet checks your comments against the Akismet web service to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen.

2. SI CAPTCHA Anti-Spam

Captcha-best-wordpress-plugins-every-blog

Adds CAPTCHA anti-spam methods to WordPress on the forms for comments, registration, lost password, login, or all. For WP, WPMU, and BuddyPress.

3. Secure WordPress

Secure WordPress beefs up the security of your WordPress installation by removing error information on login pages, adds index.html to plugin directories, hides the WordPress version and much more.

4. BulletProof Security

WordPress Website Security Protection. Website security protection against: XSS, RFI, CRLF, CSRF, Base64, Code Injection and SQL Injection hacking att

Design & Theme Customization

1. Widget Context

Widget Context allows you to specify widget visibility settings – you can choose to display them only on certain posts, front page, category or tag pages etc.

2. WP Google Fonts

Google-fonts-best-wordpress-plugins-every-blog

The WP Google Fonts plugin allows you to easily add fonts from the Google Font Directory to your WordPress theme.

3. WP Maintenance Mode

Adds a splash page to your site that lets visitors know your site is down for maintenance. Full access to the back- & front-end is optional.

4. Genesis Simple Sidebars

This plugin allows you to create multiple, dynamic widget areas, and assign those widget areas to sidebar locations within the Genesis Theme Framework

5. Shortcodes Ultimate

With this plugin you can easily create buttons, boxes, different sliders and much, much more. Turn your free theme to premium in just a few clicks.

6. All In One Favicon

Easily add a Favicon to your site and the WordPress admin pages. Complete with upload functionality. Supports all three Favicon types (ico,png,gif).

7. Font Uploader (Premium – $10)

Font-uploader-best-wordpress-plugins-every-blog

This plugin lets you upload your own font files and apply them to any element of your website without requiring a knowledge of html or css.

8. WPtouch

Wptouch-best-wordpress-plugins-every-blog

WPtouch: A simple, powerful and elegant mobile theme for your website. WPtouch automatically transforms your WordPress website into an application-like theme.

9. Widget Logic

Widget Logic lets you control on which pages widgets appear using WP’s conditional tags. It also adds a ‘widget_content’ filter.

10. WP Content Slideshow

Content-slideshow-best-wordpress-plugins-every-blog

WP Content Slideshow is the perfect Slideshow for WordPress. It displays up to 5 Posts or Pages with Tile, Description and Image for every Post.

Media

1. Easing Slider

Slider-best-wordpress-plugins-every-blog

The Easing Slider comes with various options that allow you to choose different sources to get the images from and also multiple styling options so that you”ll never have to edit any files directly & with ease. Create your own unique elegant slider.

2. NextGEN Gallery

NextGEN Gallery is a full integrated Image Gallery plugin for WordPress with dozens of options and features.

3. flickrRSS

Allows you to integrate Flickr photos into your site. It supports user, set, favorite, group and community photostreams.

4. WordPress Video Plugin

A filter for WordPress that allows easy video embedding of supported sites. Support for 65 different video sites.

5. oQey Gallery

Qqey-best-wordpress-plugins-every-blog

oQey Gallery is a premium grade plugin for managing images and video, creating photo slideshows with music, photo & video galleries that works fantastic.

6. uBillboard (Premium – $20)

Ubillboard-best-wordpress-plugins-every-blog

uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options so you can customize it all you want without being overwhelmed with options you never wanted or needed.

7. WP Lightbox 2

This plugin used to add the lightbox (overlay) effect to the current page images on your WordPress blog.

Commerce

1. WP e-Commerce

Ecommerce-best-wordpress-plugins-every-blog

WP e-Commerce is a free WordPress Shopping Cart Plugin that lets customers buy your products, services and digital downloads online.

2. Jigoshop

Jigoshop-best-wordpress-plugins-every-blog

Jigoshop is an eCommerce plugin for WordPress developed by professionals with years of experience delivering online shops for global brands.

3. WooCommerce

Woo-commerce-best-wordpress-plugins-every-blog

Transform your WordPress website into a thoroughbred online store. Delivering enterprise-level quality & features whilst backed by a name you can trust.

4. uPricing (Premium – $15)

Upricing-best-wordpress-plugins-every-blog

uPricing is the ultimate and unique solution for all your WordPress related pricing page needs. Creating pricing tables has never been easier. uPricing comes with easy to use jQuery powered admin interface that lets you create and edit your pricing tables.

5. PayPal Donations

Easy, simple setup to add a PayPal Donation button as a Widget or with a shortcode.

SEO

1. All in One SEO Pack

All in One SEO Pack is the best SEO plugin out there which will automatically optimize your WordPress blog for search engines.

2. WordPress SEO by Yoast

WordPress SEO is the most complete WordPress SEO plugin that exists today for WordPress.org users. It incorporates everything from a snippet preview and page analysis functionality that helps you optimize your pages content, images titles, meta descriptions and more to XML sitemaps, and loads of optimization options in between.

3. Google XML Sitemaps

This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and Ask.com to better index your blog. With such a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently.

Social

1. Add Link to Facebook

Automatically add links to posts or pages that are being published to your Facebook wall, pages or groups. Simple one time setup and forget. The way links appear on Facebook can be customized.

2. WP to Twitter

Posts a Twitter update when you update your WordPress blog or post to your blogroll, using your chosen URL shortening service. Requires PHP 5 and cURL

3. Digg Digg

Digg-best-wordpress-plugins-every-blog

Digg Digg allows you to integrate popular social buttons into WordPress easily.

4. ShareThis

Sharethis-best-wordpress-plugins-every-blog

The ShareThis plugin seamlessly enables users to share your content through Email,Facebook,Twitter, Google +1, Like, Send and many more.

5. BuddyPress

BuddyPress lets users register on your site and start creating profiles, posting messages, making connections, creating and interacting in groups and much more. A social network in a box, BuddyPress lets you build a social network for your company, school, sports team or niche community.

6. bbPress

Bbpress-best-wordpress-plugins-every-blog

bbPress is forum software with a twist from the creators of WordPress.

7. The Google+ plugin

The Google + Plugin integrates WordPress with your G+ Profile and Page – now with BuddyPress and Post Format support.

8. Twitter Widget Pro

A widget that properly handles twitter feeds, including parsing @username, #hashtags, and URLs into links.

Marketing

1. Newsletter

This plug-in lets you collect subscribers on your blog with a single or double opt-in subscription process. Double opt-in is law compliant and it means the user has to confirm the subscription following simple standard instructions sent to him via email.

2. WP125

Easy management of 125×125 ads on your blog. Ads can be run for a specified number of days, and will automatically be taken down. Track clicks too.

3. s2Member

s2Member (membership with PayPal) offers powerful membership capabilities. Protect members only content. The s2Member Framework integrates with PayPal very easily and fully supports recurring billing.

4. MailPress

The WordPress mailing platform.

5. Subscribe2

Subscribe2 provides a comprehensive subscription management and email notification system for WordPress blogs that sends email notifications to a list of subscribers when you publish new content to your blog.

6. MailChimp Widget

Adds a widget that allows your users to sign up for your MailChimp mailing list.

7. Simple PopUp

A simple, attractive, extremely fast and non annoying pop up box for your WordPress Blog. It’s power lies in its ease of use.

Miscellaneous

1. WP-PageNavi

Want to replace the old ← Older posts | Newer posts → links with some page links? This plugin provides the wp_pagenavi() template tag which generates fancy pagination links.

2. Jetpack by WordPress.com

Jetpack-best-wordpress-plugins-every-blog Jetpack is a WordPress plugin that supercharges your self-hosted WordPress site with the awesome cloud power of WordPress.com.

3. Exclude Pages

This plugin adds a checkbox, “include this page in menus”, which is checked by default. If you uncheck it, the page will not appear in any listings of pages (which includes, and is usually limited to, your page navigation menus).

4. Broken Link Checker

This plugin will check your posts, comments and other content for broken links and missing images, and notify you if any are found.

5. ManageWP Worker

Managewp-best-wordpress-plugins-every-blog

ManageWP Worker plugin allows you to remotely manage your blogs from one dashboard. You can read our review here.

6. Redirection

Redirection is a WordPress plugin to manage 301 redirections and keep track of 404 errors without requiring knowledge of Apache .htaccess files.

7. FD Feedburner Plugin

Redirects the main feed and optionally the comments feed seamlessly and transparently to Feedburner.com.

8. Hotfix

Provides unofficial fixes for selected WordPress bugs, so you don’t have to wait for the next WordPress core release.

9. Google Analytics for WordPress

Track your WordPress site easily and with lots of metadata: views per author & category, automatic tracking of outbound clicks and page views.

10. WP-Polls

Adds an AJAX poll system to your WordPress blog. You can also easily add a poll into your WordPress’s blog post/page.

11. Ozh’ Admin Drop Down Menu

The lazy and the productive will love it : all admin links available in a neat horizontal CSS driven drop down menu. No need to click on “Manage” then “Pages” to edit pages. And plenty more space on your screen.

12. Pretty Link Lite

Shrink, beautify, track, manage and share any URL on or off of your WordPress website. Create links that look however you want using your own domain name.

13. 5sec Google Maps (Premium – $8)

Google-maps-best-wordpress-plugins-every-blog

Integrate Google Maps into your WordPress blog easily without using API or any code.

14. Advanced Access Manager

Advanced Access Manager is a new way of controlling access to your single blog or multi-site setup. This easy to use interface is a very helpful tool for experienced WordPress users.

Conclusion

Do you know and use any other plugins besides the ones we suggested here? We would really appreciate your feedback here, but we are pretty sure this list will be very comprehensive for you and will satisfy most peoples needs!

Sponsored post
soup-sponsored
04:52

March 14 2011

23:06

Quick Tip: 2 Chrome Extensions you Must Install


In this video quick tip, rather than focusing on some specific coding technique, we’re going to review two excellent Chrome extensions that I highly recommend you install: StyleBot and Vimium.

December 13 2010

23:36

How to Create an Opera Extension from Scratch


Opera 11, the next version of the critically popular web browser, packs an interesting, much wanted feature: extensions. Extensions allow users to make the web browser their own by adding features and functionality directly into the browser itself, and not as a standalone Opera Widget or Opera Unite application.

In this tutorial, you will learn the basics of developing Opera components by creating a simple extension with the same web standards we already use to build websites.


Introduction

Opera extensions are based on the W3C widget specification.

Developers can build Opera extensions with the same web stack skills they already possess (HTML, JavaScript, and CSS) to build websites and web applications. With only a few tweaks to their code, developers who have already authored a similar extension for other browsers will be able to create an Opera extension easily.

Opera has also released a supporting API to help developers build Opera extensions much more easily.

Here is a quick example of the mini Wikipedia extension:

Nettuts+ extension

You can create numerous different types of Opera extensions:

  • Opera toolbar button: A basic extension that adds a button to Opera's toolbar.
  • Button + Popup: A button in Opera's toolbar, which, when clicked, displays a popup window with a third party URL. We will create this form of extension today.
  • Button + Badge: It is often used to display a count of items, such as unread mails or messages.
  • Manipulate Tabs and Windows: Opera provides developers with the ability to manipulate tabs and windows.
  • A bookmarklet extension: When clicked, executes a bookmarklet function from the background process and performs it on the current tab.

Step 0: Getting Started

For today’s tutorial, we’ll create a simple extension that adds a Nettuts+ button to Opera's toolbar. A popup window will display when the user clicks on this button. The user can then search for articles from the Nettuts+ website directly from this popup window. In addition, there are a list of Nettuts+ tutorials.

To get started, all we require is a copy of Opera 11, and a text editor or IDE of your choice. You can download Opera 11 here.


Step 1: Creating The Extension Configuration File

First, we will create the extension configuration file, which holds the meta data describing the extension. We can specify information such as the extension’s name, author and icon here.

Create an XML file named config.xml, and then add the following code to it:

<?xml version="1.0" encoding="utf-8" ?>

<widget xmlns="http://www.w3.org/ns/widgets">
    <name>Nettuts+</name>
    <description>Nettuts+ Fast Search</description>
    <author href="http://net.tutsplus.com/author/fikri-rakala/" email="address@yahoo.co.id">Fikri Rakala</author>
    <icon src="icons/Icon-64.png"/>
</widget>
            

The <widget> element is the root element of the config.xml file. It contains four child elements (name, description, author, and icon).

  • The <name> element contains the name of the extension (Nettuts+)
  • The <description> element contains the description of the extension
  • In the <author> element, we enter the name of the extension's author (your name)
  • The <author> element may contain two attributes: href and email

In the <icon> element, we specify the location of the extension icon. The extensions manager and Opera extensions site will use this icon. Opera recommends using a 64×64 pixels icon.


Step 2: Creating the index.html File

Opera extensions require a start file, commonly called index.html. The index.html file is one of the only two mandatory parts of the extension package (the other is config.xml). This file is a bare bones HTML template with a script that creates the UI elements. The body of this document is not used.

Let’s create the index.html file and then add the following script within the head of the document:

<script>
    window.addEventListener("load", function() {
    var theButton;
    var ToolbarUIItemProperties = {
            title: "Nettuts+",
            icon: "icons/Nettuts-icon.png",
            popup: {href: "popup.html", width: 300, height: 200}
    }
    theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
    opera.contexts.toolbar.addItem(theButton);
    }, false);
</script>

The script will create a toolbar button with a number of properties. A tooltip is created along with an 18×18 pixels icon. A popup belonging to the button is also created with a specified size, along with a reference to where the popup UI is defined. The script above will add a button to Opera’'s toolbar when the extension loads.

In the ToolbarUIItemProperties object, we define the properties of the button. There are five properties that we can pass to the ToolbarUIItemProperties. The five properties are as follows:

  • disabled. This specifies whether the button is enabled or not. It is true (disabled) by default and accepts a boolean value.
  • title. This property definess the tooltip that is shown when the user hovers over the button.
  • icon. This property defines the icon used on the button. If you supply a size other than 18×18 pixels, it will scale the image to fit that size.
  • onclick. The function to execute when a user clicks on the button. We do not use this property on this extension.
  • onremove. The function to execute when the button is removed from the ToolbarContext. We also do not use this property.

After we’ve defined the properties of the button in the ToolbarUIItemProperties object, we create the actual button and apply the properties by using the createItem method:

theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
        

Finally, we add the button to Opera's toolbar by using the addItem method:

opera.contexts.toolbar.addItem(theButton);
        

Here is the complete code of the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
       window.addEventListener("load", function()
       {
       var theButton;
       var ToolbarUIItemProperties = {
            title: "Nettuts+",
            icon: "icons/icon.png",
            popup: {href: "popup.html", width: 300, height: 200}
        }
        theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
        opera.contexts.toolbar.addItem(theButton);
      }, false);
    </script>

</head>
<body>

</body>
</html>       

Step 3: Creating the Popup Window

In step two, above, when we created the index.html file, we defined the properties (the location and window's size) of the popup object within the ToolbarUIItemProperties object. This time, we only need to create the content of the popup window. This is just a HTML document, with its viewport set to the specified size. We can use HTML, CSS, JavaScript or any other web technology that we normally use on a web page.

Create a file called popup.html, and then add the following elements into the body:

<input id="Text1" type="text" style="width: 170px" />
<input id="Button1" type="button" value="Search" onclick="SearchonNettutsplus()" />

<ul>
   <li><a href="http://net.tutsplus.com/" target="_blank">Home</a> </li>
   <li><a href="http://net.tutsplus.com/category/tutorials/asp-net/" target="_blank">ASP.NET</a></li>
   <li><a href="http://net.tutsplus.com/category/tutorials/cmss/" target="_blank">CMSs</a></li>
   <li><a href="http://net.tutsplus.com/category/tutorials/databases/"
    target="_blank">Databases</a> </li>
   <li><a href="http://net.tutsplus.com/category/tutorials/design-tutorials/"
    target="_blank">Design</a> </li>
   <li><a href="http://net.tutsplus.com/category/tutorials/html-css-techniques/"
    target="_blank">HTML & CSS</a>  </li>
   <li><a href="http://net.tutsplus.com/category/tutorials/javascript-ajax/"
    target="_blank">JavaScript & AJAX</a> </li>
   <li><a href="http://net.tutsplus.com/category/tutorials/php/" target="_blank">PHP</a></li>
   <li><a href="http://net.tutsplus.com/category/tutorials/ruby/" target="_blank">Ruby</a></li>
   <li><a href="http://net.tutsplus.com/category/tutorials/site-builds/" target="_blank">Site Builds</a></li>
   <li><a href="http://net.tutsplus.com/category/tutorials/tools-and-tips/" target="_blank">Tools & Tips</a> </li>
   <li><a href="http://net.tutsplus.com/category/tutorials/wordpress/" target="_blank">Wordpress</a></li>
   <li><a href="http://net.tutsplus.com/category/tutorials/other/" target="_blank">Other</a> </li>
</ul>
            

Please note that we’re using the onclick attribute here only for convenience’s sake.

To control the style of the popup window, we add the following stylesheet into the head of the document:

<style>
body {
 line-height :1.5em;
}

h1 {
 font-family :Arial, Verdana ;
 font-size :1em;
}

ul {
 list-style-type:none;
 margin:0;
 padding:0;
}

li {
 display:inline;
 margin-right :10px;
}
</style>
        

Next, we add a JavaScript function into the head of the document to handle the Button1 click event:

<script">
function SearchonNettutsplus() {
 // Get Text1 value
 var search = escape(document.getElementById("Text1").value) ;

 // Search articles on Nettuts+ and show the result on new window
 window.open("http://net.tutsplus.com/?s=" + search);
}
</script>
        

Here is the completed code for the popup.html document:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Nettuts+</title>
 <style>
  body {
  line-height :1.5em;
  }

  h1 {
  font-family :Arial, Verdana ;
  font-size :1em;
  }

  ul {
  list-style-type:none;
  margin:0;
  padding:0;
  }

  li {
  display:inline;
  margin-right :10px;
  }
  </style>

  <script>
  function SearchonNettutsplus() {
  // Get Text1 value
  var search = escape(document.getElementById("Text1").value) ;

  // Search articles on Nettuts+ and show the result on new window
  window.open("http://net.tutsplus.com/?s=" + search);
  }
  </script>

</head>
<body>
    <input id="Text1" type="text" style="width: 170px" />
    <input id="Button1" type="button" value="Search" onclick="SearchonNettutsplus()" />
    <br /><br />

    <ul>
       <li><a href="http://net.tutsplus.com/" target="_blank">Home</a> </li>
       <li><a href="http://net.tutsplus.com/category/tutorials/asp-net/" target="_blank">ASP.NET</a></li>
       <li><a href="http://net.tutsplus.com/category/tutorials/cmss/" target="_blank">CMSs</a></li>
       <li><a href="http://net.tutsplus.com/category/tutorials/databases/"
    target="_blank">Databases</a> </li>
       <li><a href="http://net.tutsplus.com/category/tutorials/design-tutorials/"
    target="_blank">Design</a> </li>
       <li><a href="http://net.tutsplus.com/category/tutorials/html-css-techniques/"
    target="_blank">HTML & CSS</a>  </li>
       <li><a href="http://net.tutsplus.com/category/tutorials/javascript-ajax/"
    target="_blank">JavaScript & AJAX</a> </li>
       <li><a href="http://net.tutsplus.com/category/tutorials/php/" target="_blank">PHP</a></li>
       <li><a href="http://net.tutsplus.com/category/tutorials/ruby/" target="_blank">Ruby</a></li>
       <li><a href="http://net.tutsplus.com/category/tutorials/site-builds/" target="_blank">Site Builds</a></li>
       <li><a href="http://net.tutsplus.com/category/tutorials/tools-and-tips/" target="_blank">Tools & Tips</a> </li>
       <li><a href="http://net.tutsplus.com/category/tutorials/wordpress/" target="_blank">Wordpress</a></li>
       <li><a href="http://net.tutsplus.com/category/tutorials/other/" target="_blank">Other</a> </li>
    </ul>

</body>
</html>

Step 4: Packaging and Installing the Extension

Our extension is now finished! All that’s left to do is to select all the files and zip them up. Once that is done, we can rename the zip file to Nettutsplus.oex (remember to replace the .zip extension with .oex) and we are done.

At this point, we can upload our extension to http://addons.labs.opera.com/.

To install it as a regular user, simply drag the extension (Nettutsplus.oex) into Opera, and it will ask you if you want to install it. After installing it, you will find the Nettuts+ button in Opera's toolbar.

Here is the Nettuts+ extension running on Opera 11:

Nettutsplus Extension

Conclusion

Opera extensions can vary from simple to extremely complex. After working along with this tutorial, I hope that you now possess the basic knowledge behind the process of creating Opera extensions. For more information about developing Opera extensions, please refer to the guide and documentation that is provided by Opera.

Happy Coding!


May 11 2010

10:00

32 Google Chrome Extensions For Smart Designers

Google chrome is a relatively new web browser but it has already gained huge popularity with its great speed and features. Web developers must work more faster and more productively – what could help more than these extensions aimed to ease your daily development process and save time.

At least for me – none of extensions have made browser load speed slower – I cannot say this about Firefox though, which I don’t use anymore. Scroll through this list – I am sure you will find at least few new extensions to use daily!

1. FireBug Lite

I hope we all know FireBug addon for FireFox, so here is the same extension but only for Chrome. Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

2. Resolution Test

Resolution Test changes the size of the browser window for web developers to preview websites in different screen resolutions. It includes a list of commonly used resolutions as well as a custom option for you to input your own.

3. Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by:

  • Javascript parsing and execution
  • Layout
  • CSS style recalculation and selector matching
  • DOM Event handling
  • Network resource loading
  • Timer fires
  • XMLHttpRequest callbacks
  • Painting
  • and more …

4. Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person.

5. Pendule

Use this extension in addition to the built-in Developer Tools. This tool is so similar to FireBug. You can just press mouse button and inspect the element.

6. Aviary Screen Capture

Take a screenshot of any webpage and edit it directly in your browser with Aviary.com applications. Plus convenient access to the Aviary website and tools.

Features:

  • Save to desktop, host online, or edit in other Aviary apps.
  • Captures instantly.
  • Screen capture of the visible portion of all web pages and images.
  • Add visual notes like arrows, text and highlights to your capture.
  • Crop your capture.
  • Resize, rotate and flip your capture.
  • Smart select and move of captured elements.
  • Grab color information from the page.
  • Quick launch 6 Aviary design tools: Image editor, markup editor, vector editor, color palette editor, effects editor & audio editor.

7. Chrome Web Developer Tools

This extensions developers are trying to get this as close as possible to “FireFox Web Developer” addon. This extension made easy the web development.

8. Chrome Sniffer

Chrome Sniffer will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Great way to know what source site is using (if source is opensource and it is popular).

9. Lorem Ipsum Generator

It generates random “Lorem Ipsum” text, it allows to choose words per paragraph and number of paragraphs.

10. PlainClothes

Unstyle the web with this tool. PlainClothes makes everything as possible closer to default or your wanted style. Just imagine – text is black, backgrounds are white, unread links are blue, visited links are purple, all links are underlined or any other colors you like. And all text is rendered in your default fonts (as defined in “Options” > “Under the Hood” > “Change font and language settings”). Everywhere. Automatically.

This is how 1stwebdesigner.com looks using this tool:

11. Internet Explorer Tab

Internet Explorer Tab shows IE in Google Chrome. Very simple extension. I think it’s very useful to not to use IE.

12. Chrome SEO

The Google Chrome SEO Extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks, PageRank Checks and other daily SEO tasks.

13. SEO Site Tools

It validates CSS and HTML, displays server software, checks for gzip compression, page headers and shares even more on-page suggestions based on accepted SEO knowledge. It can disable right-click scripts, and does window resizing to see where fold would be on different size monitors. Fast clean simple UI with a wealth of SEO information makes doing a quick consult fast and easy.

14. META SEO Inspector

Meta data is not just the usual HTML meta tags, but the XFN tags, various microformats, the recently introduced canonical attribute, the no-follow links and so on.

15. Validity

Validity can be used to quickly validate your HTML documents from the address bar.

Just click the icon in the address bar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip.

Validity also gives you the option to use your own installation of the W3C Validation Service. (For more information on installing the W3C Validation Service see the documentation at http://validator.w3.org/docs/install.html).

16. Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker.

17. Color Picker

Quickly get the Hex and RGB values of any color! Also adjust Hue, Saturation, and Balance.

18. Image Cropper

This extension help you to crop any images on the fly.
It’s especially useful when you need to crop your online album photo for IM thumbnail.

  • Crop images in img html element
  • Crop css background images for any html element
  • Cropped Image is in PNG format
  • Right click on top of the selection to “save as” the cropped image.

19. Webpage Screenshot

Makes screenshot of whole page even if page is very long.

20. Picnik

The Picnik Extension for Chrome lets you easily edit the images you come across while browsing the web. With a click you can create a snapshot of your current web page and open it in Picnik for easy editing, annotation and sharing. Do the same for all the image on the current page — just pick the image from the dynamic hot list and then edit, annotate and share with Picnik. It is a great replacement to PhotoShop!

21. MeasureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

22. Pixlr Grabber

Grab visible screen, select part or entire page. Share screen to Pixlr imm.io, edit screen in Pixlr editor or save to desktop. This is one of the few who can capture the entire screen, however since Chrome just supports canvas in png the images created gets quite large and takes a while to process.

23. Domain Availability Checker

Quickly check if domain name is already taken or not.

24. Snippy

Snippy allows you to grab snippets of web pages, save them for future use and upload them to Google Docs.

25. FlashBlock

Flashblock is an extension for the Google Chrome that blocks all Flash content from loading. It then leaves placeholders on the webpage that allow you to click to download and then view the Flash content.

26. BuiltWith Technology Profiler

BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

27. LastPass

LastPass is a free online password manager and Form Filler that makes your browsing more secure.

28. iMacros

Automate your web browser. Record and replay repetitious work. Web developers use iMacros for web regression testing, performance testing and web transaction monitoring. It can also be combined with Google Speed Tracer, Firebug and other web development and test tools. XPath support is included.

29. Chrome Flags

It shows the country where the server is hosting.

30. Frame Two Pages

Put two tabs into one tab’s two frames. Useful to compare two pages.

31. Split Screen

Works very similar to “Frame Two Pages” extension, but the main difference is that you can browse pages not switching tabs.

32. Session Buddy

Session Buddy is a flexible session manager that allows you to quickly save and restore session tabs.

  • View all of the tabs in each window of a current or saved session
  • Assess easily whether a displayed session has changed
  • Save the current session with 2 clicks
  • Restore sessions into a set of windows, a single window, or the current window
  • Access automatically saved crash recovery sessions after a Chrome or OS crash
  • Optionally automatically save the previous session
  • Edit sessions by deleting individual windows/tabs or rolling tabs into a single window
  • Import a list of URLs
  • Export a session to text or CSV format (more formats in development)
  • Control what types of tabs Session Buddy recognizes
  • Show/hide current session tab count in extension icon badge

February 10 2010

17:48

Why Web Developers Should Switch to Google Chrome

Check out Chrome 4’s great new features for developers, such as cross-platform support, awesome web inspector integration, and handy new extensions. It’s becoming more and more difficult to deny Chrome the title as the new browser for web developers. If it’s not quite there yet, it will be soon!

Introduction

With quick load times, a snappy JavaScript engine, solid WebKit foundation, and big-name backing, Google Chrome has been gaining a respectable market share, even surpassing Safari to become the 3rd most popular browser in December. For developers, however, Firefox has been the sweetheart of many due to its ability to run on any operating system and because of its rich offering of web development add-ons, such as Firebug and the Web Developer Toolbar. But it’s important to test JavaScript in all browsers, and having a robust set of tools in each (including Internet Explorer), is precisely what developers need to make the most of their code.

Lucky for us, the Google folks have been working hard to make Chrome cross-platform, integrate WebKit’s fantastic Web Inspector, and add extensions, making Chrome 4 an amazingly useful tool for web development. In this tutorial, I’ll demonstrate some of the features that make Chrome 4 a great addition to the web developer utility belt.

Downloading Chrome 4

As of January 25, Chrome 4 has been officially released as stable for Windows. Mac and Linux users, however, we have to be a bit more brave in order to experience all that Chrome 4 has to offer. Mac users need to download the “dev” version, and Linux users the “beta” version, and it’s highly worth it! Check out the following links to get a copy of Chrome for your operating system that supports everything we’ll discuss in this article:

Web Inspector (aka Developer Tools)

A screenshot of the Profile Panel of the Chrome Developer Tools

Now let’s get into the nitty gritty! In Firefox, Firebug is a godsend for developers, providing a debugging console, HTML & CSS manipulation, JavaScript profiling, and a whole lot of other goodness. The WebKit folks took notice and over the last couple of years have been perfecting a set of tools called the Web Inspector, which offers a similar set of features to Firebug. Within Chrome 4, the Web Inspector is labeled “Developer Tools.”

Accessing the Web Inspector/Developer Tools

A demonstration of how to access the Developer Tools on Google Chrome for Mac

In addition to Chrome 4, the Web Inspector has been in action for a while from within previous versions of Chrome and Safari, although it’s a bit hidden. To access the Web Inspector in various browsers:

Safari 4

  • Select “Edit > Preferences” (Windows) or “Safari > Preferences” (Mac)
  • Select the “Advanced” tab
  • Check “Show Develop Menu in menu bar”
  • A new menu item, “Develop,” will appear
  • Select “Develop > Show Web Inspector”

Chrome 3 (Windows only)

  • Select the Wrench
  • Select Developer
  • Select JavaScript Console (the whole range of tools are hidden under this name)

Chrome 4

  • Windows / Linux: Select the Page Icon > Developer > Developer Tools
  • Mac: Select View > Developer > Developer Tools

JavaScript Console

A screenshot of the Console Panel within the Chrome Developer Tools

If you haven’t worked with the Firebug or Web Inspector console, then you’re missing out on a great way to help debug JavaScript. The JavaScript console serves several important functions, such as capturing errors and presenting them in a useful format, testing short bits of JavaScript, and as a convenient place to log useful information like variable values and execution times. Practically speaking, I use this tool regularly to evaluate the performance of my programs and to ensure that certain variables are being calculated correctly.

Elements Panel

A screenshot of the ELements Panel within the Chrome Developer Tools

In addition to the JavaScript console, it’s always nice to have a tool that allows you to quickly view the HTML and style information of particular elements on the page. The Web Inspector Elements panel gives a tree-structure view of the Document Object Model (DOM), allowing you to drill down into the document to select an item of interest. You can also access the information of a certain object by right clicking on an item within the browser and selecting “Inspect Element.”

Finally, I should note that the Elements panel allows for much more than simple inspection. You can modify and add styles, edit html, and in the latest versions, view event listeners attached to a selected DOM element. These features can all come in very handy when you’re dealing with little quirks that you can’t quite figure out.

Resources

A screenshot of the Resources Panel within the Chrome Developer Tools

The last feature I’d like to highlight within the Web Inspector/Developer Tools is the “Resources” tab. If you’ve worked with Firebug’s “Net” tab, then you’ll notice several similarities. Essentially, the Resources tab gives a breakdown of all the information that is exchanged between your browser and the server, from the images to the JavaScript to the document itself. It also shows a ton of handy information, such as:

  • A graph of the time it takes to download each component
  • A graph showing the size of the various components
  • A way to sort the requests by type, e.g. Documents, Stylesheets, Images, etc.
  • Image previews with dimensions, file size, and MIME type displayed below
  • Request and Response Headers
  • XML HTTP Request (XHR) information

An elegant tool that allows for easy inspection of page speed, the Resources tab can aid you in identifying and squashing performance bottlenecks. Give it a try and see where your page is too fat, then slim down your chunky images and code to provide a better experience for your users!

Further Reading

A complete overview of the Web Inspector/Developer Tools could easily be a tutorial on it’s own, but we have more ground to cover! I highly recommend checking out the following resources to learn more:

Extensions

Now, while I’ve always been blown away by the speed of Safari 4 and Chrome as compared to Firefox, they’ve both lacked a critical feature: add-ons. In Chrome 4, that all changes with the addition of “extensions.” You can add functionality to Chrome by downloading and installing extensions or by using the standard tools of the trade: HTML, CSS, and JavaScript, to write your own. Extensions can be downloaded from the Chrome Extensions Repository, and should be fairly simple to install. Already, a number of very compelling extensions have been created which aid web development, from quick validation to resolution testing. Let’s take a look at a few.
        

Speed Tracer

A screenshot of the Speed Tracer extension

A web developer can never really be obsessed enough with performance, and the more tools that identify sluggish performance the better. That’s just where Speed Tracer, a Chrome extension developed by Google, comes into play. Speed Tracer takes the “Resources” panel to the next level by providing a visualization of the time it takes to execute low-level tasks, such as rendering CSS or parsing HTML and JavaScript. I’d highly recommend taking a look at a video demonstration of Speed Tracer put together by the folks at Google to get a better idea of how it can help you improve the performance of your applications.

Pendule

A screenshot of the Pendule extension

Moving from Firefox to Chrome, one extension everyone is going to look for is a replacement of the fantastic Web Developer Toolbar. For those who don’t know, the Web Developer Toolbar deals with the tasks Firebug wasn’t meant to handle, such as quick validation of HTML and CSS, the ability to quickly disable JavaScript or images, and a tool for checking links. Those functions are all handled with style by Pendule, which offers much of the core functionality of the Web Developer Toolbar (not quite all), while offering a few goodies of it’s own, such as a color picker.

Resolution Test

A screenshot of the Resolution Test extension

Web Developers often need to ensure that their designs work at a variety of resolutions. Resolution Test allows developers to efficiently resize their browser window to a number of common resolutions for quick and easy testing. The latest version even allows you to open multiple windows at different resolutions with only a couple of clicks. Resolution Test is fantastic for making sure your target audience is seeing the page you want them to see.

Webpage ScreenShot

A screenshot of the Webpage ScreenShot extension

There are occasions when its necessary not only to grab a screenshot of the current visible portion of a website, but a screenshot of the whole page. For example, you may want to print a full page for peer critical review or to demonstrate in your portfolio. I formerly used a Desktop tool for this, but now Webpage ScreenShot does a nice job of capturing full-page screenshots in a few clicks.

Chrome Sniffer

A screenshot of the Chrome Sniffer extension

Do you ever stumble upon a fantastic page and wonder, “what are they using to build this?” I do, and often find myself digging through the source code trying to figure out who the man behind the curtain is. While it is a useful training exercise, and a necessary one if you really want to know what’s going on, Chrome Sniffer can usually give you a snapshot of which JavaScript and PHP frameworks are in use for a particular page. For example, navigate to NetTuts and Chrome Sniffer informs us that it’s run on Wordpress using Google Analytics and jQuery.

Conclusion

The future of web development continues to look brighter and brighter! While only a few years ago we had a limited set of tools for debugging JavaScript, tinkering with CSS, and viewing HTML, today we have a variety of powerful options. Now that Google Chrome has become cross platform, fully integrated the WebKit Web Inspector, and added extensions, it is a versatile tool for helping developers improve their own pages. I encourage all of you to download a copy for yourself and give it a shot to see if it can help you improve your pages, then come on back here and share your favorite plugins and tools with the rest of us!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...