How-To Tutorials - CMS & E-Commerce

  Building job sites with Joomla! A practical stepwise tutorial to build your professional website using Joomla!  Build your own monster.com using Joomla!  Take your job site to the next level using commercial Jobs! Extension  Administrate and publish your Joomla! job site easily using the Joomla! 1.5 administrator panel and Jobs! Pro control panel interface  Boost your job site ranking in search engines using Joomla! SEO Introduction You may have various approaches for building a jobsite, with job search and registration facilities for users and providing several services to your clients such as job posting, online application process, resume search, and so on. Joomla! is one of the best approaches and an affordable solution for building your jobsite, even if you are a novice to Joomla!. This is because Joomla! is a free, open source Content Management System (CMS) , which provides one of the most powerful web application development frameworks available today. These are all reasons for building a jobsite with Joomla!: It has a friendly interface for all types of users—designers, developers, authors, and administrators. This CMS is growing rapidly and improving since its release. Joomla! is designed to be easy to install and set up even if you're not an advanced user. Another advantage is that you need less time and effort to build a jobsite with Joomla!. You need to use a Joomla! jobsite extension to build your jobsite and you can use the commercial extension Jobs! because it's fully equipped to operate a jobsite, featuring tools to manage jobs, resumes, applications, and subscriptions. If you are looking for a jobsite such as Monster, Career Builder, a niche jobs listing such as Tech Crunch, or just posting job ads on your company site, Jobs! is an ideal solution. To know more about this extension, visit its official website http://www.instantphp.com/ Jobs! has two variations—Jobs! Pro and Jobs! Basic . The Jobs! Pro provides some additional features and facilities, which are not available in Jobs! Basic. You can use any one of them, depending upon your needs and budget. But if you need full control over your jobsite and more customization facilities, then Jobs! Pro is recommended. You can install Jobs! component and its modules easily, like any other Joomla! extension. You need to spend only a few minutes to install and configure Joomla! 1.5 and Jobs! Pro 1.3 or Jobs! Basic 1.0. It is a stepwise setup process. But first you must ensure that your system meets all the requirements that are recommended by developers. Prerequisites for installation of Joomla! 1.5 and Jobs! Joomla! is written in PHP and mainly uses MySQL database to store and manipulate information. Before installing Joomla! 1.5 and Jobs! extension, we need a server environment, that includes the following:     Software/Application Minimum Requirement Recommended Version Website PHP 5 5.2 http//php.net MySQL 4.1 or above 5 http://dev.mysql.com/downloads/mysql/5.0.html Apache 1.3 or above   http://httpd.apache.org IIS 6 7 http://www.iis.net/ mod_mysql mod_xml mod_zlib       You must ensure that you have the MySQL, XML, and zlib functionality enabled within your PHP installation. This is controlled within the php.ini file. Setting up a local server environment In order to run Joomla! properly, we need a server environment with pre-installed PHP and MySQL. In this case, you can use a virtual server or can choose other hosting options. But if you want to try out Joomla! on your own computer before using a remote server, we can set up a local server environment. To set up a server environment, we can use XAMPP solution. It comes equipped with Apache HTTP server, PHP, and MySQL. Installing these components individually is quite difficult and needs more time and effort. To install XAMPP, download the latest version of XAMPP 1.7.x from the Apache friends website: http://www.apachefriends.org/en/xampp.html. Windows operating system users can install XAMPP for Windows in two different variations—self-extracting RAR archive and ZIP archive. If you want to use self-extracting RAR archive, first download the .exe file and then follow these steps: Run the installer file, choose a directory, and click on the Install button. After extracting XAMPP, the setup script setup_xampp.bat will start automatically. After the installation is done, click on Start All Programs | Apache Friends | XAMPP | XAMPP Control Pane|. Start Apache and MySQL by clicking on the Start buttons beside each item. If prompted by Windows Firewall, click on the Unblock button.For more information on installing XAMPP on Windows or troubleshooting, go to the Windows FAQs page: http://www.apachefriends.org/en/faqxampp- windows.html. If you are using Linux platform, download the compressed .tar.gz file and follow these steps for installation: Go to a Linux shell and log in as the system administrator root: su Extract the downloaded archive file to /opt: tar xvfz xampp-linux-1.7.3a.tar.gz -C /opt XAMPP is now installed in the /opt/lampp directory. To start XAMPP, call the command: /opt/lampp/lampp start You should now see something similar to the following on your screen: Starting XAMPP 1.7.3a... LAMPP: Starting Apache... LAMPP: Starting MySQL... LAMPP started.   For more information on installing XAMPP on Linux or troubleshooting, go to the Linux FAQs page: http://www.apachefriends.org/en/faq-xampp-linux.html. If you want to use XAMPP in MAC operating system , download the .dmg file and follow these steps: Open the DMG-Image. Drag and drop the XAMPP folder into your Applications folder. XAMPP is now installed in the /Applications/XAMPP directory. To start XAMPP open XAMPP Control and start Apache and MySQL. After installation of XAMPP in a system, to test your installation, type the following URL in the browser: http://localhost/. You will see the XAMPP start page. Uploading installation packages and files to server Now, we need to copy or transfer Joomla! installation package files to server. Before copying the installation package, we must download Joomla_1.5.15-Stable-Full_ Package.zip from the webpage http://www.joomla.org/download.html, and then extract and unzip it. You can use WinZip or WinRAR to unzip these files. After unzipping the files, you have to copy files on your server root folder (for Apache, it is htdocs folder). If you are not using the XAMPP or local server environment, you need the File Transfer Protocol (FTP) software to transfer files to your server root folder, such as htdocs or wwwroot. The popular FTP software is FileZilla, which is absolutely free and available for different platforms, including Windows, Linux, and Mac OS. You can get it from the website http://filezilla-project.org/. Creating database and user Before installing and configuring Joomla! and Jobs! extension, we also need to create a database and a database user. You can easily add a new database and any user by using phpMyAdmin in XAMPP server environment. To add a database, by using phpMyAdmin, you must follow the following steps: Type the address http://localhost/phpmyadmin in the web browser. The front page of phpMyAdmin will be displayed. Type a name for the database you want to create. For example, my_db in the Create new Database field and then click on the Create button to create the database. To be connected with the database, we need a user account. You can add a user account by clicking on the Privileges tab of phpMyAdmin. You will see all users' information. Click on Add a new User link of Privileges window. After clicking on the link, a new window will appear. Provide the required information in the Login Information section of this window and then click on the Go button. We have now completed the preparation stage of installing Joomla!.

  Building job sites with Joomla! A practical stepwise tutorial to build your professional website using Joomla!  Build your own monster.com using Joomla!  Take your job site to the next level using commercial Jobs! Extension  Administrate and publish your Joomla! job site easily using the Joomla! 1.5 administrator panel and Jobs! Pro control panel interface  Boost your job site ranking in search engines using Joomla! SEO Read more about this book (For more resources on Joomla!, see here.) Joomla! is a popular content management system, so it is mainly used for managing content. You can manage content from the Joomla! backend administrator panel. To go to this area, type in your web browser, the address of the server directory where the administrator folder is located. For example, if you have installed Joomla! in the joomla directory of local server, then the address is:http://localhost/ joomla/administrator. You will see the Joomla! Administration Login screen in your browser window. Log into the administrator panel as Super Administrator. By default, the username is admin. Then provide the password that you have created while you were configuring. Before adding an article as content, you must create a section and category for it. You can organize your content by using sections and categories because Joomla! uses a three-tier organization level for articles—Section | Category | Article. Any section contains one or more categories, and each category may have articles assigned to it. One article can only be in one category and section. You can easily add new sections, edit existing sections, publish or unpublish any section, and copy or delete sections from the Section Manager window. To manage sections, click on Contents | Section Manager (as shown in the following screenshot): The process of managing categories is quite similar to managing sections. You just need to click on Contents | Category Manager to go to Category Manager window and then manage your categories. After creating section and category, to add a new article from admin panel, click on Contents | Article Manager (as shown in the following screenshot): To add a new article, click on the New button in the Article Manager window and write your article with a title in Article: [New] window WYSISWYG editor area. You must also define the section and category for this article—which you have created earlier—and save this content. If you want to edit an article, select the article, click on Edit, and then make any changes in the article in Article: [Edit] window. Article Manager enables you to publish or unpublish an article. You can send an article to trash, copy an article, move an article, and so on. Just select an article and then click on the corresponding buttons. Managing extensions Components, modules, plugins, templates, and languages are collectively known as extensions. Each of these extensions is used for specific functions: Components: It is the largest and the most complex of the extension types. When a Joomla! web page is being loaded, a component is called to render the main page body. For example, the component com_banners displays a banner in a web page. Components are divided into two parts—for the administrator and for the frontend website. Modules: It is used for page rendering and doesn't need to be linked to anything. It can contain only static HTML, image, or text. For example, mod_mainmenu and mod_banners. Plugins: These were previously known as mambots. Using a plugin allows a developer to change the way their code behaves depending upon which plugins are installed to react to an event. Templates: It is basically the design of your Joomla! website. With a template, you can change the look and the feel of your website. Templates have certain fields in which components and modules are shown. You can easily create and customize any template file. Languages: Languages can be packaged in two ways—either as a core package or as an extension package—and allow both the Joomla! core as well as third-party components and modules to be localized or internationalized. To know more about extensions, go to the Joomla! documentation page: http://docs.joomla.org/Joomla!_Extensions_Defined. You can easily manage extensions by using the Extensions menu. For example, to install or uninstall any extension, click on the menu Extension | Install/Uninstall; to manage modules, click on the Module Manager; to manage plugins, click on the Plugin Manager; to manage templates, click on the Template Manager; and to manage language, click on the Language Manager.

  WordPress Top Plugins Find and install the best plugins for generating and sharing content, building communities and generating revenue Learn WordPress plugin basics for both Macs and PCs Focuses exclusively on 100% free and open plugins Screenshots for each plugin Organized by complexity to install and manage Search Terms for automatic installation of plugins Instructions on configuring and setting up the more complex plugins Read more about this book (For more resources on WordPress see here.) CForms II By Oliver Seidel (http://deliciousdays.com) Why it's awesome: Super easy to create engaging and secure forms Why it was picked: Popularity and ease of use Manual Install URL: http://deliciousdays.com Automatic Install search term: CFORMS Geek level: Webmaster Configuration location: Top Navigation | cforms II Used in: Posts, widgets, pages WordPress lacks any methods for creating a form (beyond the comment form) to collect visitor questions, contact info, or any other type of communication data. CForms makes creating custom forms as easy as pointing and clicking. Forms can be embedded throughout your blog, including widgets, posts, and pages. CForms administration CForms is a very powerful and somewhat complex plugin, so let's take a moment to get familiar with the Administration section. Form Action is the somewhat hard-to-find Admin Actions. You will use this expandable menu to save your changes, delete, create, and back up your forms. Form Selection is how you switch between your different forms. Form Name is where you will define your form's name. This name will be used when you want to insert this form into a blog post, page, or widget. Fields are the individual inputs your form will contain. Kind of Field allows you to define a field as either a single line of text, multi-lined text, multiple-choice, captchas, file uploader, and a lot more. Add New Field will insert a new field into your form. Modifying the default form Once inside the CForms Administration, located at Settings | CForms II, you will see your "default form". This default form is the basic information needed to create a "Contact Us" form on your blog, including the field's name, e-mail, website, and message. Click the Field Sort Order icon, and drag it to reorder the field to any other position. Use the Default Value icon to specify what the field's default value should be, as well as mouse over values and error messages. Use the Delete this Field icon to remove a field from your form. Adding your form to a page, post, or widget CForms can be inserted into pages, posts, and widgets. However, the widget version is awfully wide and will most likely not look right in your sidebar. At the time of writing, there is no apparent way to modify this. Once inside the page or post editor, you will find a new icon added to your "Descriptions" toolbar. Once you click the CForms icon, you will need to select which form you would like to include. The drop-down box will contain all of the forms you currently have active. If you would rather use the coding method to insert your form, use the WP tag <!--cforms name="My Form Name"--> or the PHP tag <?php insert_cform("my form name"); ?>. Advanced CForms customizations While CForms might not be the easier form/mailer plugin available, it is hands down the most flexible. Make sure to delve into the additional options towards the bottom of the Form Manager. File upload settings If you will be using the File Upload field, you will need to provide some additional server information for it to work properly. Specifically, you will need to define where your file should be uploaded to, the maximum file sizes, and what type of files are allowed to be uploaded. Messages, text, and button label Customize your buttons, error messages, and text non-fictions for a given form. Core Form Admin / e-mail options Inside the Core Form Admin, you will be able to turn on and off the ability to track submissions in the RSS feed, set redirection rules, set start and end dates when a form will be shown. Admin e-mail message options Configure the e-mail message that will be sent to the administrator, once a user submits a form—including setting which e-mail address to send to, the header and footer html, and the from e-mail address. Auto confirmation Automatically send your visitor a confirmation e-mail, once they submit a form by clicking the Activate Auto confirmation link. Through this option, you will be able to configure the subject and message to send, the moment a form is submitted. Multi-part / multi-page forms Create multiple page forms by activating the Multi-part form option. Once activated, the Multi-part forms panel will allow you to define what step the current form in your process is, along with the ability to add back and next buttons. Tell-A-Friend form support The Tell-A-Friend field must be activated before you can leverage it. Once activated, you will have a new field type called "tell-a-friend". This "field" is actually multiple fields that are required to tell a friend about a given web page. WP comment feature You can actually replace WordPress' comment system with CForms. This might be helpful if you would like to customize the fields that a user can submit on a comment, or if you want the user to be able to send the author an e-mail opposed to a public comment. Third-party read-notification support CForm offers integration with notification services readnotify.com and didtheyreadit.com to notify you if a user reads your e-mail. These services might cause your e-mails to be triggered as spam. MapPress—Google maps By Chris Richardson (http://wphostreviews.com) Why it's awesome: Easily hack together some neat mashups on Google's dime Why it was picked: Popularity, ease of setup Manual Install URL: http://wordpress.org/extend/plugins/mappress-google-maps-for-wordpress/ Automatic Install search term: Mappress Geek level: Newbie Configuration location: Settings | MapPress Used in: Posts, pages MapPress makes it easy to insert custom Google Maps into your blog. Once installed, you will have the option to add multiple locations by address or lat/long. You will need a Google Maps API-key, which can be obtained from http://bit.ly/gmap-api. Google requires users who customize maps to have an API key. This allows them to track usage and ensure that people are not using Google Maps outside the 'Terms and Conditions'. If you do not have a need for customizing the content on the map, then you could always bypass installing this plugin and use the embed code directly from Google Maps. Adding a map to a post or page You will now have a new panel titled MapPress during the editing or creation of a post/page. The MapPress panel is where you define the size of your map, and the specific points of interest.

  WordPress Top Plugins Find and install the best plugins for generating and sharing content, building communities and generating revenue Learn WordPress plugin basics for both Macs and PCs Focuses exclusively on 100% free and open plugins Screenshots for each plugin Organized by complexity to install and manage Search Terms for automatic installation of plugins Instructions on configuring and setting up the more complex plugins Read more about this book (For more resources on WordPress see here.) GD Star Rating By Milan Petrovic (http://dev4press.com/) Why it's awesome: Quickly adds ratings and ranking to your blog posts Why it was picked: Super easy to get running, offers lots of customizations Manual Install URL: http://wordpress.org/extend/plugins/gd-star-rating/ Automatic Install search term: GD Star Rating Geek level: Newbie Configuration location: Top Navigation | GD Star Rating Used in: Posts, comments, pages If you want to know what your readers like, then you need to allow them to quickly rate your individual posts and rank other readers' comments; GD Star Rating does exactly this. Don't be fooled by its deceptively simple outer shell. Those rating stars are backed by a massive administrative area that allows you to customize virtually every aspect of how a user rates your blog's content. For example, you can change how the stars look, how many times to allow users to vote, where to display ratings, and much, much more. In addition to being crazily customizable, GD Star Rating also offers awesome analytics on who's rating what, which items are popular, and virtually any other data point you could imagine. Fixing the default ratings Out of the box, GD Star Rating will include both a 10 Star Rating bar and a Thumbs Up/Thumbs Down ranking scale. Obviously, a post doesn't need both, and 10 Star Rating will work just fine for all of our blog posts. The Thumbs Up/Thumbs Down will be great for our comments. To access GD Star Rating's main settings, visit GD Star Rating | Settings. Turning off Thumbs Up/Thumbs Down on posts Uncheck the checkbox next to For Individual Posts and For Individual Pages. Turning off Star Ratings on comments Uncheck the checkbox next to For Comments for Posts and For Comments for Pages. Better Tag Cloud By Nicolas Kuttler (http://www.nkuttler.de/) Why it's awesome: It's not really awesome, just wonderfully practical and create a nicely customizable TagCloud Why it was picked: Updated often, flexibility of placement, color customizations Manual Install URL: http://wordpress.org/extend/plugins/nktagcloud/ Automatic Install search term: Better Tag Cloud Geek level: Newbie Configuration location: Settings | Better Tag Cloud Used in: Posts, pages, widgets The Tag Cloud widget that comes with WordPress is very simple. Luckily, Nicolas Kuttler took the initiative to create a wonderful replacement. Not only does Better Tag Cloud give you a new widget, it also lets you include your tag cloud in posts and pages. Use the shortcode [nktagcloud] to include Better Tag Cloud in a post or page. Yet Another Related Posts Plugin (YARPP) By Michael Yoshitaka Erlewine (http://mitcho.com/) Why it's awesome: Search engine optimization and increasing average time on site for you visitors Why it was picked: Accuracy of the relation algorithm Manual Install URL: http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/ Automatic Install search term: YARPP Geek level: Newbie Configuration location: Settings | Related Posts (YARPP) Used in: Posts Yet Another Related Posts Plugin (YARPP) helps your readers and the search engine bots to find other posts on your website that are similar to the one they are currently reading. Once installed and activated, the YARPP plugin is virtually done. Check out one of your blog posts, and see if you like the results. Below the article will be a list of similar posts to the one you're reading. While out of the box YARPP will satisfy 80 percent of the people, you should check out the YARPP settings, as it offers a ton of configuration options.

  Building Websites with ExpressionEngine 2 A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere Learn all the key concepts and terminology of ExpressionEngine: channels, templates, snippets, and more Use RSS to make your content available in news readers including Google Reader, Outlook, and Thunderbird Manage your ExpressionEngine website, including backups, restores, and version updates Written in an easy-to-follow step-by-step style, with plenty of examples and exercises Read more about this book (For more resources on ExpressionEngine, see here.) Creating templates To start with, build two templates: one for the CSS stylesheet and one that contains the HTML that defines the page structure and brings in your channel content. Since the CSS template will be used all over your website, it makes sense to put this in a separate template group called includes (which you will create). For the page itself, use the index template in the site template group. In the control panel, click on Design | Templates | Template Manager from the top menu. Then select the New Group button, located above the list of existing template groups. Call the new template group includes. Do not duplicate a group and do not make the index template your site's home page. Click Submit. Back on the Template Management screen, make sure the includes template group is selected, and then click on New Template. Call the new template site_css and select a Template Type of CSS. Leave the radio button checked to create an empty template and click Create and Edit. From the Ed & Eg site that you downloaded and extracted earlier, open style.css in a text editor such as Notepad. Copy and paste the entire file into the includes/site_css template and click on Update. Within the stylesheet, there are several references to images in the image directory. For the style to render properly, you will also need to upload all the images in the /images sub-directory (including money.jpg) to the /images sub-directory on your website. After uploading all the images, you will also need to update the paths in the stylesheet to point to this sub-directory. Within the site_css template, wherever you see url(images/imgxx.jpg), change it so that it reads url(http://localhost/images/imgxx.jpg) (replacing http://localhost/ with your website domain if you are not using a localhost environment). There should be 10 replacements in total (one for each image). When you are done, click on Update and Finished. Next, on the Template Management screen, highlight the site template group and then select the index template. If you do not have such a template group and template then go ahead and create it now. Delete everything currently in the template. Open index.html of the static Ed & Eg website in a text editor such as Notepad. Copy and paste the entire source code into the template. Since the stylesheet is no longer located in style.css, this path needs to be updated. To do this, use the ExpressionEngine stylesheet variable to indicate the includes template group followed by the site_css template that the CSS stylesheet is in. Change the line: <link href="style.css" rel="stylesheet" type="text/css"media="screen" /> to read: <link href="{stylesheet=includes/site_css}" rel="stylesheet"type="text/css" media="screen" /> Finally, click Update to save the template and browse to http://localhost/site to view the output of the template as it stands right now. It should look identical to the static index.html page (except that in ExpressionEngine, none of the links will work because you have only created one page so far). If you did not hide your index.php file as part of installing ExpressionEngine, remember that your ExpressionEngine URLs will include the additional index.php (for example, http://localhost/site will become http://localhost/index.php/site for you). Did you spot the deliberate mistake? Although, at this point, everything looks good, the content being displayed in this URL is not from your channel at all, but is what you copied and pasted from the index.html file into your site/index template. The next step is to replace this static content with the content from the website channel. Pointing your template to your channel Pointing your template to use your channel content is the step that links together everything you have done so far (creating custom fields, creating the channel, publishing content to the channel, and creating templates). In the control panel, click on Design | Templates | Template Manager from the top menu. Then select the site template group and click to edit the index template. Delete all the code from after the <div id="content"> tag to the closing </div> tag (leave these two tags in place though). Underneath the <div id="content"> line, add the following. This code says that you would like to display content from the website channel (but only one entry and only the entry with a URL title of welcome_to_our_website). {exp:channel:entries channel="website" limit="1" url_title="welcome_to_our_website"} Next, add the following line. This says that you no longer want content from the website channel. {/exp:channel:entries} In between the opening {exp:channel:entries} and closing {/exp:channel:entries} tags, add the following code. This displays the title from your entry as an <h1> header. <h1>{title}</h1> Underneath the title, add the following code to place the image from your channel entry onto the page. The {if website_image} statement means that if there is no image defined in the channel entry, do not display the img code at all. {if website_image}<img src="{website_image}"class="left" />{/if} Finally, add the following tag to display the content of your content field: {website_content} The content section should now look like: <div id="content"> {exp:channel:entries channel="website" limit="1" url_title="welcome_to_our_website"} <h1>{title}</h1> {if website_image}<img src="{website_image}"class="left" />{/if} {website_content} {/exp:channel:entries} </div> <!-- end #content --> Finally, update the page title to reflect the entry title. To do this, replace the line <title> Ed & Eg Financial Advisors </title> with the following code. Although it looks complicated, it's actually the same as the }exp:channel:entries} code in the steps above, except that all you are displaying is the {title} field and not any of the other custom fields you created. By default, the {exp:channel:entries} tag requests a lot of information from your database, which can increase the amount of time it takes to display your page. Since you are only displaying one field, the disable parameter tells ExpressionEngine not to request other information you know you do not need (including the data in your custom fields). For more information on this parameter, you can visit http://expressionengine.com/user_guide/modules/channel/parameters.html#par_disable <title>{exp:channel:entries channel="website" limit="1"url_title="welcome_to_our_website" disable="categories|category_fields|custom_fields|member_data|pagination"}{title}{/exp:channel:entries} - Ed &amp; Eg Financial Advisors</title> Click Update to save your changes and then browse to http://localhost/site to view your updated website. If everything is well, then you should not notice much difference at all, but behind the scenes, your content is now coming from your channel entry, rather than being part of your template.

  Building Websites with ExpressionEngine 2 A step-by-step guide to ExpressionEngine: the web-publishing system used by top designers and web professionals everywhere Learn all the key concepts and terminology of ExpressionEngine: channels, templates, snippets, and more Use RSS to make your content available in news readers including Google Reader, Outlook, and Thunderbird Manage your ExpressionEngine website, including backups, restores, and version updates Written in an easy-to-follow step-by-step style, with plenty of examples and exercises Read more about this book (For more resources on ExpressionEngine, see here.) Introducing Ed & Eg Ed & Eg are fictional financial advisors in Anytown, USA. They have a small website written in static HTML/CSS that describes their services and how to get in touch with them. Their website currently consists of six HTML pages, one CSS styling file, and a handful of images. Although relatively simple, neither Ed nor Eg are familiar with HTML code, so they tend not to update their website. Although this has been fine for them up to now, they want to start reaching out and interacting with existing and potential customers through their website and they have picked ExpressionEngine for the task. Soon they will see what a good choice they have made! To download their website, you can either visit http://www.packtpub.com/support and select this book from the drop-down list for the code files, or visit http://www.leonardmurphy.com/book2. Extract the EdEg directory into any directory on your computer. Once extracted, you can view the website by opening the index.html file in your browser. If the pages appear unstyled, you may not have extracted the files first. Although you can open the individual files from within the compressed directory, they will not be styled and the links will not work. The website design was adapted from a design called Pluralism from http://www.freecsstemplates.org/. The design itself is released for free under the Creative Commons Attribution License 2.5, and you can download the original design (as well as many other free CSS designs) from their website. Deciding upon an approach There are three basic ways in which you could approach converting this site into ExpressionEngine. You could use a third-party add-on such as Structure (http://buildwithstructure.com/) that is designed specifically to help maintain static pages in ExpressionEngine. This can be especially useful when dealing with multiple tiers of static content. However, since this is not part of the built-in ExpressionEngine functionality, this article does not use this method. You could put the page layout code into templates, but put the main text of each page into a channel and then use the {exp:channel:entries} tag in your templates to display the page content. You could put both the page layout code and the main text of each page into templates and not use channels at all. The last option, leaving the content of each page in a template, is actually a good approach in certain circumstances: If there are only a handful of static pages, it might be less work and less complication to keep the static content in templates, rather than creating a channel to hold the content. If each static page has its own look and feel, then keeping each page in a separate template allows more flexibility between pages. If you are comfortable editing templates whenever you want to change the content of the static pages, then keeping the content in templates will work fine. (However, if you plan to have someone else update the content, having them edit the content in a channel is easier for them and a less risky task for you than letting them edit the template). Since Ed & Eg's static pages have a consistent look and feel, and Ed & Eg are not completely comfortable editing HTML themselves, using a channel for the page content is a good solution. With each website page in the current static website as its own channel entry, Ed & Eg will be able to change the wording of a page easily by editing the corresponding entry, while the more complicated HTML that builds the page will be out of their sight. Note that in this article, we will not be converting the Frequently Asked Questions page. Designing and building your channel Creating a new channel for your website involves the same basic steps each time. These steps can be completed in any order and you will often find this to be an iterative process: You can optionally create custom statuses, custom categories, and/or custom fields for your new channel You have to create the channel that will hold the new content You have to populate the channel with some content You have to create (or modify) templates that will display the content Let's begin! Custom statuses Each entry in ExpressionEngine can, by default, be marked as open or closed. An open entry means that the entry is visible on your website, whereas a closed entry means the entry is not visible. It is possible, however, to create more than these two statuses. You can use custom statuses to separate certain entries from others (such as the Agile Records website uses a custom status of Featured to identify which band to feature on the front-page). You can also use a custom status to build a workflow, for example, a draft custom status to indicate an entry that has been written, but needs someone else to review before being marked as open and appearing on the website. At this point in the design process, there is no reason for Ed & Eg's website channel to have custom statuses so the included Statuses status group (which includes open and closed statuses) will suffice. Categories Each channel in ExpressionEngine can also be associated with a category group. Once a channel has a category group, each entry in that channel can then be assigned to one or more categories in that group. Categories provide a natural but powerful way to organize your content, enabling you to group entries that are in the same category together and thereby encourage visitors to click-through to more of your content that interests them. Categories can also be used, such as status groups, to identify certain entries and do something different with them in your templates. The Agile Records example site uses categories to identify Staff Bios in the about channel and display them in their own section on the About page. For Ed & Eg's website, there are only a few static pages, so there is no reason to use categories. Custom fields As an example, say you have a channel for recipes. You could have a custom field for the description of the dish, a field for the ingredients, a field for the preparation steps, a field for the nutritional information, and an image field for a photo of the finished dish. You can create a field for whatever information you want to store in your channel. That said, not every channel needs its own set of custom fields. Different channels will often have similar content (for example, an introduction, the content itself, and an image). When this is the case, using the same field group for more than one channel works very well and reduces the amount of administrative overhead. By default, the blank installation of ExpressionEngine does not include any custom field groups, so at least one must be created in order to build a channel. For Ed & Eg's website, two custom fields will be ideal—one to contain the text of the page and one for the image that appears at the top left on some pages. Although the picture is a static image of coins right now, creating it as a custom field will give Ed & Eg the flexibility to have a different image on different pages, without having to edit the HTML code. Do not worry about second-guessing ahead of time all the fields that you might need. While it is true that we may one day need a heading 6 and a text 6, they can always be added when the need arises. So now that we know what custom fields we want to create, how do we create them?

  WordPress 3.0 jQuery Enhance your WordPress website with the captivating effects of jQuery. Enhance the usability and increase visual interest in your WordPress 3.0 site with easy-to-implement jQuery techniques Create advanced animations, use the UI plugin to your advantage within WordPress, and create custom jQuery plugins for your site Turn your jQuery plugins into WordPress plugins and share with the world Implement all of the above jQuery enhancements without ever having to make a WordPress content editor switch over into HTML view   Read more about this book (For more resources on WordPress and jQuery, see here.) The following are the tips and tricks required for working with jQuery and WordPress. Keep a code arsenal A "snippet collection" or, what I call my "code arsenal" will go a long way to help you out, not just with jQuery and WordPress code, but also with the general HTML markup and even CSS solutions you create, not to mention any other code language you work in. I'm terrible at remembering syntax for code, markup, and CSS. I often know what I need, but can never quite recall exactly how it's supposed to be typed. I used to spend hours going through various stylesheets, markup, and codes from previous projects to copy into my current project as well as googling (and "re-googling") web pages that had samples of the syntax I needed. If you often find yourself in a similar situation, using the Snippets or Clip features that are usually available in good HTML/Code editors will free you from this mundane (and very time consuming) task. You simply type or paste the WordPress template tags, functions, PHP code, key CSS rules, and jQuery functions (and any other code syntax, whatever you find you need to use the most), into the Snippets or Clips panel available in your editor, and the application saves it for you, for future use. As you work on different projects, you'll come up with solutions that you'll probably want to use again in the future, say, a set of CSS rules for unordered lists that make a nice gallery view, or a very clever use of two jQuery functions together. Every time you create something you think may come in handy (and a lot of it will come in handy again), be sure to save it right then and there, for future reference. Good editors such as Dreamweaver, HTML-Kit, and Coda usually have the ability to organize snippets and keep them logically grouped so they're easy to access. Some editors will even let you assign custom "key shortcuts" and/or drag-and-drop to your clips right into your working file. How easy is that? Free your arsenal Once you discover how handy this is, you might want to have your arsenal available to other programs you work with, especially if you switch between multiple editors and authoring environments. I suggest you invest in a multi- paste/clip board application that lets you save and organize your code snippets. When I was on a PC, I used a great little app called Yankee Clipper 3 (which is free and is available at http://www.intelexual.com/products/YC3/), and now on the Mac, I use iPaste (which has a modest price; go to http://www.iggsoftware.com/ipaste/). In addition to having your arsenal handy from any application, being able to go back through the last 10 or so items you copied to the clip board is a real time saver when you're working on a project. Your arsenal on-the-go Last, I find I like to take most of my arsenal with me. If you use a handheld device or have a phone with a note app that lets you categorize and search for notes (especially the one that will let you sync from your desktop or a web service), you'll probably find it useful to keep some or all of your arsenal in it so you can easily look up syntax from your arsenal at any time. I occasionally freelance at places that require me to use one of their computers and not my laptop, so having access to my arsenal on my device is very useful. Palm's native note app suited me great in this capacity for years and years; I now keep a large part of my arsenal in Google docs and use a little desktop app called NoteSync, which lets you write and view Google docs notes quickly (they'll have an Android app out soon, but in the meantime I use Gdocs on my Android device to see my notes). I have many friends who swear by EverNote's system (though, their mobile app only works offline on the iPhone and not on Android—as of yet). Once all your often used and creative one-off solutions are all located in a convenient (hopefully categorized and key-word-searchable) place, you'll be amazed at the amount of speed your development picks up and how much more relaxing it is. jQuery tips and tricks for working in WordPress Let's start-off with some of my favorite jQuery tips and tricks, before focusing on WordPress.There are also a few nuggets that will help you speed up your jQuery development. Try to use the latest version of jQuery This is one of the drawbacks to using the bundled WordPress version: it may get a little behind the current version of jQuery until the next version of WordPress comes out. I'm all for staying on top of the current version as jQuery's top goals for version releases are not just to provide new functionality, but continually streamline and improve the performance and speed of the existing functionality. If the latest version of jQuery available on CDN is greater than the version that's bundled, be sure to deregister jQuery first or restrict your newer version with the if else statements, so it loads on the front end of the site on required pages only. Otherwise, you may create problems with plugins using the bundled version of WordPress. Stay current with the Google CDN The best way to stay current is to simply use Google's CDN.There are additional advantages to loading up from Google's CDN instead for your project's hosted server. Instead of having to load JavaScript's, libraries and assets one by one from your server, your site can simultaneously load the main library from the Google CDN in addition to other local jQuery scripts and collateral. The bonus is that jQuery will be cached for users who've visited other sites that load it up from Google's CDN. Stay in No Conflict mode The great thing about WordPress is that a site can have so many people contributing to it in lots of different ways: writing content, working on the theme, and adding WordPress plugins. One of the worst things about WordPress is that so many people can easily contribute who knows what to a site, depending on their admin status, some other collaborator could add to them, or what plugins they could install. Staying in No Conflict mode is a must for WordPress. This in conjunction with using the wp_enque_script to load in WordPress will ensure that jQuery doesn't get "pushed out" if anyone loads up any other plugin that uses say MooTools or Scriptaculous, or even just an older version of jQuery. It's easy to stay in noConflict mode. Just use jQuery instead of the shortcut dollar sign ($) in front of your scripts. jQuery('.selector').function(); Make sure other scripts in the theme or plugin use the Script API If you're using a theme or a plugin from a third party, take a look through the theme's header.php file or the plugin's PHP pages and double-check that all scripts have been loaded in using the register and wp_enqueu_script methods. I've had a few instances that were rather frustrating and caused some hair-pulling, as we tried to figure out why my jQuery scripts were not working or wondering how I "broke" them porting them over to the live site. Turns out, the live site had a plugin installed that my sandbox site didn't, and you guessed it, that plugin was including an older version of jQuery and a custom script file using hard-coded script tags instead of the wp_enqueue_script method. Once this was figured out and straightened up, setting everything into noConflict mode, everything worked fine again! Check your jQuery syntax This one always gets me. You write up a nifty little jQuery chain, add a few tweaks to it, and the darn thing just stops working. And you know it's right! Well, at least, you think it's right. Right? This is where a great code editor comes in handy. You'll want some nice find features that let you step through and look at each returned find, as well as let you run a find not just on the whole document, but on individual selections. I like to select the just the "offending chain" and run the following find features on it to see what comes up. Colons and semicolons Do a find for : (colons); you'll probably find a few that are accidentally set up as ; (semicolons) in your function's various object parameters, or you may have typed a colon where a semicolon should have been there. Closing parenthesis I'll also run a find on closing parenthesis, ), and make sure each one that comes up is part of a continuing chain or the end of the chain marked with a;. Mismatched double and single quotes Last, a quick check for matched-up single and double quotes sometimes shows me where I've messed up. Panic's Coda lets you place in "wild cards" into the find so a search for "*' or '*" usually turns up a pesky problem. Most good code editors have color-coded syntax, which really helps in recognizing when something isn't right with your syntax, such as not having a closing quote mark at all or parenthesis. But, the issues above are tricky as they'll still often display as proper color coded syntax, so you don't know until you run your script that something's wrong. Use Firefox and Firebug to help with debugging Firebug has a feature called "console logging". This is one of many great features of Firebug in my opinion. For years I often resorted to using JavaScript's "alert" statement to try and show me what was going on "inside" my work but the Firebug console handles so much more than that. This is really useful because sometimes you have to debug a "live" site and setting up JavaScript alerts is a little risky as you may confuse visitors to the site. Using Firebug's console logging eliminates that. First up, there's the console.log and console.info statements which you can add to your jQuery scripts to pass info to and have a plethora of useful (and sometimes not-so-useful, but interesting) information about your script returned. console.profile and console.time are great for measuring how fast you scripts are being processed by the browser. For a complete overview of everything Firebug's console can do, check out: http://www.getfirebug.com/logging.

(For more resources on Afresco 3, see here.) Workflows can be configured for both web forms and non-generated web content. In order to submit content to the Staging Sandbox, workflows need to be configured. We will discuss shortly how form-based and file-based workflow can be configured, and also how content can be submitted to the Staging box. Associating workflows to web forms Workflow for web forms can be configured using the Create Web Form Wizard or the Edit Web Form wizard. Using these approaches, workflows can be configured for all web projects and for a specific web project. Assuming that we have already created a web form, we will use the same web form to drive a workflow. In this example, we have to use the Edit Web Form Wizard. Follow these steps to assign a workflow for the web form: Ensure that the Alfresco server is up and running. Go to Company Home Data Dictionary | Web Forms|. Click on the Edit Web Form action under the training (web form name) space. Clicking on this will open Edit Web Form Wizard. Click on Next twice to reach the Configure Workflow window. Select the Yes radio button and click on Next. Click on Finish. Associating workflows to web projects To assign a workflow for a specific project, you can use two approaches. The first approach is by using the Create Web Project Wizard that will be used if you are creating a new web project. The second approach is by using the Edit Web Project Wizard. We will be using the second approach since we have already created the Cignex web project. Follow these steps to associate workflow for a web form: Ensure that the Alfresco server is up and running. Go to Company Home Web Projects | Cignex|. Select Edit Web Project Settings from the action menu. Click on Next. On the next screen, click on Next. In the Step Three window, you will notice the added web forms in the panel as shown in the following screenshot. You can see the Configure Workflow button available for each web form. This button is enabled only for those web forms for which we have configured workflows. Notice the attention icon next to the workflow. This indicates a workflow has been selected but not configured: On clicking the Configure Workflow button, the Configure Workflow window is opened. This window is used to configure form-based workflows (web form generated content). This is specific for web forms only. Fill out the details as shown in the following screenshot: Click on OK. Now, if you notice, the attention icon disappears. Click on Next. You will again see the Configure Workflow window. Click on the Add to List button to add the workflow for the web project. Once the workflow is added in the panel, you can configure file-based workflows (non-web form generated content). They are configured based on filename pattern matching. In Workflow Settings, note the default regex pattern matches .*. This default means that any asset web form generated, and non-web form generated, will go through this review process. Also, you can add the Web Site Submission workflow multiple times in this wizard. For each instance you can configure a different chain of reviewers for different sections of the websites or types of assets by modifying the regex pattern match in Workflow Settings, for example, .css, .html. Please note that the Configure Workflow window can be used for both file and non-web form generated assets. But this window is mainly used for non-web form generated assets. Click on Finish. Submitting content to the Staging box Content can be submitted in two ways. The first option is by using the Edit Web Content Wizard or the Create Web Content Wizard. With this option you can submit only form-based content. The second option is by using the Submit Selected or Submit All option provided under Modified Items. With this option you can submit both form-based assets and non-form based assets. Using the Edit Web Content wizard We assume that the web content is already created. So we are going to use the Edit Web Content wizard. Log in as Mark Steven, who is the Content Manger of the Cignex project. Follow these steps to directly submit content to the workflow: Go to Company Home Web Projects | Cignex|. Select the Browse Website option to browse all files and folders. Go to the common/inc folder. Click on the Edit action placed next to the training.html file. Click on Next. The Summary window is opened. It has the functionality to directly submit content to the workflow (this functionality is also available in the Create Web Content Wizard). Select those checkboxes to submit directly. This saves you from initiating a separate submission process. Click on Finish.

(For more resources on WordPress, see here.) Introduction Ubuntu Server is a robust, powerful and user-friendly distribution engineered by a dedicated team at Canonical as well as hundreds (if not thousands) of volunteers around the world. It powers thousands of server installations, but public and private and is becoming a very popular and trusted solution for all types of server needs. In this article I will outline how to install Ubuntu server toward the goal of running and publishing your own blog, using the WordPress blogging software. This can be used to run a personal blog out of your home, or even run a corporate blog in a workplace. Hundreds of companies use Wordpress as their blogging software of choice—I've deployed it at my office even. I personally maintain about a dozen Wordpress installations, all at varying levels of popularity and traffic. Wordpress scales well, is easy to maintain, and very intuitive to use. If you're not familiar with the Wordpress blogging software I'd invite you to go check it out at http://www.wordpress.com. Requirements In order to get this whole process started you'll only need a few simple things. First, a copy of Ubuntu Server. At the time of this writing, the latest release is 10.04.1 LTS (Long Term Support), which will be supported and provide security and errata updates for five years. You can download a free copy of Ubuntu Server here: http://www.ubuntu.com/server In addition to a copy of Ubuntu Server you'll need, of course, a platform to install it one. This could be a physical server, or a virtual machine. Your times (the 15 minute goal) may vary based on your physical hardware speeds. I based this article on the following platform and specifications: Dell D630 Core 2 Duo 2.10 Ghz 2G RAM VirtualBox 3.2.8 Open Source Edition Again, your mileage may vary depending on your hardware and network, but overall this article will quickly get you from zero to blogger in no time! The last requirement you'll need, and I mentioned this just very briefly in this last paragraph, is network access. If you're installing this on a physical machine, make sure that you'll have local network access to that machine. If you're planning on installing this on a virtual machine, make sure that you configure the virtual machine to use bridged networking, making it accessible to your local area network. To recap, your requirements are: Ubuntu Server 10.04.1 LTS .iso (or printed CD) Physical or virtual machine to provision Local network access to said machine Getting started Once you have everything prepared we can jump right in and get started. Start up your virtual machine, or drop in your CD-ROM, and we'll start the installation. I've taken screenshots of each step in the process so you should be able to follow along closely. In most situations I chose the default configuration. If you are unsure about the configuration requirements during installation, it is generally safe to select the default. Again, just follow my lead and you should be fine! This is the initial installer screen. You'll notice there are a number of options available. The highlighted option (also the default) of "Install Ubuntu Server" is what you'll want to select here. Next, the installer will prompt you for your preferred or native language. The default here is English, and was my selection. You'll notice that there is a huge number of available languages here. This is one of the goals and strengths of Ubuntu, "that software tools should be usable by people in their local language". Select your preferred language and move on to the next step. The next step is to select your country. If you selected English as your primary language you'll then need to select your region. The default is United States, and was also my selection. The Ubuntu installer can automatically detect your keyboard layout if you ask it to. The default prompt is no, which then allows you to select your keyboard from a list. I prefer to use the auto-detection, which I find a bit faster. You can use your own preference here, but be sure you select the correct layout. Nothing more frustrating than not being able to type properly on your keyboard! Next you'll need to assign a hostname to your machine. This is an enjoyable part of the process for me, as I get to assign a unique name to the machine I'll be working with. This always seems to personalize the process for me, and I've chosen a number of creative names for my machines. Select whatever you like here, just make sure it is unique compared to the other machines on your current network. To help ensure that your clock is set properly the Ubuntu installer will auto-detect or prompt you for your time zone. I've found that, when installing on physical hardware, the auto-detection is usuall pretty accurate. When installing on virtual hardware it has a more difficult time. The screenshot above was taken on virtual hardware, which required me to select my time zone manually. If this is the case for you, find your time zone and hit ENTER. The next step in the installation process is partitioning the disks. Unless you have specific needs here, I'd suggest safely selecting the defaults. If you're wondering whether or not you do have specific needs, you probably don't. For our intentions here toward the goal of setting up a web server to run Wordpress, the default is just fine. Select "Guided – use entire disk and set up LVM" and hit ENTER. The installer will prompt you with a confirmation dialog before writing partitioning changes to the disk. Based on the fact that making changes to partitions and filesystems will destroy any existing data on the disk(s), this requires secondary confirmation. If you are installing on a newly created virtual machine you should have nothing to worry about here. If you are installing on physical hardware, please note that it will destroy any existing data and you should be OK with that action. You also have the option of defining the size of the disk made available to your installation. Again, I selected the default here which is to use 100% of the available space. If you have more specific requirements, make them here. Lastly, in regards to the partitioning, one more final confirmation. This screen outlines the partitions that will be created or changed and the filesystems and formatting that will be done on those partitions. Each of these filesystem related screenshots selected the default values. If you've done the same, and you're OK with losing any existing data that might be on the machine, finalize this change by selecting YES. At this point the installer will install the base system within the newly created partitions. This will take a few minutes (again, your mileage may vary depending on hardware type). There are no prompts during this process, just a progress bar and a communication of the packages that are being installed and configured.

(For more resources on CMS, see here.) Have a go hero – determine your keywords Search engines read, crawl, and index text and only text. They don't recognize images, Flash, or Silverlight content. That's why it's important to use the most relevant text for your website and sprinkle the content with the right keywords, while placing the selected keywords in strategic locations where there is a maximum chance for the spiders of a search engine to read, crawl, and index. Embedding keywords in the heading, initial part of the first paragraph, page titles, filenames, and directory names are some of the most commonly used strategies for improving page ranking. You can also consider including keyword phrases in the URLs or domain names of your website. This is one of the most important ways to improve the page ranking in various search engines' results pages. You need to be very careful when selecting the keywords for your website and choose words that describe your website. Sometimes, you may be confident that keywords that you choose are the best descriptions. But how do you know whether you have chosen the best keywords? What if there is no one out there who will submit a search query for the keywords you chose? This is where web analytis plays an important part. While it's tempting—resist the urge to go with uniquely different keywords or made up words. This may sound appealing to reduce the overlap with your competitor's websites. Unfortunately, you may find yourself not featured in any specific results at all. This is the main reason you should consider using keyword phrases that are popularly searched. There is a wide variety of keyword suggestion tools available, which can give you statistics, competition level, and search popularity that can help a company make an informed decision. While it is typical to determine a list of six keywords, depending on your marketing budget, you may only want to finalize a list of three. Spend some time with your marketing department to determine these keywords. Once this is done, validate these against several of the online keyword suggestion tools available. Finalize this list and make it available to all content editors with specific recommendations about their usage. Time for action – forbidden URL characters In order to guarantee URL consistency, HTTP defines a set of forbidden characters (' / : * ? " < > | & ; % . ; % . ' # [ ] + =.). In addition to these pre-defined characters, we want to remove the $ character from any URL string in our site to provide better navigation. This can be done using the following steps: Log in to Site Manager, select the Settings tab, select URLs and SEO, as shown in the following screenshot: (move cursor over image to enlarge) In the Forbidden URL characters field, enter $ and select Save, as shown in the following screenshot: Don't forgetThis setting defines characters in addition to the HTTP forbidden characters mentioned earlier. Log in to CMS Desk, select the News folder, and click the New document icon. In the New document screen, select the News item, enter the following information, and select Save. Sign out of CMS Desk. In the live site, select the News menu item, click the Get An IPhone for $50 link to view the URL containing the replaced characters, and the News item, as shown in the following screenshot: What just happened? When you selected the URLs and SEO menu option, this brought us to the system management screen. This screen contains a variety of options for managing various advanced aspects of the URL and SEO functions. When we entered the $ into the Forbidden URL characters field, this appended our character to the default HTTP forbidden list. Once this was saved, we then created a new news item that contained a $ in the title. By default, all new News URLs are created using the News title as the default URL. The resulting URL contained a - instead of a $. Time for action – changing the site name The name of any page displayed in the browser window is based on a system-wide default that starts with a page prefix. Now that we have our basic site configured, we want to change the name of the page prefix from Corporate Site to the name of our company, namely, Big Company, using the following steps: Log in to the live site to view the default site name, Corporate Site, as shown in the following screenshot: Log in to Site Manager, select the Settings tab, and then select Web site, as shown in the following screenshot: In the Site drop-down menu, select Corporate Site, as shown in the following screenshot: In the Web site properties for the Corporate Site, change the Page title prefix field to Big Company, as shown in the following screenshot and select Save. Log in to the live site to view the changed page prefix to our company name, as shown in the following screenshot: What just happened? When we selected the Web site and then Corporate Site, this brought up the default site settings. We then changed the Page title prefix field to our company name, and when we logged into the live site, this was reflected across all pages. This change is also captured by any search engines currently indexing our site. Global settingsYou can configure the format of all page titles, descriptions, and keywords for all sites by logging into Site Manager selecting Settings, then the Web site dialog, and then by selecting the (global) site. This allows you to configure the Page title format for all pages. The default title format is:{%prefix%} - {%pagetitle_orelse_name%} This means that the format consists of the site prefix followed by the page title value. If the page title value is not set, the document name is used.

(For more resources on WordPress see here.) Feedburner Feedsmith By Steve Smith & Feedburner (http://feedburner.com/) Why it's awesome: Never having to worry about nefarious uses of your RSS feeds Why it was picked: Built by the Google crew at Feedburner Manual Install URL: http://www.google.com/support/feedburner/bin/answer.py?hl=en&answer=78483 Automatic Install search term: Not available Geek level: Webmaster Configuration location: Settings | Feedburner Used in: Feeds Many times, hosting your own RSS feed can wreak havoc on your server without you ever knowing it. Due to RSS's out-of-sight-out-of-mind style, you often forget about it completely. Using Google's Feedburner is one way to ensure that a swarm of subscribers won't bring your server to a crawl. Feedburner acts like a conduit to your RSS feed by delivering the feeds from Google's servers instead of your own. Not only does Feedburner offload your server traffic, it also gives you an amazing view of what people are doing with your feed. The stats alone are worth signing up. Burning your feed Submitting your feed to Google will take only a few minutes, but the rewards are long lasting. Create a Google account You will need to have a Google account to leverage Feedburner. If you do not already have an account with Google, you can sign up at https://www.google.com/accounts/NewAccount Verify your blog's feed URL Each WordPress blog comes with RSS feeds enabled. To access your feed, go to http://yourdomain.com/feed/ Burn your feed Now we must set up a new feed to burn by visiting http://feedburner.google.com and adding our feed to the Burn a feed right this instant input box. Name your feed Once you have added your feed, you will need to name the feed and create a URL to use it. Your feed title should be something descriptive about your blog, as this is what all of your RSS subscribers will see as the title of your blog. Configuring WP-Feedburner Now that you have your feed hosted on Google, we can finish the process of setting up WP-Feedburner. WP-Feedburner's configuration is located in Settings | WP Feedburner. Your feed should now be officially set up to redirect to your Feedburner feed. To make sure everything is working properly, visit http://yourdomain.com/feed/ and check that the URL gets redirected automatically to the Feedburner URL that you set up earlier. SendIt By Giuseppe Surace (http://www.giuseppesurace.com/) Why it's awesome: Send e-mail campaigns for free Why it was picked: Easy to set up and free WARNING: This plugin is still in the beta stage, but the majority of the functionality works great. Manual Install URL: http://wordpress.org/extend/plugins/sendit/ Automatic Install search term: SendIt Geek level: WP Ninja Configuration location: Top Navigation Newsletter| Used in: Newsletters SendIt has more potential to change the way you communicate with your readers than any other plugin mentioned in this book. SendIt was originally written in Italian, and every once in a while, you will stumble on to a few words that are yet to be translated. However, besides the occasional Italian noun, SendIt is very straightforward and makes running multiple newsletters as easy as managing your blog. SendIt overview Unlike other plugins, SendIt is a fairly large plugin with multiple configuration pages and areas to set up, tweak, and perfect. Newsletter: Compose and send your newsletters from the Newsletter section Manage subscribers: Add and remove e-mail addresses from a given newsletter SMTP settings: If you are planning on using SendIt to send to more than 600 subscribers, you might want to consider setting up an external SMTP server for sending your mail. Otherwise, you can leave this section alone Newsletter settings: Find, delete, and edit newsletters Import emails from comments: Quickly build e-mail lists from everyone who has commented on different blog posts Import emails from WP Users: Quickly build e-mail lists from other writers, users, and administrators on your blog Creating your first newsletter For the purpose of this example, we will create a Geek Newsletter for our blog readers to subscribe to. Start by visiting Newsletter | Newsletter Settings. Click Create New List. A new list will automatically be added to your Available Lists grid. Select Edit from the newly created list. Define the From e-mail address, newsletter name, and the header and footer for this newsletter template. The header and footer will automatically be applied for each e-mail you send from this mailing list. Click Save.

(For more resources on Oracle, see here.) BPMN 2.0 concepts BPMN stands for Business Process Modeling Notation and is a public standard maintained by OMG. It describes a business-friendly, flow chart-like graphical notation that business process analysts and business users can use to model business processes and has support for process interactions, exception handling, compensation semantics, and so on. It is widely accepted by both commercial and open source BPMS tooling vendors. It is highly adaptable and can be used to capture everything from abstract process outlines to detailed process flows to implementation ready processes. One of the main value propositions of BPMN besides being a diagram standard is the precise semantics behind the diagram. The shape, the symbols (also referred to as markers), the borders, the placement of the BPMN diagram elements, as well as their properties have well defined meanings and have to be interpreted in the same manner by all tools. While BPMN 1.1 comprehensively addresses process modeling notations, it's failure to address an interchange format (for diagram exchange) has resulted in implementation vendors adopting different standards (BPEL, XPDL, other proprietary formats) to store BPMN process models leading to not only a loss of portability across tools but also making it difficult to communicate across the various stakeholders. The vision of BPMN is to have a single specification for notation, metamodel, and interchange. In addition, BPMN 2.0 has been expanded to include orchestrations and choreography of process models. Salient enhancements to BPMN 2.0 are as follows: BPMN 2.0 includes both diagram interchange as well as model interchange (the interchange formats can be either XML or UML) enabling portability of BPMN models across tool vendors. Formal execution semantics for all BPMN elements—BPMN 2.0 can not only be used to capture process models but can be used as an implementation model as well. IT simply layers the process execution details on top of the business process model leading to effective business-IT collaboration. Historically, business process models developed by business people have been technically separated from the process representations required by systems designed to implement and execute those processes. Thus, there was a need to manually translate the original business process models to the execution models. Vendors used standards such as BPEL and XPDL to save as well as execute BPMN Process models. Such translations are subject to errors and the impedance mismatch made it difficult for the process model and the executable process to be in sync with each other, as changes were made to both during the process development life cycle. With BPMN 2.0, there is no translation involved and the model is the implementation as well. Defines an extensibility mechanism for both Process model extensions and graphical extension. Refines event composition and correlation. Extends the definition of human interactions and aligns BPEL4People with the BPMN specification. Defines a Choreography model. A quick introduction to BPMN At its heart, BPMN has only three main elements, also referred to as Flow Objects—Activity (rectangle), Events (circle), and Gateways (diamond). An Activity represents some work done; Gateway represents a decision point or parallel forking or merge or join; Event represents either a trigger generated by the process or received by the process (from external source or from some other part of the process). These Flow Objects are linked by connections referred to as Sequential Flows. These Sequential Flows represent the chronological sequence of process steps. The preceding steps pass control to the following step(s) along the connection. The data is also passed along the connection flow. The Activity can be either a Task (an atomic process step) or Embedded Sub- process (compound process step). The Embedded Sub-Process can be either expanded or collapsed and has access to the process data. BPMN 2.0 supports different flavors of Tasks, namely: User Task for a human step managed by the workflow component of the BPM run-time engine; Manual Task for a human step that is not managed by the BPM run-time engine); Service Task for synchronous system interactions; Send Task and Receive Task for asynchronous system interactions; Script Task for scripting needs; Call Task for invoking another BPMN process (process chaining). The different task types have different symbols or markers to visually distinguish them. In BPMN, the lane objects are used to group activities based on the categories (can be human resources or system resources) that they are associated for better visualization purpose. In Oracle BPM Studio, the lanes are associated with the BPM Role object and the Performer of the User Task is automatically set to the BPM Role object associated with the lane. The User Task is associated with Process Participants or Performers who represent the business users who need to carry out the User Task. The associated Task (work to be performed) is shown in the inbox of the assigned Performers when the User Task is triggered. The actual work is performed only when the Performer executes on his Task. The Task is presented to the Performers through a browser-based worklist application. In BPM Studio the Process Participant or Performer is a BPM Role object in the Organization model. Oracle BPM Suite supports out-of-the-box workflow patterns. Workflow patterns allow users to declaratively specify approval chains, notifications, and escalation and expiration policies. This simplifies the process logic by encapsulating approval chains within reusable task components. It is always possible to model the approval pattern using simple Tasks, Gateways, and Events within the BPMN process—but for many processes it is more convenient to define workflow patterns as well as notification, expiration, and escalation policies as part of the user task definition. BPM Studio exposes these workflow patterns through six flavors of Interactive Tasks. The User Task refers to the Single Approver pattern and the participant or assignee is the member of the Role associated with the BPMN Process swim lane. The Management Task refers to the sequential management pattern and there are multiple participants assigned to the Task in a sequential pattern. Further, these participants are based on the Management hierarchy defined as part of LDAP and have the notion of a starting participant as well as the number of levels to be traversed up the management chain from the starting participant. The Group Task refers to the Parallel Voting pattern and the participants are members of the Role associated with the BPMN Process swim lane. The tasks are assigned in parallel to the participants in this case and the task is completed when a percentage of defined voting outcomes are reached. The FYI Task refers to the notification pattern and the participants are based on the Role associated with the BPMN Process swim lane. The task is completed as soon as the work items are assigned to the Task Inbox of the participants. Finally, the Complex Task for complex patterns involving task chaining and in this case the participants are not tied to the BPMN Process swim lanes.

(For more resources on WordPress see here.) TweetMeme By Alex King (http://alexking.org/) Why it's awesome: Allows Twitter users to quickly share your blog post, and it tracks how often they do it Why it was picked: Super simple to install; no Twitter account is needed Manual Install URL: http://wordpress.org/extend/plugins/tweetmeme/ Automatic Install search term: TweetMeme Geek level: Webmaster Configuration location: Top Navigation | TweetMeme Used in: Posts, pages The TweetMeme button is the fastest way to allow your readers to quickly share your blog posts to Twitter with a single click. In addition to offering this awesome sharing tool, you can also sign up for TweetMeme's analytic services to track the effectiveness of each of your posts. Setting up TweetMeme You can access TweetMeme's settings from the Top Level Navigation and then TweetMeme Settings|. The following is a list of the most important settings to focus on and what they do. Display: Choose this if you want to display the TweetMeme button on pages, on the home page, and within your feed Position: TweetMeme allows you to display the TweetMeme button in various positions around your blog posts—before, after, both before and after, shortcode, or manually Type: TweetMeme offers two types of buttons—normal and compact. By default, the normal button is displayed Source: Supply your Twitter username here, if you have one URL Shortener: Often, WordPress blog post URLs are rather lengthy and can eat up to many of the 140 characters Twitter allows. It recommends using Bit.ly for your URL shortening—Bit.ly has proven to be a resilient company that won't be disappearing any time soon. TweetMeme API App ID & TweetMeme API App Key: TweetMeme offers detailed analytics when people re-tweet your blog posts. This service is not free, but they do offer a free trial to get your hands dirty. To leverage TweetMeme analytics, you will need to create an account at http://my.tweetmeme.com, after which you will be able to find your API App ID and API App key from http://my.tweetmeme.com/profile Wordbook By Robert Tsai (http://www.tsaiberspace.net/) Why it's awesome: You can share your posts to a user's Facebook wall Why it was picked: Ease of setup, integration level with Facebook Manual Install URL: http://wordpress.org/extend/plugins/wordbook/ Automatic Install search term: Wordbook Geek level: Webmaster Configuration location: Settings|Wordbook Used in: Posts Robert Tsai's Wordbook is an awesome way to get your blog posts listed on your Facebook profile or your Facebook pages. WordPress will post to Facebook a snippet of your post and a thumbnail of any images that might be in your post. Once installed, you will see a red bar across your WordPress administrator section stating Wordbook needs to be setup—click the Wordbook link to start the configuration. In order to publish your posts to Facebook, you will need to connect your blog to Facebook—to start this process, click the blue Facebook button. Once you start the process, you will be redirected to Facebook to authorize WordPress to communicate with your Facebook account. Now, each time you create a blog post, WordPress will create a new shared item in your Facebook newsfeed. WP Download Manager By Lester Chan (http://lesterchan.net/) Why it's awesome: Quickly add downloadable files and media to your blog Why it was picked: Lester's plugins are legendary, they offer download tracking Manual Install URL: http://wordpress.org/extend/plugins/nextgen-gallery/ Automatic Install search term: WP Download Manager Geek level: Webmaster Configuration location: Top Navigation | Downloads Used in: Posts, pages It offers your readers the ability to download content. It is one sure fire way of increasing your blog traffic and the happiness of your readers. WP Download Manager makes managing and tracking downloaded files from your blog a snap. Adding a new download Start off by clicking Add File from the Downloads menu and follow these steps: File: Select how you want to add a file: Browse File will show you a drop-down menu containing any files in the wp-content/files directory on your web server. Upload File allows you to select any file from your computer to upload. The majority of the time, this is the method you will be using. Remote File allows you to grab a file from any web server using a URL. File Name: Give your download a human-readable name. File Description: Supply a little information that will help your readers know what the file is about. File Category: Select the category for this file. You can create new categories from the Download | Download Options menu. File Size: Unless you are using the Remote File method, leave this field blank. WP Download Manager offers automatic detection of file size, but sometimes it will not work properly on Remote Files. File Date: If you need to back-date your file, you can use this field to do so. However, the majority of the time you will leave this field alone. Starting File Hits: If you want to make your download look more popular, you can pad the number of downloads. Allowed to Download: If you want to limit downloads only to readers who are subscribed and logged in, use this drop-down menu to control who can download. Your options are Everyone, Registered Users Only, Contributors, Authors, Editors, or Administrators. Click Add File. Inserting a download into a post Now that we have a new file uploaded to the Download Manager, we need to make it accessible to our readers. The WP Download plugin will add a new button to your WYSIWYG menu on posts and pages. One downside to WP Download is that you have to know the ID of the file you want to include in your post or page. Once you click the Download button, provide the download id in the pop-up window. You can find the ID of your file by clicking Download | Manage Downloads; the first column will contain the ID of the download. Twiogle Twitter Commenter By Twiogle (http://twiogle.com/) Why it's awesome: Quickly fills your blog's comments with somewhat relevant content Why it was picked: Easy to set up, works exactly as advertised Manual Install URL: http://wordpress.org/extend/plugins/twiogle-search/ Automatic Install search term: Twiogle Commenter Geek level: Newbie Configuration location: Settings | Twiogle Twitter Commenter Used in: Posts, pages, widgets Twiogle Twitter Commenter has a horrible name, but an awesome result. If your blog is lacking in comments and chatter, this plugin will automatically add new ones from recent tweets. It works its magic by taking the tags from your blog post and searches Twitter for tweets that use the same tags. To really take advantage of this plugin, you need to make sure you add tags to your blog posts; the more specific your tags are, the more relevant the comments that will be imported. With any service that automatically adds content to your blog, you need to keep an eye on it. It is very much possible for your comments to get overrun with pointless Twitter chatter if you run this plugin for too long.

To give an example, let’s say we have an array that contains thousands of floating-point integers and each value needs to be run through a lengthy algorithm. Instead of running each value through the algorithm consecutively (i.e. one at a time), parallelism allows multiple values to be processed simultaneously (i.e. running many values through the algorithm at the same time), reducing overall processing time and producing fast and accurate results. There are some restrictions with using parallelism and not every program can be done in parallel. For instance, let’s say we have that same program from before but this time as we process a value we want to then check the currently processed value against all the previously calculated values in the array, before going to the next. We can confidently say all previous values in the array have been processed and are available to be accessed for the check. If we tried to do this in parallel, we could have incorrect data because multiple values are calculated at the same time and some may be ready for checking while others are not. Extra checks and steps are needed to prevent these types of concurrency issues. However, the results could still prove to be worth the extra steps. One of the major breakthroughs in parallel programming technology today goes beyond the scope of just multi-core CPU’s. Although they do offer a lot more power and potential than single-core units, another common computer component, the GPU, offers even more power, and NVIDIA’s flagship product, called CUDA, offers this technology to all developers easily and for free. CUDA was developed by NVIDIA to provide simple access to GPGPU (General-Purpose Computation on Graphics Processing Units) and parallel computing on their own GPU’s. The logic behind the idea is that GPU’s have much more processing power than CPU’s and have numerous cores that operate in parallel to run intensive graphics operations. By allowing developers to utilize this power for their own projects, it can create fast solutions to some heavy and time-consuming programs, specifically those that run the same process recursively and independently of other processes. The learning curve is not very steep for most developers. CUDA accomplishes making GPGPU easily usable by adding functionality to the standard C and C++ programming languages. This allows for fast adoption by almost any programmer and helps with cross-platform integration. To get started with CUDA, you will need a recent NVIDIA GPU (Geforce 8 series and beyond, or you can check on the NVIDIA website to see which GPU’s are CUDA enabled). CUDA works on Windows, Mac OSX, and certain Linux distributions. You will need to download and install the developer drivers, the CUDA toolkit, and the CUDA SDK off the Nvidia website, respectively. NVIDIA provides an installation guide on their website which provides more details about the installation process, as well as a method of checking the installation to see if it is working.

(For more resources on Drupal, see here.) Themes The use of themes makes Drupal exceptionally flexible when it comes to working with the site's interface. Because the functionality of the site is by and large decoupled from the presentation of the site, it is quite easy to chop and change the look, without having to worry about affecting the functionality. This is obviously a very useful feature because it frees you up to experiment, knowing that if worst comes to worst, you can reset the default settings and start from scratch. You can think of a theme as a mask for your site that can be modified in order to achieve virtually any design criteria. Of course, different themes have widely varying attributes, so it is important to find the theme that most closely resembles what you are looking for in order to reduce the amount of work needed to match it to your envisaged design. It is also important to understand that not all downloadable themes are of the same quality. Some are designed better than others. This article utilizes Zen, which is one of the cleanest and most flexible around. Different themes are implemented differently. Some themes use fixed layouts with tables (avoid these because web design should not rely on tables), while others use div tags and CSS (favor these as they are far more flexible and powerful)—you should play around with a variety of themes in order to familiarize yourself with a few different ways of creating a web page. As mentioned, we only have space to cover Zen here, but the lessons learned are easily transferred to other themes with a bit of time and practice. Before we go ahead and look at an actual example, it is important to get an overview of how themes are put together in general. Theme anatomy Drupal themes consist of a set of files that define and control the features of Drupal's web pages (ranging from what functionality to include within a page to how individual page elements will be presented) using PHP, HTML, CSS, and images. Different Drupal 7 template files control different regions of a page, as shown in the following diagram: Looking at how theme files are set up within Drupal hints at the overall process and structure of that theme. Bear in mind that there are several ways to create a working theme, and not all themes make use of template files. However, in the case of the Drupal's default theme setup, we have the following: The left-hand column shows the folders contained within the themes directory. There are a number of standard themes, accompanied by the engines folder that houses a phptemplate.engine file, to handle the integration of templates into Drupal's theming system. Looking at the files present in the garland folder, notice that there are a number of PHP Template files suffixed by tpl.php. These files make use of HTML and PHP code to modify Drupal's appearance. The default versions of these files, which are the ones that would be used in the event a theme had not implemented on its own, can be found in the relevant modules directory. For example, the default comment.tpl.php file is found in modules | comment, and the default page.tpl.php file is located, along with others, in the modules | system folder. Each template file focuses on its specific page element or page, with the noted exception of template.php that is used to override non-standard theme functions—that is, not block, box, comment, node, or page. The themes folder also houses the stylesheets along with images, and in the case of the default theme, colors. Of special interest is the .info file that contains information about the theme to allow Drupal to find and set a host of different parameters. A theme's .info file holds the basic information about a theme that Drupal needs to know, namely, its name, description, features, template regions, CSS files, and JavaScript. Here's Garland's .info file: ; $Id: garland.info,v 1.9 2009/12/01 15:57:40 webchick Exp $name = Garlanddescription = A multi-column theme which can be configured to modifycolors and switch between fixed and fluid width layouts.package = Coreversion = VERSIONcore = 7.xengine = phptemplatestylesheets[all][] = style.cssstylesheets[print][] = print.csssettings[garland_width] = fluid; Information added by drupal.org packaging script on 2010-05-23version = "7.0-alpha5"project = "drupal"datestamp = "1274628610" Note that this file holds, amongst other things: Name—A human-readable theme name Description—A description of the theme Core—The major version of Drupal that the theme is compatible with Stylesheets—Stipulate which stylesheets are to be used by the theme These are not the only types of information that can be held by .info files. As we'll see a bit later on, when it's time to add scripts to a theme, they can be added to the .info file too. To quickly see one way in which .info files can be put to work, look closely at the .info file in the update_test_subtheme theme folder in tests (Below garland): ; $Id: update_test_subtheme.info,v 1.1 2009/10/08 15:40:34 dries Exp $name = Update test subthemedescription = Test theme which uses update_test_basetheme as the basetheme.core = 7.xengine = phptemplatebase theme = update_test_basethemehidden = TRUE; Information added by drupal.org packaging script on 2010-05-23version = "7.0-alpha5"project = "drupal"datestamp = "1274628610" Notice that this contains a base theme directive that is used to specify the parent, or base, theme. A sub-theme shares its parents' code, but modifies parts of it to produce a new look, new functionality, or both. Drupal allows us to create new sub-themes by creating a new folder within the themes directory and specifying the base theme directive in the new theme's .info file—just as we saw in update_test_subtheme. In a nutshell, Drupal provides a range of default themeable functions that expose Drupal's underlying data: such as content and information about that content. Themes can pick and choose which snippets of rendered content they want to override—the most popular method being through the use of PHP template files in conjunction with stylesheets and a .info file. Themes and sub-themes are easily created and modified, provided that you have some knowledge of CSS and HTML—PHP helps if you want to do something more complicated. I should make it clear that this system makes building a new theme fairly easy, provided one knows a bit about PHP. Here's the process: Create a new themes folder in the sites | all folder, and add your new theme folder in there—call it whatever you want (provided it is a unique name) Copy the default template files (or files from any other theme you want to modify) across to the new theme directory, along with any other files that are applicable (such as CSS files) Rewrite the .info file to reflect the attributes and requirements of the new theme, including specifying the base theme directive Modify the layout (this is where your PHP and HTML skills come in handy) and add some flavor with your own stylesheet (included into the new theme through the .info file) Before moving on, there's one small issue of practicality that must be addressed. When it is time for you to begin doing a bit of theme development, bear in mind that there are many types of browser and not all of them are created equal. What this means is that a page that is rendered nicely on one browser might look bad, or worse, not even function properly on another. For this reason, you should: Test your site using several different browsers. The Drupal help site has this to say about browsers: It is recommended you use the Firefox browser with a developer toolbar and view the formatted sources' extensions. I wholeheartedly agree. You can obtain a copy of the Firefox browser at www.mozilla.com/firefox. Firefox should also be extended with Firebug, which is an extremely useful tool for client-side web debugging: https://addons.mozilla.org/en-US/firefox/addon/1843/. Choosing a base theme As discussed, Drupal ships with a few default themes, and there are quite a few more available in the Downloads section of the Drupal site. Looking at how Drupal presents its core Themes page under Appearance in the toolbar menu, we can see the following: Any new themes that are added to the site will be used to enable, disable, configure, or set as a default from this page. Be aware that some themes might not implement functionality that is important to your site. Ensure that you test each theme thoroughly before allowing users to select it. Enabling the Stark theme, and setting it as the default theme, causes the site, which has been presented in the standard Garland theme up until now, to look something like this: This is a vast change from the previous look. Notice too that the entire layout of the site has changed—there are no well defined columns, no visually defined header section, and so on. In addition, the previous fonts and colors have also been demolished. Take the time to view each theme that is available by default in order to get a feel for how different themes can produce wildly differing looks and layouts. That is not the end of the story, because the Drupal site also has a whole bunch of themes for us to explore. So head on over to the themes page at http://drupal.org/project/themes and select the relevant version tab to bring up the themes that are available. You have already seen how to download and install other modules, and the process for installing themes is no different—download and extract the contents of the desired theme to the themes folder in sites | default or sites | all. For example, the Zen theme was downloaded and extracted, and provides us with a new option in the list of themes (some downloads will provide a number of sub-themes too), as shown in the following screenshot: Enable and set default causes the site to look like the next screenshot: Notice that while the color scheme is effectively non-existent, the page has retained its overall structure in that it has defined sidebars, a header region, and a central content region. Before we begin customizing this, let's take a look at the configuration settings for this theme.