You may have heard the term “HTML5″ mentioned once or twice and had no idea what people were talking about. However, you should know what this term means as it will be becoming more and more important in the coming years. Steve Jobs even recently said that HTML5 would replace Flash in the future!

So what is HTML5?

HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.

Main difference between HTML4 and HTML5:

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

List of NEW Tags in HTML5:

1. section
2. header
3. footer
4. nav
5. article
6. aside
7. figure
8. mark
9. time
10. meter
11. progress
12. video
13. audio
14. details
15. menu
16. command
17. canvas
18. datalist
19. embed
20. figcaption
21. hgroup
22. keygen
23. output
24. ruby
25. source
26. summary

Conclusion:

HTML5 has more incredible features to enhance website performance. The reason for HTML’s comeback was people behind Apple, Mozilla and Opera who were actually worried about the non-focus of HTML among web designers. During the later months of 2009, W3C announced the future development of HTML and XHTML as HTML5. Then, it became obvious  that HTML is going to take center stage again and play a vital role in the future of web development. Lets hope to see more on IE9, Facebook, Twitter

10 Essential HTML 5 Resources:

1. Wikipedia: HTML 5 – A basic overview from Wikipedia
2. HTML 5 Cheat Sheet – A great quick guide to HTML 5 as a printable PDF
3. HTML 5 Demos – A great set of demos. Just view the source to see how they work.
4. Video elements – A useful article from HTML 5 Doctor on the Video element
5. HTML 5 canvas – A great in-depth tutorial on how the HTML 5 Canvas element works
6. A Selection of Supported Features in HTML5 – A great list from Molly about which HTML 5 features are supported by which
7. HTML 5 – Draft Standard – The whole spec, in all it’s scary technical detail
8. HTML 5 Drag and Drop + Microformats = a whole world of possibilities – An example of how to use Drag-n-Drop in HTML 5
9. HTML 5 Doctor – A great general resource on HTML 5
10. HTML 5 Forms Demo – A powerful demo of how forms work in HTML 5

Do you like this article? Subscribe to RSS feed and Follow me on Twitter.

There’s good reason why WordPress is the most popular blogging platform. It’s easy to use and has tons of great features. But what’s really made this open source software excel is its passionate community. Yes, WordPress has lots of features built in, but it doesn’t have everything. The WordPress community fills this need. It’s full of talented developers that are constantly creating plugins to extend the features and make it even better.

There are many WordPress plugins out there, but in this article we’re focusing on the most essential. Below is a list of 10 plugins that every WordPress website could use.

[Note: Click to Enlarge Images]

1) All in one SEO Pack
Link: http://wordpress.org/extend/plugins/all-in-one-seo-pack/

Features:

• Advanced Canonical URLs
• Fine tune Page Navigational Links
• Built-in API so other plugins/themes can access and extend functionality
• ONLY plugin to provide SEO Integration for WP e-Commerce sites
• Nonce Security
• Support for CMS-style WordPress installations
• Automatically optimizes your titles for search engines
• Generates META tags automatically
• Avoids the typical duplicate content found on WordPress blogs
• For beginners, you don’t even have to look at the options, it works out-of-the-box. Just install.
• For advanced users, you can fine-tune everything
• You can override any title and set any META description and any META keywords you want.
• Backward-Compatibility with many other plugins, like Auto Meta, Ultimate Tag Warrior and others.

2) All in one Webmaster
Link: http://wordpress.org/extend/plugins/all-in-one-webmaster/

Features:

3) WP Super-Cache

Link: http://wordpress.org/extend/plugins/wp-super-cache/

This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

The static html files will be served to the vast majority of your users, but because a user’s details are displayed in the comment form after they leave a comment those requests are handled by PHP. Static files are served to:

• Users who are not logged in.
• Users who have not left a comment on your blog.
• Or users who have not viewed a password protected post.

4) Google XML Sitemap
Link: http://wordpress.org/extend/plugins/google-sitemap-generator/

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. The plugin supports all kinds of WordPress generated pages as well as custom URLs. Additionally it notifies all major search engines every time you create a post about the new content.

5) WP Google-Buzz
Link: http://wordpress.org/extend/plugins/wp-google-buzz/

Google Buzz with official Google Buzz Counter. Beautiful Google buzz integration to wordpress + 8 different admin panel options (Settings -> WP Google-buzz) + 14 diff button images + Shows Counter + mouse over effects.

Features

• Shows Google-buzz button before/after post content
• Google Buzz Counter (Using official Google Buzz APIs).
• Manual insertion of code: Use this: <?php if(function_exists(‘add_wp_google_buzz’)) { add_wp_google_buzz(); } ?>.
• 14 different beautiful Google Buzz button images. All images are transparent.
• rel=”nofollow” option for buzz links
• Show/Hide option to show Google Buzz button on page.
• float = left/right option
• Popup window option

6) Akismet
Link: http://wordpress.org/extend/plugins/akismet/

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.  

Want to show off how much spam Akismet has caught for you? Just put <?php akismet_counter(); ?> in your template.

7) WP Page-navi

Link: http://wordpress.org/extend/plugins/wp-pagenavi/

Adds a more advanced paging navigation to your WordPress site.

Example: Pages (17): [1] 2 3 4 » … Last »

8 ) Broken Link Checker
Link: http://wordpress.org/extend/plugins/broken-link-checker/

This plugin will monitor your blog looking for broken links and let you know if any are found.

Features:

• Monitors links in your posts, pages, comments, the blogroll, and custom fields (optional).
• Detects links that don’t work and missing images.
• Notifies you on the Dashboard if any are found.
• Also detects redirected links.
• Makes broken links display differently in posts (optional).
• Link checking intervals can be configured.
• New/modified posts are checked ASAP.
• You view broken links, redirects, and a complete list of links used on your site, in the Tools -> Broken Links tab.
• Searching and filtering links by URL, anchor text and so on is also possible.
• Each link can be edited or unlinked directly via the plugin’s page, without manually editing each post.

9) Contact Form 7
Link: http://wordpress.org/extend/plugins/contact-form-7/

Just another contact form plugin. Simple but flexible.

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

10) Twitter Goodies
Link: http://wordpress.org/extend/plugins/twitter-goodies/

Twitter style Twitter Goodies Profile Widget + Twitter Goodies Search Widget + Twitter Integration (wp to twitter) plugin. All in One plugin for Twitter Goodies.

Features:

• NEW: Twitter Goodies Search Widget option available (v1.1.9)
• Major Release feature: Twitter Integration (Automatically tweet your post/page immediately to Twitter when you publish/edit it)
• Load all Tweets and Scrollbar option
• Add Twitter Goodies to any Pages, Posts and Widget area.
• Admin Panel options to set widget title, widget width, widget height, twitter username, 5 different set of color combination
• Auto-Refresh Tweets (Continuous flow of Tweets)

I hope you like your post. Please provide your favorite plugins here in comment section to get best out of here.

Thanks,
Arpit Shah

jQuery is ideal because it can create impressive animations and interactions while being simple to understand and easy to use. WordPress awesomeness lies in its fact that it can be customized to power any type of site you like! But what happens when you combine the power of jQuery with WordPress, the possibilities are infinite.

This article will share some best practices, examples & Plugins for using the most popular Javascript framework to create unobtrusive, accessible DOM scripting effects for your WordPress site.

1) Snazzy Archives
Link: http://www.prelovac.com/vladimir/wordpress-plugins/snazzy-archives

Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. Your archive page will never be boring again!

Snazzy archives simply lets you express yourself and your blog. You can select different layouts and special effects, Snazzy archives will make sure your content stands out.

Main features:

• Unique visual presentation of blog posts
• Will work out of the box with all features
• Posts are scanned for images and youtube videos and shown together with number of comments
• Different editable layouts (HTML and CSS)
• Special effects using jQuery
• Caching available for faster access

2) WP Wall
Link: http://www.prelovac.com/vladimir/wordpress-plugins/wp-wall

WP Wall is a “Wall” widget that appears in your blog’s side bar. Readers can add a quick comment about the blog as a whole, and the comment will appear in the sidebar immediately (without reloading the page).

All comments are internally handled by WordPress so that means you have normal comment moderation, SPAM protection and new comment notification.

WP Wall is fully customizable with a CSS file and included graphics.

Features:

• Global commenting “Wall”
• Comments are handled entirely by WordPress
• RSS Feed for the Wall
• Smilies
• Instant delete for admin
• Navigation through pages
• Interactive Wall: It can automatically refresh turning into a chat

3) Events Calendar
Link: http://www.wp-eventscalendar.com/

Events-Calendar is a versatile replacement for the original calendar included with WordPress adding many useful functions to keep track of your events. The plugin has an easy to use admin section that displays a big readable calendar and lets you add and delete events.

The plugin is widget ready so you can easily add a small calendar to the main sidebar with the ability to roll over the highlighted event day to see a brief description of the event or click the day to get a full description of the event without ever leaving your current page.

4) WP-Slimbox2 Plugin
Link: http://transientmonkey.com/wp-slimbox2

A WordPress implementation of the stellar Slimbox2 script by Christophe Beyls (an enhanced clone of the Lightbox script) which utilizes the jQuery library to create an impressive image overlay with slide-out effects.

Almost, if not all, options are configurable from the administration panel. For more on the settings and what they do check out the Slimbox2 page.

5) jQuery Colorbox
Link: http://www.techotronic.de/plugins/jquery-colorbox/

jQuery Colorbox features 10 themes from which you can choose. See screenshots tab or my website. Works out-of-the-box with WordPress Galleries and NextGEN Gallery! (choose no effect in NextGEN settings)

When adding an image to a post or page, usually a thumbnail is inserted and linked to the image in original size. All images in posts and pages can be displayed in a layer when the thumbnail is clicked. Images are grouped as galleries when linked in the same post or page. Groups can be displayed in an automatic slideshow.

Individual images can be excluded by adding a special CSS class.

6) GD Star Rating plugin
Link: http://www.gdstarrating.com/

GD Star Rating plugin allows you to set up rating and review system for posts, pages and comments in your blog. You can set many options for displaying the rating stars, and add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin. Plugin includes advanced settings panels that will allow you to control many aspects of rating. Plugin also supports multi ratings along with thumbs based ratings. Plugin supports use of cache plugins and dynamic loading of data using ajax.

7) jQuery Lightbox
Link: http://www.pedrolamas.com/projectos/jquery-lightbox/

As the name shows, this is just WordPress’s version of the jQuery Lightbox Plugin written by balupton, perfectly working with WordPress 2.2 or up, and fully compatible with K2!

8 ) jQuery Comment Preview
Link: http://articlesss.com/jquery-comment-preview-wordpress-plugin/

Features

• Live comment preview, which does not take that extra space on a page.
• The simple HTML-editor (instruction on using the editor are on the plugin options page).
• You can customize the comment preview block as you wish. You can display: comment author name, avatar (static or dinamic using gravatar.com), comment date and time, comment text. All this can be designed with CSS.
• You may don’t connect the plugin’s CSS file (optional), if you wish to reduce a number of queries to your server.
• The plugin’s JS and CSS files are connected only on a pages with a comment form.

I hope you enjoy this post. Please subscribe to RSS feed for new featured articles and follow me on Twitter.

Some images and info has taken from here.

The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. Since the content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.

The basic Like button is available via a simple iframe you can drop into your page easily. A fuller-featured Like button is available via the <fb:like> XFBML tag and requires you use the new JavaScript SDK. The XFBML version allows users to add a comment to their like as it is posted back to Facebook. The XFBML version also dynamically sizes its height; for example, if there are no profile pictures to display, the plugin will only be tall enough for the button itself.

If your web pages represent profiles of real-world things — things like movies, sports teams, celebrities, and restaurants, you can optionally use the Open Graph protocol to enable users to establish lasting connections to your pages. Your pages show up in more places on Facebook and you gain the ability to publish stream stories to connected users.

The Facebook documentation doesn’t really go into any detail about what the generated code means, so I took the default sample and hacked on it to figure out what each parameter affected and how to best customize it to our own particular needs.

If you look at the default code that the generator outputs, it looks like this:

iFrame code:

<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Farpitshah.com&amp;layout=standard&amp; show_faces=true&amp;width=450&amp;action=like&amp; font=arial&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:450px; height:px”></iframe>

XFBML code:

<fb:like href=”http://arpitshah.com” layout=”standard” show_faces=”true” width=”450″ action=”like” font=”arial” colorscheme=”light”></fb:like>

So, in essence, the entire widget lives inside an iframe, whose content is generated entirely by Facebook’s servers. If you parse through and de-percent-encode the actual URL, you’ll find it makes an HTTP GET request to http://www.facebook.com/plugins/like.php with the following parameters:

href = http://developers.facebook.com/
layout = standard
show-faces = true
width = 450
action = like
font = arial
colorscheme = light

Look familiar? Those are all the same options that you can set with Facebook’s generator, albeit expressed much more densely. layout can be standard or button_count, show-facesis a boolean that corresponds to the “show faces” checkbox, etc.

Get your Like Button here: http://developers.facebook.com/docs/reference/plugins/like

Thanks,
Arpit Shah