How-To Tutorials - Web Development

  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.

  Web 2.0 Solutions with Oracle WebCenter 11g Learn WebCenter 11g fundamentals and develop real-world enterprise applications in an online work environment Create task-oriented, rich, interactive online work environments with the help of the comprehensive Oracle WebCenter Suite 11g Accelerate the development of Enterprise 2.0 solutions by leveraging the Oracle tools Apply the basic concepts of Enterprise 2.0 for your business solutions by understanding them completely Prepare development environments that suit your enterprise needs using WebCenter applications Define collaborative work environments for the members of your organization Read more about this book (For more resources on Oracle, see here.) The Oracle WebCenter Discussions Service provides a forum tool that can be used within the organization to share information and foster collaboration. Forums are one of the most popular information exchange mechanisms used on the Internet. We are all familiar with the power of forums to create user communities and disseminate information. If you have used the Oracle Technology Network Forums, the WebCenter Discussions Service will look very familiar to you—both use the same powerful forum software. (Move the mouse over the image to enlarge.) Some of the common challenges we have found with implementing forums for the enterprise have been related to the following: Integration into the existing technology stack User and group administration using existing LDAP Support Cultural adoption With Discussions, Oracle has successfully minimized the technical level of effort required during implementation by addressing the main technical challenges (numbers 1 and 2 above). And with formal support offered, as well as the general idea that forums integration using Discussions will not be unique for each implementation, organizations can feel more comfortable about viable long-term support. Given how well Discussions addresses the first three challenges, we now view the cultural adoption as the largest challenge, which can be overcome with effective training and strategic management decisions. Forums in general have become increasingly popular within organizations and Oracle has implemented an intuitive end-user approach. The Discussions Server is installed as part of Oracle WebCenter installation. It can be accessed directly at the default location http://hostname:8890/owc_discussions. While Discussions in itself is a useful forum tool, the real power comes from the Discussions Service that enables us to embed, view, and interact with the forums as part of custom WebCenter applications where forums can be used as a means to obtain and share information by the enterprise from within the current application being used. A Wiki is a website that allows a group of editors to easily create web pages in a collaborative manner using simple markup language. The markup language helps to organize and format the web pages. Many corporations use Wikis to create documentation internally. Each employee of the company has easy access to edit the information within the wiki, and can therefore incorporate new information for the entire community. A Blog is a website that allows an individual author to post a stream of content for a community to view. The word "Blog" is derived from the contraction of "Web Log". Each item in the Blog stream can be viewed as an article. An article can be something as simple as a video or image posting, or something as formal as a newspaper article. It is up to the author to decide what content to post. Typically, authors allow members of a community to engage in dialog related to the blog article by allowing them to post comments on the article. Both the Wiki Service and the Blog Service depend on the WebCenter Wiki and Blog Server. Both services use a single connection to the single backend server. Discussions configuration Our application is built with JDeveloper 11g and connects to the Oracle WebCenter Discussions Server. Ensure that the Discussions Server is running by connecting to the Discussions Server URL (http://hostname:8890/owc_discussions). It is a good idea to populate the Discussions Server with some example users, categories, and forums. The Forums Admin Console is used to create new users and forums. The admin console can be accessed at http://hostname:8890/owc_discussions/admin. The default admin username is weblogic and the password is weblogic. This is irrespective of any username/password specified at installation time. You can configure a wide variety of settings in the Admin Console, including but not limited to the following: Content Structure: Categories, Subcategories, Forums Users and Groups Permissions Filters and Interceptors Moderation User Interface (Colors and themes) Reports and Metrics System Settings (Cache, e-mail, locale, and so on) Plugins The following is a screenshot of the admin console home page: We will not focus on configuring all aspects of the forum, but instead the main pieces required to get started and integrated into WebCenter. Specifically, we will focus on users/groups, and the overall forum content structure. Content structure The general structure for Discussions is as follows: Categories: logical grouping of discussions content Subcategories: optional subgrouping(s) Forums: Lowest-level grouping where end users can create discussion threads Threads: Entries made by end users, which contain the original entry as well as replies Within the Forums Admin Console, you can define a structure that makes sense for your organization. The same principles that apply to other forum software will apply to Discussions content structure. For the purpose of this demo, we have created a Marketing category and a Marketing Ideas forum. The following is an image of that Category Summary that reflects the new Marketing Ideas forum that was just created: User and group structure We have worked on this Discussions Service as an independent service, and hence created our users and groups manually. In an enterprise solution, you will likely hook this into your LDAP (like Oracle Internet Directory) using Enterprise Manager. Following is a screenshots of the users we have configured within the Discussions administration: As shown previously, we have added two users— amit and jimmy—with the appropriate privileges to post to the Marketing Ideas forum. Integrating Discussions with WebCenter During the remainder of this article, we will create a custom WebCenter application, which will integrate with the Discussions Server and in which we will expose a view of the forum that allows you to interact with the forum using task flows. Oracle exposes multiple task flows for the Discussions service. We have listed all the out-of-box task flows in the following table and bolded the ones we will drop into our WebCenter application: Task Flow Description Discussions Forums This task flow shows all the topics associated with a specified forum. Users can create, read, update, and delete topics based on their privileges. Discussions - Popular Topics Shows the popular topics under a given category ID or forum ID. Discussions - Recent Topics Shows all the recent topics under a given category ID or forum ID. Discussions - Watched Forums Allows users to see all their watched forums under a given category ID. Discussions - Watched Topics Allows users to see all their watched topics under a given category ID or forum ID. Discussions - Sidebar View This shows a combined view of the Popular Topics, Recent Topics, Watched Topics, and Watched Forums task flows. The main steps we will complete are as follows: Ensure the Discussions Server is running Create a WebCenter application Create a connection to the Discussions Server Create a JSF page Select appropriate Discussions Service Task Flow and embed it in the page Deploy, run, and test the application Ensuring the Discussions Server is running Before we start developing the application, ensure that the WebCenter Discussions Server is running. If the Discussions Server is not running then start the WLS_Services managed server. Using a browser, open the URL for Discussions (for example, http://hostname:8890/owc_discussions). Log in with the newly created users and post some sample articles. Creating a new WebCenter application Using JDeveloper, create a new application, selecting the WebCenter application template. Creating a JSF page Next, we will create a JSF page to host the view for the Discussions Forum. In the Application Navigator, highlight the ViewController project, right-click on it, and from the context menu select New. In the New Gallery, select JSF Page to create a new JSF page. In the Create JSF Page dialog, select a name for the page and create the page. Creating a connection to the Discussion Forum In order to use the Discussions Service in our application, we need to create a Discussions Forum connection to the Discussions Server. This connection will be used by the application to connect to the backend Discussions Server. Note that it is possible to modify the connection after the application is deployed to the WebLogic server by using the Enterprise Manager Fusion Middleware Control. To set up the discussions connection, right-click on the Connections node in Application Resources pane and select New Connection | Discussions Forum. Select a unique name for the connection such as MyDiscussions. Ensure that the Make this the connection default checkbox is ticked. Next, we have to set the property values for the forum.url and admin.user. The value of forum.url should be the URL of the Discussions server. The default admin user is weblogic. Click on Test Connection to ensure that the connection is set up properly. Click Finish to complete this step. Click on the Resource Palette and open My Catalogs. You should now see the WebCenter Services Catalog. Expand the catalog to view the various task flows available. In the task flows shown, you see the various discussions-related task flows such as the Discussion Forums, Discussions – Popular Topics, Discussions - Recent Topics, and so on. We will use these task flows in our application to create a view of the Discussion Forum.

  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?

(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.

  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 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.) 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 Oracle, see here.) Portlets, JSR-168 specification Specification JSR-168, which defines the Java technologies, gives us a precise definition of Java portlets: Portlets are web components—like Servlets—specifically designed to be aggregated in the context of a composite page. Usually, many Portlets are invoked to in the single request of a Portal page. Each Portlet produces a fragment of markup that is combined with the markup of other Portlets, all within the Portal page markup. You can see more detail of this specification on the following page: http://jcp.org/en/jsr/detail?id=168 While the definition makes a comparison with servlets, it is important to note that the portlets cannot be accessed directly through a URL; instead, it is necessary to use a page-like container of portlets. Consequently, we might consider portlets as tiny web applications that return dynamic content (HTML, WML) into a region of a Portal page. Graphically, we could view a page with portlets as follows: Additionally, we must emphasize that the portlets are not isolated from the rest of the components in the pages, but can also share information and respond to events that occur in other components or portlets. WSRP specification The WSRP specification allows exposing portlets as Web services. For this purpose, clients access portlets through an interface (*. wsdl) and get graphic content associated. Optionally, the portlet might be able to interact directly with the user through events ocurring on them. This way of invoking offers the following advantages: The portals that share a portlet centralize their support in a single point. The portlet integration with the portal is simple and requires no programming. The use of portlets, hosted on different sites, helps to reduce the load on servers. WebCenter portlets Portlets can be built in different ways, and the applications developed with Oracle WebCenter can consume any of these types of portlets. JSF Portlets: This type of portlet is based on a JSF application, which is used to create a portlet using a JSF Portlet Bridge. Web Clipping: Using this tool, we can build portlets declaratively using only a browser. These portlets show content from other sites. OmniPortlet: These portlets can retrieve information from different types of data sources (XML, CSV, database, and so on) to expose different ways of presenting things, such as tables, forms, charts, and so on. Content Presenter: This allows you to drop content from UCM on the page and display this content in any way you like or using a template. Ensemble: This is a way to "mashup" or produce portlets or "pagelets" of information that can be displayed on the page. Programmatic Portlets: Obviously, in addition to the previous technologies that facilitate the construction of portlets, it is also possible to build in a programmatic way. When we build in this way, we reach a high degree of personalization and control. However, we need specialized Java knowledge in order to program in this way. As we can see, there are several ways in which we can build a portlet; however, in order to use the rich components that the ADF Faces framework offers, we will focus on JSF Portlets. Developing a portlet using ADF The portlet that we will build will have a chart, which shows the status of the company's requests. To do this, we must create a model layer that represents our business logic and exposes this information in a page. Therefore, we are going to do the following steps: Create an ADF application. Develop business components. Create a chart page. Generate a portlet using the page. Deploy the portlet. In this example, we use a page for the construction of a portlet; however, ADF also offers the ability to create portlets based on a flow of pages through the use of ADF TaskFlows. You can find more information on the following link: http://download.oracle.com/docs/cd/E15523_01/web.1111/b31974/taskflows.htm#BABDJEDD Creating an ADF application To create the application, do the following steps: Go to JDeveloper. In the menu, choose the option File | New to start the wizard for creating applications. In the window displayed, choose the Application category and choose the Fusion Web Application ADF option and press the OK button. Next, enter the following properties for creating the application: Name: ParacasPortlet Directory: c:ParacasPortlet Application Package Prefix : com.paracasportlet Click Finish to create the application. Developing business components Before starting this activity, make sure you have created a connection to the database. In the project Palette, right-click on Project Model, and choose New. On the next page, select the category Business Tier | ADF Business Components and choose Business Components from Tables. Next, press the OK button. In the following page, you configure the connection to the database. At this point, select the connection db_paracas and press the OK button. In order to build a page with a chart, we need to create a read-only view. For this reason, don't change anything, just press the Next button. (Move the mouse over the image to enlarge.) In this next step, we can create updateable views. But, we don't need this type of component. So, don't change anything. Click the Next button. Now, we need to allow the creation of read-only views. We will use this kind of component in our page; therefore select the table REQUEST, as shown next and press Next. Our next step will allow the creation of an application module. This component is necessary to display the read-only view in the whole application. Keep this screen with the suggested values and click the Finish button. Check the Application Navigator. You must have your components arranged in the same way as shown in the following screenshot: Our query must determine the number of requests for status. Therefore, it will be necessary to make some changes in the created component. To start, double-click on the view RequestView, select the Query category, and click on the Edit SQL Query option as shown in the following screenshot: In the window shown, modify the SQL as shown next and click the OK button. SELECT Request.STATUS, COUNT(*) COUNT_STATUSFROM REQUEST RequestGROUP BY Request.STATUS We only use the attributes Status and CountStatus. For this reason, choose the Attributes category, select the attributes that are not used, and press Delete selected attribute(s) as shown in the following screenshot: Save all changes and verify that the view is similar to that shown next:

(For more resources on Moodle, see here.) New look – new wording Let's compare the former view of the Add a Resource drop-down menu with the new one. In the following screenshot, the left side shows us the Moodle 2.0 view and the right shows us the Moodle 1.9 view: The first thing to notice is that the wording is simpler –no more confusion amongst teachers as to what constitutes a web page as opposed to a text page; no more explanation needed that Display a directory actually just means Show a folder of my resources. The developers of Moodle 2.0 have taken onboard comments made by trainers and frequent users that certain terms were misunderstood by beginners. In the past, I myself have had to reassure newbies that even though they think they know nothing about web design, it is safe to select Compose a web page because doing so will simply bring up a text box where you can type your information or instructions straight into Moodle. Similarly, not everyone understands that a directory is just a fancy name for a folder that can house a number of your resources. This has now been made clearer. The selection Link to a file or web site has also been altered as these are now dealt with in two different ways. Let's take each option one at a time and study it in more depth. Adding a file The link File replaces the Moodle 1.9 Link to a file or web site option and is the place where, within your course, you would ordinarily upload and display files such as a Microsoft PowerPoint slideshow or a PDF resource. Selecting this from the drop-down gives us the editing screen, the top part of which is shown in the following screenshot: In our How to Be Happy course, our teacher, Andy, is going to upload an Open Office (odt) file with a tip a day for staying cheerful in February, a somewhat grim month in the Northern Hemisphere. Here's how we do it: For Name, as in earlier versions of Moodle, type the text you wish students to click on to access the resource. For Description, type a description which we can later decide to display or not. An Admin can set it so you aren't required to type a description. Click Add to start uploading the document – the File Picker appears: If it's not offered by default, click Upload this file… Add the author name and license type Then, as with Moodle 19, click Browse… to locate the document and then Upload this file… to upload it. You'll be returned to the main editing screen where the document appears as a blue link. As we scroll down, and with Advanced set to Show, we see other settings, some new, and some familiar from previous versions of Moodle but with extra functionality: Display: Choose how you want the file to appear and if you want the actual file name and/or its description to be shown. Advanced: With this enabled, you can decide the size of the pop up window and whether or not to filter the content Common Module settings: (as with Moodle 1.9) Decide whether to make the document visible or not and to set it for groups/groupings (which are now enabled by default) Restrict availability: This will only appear if the setting has been enabled in site administration and is a feature that lets you decide when and under what conditions the file may be accessed. Activity completion: This will only appear if you've enabled it in your course. It's a feature allowing students to check off what they have done or teachers to set activities to be automatically checked as complete under certain circumstances. Save: According to your preference, as with Moodle 1.9 Displaying a file As we went through the settings to upload and show our February Beat The Blues tips, we noticed a drop-down option Display. It gives a variety of ways a file such as our .odt document can appear on the course page in Moodle 2.0. How they display will depend on their file type. Display: Automatic Leave this as the default if you want Moodle to decide for you! In the case of Andy's slideshow, it's the traditional way of displaying an uploaded document, where once clicked on, it appears with a prompt box saying something like (depending on your browser) "do you want to open or save this file?" Display: Embed This will show the Moodle page with heading, blocks, and footer. It will show the title/description of the item and display the file directly in the page as well, so is good for videos, flash animations and so on. Display: Force download When a user clicks on the file, the web browser pops up with a "where do you want to save this file?" box. Display: Open This offers no Moodle heading, blocks, footer or description; it just shows the file as it is. Display: In pop-up This will cause the link to the file to appear in a pop up window before prompting you to open or download it. You can set the size of the pop up window on the Advanced settings page. Site administration | plugins | Activity modules | file gives us two other display options if so desired. These are: Display: In frame This will show the Moodle heading and the file description, with the file displayed in a resizable area below Display: New window This is very much like 'in pop-up', but the new window is a full browser window, with menus and address bar, and so on Resource administration If we click to update our file once it has been uploaded, we can see a new area in the Settings block, giving us options to manage this uploaded resource. We've seen this before: when clicking to update an item, we can tweak it from here. Let's take a look at these: Edit settings Here's where we update the details, display options, and so on (obviously!). Locally assigned roles and Permissions Moodle 1.9 gave us the facility to assign roles and permissions locally to an individual resource, so this is not new. In Moodle 2.0 the site administrator has more control over who can assign which roles by default. Check Permissions This is new however and enables to us be doubly certain our students are allowed (and not allowed!) to access what we want them to. Let's try an example: suppose Andy hides his February tips until the end of January but that he would like one particular student, Emma, to be able to access them in advance of time. He will allow her to view the February document even though it is hidden. He needs to ensure she doesn't have the right to see any other of the hidden files until the appropriate time. Here's what to do: In Locally assigned roles, give Emma the teacher role. This will allow her to view hidden activities, and therefore, our hidden February tips. In Check permissions, select Emma and click Show this user's permissions. This brings up a table showing what Emma's permissions are in this file. She can view hidden activities, and therefore, would be able to see the hidden February resource in advance of the other students. We see that because Emma's been assigned locally the role of teacher in our February document she is allowed to view the hidden file—but as she is still a student in the course as a whole, she doesn't have this right elsewhere –so we are safe!

(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.) 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 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.