How-To Tutorials - Web Development

In a nutshell, the jQuery UI library provides the following: Completely configurable widgets like accordion, tabs, progressbar, datepicker, slider, autocomplete, dialog, and button Interactive features like draggable, droppable, resizable, selectable, and sortable Advanced animation effects like show, hide, toggle, blind, bounce, explode, fade, highlight, pulsate, puff, scale, slide, etc Customisable themes to suit the look and feel of your website Using jQuery and ASP.NET together In this article, we will primarily take a look at integration of jQuery UI with ASP.NET to build rich content quickly and easily. Read more: ASP.NET: Using jQuery UI Widgets Getting started Let's start by creating a new ASP.NET website Chapter9 in Visual Studio. Go to the download page of jQuery UI at http://jqueryui.com/download, which allows customizable downloads based on the features required in the web application. For the purpose of this article, we will download the default build as shown next: (Move the mouse over the image to enlarge.) jQuery UI allows various custom themes. We will select the Sunny theme for our project: Save the downloaded file. The download basically consists of the following: css folder consisting of the the theme files development-bundle folder consisting of demos, documents, raw script files, etc. js folder consisting of the minified version of jQuery library and jQuery UI Save the earlier mentioned css folder in the current project. Save the minified version of jQuery UI and jQuery library in a script folder js in the project. In addition to including the jQuery library on ASP.NET pages, also include the UI library as shown: <script src="js/jquery-1.4.1.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script> Include the downloaded theme on the aspx pages as follows: <link href="css/sunny/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" /> Now let's move on to the recipes and explore some of the powerful functionalities of jQuery UI. Creating an accordion control The jQuery accordion widget allows the creation of collapsible panels on the page without the need for page refresh. Using an accordion control, a single panel is displayed at a time while the remaining panels are hidden. Getting Ready Create a new web form Recipe1.aspx in the current project. Add a main content panel to the page. Within the main panel, add pairs of headers and subpanels as shown next: <asp:Panel id="contentArea" runat="server"> <h3><a href="#">Section 1</a></h3> <asp:Panel ID="Panel1" runat="server"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </asp:Panel> <h3><a href="#">Section 2</a></h3> <asp:Panel ID="Panel2" runat="server"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </asp:Panel> <h3><a href="#">Section 3</a></h3> <asp:Panel ID="Panel3" runat="server"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </asp:Panel> <h3><a href="#">Section 4</a></h3> <asp:Panel ID="Panel4" runat="server"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </asp:Panel> </asp:Panel> Add some styling to the main content panel as required: #contentArea { width: 300px; height: 100%; } Our accordion markup is now ready. We will now transform this markup into an accordion control using the functionalities of jQuery UI. How to do it... In the document.ready() function of the jQuery script block, apply the accordion() method to the main content panel: $("#contentArea").accordion(); Thus, the complete jQuery UI solution for the problem at hand is as follows: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#contentArea").accordion(); }); </script> How it works... Run the web page. The accordion control is displayed as shown in the following screenshot: Click on the respective panel headers to display the required panels. Note that the accordion control only displays the active panel at a time. The remaining panels are hidden from the user. There's more... For detailed documentation on the jQuery UI accordion widget, please visit http://jqueryui.com/demos/accordion/. Creating a tab control The jQuery UI tab widget helps to create tab controls quickly and easily on ASP.NET web pages. The tab control helps in organizing content on a page thus improving the presentation of bulky content. With the help of jQuery UI tab widget, the content can also be retrieved dynamically using AJAX. In this recipe, we will see a simple example of applying this powerful widget to ASP.NET forms. Getting Ready Create a new web form Recipe2.aspx in the current project. Add an ASP.NET container panel to the page. Within this container panel, add subpanels corresponding to the tab contents. Also add hyperlinks to each of the subpanels. Thus the complete aspx markup of the web form is as shown next: <form id="form1" runat="server"> <asp:panel id="contentArea" runat="server"> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab 4</a></li> </ul> <asp:panel ID="tab1" runat="server"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </asp:panel> <asp:panel ID="tab2" runat="server"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </asp:panel> <asp:panel ID="tab3" runat="server"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </asp:panel> <asp:panel ID="tab4" runat="server"> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </asp:panel> </asp:panel> </form> Next, we will see how we can transform this markup into a tab control using jQuery UI. How to do it... In the document.ready() function of the jQuery script block, apply the tabs() method to the container panel as follows: $("#contentArea").tabs(); Thus, the complete jQuery UI solution for creating the tab control is as follows: <script language="javascript" type="text/javascript" $(document).ready(function(){ $("#contentArea").tabs(); }); </script> How it works... Run the web form. The page displays the tabbed content as follows: Click on the respective tab headers to view the required content. There's more… For detailed documentation on the jQuery UI tabs widget, visit the jQuery website.

  WordPress 3 Search Engine Optimization Optimize your website for popularity with search engines         Read more about this book       (For more resources on WordPress, see here.) We will begin by setting up the goals for your Internet presence and determining how best to leverage WordPress' flexibility and power for maximum benefit. We'll examine how to best determine and reach out to the specific audience for your goods or services. Different Internet models require different strategies. For example, if your goal is instant e-commerce sales, you strategize differently than if your goal is a broad-based branding campaign. We'll also examine how to determine how competitive the existing search market is, and how to develop a plan to penetrate that market. It's important to leverage WordPress' strengths. WordPress can effortlessly help you build large, broad-based sites. It can also improve the speed and ease with which you publish new content. It serves up simple, text-based navigation menus that search engines crawl and index easily. WordPress' tagging, pingback, and trackBack features help other blogs and websites find and connect with your content. For these reasons, and quite a few more, WordPress is search ready. In this article, we will look at what WordPress already does for your SEO. Of course, WordPress is designed as a blogging platform and a content management platform—not as a platform purely for ranking. We'll look at what WordPress doesn't accomplish innately and how to address that. Finally, we'll look at how WordPress communicates with search engines and blog update services. Following this article, we'll know how to plan out a new site or improve an existing one, how to gauge WordPress' innate strengths and supplant its weaknesses, and learn how WordPress sites get found by search engines and blog engines. Setting goals for your business and website and getting inspiration A dizzying variety of websites run on the WordPress platform, everything from The Wall Street Journal's blog to the photo sharing comedy site PeopleofWalMart. com . Not every reader will have purely commercial intent in creating his or her web presence. However, all webmasters want more traffic and more visibility for their sites. With that in mind, to increase the reach, visibility, and ranking of your website, you'll want to develop your website plan based on the type of audience you are trying to reach, the type of business you run, and what your business goals are. Analyzing your audience You will obviously want to analyze the nature of your audience. Your website's content, its design, its features, and even the pixel width of the viewable area will depend on your audience. Is your audience senior citizens? If so, your design will need to incorporate large fonts and you will want to keep your design to a pixel width of 800 or less. Senior citizens can have difficulty reading small text and many use older computers with 800 pixel monitors. And you can forget about the integrated Twitter and Facebook feeds; most seniors aren't as tuned into those technologies as young people. You might simply alienate your target users by including features that aren't a fit for your audience. Does your audience include purchasers of web design services? If so, be prepared to dazzle them with up-to-date design and features. Similarly, if you intend to rely on building up your user base by developing viral content, you will want to incorporate social media sharing into your design. Give some thought to the type of users you want to reach, and design your site for your audience. This exercise will go a long way in helping you build a successful site. Analyzing your visitors' screen sizes Have you ever wondered about the monitor sizes of the viewers of your own site? Google Analytics (www.google.com/analytics), the ubiquitous free analytics tool offered by Google, offers this capability. To use it, log on to your Google Analytics account (or sign up if you don't have one) and select the website whose statistics you wish to examine. On the left menu, select Visitors, and expand the Browser Capabilities menu entry. Then select Screen Resolutions. Google Analytics will offer up a table and chart of all the monitor resolutions used by your viewers. Determining the goal of your website The design, style, and features of your website should be dictated by your goal. If your site is to be a destination site for instant sales or sign-ups, you want a website design more in the style of a single-purpose landing page that focuses principally on conversions. A landing page is a special-purpose, conversion-focused page that appears when a potential customer clicks on an advertisement or enters through a search query. The page should display the sales copy that is a logical extension of the advertisement or link, and should employ a very shallow conversion funnel . A conversion funnel tracks the series of steps that a user must undertake to get from the entry point on a website to the satisfaction of a purchase or other conversion event. Shallow conversion funnels have fewer steps and deeper conversion funnels have more steps. When designing conversion-focused landing pages, consider if you want to eliminate navigation choices entirely on the landing page. Logically, if you are trying to get a user to make an immediate purchase, what benefit is served by giving the user easier choices to click onto the other pages? Individualized page-by-page navigation can get clunky with WordPress; you might want to ensure that your WordPress template can easily handle these demands. (Move the mouse over the image to enlarge it.) The previous screenshot shows the expert landing page for Netfiix's DVD rental service. Note the absence of navigational choices. There are other sophisticated conversion tools as well: clear explanation of benefits, free trial, arrows, and a color guide to the reader to the conversion event. If you sell a technical product or high-end consulting services, you rely heavily on the creation of content and the organization and presentation of that content, on your WordPress site. Creating a large amount of content covering broad topics in your niche will establish thought leadership that will help you draw in and maintain new customers. In sites with large amounts of educational content, you'll want to make absolutely sure that your content is well organized and has an easy-to-follow navigation. If you will be relying on social media and other forms of viral marketing to build up your user base, you'd want to integrate social media plug-ins and widgets into your site. Plug-ins and widgets are third-party software tools that you install on your WordPress site to contribute to a new functionality. A popular sports site integrates the TweetMeme and Facebook connect widgets. When users retweet or share the article, it means links, traffic, and sales. When compounded with a large amount of content, the effect can be very powerful. Following the leaders Once you have determined the essential framework and niche for your site, look for best-in-class websites for your inspiration. Trends in design and features are changing constantly. Aim for up-to-the-minute design and features: enlightened design sells more products and services, and sophisticated features will help you convert and engage your visitors more. Likewise, ease of functionality will keep visitors on your website longer and keep them coming back. For design inspiration, you can visit any one of the hundreds of website design gallery sites. These gallery sites showcase great designs in all website niches. The following design gallery sites feature the latest and greatest trends in web design and features (note that all of these sites run on WordPress): Urban Trash (www.urbantrash.net/cssgallery/): This gallery is truly one of the best and should be the first stop when seeking design inspiration. CSS Elite (www.csselite.com): Another of the truly high-end CSS galleries. Many fine sites are featured here. CSSDrive (www.cssdrive.com): CSS Drive is one of the elite classes of directories, and CSS Drive has many other design-related features as well. For general inspiration on everything from website design, to more specialized discussion of the best design for website elements such as sign-up boxes and footers, head to Smashing Magazine , especially its "inspiration" category (http://smashingmagazine.com/category/inspiration/). Ready-made WordPress designs by leading designers are available for purchase off-the-shelf at ThemeForest.net. These templates are resold to others, so they won't be exclusive to your site. A head's up: these top-end themes are full of advanced custom features. They might require a little effort to get them to display exactly as you want. For landing pages, get inspiration from retail monoliths in competitive search markets. DishNetwork and Netfiix have excellent landing pages. Sears' home improvement division serves up sophisticated landing pages for services such as vinyl siding and replacement windows. With thousands of hits per day, you can bet these retail giants are testing and retesting their landing pages periodically. You can save yourself the trouble and budget of your early-stage testing by employing the lessons that these giants have already put into practice. For navigation, usability, and site layout clues for large content-based sites, look for the blogging super-sites such as Blogs.wsj.com , POLITICO.com , Huffingtonpost. com , and Wikipedia.com Gauging competition in the search market Ideally, before you launch your site, you will want to gauge the competitive marketplace. On the Web, you have two spheres of competition: One sphere is traditional business competition: the competition for price, quality, and service in the consumer marketplace The other sphere of competition is search competition; competition for clicks, page views, conversions, user sign-ups, new visitors, returning visitors, search placement, and all the other metrics than help drive a web-based business The obvious way to get started gauging the search marketplace is to run some sample searches on the terms you believe your future customers might use when seeking out your products or services. The search leaders in your marketplace will be easy to spot; they will be in the first six positions in a Google search. While aiming for the first six positions, don't think in terms of the first page of a Google search. Studies show that the first five or six positions in a Google search yield 80 to 90 percent of the click-throughs. The first page of Google is a good milestone, but the highest positions on a search results page will yield significantly higher traffic than the bottom three positions on a search results page Once you've identified the five or six websites that are highly competitive and searches, you want to analyze what they're doing right and what you'll need to do to compete with them. Here's how to gauge the competition: Don't focus on the website in terms of the number one position for a given search. That may be too lofty a goal for the short term. Look at the sites in positions 4, 5, and 6. These positions will be your initial goal. You'll need to match or outdo these websites to earn those positions. First, you want to determine the Google PageRank of your competitor's sites. PageRank is a generalized, but helpful, indicator of the quality and number of inbound links that your competitors' websites have earned. Install a browser plug-in that shows the PageRank of any site to which you browse. For Firefox, try the SearchStatus plug-in (available at http://www.quirk.biz/searchstatus/). For Chrome, use SEO Site Tools (available through the Google Chrome Extensions gallery at https://chrome.google.com/extensions). Both of these tools are free, and they'll display a wide array of important SEO factors for any site you visit. How old are the domains of your competitors' websites? Older sites tend to outrank newer sites. If you are launching a new domain, you will most likely need to outpace your older competitors in other ways such as building more links or employing more advanced on-page optimization. Site age is a factor that can't be overcome with brains or hard work (although you can purchase an older, existing domain in the after market). Look at the size and scale of competing websites. You'll need to at least approach the size of the smallest of your competitors to place well. You will want to inspect your competitors' inbound links. Where are they getting their links from and how many links have they accumulated? To obtain a list of backlinks for any website, visit the Yahoo! Site Explorer at siteexplorer.search.yahoo.com. This free tool displays up to 1,000 links for any site. If you want to see more than 1,000 links, you'll need to purchase inbound link analysis software like SEO Spyglass from link-assistant.com. For most purposes, 1,000 links will give you a clear picture of where a site's links are coming from. Don't worry about high links counts because low-value links in large numbers are easy to overcome; high- value links like .edu links, links from article content, and links from high- PageRank sites will take more effort to surmount. You will want to examine the site's on-page optimization. Are the webmasters utilizing effective title tags and meta tags? Are they using heading tags and is their on-page text keyword-focused? If they aren't, you may be able to best beat your competitors through more effective on-page optimization. Don't forget to look at conversion. Is your competitor's site well-designed to convert his or her visitors into customers? If not, you might edge out your competition with better conversion techniques. When you analyze your competition, you are determining the standard you will need to meet or beat to earn competitive search placement. Don't be discouraged by well-placed competitors. 99 percent of all the websites are not well optimized. As you learn more, you'll be surprised how many webmasters are not employing effective optimization. Your goal as you develop or improve your website will be to do just a little bit more than your competition. Google and the other search engines will be happy to return your content in search results in favor of others if you meet a higher standard.

  WordPress 3 Search Engine Optimization Optimize your website for popularity with search engines         Read more about this book       (For more resources on WordPress, see here.) Typical black hat techniques There is a wide range of black hat techniques fully available to all webmasters. Some techniques can improve rankings in short term, but generally not to the extent that legitimate web development would, if pursued with the same effort. The risk of black hat techniques is that they are routinely detected and punished. Black hat is never the way to go for a legitimate business, and pursuing black hat techniques can get your site (or sites) permanently banned and will also require you to build an entirely new website with an entirely new domain name. We will examine a few black hat techniques to help you avoid them. Hidden text on web pages Hidden text is the text that through either coding or coloring does not appear to users, but appears to search engines. Hidden text is a commonly-used technique, and would be better described as gray hat. It tends not to be severely punished when detected. One technique relies on the coloring of elements. When the color of a text element is set to the same color as the background (either through CSS or HTML coding), then the text disappears from human readers while still visible to search spiders. Unfortunately, for webmasters employing this technique, it's entirely detectible by Google. More easily detectible is the use of the CSS property display: none. In the language of CSS, this directs browsers to not display the text that is defined by that element. This technique is easily detectible by search engines. There is an obvious alternative to employing hidden text: Simply use your desired keywords in the text of your content and display the text to both users and search spiders. Spider detection, cloaking, redirection, and doorway pages Cloaking and spider detection are related techniques. Cloaking is a black hat SEO technique whereby the content presented to search engine spiders (via search spider detection) differs from the content presented to users. Who would employ such a technique? Cloaking is employed principally by sellers of products typically promoted by spam, such as pharmaceutics, adult sites, and gambling sites. Since legitimate search traffic is difficult to obtain in these niches, the purveyors of these products employ cloaking to gain visitors. Traditional cloaking relies upon spider detection. When a search spider visits a website, the headers accompanying a page view request identify the spider by names such as Goolgebot (Google's spider) or Slurp (Inktomi's spider). Conversely, an ordinary web browser (presumably with a human operator) will identify itself as Mozilla, Internet Explorer, or Safari, as the case may be. With simple JavaScript or with server configuration, it is quite easy to identify the requesting browser and deliver one version of a page to search spiders and another version of the page to human browsers. All you really need is to know the names of the spiders, which are publicly known. A variation of cloaking is a doorway page. A doorway page is a page through which human visitors are quickly redirected (through a meta refresh or JavaScript) to a destination page. Search spiders, however, index the doorway page, and not the destination page. Although the technique differs in execution, the effect is the same: Human visitors see one page, and the search engines see another. The potential harm from cloaking goes beyond search engine manipulation. More often than not, the true destination pages in a cloaking scheme are used for the transmission of malware, viruses, and Trojans. Because the search engines aren't necessarily reading the true destination pages, the malicious code isn't detected. Any type of cloaking, when reported or detected, is almost certain to result in a severe Google penalty, such as removal of a site from the search engine indexes. Linking to bad neighborhoods and link farms A bad neighborhood is a website or a network of websites that either earns inbound links through illegitimate means or employs other "black hat on-page" techniques such as cloaking, and redirects them. A link farm is a website that offers almost no content, but serves solely for the purpose of listing links. Link farms, in turn, offer links to other websites to increase the rankings of these sites. A wide range of black hat techniques can get a website labeled as a bad neighborhood. A quick test you can employ to determine if a site is a bad neighborhood is by entering the domain name as a part of the specialized Google search query, "site:the-website-domain.com" to see if Google displays any pages of that website in its index. If Google returns no results, the website is either brand new or has been removed from Google's index—a possible indicator that it has been labeled a bad neighborhood. Another quick test is to check the site's PageRank and compare the figure to the number of inbound links pointing to the site. If a site has a large number of backlinks but has a PageRank of zero, which would tend to indicate that its PageRank has been manually adjusted downwards due to a violation of Google's Webmaster Guidelines. If both of the previous tests are either positive or inconclusive, you would still be wise to give the site a "smell test". Here are some questions to ask when determining if a site might be deemed as a bad neighborhood: Does the site offer meaningful content? Did you detect any redirection while visiting the site? Did you get any virus warning while visiting the site? Is the site a little more than lists of links or text polluted with high numbers of links? Check the website's backlink profile. Are the links solely low-value inbound links? If it isn't a site you would engage with when visiting, don't link to it. Google Webmaster Guidelines Google Webmaster Guidelines are a set of written rules and prohibitions that outline recommended and forbidden website practices. You can find these webmaster guidelines at: http://www.google.com/support/webmasters/bin/ answer.py?hl=en&answer=35769, though you'll find it easier to search for "Google Webmaster Guidelines" and click on the top search result. You should read through the Google Webmaster Guidelines and refer to them occasionally. The guidelines are divided into design and content guidelines, technical guidelines, and quality guidelines. Google Webmaster Guidelines in a nutshell At their core, Google Webmaster Guidelines aim for quality in the technology underlying websites in their index, high-quality content, and also discourage manipulation of search results through deceptive techniques. All search engines have webmaster guidelines, but if you follow Google's dictates, you will not run afoul of any of the other search engines. Here, we'll discuss only the Google's rules. Google's design and content guidelines instruct that your site should have a clear navigational hierarchy with text links rather than image links. The guidelines specifically note that each page "should be reachable from at least one static text link". Because WordPress builds text-based, hierarchical navigation naturally, your site will also meet that rule naturally. The guidelines continue by instructing that your site should load quickly and display consistently among different browsers. The warnings come in Google's quality guidelines; in this section, you'll see how Google warns against a wide range of black hat techniques such as the following: Using hidden text or hidden links, elements that through coloring, font size, or CSS display properties to show to the search engines but do not show them to the users. The use of cloaking or "sneaky redirects". Cloaking means a script that detects search engine spiders and displays one version of a website to users and displays an alternate version to the search engines. The use of repetitive, automated queries to Google. Some unscrupulous software vendors (Google mentions one by name, WebPosition Gold, which is still in the market, luring unsuspecting webmasters) sell software and services that repeatedly query Google to determine website rankings. Google does allow such queries in some instances through their AJAX Search API Key—but you need to apply for one and abide by the terms of its use. The creation of multiple sites or pages that consist solely of duplicate content that appears on other web properties. The posting or installation of scripts that behave maliciously towards users, such as with viruses, trojans, browser interceptors, or other badware. Participation in link schemes. Google is quite public that it values inbound links as a measure of site quality, so it is ever vigilant to detect and punish illegitimate link programs. Linking to bad neighborhoods. A bad neighborhood means a website that uses illegitimate, forbidden techniques to earn inbound links or traffic. Stuffing keywords onto pages in order to fool search spiders. Keyword stuffing is "the oldest trick in the book". It's not only forbidden, but also highly ineffective at influencing search results and highly annoying to visitors. When Google detects violations of its guidelines Google, which is nearly an entirely automated system, is surprisingly capable of detecting violations of its guidelines. Google encourages user-reporting of spam websites, cloaked pages, and hidden text (through their page here: https://www. google.com/webmasters/tools/spamreport). They maintain an active antispam department that is fully engaged in an ongoing improvement in both, manual punishments for offending sites, and algorithmic improvements for detecting violations. When paid link abuses are detected, Google will nearly always punish the linking site, not necessarily the site receiving the link—even though the receiving site is the one earning a ranking benefit. At first glance, this may seem counter-intuitive, but there is a reason. If Google punished the site receiving a forbidden paid link, then any site owner could knock a competitor's website by buying a forbidden link, pointing to the competitor, and then reporting the link as spam. When an on-page black hat or gray hat element is detected, the penalty will be imposed upon the offending site. The penalties range from a ranking adjustment to an outright ban from search engine results. Generally, the penalty matches the crime; the more egregious penalties flow from more egregious violations. We need to draw a distinction, however, between a Google ban, penalty, and algorithmic filtering. Algorithmic filtering is simply an adjustment to the rankings or indexing of a site. If you publish content that is a duplicate of the other content on the Web, and Google doesn't rank or index that page, that's not a penalty, it's simply the search engine algorithm operating properly. If all of your pages are removed from the search index, that is most likely a ban. If the highest ranking you can achieve is position 40 for any search phrase, that could potentially be a penalty called a "-40 penalty". All search engines can impose discipline upon websites, but Google is the most strict and imposes far more penalties than the other search engines, so we will largely discuss Google here. Filtering is not a penalty; it is an adjustment that can be remedied by undoing the condition that led to the it. Filtering can occur for a variety of reasons but is often imposed following over optimization. For example, if your backlink profile comprises links of which 80% use the same anchor text, you might trigger a filter. The effect of a penalty or filter is the same: decreased rankings and traffic. In the following section, we'll look at a wide variety of known Google filters and penalties, and learn how to address them.

Moodle 2.0 for Business Beginner's Guide Implement Moodle in your business to streamline your interview, training, and internal communication processes         Using Moodle to manage compliance training Compliance training is a very important part of an organization's risk management strategy. Moodle has a number of tools that you can use to deliver and manage required training for your employees. In this article we will explore the lesson module as well as some useful user management tools to ensure your employees receive the training they need. Using the lesson module as a training tool Every human resources manager must understand and comply with a multitude of regulations and establish policies and procedures to ensure their company is in compliance. Additionally, there are several internal risks to consider including work-life discrimination, protection of confidential information, workplace privacy risks, and so on. Many companies develop training programs as a way to mitigate and avoid certain risks by making employees aware of the company policies and procedures. Moodle's lesson module is a useful tool for this type of training. Using Moodle's inbuilt lesson module is also a time and cost-effective alternative to relying on third-party authoring tools that publish Scorm. The lesson module uses two different page types, which can be implemented in several different ways to create an interactive learning experience for the user. First, the question page asks the user a question and then provides the user with feedback based on their response. The question pages are graded and contribute to a user's grade. The second page type, the content page, presents content and navigation options without grading the user's response. Creating a lesson module Let's take a business case study example. You are developing a lesson module on basic office safety. To train employees on basic fire safety, you decide to use a common active training method—the case study. Before we dive into the lesson module, let's take a moment to decide how we're going to implement this. First, we are going to use a content page to present a realistic building fire scenario and have the learner choose their first action. Second, we will create a question page to present the learner with a scored choice regarding fire safety. Third, we need to then come up with feedback based on their responses. In reality, the fire safety plan would probably be part of a larger emergency action plan. However, for the purposes of this article we are going to keep things simple and address a scenario that may be used when training employees on fire safety. Lesson modules can get quite complicated if you let them, depending on how many choices the reader has for a given scenario and how long the chain of reasoning is. Many experts suggest developing a flowchart to plan out your lesson module before creating it in Moodle. For our purposes, we will just take it through the first choice to show you how to use the content page and then a question page. Once you have that down, it will be easy to keep repeating the process to make your lesson module as simple or complicated as you'd like. Time for action - creating a lesson module Log in to your Moodle site as an administrator. Create a course for your compliance training by following the instructions in Getting Started with Moodle 2.0 for Business. Click the Turn editing on button in the top-right corner. Go to the section you want to add the lesson to and from the Add an activity... drop-down menu, select Lesson. You should now be on the Adding a new Lesson page. The first section of the page is the General section. In the Name field, enter the title of your lesson, for example "Fire Safety". If you want to enter a time limit for the lesson, click the checkbox to the left of Enable at the Time limit (minutes) field and enter the time limit you want implemented, in minutes, for the lesson. For the purposes of this example, assume that if I do not give you a specific value to enter for a field, leave it set at the default. If you want to restrict the availability of the lesson to certain dates, then click the checkboxes next to Enable and enter the Available from date and Deadline date. Under Maximum number of answers, select the maximum number of answers that may be used in the lesson. For example, if it only consists of True/False questions, this would be 2. There are a lot of settings in the lesson module. You are not expected to remember them all. I don't! Next to most of the settings is a ? icon. Select this icon for a description of the setting anytime you can't remember what its purpose is. Grade is the next section on the Adding a new Lesson page. For Grade, select the maximum score that can be given for the lesson from the drop-down menu. If there is no grade, then select no grade from the drop-down menu. We are not going to use question pages for our case study example, so for here select no grade. The Grade category refers to the category in the grade book. We have not set the grade book up yet, so leave this as the default Uncategorised. There will be nothing else available yet in this drop-down menu if you have not set up categories in the grade book. Next go to the Grade options section and select your settings. In the Practice lesson setting, select No from the drop-down menu if you want the grades for this lesson to be recorded. The Custom scoring setting allows you to give a score (positive or negative) for each answer. For our example, select No. This could be a useful tool if there are different levels of right and wrong answers and you wish to capture this in the grade book. If you want to allow re-takes, select Yes from the drop-down menu at the Re-takes allowed setting. If you selected Yes in the previous setting and are allowing re-takes, then you need to select the method for grading in the next setting—Handing of re-takes. Your two choices from the drop-down menu are Use mean or Use maximum. The Display ongoing score setting, if Yes is selected from the drop-down menu, will allow the user to see their current score out of total possible thus far in the lesson. The following screenshot shows the General, Grade, and Grade options sections of the Create a lesson page. Now go to the Flow control section and select your settings. Allow student review, if Yes is selected, gives the user the option of going through the lesson again from the start after they have completed the lesson. Provide option to try a question again, select Yes from the drop-down menu to give the user the option to take the question again for no credit or continue with the lesson if they answer a question incorrectly. If you selected Yes for the previous setting, then in the next setting, Maximum number of attempts, you must select the number of attempts allowed from the drop-down menu. If the user answers the question incorrectly repeatedly, once the maximum number of attempts is reached the user will proceed to the next page in the lesson. If you want the default feedback for correct and incorrect answers to be shown when no feedback has been specified for the question, then at the Display default feedback section, select Yes from the drop-down menu. Default feedback for a correct answer is "That's the correct answer" and for an incorrect answer is "That's the wrong answer". If Yes is selected for the Progress bar setting, then a progress bar is displayed at the bottom of each page. When set to Yes the Display left menu setting provides a list of all the pages in the lesson on the left side of each lesson page. The Pop-up to file or web page section allows you to choose a file to display in a pop-up window at the beginning of a lesson. It also displays a link to reopen the pop-up window in every subsequent page in the lesson. The Dependent on section allows you to restrict access to the lesson based on performance in another lesson in the same course. Restrictions can be based on any combination of completion, time spent, or minimum grade required. Under Dependent on, select the lesson required before access to this lesson from the drop-down menu. Time spent (minutes): If time spent is one of the requirements, then enter the minimum number of minutes required. Completed, if completion is a requirement, then check the box. If a minimum grade is required, then for the Grade better than (%) setting, enter the minimum grade required. The following screenshot shows the Flow control, Pop-up to file or web page, and Dependent on sections of the create a lesson page. Once you have entered all your settings on the lesson page, click on the Save and display button at the bottom of the page. You are now on the editing page for the lesson you just created. See the following example: What just happened? We have just created the shell of a lesson activity for our learners. In the next steps we will add content to the lesson and learn how to ask the learner questions. Time for action - creating a content page Now that we have the shell of the lesson, we can begin to add content. We'll start with adding a simple content page. From the editing page for the lesson you just created, select Add a content page. Enter a descriptive title in the box next to Page title. For our example, we will enter Building is on fire. Enter the content for this page in the Page contents text area. If you want the user's choices for the lesson page to be displayed horizontally, then check the box to the left of Arrange content buttons horizontally? You have now filled in the Add a content page section; see the following screenshot for our example: In the Add a content page section you will find sections for Content 1, Content 2, and so on. This is where we will create the choices for the user. For our example, we will enter "Grab the fire extinguisher and look for smoke" in the Description text area for Content 1. Leave the drop-down menu below the text area on the default Moodle auto-format. For now leave the Jump drop-down menu as is; we will come back to this later. In the Content 2 section, enter your second choice in the Description text area. For our example, we will enter "Walk calmly to the exit and exit the building." Now scroll down to the bottom of the page and select Add a question page. This will save the content page you just created. You will now be on the editing page for the lesson you are creating and you should be able to see the content you just added. See the following screenshot for our example: What just happened? We have now added a content page to our lesson. Content pages can include a wide variety of media, including text, audio, video, and Flash. Next we will look at how to add a scored Question page to test the learner's understanding. Time for action - creating a question page Now we are going to create a question page in our lesson. Question pages are scored and provide the user with feedback on their choices. From the edit page, click the Expanded View option at the top of the page. Then select the Add a question page here link below the content page you just created. From the Select a question type drop-down menu select the question type you want to use. For our example, we are going to select Multichoice. Next click on the Add a question page button. For Page title, enter a title for your question page. For our example, we will enter "Why is this a bad idea?". In the Page contents text area, enter the question you want to ask the learner. For our example, we will enter "Why is grabbing the fire extinguisher and heading for smoke a bad idea?". Below the Page contents text area you will see an Options field; check the box next to Multiple-answer if you are creating a question with more than one correct answer. Our example is going to be single response; therefore we will not select this box. Below the Add a question page section, you will see the Answer 1, Answer 2, and so on, sections where you will enter the possible list of answers the learner will have to choose from. In the Answer 1 section, enter one of the possible answers to the question in the Answer text area. For our example, we will enter "It's dangerous. You should leave it to the professionals". Next in the Response text area, enter the response you want the learner to receive if they select this choice. For our example, we will enter "Firefighters are trained to put out the fire and have the necessary protective gear". Then move to the Answer 2 section and put your second choice and response. For this example, we will have "You can't put out an office fire with a fire extinguisher" for the Answer and "You might be able to put out the fire, but without a respirator you might be overcome by smoke" for the Response. For the correct answer, enter a "1" in the Score field located at the bottom of the corresponding Answer section. Once you have entered all your answers, scroll down to the bottom of the page and select Add a question page to save. Now you are back on the Lesson edit screen and will see the Content page and the Question page you just created. See the following screenshot. What just happened? We have now created a question page to test the learner's understanding of the lesson material. We now need to go back and begin to link our pages together with page jumps. Time for action - creating page jumps You have now added a content page and a question page, but you're not done yet. Now we need to link the question page to the content page using a page jump. The page jump is simply the link between pages. We need to go back to the Jump field we skipped previously: Go back to the content page you created by selecting the edit icon to the right of the Building is on fire page. The edit icon looks like a hand holding a pencil. Scroll down to Content 1 and from the Jump drop-down menu, select the question page you created. For our example, it was Why is this a bad idea?. Set the jump for Content 2 to the End of the Lesson. If the user selects this option, they will end the lesson. Scroll down to the bottom of the page and click on the Save page button. You will now be back at the edit lesson page and the Jump 1: field will now read Why is this a bad idea?. What just happened? We have now linked our pages together using page jumps. In a lesson module, page jumps are used for both navigation and to provide feedback pages for questions. Now we need to go through and test our lesson to make sure everything works.

  CMS Made Simple Development Cookbook Over 70 simple but incredibly effective recipes for extending CMS Made Simple with detailed explanations – useful for beginners and experts alike!         Read more about this book       (For more resources on Content management, see here.) Introduction CMS Made Simple is a powerful system for creating websites. Even the base install enables you to easily produce sites with many sophisticated features. There are times, however, when you need to be able to do things that are beyond the basic capabilities. You can often find pre-made extensions on the official CMS Made Simple sites: Tags and Modules in the Developer's Forge (or directly through the Module Manager), and examples of User-Defined Tags on Wiki or posted in the forum. What are these different kinds of extension? This article will answer that question in greater detail. However, we will define them briefly here. All three types of extension share some things in common: they are PHP code which can be embedded in site pages, templates, or Global Content Blocks, or may be called by other code. A User-Defined Tag is distinct in that you can create and edit it through the CMSMS admin area. A Tag is similar, but must be placed as a file on your server, and provides more information to the site administrator. A module has available to it the rich functionality of the Module API, and enables the creation of much more complex applications. As mentioned before, there is a wealth of pre-made extensions which are available to you. But even if these pre-made extensions don't meet your needs, all is not lost. You can jump in and create your own extensions! You will discover that the power of CMS Made Simple is only limited by your imagination. In this article, we will learn how to approach the problem you're trying to solve. Is it something that can be solved without writing an extension? Would you be able to use or adapt an existing extension? If not, what conditions will the extension need to handle? The requirements that you think of will help you determine what kind of extension you should implement. There are three recipes here that will help you to identify which kind of extension is appropriate for a given problem, and three recipes that go over the basics of creating each major type. Will a User-Defined Tag solve my problem? You have reached the point where you know you need to extend CMS Made Simple to solve some particular problem, but you may not yet know what approach to take. Your options are to create a Tag, a User-Defined Tag (UDT), or a Module, but which will be best to solve your specific problem? This recipe will help you examine your problem and consider whether creating a UDT is the most appropriate solution. How to do it... First, we determine if the problem you want to solve is one that will require you to write some custom code. This is the easy part. You've already considered whether or not an existing solution will suffice and have decided that it will not. So the next step is to figure out whether or not a User-Defined Tag is the correct approach to solving the problem. Go through the following list, and for each item, determine if it applies to the problem you are trying to solve. Feel free to write down a list of your answers (yes/no). Can your problem be solved with Smarty logic or standard CMS authoring practices like using Global Content Blocks in your page template? Are you trying to solve a problem that requires multiple actions? An example of multiple actions would be both displaying a form and processing its results. Will you need to support localization and internationalization to solve your problem? For example, if your code will be displaying messages, will the messages need to be translated into multiple languages? Will your solution require an Administration panel? Will you want to share this solution with other people so that they can install it into their own CMS Made Simple sites? Do you need to create new database tables or set up new preferences to solve your problem? Do you want your code to display help text in the Admin area, so site administrators understand what parameters are available and what the code does? Will your solution serve as a Smarty modifier (a modifier in Smarty is a function that does something to convert a variable for display)? An example of a Smarty modifier would be {$variableuppercase|} where the modifier ("uppercase") serves to transform the variable ("$variable"). If you answered "no" to all of the above questions, a User-Defined Tag is a good candidate! How it works... A User-Defined Tag is a way to connect a tag, that will be recognized by Smarty, to an arbitrary bit of PHP code. That PHP code can do anything. While there are very few things that cannot be done in CMS Made Simple using UDTs, it doesn't necessarily mean that a UDT is the best approach for everything. Because User-Defined Tags are so versatile, the best way to determine if they are the ideal approach is by disqualification. We ask questions about the few things for which UDTs are less optimal, to see if any of those things match our requirements. If none of them match, then a User-Defined Tag is probably the best approach. If we do find that our requirements include functionality for which UDTs are not ideally suited, we should consider using a Tag or a module instead. For now, let's look at those qualifying questions again and examine why they would encourage us to use a different approach. Disqualifying Question If you answered "Yes" Can the problem be solved by simply using Smarty? We don't need to write any PHP code at all! Does your problem require multiple actions? It is, in fact, possible to handle multiple actions using a User- Defined Tag, but it is not elegant. If you need to support multiple actions, the CMS Made Simple Module API has extensive support for doing so, as well as conventions that will help keep the code separated nicely into maintainable chunks. Do you need localization or internationalization? Again, this would be possible to do in a User-Defined Tag, but you would have to do all the work. The Module API provides utilities for simplifying this enormously. Will you need an Administration Panel? There is no easy way to implement an Administration panel in a UDT, so this would strongly push you in the direction of using a Module, where a rich set of functions make the task easier. Will you want to share your code? While nothing would stop you from sharing the code you write as a User-Defined Tag, there are neither facilities for making the process simple nor standards for documenting the UDT. Furthermore, UDTs exist only in the database, as contrasted with Tags and Modules that exist as files, so they are not as easy to simply package up and share. Do you need to create database tables or preferences? You could write logic into your UDT to check on the existence and conditionally create database tables or preferences, but it would be easier to use the Module API that has specific support and standards for doing those operations. Do you want your code to display help text in the Admin area? As mentioned before, User-Defined Tags offer no facility for displaying help text to the Admin. Both Tags and Modules, on the other hand, have standard methods for doing so. Will your solution serve as a Smarty modifier? User-Defined Tags cannot natively work as Smarty modifiers, while Tags can do so easily. Will a Tag Solve My Problem? As in the previous recipe, you know that we have three different possibilities for extending CMS Made Simple and solving a problem: User-Defined Tag, Tags, and Modules. Deciding which of these is the best approach, however, requires additional knowledge about the strengths and weaknesses of each technique. This recipe will help you examine your problem and consider whether creating a Tag is the most appropriate solution. How to do it... The criteria for deciding to use a Tag to extend CMS Made Simple are quite similar to the criteria for a User-Defined Tag. To figure this out, consult the following list, and determine if each item applies to the problem you are trying to solve. Feel free to write down a list of your answers (yes/no). Can your problem be solved with Smarty logic in your page template? Are you trying to solve a problem that requires multiple actions? An example of multiple actions would be both displaying a form and processing its results. Will you need to support localization and internationalization to solve your problem? For example, if your code will be displaying messages, will the messages need to be translated into multiple languages? Will your solution require an Administration panel? Do you need to create new database tables or set up new preferences to solve your problem? If you answered "no" to all of the above questions, either a Tag or a User-Defined Tag would be a viable approach. To decide whether a Tag would be better than a UDT, consider the following questions: Will you want to share this solution with other people so they can install it into their own CMS Made Simple sites, or will you want to reuse this code yourself on other sites? Do you want your code to display help text in the Admin area, so site administrators understand what parameters are available and what the code does? Will your solution serve as a Smarty modifier? A Smarty modifier is a function that reformats a variable for display, for example, {$variableuppercase}} where the modifier ("uppercase") serves to transform the variable ("$variable"). If you answer "yes" to any of these three questions, you should write a Tag instead of a User-Defined Tag. How it works... A Tag is a way to connect a Smarty tag to some PHP code. The PHP code can do anything. Like in the case of User-Defined Tags, there are very few things that cannot be done in CMS Made Simple using Tags. Because Tags are so versatile, the best way to determine if they are the ideal approach is by disqualification. We ask questions about the few things for which Tags are not ideal, to see if any of those things match our requirements. If none of them match, then the problem could be solved by either a Tag or a User-Defined Tag. To make the decision between those two approaches, we consider a few other criteria that will steer us in the right direction. Let's consider the disqualifying questions again and examine why they would encourage us to use a different approach. The first five questions are the same as they were for User-Defined Tags. Disqualifying Question If you answered "Yes" Can the problem be solved simply using Smarty? If this is the case, we don't need to extend CMS Made Simple at all! Does your problem require multiple actions? It is, in fact, possible to handle multiple actions using a Tag, but the CMS Made Simple Module API has extensive support to simplify multiple actions, as well as conventions that will help keep the code separated nicely into maintainable chunks. Thus a Module would be a much better choice. Do you need localization or internationalization? These features could theoretically be implemented using a Tag, but there is no built-in support for either. The Module API, on the other hand, has facilities specifically to simplify those tasks. Will you need an Administration Panel? There is no easy way to implement an Administration panel in a Tag, while the Module API has numerous methods specifically for this purpose. Do you need to create database tables or preferences? You could write logic into your Tag to check on the existence and conditionally create database tables or preferences, but it would be easier to use the Module API which has specific support and standards for doing those operations. Now, let's consider the three things that differentiate a Tag from a User-Defined Tag: Tag Qualifying Question If you answered "Yes" Will you be sharing this solution with other people? A Tag is stored as a file on the server, which makes it easier to share with other CMS Made Simple users, since they can simply place the file in their own installation. A User-Defined Tag, on the other hand, is stored in the database, that adds extra steps if you want to share it. Do you want your code to display help text in the Admin area? The structure of a Tag has a special method for presenting information to the site administrator, while a User-Defined Tag has no such mechanism. Will your solution serve as a Smarty modifier? There are several kinds of Tags, including Smarty modifier tags. There is only one kind of User-Defined Tag, and it will not work as a Smarty modifier. Will a Module solve my problem? The previous two recipes have shown you how to assess two possible types of CMS extension, and to see if they are optimal for any specific problem. This recipe rounds out the analysis and shows you how to determine whether creating a Module is the most appropriate solution. How to do it... By examining your requirements, and comparing them to the strengths of the Module API, we can figure out whether or not a Module is the best way to implement your extension. To do so, consult the following list, and determine if each item applies to the problem you are trying to solve. Feel free to write down a list of your answers (yes/no). Are you trying to solve a problem that requires multiple actions? An example of multiple actions would be both displaying a form and processing its results. Will you need to support localization and internationalization to solve your problem? For example, if your code will be displaying messages, will the messages need to be translated into multiple languages? Will your solution require an Administration panel? Will you want to share this solution with other people so they can install it into their own CMS Made Simple sites? Do you need to create new database tables or set up new preferences to solve your problem? Do you want your code to display help text in the Admin area, so site administrators understand what parameters are available and what the code does? If you answered "yes" to any of the above questions, a Module is going to be the best way to implement your extension—with one possible exception. If you want to write an extension that you can apply to Smarty variables within a template to reformat their output (that is, a Smarty modifier), you will need to use a Tag. However, outside of that one case, a Module will be your best bet. If you answered "no" to all of the above questions, you could still use a module, but you might want to consider using a Tag or User-Defined Tag, as you will still be able to solve your problem with less complexity and overhead. How it works... A Module is PHP code that extends the CMSModule Class, which means that you start with a rich API that will save you a great deal of work. Module code can do virtually anything that PHP can do. The only thing that Modules cannot do (and which Tags can do) is act directly as Smarty modifiers. Modules are extremely powerful and versatile, but that power comes with additional complexity. If you find that it would be possible to solve your problem with a Tag or User-Defined Tag, you should opt for the simpler approach. If, however, your requirements go beyond the capabilities of those extensions, there are very few limits to what you can accomplish with a Module!  

  Moodle 2.0 for Business Beginner's Guide Implement Moodle in your business to streamline your interview, training, and internal communication processes         Read more about this book       (For more resources on Moodle, see here.) So let's get on with it... Why Moodle? Moodle is an open source Learning Management System (LMS) used by universities, K-12 schools, and both small and large businesses to deliver training over the Web. The Moodle project was created by Martin Dougiamas, a computer scientist and educator, who started as an LMS administrator at a university in Perth, Australia. He grew frustrated with the system's limitations as well as the closed nature of the software which made it difficult to extend. Martin started Moodle with the idea of building the LMS based on learning theory, not software design. Moodle is based on five learning ideas: All of us are potential teachers as well as learners—in a true collaborative environment we are both We learn particularly well from the act of creating or expressing something for others to see We learn a lot by just observing the activity of our peers By understanding the contexts of others, we can teach in a more transformational way A learning environment needs to be flexible and adaptable, so that it can quickly respond to the needs of the participants within it With these five points as reference, the Moodle developer community has developed an LMS with the flexibility to address a wider range of business issues than most closed source systems. Throughout this article we will explore new ways to use the social features of Moodle to create a learning platform to deliver real business value. Moodle has seen explosive growth over the past five years. In 2005, as Moodle began to gain traction in higher education, there were under 3,000 Moodle sites around the world. As of this writing in July, 2010, there were 51,000 Moodle sites registered with Moodle.org. These sites hosted 36 million users in 214 countries. The latest statistics on Moodle use are always available at the Moodle.org site (http://moodle.org/stats). As Moodle has matured as a learning platform, many corporations have found they can save money and provide critical training services with Moodle. According to the eLearning Guild 2008 Learning Management System survey, Moodle's initial cost to acquire, install, and customize was $16.77 per learner. The initial cost per learner for SAP was $274.36, while Saba was $79.20, and Blackboard $39.06. Moodle's open source licensing provides a considerable cost advantage against traditional closed source learning management systems. For the learning function, these savings can be translated into increased course development, more training opportunities, or other innovation. Or it can be passed back to the organization's bottom line. As Jim Whitehurst, CEO of RedHat, states: "What's sold to customers better than saying 'We can save you money' is to show them how we can give you more functionality within your budget." With training budgets among the first to be cut during a downturn, using Moodle can enable your organization to move costs from software licensing to training development, support, and performance management; activities that impact the bottom line. Moodle's open source licensing also makes customization and integration easier and cheaper than proprietary systems. Moodle has built-in tools for integrating with backend authentication tools, such as Active Directory or OpenLDAP, enrollment plugins to take a data feed from your HR system to enroll people in courses, and a web services library to integrate with your organization's other systems. Some organizations choose to go further, customizing individual modules to meet their unique needs. Others have added components for unique tracking and reporting, including development of a full data warehouse. Moodle's low cost and flexibility have encouraged widespread adoption in the corporate sectors. According to the eLearning Guild LMS survey, Moodle went from a 6.8 % corporate LMS market share in 2007 to a 19.8 % market share in 2008. While many of these adopters are smaller companies, a number of very large organizations, including AA Ireland, OpenText, and other Fortune 500 companies use Moodle in a variety of ways. According to the survey, the industries with the greatest adoption of Moodle include aerospace and defense companies, consulting companies, E-learning tool and service providers, and the hospitality industry. Why open source? Moodle is freely available under the General Public License (GPL). Anyone can go to Moodle.org and download Moodle, run it on any server for as many users as they want, and never pay a penny in licensing costs. The GPL also ensures that you will be able to get the source code for Moodle with every download, and have the right to share that code with others. This is the heart of the open source value proposition. When you adopt a GPL product, you have the right to use that product in any way you see fit, and have the right to redistribute that product as long as you let others do the same. Moodle's open source license has other benefits beyond simply cost. Forrester recently conducted a survey of 132 senior business and IT executives from large companies using open source software. Of the respondents, 92 % said open source software met or exceeded their quality expectations, while meeting or exceeding their expectations for lower costs. Many organizations go through a period of adjustment when making a conscious decision to adopt an open source product. Most organizations start using open source solutions for simple applications, or deep in their network infrastructure. Common open source applications in the data center include file serving, e-mail, and web servers. Once the organization develops a level of comfort with open source, they begin to move open source into mission critical and customer-facing applications. Many organizations use an open source content management system like Drupal or Alfresco to manage their web presence. Open source databases and middleware, like MySQL and JBoss, are common in application development and have proven themselves reliable and robust solutions. Companies adopt open source software for many reasons. The Forrester survey suggests open standards, no usage restrictions, lack of vendor lock-in and the ability to use the software without a license fee as the most important reason many organizations adopt open source software. On the other side of the coin, many CTO's worry about commercial support for their software. Fortunately, there is an emerging ecosystem of vendors who support a wide variety of open source products and provide critical services. There seem to be as many models of open source business as there are open source projects. A number of different support models have sprung up in the last few years. Moodle is supported by the Moodle Partners, a group of 50 companies around the world who provide a range of Moodle services. Services offered range from hosting and support to training, instructional design, and custom code development. Each of the partners provides a portion of its Moodle revenue back to the Moodle project to ensure the continued development of the shared platform. In the same way, Linux is developed by a range of commercial companies, including RedHat and IBM who both share some development and compete with each other for business. While many of the larger packages, like Linux and JBoss have large companies behind them, there are a range of products without clear avenues for support. However, the lack of licensing fees makes them easy to pilot. As we will explore in a moment, you can have a full Moodle server up and running on your laptop in under 20 minutes. You can use this to pilot your solutions, develop your content, and even host a small number of users. Once you are done with the pilot, you can move the same Moodle setup to its own server and roll it out to the whole organization. If you decide to find a vendor to support your Moodle implementation, there are a few key questions to ask: How long have they been in business? How experienced is the staff with the products they are supporting? Are they an official Moodle partner? What is the organization's track record? How good are their references? What is their business model for generating revenue? What are their long-term prospects? Do they provide a wide range of services, including application development, integration, consulting, and software life-cycle management? Installing Moodle for experimentation As Kenneth Grahame's character the Water Rat said in The Wind in the Willows, "Believe me, my young friend, there is nothing—absolutely nothing—half so much worth doing as simply messing about in boats." One of the best tools to have to learn about Moodle is an installation where you can "mess about" without worrying about the impact on other people. Learning theory tells us we need to spend many hours practicing in a safe environment to become proficient. The authors of this book have collectively spent more than 5,000 hours experimenting, building, and messing about with Moodle. There is much to be said for having the ability to play around with Moodle without worrying about other people seeing what you are doing, even after you go live with your Moodle solution. When dealing with some of the more advanced features, like permissions and conditional activities, you will need to be able to log in with multiple roles to ensure you have the options configured properly. If you make a mistake on a production server, you could create a support headache. Having your own sandbox provides that safe place. So we are going to start your Moodle exploration by installing Moodle on your personal computer. If your corporate policy prohibits you from installing software on your machine, discuss getting a small area on a server set up for Moodle. The installation instructions below will work on either your laptop, personal computer, or a server. Time for action — download and run the Moodle installer If you have Windows or a Mac, you can download a full Moodle installer, including the web server, database, and PHP. All of these components are needed to run Moodle and installing them individually on your computer can be tedious. Fortunately, the Moodle community has created full installers based on the XAMPP package. A single double-click on the install package will install everything you need. To install Moodle on Windows: Point your browser to http://download.moodle.org/windows and download the package to your desktop. Make sure you download the latest stable version of Moodle 2, to take advantage of the features we discuss in this article. Unpack the archive by double clicking on the ZIP file. It may take a few minutes to finish unpacking the archive. Double click the Start Moodle.exe file to start up the server manager. Open your web browser and go to http://localhost. You will then need to configure Moodle on your system. Follow the prompts for the next three steps. After successfully configuring Moodle, you will have a fully functioning Moodle site on your machine. Use the stop and start applications to control when Moodle runs on your site. To install Moodle on Mac: Point your browser to http://download.moodle.org/macosx and find the packages for the latest version of Moodle 2. You have two choices of installers. XAMPP is a smaller download, but the control interface is not as refined as MAMP. Download either package to your computer (the directions here are for the MAMP package). Open the .dmg file and drag the Moodle application to your Applications folder. Open the MAMP application folder in your Applications folder. Double click the MAMP application to start the web server and database server. Once MAMP is up and running, double click the Link To Moodle icon in the MAMP folder. You now have a fully functioning Moodle site on your machine. To shut down the site, quit the MAMP application. To run your Moodle site in the future, open the MAMP application and point your browser to http://localhost:8888/moodle: Once you have downloaded and installed Moodle, for both systems, follow these steps: Once you have the base system configured, you will need to set up your administrator account. The Moodle admin account has permissions to do anything on the site, and you will need this account to get started. Enter a username, password, and fill in the other required information to create an account: A XAMMP installation on Mac or Windows also requires you to set up the site's front page. Give your site a name and hit Save changes. You can come back later and finish configuring the site. What just happened? You now have a functioning Moodle site on your laptop for experimentation. To start your Moodle server, double click on the StartMoodle.exe and point your browser at http://localhost. Now we can look at a Moodle course and begin to look at Moodle functionality. Don't worry about how we will use this functionality now, just spend some time getting to know the system. Reflection You have just installed Moodle on a server or a personal computer, for free. You can use Moodle with as many people as you want for whatever purpose you choose without licensing fees. Some points for reflection: What collaboration / learning challenges do you have in your organization? How can you use the money you save on licensing fees to innovate to meet those challenges? Are there other ways you can use Moodle to help your organization meet its goals which would not have been cost effective if you had to pay a license fee for the software?  

Core Data iOS Essentials A fast-paced, example-driven guide guide to data-drive iPhone, iPad, and iPod Touch applications        Core Data Core Data is Apple's persistence framework, which is used to persist—store our application's data in a persistent store, which may be memory or a flat file database. It helps us represent our data model in terms of an object graph, establish relationships among objects, and it can also store object graphs on the disk. It also allows us to use the entities of our data model in the form of objects, that is, it maps our data into a form that can be easily stored in a database, such as SQLite, or into a flat file. Also, the Core Data reduces a lot of coding. On using Xcode's templates for Core Data applications, we automatically get the boilerplate code that does several complex tasks such as generating XML files, binary files, SQLite files automatically for us without writing a single code, allowing us to focus on the business logic of our application. Besides this, Core Data also provides several features that are required in data manipulation, which includes filtering data, querying data, sorting data, establishing relationships with other data, and persisting data in different repositories. Core Data features The Core Data framework provides lots of features that include the following: Supports migrating and versioning: It means we can modify our data model, that is, entities of the application, whenever desired. The Core Data will replace the older persistent store with the revised data model. Supports Key-Value Coding (KVC): It is used to store and retrieve data from the managed objects. Core Data provides the methods required for setting and retrieving attribute values from the managed object, respectively. We will be using this feature in our application to display the information of customers and the products sold to them through the table view. Tracks the modifications: Core Data keeps track of the modifications performed on managed objects thus allowing us to undo any changes if required. We will be using this feature in our application while modifying the information of a customer or product to know what the earlier value was and what the new value entered for it is. Supports lazy loading: It's a situation that arises when all the property values of a managed object are not loaded from the data store and the property values are accessed by the application. In such situations, faulting occurs and the data is retrieved from the store automatically. Efficient database retrievals: Core Data queries are optimized for this, though the execution of query is dependent on the data store. Multi-threading: Core Data supports multi-threading in an application, that is, more than one thread can be executed in parallel to increase performance. Even some tasks can be performed in the background using a separate thread. Inverse relationship: Core Data maintains an inverse relationship for consistency. If we add an object to a relationship, Core Data will automatically take care of adding the correct object to the inverse relationship. Also, if we remove an object from a relationship, Core Data will automatically remove it from the inverse relationship. In our application, we will be using an inverse relationship between the Customer and Product entities, so that if a customer is deleted, the information of all the products purchased by him/her should also be automatically deleted. External data repositories: Core Data supports storing objects in external data repositories in different formats. Data Model Core Data describes the data in terms of a data model. A data model is used to define the structure of the data in terms of entities, properties, and their relationships. Entities Because Core Data maintains data in terms of objects, an entity is an individual data object to represent complete information of the person, item, object, and so on. For example, customer is an entity, which represents information of customers, such as name, address, e-mail ID, contact number, products purchased, date of purchase, and so on. Similarly, the product is an entity, which represents the information of a product, such as name of the product, price, weight, and so on. An entity consists of properties that are a combination of attributes and relationships. An entity in Xcode's Data Model Editor may appear as shown in the following screenshot: Properties Properties of an entity give detailed information about it, such as what are its attributes and how it is related to other entities. A property of an entity refers to its attributes and relationships. Attributes are scalar values and relationships are pointers to or collections of other entities at the object level. A property is represented by a name and a type. Attributes Attributes are the variables within an object (entity). In fact, a collection of attributes makes an entity. In database language, they are known as columns of the table. For example, the customer's entity may consist of attributes such as name, address, contact number, items purchased, and so on. Similarly, the attributes in the products table may be item code, item name, quantity, and so on. While creating attributes of an entity, we have to specify its name and its data type to declare the kind of information (whether integer, float, string, and so on) that will be stored in the attribute. Also, we can define the constraints on the information that can be stored in the column. For example, we can specify the maximum, minimum value (range) that can be stored in that attribute, or whether the attribute can or cannot store certain special symbols, and so on. Also, we can specify the default value of an attribute. Relationships Besides attributes, an entity may also contain relationships (which define how an entity is related to other entities). The attributes and relationships of an entity are collectively known as properties. The relationships are of many types (To-One, To-Many, and Many-to-Many) and play a major role in defining connection among the entities and what will be the impact of insertion or deletion of a row in one entity on the connected entities. Examples of relationship types: The relationship from a child entity to a parent entity is a To-One relationship as a child can have only one parent The relationship from a customer to a product entity is a To-Many relationship as a customer can purchase several products The relationship from an employee to a project entity is of Many-to-Many type as several employees can work on one project and an employee can work on several projects simultaneously To define a many-to-many relationship in Core Data, we have to use two To-many relationships. The first To-many relationship is set from the first entity to the second entity. The second To-many relationship is set from the second entity to the first entity. In Xcode's Data Model Editor, the relationship from Customer to Product—a To-Many relationship—is represented by a line that appears pointing from the Customer entity to the Product entity with two arrows, (designating a One-to-Many relationship) as shown in the subsequent screenshot, whereas the To-One relationship is represented by a line with a single arrow: When defining relationships in Core Data we may use inverse relationships, though it's optional. Inverse relationship In Core Data, every relationship can have an inverse relationship. Like, if there is a relationship from Customer to Product, there will be a relationship from Product to Customer too. A relationship does not need to be the same kind as its inverse; for example, a To-One relationship can have an inverse relationship of type To-Many. Although relationships are not required to have an inverse, Apple generally recommends that you always create and specify the inverse, (even if you won't need) as it helps Core Data to ensure data integrity. For example, consider a situation when a Customer entity has a relationship of the To-Many type to a Product entity and some information of a customer is changed or a row of a customer is deleted. Then it will be easier for Core Data to ensure consistency; that is, by inverse relationship, Core Data can automatically find the products related to the deleted customer and hence, delete them too. Before we go further, let us have a quick look at the architecture that is used in iPhone application development: MVC. Model View Controller (MVC) iPhone application development uses MVC architecture where M stands for Model, V stands for View, and C for Controller. Model represents the backend data—data model View represents the user interface elements through which the user looks at the contents displayed by the application and can interact with them Controller represents the application logic that decides the type of view to be displayed on the basis of actions taken by the user Core Data organizes the data model in terms of objects that are easy to handle and manipulate. The finalized objects are stored on a persistent storage. The usual way of representing data models is through classes that contains variables and accessor methods. We don't have to create classes by hand, (for our data models) as Core Data framework provides a special Data Model Design tool (also known as Data Model Editor) for quickly creating an entity relationship model. The terms that we will be frequently using from now onwards are Managed Object Model, Managed Objects, and Managed Object Context. Let us see what these terms mean: Managed Object Model: The data model created by the Data Model Design tool (Data Model Editor) is also known as Managed Object Model. Managed Objects: Managed objects are instances of the NSManagedObject class (or its subclass) that represent instances of an entity that are maintained (managed) by the Core Data framework. In a managed object model, an entity is defined by an entity name and the name of the class that is used at runtime to represent it. The NSManagedObject class implements all of the functionality required by a managed object. A managed object is associated with an entity description (an instance of NSEntityDescription) that describes the object; for example, the name of the entity, its attributes, relationships, and so on. In other words, an NSEntityDescription object may consist of NSAttributeDescription and NSRelationshipDescription objects that represent the properties of the entity. At runtime, the managed object is associated with a managed object context. Managed Object Context: The objects when fetched from the persistent storage are placed in managed object context. It performs validations and keeps track of the changes made to the object's attributes so that undo and redo operations can be applied to it, if required. In a given context, a managed object provides a representation of a record in a persistent store. Depending on a situation, there may be multiple contexts—each containing a separate managed object representing that record. All managed objects are registered with managed object context. For an application, we need the information represented by the Managed Object (instance of an entity) to be stored on the disk (persistent store) via managed object context. To understand the concepts of managed object context and its relation with data persistence, we need to understand the components of Core Data API, so let us go ahead and look at what Core Data API is all about. Core Data API The Core Data API, also called the stack, consists of three main components: NSPersistentStoreCoordinator NSManagedObjectModel NSManagedObjectContext The PersistentStoreCoordinator plays a major role in storing and retrieving managed objects from the Persistent Store via ManagedObjectContext. We can see in the following figure how the three are related: The Managed Object Model (an instance of NSManagedObjectModel class) is created from the data model of our application. If there is more than one data model in our application, the Managed Object Model is created by merging all of the data models found in the application bundle. The managed object (instance of the NSManagedObject class or its subclass) represents an instance of an entity that is maintained (managed) by the Core Data framework. A managed object is an instance of an Objective-C class, but it differs from other objects in three main ways: A managed object must be an instance of NSManagedObject or of a class that inherits from NSManagedObject The state of managed object is maintained by its managed object context A managed object has an associated entity description that describes the properties of the object For working with a managed object, it is loaded into memory. The managed object context maintains the state of the managed object after it is loaded in memory. The Managed Object Context tracks in-memory changes that have yet to be persisted to the data store. Any changes made to the state of an NSManagedObject do actually affect the state of the object in memory, not just the persistent representation of that object in the data store. When we want to commit the modifications made to the managed object, we save the managed object context to the persistent store. In order to deal with persistent store, the managed object context needs a reference to a PersistentStoreCoordinator. In other words, a pointer to the PersistentStoreCoordinator is required for creating a Managed Object Context. Remember, the PersistentStoreCoordinator is the essential middle layer in the stack that helps in storing and retrieving the managed object model from the persistent store. The managed object context is an object that plays a major role in the life cycle of managed objects. It handles all the aspects of managed object from faulting to validation including undo/redo. To modify managed objects, they are fetched from a persistent store through managed context. The modified managed objects are committed to the persistent store through context only. The managed objects represent data held in a persistent store. Faulting is considered to occur for an object whose property values have not yet been loaded from the external data store. To access the objects (entity) in managed object context, FetchRequest, an instance of NSFetchRequest class, is used. To define the entity to be retrieved via NSFetchRequest, we pass the appropriate NSEntityDescription to the NSFetchRequest. The result, that is, the set of entities retrieved from the managed object context (on the basis of FetchRequest) are managed by FetchedResultsController—an instance of NSFetchedResultsController. In fact, FetchRequest is passed to the FetchedResultsController along with a reference to the managed object context. Once the NSFetchedResultsController class has been initialized, we can perform a fetch operation to load the entities (stored in it) into memory. The managed object context keeps track of all the changes made to the managed object since the last time it was loaded in memory and hence helps in undoing any changes made to the managed object (if required).The Persistent Store Coordinator helps in avoiding redundancy if multiple calls are made by different classes on the same file at the same time, that is, the multiple calls are serialized by the NSPersistentStoreCoordinator class to avoid redundancy. Let us now get a detailed understanding of the terms used above.

  OpenCart 1.4 Template Design Cookbook Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates         Read more about this book       (For more resources on Opencart, see here.) Customizing the cycle plugin In this recipe, we use the jQuery cycle plugin with our products. We first download the jQuery cycle plugin. Getting started We need jQuery enabled for jQuery cycle to work with our store shop. How to do it Go through the following steps to customize the jQuery cycle plugin: First, download the jQuery cycle JavaScript files from http://jquery.malsup.com/cycle/download.html. We extract the downloaded compressed file. We will use the jquery.cycle.min.js. We copy this file to catalogviewjavascriptjquery. We need to add jQuery and the jQuery cycle JavaScript file into our file. For this recipe, we will add this plugin for the latest products in the home section. So, we add the following code in latest_home.tpl as we are not using the jQuery cycle plugin throughout the site: <script type="text/Javascript" src="catalog/view/javascript/jquery/ jquery.cycle.min.js"></script> Then, we will modify the existing table-based structure to div-based. We remove the following code: <table class="list">//...</table> And in place of that we write the following: <div class="slideshow">//...</div> We also again remove the tr tag: <tr>//...</tr> And replace the td HTML tag with the following div tag: <td style="width: 25%;">//...</td> The required div tag is: <div class="slideshow-image-container">//...</div> We will initialize the jQuery cycle plugin with the following code: <script type="text/Javascript">$(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' });});</script> Now, go to the browser and refresh to see the effect of our change: We center the product image. So, we add the following margin-left property to our image in the stylesheets.css file: .slideshow .slideshow-image-container {margin-left: 200px;} Then, the image container moves to the center of the latest product area. See the following image: We need to do some styling to our product images. We will have a thick border around our image. So, we add these styling attributes: .slideshow .slideshow-image-container { margin-left: 200px; border: 10px solid #ddd;} This creates a border around the product image like the following: The product image and the descriptions are all left aligned. So, we make it centered by adding the following style tag: .slideshow .slideshow-image-container { margin-left: 200px; text-align: center; padding: 10px; border:10px solid #ddd;} Now, our jQuery cycle looks like this: There's more... You can also see the Accordion jQuery plugin. It is also a very popular jQuery plugin. You can add and initialize it in almost the same way. You can read the documentation of the plugin at http://plugins.jquery.com/project/accordion. Modifying the side column with the cycle plugin We modified the latest product block in the center column with the jQuery cycle plugin. Now, if we want to show our products on the side columns with the jQuery cycle, then this recipe will guide us to our destination. Getting started We need jQuery enabled for jQuery cycle to work with our store shop. How to do it Go through the following steps to customize the jQuery cycle plugin: To use the plugin, first, we need to add the required file links to the latest.tpl file as we are using the jQuery cycle for latest products. We add the following line in our latest.tpl file: <script type="text/Javascript" src="catalog/view/javascript/jquery/jquery.cycle.all.min.js"></script> Then, like our previous recipes, we will remove the table-based style and instead, use div-based styles: <table cellpadding="2" cellspacing="0" style="width: 100%;">//...<tr>//...</tr>//..</table> And, we write the following tag in place of the table element: <div class="slideshow">//...</div> We also li tag with a div element. See the following code: //remove this tags<li>//...</li>//replace with the following element<div class="slideshow-image-container">//...</div> Now, we initialize the cycle plugin with the code below: <script type="text/Javascript">$(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' });});</script> If we go to the browser, then we can see the following changes: We will add some styling to the above display. The products are displaying on the left side of the side column. To make it centered, we add margin to the style: .slideshow .slideshow-image-container { margin-left: 60px; } Our right column changes like this: We add a border to our image. We do the following styling addition: .slideshow .slideshow-image-container { margin-left: 60px; border: 5px solid #ddd;} When we go to the browser, we find the following state of our right side bar: We need to add some padding and make our text aligned to the center. So, we also add the following styles: .slideshow .slideshow-image-container { margin-left: 60px; border: 5px solid #ddd; padding:5px; text-align: center;} We refresh our browser and see our changes in action: There is more You can also add this plugin on the left side of our OpenCart store. Just change the position of the module from the module section of the admin panel.  

  OpenCart 1.4 Template Design Cookbook Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates         Installing jQuery and jCarousel In this recipe, we will download jQuery and jCarousel and also install them into our store. By default, OpenCart comes with jQuery installed. Carousels have become a popular means to display products. There are many different types of carousels. But, we will use jCarousel for this recipe. You can use your favourite one. Getting started We need jQuery for our dynamic content throughout the site. jQuery is added by default with OpenCart. But here, we will also see how to download it and install it. We will download and install jQuery and jCarousel. First, we will go to the sites from where we can download them. If jQuery is not present in your site, you can download it from http://docs.jquery.com/Downloading_jquery. We will download the latest jQuery JavaScript file. How to do it First, we need to download the required files to use jCarousel. We need the jQuery JavaScript file and jCarousel JavaScript and css files. To check whether our site is jQuery-enabled or not, we can use web developer Firefox addons. Click on the information tab of Web Developer: It will display many sub-menus. Every sub-menu has its own importance. We select View JavaScript. Then, a new tab will open containing all the JavaScripts for the web page in it. You can contract or expand the links. If our store already has jQuery, then we can find it in this page. Otherwise, it won't be in this page or it will show a 404 error. Since our store is jQuery-enabled by default, we don't need to install jQuery. We have shown the installation of jQuery so that you can have full control of the process. There are several releases available to download. After downloading jQuery, we will place it under the catalogviewJavascriptjQuery folder. Now, we will download jCarousel. We can download it from http://sorgalla.com/projects/jCarousel/. Then, extract the compressed file. There will be many files in the extracted folder. Under the lib folder, we have an uncompressed and minified version of jCarousel. We create a folder named jCarousel under catalogviewiavascriptjquery. Then, in the jCarousel folder, create another folder named js. We will place any one of the two files under catalogviewjavascriptjqueryjcarouseljs. And bring the skins folder under the catalogviewjavascriptjqueryjcarousel. Displaying products using jCarousel We have installed jQuery and jCarousel in the previous recipe. Here, we will see how we can display products with jCarousel. In this recipe, we are going use jCarousel for the latest products, but you can use it for other modules as well. Getting started First, we will open the header.tpl file under catalogviewthemeshoptemplatecommon. If we don't have jQuery in our site, then we need to add it here. See the following code block: <script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script> How to do it We will follow the steps below for jCarousel addition to our store: First, we need to add the links for jCarousel JavaScript and css files to work with jCarousel. As we are using jCarousel for displaying the latest products, we place the links for those files in the latest_home.tpl under catalogviewthemeshoptemplatemodule. We add the following links: <script type="text/javascript" src="catalog/view/javascript/jquery/jcarousel/lib/jquery.jcarousel.js"></script> <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jcarousel/skins/tango/skin.css" /> Now, we modify some HTML element structure to place the products in jCarousel. The current structure is table based. We will use <ul> <li> instead of the table structure. We remove the following tag: <table class="list"> //... </table> And write the following code, here by the three dots, we mean other inner codes: <ul id="latestcarousel" class="jCarousel-skin-tango"> //... </ul> Here latestcarousel ID is our carousel container ID. There are two skins available for jCarousel, one is tango and the other is ie7. Here, we are using tango. We also remove the tr tag: <tr> //... </tr> Now, remove the td tag and the following: <td style="width: 25%;"><?php if (isset($products[$j])) { ?> //... <?php } ?></td> And, we replace it with the following code: <li> //... </li> Now, we will initialize jCarousel. <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#latestcarousel').jcarouseljcarousel(); }); </script> If we see our changes in the browser, then we will find it as: Here, we need to adjust the height and width of the carousel. To change the width of the carousel, open the skin.css file under catalogiewJavascriptjQueryjCarouselskins. We are going to change the following code: .jcarousel-skin-tango .jcarousel-container-horizontal { width: 245px; padding: 20px 40px; } To the following code: .jcarousel-skin-tango .jcarousel-container-horizontal { width: auto; padding: 20px 40px; } Again, if we are going to use jCarousel in some other places as well, it is not smart to change the skin.css. Instead we can override it in our theme-css for a specific region. For example, #content .middle .jcarousel-skin-tango .jcarousel-container-horizontal. Here, we have just shown you one instance of jCarousel usage. We changed the width to auto. So, in the browser, the carousel will be like this: There is style for both vertical and horizontal carousel in the stylesheet. As we are now using the horizontal carousel, we adjust the styles for horizontal only. The area showing the images of the products is smaller compared to the carousel width. So, we will adjust the width. We set the width to auto. .jcarousel-skin-tango .jcarousel-clip-horizontal { width: auto; height: 75px; } Now, the carousel is displaying products along the full width of the carousel. See the following image: Our height for the carousel is small. Let's change the height of it. We change the height to 200px: .jcarousel-skin-tango .jcarousel-clip-horizontal { width: auto; height: 200px; } This makes our carousel look like the following: To enlarge the height of the product image display area, we need to change the following code: .jcarousel-skin-tango .jcarousel-item { width: 75px; height: 200px; } We change the height to 200px. In the browser, now our carousel looks like this: We need to adjust the margin property for our product images. We change the margin-right property to 50px. .jcarousel-skin-tango .jcarousel-item-horizontal { margin-left: 0; margin-right: 50px; } This makes spacing between the product images. You need to refresh the browser to view the changes: We will set options for the carousel. There are several options. You can see the available options in this link: http://sorgalla.com/projects/jcarousel/. We used the following options and placed it in the latest_home.tpl, the page in which we are showing jCarousel: <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#latestcarousel').jcarousel({ scroll: 1, visible: 3, auto: 3, rtl: true, wrap: 'circular' }); }); </script>  

In order to create the file management software for our website, we need to consider topics such as a single or multi-file upload, file system management, and image manipulation in the case of photos. In addition to this we will cover creation of pages for displaying the user's photo albums, their friends' photo albums, as well as a few data management pages. What's the problem? Apart from the standard infrastructure issues that we have to consider when building a system such as this, one of the core issues in any web-based file management system is file upload. As we all know, most server side technologies allow only one file to be uploaded at a time and ASP.NET is no different. And while we could easily buy a third-party plug-in to handle multiple files at once, we decided to provide for options to upload the files either via Silverlight or via Flash. Once we get our file upload process working we are only one-third of the way there! As we are going to be mostly concerned with uploading images, we need to consider that we will need to provide some image manipulation. With each file that is uploaded to our system we need to create a handful of different sizes of each image to be used in various scenarios across our site. To start with, we will create thumbnail, small, medium, large, and original size photos. Now while creating different size files is technically working with the file storage system, we wanted to take an extra breath with regards to the file storage concepts. We can choose to store the files on the file system or in a database. For avatars it made sense to store each with the profile data whereas for image galleries it makes more sense to store the file on the file system. While storing files to the file system we need to be very cautious as to how the file structure is defined and where and how the individual files are stored. In our case we will use system-generated GUIDs as our file names with extensions to define the different sizes that we are storing. We will dig into this more as we start to understand the details of this system. Once we have uploaded the files to the server and they are ready for our use across the system, we will take up the concept of user files versus system files. If we build the system with some forethought regarding this topic we can have a very generic file management system that can be extended for future use. We will build a personal system in this article. But as you will see with some flags in just the right places, we could just as easily build a system file manager or a group file manager. Design Let's take a look at the design for this feature. Files For our site, as we are not storing our files in the database, we need to take a closer look at what actually needs to be managed in the database so as to keep track of what is going on in the file system. In addition to standard file metadata, we need to keep a close eye on where the file actually lives—specifically which file system folder (directory on the hard drive) the file will reside in. We also need to be able to maintain which accounts own which files, or in the case of system files, which files can be viewed by anyone. Folders You may be wondering why we have a separate section regarding folders when we just touched upon the fact that we will be managing which file system folder we will be storing files in. In this section we are going to discuss folder management from a site perspective rather than a file system perspective—user folders or virtual folders if you desire. Very similar to file storage, we will be storing various metadata about each folder. We will also have to keep track of who owns which folder, who can see which folder, or in the case of system folders whether everyone can see that folder. And of course as each folder is a virtual container for a file, we will have to maintain the relationship between folders and files. File upload The file upload process will be handled by a Silverlight/Flash client. While this is not really an article about either Silverlight or Flash, we will show you how simple it is to create this Flash client, that is really just providing a way to store many files that need to be uploaded, and then uploading them one at a time in a way that the server can handle each file. For the Silverlight option, we are using code from Codeplex—http://silverlightfileupld.codeplex.com/. File system management Managing the file system may seem like a non-issue to begin with. However, keep in mind that for a community site to be successful we will need at least 10,000 or so unique users. Given that sharing photos and other files is such a popular feature of most of today's community sites, this could easily translate into a lot of uploaded files. While you could technically store a large number of files in one directory on your web server, you will find that over time your application becomes more and more sluggish. You might also run into files being uploaded with the same name using this approach. Also, you may find that you will have storage issues and need to split off some of your files to another disk or another server. Many of these issues are easily handled if we think about and address them up front. In our case we will use a unique file name for each uploaded file. We will store each file in subdirectories that are also uniquely named based on the year and month in which the file was uploaded. If you find that you have a high volume of files being uploaded each day, you may want to store your files in a folder with the year and month in the name of the folder and then in another subdirectory for each day of that month. In addition to a good naming convention on the file system, we will store the root directory for each file in the database. Initially you may only have one root for your photos, one for videos, and so on. But storing it now will allow you to have multiple roots for your file storage—one root location per file. This gives you a lot of extensibility points over time meaning that you could easily relocate entire sections of your file gallery to a separate disk or even a separate server. Data management screens Once we have all of the infrastructure in place we will need to discuss all the data management screens that will be needed—everything from the UI for uploading files to the screens for managing file metadata, to screens for creating new albums. Then we will need to tie into the rest of the framework and allow users to view their friends' uploaded file albums. The solution Let's take a look at our solution. Implementing the database First let's take a look at the tables required for these features (see the following screenshot). Files The most important thing to consider storing while in the database is of course our primary interest files. As with most other conversations regarding a physical binary file we always have to consider if we want to store the file in the database or on the file system. In this case we think it makes sense to store the file (and in the case of a photo, its various generated sizes) on the file system. This means that we will only be storing metadata about each file in our database. The most important field here to discuss is the FileSystemName. As you can see this is a GUID value. We will be renaming uploaded files to GUIDs in addition to the original extension. This allows us to ensure that all the files in any given folder are uniquely named. This removes the need for us to have to worry about overwriting other files. Then we see the FileSystemFolderID. This is a reference to the FileSystemFolders table, that lets us know the root folder location where the file is stored. Next on our list of items to discuss is the IsPublicResource flag. By its name it is quite clear that this flag will set a file as public or private and can therefore be seen by all or by its owner (AccountID). We then come to a field that may be somewhat confusing: DefaultFolderID. This has nothing to do with the file system folders. This is a user created folder. When files are uploaded initially they are put in a virtual folder. That initial virtual folder becomes the file's permanent home. This doesn't mean that it is the file's only home. As you will see later we have the concept that files can live in many virtual folders by way of subscription to the other folders. File system folders As mentioned previously, the FileSystemFolders table is responsible for letting us know where our file's root directory is. This allows us to expand our system down the road to have multiple roots, that could live on the same server but different disks, or on totally different servers. The fields in the table are Key, Path (URL), and a Timestamp. File types The FileTypes table will help us to keep track of what sort of files we are storing and working with. This is a simple lookup table that tells us the extension of a given file. Folders Folders are virtual in this case. They provide us with a way to specify a container of files. In our case we will be containing photos, in which case folders will act as photo albums. The only field worth explaining here is the flag IsPublicResource, which allows us to specify whether a folder and its resources are public or private, that is, viewable by all or viewable only by the owner. Folder types The FolderTypes table allows us a way to specify the type of folder. Currently this will simply be Name, photos, movies, and so on. However, down the road you may want to specify an icon for each folder type in which case this is the place where you would want to assign that specification. Account folders In the AccountFolders table we are able to specify additional ownership of a folder. So in the case that a folder is a public resource and external resources can own folders, we simply create the new ownership relationship here. This is not permanent ownership. It is still specified with the Folders table's AccountID. This is a temporary ownership across many Accounts. As you can see in the previous screenshot we have the owner (AccountID) and the folder that is to be owned (FolderID). Account files Similar to the AccountFolders table, the AccountFiles table allows someone to subscribe to a specific file. This could be used for the purposes of Favorites or similar concepts. The makeup of this table is identical to AccountFolders. You have the owner and the file being owned. Folder files The FolderFiles table allows an Account to not only subscribe to a file, similar to the Favorites concept, but it also allows a user to take one of my files and put it into one of their folders as though the file itself belonged to them. As you can see in the previous screenshot this is primarily a table that holds the keys to the other tables. We have the FolderID, FileID, and AccountID for each file. This clearly specifies who is taking ownership of what and where they want it to be placed. Creating the relationships Once all the tables are created we can then create all the relationships. For this set of tables we have relationships between the following tables: Files and FileSystemFolders Files and FileTypes Files and Folders Files and Accounts Folders and Accounts Folders and FolderTypes AccountFolders and Accounts AccountFolders and Folders AccountFiles and Accounts AccountFiles and Files FolderFiles and Accounts FolderFiles and Folders FolderFiles and Files

AJAX (Asynchronous JavaScript and XML), a term coined by Jesse James Garrett of Adaptive Path, stands for a combination of different technologies that help to communicate seamlessly with the server without the need for a page refresh. AJAX applications involve the following technologies: JavaScript for running the core AJAX engine XmlHttpRequest object to communicate with the server Web presentation using XHTML and CSS or XSLT DOM to work with the HTML structure XML and JSON for data interchange The XmlHttpRequest object is used for posting HTTP/HTTPS requests to the server. Most modern browsers have a built-in XmlHttpRequest object. JSON (JavaScript Object Notation) is a lightweight data interchange format and is increasingly used in AJAX applications today. It is basically a collection of name/value pairs. In classic web applications, the client submits data to the server for processing and the server sends back refreshed content to the client. This causes a visible page refresh and the web user must wait for a page reload before further interaction with the web application. AJAX, however, eliminates the need for an explicit page refresh by communicating with the server behind the scenes. It uses the power of XmlHttpRequest object to post a request to the server. Thus, the backend communication with the server is transparent to the end user. In addition, using AJAX, only the data that is required to be updated can be selectively refreshed on the page. The previous figure is the traditional model for web applications (left) compared to the AJAX model (right). The previous figure shows the basic difference between traditional and AJAX-enabled applications. In traditional web applications, the client sends requests directly to the server and waits to receive the corresponding response. In AJAX-based applications, however, this is replaced by a JavaScript call to the AJAX engine instead, which sends the request asynchronously to the server. As a result, web users' interaction with the application is not interrupted and users can continue to work with the application. The jQuery library provides many methods for working with AJAX. In this article, we will explore the use of the following methods: $.ajax(settings): This is a generic low level function that helps to create any type of AJAX request. There are a number of configuration settings that can be applied using this function to customize an AJAX call. It helps to set the type of HTTP request (GET/ POST), the URL, parameters, datatype, as well as the callback functions to execute successful/unsuccessful invocation of the AJAX call. $.ajaxSetup(options): This method helps to define default settings for making AJAX calls on the page. The setup is done one time and all the subsequent AJAX calls on the page are made using the default settings. Getting started Let's start by creating a new ASP.NET website in Visual Studio and name it Chapter6. Save the jQuery library in a script folder js in the project. To enable jQuery on any web form, drag-and-drop the library to add the following to the page: <script src="js/jquery-1.4.1.js" type="text/javascript"></script> Now let's move on to the recipes where we will see how jQuery can be used to make AJAX calls to ASP.NET code-behind. Basically, in this article, we will explore three possible approaches of communicating with the server: Using page methods Using web services Using HTTP Handlers So, let's get started. Setting up AJAX with ASP.NET using jQuery In this recipe, we will set up our ASP.NET web page to execute an AJAX call. We will also see how to set the default AJAX properties. Getting ready Create an HTML file Content.html in the project and add the following contents: <html > <head> <title>Content Page</title> <link href="css/content.css" rel="stylesheet" type="text/css" /> </head> <body> <p> <table cellpadding="3" cellspacing="3" id="box-table-a"> <tr><td>Title</td><td>Author</td><td>Genre</td></tr> <tr><td>Alchemist</td><td>Paulo Coelho</td><td>Fiction</td></tr> <tr><td>Heart of Darkness</td><td>Joseph Conrad</td><td>Classic</ td></tr> <tr><td>David Copperfield</td><td>Charles Dickens</ td><td>Classic</td></tr> <tr><td>Have a Little Faith</td><td>Mitch Albom</td><td>Fiction</ td></tr> </table> </p> </body> </html> Add a new web form Recipe1.aspx to the current project. Add a button control to the web form to trigger the AJAX request. <asp:Button ID="btnSubmit" runat="server" Text="Click Here" /> Thus, the ASPX markup of the web form is as follows: <form id="form1" runat="server"> <div align="center"> <fieldset style="width:400px;height:200px;"> <div id="contentArea"> <asp:Button ID="btnSubmit" runat="server" Text="Click Here" /> </div> </fieldset> </div> </form> On page load, the form will appear as shown in the following screenshot: When the button is clicked, we will retrieve the contents of the HTML file using AJAX and display it on the page. How to do it… In the document.ready() function of the jQuery script block, call the ajaxSetup() method to set the default properties of all AJAX calls on the page: $.ajaxSetup({ Turn off the cache so that the contents are not cached by the browser: cache: false, Set the data type of the response. In this case, since we are going to load the contents from the HTML file, the dataType is HTML: dataType: "html", Define the callback function if the AJAX request fails. The callback function takes in three parameters: the XMLHttpRequest object, the error status, and an exception object: error: function(xhr, status, error) { alert('An error occurred: ' + error); }, Define the global timeout in milliseconds: timeout: 30000, Set the type of HTTP request (GET/POST): type: "GET", Define the callback function to be called before the AJAX request is initiated. This function can be used to modify the Xml HttpRequest object: beforeSend: function() { console.log('In Ajax beforeSend function'); }, Define the function to be called when the AJAX request is completed: complete: function() { console.log('In Ajax complete function'); } }); Now, having set the default properties in the previous code block, we will now invoke the actual AJAX call on clicking the button control on the form. Attach a handler for the click event of the button control: $("#btnSubmit").click(function(e) { Prevent default form submission: e.preventDefault(); Initiate the AJAX call using the .ajax() method: $.ajax({ Specify the URL to send the request to. In this case, we're sending the request to the HTML file: url: "Content.htm", Define the callback function for successful execution of the AJAX call: success: function(data) { The HTML response from the server is received in the data parameter in the preceding callback function. Clear the contents of the containing div area to remove the button control and append the received HTML response: $("#contentArea").html("").append(data); } }); }); Thus, the complete jQuery solution is as follows: <script language="javascript" type="text/javascript"> $(document).ready(function() { $.ajaxSetup({ cache: false, dataType: "html", error: function(xhr, status, error) { alert('An error occurred: ' + error); }, timeout: 30000, type: "GET", beforeSend: function() { console.log('In Ajax beforeSend function'); }, complete: function() { console.log('In Ajax complete function'); } }); $("#btnSubmit").click(function(e) { e.preventDefault(); $.ajax({ url: "Content.htm", success: function(data) { $("#contentArea").html("").append(data); } }); }); }); </script> How it works… Run the web form. Click on the button to initiate the AJAX request. You will see that the page content is updated without any visible page refresh as follows:

Oracle Application Express 4.0 with Ext JS Deliver rich desktop-styled Oracle APEX applications using the powerful Ext JS JavaScript library        Theme basics Out of the box, APEX comes with twenty themes, each theme comprising a collection of templates used to define the layout and appearance of an entire application. An application can have many themes, but only one theme is active at any time; switching themes is done at design time only. You can create custom themes, which may be published, either within a workspace by a Workspace Manager or for the whole APEX instance by an Internal Workspace Manager. Publishing a theme encourages consistency across applications. A theme comprises nine template types: breadcrumb, button, calendar, label, list, page, popup list of values, region, and report. A theme must have at least one of each of the nine template types. Within each template type are a set of predefined classes and eight custom classes. For example, the label template has the following classes: - Not Identified - No Label Optional Label Optional Label with Help Required Label Required Label with Help Custom 1... Custom 8 Programmers use these templates to construct the HTML pages that make up an application. Each page is declaratively defined using metadata to select templates to be used for the presentation. The APEX engine dynamically renders an HTML page using the metadata, assembling relevant templates and injecting dynamic data into placeholders within the templates. The HTML page is viewed when you request a page through a web browser. When you submit a page, the APEX engine performs page processing, once again using declaratively defined metadata to perform computations, validations, processes, and branching. This type of processing is a typical Model-View-Controller(MVC) pattern, where the view is the HTML generated using the application templates. The APEX engine is the controller and receives the GET or POST input and decides what to do with it, handing over to domain objects. The domain objects model is encapsulated in the page definition and contains the business rules and functionality to carry out specific tasks. Separation of concerns The MVC pattern also promotes another good design principle—separation of concerns. APEX has been designed so that the APEX engine, templates, and the application functionality can be optimized independently of each other. Clearly, the process of assembling and sequencing the steps necessary to render a page, and process a page are important to the overall solution. By separating this out and letting Oracle deal with the complexities of this through the APEX engine, it allows programmers to concentrate on providing business functionality. Equally, by separating presentation templates from the business logic, it allows each aspect to be maintained separately. This provides a number of advantages including ease of design change, allowing templates to be modified either by different people or at different times to enhance the interface without breaking the application. An excellent example of this is the standard themes provided in APEX, which have been designed to be completely interchangeable. Switching standard themes is simply a matter of loading a theme from the repository and then switching the active theme. APEX then remaps components to the new active theme using the template class identifiers. Standard themes We will be building our own custom theme rather than using one of the twenty pre-built ones. Nevertheless, it's worthwhile knowing what they provide, as we will build our custom theme by using one of them as a "starter". Looking at this image, we can see a preview of the standard APEX themes. Each theme provides a similar interface, so really each standard theme is just a visual variation on the others. The colors used are a little different, or the HTML layout is tweaked slightly, but in reality they are all much the same. Theme 4 is used by APEX as the "starter" theme and contains one template for each template class for all the template types—a total of 69 templates. Theme 19 is also worth noting as it's designed for mobile devices. Each of these themes are full of good HTML practices and show how and where to use the substitution strings. Creating a theme When creating a theme, you can choose to copy one from the repository, create one from scratch or from an export file. The repository and export file options copy the entire theme, and you start editing the template to suit. Creating a theme from scratch creates a theme without any templates. You then need to define templates for each different type before you can switch from the active theme. In my opinion, the easiest way to build a new theme is to take the approach that the application should always be in a working state, and the way to do this is to create a new empty TEMPLATE application using a standard theme and build from there. From this working base, you can progressively convert the templates to use Ext functionality, building simple test pages as you go to verify the templates. These test pages also form part of your template documentation, allowing team members to examine and understand specific functionality in isolation. Once a theme has templates for each of the nine template types, you can publish the theme into the workspace to be used by your business applications. The following screenshot shows a dialog named Create Workspace Theme from the APEX wizard. Notice that you can change the theme number when you publish a theme, providing a very simple mechanism for you to version control your themes. A published theme can't be edited directly once it has been created, but using a TEMPLATE application, you can republish it using a different theme number. Applications can have multiple themes, but only one active theme. By switching themes, applications can easily test a new version, safe in the knowledge that changing back to the earlier version is just a matter of switching back to the prior theme. So before we go any further, create a new TEMPLATE application based on Theme 4, and let's begin the process of creating our Ext JS theme. Building a Viewport Page template Several of the examples provided with Ext feature the Viewport utility container, including the RSS Feed Viewer shown in the screenshot below. The Viewport automatically renders to the document body, sizing itself to the browser viewport and dividing the page into up to five distinct regions; the center region is mandatory, with north, south, east, and west regions being optional. Viewport regions are configurable, and by setting a few simple attributes, you quickly find yourself with a very interactive page, with expanding/collapsing regions and splitters to resize regions by clicking and dragging with the mouse. We are going to build a basic viewport for our APEX page template including all five regions.

  Linux Shell Scripting Cookbook Solve real-world shell scripting problems with over 110 simple but incredibly effective recipes  In this article, we took a look at some tips and tricks on working with Linux shell script.    Successful and unsuccessful command Tip: When a command returns after error, it returns a non-zero exit status. The command returns zero when it terminates after successful completion. Return status can be read from special variable $? (run echo $? immediately after the command execution statement to print the exit status). Fork bomb :(){ :|:& };: Tip: This recursive function is a function that calls itself. It infinitely spawns processes and ends up in a denial of service attack. & is postfixed with the function call to bring the subprocess into the background. This is a dangerous code as it forks processes and, therefore, it is called a fork bomb. You may find it difficult to interpret the above code. See Wikipedia page http://en.wikipedia.org/wiki/Fork_bomb for more details and interpretation of the fork bomb. It can be prevented by restricting the maximum number of processes that can be spawned from the config file /etc/security/limits.conf. Specify -maxdepth and –mindepth as the third argument Tip: -maxdepth and –mindepth should be specified as the third argument to the find. If they are specified as the fourth or further arguments, it may affect the efficiency of the find as it has to do unnecessary checks (for example, if –maxdepth is specified as the fourth argument and –type as the third argument, the find command first finds out all the files having the specified –type and then finds all of the matched files having the specified depth. However, if the depth were specified as the third argument and –type as the fourth, find could collect all the files having at most the specified depth and then check for the file type, which is the most efficient way of searching. -exec with multiple commands Tip: We cannot use multiple commands along with the –exec parameter. It accepts only a single command, but we can use a trick. Write multiple commands in a shell script (for example, commands.sh) and use it with –exec as follows: -exec ./commands.sh {} ; -n option for numeric sort Tip: Always be careful about the -n option for numeric sort. The sort command treats alphabetical sort and numeric sort differently. Hence, in order to specify numeric sort the –n option should be provided. The ## operator Tip: The ## operator is more preferred over the # operator to extract an extension from a filename since the filename may contain multiple '.' characters. Since ## makes greedy match, it always extract extensions only. Recursively search many files Tip: To recursively search for a text over many directories of descendants use: $ grep "text" . -R -n This is one of the most frequently used commands by developers. It is used to find the file of source code in which a certain text exists. Placing variable assignments Tip: Usually, we place initial variable assignments, such as var=0; and statements to print the file header in the BEGIN block. In the END{} block, we place statements such as printing results and so on. -d argument Tip: The -d argument should always be given in quotes. If quotes are not used, & is interpreted by the shell to indicate this should be a background process. Excluding a set of files from archiving Tip: It is possible to exclude a set of files from archiving by specifying patterns. Use --exclude [PATTERN] for excluding files matched by wildcard patterns. For example, to exclude all .txt files from archiving use: $ tar -cf arch.tar * --exclude "*.txt" Note that the pattern should be enclosed in double quotes. Using cpio command for absolute paths Tip: By using cpio, we can also archive using files as absolute paths. /usr/somedir is an absolute path as it contains the full path starting from root (/). A relative path will not start with / but it starts the path from the current directory. For example, test/file means that there is a directory test and the file is inside the test directory. While extracting, cpio extracts to the absolute path itself. But incase of tar it removes the / in the absolute path and converts it as relative path. PATH format Tip: For the PATH format, if we use / at the end of the source, rsync will copy contents of that end directory specified in the source_path to the destination. If / not at the end of the source, rsync will copy that end directory itself to the destination. / at the end of destination_path Tip: If / is at the end of destination_path, rsync will copy the source to the destination directory. If / is not used at the end of the destination path, rsync will create a folder, named similar to the source directory, at the end of the destination path and copy the source into that directory. wait command Tip: The wait command enables a script to be terminated only after all its child process or background processes terminate or complete. First argument of the sftp command Tip: -oPort should be the first argument of the sftp command. Running du DIRECTORY Tip: Running du DIRECTORY will output a similar result, but it will show only the size consumed by subdirectories. However, they do not show the disk usage for each of the files. For printing the disk usage by files, -a is mandatory. du DIRECTORY commands traversal Tip: du can be restricted to traverse only a single file system by using the –x argument. Suppose du DIRECTORY is run, it will traverse through every possible subdirectory of DIRECTORY recursively. A subdirectory in the directory hierarchy may be a mount point (for example, /mnt/sda1 is a subdirectory of /mnt and it is a mount point for the device /dev/sda1). du will traverse that mount point and calculate the sum of disk usage for that device filesystem also. In order to prevent du from traversing and to calculate from other mount points or filesystems, use the -x flag along with other du options. du –x / will exclude all mount points in /mnt/ for disk usage calculation. Use an absolute path for the executable Tip: An executable binary of the time command is available at /usr/bin/time as well as a shell built-in named time exists. When we run time, it calls the shell built-in by default. The shell built-in time has limited options. Hence, we should use an absolute path for the executable (/usr/bin/time) for performing additional functionalities. -x argument Tip: The -x argument along with -a specifies to remove the TTY restriction imparted, by default, by ps. Usually, using ps without arguments prints processes that are attached to terminal only. Parameters for -o Tip: Parameters for -o are delimited by using the comma (,) operator. It should be noted that there is no space in between the comma operator and next parameter. Mostly, the -o option is combined with the -e (every) option (-oe) since it should list every process running in the system. However, when certain filters are used along with –o, such as those used for listing the processes owned by specified users, -e is not used along with –o. Usage of -e with a filter will nullify the filter and it will show all process entries. pgrep command Tip: pgrep requires only a portion of the command name as its input argument to extract a Bash command, for example, pgrep ash or pgrep bas will also work. But ps requires you to type the exact command. apropos Tip: Sometimes we need to search if some command related to a word exists. Then we can search the manpages for strings in the command. For this we can use: apropos COMMAND   In this article, we took a look at some tips and tricks on working with Linux shell script.Further resources on this subject: Linux Email [Book] Installing VirtualBox on Linux [Article] Linux Shell Script: Logging Tasks [Article] Linux Shell Script: Monitoring Activities [Article] Compression Formats in Linux Shell Script [Article] Making a Complete yet Small Linux Distribution [Article]

  Joomla! 1.6 First Look A concise guide to everything that's new in Joomla! 1.6.         Read more about this book       (For more resources on Joomla!, see here.) Question: What are the server requirements for installing Joomla! 1.6 on a web hosting account? Answer: The following system requirements have remained the same since the 1.5 release: Apache 1.3.x or higher. Apache is the web server software that processes the PHP instructions for how to pull in contents from the database and display a web page. XML and Zlib support. Your host's PHP installation should support XML and Zlib functionality. But the PHP and MySQL requirements have changed. To enable you to run a Joomla! 1.6 powered website, your web hosting account should support: PHP 5.2 or higher. PHP is the scripting language that Joomla! is written in. MySQL 5.0.4 or higher. The MySQL database is where Joomla! stores its data (the contents of your site).   Question: What are the changes for templates in Joomla! 1.6? Answer: Templates created for version 1.5 can't be used in Joomla! 1.6. The new release uses clean, semantic HTML code, without using tables for layout purposes. This is good news, as template developers are no longer required to add so-called template overrides in order to achieve a semantic design. However, it is one of the reasons that developers will have to upgrade their existing code to move a 1.5 template to version 1.6. Joomla! 1.6 also introduces some other nice template features, such as the ability to use ‘subtemplates’ (called Template Styles in Joomla!). This new feature allows you to easily create individual styling for parts of your site.   Question: What’s new about categorizing content in Joomla! 1.6? Answer: The main thing that a content management system should help you in doing is of course to publish content and to manage existing content with minimal effort. Joomla! 1.6 allows you to organize content exactly as you want. Up to Joomla! 1.5, you could only classify your content in three levels: sections would contain categories, and categories would hold articles. Although this didn't pose problems for most sites, it was nevertheless a strange restriction. That's why Joomla! 1.6 introduces a more flexible system of classification. Categories can now hold an unlimited number of subcategories. This means that you can have a hierarchy. A category can hold as many subcategories as you need. This concept is called "unlimited nested categories". In most cases you won't need more than two or three subcategories, but if you do, there's nothing to stop you. You can check the content category hierarchy in the Category Manager. Child categories are displayed indented, with small gray lines indicating the sublevel: The above screenshot shows the nested categories contained in the sample data that comes with Joomla! 1.6. As you can see, all article content is stored in subcategories of the main category Sample Data-Articles.   Question: What's the difference between Root user, Super Administrator, Super User, Admin? Answer: When you install Joomla!, there's always one root user, allowed to do anything in the administration area. In Joomla! 1.5, this root user was called Super Administrator. In Joomla! 1.6, this name has been changed to Super User. Another point to note is that the root user is always a Super User—but there can be more Super Users who aren't root users. The root user is a unique Super User who can assign new users to the Super User group. But there's always just one root user created when installing Joomla! Only this root user can change another Super User's details. (You can always identify the root user in the User Manager by his fixed ID number, which in Joomla! 1.6 is always 42).   Question: What's the use of the new User Permissions tab? Answer: When browsing the Global Configuration screen, you'll notice that there's a new tab called Permissions. It's where you set all site-wide user permissions. In Joomla! 1.6, you have much more control over user permissions. You can create new user groups and set permissions on different levels- not just site-wide, as was previously the case in Joomla! 1.5.   Question: What are the changes in the article editor? Answer: Creating or editing an article in Joomla! 1.6 will seem very familiar to 1.5 users. Go to Content | Article Manager | New or Edit to display the article editor screen: (Move the mouse over the image to enlarge.) On closer inspection, you'll notice some items have been renamed or rearranged: In the New Article section, you can set the article to be Featured. This is just another word for what was previously called 'Front Page' or 'Show on Front Page'. In the Article Options, references to sections have gone. The Show Category option allows you to show the Category Title of the current category. The Show Parent option allows you to also show the parent category title among the article details. In the Article Options, references to sections have gone. The Show Category option allows you to show the Category Title of the current category. The Show Parent option allows you to also show the parent category title among the article details. In the New Article section, there's a Permissions button that jumps to the separate Article Permissions section at the bottom of the screen. As you can see, the new user permissions options are available on many levels in the Joomla! 1.6 interface. Here you can set user permissions to delete or edit the current article.   Question: What's the Options button In the Menu Manager: Menus screen about? Answer: In the Menu Manager: Menus screen, there's a new button called Options: Clicking on it will open a pop up screen allowing you set all default User Permissions for all menus.   Question: What's new about the Access Control Levels system? Answer:In Joomla! 1.5, a fixed set of user groups was available, ranging from "Public" users (anyone with access to the frontend of the site) to "Super Administrators", allowed to log in to the backend and do anything. The ACL system in Joomla! 1.6 is much more flexible: Instead of fixed user groups with fixed sets of permissions, you can create as many groups as you want and grant the people in those groups any combination of permissions. ACL enables you to control anything users can do on the site: log in, create, edit, delete, publish, unpublish, trash, archive, manage, or administer things. Users are no longer limited to only one group: a user can belong to different groups at the same time. This allows you to give particular users both the set of permissions for one group and another group without having to create a third, combined set of permissions from the ground up. Permissions no longer apply to the whole site as they did in Joomla! 1.5. You can now set permissions for specific parts of the site. Permissions apply to either the whole site, or to specific components, categories, or items (such as a single article).   Question: How can we set access levels for users? Answer: By default, three Viewing Access Levels are available: Public, Registered, and Special. Go to Users | User Manager and click on the Viewing Access Levels tab to see these levels: This is what the three default Viewing Access Levels mean: Public means that there are no special viewing permissions involved. It's the set of permissions for the Public user group, who are only allowed access to the public site. Registered is the set of permissions for Registered Users. These by default are allowed to log in to the site to view the site parts that are set to the Registered access level. Special is the set of viewing permissions for all users that can log in to the backend (Manager, Administrator, Super User)   Question: How can I customize the logo on the site? Answer: You can customize the logo just by changing the Template Style settings. Let's find out how this works: Navigate to Extensions | Template Manager. Click on the Styles tab and then click on the link Beez2 - Default. The Template Manager: Edit Style screen is displayed. In the Advanced Options panel, locate the Logo option and click on Select. A pop-up screen appears. In the Upload files section, click on Browse to select a logo file from your computer. For best results, use a PNG file with a transparent background applied, with a maximum height of about 65 pixels. Select the image file and click on Start Upload. The message Upload Complete is displayed: Click on the logo image to select it and then click on Insert in the top right corner. In the Edit Style screen, click on Save and then click on View Site. The new logo image is displayed and replaces the Joomla! logo: To further customize the logo and header area, enter a short description of your site in the Advanced Options | Site Description box. This will replace the site tag line, just below the logo.   Question: What is the Redirect Manager? Answer: A new addition in 1.6 is the Redirect Manager, which you can find in the Components menu. This application can be quite useful, especially if you're migrating a 1.5 site to 1.6. When changing to a new site, many URLs from your old site are bound to change. This can result in lots of broken links from other sites that still point to the old URLs. The Redirect Manager helps you to direct visitors who come to your site through outdated links. In the Redirect Manager, just enter the old links and tell Joomla! what new pages it should show instead:   Question: What are the new module features in Joomla! 1.6? Answer: In Joomla! 1.6, using modules is more flexible: You can schedule the time during which a module should display. In previous versions of Joomla!, you could set a start date and an end date for publishing articles. Now this is also possible for modules. Modules are always assigned to one or more menu items. However, when editing a menu in Joomla! 1.5, there was no way to find out or change which modules were assigned to that menu item. You had to leave the menu item edit screen, navigate to the particular module's settings in the Module Manager, and check the module's menu assignment there. In Joomla! 1.6, you can set what modules are assigned to a menu link directly when you're editing a menu link.   Summary In this article we covered some of the most frequently asked questions on Joomla! 1.6. Further resources on this subject: Installing and Configuring Joomla! 1.5 [Article] Search Engine Optimization in Joomla! [Article] Joomla! 1.6: Organizing and Managing Content [Article] Joomla! 1.6: Managing Site Users with Access Control [Article] Mastering Joomla! 1.5 Extension and Framework Development Second Edition [Book]

concrete5 Beginner's Guide Create and customize your own website with the Concrete5 Beginner's Guide         Autonav introduction Before we start customizing the autonav block, we're going to have a quick look at the different options and the output. It's very helpful to be familiar with all the block options as well as knowing the HTML output the block generates before you start extending the block. Preparation You may have the autonav block included in your theme, more precisely in header.php of your theme. Since we're going to play with navigation, we should undo this modification; changing the options in header.php would be a bit annoying otherwise. If you're done with this article, you might want to put the code back in place; it's mostly to make it easier to work with the custom templates we're going to build. Time for action – undoing autonav block integration Open header.php from your theme; it's located in the themes/c5book/elements directory (Code Download-ch:7). Since the following code snippet doesn't show the complete file, make sure you replace the correct lines. Everything is underneath the HTML tag with the ID header: <div id="wrapper"> <div id="page"> <div id="header_line_top"></div> <div id="header"> <?php $a = new Area('Header Nav'); $a->display($c); ?> </div> <div id="header_line_bottom"></div> Save header.php and go back to your page. Make sure the navigation is still there, if it isn't go back to edit the page and add a new autonav block in Header Nav. After you've added it, change the custom template to Header Menu. What just happened? We had to undo a modification done before this article. The code which printed the autonav block directly from the template would be fine if your navigation didn't change. However, since we're working on the autonav block for a whole article, we had to remove this code and replace it with the default code for an editable area. Autonav options The autonav block comes with a bunch of options you can use to create the correct hierarchical output of pages in your navigation. While you probably have to play around with it for a bit to get used to all the options, we're still going to look at a few possible configurations which we'll need later in this article. Autonav page structure The example configurations we're going to look at use the structure shown in the following screenshot. We won't need to tick the checkbox for system pages, which would show the dashboard and some built-in pages. We don't want to include them in our navigation anyway. It doesn't matter if your structure looks different at this point; the examples are easy to understand even if your result looks a bit different. Page order By default, the autonav block uses the sort order which you can see in the sitemap as well. This usually makes sense because it offers the biggest flexibility. Remember, you can arrange pages by dragging their icon to the place where you want the page to be. In all our examples you can choose whatever order you like; it doesn't have an effect on our templates. Example 1 - showing all pages The most basic configuration shows all pages, no matter where we are and no matter how many pages there are. This configuration is useful when you create a JavaScript-based navigation which displays subpages dynamically without reloading the page. The settings should be obvious and the result as well; it will show all pages shown in the preceding structure. When you create JavaScript drop-down navigation, you have to generate HTML code for all elements you want to show, but that doesn't necessarily mean that you want to print all elements. Assuming you've got hundreds of pages, would you like to see all of them in the drop-down menu? Probably not, and this is why you can manually specify the number of page levels you'd like to print. Use this for the drop-down navigation we're going to create later in this article. Example 2 – showing relevant subpages In the structure just shown, assume you're on About, which has two direct child pages. If we wanted to display the two subpages in the left sidebar of our page, we could use the following settings: Example 3 – showing relevant subpages starting from the top For a site where you only have a single navigation, probably on the left-hand side, you have to start at the top and include all the relevant subpages. The settings are similar, but this time we start at the top and include the level below the current subpage as well by using these settings: If you're on the About page again, you'd see all pages on the top, along with the About page and the two subpages of it. Autonav output The autonav controller produces an HTML output which is compatible with most jQuery libraries you can find. It uses an UL/LI structure to create a proper hierarchical representation of the pages we show in our navigation. Before we look at the actual output, here are some words about the process which generates the output. The autonav block controller uses all the settings you make when you add the block. It then creates an array of pages which doesn't have any children—it's a flat array. Unlike what some of you would expect, there's no real recursion in the structure which you have to process in the block template. How's an autonav block template supposed to print a hierarchical structure? That's not too difficult; there's a property called level for each element in the array. You simply have to check what happens to that level. Is the level of the current page element bigger than the one from the previous element? If yes, create a new child to the current page. Does it decrease? If yes, close the HTML tags for the child elements you created when the level increased. Does this sound a bit abstract? Let's look at a simplified, not working, but commented autonav template: <?php defined('C5_EXECUTE') or die(_("Access Denied.")); // get the list of all pages matching the selection $aBlocks = $controller->generateNav(); $nh = Loader::helper('navigation'); echo("<ul class="nav">"); // loop through all the pages foreach($aBlocks as $ni) { $_c = $ni->getCollectionObject(); // get the level of the current element. // This is necessary to create the proper indentation. $thisLevel = $ni->getLevel(); // the current page has a higher level than the previous // page which means that we have to print another UL // element to indent the next pages if ($thisLevel > $lastLevel) { echo("<ul>"); } // the current page has a lower level compared to // the previous page. We have to close all the open // LI and UL elements we've previously opened else if ($thisLevel < $lastLevel) { for ($j = $thisLevel; $j < $lastLevel; $j++) { if ($lastLevel - $j > 1) { echo("</li></ul>"); } else { echo("</li></ul></li>"); } } } // when adding a page, see "echo('<li>..." below // the tag isn't closed as nested UL elements // have to be within the LI element. We always close // them in an iteration later else if ($i > 0) { echo("</li>"); } // output the page information, name and link echo('<li><a href="' . $ni->getURL() . '">' . $ni->getName() . '</a>'); // We have to compare the current page level // to the level of the previous page, safe // it in $lastLevel $lastLevel = $thisLevel; $i++; } // When the last page has been printed, it // can happen that we're not in the top level // and therefore have to close all the child // level we haven't closed yet $thisLevel = 0; for ($i = $thisLevel; $i <= $lastLevel; $i++) { echo("</li></ul>"); } ?> The templates we're going to create don't change a lot from the default PHP template. We mostly use the HTML structure the default template generates and only add some CSS and JavaScript. Understanding every detail of the default autonav template isn't necessary, but still helps you to get the most out of the autonav block. What we must understand is the HTML structure shown as follows—it's what you'll have to work with when you create a custom navigation or layout: <ul class="nav"> <li class="nav-path-selected"> <a class="nav-path-selected" href="/">Home</a> </li> <li class="nav-selected nav-path-selected"> <a class="nav-selected nav-path-selected" href="/index.php/about/">About</a> <ul> <li> <a href="/index.php/about/press-room/">Press Room</a> </li> <li> <a href="/index.php/about/guestbook/">Guestbook</a> </li> </ul> </li> <li> <a href="/index.php/search/">Search</a> </li> <li> <a href="/index.php/news/">News</a> </li> </ul> Since you're supposed to have some HTML knowledge to read this book, it should be fairly easy to understand the preceding structure. Each new level added a new ul element which contains an li element for each page along with an a element to make it clickable. Child pages within a ul element belong to their parent, meaning that the li element of the parent is closed when all the children have been printed. The output uses the default template which adds some classes you can use to style the navigation: nav: The main ul tag contains this class. Use it to access all elements of the navigation. nav-selected: This class is assigned to the elements if they belong to the current page. nav-path-selected: This class can be found on pages which are above the current page. They belong to the path of the current page, and are thus called path-selected.