How-To Tutorials - Web Development

Building the Profile The Content Profile module creates a new content type called Profile when it is enabled. By default, this content type is set to be used as a profile. We need to complete a few additional steps to make our profile fully functional. Edit the default settings for the Profile content type Configure the base Content Profile settings Add any required fields to the Profile content type Add any taxonomy terms to the Profile content type Assign rights to create and edit the Profile content type Edit the Settings of the Profile Content Type As mentioned above, when the Content Profile module is enabled, it creates a new content type named Profile. To use this new node type effectively, we need to change the default settings. To do this, click on the Administer | Site building | Content types link, or navigate to admin/content/types. Click the Edit link for the Profile content type. The Automatic Nodetitles module—enabled earlier in the first part of  this article—adds a new fieldset labeled Automatic title generation at the top of the administrative screens where we edit content types. As shown in the preceding screenshot, we have two options. For the first option, we want to select Automatically generate the title and hide the title field. For the second option—Pattern for the title—we should enter [author-name]'s profile. [author-name] is a token; when the node is created, the token will be replaced by the username of the person creating the node. So, if a user named Jill created the profile node, the title would be Jill's profile. The Token module allows us to use a wide range of tokens in addition to [author-name]. To see the full list of available tokens, expand the Replacement patterns fieldset as indicated in the preceding screenshot by Item 1. The settings listed here also need to be adjusted: In the Submission form settings section, delete the Body field label. We do not want this node type to have a body field; we will add all needed fields using CCK In the Workflow settings section, set the Default options to Published, and Attachments to Disabled In the Comment settings section, set the Default comment settings to Disabled After you have made the necessary adjustments, click the Save content type button to submit the form and save your changes. Configure the Base Content Profile Settings To configure the base Content Profile settings, click on the Administer  Site building | Content types link, or navigate to admin/content/types. Click the Edit link for the Profile content type. Then, click the Content Profile tab. The base settings allow us to configure how the node profile will be displayed on the user profile page. As shown in the preceding screenshot, in the User page display style section we have four options: Don't display this content profile on the user account page—only select this option if you will be overriding the core user profile page via the theming layer. This is an advanced theming technique; refer to the handbook page on overriding user profiles at http://drupal.org/node/35728. Display it as link to the profile content—select this option if you only want to link to the full profile node from the user profile page. Display the full content—this option displays the full node on the user profile page. Display the content's teaser—this option displays the teaser view on the profile page. As discussed later in this section, this option provides us some flexibility not found in the other options. For our example, choose this option. The final two options—Include an edit link to the display and Show a link to the content profile creation page, if there is no profile—should both be selected, as they improve usability. The Weight can be left at 0. When these settings have been adjusted as needed, click the Submit button to save the changes. Add Fields to the Profile Content Type Now that we have edited the defaults of the Profile node type, and adjusted the base settings of the Content Profile, we are ready to add fields and taxonomy terms to our profile. The CCK fields and Taxonomies will provide structure to our user profiles. For this example, we want to extend our profile by adding two fields, and one vocabulary. The fields we will add will both be text fields; one for a Brief bio, and the second for a Full bio. We will also add a Vocabulary to the Profile content type called Interests. Adding this vocabulary is covered in the next section of this article. Add the Brief Bio Field To add the text fields, go to the Content Types administration page by clicking the Administer | Content Management | Content Types link, or by navigating to admin/content/types. Click the manage fields link for the profile content type. In the Add section, we want to add a New field. Enter the following values: Label: Brief bio Field name: brief_bio Field type: text Widget type: text area (multiple rows) Click the Save button; this brings up the admin screen where you can configure the field. As shown in the preceding screenshot, the form to configure the text field has two sections: Profile settings and Global settings. Adjusting the Profile Settings In the Profile settings, we have two options; enter the values specified below: Rows: 3 Help text: Enter your brief bio. 500 characters maximum For this example, we do not need to set any Default value. Adjusting the Global Settings In the Global settings, we have four options; enter the values specified below: Required: No; leave unchecked Number of values: 1 Text processing: Plain text Maximum length: 500 For this example, we do not need to set any Allowed values. Once the field has been configured as needed, click the Save field settings button to save your changes. Adding the Full Bio Field Adding the Full Bio is nearly identical to adding the Brief bio. When adding the field, use the following values: Label: Full bio Field name: full_bio Field type: text Widget type: text area (multiple rows) Click the Save button; this brings up the admin screen where you can configure the field. In the Profile settings, enter: Rows: 5 Help text: Enter your full, extended biography. In the Global settings, we enter: Required: No; leave unchecked Number of values: 1 Text processing: Filtered text (user selects input format) Maximum length: none, leave blank Once the field has been configured as needed, click the Save field settings button to save your changes. Adjusting the Field Display As we discussed above when we configured the base options for Content Profiles, we want to show the node teaser on the user profile page. To take advantage of this option, we need to configure how we display our fields. To do this, go to the Content Types administration page by clicking the Administer | Content Management | Content Types link, or by navigating to admin/content/types. Click the edit link for the profile content type, and then, click the Display fields tab. As seen in the preceding screenshot, you can control how fields are displayed in the Teaser view and in the Full node view. In the settings shown in the preceding screenshot, we have set the Brief bio to show on the Teaser view (that is, on the user profile page), and the Full bio to display on the Full node view (that is, when the entire profile is being viewed). Our settings display a truncated overview on the user profile page, with a link to the more detailed full node view. Add Taxonomy Terms to the Profile Content Type As described above, we want to add an Interests vocabulary. To add new vocabularies, click on the Administer | Content management | Taxonomy| link, or navigate to admin/content/taxonomy. Click the Add vocabulary tab. Adding the Interest Vocabulary For Interests, enter the following values: Vocabulary name: Interests Description: none, leave blank Help text: Describe your interests. Separate each interest with a comma Content types: select Profile; leave others unchecked Settings: select Tags; leave others unchecked Weight: -6 Click the Save button to create the new vocabulary. Assign Rights to Profile Nodes Click on the Administer  User Management | Roles| link, or navigate to admin/user/roles. Select the role(s) that you would like to be able to create node-based profiles. Generally, users should be given the rights to create profile content, and edit own profile content. This will allow users to create their own profiles, and update them as needed, but also protects users from accidentally deleting their profile. Only site administrators or especially trusted users should be given the rights to edit any profile content or delete any profile content.

The term "social network" means different things to different people. However, the starting point of any network is the individuals within it. A user profile provides a place for site members to describe themselves, and for other site members to find out about them. In this article, we will examine how to create a user profile that is aligned with the goals of your site. Identifying the Goals of Your Profile User profiles can be used for a range of purposes. On one end of the spectrum, a profile can be used to store basic information about the user. On the other end of the spectrum, a user profile can be a place for a user to craft and share an online identity. As you create the functionality behind your user profile page, you should know the type of profile you want to create for your users. Drupal ships with a core Profile module. This module is a great starting point, and for many sites will provide all of the functionality needed. If, however, you want a more detailed profile, you will probably need to take the next step: building a node-based profile. This involves creating a content type that stores profile information. Node-based profiles offer several practical advantages; these nodes can be extended using CCK fields, and they can be categorized using a taxonomy. In Drupal 6, user profiles become nodes through using the Content Profile module. The most suitable approach to user profiles will be determined by the goals of your site. Using Drupal's core Profile module provides some simple options that will be easy to set up and use. Extending profiles via the Content Profile module allows for a more detailed profile, but requires more time to set up. In this article, we will begin by describing how to set up profiles using the core Profile module. Then we will look at how to use the Content Profile module. Using the Core Profile Module To use the core profile module, click on the Administer | Site building | Modules link, or navigate to admin/build/modules. In the Core – optional section, enable the Profile module. Click the Save configuration button to submit the form and save the settings. Once the Profile module has been enabled, you can see a user's profile information by navigating to http://example.com/user/UID, where UID is the user's ID number on the site. To see your own user profile, navigate to http://example.com/user when logged in, or click the My Account link. The default user profile page exposes some useful functionality. First, it shows the user's profile, and secondly, it provides the Edit tab that allows a user to edit their profile. The Edit tab will only be visible to the owner of the profile, or to administrative users with elevated permissions. Other modules can add tabs to the core Profile page. As shown in the preceding screenshot by Item 1, the core Tracker module adds a Track tab; this tab gives an overview of all of the posts to which this user has participated. As shown in the preceding screenshot by item, the Contact tab has been added by the core Contact module. The Contact module allows users to contact one another via the site. Customizing the Core Profile The first step in customizing the user profile requires us to plan what we want the profile to show. By default, Drupal only requires users to create a username and provide an email address. From a user privacy perspective, this is great. However, for a teacher trying to track multiple students across multiple classes, this can be less than useful. For this sample profile, we will add two fields using the core Profile module: a last name, and a birthday. The admin features for the core profile module are accessible via the Administer | User Management | Profiles link, or you can navigate to admin/user/profile. As seen in the preceding screenshot, the core profile module offers the following possibilities for customization: single-line textfield—adds a single line of text; useful for names or other types of brief information. multi-line text field—adds a larger textarea field; useful for narrative-type profile information. checkbox—adds a checkbox; useful for Yes/No options. list selection—allows the site admin to create a set of options; the user can then select from these pre-defined options. Functionally, this is similar to a controlled vocabulary created using the core Taxonomy module. freeform list—adds a field where the user can enter a comma-separated list. Functionally, this is similar to a tag-based vocabulary created using the core Taxonomy module. URL—allows users to enter a URL; this is useful for allowing users to add a link to their personal blog. date—adds a date field. In our example profile—adding a last name and a birthday—our last name will be a single-line textfield; our birthday will be a date field.

Free content is a fantastic way of building customer loyalty. Depending on the content that you provide, you can also keep your brand in front of people. For example, a simple tastefully-done screen saver or desktop background can be used to always keep your logo on your customers' desktop. Of course, you need to make sure that the free content is of the highest possible quality to ensure that the customers will actually use the content. Many visitors want to print content or save it to their computers for later use when they are not online or are not working on their computers. We will build PDF files automatically, to give your visitors this convenience. If you allow visitors to download content from your site, you need to be careful that your site security is solid, so that an unscrupulous user cannot download content that you don't want them to have access to. We will discuss how to protect your content in this article. Adding downloads and PDFs to the web site In this section, we will discuss how to add downloads and PDFs to the web site. Controlling how files are downloaded Good Eatin' Goal: Ensure that Drupal has full control over any files that are uploaded, so that we can specify who can download the files. Additional modules needed: None Basic steps Drupal allows you to set downloads to either Public or Private. The public setting does not have any additional download security. The private setting allows Drupal to secure and manage the downloaded files. You can control this functionality using the File system settings, which are available by selecting Site configuration and then File system, from the Administer menu, as shown in the following screenshot: Because we want Drupal to provide additional security for the downloaded files, we will select the Private setting and then save the configuration. You can also control where the files are stored on the web site, and also specify a temporary location to be used while files are being transferred. In most cases, the defaults are acceptable. However, you may need to customize the directories depending on how your server and site are configured. If you are using the private download method, the File system path should not be accessible via a web browser. To ensure that a directory is not available via a web browser, you should choose a folder that is not located within the Drupal installation. It should also not be located within your root web folder. On most systems, the root web folder is named htdocs. If you are unsure what your root web folder is, ask your webhost. Some hosting companies do not allow you to create folders outside the root web folder. If this is the case, you can contact your host to see if they can make an exception, or you will have to use the public download method. Allowing files to be uploaded to the web site Good Eatin' Goal: Allow authorized users to upload a file to the web site. Additional modules needed: Upload (core).   Basic steps In order to allow a user to download a file, you must first upload files to the web site. We will create a downloads page that stores all of the files that have been uploaded.   Begin by activating the Upload module, which is a part of the core Drupal distribution. {literal} We can now customize the permissions for the Upload module by clicking on User management and then on Permission. The available permissions are shown in the following screenshot: It is a good idea to give only authenticated users the ability to view and download files. This will provide an additional incentive for visitors to register on your web site. We can now build a new page for our uploaded files by clicking on Create content and then on Page. The basic information for the page is shown below: To add a file to the page, expand the File attachments section. The section appears as follows: You can now Browse for the file to be uploaded, and then once you have selected it, click Attach. After a file has been attached, it will be listed on the form as shown below: After you save the new page, users with the appropriate permissions will be able to download the file by clicking on the link. You can also add links within the text of a page. Sending the correct file types to a user Good Eatin' Goal: Ensure that the correct file type is sent to the browser so that the visitor's computer can accurately determine how to handle it. Additional modules needed: File MIME (http://drupal.org/project/filemime). Basic steps As you add files to your site for download, it is important to make sure that a visitor's browser knows how to display the file. With web sites, this is done by setting the MIME type for the file. Some common MIME types are: text/html: A standard web page text/csv: A comma-delimited file text/plain: Plain text with no formatting audio/mpeg: Audio mpeg1 and mpeg2 files audio/mp4: Audio mp4 files image/jpeg: JPEG encoded image files image/gif: GIF encoded images application/pdf: A PDF document application/javascript: A script file written in Javascript A full list of how Drupal handles each file type can be found at: http://api.drupal.org/api/function/file_get_mimetype. The File MIME module automatically detects the type of file based on the file extension, and sets the appropriate MIME type, which is returned to the browser. To use the File MIME module, carry out the following steps:   Download, install, and activate the File MIME module. Configure the module by selecting Site configuration and then File MIME, from the Administer menu. The module allows you to specify the location of the mime.types file, which is installed along with your web server. The Apache web server installs this file in the same directory as where your httpd.conf file is installed. You can also add additional mappings for specific file types. For example, you may want .CSV files to be treated as Microsoft Excel files if you know that a significant number of your users are running Windows-based machines and want to download .CSV files into Excel. You can do this by adding the following line to the settings, as shown in the preceding screenshot: application/vnd.ms-excel csv xls. After the module has been properly configured, the module will automatically set the correct MIME types each time that a file is downloaded.

Automatically generating PDF files for a page Good Eatin' Goal: Generate PDF files of our pages so that the users can automatically download the pages for printing, or for offline usage. Additional modules needed: Printer, email, and PDF (http://drupal.org/project/print). Basic steps As you continue to work on your web site, you will find that many users want access to your content, even if they aren't online. With the Printer, email, and PDF module, you can easily and automatically provide content in various formats for offline usage. To begin with, download and install the Printer, email, and PDF module. You can now configure the basic options for the module by selecting Site configuration and then Printer-friendly pages from the Administer menu. The general settings are accessed by clicking on the Settings tab. These settings are shown below, and include options to style the printable pages, and to determine whether or not URLs and comments are displayed on the page. You can also control how the page is opened, and also which logos are displayed on it. By expanding the Source URL section, you can cause the URL of the page to be included on the printed output. You can also optionally add the date and time when the page was generated to the printed output. The printable page (web page) configuration options include a variety of options to control how the links to the printable versions are displayed, as well as how the printable pages are displayed. We have modified the Printer-friendly page link to be in the Content corner rather than in the Links area. You can also optionally display the printable page in a new window and automatically call the print function, as needed. Opening the Advanced link options gives you additional options for how the link is displayed, and what pages it should be displayed on, as shown in the following screenshot: The Robots META tags section allows you to prevent search engines from indexing your printable version, which will help to ensure that visitors are directed only to your online content. This can also help prevent duplicate content penalties being imposed by search engines. To create PDFs, we need to install a third-party tool to handle the conversion. You can choose from either TCPDF or dompdf, which are available at the following locations: TCPDF: http://tcpdf.org dompdf: http://www.digitaljunkies.ca/dompdf/faq.php You can install and use either of these. You can also install both of them and switch between the two, while you evaluate which one will meet the needs of your site best. After you have installed TCPDF and/or dompdf, you can access the PDF tabbed page in the Printer-friendly pages configuration.

Objects confused us, when we started using CodeIgniter. Coming to CodeIgniter through PHP 4, which is a procedural language, and not an object-oriented (OO) language. We duly looked up objects and methods, properties and inheritance, and encapsulation, but our early attempts to write CI code were plagued by the error message "Call to a member function on a non-object". We saw it so often that we were thinking of having it printed on a T-shirt. To save the world from a lot of boring T-shirts, this article covers the way in which CI uses objects, and the different ways you can write and use your own objects. Incidentally, we've used "variables/properties", and "methods/functions" interchangeably, as CI and PHP often do. You write "functions" in your controllers, for instance, when an OO purist would call them "methods". You define class "variables" when the purist would call them "properties". Object-oriented programming We assume that you have basic knowledge of OOP. You may have learned it as an afterthought to "normal" PHP 4. PHP 4 is not an OO language, though some OO functionality has been stacked on to it. PHP 5 is much better, with an underlying engine that was written from the ground up with OO in mind. You can do most of the basics in PHP 4, and CI manages to do everything it needs internally in either language. The key thing to remember—when an OO program is running, there is always one current object (but only one). Objects may call each other or hand over control to each other, in which case the current object changes, but only one of them can be current at any time. The current object defines the scope, in other words, the variables (properties) and methods (functions) that are available to the program at that moment. So it's important to know and control the current object. PHP, being a mixture of functional and OO programming, also offers the possibility where no object is current. You can start off with a functional program, call an object, let it take charge for a while, and then return control to the program. Luckily, CI takes care of this for you. The CI super-object CI works by building one super-object—it runs the entire program as one big object, in order to eliminate scoping issues. When you start CI, a complex chain of events occurs. If you set your CI installation to create a log (in /codeigniter/application/config/config.php set $config['log_threshold'] = 4; value. This will generate a log file in /www/CI_system/logs/), you'll see something like this: 1 DEBUG - 2006-10-03 08:56:39 --> Config Class Initialized2 DEBUG - 2006-10-03 08:56:39 --> No URI present. Default controllerset.3 DEBUG - 2006-10-03 08:56:39 --> Router Class Initialized4 DEBUG - 2006-10-03 08:56:39 --> Output Class Initialized5 DEBUG - 2006-10-03 08:56:39 --> Input Class Initialized6 DEBUG - 2006-10-03 08:56:39 --> Global POST and COOKIE datasanitized7 DEBUG - 2006-10-03 08:56:39 --> URI Class Initialized8 DEBUG - 2006-10-03 08:56:39 --> Language Class Initialized9 DEBUG - 2006-10-03 08:56:39 --> Loader Class Initialized10 DEBUG - 2006-10-03 08:56:39 --> Controller Class Initialized11 DEBUG - 2006-10-03 08:56:39 --> Helpers loaded: security12 DEBUG - 2006-10-03 08:56:40 --> Scripts loaded: errors13 DEBUG - 2006-10-03 08:56:40 --> Scripts loaded: boilerplate14 DEBUG - 2006-10-03 08:56:40 --> Helpers loaded: url15 DEBUG - 2006-10-03 08:56:40 --> Database Driver Class Initialized16 DEBUG - 2006-10-03 08:56:40 --> Model Class Initialized At start up, that is, each time a page request is received over the Internet—CI goes through the same procedure. You can trace the log through the CI files: The index.php file receives a page request. The URL may indicate which controller is required, if not, CI has a default controller (line 2). The index.php file makes some basic checks and calls the codeigniter.php file (codeignitercodeigniter.php). require_once BASEPATH.'codeigniter/CodeIgniter'.EXT; The codeigniter.php file instantiates the Config, Router, Input, URL, and other such, classes (see lines 1, and 3 to 9). These are called the base classes—you rarely interact directly with them, but they underlie almost everything CI does. /** ------------------------------------------------------* Instantiate the base classes* ------------------------------------------------------*/$CFG =& load_class('Config');$URI =& load_class('URI');$RTR =& load_class('Router');$OUT =& load_class('Output'); The file codeigniter.php tests to see the version of PHP it is running on, and calls Base4 or Base5 (/codeigniter/Base4.php or codeigniter/Base5.php). if (floor(phpversion()) < 5){load_class('Loader', FALSE);require(BASEPATH.'codeigniter/Base4'.EXT);}else{require(BASEPATH.'codeigniter/Base5'.EXT);} The above snippet creates an object—one which ensures that a class has only one instance. Each has a public &get_instance() function. Note the &—this is assignment by reference. So, if you assign using &get_instance() method, it assigns to the single running instance of the class. In other words, it points to the same pigeonhole. So, instead of setting up lot of new objects, you start building one super-object, which contains everything related to the framework. function &get_instance(){return CI_Base::get_instance();} A security check, /** ------------------------------------------------------* Security check* ------------------------------------------------------** None of the functions in the app controller or the* loader class can be called via the URI, nor can* controller functions that begin with an underscore*/$class = $RTR->fetch_class();$method = $RTR->fetch_method();if ( !class_exists($class)OR $method == 'controller'OR strncmp($method, '_', 1) == 0OR in_array(strtolower($method), array_map('strtolower',get_class_methods('Controller')))){show_404("{$class}/{$method}");} The file, codeigniter.php instantiates the controller that was requested, or a default controller (line 10). The new class is called $CI. $CI = new $class(); The function specified in the URL (or a default) is then called and life, as we know it, starts to wake up and happen. Depending on what you wrote in your controller, CI will initialize the classes you need, and "include" functional scripts you asked for. So, in the log, the model class is initialized (line 16). The boilerplate script, which is also shown in the log (line 13), is the one we wrote to contain standard chunks of text. It's a .php file, saved in the folder called scripts. It's not a class—just a set of functions. If you were writing pure PHP you might use include or require to bring it into the namespace—CI needs to use its own load function to bring it into the super-object. The concept of namespace or scope is crucial here. When you declare a variable, array, object, and so on, PHP holds the variable name in its memory and assigns a further block of memory to hold its contents. However, problems might arise if you define two variables with the same name. (In a complex site, this is easily done.) For this reason, PHP has several set of rules. Some of them are as listed: Each function has its own namespace or scope, and variables defined within a function are usually local to it. Outside the function, they are meaningless. You can declare global variables, which are held in a special global namespace and are available throughout the program. Objects have their own namespaces—variables exist inside the object as long as the object exists, and can only be referenced by using the object. So, $variable, global $variable, and $this->variable are three different things. Remember, $variable and global $variable can't be used in the same scope. So, inside a function you will have to decide if you want to use $variable or global $variable. Particularly before OO, this could lead to all sort of confusions—you may have too many variables in your namespace (so that conflicting names overwrite each other). You may also find that some variables are just not accessible from whatever scope you happen to be. Copying by reference You may have noticed the function &get_instance() in the previous section. This is to ensure that, as the variables change, the variables of the original class also change. As assignment by reference can be confusing, so here's a short explanation. We're all familiar with simple copying in PHP: $one = 1;$two = $one;echo $two; The previous snippet produces 1, because $two is a copy of $one. However, suppose you reassign $one: $one = 1;$two = $one;$one = 5;echo $two; This code still produces $two = 1, because changes made to $one after assigning $two have not been reflected in $two. This was a one-off assignment of the value that happened to be in variable $one at that time, to a new variable $two. Once that is done, the two variables lead separate lives (in just the same way if we alter $two, $one doesn't change). In effect, PHP creates two pigeonholes—called $one and $two. A separate value lives in each. You may, on any occasion, make the values equal, but after that each does its own work. PHP also allows copying by reference. If you add just a simple & to line 2 of the snippet as shown: $one = 1;$two =& $one;$one = 5;echo $two; The code now echoes 5, the change we made to $one is reflected in $two. Changing the = to =& in the second line means that the assignment is "by reference". It looks as if there was only one pigeonhole, which has two names ($one<.i> and $two). Whatever happens to the contents of the pigeonhole is reflected in both $one and $two, as if they were just different names for the same variables. The principle works for objects as well as simple string variables. You can copy or clone an object using the = operator in PHP 4. Or you can clone keyword in PHP, in which case you make a simple one-off new copy, which then leads an independent life. You can also assign one to the other by reference, so the two objects point to each other. Any changes made to one will also happen to the other. Again, think of them as two different names for the same thing.

Embedding a progress bar in a status bar This topic explains how to embed a progress bar in a panel's status bar, a scenario found in countless user interfaces: How to do it Create a click handler that will simulate a long-running activity and update the progress bar: Ext.onReady(function() { var loadFn = function(btn, statusBar) { btn = Ext.getCmp(btn); btn.disable(); Ext.fly('statusTxt').update('Saving...'); pBar.wait({ interval: 200, duration: 5000, increment: 15, fn: function() { btn.enable(); Ext.fly('statusTxt').update('Done'); } });}; Create an instance of the progress bar: var pBar = new Ext.ProgressBar({ id: 'pBar', width: 100}); Create a host panel and embed the progress bar in the bbar of the panel. Also, add a button that will start the progress bar updates: var pnl = new Ext.Panel({ title: 'Status bar with progress bar', renderTo: 'pnl1', width: 400, height: 200, bodyStyle: 'padding:10px;', items: [{ xtype: 'button', id: 'btn', text: 'Save', width:'75', handler: loadFn.createCallback('btn', 'sBar') }], bbar: { id: 'sBar', items: [{ xtype: 'tbtext', text: '',id:'statusTxt' },'->', pBar] }}); How it works The first step consists of creating loadFn, a function that simulates a long-running operation, so that we can see the progress bar animation when the button is clicked. The heart of loadFn is a call to ProgressBar.wait(…), which initiates the progress bar in an auto-update mode. And this is how the status bar is embedded in the bbar of the panel: bbar: { id: 'sBar', items: [{ xtype: 'tbtext', text: '',id:'statusTxt' },'->', pBar] Observe how the progress bar is sent to the rightmost location in the status bar with the help of a Toolbar.Fill instance, declared with '->'. Creating a custom look for the status bar items Customizing the look of toolbar items is relatively simple. In this recipe, you will learn how to create toolbar items with a sunken look that can be found in many desktop applications: How to do it Create the styles that will provide the custom look of the status bar text items: .custom-status-text-panel{ border-top:1px solid #99BBE8; border-right:1px solid #fff; border-bottom:1px solid #fff; border-left:1px solid #99BBE8; padding:1px 2px 2px 1px;} Create a host panel: Ext.onReady(function() { var pnl = new Ext.Panel({ title: 'Status bar with sunken text items', renderTo: 'pnl1', width: 400, height: 200, bodyStyle: 'padding:10px;', Define the panel's bbar with the text items: bbar: { id: 'sBar', items: [ { id: 'cachedCount', xtype:'tbtext', text: 'Cached: 15' }, ' ', { id: 'uploadedCount', xtype: 'tbtext', text: 'Uploaded: 7' }, ' ', { id: 'invalidCount', xtype: 'tbtext', text: 'Invalid: 2' } ]}, Now, add a handler for the afterrender event and use it to modify the styles of the text items: listeners: { 'afterrender': { fn: function() { Ext.fly(Ext.getCmp('cachedCount').getEl()).parent(). addClass('custom-status-text-panel'); Ext.fly(Ext.getCmp('uploadedCount').getEl()).parent(). addClass('custom-status-text-panel'); Ext.fly(Ext.getCmp('invalidCount').getEl()).parent(). addClass('custom-status-text-panel'); }, delay:500 }} How it works The actual look of the items is defined by the style in the custom-status-text-panel CSS class. After the host panel and toolbar are created and rendered, the look of the items is changed by applying the style to each of the TD elements that contain the items. For example: Ext.fly(Ext.getCmp('uploadedCount').getEl()).parent(). addClass('custom-status-text-panel'); See also... The previous recipe, Embedding a progress bar in a status bar, explains how a progress bar can be embedded in a panel's status bar Using a progress bar to indicate that your application is busy In this topic, you will learn how to use a progress bar to indicate that your application is busy performing an operation. The next screenshot shows a progress bar built using this recipe: How to do it Define the progress bar: Ext.onReady(function() { Ext.QuickTips.init(); var pBar = new Ext.ProgressBar({ id: 'pBar', width: 300, renderTo: 'pBarDiv'}); Add a handler for the update event and use it to update the wait message: pBar.on('update', function(val) { //Handle this event if you need to // execute code at each progress interval. Ext.fly('pBarText').dom.innerHTML += '.';}); Create a click handler for the button that will simulate a long-running activity: var btn = Ext.get('btn');btn.on('click', function() { Ext.fly('pBarText').update('Please wait'); btn.dom.disabled = true; pBar.wait({ interval: 200, duration: 5000, increment: 15, fn: function() { btn.dom.disabled = false; Ext.fly('pBarText').update('Done'); } });}); Add the button to the page: <button id="btn">Start long-running operation</button> How it works After creating the progress bar, the handler for its update event is created. While I use this handler simply to update the text message, you can use it to execute some other code every time that a progress interval occurs. The click handler for the button calls the progress bar's wait(…) function, which causes the progress bar to auto-update at the configured interval and reset itself after the configured duration: pBar.wait({ interval: 200, duration: 5000, increment: 15, fn: function() { btn.dom.disabled = false; Ext.fly('pBarText').update('Done'); }}); There's more The progress bar can also be configured to run indefinitely by not passing the duration config option. Clearing the progress bar in this scenario requires a call to the reset() function. See also... The next recipe, Using a progress bar to report progress updates, illustrates how a progress bar can be set up to notify the user that progress is being made in the execution of an operation The Changing the look of a progress bar recipe (covered later in this article) shows you how easy it is to change the look of the progress bar using custom styles Summary This article consisted recipes that examined the commonly-used menu items, as well as the different ways of setting up toolbars and progress bars in your applications. [ 1 | 2 ] If you have read this article you may be interested to view :   Making Progress with Menus and Toolbars using Ext JS 3.0: Part 1 Load, Validate, and Submit Forms using Ext JS 3.0: Part 1 Load, Validate, and Submit Forms using Ext JS 3.0: Part 2 Load, Validate, and Submit Forms using Ext JS 3.0: Part 3

Do you want to use paid incoming links? Paying for incoming links can be a tricky business if you do it the wrong way. Google doesn't like web sites that use this link building technique and their representative master anti-spam spokesman, Matt Cutts is very clear on this subject. Buy links and get penalized… sell links and get penalized as well The major penalty is a very likely drop in Page Rank. Although Page Rank is becoming less important as compared to your rankings on the search engine result pages, people still see it as a quality making if you do have a high Page Rank. Of course using AdWords to do a "Pay Per Click" campaign is also a form of paid links. If you want to use the sponsored link options to get your site started, that is fine, but the ultimate goal of this article is to get higher rankings in the organic results of the search engines. Studies support the idea of using sponsored links to bring in more traffic from the organic searchers even after the campaign has stopped. It depends on how hard you need the traffic to your site for business, or if you want to go for organic results. Helping people helps you with link building If you have a topic that you are passionate about and you build a web site about it, then this option is one for you. Find a forum that matches the topic of your web site and start helping other people with your knowledge. On most forums there is a possibility to have your own "Signature", where you can have one or more lines of text with a link that people can click on. For instance, the site http://forums.digitalpoint.com has a lot of requests for information on Joomla! where you can help people to solve their problems. After a number of replies to questions, you can put in your own signature such as:   The links you put in there will not only bring traffic from your posts, but they also count as incoming links for Google. Not all forums have the same rules—for example, some of them have a rule that you can put a link to your site, but it should be the URL only without your main keywords in the link. So, be sure to go to the best forums you can find on your topic and start helping others with your knowledge. In the meantime, work on your incoming links as well. Commenting done the right way Another option you have is to look for blogs about your web site's topic. You will already probably know the most useful ones in your field of expertise. Go to those blogs and read some of the posts they have published. If you are lucky, there will be some kind of widget that shows you how many readers they have on that blog for their RSS Feed or email system. Large numbers are a good sign as that means a lot of people will read the blog and it probably has a good ranking in Google. Read the posts that are relevant to your topic and if you can, write a comment which shows that you know more about the topic. Also, if possible, make a new suggestion or correct an error in the article. Don't write comments such as "I really liked this post", "Thank you for this information", or even "I really like your blog". If you write comments such as those you won't get any interaction with the blogger in question and you don't add value to the discussion. Such comments will get deleted or labeled as spam. When I get comment links such as these, I remove them as they add null to zero information for other visitors and they are clearly there just for link building. It won't work that way, and if you are outsourcing or want to outsource this kind of link building, here is a warning, make sure you state in your contract with these people that blog and comment spamming is not allowed! If you don't add that clause, they may start commenting in your name, linking to your site (well, you paid them to do that…) with the same remarks over and over again. What happens next is that bloggers will ban you from commenting on their blogs, and in the worst case scenario you will loose a lot of credibility in your community. People are sometimes better informed than you think and a mistake like the one mentioned above will cost you more than money alone. So, if you start commenting, ask yourself: Do I have something of value to add to the conversation? Will people read that comment? How effective will this blog be in sending me traffic? Keep those in mind, with more emphasis on the first point, and you will do fine. Finding places to comment As I said before, commenting is a great way to create your own incoming links. But how do you find more relevant blogs to read and comment on? First of all, do a search for blogs about your web site's topic. You can use http://blogsearch.google.com/ to find the most recent blog posts and see if the blogs it finds fit your web site's topic.   Technorati is of course the best place to look for blogs.   Go ahead and use the option search the blogosphere.... From the results of this initial search, you can filter based on several options. In the first selection list you will find options such as Search Posts, Search Blogs, Search Photos, and Seach Videos. The second selection list allows you to filter based on entire post or just tags. The third option is the one you really need to set and there you can choose to filter on a lot of authority.   This option means a lot of people are linking to that web site/blog and it will probably get lots of traffic and do well in the search engines. Those blogs are the ones you want your voice to be heard on and remember if you are going to comment, make sure it is a useful one. What you need to do after finding the blog, is to really check out the site. In some cases there might just be one post about your web site's topic on that blog. And you really want it to be on topic all the way!   Two other blog search services you can use are: http://www.icerocket.com http://www.blogpulse.com Both are set up to bring to you the most recent results like Google does but they have something extra. You can learn about trends as Icerocket has a trend tool and Blogpulse has its trend search option. Using those trend tools will give you more insight on which terms are "hot" at the moment and growing. If you combine that with the blogs you just found, for your keywords, you could have a winning team.

Placing buttons in a toolbar You can embed different types of components in a toolbar. This topic teaches you how to build a toolbar that contains image-only, text-only and image/text buttons, a toggle button, and a combo box. How to do it Create the styles for the toolbar items: #tbar{ width:600px;}.icon-data{ background:url(img/data.png) 0 no-repeat !important;}.icon-chart{ background:url(img/pie-chart.png) 0 no-repeat !important;}.icon-table{ background:url(img/table.png) 0 no-repeat !important;} Define a data store for the combo box: Ext.onReady(function() { Ext.QuickTips.init(); var makesStore = new Ext.data.ArrayStore({ fields: ['make'], data: makes // from cars.js }); Create a toolbar and define the buttons and combo box inline: var tb = new Ext.Toolbar({ renderTo: 'tbar', items: [{ iconCls: 'icon-data', tooltip: 'Icon only button', handler:clickHandler }, '-', { text: 'Text Button' }, '-', { text: 'Image/Text Button', iconCls: 'icon-chart' }, '-', { text: 'Toggle Button', iconCls: 'icon-table', enableToggle: true, toggleHandler: toggleHandler, pressed: true }, '->', 'Make: ', { xtype: 'combo', store: makesStore, displayField: 'make', typeAhead: true, mode: 'local', triggerAction: 'all', emptyText: 'Select a make...', selectOnFocus: true, width: 135 }]}); Finally, create handlers for the push button and the toggle button: function clickHandler(btn) { Ext.Msg.alert('clickHandler', 'button pressed');}function toggleHandler(item, pressed) { Ext.Msg.alert('toggleHandler', 'toggle pressed');} How it works The buttons and the combo box are declared inline. While the standard button uses a click handler through the handler config option, the toggle button requires the toggleHandler config option.The button icons are set with the iconCls option, using the classes declared in the first step of the topic. As an example, note the use of the Toolbar.Separator instances in this fragment: }, '-', { text: 'Text Button'}, '-', { text: 'Image/Text Button', iconCls: 'icon-chart'}, '-', { Using '-' to declare a Toolbar.Separator is equivalent to using xtype: 'tbseparator'. Similarly, using '->' to declare Toolbar.Fill is equivalent to using xtype:'tbfill'. See also... The next recipe, Working with the new ButtonGroup component, explains how to use the ButtonGroup class to organize a series of related buttons Working with the new ButtonGroup component A welcome addition to Ext JS is the ability to organize buttons in groups. Here's how to create a panel with a toolbar that contains two button groups: How to do it Create the styles for the buttons: #tbar{ width:600px;}.icon-data{ background:url(img/data.png) 0 no-repeat !important;}.icon-chart{ background:url(img/pie-chart.png) 0 no-repeat !important;}.icon-table{ background:url(img/table.png) 0 no-repeat !important;}.icon-sort-asc{ background:url(img/sort-asc.png) 0 no-repeat !important;}.icon-sort-desc{ background:url(img/sort-desc.png) 0 no-repeat !important;}.icon-filter{ background:url(img/funnel.png) 0 no-repeat !important;} Define a panel that will host the toolbar: Ext.onReady(function() { var pnl = new Ext.Panel({ title: 'My Application', renderTo:'pnl-div', height: 300, width: 500, bodyStyle: 'padding:10px', autoScroll: true, Define a toolbar inline and create two button groups: tbar: [{ xtype: 'buttongroup', title: 'Data Connections', columns: 1, defaults: { scale: 'small' }, items: [{ xtype:'button', text: 'Data Sources', iconCls:'icon-data' }, { xtype: 'button', text: 'Tables', iconCls: 'icon-table' }, { xtype: 'button', text: 'Reports', iconCls: 'icon-chart' }]}, { xtype: 'buttongroup', title: 'Sort & Filter', columns: 1, defaults: { scale: 'small' }, items: [{ xtype: 'button', text: 'Sort Ascending', iconCls: 'icon-sort-asc' }, { xtype: 'button', text: 'Sort Descending', iconCls: 'icon-sort-desc' }, { xtype: 'button', text: 'Filter', iconCls: 'icon-filter' }]}] How it works Using a button group consists of adding a step to the process of adding buttons, or other items, to a toolbar. Instead of adding the items directly to the toolbar, you need to firstly define the group and then add the items to the group: tbar: [{ xtype: 'buttongroup', title: 'Data Connections', columns: 1, defaults: { scale: 'small' }, items: [{ xtype:'button', text: 'Data Sources', iconCls:'icon-data' }, { xtype: 'button', text: 'Tables', iconCls: 'icon-table' }, { xtype: 'button', text: 'Reports', iconCls: 'icon-chart' }]} See also... The next recipe, Placing buttons in a toolbar, illustrates how you can embed different types of components in a toolbar Placing menus in a toolbar In this topic, you will see how simple it is to use menus inside a toolbar. The panel's toolbar that we will build, contains a standard button and a split button, both with menus: How to do it Create the styles for the buttons: #tbar{ width:600px;}.icon-data{ background:url(img/data.png) 0 no-repeat !important;}.icon-chart{ background:url(img/pie-chart.png) 0 no-repeat !important;}.icon-table{ background:url(img/table.png) 0 no-repeat !important;} Create a click handler for the menus: Ext.onReady(function() { Ext.QuickTips.init(); var clickHandler = function(action) { alert('Menu clicked: "' + action + '"');}; Create a window to host the toolbar: var wnd = new Ext.Window({ title: 'Toolbar with menus', closable: false, height: 300, width: 500, bodyStyle: 'padding:10px', autoScroll: true, Define the window's toolbar inline, and add the buttons and their respective menus: tbar: [{ text: 'Button with menu', iconCls: 'icon-table', menu: [ { text: 'Menu 1', handler:clickHandler.createCallback('Menu 1'), iconCls: 'icon-data' }, { text: 'Menu 1', handler: clickHandler.createCallback('Menu 2'), iconCls: 'icon-data'}]}, '-',{ xtype: 'splitbutton', text: 'Split button with menu', iconCls: 'icon-chart', handler: clickHandler.createCallback('Split button with menu'), menu: [ { text: 'Menu 3', handler: clickHandler.createCallback('Menu 3'), iconCls: 'icon-data' }, { text: 'Menu 4', handler: clickHandler.createCallback('Menu 4'), iconCls: 'icon-data'}] }]}); Finally, show the window: wnd.show(); How it works This is a simple procedure. Note how the split button is declared with the xtype: 'splitbutton' config option. Also, observe how the createCallback() function is used to invoke the clickHandler() function with the correct arguments for each button. See also... The next recipe, Commonly used menu items, shows the different items that can be used in a menu Commonly used menu items To show you the different items that can be used in a menu, we will build a menu that contains radio items, a checkbox menu, a date menu, and a color menu.This is how the radio options and checkbox menu will look: The Pick a Date menu item will display a date picker, as shown in the next screenshot: The Pick a Color menu item displays a color picker, as seen here: How to do it Create a handler for the checkbox menu: Ext.onReady(function() { Ext.QuickTips.init(); var onCheckHandler = function(item, checked) { Ext.Msg.alert('Menu checked', item.text + ', checked: ' + (checked ? 'checked' : 'unchecked')); }; Define a date menu: var dateMenu = new Ext.menu.DateMenu({ handler: function(dp, date) { Ext.Msg.alert('Date picker', date); }}); Define a color menu: var colorMenu = new Ext.menu.ColorMenu({ handler: function(cm, color) { Ext.Msg.alert('Color picker', String.format('You picked {0}.', color)); }}); Create a main menu. Now add the date and color menus, as well as a few inline menus: var menu = new Ext.menu.Menu({ id: 'mainMenu', items: [{ text: 'Radio Options', menu: { items: [ '<b>Choose a Theme</b>', { text: 'Aero Glass', checked: true, group: 'theme', checkHandler: onCheckHandler }, { text: 'Vista Black', checked: false, group: 'theme', checkHandler: onCheckHandler }, { text: 'Gray Theme', checked: false, group: 'theme', checkHandler: onCheckHandler }, { text: 'Default Theme', checked: false, group: 'theme', checkHandler: onCheckHandler } ] } }, { text: 'Pick a Date', iconCls: 'calendar', menu: dateMenu }, { text: 'Pick a Color', menu: colorMenu }, { text: 'The last menu', checked: true, checkHandler: onCheckHandler }]}); Create a toolbar and add the main menu: var tb = new Ext.Toolbar({ renderTo: 'tbar', items: [{ text: 'Menu Items', menu: menu }]}); How it works After defining the date and color pickers, the main menu is built. This menu contains the pickers, as well as a few more items that are defined inline. To display checked items (see the checked: true config option) with a radio button instead of a checkbox, the menu items need to be defined using the group config option. This is how the theme selector menu is built: menu: { items: [ '<b>Choose a Theme</b>', { text: 'Aero Glass', checked: true, group: 'theme', checkHandler: onCheckHandler }, { text: 'Vista Black', checked: false, group: 'theme', checkHandler: onCheckHandler See also... The Placing buttons in a toolbar recipe (covered earlier in this article) illustrates how you can embed different types of components in a toolbar >> Continue Reading Making Progress with Menus and Toolbars using Ext JS 3.0: Part 2 [ 1 | 2 ]   If you have read this article you may be interested to view : Making Progress with Menus and Toolbars using Ext JS 3.0: Part 2 Load, Validate, and Submit Forms using Ext JS 3.0: Part 1 Load, Validate, and Submit Forms using Ext JS 3.0: Part 2 Load, Validate, and Submit Forms using Ext JS 3.0: Part 3

WordPress As I mentioned before, WordPress is the biggest scoring free service that you can use. It is also the only one that doesn't allow you to spam their system and use it just for promotional actions. All the other services mentioned earlier allow you to monetize your blog or web site. Some share a portion of their revenue as well. So, if you want to make some money on the side, these services will provide you with the possibility to do so. WordPress doesn't allow you to build blogs just for Search Engine Optimization and I quote: We have a very low tolerance for blogs created purely for Search Engine Optimization or commercial purposes, machine-generated blogs, and will continue to nuke them. So if that's what you're interested in, WordPress is not for you. A self-hosted solution would be much more appropriate for you; suitable hosts can be found at http://www.wordpress.org/ hosting. Also see the following text taken from http://support.wordpress.com/advertising: This might be just one of the reasons that Google loves WORDPRESS.COM blogs. So how is it possible to use WORDPRESS.COM to promote your website? Actually, you don't. On this service you are not going the promote your site in a way that you can do on the other services. On WORDPRESS.COM you truly build a blog or site containing pages with true value to the visitors of that blog. You can create an About page where you put a link to your main website and in that way show the readers where to get more information. You can also put a link to your website in the link section (Blogroll) together with a few other relevant links that contain valid information. Blogging on WordPress and your ranking If you cannot promote your web site in a big way then what is the point of creating a blog on WORDPRESS.COM? A blog on WordPress can rank highly for the topic that you are blogging about and will give you some SEO love through those rankings. What is more important is the fact that you can take a special topic from your main web site's topic and create a blog around that. If you write your blog posts well and start to rank on that topic you will be seen as an authority on that topic and people will want to know more about you. That is the main reason to invest time to blog on WORDPRESS.COM to be recognized as an authority in your field of expertise. As you took only one topic out of all the topics that your site is about, you can do it again for another topic as well. You could also see these blogs as a collection of topic silos that create an array of highly related web sites that point to yours. This kind of link building takes time, and a lot of it! Is it worth it? Yes most certainly, and in more ways than one. With blogging you can achieve the following: An authority status if you do it right More traffic to your web site Better rankings in the search engines More insight into what the visitors of your web site are looking for To interact with other people having interest in the same topic as you Fun in writing and that will reflect on your site as you want to create more content on that site as well There is also a downside that you have to consider—it takes time away from building content on your main site and you have to cover more locations to maintain in the beginning. If you use that blog to write some timeless quality content on a niche part of your main site you will find out that you can stop maintaining those blogs after a short period of time. Remember, these are valid blogs to build incoming links to your main site! Digging deeper into WORDPRESS.COM blogs Creating a blog on WordPress is also very simple, go to WORDPRESS.COM and get a blog. Wait! Don't go yet! You need a few guidelines to start. Your initial user account name is going to be the first part of your URL, so name it right and remember, you cannot use a "-" in your username. My first account was seo4joomla so what I got was seo4joomla.wordpress.com. When you are logged in to WORDPRESS.COM and you type in the URL with a new keyword that you want (if it is not taken); you will get the option to add that blog to your account so that you can manage all of your WordPress.COM blogs from one place. Think about the title of your blog, if you want to change it later you can do that in the settings panel. Once you have your new blog, start cleaning. Delete the sample post and the comment along with it. Delete all the links in the blogroll (unless you are going to write about WordPress). Change the base post category from Uncategorized to a relevant topic name. Change the name of the links category from Blogroll to your most relevant keyword. Delete the About page and create a new one with the keywords of your blog in the title. That way your URL (page slug in WordPress) is containing the same keywords. Choose a nice theme layout that fits your topic, and if possible use a customized header. Using a customized header will give your site a slightly different look from the other WORDPRESS.COM web sites. Change the tagline in the general settings and start writing the way you do on your web site!   Using free blogging services As you saw, there are several blogging platforms and free web site building platforms that you can use to promote your web site. There are a lot more out there on the Internet, but you need to look for the ones that rank well in the search engines before you put your valued time into building a linking "empire". These services are free of charge and sometimes live on the revenue that comes from the blog content they host. If you don't want to be on such a platform where there are advertisements around your writing, don't use them. If you are afraid that you can lose your blog on such sites look for a way to make backups (for example, on WORDPRESS.COM you can use the Export function). How to minimize your blog writing time Keeping content fresh and up-to-date on all the blogs that you build is not that difficult. If you focus on blogging on your own web site, you should try to integrate the RSS Feed from your web site into those blog pages. RSS Feeds are the best possible automatic way of updating one-to-many, so use it to your advantage. Using your best content for link building Use the best articles from your web site to get into the picture of social bookmarking web sites. Find the most visited pages and the pages with the greatest number of comments, if you have a blog on your Joomla! site. Go to bookmarking sites and bookmark your pages using your own account. There are a lot of bookmarking web sites that you can use, just make sure you send your bookmarks to at least the following: Delicous Digg Reddit Newsvine Bloglines StumbleUpon These are some of the most influential ones that count towards your search engine ranking and are a great way to get traffic. Traffic from this kind of web site will come in bursts and mostly will not span a longer time period than a few days. The real power lies in the long term effect. Writing articles for links If you like writing about your passion, you can consider writing articles and submitting them to article publishing services. People are always looking for information and, if you can provide that to them in a smart way, it will help you to gain recognition as a field expert. You don't have to write long articles, but they must be informative and should give the reader an answer to a question they might have. Write those articles and submit them to services such as: www.thewhir.com www.ideamarketers.com www.goarticles.com www.ezinearticles.com Each of those services have their own "Terms of Service" that you should read before submitting your articles. They have their quality guidelines as well. The length of the article might need to be of a certain minimum or maximum number of characters. You might not be permitted to link deeper into your web site than the top level. Get that information before you choose a service to work with. Depending on the number of webmasters that will use your articles to republish, you could get a lot more incoming links from just a few well-written articles. What you should NOT do is take an old article from your site and send it as an article to be republished. That could backfire, as the services mentioned have a clause in their "Terms of Service" stating that the article is original and not published before. You should really not republish an already submitted article on your own web site, it could give your site a duplicate content penalty as that article will be published all over the Internet (with your link in it). An alternative could be that you publish some of your articles combined and rewritten into an e-book in PDF format that you give away for free from your web site.  

FeedBurner FeedBurner can be used to track the number of RSS feed subscribers you have and how many of those subscribers are actively engaged with your feed. Setting up FeedBurner is quite simple, although you will need to register for an account at http://feedburner.google.com. If you already have an account at the old Feedburner.com site, you can move the feeds to your Google account when you sign in. Time for action – let's burn some feeds Download the Feedburner FeedSmith plugin from http://feedburner.google.com/fb/static/feedburner_feedsmith_plugin_2.3.zip . Upload the plugin's PHP file to /wp-content/plugins. Activate the plugin for yourself, then for all other users. Log in to Feedburner.google.com and add your site's feed to your FeedBurner account by entering the URL into the Burn a feed right this instant box. In most cases the default title and address should be fine; you may want to change the address if yours is too cumbersome. For Slayercafe.com, FeedBurner picked http://feeds2.feedburner.com/TheSlayerCafe, which is nice and easy to remember. On the next screen, tick the box to allow FeedBurner to track Clickthroughs and Reach. Go to the Publicize tab and activate the FeedCount feature. On your main blog, go to the Settings | FeedBurner screen and paste the URL you created in step 5 into the FeedBurner box. Install the FeedBurner Widget available at http://wordpress.org/extend/plugins/feedburner-widget/. On the Appearance | Widgets page, add the widget just above the normal RSS feed, and set it up like shown in the following screenshot. You should now have two subscription options on your front page. Once your site starts getting subscribers, you should see some useful statistics on the FeedBurner Analyze page. What's my feed URL?If you aren't sure what your feed's URL is, check out the following list: RSS 2.0: http://www.mydomain.tld/feed/ RSS 2.0: http://www.mydomain.tld/feed/rss2/ RSS 0.92: http://www.mydomain.tld/feed/rss RDF/RSS 1.0: http://www.mydomain.tld/feed/rdf Atom: http://www.mydomain.tld/feed/atom All of the above feed types are offered by WordPress MU. The RSS 2.0 feed will be the one that is most frequently asked for by directories and aggregators; however, it is useful to know the address of the other feeds in case a site requests them. What just happened? We have just set up two different ways for people to subscribe to the main blog, and we have offered our blog network's users the chance to do the same with their blogs. Our users will need to create their own FeedBurner accounts, but the rest of the work has been done for them—they just need to add the right widgets to their page. Offering two different ways to subscribe may seem strange, especially when you consider that the count shown by FeedBurner is inaccurate because it doesn't track people who subscribed using the direct link. The reason I have chosen to do it this way is because FeedBurner offers some useful statistics, such as how many people clicked through and which readers they are using, about the users that have subscribed via its feeds. If you find that you have a huge number of subscribers but they are never clicking on articles, then perhaps your headlines aren't enticing enough. FeedBurner also tracks Uncommon Uses—for example, someone scraping your feed to use as free content for a spam blog. If FeedBurner is so useful, then why offer an alternative? Well, not all RSS readers can understand FeedBurner feeds. This is especially true if your site expects a lot of visitors from people using older mobile devices. Offering a plain old RSS feed option is a good idea; otherwise, you will lose those subscribers entirely. Remember that if FeedBurner ever goes down, your FeedBurner subscribers will not be able to read your RSS feed. In my experience as a subscriber, FeedBurner is a reliable service; as you would expect because the service is now owned by Google, and I feel that the usefulness of the statistics it offers outweighs the risk of downtime. You may feel differently about using a third-party service to manage your feeds. If you cannot afford any downtime, then perhaps serving your feeds directly is a better option. Have a go hero – offering more RSS options If you think that the Add to Any butt on is too intrusive, or if you want to offer subscribe links in more than one place (for example, as a widget in the sidebar and also as a link at the bottom of a post), then you can use the following text link code to add the different kinds of feed links. Link Format <?php bloginfo('rss2_url'); ?> RSS 2.0 <?php bloginfo('rss_url'); ?> RSS 0.92 <?php bloginfo('rdf_url'); ?> RSS 1.0 <?php bloginfo('atom_url'); ?> Atom <?php bloginfo('comments_rss2_url'); ?> RSS Feed For Comments   You can use the code presented in this table anywhere you would like to have the RSS icons appear. Personally, I like to display the RSS icons in a prominent position in the right sidebar by editing r_sidebar.php.

Creating validation functions for URLs, email addresses, and other types of data Ext JS has an extensive library of validation functions. This is how it can be used to validate URLs, email addresses, and other types of data. The following screenshot shows email address validation in action: This screenshot displays URL validation in action: How to do it... Initialize the QuickTips singleton: Ext.QuickTips.init(); Create a form with fields that accept specific data formats: Ext.onReady(function() { var commentForm = new Ext.FormPanel({ frame: true, title: 'Send your comments', bodyStyle: 'padding:5px', width: 550, layout: 'form', defaults: { msgTarget: 'side' }, items: [ { xtype: 'textfield', fieldLabel: 'Name', name: 'name', anchor: '95%', allowBlank: false }, { xtype: 'textfield', fieldLabel: 'Email', name: 'email', anchor: '95%', vtype: 'email' }, { xtype: 'textfield', fieldLabel: 'Web page', name: 'webPage', vtype: 'url', anchor: '95%' }, { xtype: 'textarea', fieldLabel: 'Comments', name: 'comments', anchor: '95%', height: 150, allowBlank: false }], buttons: [{ text: 'Send' }, { text: 'Cancel' }] }); commentForm.render(document.body);}); How it works... The vtype configuration option specifies which validation function will be applied to the field. There's more... Validation types in Ext JS include alphanumeric, numeric, URL, and email formats. You can extend this feature with custom validation functions, and virtually, any format can be validated. For example, the following code shows how you can add a validation type for JPG and PNG files: Ext.apply(Ext.form.VTypes, { Picture: function(v) { return /^.*.(jpg|JPG|png|PNG)$/.test(v); }, PictureText: 'Must be a JPG or PNG file';}); If you need to replace the default error text provided by the validation type, you can do so by using the vtypeText configuration option: { xtype: 'textfield', fieldLabel: 'Web page', name: 'webPage', vtype: 'url', vtypeText: 'I am afraid that you did not enter a URL', anchor: '95%'} See also... The Specifying the required fields in a form recipe, covered earlier in this article, explains how to make some form fields required The Setting the minimum and maximum length allowed for a field's value recipe, covered earlier in this article, explains how to restrict the number of characters entered in a field The Changing the location where validation errors are displayed recipe, covered earlier in this article, shows how to relocate a field's error icon Refer to the previous recipe, Deferring field validation until form submission, to know how to validate all fields at once upon form submission, instead of using the default automatic field validation The next recipe, Confirming passwords and validating dates using relational field validation, explains how to perform validation when the value of one field depends on the value of another field The Rounding up your validation strategy with server-side validation of form fields recipe (covered later in this article) explains how to perform server-side validation Confirming passwords and validating dates using relational field validation Frequently, you face scenarios where the values of two fields need to match, or the value of one field depends on the value of another field. Let's examine how to build a registration form that requires the user to confirm his or her password when signing up. How to do it… Initialize the QuickTips singleton: Ext.QuickTips.init(); Create a custom vtype to handle the relational validation of the password: Ext.apply(Ext.form.VTypes, { password: function(val, field) { if (field.initialPassField) { var pwd = Ext.getCmp(field.initialPassField); return (val == pwd.getValue()); } return true; }, passwordText: 'What are you doing?<br/>The passwords entered do not match!'}); Create the signup form: var signupForm = { xtype: 'form', id: 'register-form', labelWidth: 125, bodyStyle: 'padding:15px;background:transparent', border: false, url: 'signup.php', items: [ { xtype: 'box', autoEl: { tag: 'div', html: '<div class="app-msg"><img src="img/businessman add.png" class="app-img" /> Register for The Magic Forum</div>' } }, { xtype: 'textfield', id: 'email', fieldLabel: 'Email', allowBlank: false, minLength: 3, maxLength: 64,anchor:'90%', vtype:'email' }, { xtype: 'textfield', id: 'pwd', fieldLabel: 'Password', inputType: 'password',allowBlank: false, minLength: 6, maxLength: 32,anchor:'90%', minLengthText: 'Password must be at least 6 characters long.' }, { xtype: 'textfield', id: 'pwd-confirm', fieldLabel: 'Confirm Password', inputType: 'password', allowBlank: false, minLength: 6, maxLength: 32,anchor:'90%', minLengthText: 'Password must be at least 6 characters long.', vtype: 'password', initialPassField: 'pwd' }],buttons: [{ text: 'Register', handler: function() { Ext.getCmp('register-form').getForm().submit(); }},{ text: 'Cancel', handler: function() { win.hide(); } }]} Create the window that will host the signup form: Ext.onReady(function() { win = new Ext.Window({ layout: 'form', width: 340, autoHeight: true, closeAction: 'hide', items: [signupForm] }); win.show();

Introduction In this article we will discuss some simple promotion techniques that will make it easy for you and your site's users to bring in visitors to their blogs. You will learn how to offer RSS feeds that interested visitors can subscribe to, and how to "converse" with other bloggers via trackbacks. You will also learn how to use pings to tell blog directories that your blog has been updated and how to promote your blog on Twitter. Improved tagging Tags are a way to label content to make it easier to find later. Tags are a complement to the traditional "categories" way of organizing things. Blog owners can label a post with tags that describe the important content, making it easier for visitors and search engines to find those posts at a later date. You can add as many tags as you wish to a post, giving you extra freedom to tag subjects even if you don't think you'll be posting on that topic regularly. In this way, tags are less restrictive than categories. As an example, one of our Slayers may write a blog post on the Impending Apocalypse of 2009, where stuffed toys come to life and attempt to kill their owners. If this apocalypse was quickly averted, they may write only one blog post about it, which would be posted under the "Impending Apocalypses" category. There's no point making an entire new category for strange happenings surrounding stuffed toys, as it's unlikely to be a subject that would see many posts, but tagging the post with "apocalypse" and "stuffed toys" would help if any future Slayers encountered killer teddy bears at some point in the future. Time for action – tagging blog posts WordPress MU does have a simple, built-in form of tagging system, but it isn't very convenient to use, and many users may decide it's too much trouble to add new tags and figure out which tags to mark each blog post with. Let's offer them a more convenient and nicer looking way of doing things. Download WP Auto Tagger from http://wordpress.org/extend/plugins/wp-auto-tagger/. Upload the contents of the ZIP file to your /wp-content/plugins directory. Enable the WP-Auto Tagger Plugin on your main blog via the Site Admin panel. Try creating a new post on the main blog. Beside the main post entry box you should see some new tag tools. Clicking on the Suggest Tags button should give you a list of appropriate tags. Submit the post and then look at the main blog. You should see some tags on the front page and tags on your new post, too. Using Plugin Commander, enable the plugin for your users. Suggest tags not working?If you get the curl not enabled message when you click on suggest tags or you simply see no suggested tags appear, you will need to have your web host enable curl for you. Some web hosts disable lib-curl by default because of security concerns, but most are willing to enable it if requested to do so. What just happened? We have set up an improved tagging system that our users may find very useful. The plugin will read new blog posts and suggest tags for them, saving our users the hassle of typing out tags for each post. Of course, our users can choose to type out the tags by hand if they prefer and can delete any tags that the plugin suggests if they don't like them; however, they should find that they get some very useful inspiration from the suggest tags feature. SlayerCafe displays a list of tags on the right-hand side of the blog. Tags that appear frequently show in a bigger font than tags that are used less often. This gives visitors an overview of the main focus of each blog. Sitewide tags Now that you have tags displaying for each individual user blog, let's offer a page with a tag cloud, which includes tags from all the blogs on the site. Time for action – sitewide tag clouds Download the WordPress MU Sitewide Tags application from http://wordpress.org/extend/plugins/wordpress-mu-sitewide-tags/ Upload the plugin to your /wp-content/plugins folder. Enable the plugin via the Site Admin panel. Go to Site Options, scroll down to the bottom of the page, and check the Tags Blog box to enable tags. Check the Tags can be indexed by Search Engines box. Make a post or two on your test blogs, and then visit the tags subdomain for your site; you should see something like this: What just happened? We have just set up an improved tagging system for our users. The WP Auto Tagger plugin pulls out words that it thinks are important from blog posts and uses them as tags. The plugin isn't perfect and it does sometimes come up with silly suggestions, but users can remove tags that they don't want, or replace them with their own. The Auto Tagger plugin ensures that even users who don't take the time to pick out their own tags will still have the option on of having some kind of tagging system. Why is this important? Well, think ahead to this time next year—imagine how many posts the average user will have on their blog. Now imagine trying to find those posts by category. Athena may have made a post on SlayerCafe about the apocalypse that Watcherlicious almost caused when she read the wrong spell from the Dark Magikus book, but finding that post in the category "Impending Apocalypses" would be a time-consuming task when you consider that Athena fights to stop an apocalypse almost every week! If Athena used a tagging system, then it is likely that this particular apocalypse related post would have been tagged with "Watcherlicious" and with "Dark Magikus", making it much easier to find. We also set up a sitewide tagging system. This adds a stream of all new posts to a central blog. Watchers can keep an eye on this blog to see what's happening on a broader level, that is, what are people talking about and what are the most important issues. The most commonly appearing tags appear in a bolder, bigger font. You can see that at the moment our biggest theme is Slayers. Obviously, there's not much exciting happening on the vampire slaying front at the moment, as the Slayers are just talking amongst themselves about general slayer stuff . If the theme of conversation suddenly changed to "demonic robots", then that tag would appear prominently and the Watchers would know very quickly that there is a global demonic robot problem. The sitewide tags page is useful from a search engine perspective too, as it presents the most recent content to the search engines in one convenient place. Have a go hero – styling the tags page Our tags page at the moment looks just like a normal blog and has a rather boring name—tags.slayercafe.com. You can rename the tags page in the Site Options panel on the main blog. A better name might be "pulse" or "live-stream". The default setting indexes the last 5000 posts. This number can be changed, but don't set it too high as it could tax the server. Try customizing the layout of the Tags blog. The blog network's admin account can be used to log into the Tags blog's admin panel so that you can change the theme and make some other tweaks such as adding widgets. If you want to take things a step further, take a look at http://www.wordpress.com/tags. Here you can see a great example of a streamlined "what's hot on our network" tags page. You may have noticed that the Tags blog appears under Recent User Posts, so new posts appear twice—once by the original poster and once under Tags. Check the blog ID number of the Tags blog, and try changing the code we created earlier so that the posts to the Tags blog don't display. Using pings WordPress MU is set up to ping a service called Ping-o-Matic when new posts are made. This service is useful for English language blogs and for bloggers in America in particular because most of the services that Ping-o-Matic works with are U.S. centric. But there are other services that may be more suitable for bloggers in other countries or even blogs in specific niches. Let's look at ways to add extra ping services to our list of sites to ping for each blog. Time for action – pings Open up /wp-admin/includes/schema.php Find the line that says add_option('ping_sites', 'http://rpc.pingomatic.com/'); Change that line so that it reads add_option('ping_sites', "http://rpc.pingomatic.com/nhttp://rpc.NEWPINGSITE.TLD"); You can add multiple sites as long as you separate each URL with a n. Save and upload the file. Any future blogs will be created with the new ping sites set in Site Options. You can update existing sites either via MySQL or by using the Site Admin panel. What just happened? We have added a few extra sites to the list of ping services that will be notified when a new post is made. A ping is an example of a push mechanism. Instead of blog aggregation services having to look at all the blogs, they are listed to see which ones have new content. The blogs themselves inform the aggregators that they have been updated by sending them a ping. Ping-o-Matic is a service that receives pings and then passes them on to multiple servers. This reduces the amount of servers you have to ping, saving you time when you publish an article. However, Ping-o-Matic may not cover every site you would want to ping. We have added only two sites to the ping list— WhiteWiccaBlogs and TheWatcherNetwork. We don't want to draw too much attention from normal people on sites such as NewsNow or the My Yahoo service. Try to keep the number of individual sites you ping to a minimum. Not only is there a possibility that pinging huge numbers of sites could make adding posts take longer, pinging sites that are outside the topic of your blog is unlikely to get you any valuable traffic. It is better to focus on gaining visits from people who are actually interested in your blog network's subject. For an English language blog, using Ping-o-Matic, Technorati , and Google would be a good start. If your network is aimed at people who speak a different language, pinging local news aggregators would be a good idea. Have a go hero – more sites to ping Take a look at the list of sites in the following table, and think about the type of blog you have and the people you want to reach. The sites in the table are very general ones. You may find that there are aggregator services out there for your niche—be that houses in Singapore, computer games, or travel. A Google search for "keyword aggregator" should help you find the right kind of sites. Once you've chosen the sites you would like to ping, remember that each URL is separated by the characters n and you need to surround the entire list in double quotes (" "), not single ones (' '). Site URL FeedBurner http://ping.feedburner.com My Yahoo http://api.my.yahoo.com/rss/ping Syndic8 http://ping.syndic8.com/xmlrpc.php Myblog.jp (Japanese) http://ping.bloggers.jp/rpc/ Newsgator http://rpc.newsgator.com/ Blogg.de (German) http://xmlrpc.blogg.de/ Blogshares.com http://www.blogshares.com/rpc.php

Loading form data from the server An important part of working with forms is loading the data that a form will display. Here's how to create a sample contact form and populate it with data sent from the server. How to do it... Declare the name and company panel: var nameAndCompany = { columnWidth: .5, layout: 'form', items: [ { xtype: 'textfield', fieldLabel: 'First Name', name: 'firstName', anchor: '95%' }, { xtype: 'textfield', fieldLabel: 'Last Name', name: 'lastName', anchor: '95%' }, { xtype: 'textfield', fieldLabel: 'Company', name: 'company', anchor: '95%' }, { xtype: 'textfield', fieldLabel: 'Title', name: 'title', anchor: '95%' } ]} Declare the picture box panel: var picBox = { columnWidth: .5, bodyStyle: 'padding:0px 0px 0px 40px', items: [ { xtype: 'box', autoEl: { tag: 'div', style: 'padding-bottom:20px', html: '<img id="pic" src="' + Ext.BLANK_IMAGE_URL + '" class="img-contact" />' } }, { xtype: 'button', text: 'Change Picture' } ]} Define the Internet panel: var internet = { columnWidth: .5, layout: 'form', items: [ { xtype: 'fieldset', title: 'Internet', autoHeight: true, defaultType: 'textfield', items: [{ fieldLabel: 'Email', name: 'email', vtype: 'email', anchor: '95%' }, { fieldLabel: 'Web page', name: 'webPage', vtype: 'url', anchor: '95%' }, { fieldLabel: 'IM', name: 'imAddress', anchor: '95%' }] }]} Declare the phone panel: var phones = { columnWidth: .5, layout: 'form', items: [{ xtype: 'fieldset', title: 'Phone Numbers', autoHeight: true, defaultType: 'textfield', items: [{ fieldLabel: 'Home', name: 'homePhone', anchor: '95%' }, { fieldLabel: 'Business', name: 'busPhone', anchor: '95%' }, { fieldLabel: 'Mobile', name: 'mobPhone', anchor: '95%' }, { fieldLabel: 'Fax', name: 'fax', anchor: '95%' }] }]} Define the business address panel: var busAddress = { columnWidth: .5, layout: 'form', labelAlign: 'top', defaultType: 'textarea', items: [{ fieldLabel: 'Business', labelSeparator:'', name: 'bAddress', anchor: '95%' }, { xtype: 'radio', boxLabel: 'Mailing Address', hideLabel: true, name: 'mailingAddress', value:'bAddress', id:'mailToBAddress' }]} Define the home address panel: var homeAddress = { columnWidth: .5, layout: 'form', labelAlign: 'top', defaultType: 'textarea', items: [{ fieldLabel: 'Home', labelSeparator:'', name: 'hAddress', anchor: '95%' }, { xtype: 'radio', boxLabel: 'Mailing Address', hideLabel: true, name: 'mailingAddress', value:'hAddress', id:'mailToHAddress' }]} Create the contact form: var contactForm = new Ext.FormPanel({ frame: true, title: 'TODO: Load title dynamically', bodyStyle: 'padding:5px', width: 650, items: [{ bodyStyle: { margin: '0px 0px 15px 0px' }, items: [{ layout: 'column', items: [nameAndCompany, picBox] }] }, { items: [{ layout: 'column', items: [phones, internet] }] }, { xtype: 'fieldset', title: 'Addresses', autoHeight: true, hideBorders: true, layout: 'column', items: [busAddress, homeAddress] }], buttons: [{ text: 'Save' }, { text: 'Cancel' }]}); Handle the form's actioncomplete event: contactForm.on({ actioncomplete: function(form, action){ if(action.type == 'load'){ var contact = action.result.data; Ext.getCmp(contact.mailingAddress).setValue(true); contactForm.setTitle(contact.firstName + ' ' + contact.lastName); Ext.getDom('pic').src = contact.pic; } }}); Render the form: contactForm.render(document.body); Finally, load the form: contactForm.getForm().load({ url: 'contact.php', params:{id:'contact1'}, waitMsg: 'Loading'}); How it works... The contact form's building sequence consists of defining each of the contained panels, and then defining a form panel that will serve as a host. The following screenshot shows the resulting form, with the placement of each of the panels pinpointed: Moving on to how the form is populated, the JSON-encoded response to a request to provide form data has a structure similar to this: {success:true,data:{id:'1',firstName:'Jorge',lastName:'Ramon',company:'MiamiCoder',title:'Mr',pic:'img/jorger.jpg',email:'ramonj@miamicoder.net',webPage:'http://www.miamicoder.com',imAddress:'',homePhone:'',busPhone:'555 555-5555',mobPhone:'',fax:'',bAddress:'123 Acme Rd #001nMiami, FL 33133',hAddress:'',mailingAddress:'mailToBAddress'}} The success property indicates whether the request has succeeded or not. If the request succeeds, success is accompanied by a data property, which contains the contact's information. Although some fields are automatically populated after a call to load(), the form's title, the contact's picture, and the mailing address radio button require further processing. This can be done in the handler for the actioncomplete event: contactForm.on({ actioncomplete: function(form, action){ if(action.type == 'load'){} }}); As already mentioned, the contact's information arrives in the data property of the action's result: var contact = action.result.data; The default mailing address comes in the contact's mailingAddress property. Hence, the radio button for the default mailing address is set as shown in the following line of code: Ext.getCmp(contact.mailingAddress).setValue(true); The source for the contact's photo is the value of contact.pic: Ext.getDom('pic').src = contact.pic; And finally, the title of the form: contactForm.setTitle(contact.firstName + ' ' + contact.lastName); There's more... Although this recipe's focus is on loading form data, you should also pay attention to the layout techniques used—multiple rows, multiple columns, fieldsets—that allow you to achieve rich and flexible user interfaces for your forms. See Also... The next recipe, Serving the XML data to a form, explains how to use a form to load the XML data sent from the server.

Media Manager As its name suggests, the Media Manager is the place to keep track of and organize all your media files within folders and subfolders. You can use it to upload files, delete old material, or create new folders. Accessing and using the Media Manager The interface within the Media Manager is graphical and similar to other file explorer programs you will have definitely used within a Windows environment. Like any of the sections of the administration control panel, you can access the Media Manager either by: Clicking Site | Media Manager from the top menu Clicking the Media Manager icon on the Control Panel You can switch your view of the files within the Media Manager to suit your preference, as both provide the same level of functionality: Click Thumbnail View to see small graphic versions of your files, handy when you want to find an image Click Detail View to see the names of your files along with the dimensions and sizes The following screenshot illustrates the use of the thumbnail view: The Folders section to the left of the Media Manager interface displays the site folders. Click one to open and reveal any subfolders within it. Within your site there will most likely be a subfolder within the images folder called stories, that is, images | stories. This is generally where the site images will have been placed and is where the Image Upload button defaults to when you add an image to an Article. You can also create new folders in here to store additional media. Using the Party People website, we have created a new article and now need to add an image that doesn't fit in with the established folder structure. Creating a new subfolder It may be that after adding a new Section and/or Category, none of the existing image folder structures apply. Here we'll create a new subfolder called glassware to accommodate the new material: Navigate to the Media Manager through the top menu or by clicking the Media Manager icon on the home page of the Control Panel. Click on the stories folder in the Media Manager. Note that the Media Manager opens directly into the images folder (this is set in the Global Configuration area and can be changed if necessary). Type in glassware as the name of the new folder and click the Create Folder button. The new subfolder will appear instantly. Now that we have the new glassware subfolder we can upload a new image to store in it using the Upload File tool. A note on copyright While you may have your own images and videos to use on your website, if you are considering using another artist's material and content, always ensure you have copyright permission or the license to do so in order to avoid breach of any copyright laws. You should refer to your local authority for full details. Many website developers and owners regularly purchase and use stock photography, illustrations, and videos. If you choose to purchase any material for your site, ensure you are purchasing it with the right license, as there may be restrictions on its use even after paying for the material. This may, in fact, be a license fee and not a transfer of complete ownership. Sites such as http://www.istockphoto.com/license.php have a page dedicated to licensing agreements around purchasing their material. What you should know about image and video files Have you ever visited a website where a large image takes forever to download? Or the video takes forever to start playing? Chances are that you gave up and left the site. While it doesn't happen quite so much now, take care to avoid this wherever possible. As a general rule, the larger the file size, the longer it takes to download into the browser, and not all users of your website may have fast download speeds. To ensure your images are downloaded as quickly as possible, ensure your files are formatted and compressed into as low a resolution version as possible (without losing the quality) and the dimensions of the videos displayed kept to minimum viewing sizes. There is a trade-off between quality of the image and download speed; compromise is the key here. Audio, video, and animation files can be referred to collectively as multimedia, especially when they are combined within a project. Choosing the best image file format Images come in a variety of file formats and some are smaller in size than others. There are other image file formats, but the following are often used within websites: .jpg files are great for highly detailed images such as photographs. As a result, their file size is generally bigger due to the amount of information they require to present the detail. .gif files are suited to images requiring less detail, such as drawings or diagrams, and are smaller in file size as a result. .png files are similar to .gif files, as they are also low resolution images. They often have a transparent background so you can place them over a colored background and the color will appear behind the image. Remember the following when applying images to your website: Use images with a purpose—to enhance or illustrate your content. Keep file sizes as small as possible. Consider a .gif rather than a .jpg if the image isn't a particularly detailed one. Use photo editing software to reduce the resolution of your image to 72dpi for fastest download time. Anything higher is pointless, as computer monitors only present a certain number of colors and drop the excess. If you don't have access to software such as Photoshop, there are a number of free possibilities. One is a program called GIMP (http://www.gimp.org). It's a free program that allows you to retouch photos and create and edit images. The website has tutorials as well. Adding and managing images Having covered editing and adding text to an article, updating and/or adding new images or other media to your articles is easy too. In this section, we'll work on adding and deleting images and cover some general information on how they can work best for your site. Uploading a new image The File Upload tool within the Media Manager makes it easy to move your images from your computer into your website folders. Select the new glassware subfolder within the Folders structure. This places us in that folder. Click the Browse button under the Upload File section. Navigate to the image file in the pop-up window and click Open. Click the Start Upload button back in the Media Manager. Now we have an image within the glassware folder, it's ready to be used within anarticle. Note that the following screenshot presents the Details View. Deleting an image You might find that as your website consumes more space on the server, you may have to delete some image files. However, be careful doing this, as you don't get a warning! Ensure your site does not require the image anymore, as you will end up with a blank area with a red square in it where the image should be, and that looks unprofessional. Using Thumbnail View within the Media Manager, select the checkbox under the image thumbnail or next to the filename. Click the red "x" icon next to it in order to immediately delete that file, as shown in the following screenshot. You can also use the Delete button in the contextual toolbar at the top right. Updating a Simple Image Gallery Rather than a single image, you might have an article with a Simple Image Gallery embedded within it that presents a selection of thumbnail images to the browser through the article. The gallery plugin parameters can be accessed through the Extensions | Plugins menu along the top of the administration interface. The following screenshot is an example of how one looks on the Party People website. Using the Party People website, we'll update this New Balloons in Stock Now! gallery applying the Balloons folder we made earlier. However, remember that the authors of this plugin recommend only 16 to 20 images per gallery. Navigate to the Media Manager and to the balloons folder. Upload the additional images to the balloons folder using the File Upload tool as outlined in the Uploading a file section of this article. Delete any outdated images, if necessary, by selecting them and clicking the Delete button, as outlined in the Deleting a File section of this article. To display the new images from a different folder in the article, we will need to access the article through which the gallery is presented: Navigate to the Article Manager and open the article containing the gallery of images. You will see something like the following code within the Article's text editor: {gallery}galleryNameIsHere{/gallery} Change this to balloons as in the folder where the balloon images are kept. The following screenshot illustrates the code snippet where you should change the folder name. Apply your changes and review them before going live. Changing the Simple Image Gallery's dimensions If the dimensions of the image gallery, such as the height and width, need to be changed, there are the following steps: Navigate to the Extensions menu using the global menu at the top of the screen. Select Plugin Manager from the drop-down list and navigate through the list until you see the Simple Image Gallery Plugin link in the list. To make this quicker, use the Select Type filter and choose Content. Ensure this plugin is enabled in the Plugin Manager. Click the link to view the parameters for this plug-in; change them as you like. Note that your developer may have changed the name of the module when it was installed. >> Continue Reading Managing Images and Videos in Joomla! 1.5: Part 2 [ 1 | 2 ]  

  Before activities aim at motivating students to listen and getting them to anticipate texts and focus on key vocabulary in advance. Forum and Mindmap are two modules which enable us to do this. During activities focus on the detail of the text and include listening and matching, gap-fill, ordering tasks, identifying attitude, and summarizing tasks. Quiz and Lesson modules are well suited to this. After activities get students to review and evaluate texts they have listened to. Forum and Questionnaire are good for this purpose. The article is organized as follows: Activity and ease of setup Focus Module Description 1  * Before listening Forum and Mediacenter Students discuss recordings they would like to hear. 2  *   Mindmap Students brainstorm ideas or vocabulary. 3  *** During listening Quiz Students answer gist and detailed questions about recordings. 4  ***   Lesson Students predict text in recordings. 5  * After listening Choice Students vote on recordings. 6  ***   Questionnaire Students review and evaluate the content of recordings 7  *   Forum Students discuss recordings. Since there are various ways we can use Moodle to help students, the introduction to this article looks in detail at the types of players we can use. There is also some guidance on the range of sources of listening material available on the Internet. The final section in the introduction demonstrates how we can show and hide text on Moodle pages while students listen. Players This article offers four main ways of presenting listening material. Built-in Flash player: Recordings have to be made on an external recording program, such as Audacity. You need to do some simple editing of the HTML code on your pages, but it doesn't require any add-on modules and the player fits neatly into the page: The player usefully includes a pause facility. Mediacenter: This podcast player requires the add-on Inwicast module. It allows you to include high-quality recordings whose length is limited only by the maximum upload settings as set in the administration panel. The player is again simple and attractive: Mediacenter helps you organize recordings in one place. Recordings can be used in a variety of formats, such as Flash-FLV, MP4 and MOV, WMV and MP3. If your recording equipment records in another format, such as WAV, for example, you can use tools like Audacity to convert the audio format if necessary. You might find it useful to convert from WAV to MP3 format, which works in Mediacenter. Mediacenter also allows you to link to remote files on other websites. NanoGong player: This requires the add-on NanoGong module. It's well worth including in your Moodle setup, as it allows simple recording and playback on most HTML pages within Moodle. The major constraints as far as Moodle is concerned are the time limit of 2 minutes per recording and the lower recording quality. However, for ease of use and convenience, it's suitable for many of the activities. Embedded flash video players: You can embed Flash video players in Moodle HTML pages by pasting embed code from the source site on your page. Embed, here, means insert it into the page. You must check that there are no copyright issues when you embed video. Some sites allow it, some don't. Some request that you seek permission first. Since the video is sourced from another website, you are using its bandwidth as well as its content. So it is doubly right that you seek permission. Sources of listening material It's worth considering the range of sources of listening materials available. The following are the typical sources: You Your students Your colleagues Local interviewees, such as friends and professionals. You could approach representatives of local services, such as the police or tourist services, and ask if you can make short interviews. Recordings of local announcements from railway stations or airports Internet recordings Websites, such as Woices (http://woices.com) and voicethread (http://voicethread.com/), which combine audio with maps and images Activity 1 has an extended list of listening sources. Recording speed One of the many useful features of Audacity is that it allows us to reproduce recordings at different speeds without the pitch changing. It's well worth including slower recordings if you think your students will benefit from it. Presentations could include two recordings: the first one at a slower speed; the second at a faster, more natural speed. Alternatively, you could start with a recording at a natural speed and make slower speed versions available for students who need remedial help. You can use Audacity to record from the Internet (also known as grabbing). Showing the text before listening In many of the activities, you might want to create a facility for allowing students to see text before and/or after they hear it. Here is a simple way of doing that using ALT tags (Computer-speak for Alternative text). First, prepare a small GIF image that students will hover their mouse cursor over to see the text. In case you don't know, GIF is one of the formats you can save an image in. Other formats you may have heard of are JPG and PNG. You can do that using a simple graphic program like Paint. Alternatively, you can copy this pink square image from http://moodleforlanguages.co.uk/images/pinksquare.gif. To do that, right-click (or Ctrl+click on a Mac) on the image and select Save Image As.... Then, in the HTML area on your Moodle activity, upload the image, and write the text you want to show in the ALT area. The HTML page will now look like this. The text you write in the Alternate text box will appear in a separate box on the screen when you hover the mouse cursor over the pink square. Web conferencingIf you have the add-on module Dimdim, you could also create live listening sessions. Activity 1: Using Forum to motivate students Aim: Help motivate students by discussing what recordings to listen to Moodle modules: Forum Extra programs: Mediacenter (optional) Ease of setup: * As with many language-learning activities, it's important to try to motivate students at the outset. In this activity, students discuss what recordings to listen to. The choice of recordings will depend on the age, interests, and language level of the students. There are thousands of sources on the Internet, many of which you can find through good search engines. Here are some examples: Source Ideas News sites You could also consider getting students to listen to and compare news from different countries. The open directory project is a good place to look: http://www.dmoz.org/News/. Media repositories Sites like YouTube and Google Video are good sources of songs, presentations, TV clips, stories, and many other recordings. Sound archives are also good places to look. Some useful sources are: http://sounds.bl.uk/; http://www.bbc.co.uk/archive/collections.shtml; http://tinyurl.com/birminghamdirectory   Poetry sites Many of these include recordings: http://poems.com/ http://www.dmoz.org/Arts/Literature/Poetry/Performance_and_Presentation/   Story sites More and more audio books are now available on the Internet often free, as with project Gutenberg: http://www.gutenberg.org/wiki/Gutenberg:The_Audio_Books_Project Discussions Public broadcast stations like DW, BBC, CBC and CNN are good sources: http://www.dw-world.de/; http://bbc.co.uk; http://www.cbc.ca/; http://www.cnn.com/services/podcasting/   Film trailers Several websites are devoted to film trailers. For example: http://www.imdb.com/Sections/Trailers/ Soap operas A search for "podcast soap opera" should provide a good catch. Documentaries Again, public broadcast stations ofter an increasingly wide range of documentaries, which you can link to via your Moodle Mediacenter: http://tinyurl.com/publicbroadcast Lectures These can be made by you, your students, or sourced from websites such as http://www.ted.com/. A search for "online lectures" will yield many more sites. Advertisements Try http://www.google.com/Top/Arts/Television/Commercials/ for a directory of advertisements.