Archive for March, 2011

JQuery-HTML Interaction

Posted: March 17, 2011 in Uncategorized

Including the jQuery Library Code in an HTML Page
Problem
You want to use the jQuery JavaScript library on a web page.
Solution
There are currently two ideal solutions for embedding the jQuery library in a web page:
• Use the Google-hosted content delivery network (CDN) to include a version of
jQuery (used in this chapter).
• Download your own version of jQuery from jQuery.com and host it on your own
server or local filesystem.
Discussion
Including the jQuery JavaScript library isn’t any different from including any other
external JavaScript file. You simply use the HTML <script> element and provide the
element a value (URL or directory path) for its src=”” attribute, and the external file
you are linking to will be included in the web page. For example, the following is a
template that includes the jQuery library that you can use to start any jQuery project:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script type=”text/JavaScript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script&gt;
</head>
<body>
<script type=”text/JavaScript”>
alert(‘jQuery ‘ + jQuery.fn.jquery);
</script>
</body>
</html>
Notice that I am using—and highly recommend using for public web pages—the
Google-hosted minified version of jQuery. However, debugging JavaScript errors in
minified code is not ideal. During code development, or on the production site, it actually
might be better to use the nonminified version from Google for the purpose of
debugging potential JavaScript errors. For more information about using the Googlehosted
version of jQuery, you can visit the Ajax libraries API site on the Web at http://
code.google.com/apis/ajaxlibs/.
It’s of course also possible, and mostly likely old hat, to host a copy of the jQuery code
yourself. In most circumstances, however, this would be silly to do because Google has
been kind enough to host it for you. By using a Google-hosted version of jQuery, you
benefit from a stable, reliable, high-speed, and globally available copy of jQuery. As
well, you reap the benefit of decreased latency, increased parallelism, and better caching.
This of course could be accomplished without using Google’s solution, but it would
most likely cost you a dime or two.
Now, for whatever reason, you might not want to use the Google-hosted version of
jQuery. You might want a customized version of jQuery, or your usage might not
require/have access to an Internet connection. Or, you simply might believe that Google
is “The Man” and wish not to submit to usage because you are a control freak and
conspiracy fanatic. So, for those who do not need, or simply who do not want, to use
a Google-hosted copy of the jQuery code, jQuery can be downloaded from
jQuery.com and hosted locally on your own server or local filesystem. Based on the
template I’ve provided in this recipe, you would simply replace the src attribute value
with a URL or directory path to the location of the jQuery JavaScript file you’ve downloaded.

Executing jQuery/JavaScript Coded After the DOM Has
Loaded but Before Complete Page Load
Problem
Modern JavaScript applications using unobtrusive JavaScript methodologies typically
execute JavaScript code only after the DOM has been completely loaded. And the reality
of the situation is that any DOM traversing and manipulation will require that the DOM
is loaded before it can be operated on. What’s needed is a way to determine when the
client, most often a web browser, has completely loaded the DOM but has possibly not
yet completely loaded all assets such as images and SWF files. If we were to use the
window.onload event in this situation, the entire document including all assets would
need to be completely loaded before the onload event fired. That’s just too timeconsuming
for most web surfers. What’s needed is an event that will tell us when the
DOM alone is ready to be traversed and manipulated.
Solution
jQuery provides the ready() method, which is a custom event handler that is typically
bound to the DOM’s document object. The ready() method is passed a single parameter,
a function, that contains the JavaScript code that should be executed once the
DOM is ready to be traversed and manipulated. The following is a simple example of
this event opening an alert() window once the DOM is ready but before the page is
completely loaded:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script type=”text/JavaScript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script&gt;
<script type=”text/JavaScript”>
jQuery(document).ready(function(){//DOM not loaded, must use ready event
alert(jQuery(‘p’).text());
});
</script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>
Discussion
The ready() event handler method is jQuery’s replacement for using the JavaScript core
window.onload event. It can be used as many times as you like. When using this custom
event, it’s advisable that it be included in your web pages after the inclusion of stylesheet
declarations and includes. Doing this will ensure that all element properties are correctly
defined before any jQuery code or JavaScript code will be executed by the
ready() event.
Additionally, the jQuery function itself provides a shortcut for using the jQuery custom
ready event. Using this shortcut, the following alert() example can be rewritten like so:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script type=”text/JavaScript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script&gt;
<script type=”text/JavaScript”>
jQuery(function(){ //DOM not loaded, must use ready event
alert(jQuery(‘p’).text());
});
</script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>
The use of this custom jQuery event is necessary only if JavaScript has to be embedded
in the document flow at the top of the page and encapsulated in the <head> element. I
simply avoid the usage of the ready() event by placing all JavaScript includes and inline
code before the closing <body> element. I do this for two reasons.
First, modern optimization techniques have declared that pages load faster when the
JavaScript is loaded by the browser at the end of a page parse. In other words, if you
put JavaScript code at the bottom of a web page, then the browser will load everything
in front of it before it loads the JavaScript. This is a good thing because most browsers
will typically stop processing other loading initiatives until the JavaScript engine has
compiled the JavaScript contained in a web page. It’s sort of a bottleneck in a sense
that you have JavaScript at the top of a web page document. I realize that for some
situations it’s easier to place JavaScript in the <head> element. But honestly, I’ve never
seen a situation where this is absolutely required. Any obstacle that I’ve encountered
during my development by placing JavaScript at the bottom of the page has been easily
overcome and well worth the optimization gains.
Second, if speedy web pages are our goal, why wrap more functionality around a situation
that can be elevated by simply moving the code to the bottom of the page? When
given the choice between more code or less code, I choose less code. Not using the
ready() event results in using less code, especially since less code always runs faster
than more code.
With some rationale out of the way, here is an example of our alert() code that does
not use the ready() event:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
<body>
<p>The DOM is ready!</p>
<script type=”text/JavaScript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script&gt;
<script type=”text/JavaScript”>
alert(jQuery(‘p’).text());//go for it the DOM is loaded
</script>
</body>
</html>
Notice that I have placed all of my JavaScript before the closing </body> element. Any
additional markup should be placed above the JavaScript in the HTML document.

Advertisements

JQuery-Handling an Element

Posted: March 17, 2011 in Uncategorized

Find some elements and do something with them
Or more specifically stated, locate a set of elements in the DOM, and then do something
with that set of elements. For example, let’s examine a scenario where you want to hide
a <div> from the user, load some new text content into the hidden <div>, change an
attribute of the selected <div>, and then finally make the hidden <div> visible again.
This last sentence translated into jQuery code would look something like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html>
<head>
<script type=”text/JavaScript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script&gt;
</head>
<body>
<div>old content</div>
<script>
//hide all divs on the page
jQuery(‘div’).hide();
//update the text contained inside of all divs
jQuery(‘div’).text(‘new content’);
//add a class attribute with a value of updatedContent to all divs
jQuery(‘div’).addClass(“updatedContent”);
//show all divs on the page
jQuery(‘div’).show();
</script>
</body>
</html>
Let’s step through these four jQuery statements:
• Hide the <div> element on the page so it’s hidden from the user’s view.
• Replace the text inside the hidden <div> with some new text (new content).
• Update the <div> element with a new attribute (class) and value (updatedContent).
• Show the <div> element on the page so it’s visible again to the viewing user.
If the jQuery code at this point is mystical syntax to you, that’s OK. We’ll dive into the
basics with the first recipe in this chapter. Again, what you need to take away from this
code example is the jQuery concept of “find some elements and do something with them.” In our code example, we found all the <div> elements in the HTML page using
the jQuery function (jQuery()), and then using jQuery methods we did something with
them (e.g., hide(), text(), addClass(), show()).

Chaining
jQuery is constructed in a manner that will allow jQuery methods to be chained. For
example, why not find an element once and then chain operations onto that element?
Our former code example demonstrating the “Find some elements and do something
with them” concept could be rewritten to a single JavaScript statement using chaining.
This code, using chaining, can be changed from this:
//hide all divs on the page
jQuery(‘div’).hide();
//update the text contained inside of the div
jQuery(‘div’).text(‘new content’);
//add a class attribute with a value of updatedContent to all divs
jQuery(‘div’).addClass(“updatedContent”);
//show all divs on the page
jQuery(‘div’).show();
to this:
jQuery(‘div’).hide().text(‘new content’).addClass(“updatedContent”).show();
or, with indenting and line breaks, to this:
jQuery(‘div’)
.hide()
.text(‘new content’)
.addClass(“updatedContent”)
.show();
Plainly speaking, chaining simply allows you to apply an endless chain of jQuery methods
on the elements that are currently selected (currently wrapped with jQuery functionality)
using the jQuery function. Behind the scenes, the elements previously selected
before a jQuery method was applied are always returned so that the chain can continue.
As you will see in future recipes, plugins are also constructed in this manner (returning
wrapped elements) so that using a plugin does not break the chain.
If it’s not immediately obvious, and based on the code in question, chaining also cuts
down on processing overhead by selecting a set of DOM elements only once, to then
be operated on numerous times by jQuery methods by way of chaining. Avoiding unnecessary
DOM traversing is a critical part of page performance enhancements. Whenever
possible, reuse or cache a set of selected DOM elements.

The jQuery wrapper set
A good majority of the time, if jQuery is involved, you’re going to be getting what is
known as a wrapper. In other words, you’ll be selecting DOM elements from an HTML
page that will be wrapped with jQuery functionality. Personally, I often refer to this as
a “wrapper set” or “wrapped set” because it’s a set of elements wrapped with jQuery
functionality. Sometimes this wrapper set will contain one DOM element; other times
it will contain several. There are even cases where the wrapper set will contain no
elements. In these situations, the methods/properties that jQuery provides will fail
silently if methods are called on an empty wrapper set, which can be handy in avoiding
unneeded if statements.
Now, based on the code we used to demonstrate the “Find some elements and do
something with them” concept, what do you think would happen if we added multiple
<div> elements to the web page? In the following updated code example, I have added
three additional <div> elements to the HTML page, for a total of four <div> elements:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html>
<head>
<script type=”text/JavaScript” src=”http://ajax.googleapis.com/ajax/libs/
jquery/1.3.0/jquery.min.js”></script> </head>
<body>
<div>old content</div>
<div>old content</div>
<div>old content</div>
<div>old content</div>
<script>
//hide all divs on the page
jQuery(‘div’).hide().text(‘new content’).addClass(“updatedContent”).show();
</script>
</body>
</html>

You may not have explicitly written any programmatic loops here, but guess what?
jQuery is going to scan the page and place all <div> elements in the wrapper set so that
the jQuery methods I am using here are performed (aka implicit iteration) on each
DOM element in the set. For example, the .hide() method actually applies to each
element in the set. So if you look at our code again, you will see that each method that
we use will be applied to each <div> element on the page. It’s as if you had written a
loop here to invoke each jQuery method on each DOM element. The updated code
example will result in each <div> in the page being hidden, filled with updated text,
given a new class value, and then made visible again.
Wrapping your head around (pun intended) the wrapper set and its default looping
system (aka implicit iteration) is critical for building advanced concepts around looping.
Just keep in mind that a simple loop is occurring here before you actually do any
additional looping (e.g., jQuery(‘div’).each(function(){}). Or another way to look at this is each element in the wrapper will typically be changed by the jQuery method(s)
that are called.
Something to keep in mind here is there are scenarios that you will learn about in the
coming chapters where only the first element, and not all the elements in the wrapper
set, is affected by the jQuery method (e.g., attr()).

How the jQuery API Is Organized
There is no question that when I first started out with jQuery, my main reason for
selecting it as my JavaScript library was simply that it had been properly documented
(and the gazillion plugins!). Later, I realized another factor that cemented my love affair
with jQuery was the fact that the API was organized into logical categories. Just by
looking at how the API was organized, I could narrow down the functionality I needed.
Before you really get started with jQuery, I suggest visiting the documentation online
and simply digesting how the API is organized. By understanding how the API is organized,
you’ll more quickly navigate the documentation to the exact information you
need, which is actually a significant advantage given that there are really a lot of different
ways to code a jQuery solution. It’s so robust that it’s easy to get hung up on implementation
because of the number of solutions for a single problem. I’ve replicated here
for you how the API is organized. I suggest memorizing the API outline, or at the very
least the top-level categories.
• jQuery Core
— The jQuery Function
— jQuery Object Accessors
— Data
— Plugins
— Interoperability
• Selectors
— Basics
— Hierarchy
— Basic Filters
— Content Filters
— Visibility Filters
— Attribute Filters
— Child Filters
— Forms
— Form Filters
• Attributes
— Attr
— Class
— HTML
— Text
— Value
• Traversing
— Filtering
— Finding
— Chaining
• Manipulation
— Changing Contents
— Inserting Inside
— Inserting Outside
— Inserting Around
— Replacing
— Removing
— Copying
• CSS
— CSS
— Positioning
— Height and Widths
• Events
— Page Load
— Event Handling
— Live Events
— Interaction Helpers
— Event Helpers
• Effects
— Basics
— Sliding
— Fading
— Custom
— Settings
• Ajax
— AJAX Requests
— AJAX Events
— Misc.
• Utilities
— Browser and Feature Detection
— Array and Object Operations
— Test Operations
— String Operations
— Urls

JQuery- Philosophy

Posted: March 17, 2011 in Uncategorized

The jQuery Philosophy
The jQuery philosophy is “Write less, do more.” This philosophy can be further broken
down into three concepts:
• Finding some elements (via CSS selectors) and doing something with them (via
jQuery methods)
• Chaining multiple jQuery methods on a set of elements

• Using the jQuery wrapper and implicit iteration

Why JQUERY ?

Posted: March 17, 2011 in Uncategorized

Why jQuery?
It might seem a bit silly to speak about the merits of jQuery within this cookbook,
especially since you’re reading this cookbook and are likely already aware of the merits.
So, while I might be preaching to the choir here, we’re going to take a quick look at
why a developer might choose to use jQuery. My point in doing this is to foster your
basic knowledge of jQuery by first explaining the “why” before we look at the “how.”
In building a case for jQuery, I’m not going to compare jQuery to its competitors in
order to elevate jQuery’s significance. That’s because I just don’t believe that there
really is a direct competitor. Also, I believe the only library available today that meets
the needs of both designer types and programmer types is jQuery. In this context,
jQuery is in a class of its own.
Of the notorious JavaScript libraries and frameworks in the wild, I truly believe each
has its own niche and value. A broad comparison is silly, but it’s nevertheless attempted
• Its community support is actually fairly useful, including several mailing lists, IRC
channels, and a freakishly insane amount of tutorials, articles, and blog posts from
the jQuery community.
• It’s openly developed, which means anyone can contribute bug fixes, enhancements,
and development help.
• Its development is steady and consistent, which is to say the development team is
not afraid of releasing updates.
• Its adoption by large organizations has and will continue to breed longevity and
stability (e.g., Microsoft, Dell, Bank of America, Digg, CBS, Netflix).
• It’s incorporating specifications from the W3C before the browsers do. As an example,
jQuery supports a good majority of the CSS3 selectors.
• It’s currently tested and optimized for development on modern browsers
(Chrome 1, Chrome Nightly, IE 6, IE 7, IE 8, Opera 9.6, Safari 3.2, WebKit Nightly,
Firefox 2, Firefox 3, Firefox Nightly).
• It’s downright powerful in the hands of designer types as well as programmers.
jQuery does not discriminate.
• Its elegance, methodologies, and philosophy of changing the way JavaScript is
written is becoming a standard in and of itself. Consider just how many other
solutions have borrowed the selector and chaining patterns.
• Its unexplainable by-product of feel-good programming is contagious and certainly
unavoidable; even the critics seem to fall in love with aspects of jQuery.
• Its documentation has many outlets (e.g., API browser, dashboard apps, cheat
sheets) including an offline API browser (AIR application).
• It’s purposely bent to facilitate unobtrusive JavaScript practices.
• It has remained a JavaScript library (as opposed to a framework) at heart while at
the same time providing a sister project for user interface widgets and application
development (jQuery UI).
• Its learning curve is approachable because it builds upon concepts that most developers
and designers already understand (e.g., CSS and HTML).
It is my opinion that the combination of the aforementioned jQuery points, and not
any single attribute on its own, sets it apart from all other solutions. The total jQuery
package is simply unmatched as a JavaScript tool.all the time. Heck, I am even guilty of it myself. However, after much thought on the
topic, I truly believe that all JavaScript libraries are good at something. They all have
value. What makes one more valuable than the other depends more upon who is using
it and how it’s being used than what it actually does. Besides, it has been my observation
that micro differences across JavaScript libraries are often trivial in consideration of the
broader goals of JavaScript development. So, without further philosophical ramblings,
here is a list of attributes that builds a case for why you should use jQuery:
• It’s open source, and the project is licensed under an MIT and a GNU General
Public License (GPL) license. It’s free, yo, in multiple ways!
• It’s small (18 KB minified) and gzipped (114 KB, uncompressed).
• It’s incredibly popular, which is to say it has a large community of users and a
healthy amount of contributors who participate as developers and evangelists.
• It normalizes the differences between web browsers so that you don’t have to.
• It’s intentionally a lightweight footprint with a simple yet clever plugin
architecture.
• Its repository of plugins is vast and has seen steady growth since jQuery’s release.
• Its API is fully documented, including inline code examples, which in the world
of JavaScript libraries is a luxury. Heck, any documentation at all was a luxury for
years.
• It’s friendly, which is to say it provides helpful ways to avoid conflicts with other
JavaScript libraries.

Firing an event in java script when ENTER key is pressed….

Posted: March 9, 2011 in Uncategorized

<input name=”tag” type=”text” id=”tag” size=”50″ onkeydown=”checkEnter(event)” onkeypress=”(event)” />

Now, write this function in java script;

function checkEnter(event)
{
var Key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if(Key==13){
ev_load_div();
}
}

Creating the menu item

Posted: March 4, 2011 in Uncategorized

Creating the menu item

To create the menu item to which you’ll link the new articles, follow these
steps:
1. Click the Menu Manager icon in the control panel or choose
Menus➪Menu Manager in any back-end page to open Menu Manager.
2. In the row of the menu to which you want to add the new item, click
the icon in the Menu Item(s) column.
For this exercise, select Main Menu.
The Menu Item Manager page opens, displaying a node tree.
3. Click Internal Links➪Articles➪Category➪Category List Layout to open
the Category List Layout page.
4. Enter the title of the new menu item in the Title text box.
For this exercise, type Ice Cream Cones.
5. Enter an alias for the menu item in the Alias text box.
For this exercise, type ice-cream-cones.
6. From the Display In drop-down menu, choose the parent menu for the
new menu item.
For this exercise, choose Main Menu.
7. In the Parent Item list, select the parent menu’s level.
For this exercise, because you’re using the Main menu, select Top.
8. In the Published section, select the Yes radio button.
9. In the Access Level list, select Public.
10. In the On Click, Open In list, select Parent Window with Browser
Navigation.

11. In the Parameters – Basic pane, choose the category from the Category
drop-down menu.
For this exercise, choose Ice Cream/Cones. At this point, your settings
may resemble Figure 5-7.
12. Click the Save button.
You return to Menu Manager, which displays the new menu item.

Changing the order of menu items
You can see the new menu item in Menu Manager, but it’s been added to
the bottom of the list of menu items — and, therefore, will appear last in its
parent menu. You can change that arrangement by entering new ordinal
numbers in the menu items’ Order columns and then clicking the floppy-disk
icon at the top of the column.
For this exercise, type 4 in the Ice Cream Cones menu item’s Order column,
and click the floppy-disk icon at the top of the column to save the new order.
Now you’ve got the menu items in the order you want

Making the Most of WordPress Plugins

Posted: March 4, 2011 in Uncategorized

Making the Most of
WordPress Plugins

Half the fun of running a WordPress-powered blog is playing with the
hundreds of plugins that you can install to extend your blog’s functions
and options. WordPress plugins are like those really cool custom rims
you put on your car: Although they don’t come with the car, they’re awesome
accessories that make your car better than all the rest.
In this chapter, you find out what plugins are, how to find and install them,
and how they enhance your blog in a way that makes your blog unique. Using
plugins can also greatly improve your readers’ experiences by providing
them various tools they can use to interact and participate — just the way
you want them to!
This chapter assumes that you already have WordPress installed on your
Web server. Installing plugins pertains only to the WordPress.org software.
If you’re skipping around in the book and haven’t yet installed WordPress on
your Web server, you can find instructions in Chapter 6.
WordPress.com users can’t install or configure plugins on their hosted blogs. I
don’t make the rules, so please don’t kill the messenger.

Finding Out What Plugins Are
A plugin is a small program that, when added to WordPress, interacts with
the software to provide some extensibility to the software. Plugins aren’t part
of the core software; they aren’t software programs either. They typically
don’t function as stand-alone software. They do require the host program
(WordPress, in this case) to function.
Plugin developers are the people who write these gems and share them with
the rest of us — usually, for free. Like WordPress, plugins are free to anyone
who wants to further tailor and customize his site to his own needs.
Although plugins are written and developed by people who have the set of
skills required to do so, I would say that the WordPress user community is
also largely responsible for the ongoing development of plugins. Ultimately,
the end users are the ones who put those plugins to the true test of the real
world in their own blogs. Those same users are also the first to speak up
and let the developers know when something isn’t working right, helping the
developers troubleshoot and fine-tune their plugins. The most popular plugins
are created by developers who encourage open communication with the
user base. Overall, WordPress is one of those great open source projects in
which the relationship between developers and users fosters a creative environment
that keeps the project fresh and exciting every step of the way.
Literally thousands of plugins are available for WordPress — certainly way
too many for me to list in this chapter alone. I could, but then you’d need
heavy machinery to lift this book off the shelf! So here are just a few examples
of things that plugins let you add to your WordPress blog:
✓ E-mail notification: Your biggest fans can sign up to have an e-mail notification
sent to them every time you update your blog.
✓ Submit your blog to social networking services: Allow your readers to
submit your blog posts to some of the most popular social networking
services, such as Digg, Technorati, and Del.icio.us.
✓ Stats program: Keep track of where your traffic is coming from; which
posts on your blog are the most popular; and how much traffic is
coming through your blog on a daily, monthly, and yearly basis.

Exploring Manage Plugin page
Before you start installing plugins for your blog, it’s important for you to
explore the Manage Plugins page in your WordPress Administration panel
and understand how to manage the plugins after you install them. Click the
Installed link in the Plugins menu to get to the Manage Plugins page


The Manage
Plugins
page in the
WordPress
Administration
panel.
The Manage Plugins page is where you manage all the plugins you install in
your WordPress blog. This page is laid out in two sections:
✓ Currently Active Plugins: These plugins, listed at the top of the Plugin
Management page, are currently being used on your site. Figure 10-1
shows that I have one active plugin, Akismet.
✓ Inactive Plugins: These plugins are not in active use on your blog. These
plugins exist in the plugins directory on your Web server, but because
you have not activated them, they are listed as available rather than
active.

Inserting Audio Files into Your Blog Posts

Posted: March 4, 2011 in Uncategorized

Inserting Audio Files into Your Blog Posts

Audio files can be music files or a recording of you speaking to your readers;
it adds a nice personal touch to your blog, and you can easily share audio
files on your blog through the use of the Upload Audio feature in WordPress.
After you’ve inserted an audio file in your blog posts, your readers can listen
to it on their computers or download it onto an MP3 player and listen to it on
their drives to work, if they want to.
Click the Add Audio icon on the Edit Post or Add New Post page, and follow
these steps to upload an audio file to your blog post:
1. Click the Choose Files to Upload button.
An Open dialog box opens.
2. Choose the file you want to upload, and click Open (or double-click
the file).
You return to the file uploader window in WordPress, which shows a
progress bar while your audio file uploads. When the upload is complete,
a box containing several options drops down.
3. Type a title for the file in the Title text box.
4. Type a caption for the file in the Caption text box.
5. Type a description of the file in the Description text box.
6. Click the File URL button.
You can provide a direct link in your post to the video file itself.
7. Click Insert into Post.
A link to the audio file is inserted into your post. WordPress doesn’t
embed an actual audio player in the post; it only inserts a link to the
audio file. Visitors click the link to open another page where the audio
file can be played.
Some great WordPress plugins for audio handling can enhance the functionality
of the file uploader and help you manage audio files in your blog posts.
Check out Chapter 10 for information on how to install and use WordPress
plugins in your blog.

WORDPRESS FUNDAMENTAL

Posted: March 4, 2011 in Uncategorized

The WordPress software is a personal publishing system that uses a PHPand-
MySQL platform, which provides you everything you need to create your
own blog and publish your own content dynamically, without having to know
how to program those pages yourself. In short, all your content is stored in a
MySQL database in your hosting account.
PHP (which stands for PHP Hypertext Preprocessor) is a server-side scripting
language for creating dynamic Web pages. When a visitor opens a page built
in PHP, the server processes the PHP commands and then sends the results
to the visitor’s browser. MySQL is an open source relational database management
system (RDBMS) that uses Structured Query Language (SQL), the most
popular language for adding, accessing, and processing data in a database. If
that all sounds Greek to you, just think of MySQL as a big filing cabinet where
all the content on your blog is stored.
Every time a visitor goes to your blog to read your content, he makes a request
that’s sent to your server. The PHP programming language receives that
request, obtains the requested information from the MySQL database, and then
presents the requested information to your visitor through his Web browser.
In using the term content as it applies to the data that’s stored in the MySQL
database, I’m referring to your blog posts, comments, and options that you
set up in the WordPress Administration panel. The theme (design) you
choose to use for your blog — whether it’s the default theme, one you create
for yourself, or one that you have custom-designed for you — isn’t part of
the content in this case. Those files are part of the file system and aren’t
stored in the database. So it’s a good idea to create and keep a backup of any
theme files that you’re currently using. See Part IV for further information on
WordPress theme management.

Archiving your publishing history
Packaged within the WordPress software is the capability to maintain chronological
and categorized archives of your publishing history, automatically.
WordPress uses PHP and MySQL technology to sort and organize everything
you publish in an order that you, and your readers, can access by date and
category. This archiving process is done automatically with every post you
publish to your blog.
When you create a post on your WordPress blog, you can file that post under a
category that you specify. This feature makes for a very nifty archiving system
in which you and your readers can find articles/posts that you’ve placed within
a specific category. The archives page on my personal blog (see it at http://
justagirlintheworld.com/archives) contains a Topical Archive Pages
section, where you find a list of categories I’ve created for my blog posts.
Clicking the Blog Design link below the Topical archive pages heading takes you
to a listing of posts that I wrote on that topic (see Figure 2-1 and Figure 2-2).
WordPress lets you create as many categories as you want for filing your
blog posts by topic. I’ve seen blogs that have just one category and blogs
that have up to 1,800 categories — WordPress is all about personal preference
and how you want to organize your content. On the other hand, using
WordPress categories is your choice. You don’t have to use the category feature
if you’d rather not.

Dealing with comment and
trackback spam
Ugh. The absolute bane of every blogger’s existence is comment and trackback
spam. When blogs became the “It” things on the Internet, spammers
saw an opportunity. If you’ve ever received spam in your e-mail program, the
concept is similar and just as frustrating.
Before blogs came onto the scene, you often saw spammers filling Internet
guestbooks with their links but not leaving any relevant comments. The
reason is simple: Web sites receive higher rankings in the major search
engines if they have multiple links coming in from other sites. Enter blog software,
with comment and trackback technologies — prime breeding ground
for millions of spammers.
Because comments and trackbacks are published to your site publicly — and
usually with a link to the commenters’ Web sites — spammers got their site
links posted on millions of blogs by creating programs that automatically
seek Web sites with commenting systems and then hammer those systems
with tons of comments that contain links back to their own sites.
No blogger likes spam. As a matter of fact, blogging services such as
WordPress have spent untold hours in the name of stopping these spammers
in their tracks, and for the most part, they’ve been successful. Every once in
a while, however, spammers sneak through. Many spammers are offensive,
and all of them are frustrating because they don’t contribute to the ongoing
conversations that occur in blogs.
All WordPress systems have one very major, very excellent thing in common:
Akismet, which kills spam dead. Chapter 10 tells you more about Akismet,
which is brought to you by Automattic, the maker of WordPress.com.

Moving On to the Business of Blogging
Before getting started with blogging, you need to take a long look at your big
plans for your Web site. A word of advice: Organize your plan of attack before
you start. Have a good idea of what types of information you want to publish,
how you want to present and organize that information, and what types of
services and interaction you want to provide your audience.
It doesn’t matter whether you’re planning to start a personal blog as a diary
of your daily life or a business blog to provide useful information to readers
who are interested in your area of expertise. All potential bloggers have ideas
about what type of information they want to present, and you wouldn’t be
considering starting a new blog if you didn’t want to share that information
(no matter what it is) with the rest of the world via the Internet. So having a
plan of attack is helpful when you’re starting out.
Ask this question out loud: “What am I going to blog about?” Go ahead — ask
it. Do you have an answer? Maybe you do, and maybe not — either way, it’s
all right. There’s no clear set of ground rules you must follow. Having an idea
of what you’re planning to write about in your blog makes planning your
attack a little easier. You may want to write about your personal life. Maybe
you plan to share only some of your photography and provide very little
commentary to go along with it. Or maybe you’re a business owner, and you
want to blog about your services and current news within your industry.
Having an idea of your subject matter will help you determine how you want
to deliver that information. My design blog, for example, is where I write
about Web design projects, client case studies, and news related to design
and blogging. You won’t find pictures of my cats there, but you will find those
pictures on my personal blog. I keep the two blogs separate, much in the
same way that most of us like to keep a distinct line of separation between
our personal and professional lives, no matter what industry we work in.
With your topic in mind, ask yourself these questions:
✓ How often will I update my blog with new posts? Daily? Weekly?
✓ Do I want to encourage discussion by letting my readers comment on
my blog posts?
✓ Do I want to make every post available for public display? Am I okay
with my boss or my family finding and reading my blog posts?
✓ How will I categorize my posts?
✓ Do I want to publish the full content of my posts in my RSS feed, or just
excerpts?
✓ Do I want my blog posts to be easy for search engines to find?
When you have your topic and plan of delivery in mind, you can move forward
and adjust your blog settings to work with your plan.

WordPress gallery plugins
Here are a handful of great plugins:
✓ NextGEN Gallery by Alex Rabe: This plugin
creates sortable photo galleries, offers
display of random and recent thumbnail
images in your sidebar through the use of
widgets, and more. You can download it at
http://wordpress.org/extend/
plugins/nextgen-gallery.
✓ Organizer by Imthiaz: Use this plugin to
organize, rename, resize, and manage files
in your image-upload folder. You can download
it at http://wordpress.org/
extend/plugins/organizer.
✓ Random Image widget by Marcel Proulx:
This plugin lets you display a random image
from your image-upload folder. You can
download it at http://wordpress.
org/extend/plugins/randomimage-
widget.
✓ Mini-Slides by Roland Rust: This plugin
lets you create inline slideshows from your
uploaded images. You can download it at
http://wordpress.org/extend/
plugins/mini-slides.

Inserting Video Files into Your Blog Posts
Whether you’re producing your own videos for publication or want to embed
other people’s videos that you find interesting, placing a video file in a blog
post has never been easier with WordPress.
Check out a good example of a video blog at http://1938media.com. Loren
Feldman and his team produce video for the Web and for mobile devices.
Several video galleries on the Web today allow you to add videos to blog
posts; Google’s YouTube service (http://youtube.com) is a good example
of this. To add video from the Web, click the Add Video icon, then click the
From URL tab and follow these steps:
1. Type the URL (Internet address) of the video in the Video URL text box.
Type the full URL, including the http and www portion of the address.
Video providers, such as YouTube, usually list the direct link for the
video file on their sites; you can copy and paste it into the Video URL
text box.
2. (Optional) Type the title of the video in the Title text box.
Giving a title to the video allows you to provide a bit of a description of
the video. It’s a good idea to provide a title if you can, so that your readers
know what the video is about.
3. Click the Insert into Post button.
A link to the video is inserted into your post. WordPress doesn’t embed
the actual video in the post; it inserts only a link to the video. Your
blog visitors click the link to load another page where the video can be
played.
To upload a video file from your own computer and post it to your blog, click
the Add Video icon on the Edit Post or Add New Post page, and follow these
steps to upload and link a video file in your blog post:
1. Click the Choose Files to Upload button.
An Open dialog box opens.

2. Select the video file you want to upload, and click Open (or doubleclick
the file).
You return to the file uploader window in WordPress, which shows a
progress bar while your video uploads. When the upload is complete, a
box containing several options drops down.
3. Type a title for the file in the Title text box.
4. Type a caption for the file in the Caption text box.
5. Type a description of the file in the Description text box.
6. Click the File URL button.
It provides a direct link in your post to the video file itself.
7. Click Insert into Post.
A link to the video is inserted into your post. WordPress doesn’t embed
a video player in the post; it inserts only a link to the video. Your blog
visitors click the link to load another page where the video can be
played.
Some great WordPress plugins for video handling can enhance the functionality
of the file uploader and help you with video display in your blog posts.
Check out Chapter 10 for information on how to install and use WordPress
plugins in your blog.

WordPress video plugins
Here are a handful of great plugins:
✓ wordTube by Alex Rabe: This plugin creates
a nice Flash video, YouTube-like player
when you insert video files within your
posts. No special HTML or programming
knowledge is needed. You can download
this plugin at http://wordpress.
org/extend/plugins/wordtube.
✓ Smart YouTube by Vladimir Prelovac:
This plugin lets you insert YouTube videos
into your blog posts, comments, and RSS
feeds. You can download it at http://
wordpress.org/extend/plugins/
smart-youtube.
✓ WP-Vidavee by Vidavee Labs: This video
player/video file management plugin
helps you upload, manage, organize, and
display the video files that you upload to
your blog. You can download this plugin at
http://wordpress.org/extend/
plugins/wp-vidavee-filmmanager.
✓ Video Embedder by Kristoffer Forsgren:
This plugin lets you embed videos from various
sources, such as YouTube, MySpace,
and Viddler. You can download it at
http://wordpress.org/extend/
plugins/video-embedder.