How-To Tutorials

Activity 3: Investigating texts using Quiz Aim: Using quiz to investigate texts Moodle modules: Quiz Extra programs: None Ease of setup: *** As noted elsewhere, Quiz can be a useful module for practicing different language skills. This is primarily because we can build in helpful feedback and because we can allow students to spend as much time as they want practicing. There are various ways that Quiz can help students listen. Here are some examples: Listening and matching: students listen for gist information and match answers to general questions about the text. Ordering task for arranging events in a sequence. Multiple-choice for information transfer, identifying speakers' attitudes, and identifying numbers. Gap-fill tasks: Students listen to a song, poem, or other text, and fill in the missing words. It's worth thinking carefully about what sorts of words you want to blank out. Do you want to focus on grammar words (prepositions, pronouns, and conjunctions, etc.), words that are difficult to spell, or keywords (words that convey the main meaning of the text)? To exemplify each of these examples, we'll make one quiz with four different question types. You could choose to have quizzes with any number of different question types. We'll take as our listening text a story which we recorded ourselves. We could record it in a recording program like Audacity. The story is about a rather special trip to the zoo. Here is a possible transcript abridged from http://www.onlyfunnystories.com/ZooJob.asp: One day an out of work mime artist is visiting the zoo and attempts to earn some money as a street performer monkey. As soon as he starts to draw a crowd, a zoo keeper grabs him and drags him into his office. The zoo keeper explains to the mime artist that the zoo's most popular attraction, a gorilla, has died suddenly and the keeper fears that attendance at the zoo will fall off. He offers the mime artist a job to dress up as the gorilla until they can get another one. The mime artist accepts. So the next morning the mime artist puts on the gorilla suit and enters the cage before the crowd comes. He discovers that it's a great job. He can sleep all he wants, play and make fun of people and he draws bigger crowds than he ever did as a mime. However, eventually the crowds tire of him and he tires of just swinging on trees. He begins to notice that the people are paying more attention to the lion in the cage next to his. Not wanting to lose the attention of his audience, he climbs to the top of his cage, crawls across a partition, and dangles from the top to the lion's cage. Of course, this makes the lion furious, but the crowd loves it. At the end of the day the zoo keeper comes and gives the mime artist a raise for being such a good attraction. Well, this goes on for some time, the mime keeps taunting the lion, the crowds grow larger, and his salary keeps going up. Then one terrible day when he is dangling over the furious lion he slips and falls. The mime artist is terrified. The lion gathers itself and prepares to pounce. The mime artist is so scared that he begins to run round and round the cage with the lion close behind. Finally, the mime artist starts screaming and yelling, "Help me, help me!", but the lion is quick and pounces. The mime artist soon finds himself flat on his back looking up at the angry lion and the lion says, "Shut up you idiot! Do you want to get us both fired?" The questions start with general gist questions (matching). Then comes an ordering question, which requires slightly more attention to detail. The last two are multiple-choice and gap-fill questions, which get students to focus on detailed aspects of the listening text. Here's how to do it The following sections refer you to the activities and point out any major differences. Setting up the quiz Listening and matching question Use NanoGong to create sound clips which replace pictures and texts. Here are some examples of the matching questions you could set up. These are general questions which help students get the gist of the story. Question Answer How many animals are there in the story?. Three Where does this take place? The zoo Where does the zoo keeper find the mime artist? On the street How many animals are there in the cages? Two This is what your matching question might look like: Here are a few more matching questions you could consider: Match recordings to pictures. Students could hear a description of an image (painting, photo) and identify the description. The easiest way to do this would be to take some photos of similar scenes. Match individual words to sounds. Students hear the recording and decide which words they are hearing. Recording Choice A. "I hear you're coming"   B."It's over here" hear/here   hear/here Ordering question In this variation students listen to a story and then order events in sequence. We need to make sure that the sequence is not guessable without hearing the story. Here are the stages from our story that you could include in the question: The zookeeper grabs the mime artist. The zookeeper offers the mime artist a job. The gorilla lies on top of the neighboring cage. The lion tries to attack the gorilla. The lion tells the gorilla off. This is what the ordering question would look like: Multiple-choice question Multiple-choice questions are a good way of getting students to investigate texts in more detail. Here are some possible questions we could include in this activity. Question 1 According to the story, why does the mime artist accept a job as a gorilla? Answer 1 His work on the street isn't going well. Answer 2 The zookeeper has an urgent need for a gorilla. Answer 3 He always wanted to work as a gorilla in a zoo. Answer 4 The last gorilla quit the job.

What is a report? A report is a vehicle for organizing, processing, and displaying data in a format suitable for outputting. In the past, reports went to hardcopy devices (for example printers). Reporting technology is now more general purpose and flexible. Reports may be displayed on-screen in preview mode rather than being printed, or output to another device (for example, disk storage in PDF format), but with the same formatting as though they were printed. In fact, all of the report screenshots in this article were taken from reports generated in preview mode. Once generated, the data contents of a report are static. Part of the new flexibility of NAV 2009 is the capability to output reports in preview mode, which have interactive capabilities. However, those capabilities only affect the presentation of the data, not the data included in the report dataset. Examples include dynamic sorting and show or hide data (expand or collapse). Even so, all specification of the data selection criteria for a report must be done at the beginning, before the report is generated. NAV 2009 also allows dynamic functionality for drill down into the underlying data, drill through to a page, and even drill through into another report. In NAV, report objects can also be classified as processing only by setting the correct report property (that is, by setting the ProcessingOnly property to Yes). A ProcessingOnly report will display no data to the user in the traditional reporting manner, but will simply process and update data in the tables. A report can add, change, or delete data in tables, whether the report is ProcessingOnly or a normal printing report. In general, reports are associated with one or more tables. A report can be created without being externally associated with any table, but that is an exception, not a rule. Even if a report is associated with a particular table, it can freely access and display data from other referenced tables. Two NAV report designers NAV 2009 report design uses a pair of Report Designer tools. The first is the Report Designer that is part of the C/SIDE development environment. The second is the Visual Studio Report Designer. For simplicity, we will refer to these as C/SIDE RD and VS RD in this article. The C/SIDE RD is the only tool needed to create reports for the Classic Client. If a NAV 2009 system is using only the Classic Client, then only reports created using the C/SIDE RD can be run. However, when using the RoleTailored Client, both C/SIDE RD and VS RD reports can be run. The RTC runs C/SIDE RD reports by invoking a temporary instance of the Classic Client, running the report, and then closing down the Classic Client instance (no additional license slots are used). In this article, we will focus totally on the design of reports for the RoleTailored Client using the VS RD. The typical report development process for an RTC report begins by doing foundation work in the C/SIDE RD. That's where all the data structure, working data elements, data flow, and C/AL logic are defined. The only way to create or modify report objects is to start in the C/SIDE RD. Once all of the elements are in place, the development work proceeds to the VS RD where the layout and presentation work is done, including any desired dynamic options. The following flow chart provides a conceptual view of the creation of a new report using the two different Report Design approaches—one for the Classic Client and the other for the RoleTailored Client. The functions in the center and left chart paths are those done in the C/SIDE RD (steps 1 through 7). Those in the right set of the chart are the ones done in the VS RD (steps 4 and 6 through 10). Steps 1, 2, 3, and 5 are essentially the same (but not quite) regardless of the target client. Step 4 is done in the C/SIDE RD Sections Designer for both clients, but what you do is quite different in each case. As you can see, many of the functions are the same regardless of the target client. Most of those are done within the Classic Report Designer. Therefore, the accurate claim for NAV 2009 that, even though the layout function uses Visual Studio Report Designer, a large part of the report design is still done within the traditional NAV Report Designer. For the experienced NAV Classic Client developer who is moving to RTC projects, the biggest challenges will be to learn exactly which tasks are done using which development tool, and to learn the intricacies of the Visual Studio Report Designer layout tools. Those intricacies include understanding just how the VS RD features interact with the NAV data structures and the C/SIDE RD definitions. This chart shows the general flow of NAV report design in order to make it easier to understand which functions are done in which of the Report Design tools, and allows comparison of the Classic and RoleTailored design processes. In practice, the actual flow will depend on the specifics of a particular report. It's feasible for a simple C/SIDE report to be entirely generated by the Wizard, but that is generally not true for a VS RD report. It's important to note that some of the steps defined in the chart can be performed in a different sequence than that is shown, and some can be repeated in an iterative fashion. Nevertheless, the chart that follows is a good introductory guide to NAV Report Design. Terminology for the following chart: Working Data is all the non-database data needed to process the report; Report Data is what will be displayed in the report. A Hybrid Report Designer The Report Designer toolset in NAV 2009 represents a set of compromises tied back to some initial NAV 2009 product feature goals. One product feature goal was to retain the ability of developers of developers to do their to do their work within C/SIDE, thus avoiding scrapping more than a decade of knowledge and experience. A second product feature goal was to provide a much more fully featured set of reporting capabilities. After much thought and experimentation, the decision was made to create a toolset that would target report generation using the functionality of SQL Server Reporting Services (SSRS). The method of accomplishing that was to "glue together" the data and logic definition parts of the C/SIDE Report Designer to the layout parts of Visual Studio Report Designer, in order to create a hybrid. When a report is designed, VS RD builds a definition of the report layout in the XML-structured Report Definition Language Client-side (RDLC). When you exit VS RD, the latest copy of the RDLC code is stored in the current C/SIDE Report object. When you exit the Report Designer and save your Report object, the C/SIDE RD saves the combined set of report definition information, C/SIDE and RDLC, in the database. If you export a report object in text format, you will be able to see the two separate sets of report definition. The XML-structured RDLC is quite obvious (beginning with the heading RDLDATA). NAV report—look and feel NAV allows you to create reports of many different kinds with vastly different "look and feel" attributes. The consistency of report look and feel does not have the same level of design importance as the consistency of look and feel for pages does. The standard NAV application only uses a few of the possible report styles, most of which are in a relatively "plain-Jane" format. While good design practice dictates that enhancements should integrate seamlessly unless there is an overwhelming justification for being different, there are many opportunities for providing replacement or additional reporting capabilities. The tools that are available within NAV for accessing and manipulating data in textual format are very powerful. Unlike the previous versions of NAV, this new version includes a reasonable set of graphical reporting capabilities. And, of course, there is always the option to output report results to another processing/presentation tool such as Excel. NAV report types The following are the types of reports: List: This is a formatted list of data. A sample list report in the standard system is the Customer – Order Detail list shown in the following screenshot: Document: This is formatted along the lines of a pre-printed form, where a page (or several pages) represents a complete, self-contained report. Examples are Customer Invoice, Packing List (even though it's called a list, it's a document report), Purchase Order, and Accounts Payable check.The following screenshot is a Customer Sales-Invoice document report: The List and Document report types are defined based on their layout. The next three report types are defined based on their usage rather than their layout.

Managing your users: The User Manager The User Manager within the administration interface gives you an overview of all the registered users of your website and the ability to manage them as needed. Only users registered as Administrator or Super Administrator can make changes here. Creating a new user The Party People website has only one administration user and we want to add a new user who has backend manager access. As the administrator, you can do this by accessing the User Manager from within the administration. Click Site | User Manager in the top menu or click the User Manager icon on the front page of the administration page. To add a new user, click the New icon on the top right toolbar. Type in a name, a username, an e-mail address, and a password into the Name, Username, and New Password input boxes, as shown in the following screenshot. Verify the password to be sure you have entered the correct string. Click on the user group that you want to allocate them to from the selection in the Group window. Your choice will obviously depend upon the content and access level you want them to have. We'll select Manager for our site. Click No for Block User, as we are setting up a new one. Select Yes or No for Receive System E-mails. Save your new user. Adding a new user as a site contact Before you add your new user to your contact list, consider whether they fit into the established contact categories. If they don't, you can add a new Category. Do this before you add the new contact. Adding a new contact Category Create contact Categories based on what role the user is to take within your site. It is described in the following steps: Select Components from the top menu, then Contacts and Manage Contacts to see the Contact Manager. To add a new contact Category, select that link. In the new Category screen, give the category a name and complete the details as shown in the following screenshot. Add a brief description if you need to. Save your new category.

In this article by Kae Verens, we will look at: How to install and use the DataTables plugin How to load data pages on request from the server Searching and ordering the data From time to time, you will want to show data in your website and allow the data to be sorted and searched. It always impresses me that whenever I need to do anything with jQuery, there are usually plugins available, which are exactly or close to what I need. The DataTables plugin allows sorting, filtering, and pagination on your data. Here's an example screen from the project we will build in this article. The data is from a database of cities of the world, filtered to find out if there is any place called nowhere in the world: Get your copy of DataTables from http://www.datatables.net/, and extract it into the directory datatables, which is in the same directory as the jquery.min.js file. What the DataTables plugin does is take a large table, paginate it, and allow the columns to be ordered, and the cells to be filtered. Setting up DataTables Setting up DataTables involves setting up a table so that it has distinct < thead > and < tbody > sections, and then simply running dataTable() on it. As a reminder, tables in HTML have a header and a body. The HTML elements < thead > and < tbody > are optional according to the specifications, but the DataTables plugin requires that you put them in, so that it knows what to work with. These elements may not be familiar to you, as they are usually not necessary when you are writing your web pages and most people leave them out, but DataTables needs to know what area of the table to turn into a navigation bar, and which area will contain the data, so you need to include them. Client-side code The first example in this article is purely a client-side one. We will provide the data in the same page that is demonstrating the table. Copy the following code into a file in a new demo directory and name it tables.html: <html> <head> <script src="../jquery.min.js"></script> <script src="../datatables/media/js/jquery.dataTables.js"> </script> <style type="text/css"> @import "../datatables/media/css/demo_table.css";</style> <script> $(document).ready(function(){ $('#the_table').dataTable(); }); </script> </head> <body> <div style="width:500px"> <table id="the_table"> <thead> <tr> <th>Artist / Band</th><th>Album</th><th>Song</th> </tr> </thead> <tbody> <tr><td>Muse</td> <td>Absolution</td> <td>Sing for Absolution</td> </tr> <tr><td>Primus</td> <td>Sailing The Seas Of Cheese</td> <td>Tommy the Cat</td> </tr> <tr><td>Nine Inch Nails</td> <td>Pretty Hate Machine</td> <td>Something I Can Never Have</td> </tr> <tr><td>Horslips</td> <td>The Táin</td> <td>Dearg Doom</td> </tr> <tr><td>Muse</td> <td>Absolution</td> <td>Hysteria</td> </tr> <tr><td>Alice In Chains</td> <td>Dirt</td> <td>Rain When I Die</td> </tr> <!-- PLACE MORE SONGS HERE --> </tbody> </table> </div> </body> </html> When this is viewed in the browser, we immediately have a working data table: Note that the rows are in alphabetical order according to Artist/Band. DataTables automatically sorts your data initially based on the first column. The HTML provided has a < div > wrapper around the table, set to a fixed width. The reason for this is that the Search box at the top and the pagination buttons at the bottom are floated to the right, outside the HTML table. The < div > wrapper is provided to try to keep them at the same width as the table. There are 14 entries in the HTML, but only 10 of them are shown here. Clicking the arrow on the right side at the bottom-right pagination area loads up the next page: And finally, we also have the ability to sort by column and search all data: In this screenshot, we have the data filtered by the word horslips, and have ordered Song in descending order by clicking the header twice. With just this example, you can probably manage quite a few of your lower-bandwidth information tables. By this, I mean that you could run the DataTables plugin on complete tables of a few hundred rows. Beyond that, the bandwidth and memory usage would start affecting your reader's experience. In that case, it's time to go on to the next section and learn how to serve the data on demand using jQuery and Ajax. As an example of usage, a user list might reasonably be printed entirely to the page and then converted using the DataTable plugin because, for smaller sites, the user list might only be a few tens of rows and thus, serving it over Ajax may be overkill. It is more likely, though, that the kind of information that you would really want this applied to is part of a much larger data set, which is where the rest of the article comes in! Getting data from the server The rest of the article will build up a sample application, which is a search application for cities of the world. This example will need a database, and a large data set. I chose a list of city names and their spelling variants as my data set. You can get a list of this type online by searching. The exact point at which you decide a data set is large enough to require it to be converted to serve over Ajax, instead of being printed fully to the HTML source, depends on a few factors, which are mostly subjective. A quick test is: if you only ever need to read a few pages of the data, yet there are many pages in the source and the HTML is slow to load, then it's time to convert. The database I'm using in the example is MySQL (http://www.mysql.com/). It is trivial to convert the example to use any other database, such as PostgreSQL or SQLite. For your use, here is a short list of large data sets: http://wordlist.sourceforge.net/—Links to collections of words. http://www.gutenberg.org/wiki/Gutenberg:Offline_Catalogs—A list of books placed online by Project Gutenburg. http://www.world-gazetteer.com/wg.php?men=stdl—A list of all the cities in the world, including populations. The reason I chose a city name list is that I wanted to provide a realistic large example of when you would use this. In your own applications, you might also use the DataTables plugin to manage large lists of products, objects such as pages or images, and anything else that can be listed in tabular form and might be very large. The city list I found has over two million variants in it, so it is an extreme example of how to set up a searchable table. It's also a perfect example of why the Ajax capabilities of the DataTables project are important. Just to see the result, I exported all the entries into an HTML table, and the file size was 179 MB. Obviously, too large for a web page. So, let's find out how to break the information into chunks and load it only as needed. Client-side code On the client side, we do not need to provide placeholder data. Simply print out the table, leaving the < tbody > section blank, and let DataTables retrieve the data from the server. We're starting a new project here, so create a new directory in your demos section and save the following into it as tables.html: <html> <head> <script src="../jquery.min.js"></script> <script src="../datatables/media/js/jquery.dataTables.js"> </script> <style type="text/css"> @import "../datatables/media/css/demo_table.css"; table{width:100%} </style> <script> $(document).ready(function(){ $('#the_table').dataTable({ 'sAjaxSource':'get_data.php' }); }); </script> </head> <body> <div style="width:500px"> <table id="the_table"> <thead> <tr> <th>Country</th> <th>City</th> <th>Latitude</th> <th>Longitude</th> </tr> </thead> <tbody> </tbody> </table> </div> </body> </html> In this example, we've added a parameter to the .dataTable call, sAjaxSource, which is the URL of the script that will provide the data (the file will be named get_data.php). Server-side code On the server side, we will start off by providing the first ten rows from the database. DataTables expects the data to be returned as a two-dimensional array named aaData. In my own database, I've created a table like this: CREATE TABLE `cities` ( `ccode` char(2) DEFAULT NULL, `city` varchar(87) DEFAULT NULL, `longitude` float DEFAULT NULL, `latitude` float DEFAULT NULL, KEY `city` (`city`(5)) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 Most of the searching will be done on city names, so I've indexed city. Initially, let's just extract the first page of information. Create a file called get_data.php and save it in the same directory as tables.html: <?php // { initialise variables $amt=10; $start=0; // } // { connect to database function dbRow($sql){ $q=mysql_query($sql); $r=mysql_fetch_array($q); return $r; } function dbAll($sql){ $q=mysql_query($sql); while($r=mysql_fetch_array($q))$rs[]=$r; return $rs; } mysql_connect('localhost','username','password'); mysql_select_db('phpandjquery'); // } // { count existing records $r=dbRow('select count(ccode) as c from cities'); $total_records=$r['c']; // } // { start displaying records echo '{"iTotalRecords":'.$total_records.', "iTotalDisplayRecords":'.$total_records.', "aaData":['; $rs=dbAll("select ccode,city,longitude,latitude from cities order by ccode,city limit $start,$amt"); $f=0; foreach($rs as $r){ if($f++) echo ','; echo '["',$r['ccode'],'", "',addslashes($r['city']),'", "',$r['longitude'],'", "',$r['latitude'],'"]'; } echo ']}'; // } In a nutshell, what happens is that the script counts how many cities are there in total, and then returns that count along with the first ten entries to the client browser using JSON as the transport.

eZ Publish templating In the first part of this article, we will introduce the basics of the eZ Publish templating system, which will help us to better understand the rest of the article Templating eZ Publish has its own templating system based on the decoupling of layout and content. This will help us to assign a custom layout to any content object in different sections. Moreover, just as other templating platforms, such as Smarty (http://www.smarty.net), eZ Publish has its own markup to help developers with control structure operations, subtemplating, and on-the-fly content editing. It also exposes a particular function to fetch and filter content from a database. The official eZ Publish website has a constant, up-to-date reference with the entire templating markup. We suggest you to use the following link every time that you need to know more details about the available arguments:http://ez.no/doc/ez_publish/technical_manual/4_0/templates/ The templating markup All of the eZ Publish templating code should be placed between curly brackets. When the CMS will parse our template file and find the curly brackets, it will start executing the related code. Escaping the curly bracketsIf we need to use curly brackets, for example to write a javascript function inside our template, we need to use the {literal} operator. {literal}<script type="text/javascript">function alertMe() { window.alert('Harkonen approaching!');}</script>{/literal} Control structure operators We can divide these function into two main families: Conditional (IF-THEN-ELSE) Looping (FOR-FOREACH-WHILE) Whereas the first one should be used to change the template behavior according to some predefined condition, the other one will help us to seek and manage array and content structures. Conditional control Conditional control is sometimes useful for changing the output when some data is received by the system. For example, we would need a different CSS class for a particular value, or to change the <div> class, if the current month is the same as the one displayed, as shown below: {def $current_month=currentdate()|datetime(custom, '%F')}{if $node.name|eq($current_month) }<span class="this-month">{else}<span class="default-month">{/if}{undef $current_month} In the first line, we define a $current_month variable that has a value of the name of the month (for example, October), retrieved by the datetime() operator. Then we use the IF conditional control to choose the correct class. In the last line, we delete the variable previously created, by releasing it from system memory. Loop control As stated above, the loop control structure can be used to iterate through an array. We can, for example, create an unordered list (<ul>) from an array of items. <ul>{foreach $items as $item} <li>{node_view_gui content_node=$item view=line}</li>{/foreach}</ul> This will be rendered as: <ul> <li>1st item</li> <li>2nd item</li> <li>3rd item</li> ...</ul> As you can see, the FOREACH structure is similar to the PHP structure. In this example, the most interesting line is the definition of the list object. This we can literally read as: render the content node (node_view_gui) from a specific node (content_node=$issue) using the line view template (view=line). Fetch functions With the fetch functions, we can retrieve all of the information about a content object for a module. The fetch functions can also be used to create custom queries to retrieve only the information we need, and not everything. eZ Publish exposes many fetch functions, which can be read about on the documentation site at http://ez.no/doc/ez_publish/technical_manual/4_0/reference/template_fetch_functions The most important, and most used, fetch functions are those regarding the content, sections, and user modules. For example, we can fetch the root content object by using the following code in our template: {$object = fetch('content', 'object', hash('id', '1'))} We can then use the $object variable to display the object inside the HTML code. Generic template functions and operators The CMS gives us a lot of functions and operators, all of them described in the reference manual of the eZ System documentation site. As a thumb rule, we should remember that to execute a particular function, we have to use the following syntax: {function_name parameter1=value1 ... parameterN=valueN } All parameters are separated by spaces and can be specified in no particular order. If we want to manage the operators, we have to remember that they accept the parameters passed in a specific order, separated by a comma. Moreover, an operator should handle a parameter passed to it with a pipe (|). {$piped_parameter|my_operator( parameter1, ..., parameterN ) } Every time we see a pipe after a variable, we have to remember that we are passing a value to an operator. We used the datetime() operator in the previous example for the conditional control functionality. As a reference to API functions and operators, you can use the official variable documentation that is constantly updated on the eZ System site:http://ez.no/doc/ez_publish/technical_manual/4_0/reference/template_operatorshttp://ez.no/doc/ez_publish/technical_manual/4_0/reference/template_functions Layout variables By default, the page layout template can access some of the variables passed by the CMS. These variables, named Layout variables, can be used to render system and user information, or to change the output. These variables are automatically configured by eZ Publish when it analyzes and executes the code related to a view. One of the most important variables is $module_result, which contains the results generated by the module and the view that is being executed. A module is an HTTP interface that interacts with eZ Publish. A module consists of a set of views that contain the code to be executed. For example, if we call the following URL, the system executes the login view code of the user module:http://www.example.com/index.php/user/login. As an API reference, you can use the official variable documentation that is constantly updated on the eZ System site:http://ez.no/doc/ez_publish/technical_manual/4_0/templates/the_pagelayout/variables_in_pagelayout Overriding a template eZ Publish offers a set of standard templates that are useful, but they cannot cover all the possible design needs. To solve this issue, the CMF provides a fallback system that allows us to load different templates based on specific rules. This system is usually referred to as overriding, and allows us to change the template for each module's view by overriding the default template when the user is in a particular context. Embedding HTML inside the WYSIWYG XML editor, pt.2 We have to override a standard behavior of eZ Publish to create a generic HTML block inside the WYSIWYG XML editor. We use a content style named html for the online editor and we will work on it for the frontend to render it correctly. First, we have to create a file named literal.tpl and place it in the design folder of our extension. The following code will do exactly what we need: # mkdir -p /var/www/packtmediaproject/extension/packtmedia/design/magazine/templates/datatype/view/ezxmltags/# cd /var/www/packtmediaproject/extension/packtmedia/design/magazine/templates/datatype/view/ezxmltags/# touch literal.tpl Next, we will open the literal.tpl file in our preferred IDE. Now we will add the code that will, by default, render everything surrounded by a <pre> tag and the raw HTML code, if the class is html: {if ne( $classification, 'html' )} <pre {if ne( $classification|trim, '' )} class="{$classification|wash}"{/if}>{$content|wash( xhtml )}</pre>{else} {$content}{/if} This code will check to see if the $classification variable is different from the "html" string in order to add the <pre> tag and then, again, it will add a class attribute to the <pre> tag if the $classification variable is not null. To use it, we only need to reset the cache from the shell prompt by using the following command: cd /var/www/packmediaproject/php bin/php/ezcache.php --clear-all --purge The ezcache.php file is a PHP shell script that can be used to clear and manage the eZ Publish cache. This file has many parameters, which can be viewed by using the --help parameter. Creating a new design Before starting work on the eZ Webin template code, we need to create a wireframe in order to decide on the layout structure. We will use this structure to override the standard layout files. A wireframe is a basic visual guide that is used in web design to suggest the structure of a website and the relationships between its pages. Wireframe editorsThere are a lot of commercial and free wireframe editors. To create our site's wireframes, we will use the Firefox plugin called Pencil(http://www.evolus.vn/Pencil/).We have chosen Pencil because it is open source and works on every platform that runs the Firefox browser.If you need something more complete, you should take a look at Balsamiq (http://www.balsamiq.com/) or at OmniGraffle (http://www.omnigroup.com/applications/OmniGraffle/) if you have an Apple computer. Our site will have at least six different page layouts: The homepage The issue page, where we will display the cover and the articles list The issue archive page, by month and by years The staff profile page, where we will display the latest articles that the editor has written, along with his profile The article and the forum pages, with the default layout based on the eZ Webin design Now we will illustrate the first four layouts because we will work on them, overriding their standard eZ Webin layout. The homepage Starting from the homepage, we can see that the site will have, in the top-left corner, a logo for the magazine and a place-holder for a banner. Under these, we will have the main navigation menu and the main content area. We have chosen a three-column layout in order to easily manage the content that we want to show. In the homepage, the first column will show the latest news and the middle column will show the information and cover of the latest issue. The last column will have two boxes—one with the most important article from the latest issue and the other with the forum thread. Issue page The issue page will show some information of a specific magazine issue. In this page, the middle box of the homepage will shift towards the left, and in the right column there will be the highlighted article for the issue. At the bottom of the page, we will find all of the other articles. The issue archive We have to remember that our magazine is released monthly, so we need an archive page where we can collect all of the past issues. The issue archive page, which can be reached by clicking on the main navigation menu, will again show some information from the latest issue. (We need to sell our articles!) The rightmost column of the template will show all of the covers for the current or selected year. At the bottom of the page, we will create a box with links to the past issues grouped by years and months. The staff profile page The staff profile page will display information from a staff profile, such as his avatar, biography, and the latest articles that he has written. The staff profile page will have three columns. The first column will show information regarding the editor's profile, the middle column will show all of the articles the editor has written (paged five by five) and the third will be used for banners or other images. >> Continue Reading: Creating a Design with eZ Publish 4 Templating System: Part 2

A game needs sound, music and video. It has to offer the player attractive background music. It must also generate sounds associated with certain game events. When a spaceship shoots a laser beam, a sound must accompany this action. Reproducing videos showing high-quality previously rendered animations is a good idea during transitions between one stage and the next. Hear the UFOs coming So far, we have worked with 3D scenes showing 3D models with textures and different kinds of lights. We took advantage of C# object-oriented capabilities and we animated 3D models and moved the cameras. We have read values from many different input devices and we added physics, artificial intelligence, amazing effects, gauges, statistics, skill levels, environments, and stages. However, the game does not use the speakers at all because there is no background music and there are no in-game sounds. Thus, we have to sort this issue out. Modern games use videos to dazzle the player before starting each new stage. They use amazing sound eff ects and music custom prepared for the game by renowned artists. How can we add videos, music, and sounds in Silverlight? We can do this by taking advantage of the powerful multimedia classes offered by Silverlight 3. However, as a game uses more multimedia resources than other simpler applications, we must be careful to avoid including unnecessary resources in the files that must be downloaded before starting the application. Time for action – installing tools to manipulate videos The 3D digital artists used Blender to create an introductory video showing a high quality rendered animation for five seconds. They took advantage of Blender's animation creation features, as shown in the following screenshot: A spaceship flies in a starry universe for a few seconds. Then, the camera navigates through the stars. Your project manager wants you to add this video as an introduction to the game. However, as the video file is in AVI (Audio Video Interleave) format and Silverlight 3 does not support this format, you have to convert the video to an appropriate format. The creation of video animations for a game is very complex and requires specialist skills. We are going to simplify this process by using an existing video. First, we must download and install an additional tool that will help us in converting an existing video to the most appropriate file formats used in Silverlight 3: The necessary tools will depend on the applications the digital artists use to create the videos. However, we will be using some tools that will work fine with our examples. Download one of the following files: parceApplication's name Download link File name Description Expression Encoder 2 http://www.microsoft.com/expression/try-it/try-it-v2.aspx Encoder_Trial_en.exe It is a commercial tool, but the trial offers a free fully functional version for 30 days. This tool will enable us to encode videos to the appropriate format to use in Silverlight 3. Expression Encoder 3 http://www.microsoft.com/expression/try-it Encoder_Trial_en.exe It is the newest trial version of the aforementioned commercial tool. Run the installers and follow the steps to complete the installation wizards. If you installed Expression Encoder 2, download and install its Service Pack 1. The download link for it is http://www.microsoft.com/expression/tryit/try-it-v2.aspx#encodersp1 file name—EncoderV2SP1_en.exe. Once you have installed one of the versions of Expression Encoder, you will be able to load and encode many video files in different file formats, as shown in the following screenshot:

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

Plotting dates Sooner or later, we all have had the need to plot some information over time, be it for the bank account balance each month, the total web site accesses for each day of the year, or one of many other reasons. Matplotlib has a plotting function ad hoc for dates, plot_date() that considers data on X, Y, or both axes, as dates, labeling the axis accordingly. As usual, we now present an example, and we will discuss it later: In [1]: import matplotlib as mplIn [2]: import matplotlib.pyplot as pltIn [3]: import numpy as npIn [4]: import datetime as dtIn [5]: dates = [dt.datetime.today() + dt.timedelta(days=i) ...: for i in range(10)]In [6]: values = np.random.rand(len(dates))In [7]: plt.plot_date(mpl.dates.date2num(dates), values, linestyle='-');In [8]: plt.show() First, a note about linestyle keyword argument: without it, there's no line connecting the markers that are displayed alone. We  created  the dates array using timedelta(), a datetime function that helps us define a date interval—10 days in this case. Note how we had to convert our date values using the date2num() function. This is because Matplotlib represents dates as float values corresponding to the number of days since 0001-01-01 UTC. Also note how the X-axis labels, the ones that have data values, are badly rendered. Matplotlib provides ways to address the previous two points—date formatting and conversion, and axes formatting. Date formatting Commonly, in Python programs, dates are represented as datetime objects, so we have to first convert other data values into datetime objects, sometimes by using the dateutil companion module, for example: import datetimedate = datetime.datetime(2009, 03, 28, 11, 34, 59, 12345) or import dateutil.parserdatestrings = ['2008-07-18 14:36:53.494013','2008-07-20 14:37:01.508990', '2008-07-28 14:49:26.183256']dates = [dateutil.parser.parse(s) for s in datestrings] Once we have the datetime objects, in order to let Matplotlib use them, we have to convert them into floating point numbers that represent the number of days since 0001-01-01 00:00:00 UTC. To do that, Matplotlib itself provides several helper functions contained in the matplotlib.dates module: date2num():  This function converts one or a sequence of datetime objects to float values representing days since 0001-01-01 00:00:00 UTC (the fractional parts represent hours, minutes, and seconds) num2date():  This function converts one or a sequence of float values representing days since 0001-01-01 00:00:00 UTC to datetime objects (or a sequence, if the input is a sequence) drange(dstart, dend, delta): This function returns a date range (a sequence) of float values in Matplotlib date format; dstart and dend are datetime objects while delta is a datetime.timedelta instance Usually, what we will end up doing is converting a sequence of datetime objects into a Matplotlib representation, such as: dates = list of datetime objectsmpl_dates = matplotlib.dates.date2num(dates) drange() can be useful in situations like this one: import matplotlib as mplfrom matplotlib import datesimport datetime as dtdate1 = dt.datetime(2008, 9, 23)date2 = dt.datetime(2009, 4, 12)delta = dt.timedelta(days=10)dates = mpl.dates.drange(date1, date2, delta) where dates will be a sequence of floats starting from date1 and ending at date2 with a delta timestamp between each item of the list. Axes formatting with axes tick locators and formatters As we have already seen, the X labels on the first image are not that nice looking. We would expect Matplotlib to allow a better way to label the axis, and indeed, there is. The solution is to change the two parts that form the axis   ticks—locators and formatters. Locators control the tick's position, while formatters control the formatting of labels. Both have a major and minor mode: the major locator and formatter are active by default and are the ones we commonly see, while minor mode can be turned on by passing a relative locator or formatter function (because minors are turned off by default by assigning NullLocator and NullFormatter to them). While this is a general tuning operation and can be applied to all Matplotlib plots, there are some specific locators and formatters for date plotting, provided by matplotlib.dates: MinuteLocator, HourLocator,DayLocator, WeekdayLocator,MonthLocator, YearLocator are all the  locators available that place a tick at the time specified by the name, for example, DayLocator will draw a tick at each day. Of course, a minimum knowledge of the date interval that we are about to draw is needed to select the best locator. DateFormatter is the tick formatter that uses strftime() to format strings.   The default locator and formatter are matplotlib.ticker.AutoDateLocator and matplotlib.ticker.AutoDateFormatter, respectively. Both are set by the plot_date() function when called. So, if you wish to set a different locator and/or formatter, then we suggest to do that after the plot_date() call in order to avoid the plot_date() function resetting them to the default values. Let's group all this up in an example: In [1]: import matplotlib as mplIn [2]: import matplotlib.pyplot as pltIn [3]: import numpy as npIn [4]: import datetime as dtIn [5]: fig = plt.figure()In [6]: ax2 = fig.add_subplot(212)In [7]: date2_1 = dt.datetime(2008, 9, 23)In [8]: date2_2 = dt.datetime(2008, 10, 3)In [9]: delta2 = dt.timedelta(days=1)In [10]: dates2 = mpl.dates.drange(date2_1, date2_2, delta2)In [11]: y2 = np.random.rand(len(dates2))In [12]: ax2.plot_date(dates2, y2, linestyle='-');In [13]: dateFmt = mpl.dates.DateFormatter('%Y-%m-%d')In [14]: ax2.xaxis.set_major_formatter(dateFmt)In [15]: daysLoc = mpl.dates.DayLocator()In [16]: hoursLoc = mpl.dates.HourLocator(interval=6)In [17]: ax2.xaxis.set_major_locator(daysLoc)In [18]: ax2.xaxis.set_minor_locator(hoursLoc)In [19]: fig.autofmt_xdate(bottom=0.18) # adjust for date labels displayIn [20]: fig.subplots_adjust(left=0.18)In [21]: ax1 = fig.add_subplot(211)In [22]: date1_1 = dt.datetime(2008, 9, 23)In [23]: date1_2 = dt.datetime(2009, 2, 16)In [24]: delta1 = dt.timedelta(days=10)In [25]: dates1 = mpl.dates.drange(date1_1, date1_2, delta1)In [26]: y1 = np.random.rand(len(dates1))In [27]: ax1.plot_date(dates1, y1, linestyle='-');In [28]: monthsLoc = mpl.dates.MonthLocator()In [29]: weeksLoc = mpl.dates.WeekdayLocator()In [30]: ax1.xaxis.set_major_locator(monthsLoc)In [31]: ax1.xaxis.set_minor_locator(weeksLoc)In [32]: monthsFmt = mpl.dates.DateFormatter('%b')In [33]: ax1.xaxis.set_major_formatter(monthsFmt)In [34]: plt.show() The result of executing the previous code snippet is as shown: We drew the subplots in reverse order to avoid some minor overlapping problems. fig.autofmt_xdate() is used to nicely format date tick labels. In particular, this function rotates the labels (by using rotation keyword argument, with a default value of 30°) and gives them  more room (by using bottom keyword argument, with a default value of 0.2). We can achieve the same result, at least for the additional spacing, with: fig = plt.figure()fig.subplots_adjust(bottom=0.2)ax = fig.add_subplot(111) This can also be done by creating the Axes instance directly with: ax = fig.add_axes([left, bottom, width, height]) while specifying the explicit dimensions. The subplots_adjust() function allows us to control the spacing around the subplots by using the following keyword arguments: bottom, top, left, right: Controls the spacing at the bottom, top, left, and right of the subplot(s)     wspace, hspace: Controls the horizontal and vertical spacing between subplots We can also control the spacing by using these parameters in the Matplotlib configuration file: figure.subplot.<position> = <value> Custom formatters and locators Even if it's not strictly related to date plotting, tick formatters allow for custom formatters too: ...import matplotlib.ticker as ticker...def format_func(x, pos): return <a transformation on x>...formatter = ticker.FuncFormatter(format_func)ax.xaxis.set_major_formatter(formatter)... The  function format_func will be called for each label to draw, passing its value and position on the axis. With those two arguments, we can apply a transformation (for example, divide x by 10) and then return a value that will be used to actually draw the tick label. Here's a general note on NullLocator: it can be used to remove axis ticks by simply issuing: ax.xaxis.set_major_locator(matplotlib.ticker.NullLocator()) Text properties, fonts, and LaTeX Matplotlib has excellent text support, including mathematical expressions, TrueType font support for raster and vector outputs, newline separated text with arbitrary rotations, and Unicode. We have total control over every text property (font size, font weight, text location, color, and so on) with sensible defaults set in the rc configuration file. Specifically for those interested in mathematical or scientific figures, Matplotlib implements a large number of TeX math symbols and commands to support mathematical expressions anywhere in the figure. We already saw some text functions, but the following list contains all the functions which can be used to insert text with the pyplot interface, presented along with the corresponding API method and a description: Pyplot function API method Description text() mpl.axes.Axes.text() Adds text at an arbitrary location to the Axes xlabel() mpl.axes.Axes.set_xlabel() Adds an axis label to the X-axis ylabel() mpl.axes.Axes.set_ylabel() Adds an axis label to the Y-axis title() mpl.axes.Axes.set_title() Adds a title to the Axes figtext() mpl.figure.Figure.text() Adds text at an arbitrary location to the Figure suptitle() mpl.figure.Figure.suptitle() Adds a centered title to the Figure annotate() mpl.axes.Axes.annotate() Adds an annotation with an optional arrow to the Axes     All of these commands return a matplotlib.text.Text instance. We can customize the text properties by passing keyword arguments to the functions or by using matplotlib.artist.setp(): t = plt.xlabel('some text', fontsize=16, color='green') We can do it as: t = plt.xlabel('some text')plt.setp(t, fontsize=16, color='green') Handling objects allows for several new possibilities; such as setting the same property to all the objects in a specific group. Matplotlib has several convenience functions to return the objects of a plot. Let's take the example of the tick labels: ax.get_xticklabels() This line of code returns a sequence of object instances (the labels for the X-axis ticks) that we can tune: for t in ax.get_xticklabels(): t.set_fontsize(5.) or else, still using setp(): setp(ax.get_xticklabels(), fontsize=5.) It can take a sequence of objects, and apply the same property to all of them. To recap, all of the properties such as color, fontsize, position, rotation, and so on, can be set either: At function call using keyword arguments Using setp() referencing the Text instance Using the modification function Fonts Where there is text, there are also fonts to draw it. Matplotlib allows for several font customizations. The most complete documentation on this is currently available in the Matplotlib configuration file, /etc/matplotlibrc. We are now reporting that information here. There are six font properties available for modification. Property name Values and description font.family It has five values: serif (example, Times) sans-serif (example, Helvetica) cursive (example, Zapf-Chancery) fantasy (example, Western) monospace (example, Courier) Each of these font families has a default list of font names in decreasing order of priority associated with them (next table). In addition to these generic font names, font.family may also be an explicit name of a font available on the system. font.style Three values: normal (or roman), italic, or oblique. The oblique style will be used for italic, if it is not present. font.variant Two values: normal or small-caps. For TrueType fonts, which are scalable fonts, small-caps is equivalent to using a font size of smaller, or about 83% of the current font size. font.weight Effectively has 13 values-normal, bold, bolder, lighter, 100, 200, 300, ..., 900. normal is the same as 400, and bold is 700. bolder and lighter are relative values with respect to the current weight. font.stretch 11 values-ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, wider, and narrower. This property is not currently implemented. It works if the font supports it, but only few do. font.size The default font size for text, given in points. 12pt is the standard value.

The examples are: Plotting data from a database Plotting data from a web page Plotting the data extracted by parsing an Apache log file Plotting the data read from a comma-separated values (CSV) file Plotting extrapolated data using curve fitting Third-party tools using Matplotlib (NetworkX and mpmath) Let's begin Plotting data from a database Databases often tend to collect much more information than we can simply extract and watch in a tabular format (let's call it the "Excel sheet" report style). Databases not only use efficient techniques to store and retrieve data, but they are also very good at aggregating it. One suggestion we can give is to let the database do the work. For example, if we need to sum up a column, let's make the database sum the data, and not sum it up in the code. In this way, the whole process is much more efficient because: There is a smaller memory footprint for the Python code, since only the aggregate value is returned, not the whole result set to generate it The database has to read all the rows in any case. However, if it's smart enough, then it can sum values up as they are read The database can efficiently perform such an operation on more than one column at a time The data source we're going to query is from an open source project: the Debian distribution. Debian has an interesting project called UDD , Ultimate Debian Database, which is a relational database where a lot of information (either historical or actual) about the distribution is collected and can be analyzed. On the project website http://udd.debian.org/, we can fi nd a full dump of the database (quite big, honestly) that can be downloaded and imported into a local PostgreSQL instance (refer to http://wiki.debian.org/UltimateDebianDatabase/CreateLocalReplica for import instructions Now that we have a local replica of UDD, we can start querying it: # module to access PostgreSQL databasesimport psycopg2# matplotlib pyplot moduleimport matplotlib.pyplot as plt Since UDD is stored in a PostgreSQL database, we need psycopg2 to access it. psycopg2 is a third-party module available at http://initd.org/projects/psycopg # connect to UDD databaseconn = psycopg2.connect(database="udd")# prepare a cursorcur = conn.cursor() We will now connect to the database server to access the udd database instance, and then open a cursor on the connection just created. # this is the query we'll be makingquery = """select to_char(date AT TIME ZONE 'UTC', 'HH24'), count(*) from upload_history where to_char(date, 'YYYY') = '2008' group by 1 order by 1""" We have prepared the select statement to be executed on UDD. What we wish to do here is extract the number of packages uploaded to the Debian archive (per hour) in the whole year of 2008. date AT TIME ZONE 'UTC': As date field is of the type timestamp with time zone, it also contains time zone information, while we want something independent from the local time. This is the way to get a date in UTC time zone. group by 1: This is what we have encouraged earlier, that is, let the database do the work. We let the query return the already aggregated data, instead of coding it into the program. # execute the querycur.execute(query)# retrieve the whole result setdata = cur.fetchall() We execute the query and fetch the whole result set from it. # close cursor and connectioncur.close()conn.close() Remember to always close the resources that we've acquired in order to avoid memory or resource leakage and reduce the load on the server (removing connections that aren't needed anymore). # unpack data in hours (first column) and# uploads (second column)hours, uploads = zip(*data) The query result is a list of tuples, (in this case, hour and number of uploads), but we need two separate lists—one for the hours and another with the corresponding number of uploads. zip() solves this with *data, we unpack the list, returning the sublists as separate arguments to zip(), which in return, aggregates the elements in the same position in the parameters into separated lists. Consider the following example: In [1]: zip(['a1', 'a2'], ['b1', 'b2'])Out[1]: [('a1', 'b1'), ('a2', 'b2')] To complete the code: # graph codeplt.plot(hours, uploads)# the the x limits to the 'hours' limitplt.xlim(0, 23)# set the X ticks every 2 hoursplt.xticks(range(0, 23, 2))# draw a gridplt.grid()# set title, X/Y labelsplt.title("Debian packages uploads per hour in 2008")plt.xlabel("Hour (in UTC)")plt.ylabel("No. of uploads") The previous code snippet is the standard plotting code, which results in the following screenshot: From this graph we can see that in 2008, the main part of Debian packages uploads came from European contributors. In fact, uploads were made mainly in the evening hours (European time), after the working days are over (as we can expect from a voluntary project). Plotting data from the Web Often, the information we need is not distributed in an easy-to-use format such as XML or a database export but for example only on web sites. More and more often we find interesting data on a web page, and in that case we have to parse it to extract that information: this is called web scraping . In this example, we will parse a Wikipedia article to extracts some data to plot. The article is at http://it.wikipedia.org/wiki/Demografia_d'Italia and contains lots of information about Italian demography (it's in Italian because the English version lacks a lot of data); in particular, we are interested in the population evolution over the years. Probably the best known Python module for web scraping is BeautifulSoup ( http://www.crummy.com/software/BeautifulSoup/). It's a really nice library that gets the job done quickly, but there are situations (in particular with JavaScript embedded in the web page, such as for Wikipedia) that prevent it from working. As an alternative, we find lxml quite productive (http://codespeak.net/lxml/). It's a library mainly used to work with XML (as the name suggests), but it can also be used with HTML (given their quite similar structures), and it is powerful and easy–to-use. Let's dig into the code now: # to get the web pagesimport urllib2# lxml submodule for html parsingfrom lxml.html import parse# regular expression moduleimport re# Matplotlib moduleimport matplotlib.pyplot as plt Along with the Matplotlib module, we need the following modules: urllib2: This is the module (from the standard library) that is used to access resources through URL (we will download the webpage with this). lxml: This is the parsing library. re: Regular expressions are needed to parse the returned data to extract the information we need. re is a module from the standard library, so we don't need to install a third-party module to use it. # general urllib2 configuser_agent = 'Mozilla/5.0 (compatible; MSIE 5.5; Windows NT)'headers = { 'User-Agent' : user_agent }url = "http://it.wikipedia.org/wiki/Demografia_d'Italia" Here, we prepare some configuration for urllib2, in particular, the user_agent header is used to access Wikipedia and the URL of the page. # prepare the request and open the urlreq = urllib2.Request(url, headers=headers)response = urllib2.urlopen(req) Then we make a request for the URL and get the HTML back. # we parse the webpage, getroot() return the document rootdoc = parse(response).getroot() We parse the HTML using the parse() function of lxml.html and then we get the root element. XML can be seen as a tree, with a root element (the node at the top of the tree from where every other node descends), and a hierarchical structure of elements. # find the data table, using css elementstable = doc.cssselect('table.wikitable')[0] We leverage the structure of HTML accessing the first element of type table of class wikitable because that's the table we're interested in. # prepare data structures, will contain actual datayears = []people = [] Preparing the lists that will contain the parsed data. # iterate over the rows of the table, except first and last onesfor row in table.cssselect('tr')[1:-1]: We can start parsing the table. Since there is a header and a footer in the table, we skip the first and the last line from the lines (selected by the tr tag) to loop over. # get the row cell (we will use only the first two)data = row.cssselect('td') We get the element with the td tag that stands for table data: those are the cells in an HTML table. # the first cell is the yeartmp_years = data[0].text_content()# cleanup for cases like 'YYYY[N]' (date + footnote link)tmp_years = re.sub('[.]', '', tmp_years) We take the first cell that contains the year, but we need to remove the additional characters (used by Wikipedia to link to footnotes). # the second cell is the population counttmp_people = data[1].text_content()# cleanup from '.', used as separatortmp_people = tmp_people.replace('.', '') We also take the second cell that contains the population for a given year. It's quite common in Italy to separate thousands in number with a '.' character: we have to remove them to have an appropriate value. # append current data to data lists, converting to integersyears.append(int(tmp_years))people.append(int(tmp_people)) We append the parsed values to the data lists, explicitly converting them to integer values. # plot dataplt.plot(years,people)# ticks every 10 yearsplt.xticks(range(min(years), max(years), 10))plt.grid()# add a note for 2001 Censusplt.annotate("2001 Census", xy=(2001, people[years.index(2001)]), xytext=(1986, 54.5*10**6), arrowprops=dict(arrowstyle='fancy')) Running the example results in the following screenshot that clearly shows why the annotation is needed: In 2001, we had a national census in Italy, and that's the reason for the drop in that year: the values released from the National Institute for Statistics (and reported in the Wikipedia article) are just an estimation of the population. However, with a census, we have a precise count of the people living in Italy. Plotting data by parsing an Apache log file Plotting data from a log file can be seen as the art of extracting information from it. Every service has a log format different from the others. There are some exceptions of similar or same format (for example, for services that come from the same development teams) but then they may be customized and we're back at the beginning. The main differences in log files are: Fields orders: Some have time information at the beginning, others in the middle of the line, and so on Fields types: We can find several different data types such as integers, strings, and so on Fields meanings: For example, log levels can have very different meanings From all the data contained in the log file, we need to extract the information we are interested in from the surrounding data that we don't need (and hence we skip). In our example, we're going to analyze the log file of one of the most common services: Apache. In particular, we will parse the access.log file to extract the total number of hits and amount of data transferred per day. Apache is highly configurable, and so is the log format. Our Apache configuration, contained in the httpd.conf file, has this log format: "%h %l %u %t "%r" %>s %b "%{Referer}i" "%{User-Agent}i"" This is in LogFormat specification where Log directive Description %h The host making the request %l Identity of the client (which is usually not available) %u User making the request (usually not available) %t The time the request was received %r The request %>s The status code %b The size (in bytes) of the response sent to the client (excluding the headers) %{Referer}i The page from where the requests originated (for example, the HTML page where a PNG image is requested) %{User-Agent}i The user agent used to make the request

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

The big picture: Who are users? Users are people who have registered their details with you and are allocated access to certain resources and information, depending on their role within the scope of your website. They can be administrators and content editors/contributors or customers who purchase goods and services from you. This is different to a casual visitor who lands up at the frontend of your site because he/she has your website address or hopefully has found you through a search engine. You may be able to turn these casual visitors into registered users if you have something to offer them. Say you want to provide special content to only those who are genuinely interested in your services or products. Encouraging them to register allows you to collect contact information (it's best to ask only for the most relevant details, as people generally don't want to give out more than they need to) and keep in touch. Hopefully, you can convert it into an ongoing relationship with sales and benefits for your business. Generating interest in your products and services is important here and suggesting some level of exclusivity can make your customers feel privileged in terms of being privy to information not readily available to just anyone. Put simply though, users are your website visitors, content contributors, and administrators. Depending on their role, they are essentially divided into two broad groups with smaller sub-categories within them. Frontend users Frontend users do not have access to the administration interface and can only access material and information through the frontend. They can be: Registered users, authors, editors, and publishers who have privileges to edit and update information. Guests or casual visitors to your site. These visitors come to your site anonymously and unregistered. People who register their details in order to transact with you. Frontend user definitions When a user is registered with you, they are allocated to a group, as per the settings applied within the Global Configuration. They can be any one of the following: Registered Users are visitors to your site who have registered themselves in order to view certain content or transact with you. Authors can submit new content articles to the site with approval, but can't edit existing articles. A publisher or someone higher must approve these submissions. Editors can submit and edit new content articles. A publisher or someone higher must also approve these entries. Publishers  can submit new content articles, edit existing articles, and publish the articles. None of these user groups have access to the administration interface, and can only edit or add material from the frontend. Administration users Administration users can edit and update the content of your site by logging into the administration control panel and are those who: Have Administrator Manager or Super Administrator access. Each of these roles has specific access. For example, the Manager profile does not have access to the User Manager section. Have various levels of access within the administration control panel, the highest level being Super Administrator. Editing the frontend Login Form From the frontend of your website, the Login Form allows users to access content that is potentially specialized and only visible to them, or to transact with you if you're running an e-commerce site. You can also customize your Login Form by adding text and a link to create new accounts. Lost usernames and passwords The Forgot your password and Forgot your username links are important not only for users to fi nd their password or username again, but also to help you to manage users. Rather than unnecessarily creating a new account if they have lost their login details, having an e-mail prompt sent to reset their details is a more efficient approach. Clicking the link for either will generate a request to enter an e-mail address. A confi rmation e-mail will be sent with a verification token or string of characters which allows the user to enter and reset their password. Alternatively, their username will be emailed to them.      

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

What do people mean by "sticky"? If you have ever ran a blog or web site before, you may have noticed that it's fairly easy to get a spike in traffic by submitting a good story to a few social bookmarking sites or by being lucky enough to get a link to one of your posts from a much larger site. The problem is that after a day or so, when the submissions fall off the front page, it's likely your traffic will die down to its usual levels again. Some site owners fall into the trap of chasing after the next traffic spike, using "linkbait" articles with intentionally controversial titles and content, when they should really be focusing on quality content, improving the site, and working towards sustained growth. Many bloggers submit their site to StumbleUpon.com. StumbleUpon is a web service where users can enter their interests, and be sent to a random site that will match those interests. Those users can then either give a "thumbs up" to the site they are sent to indicating that they like the site or a "thumbs down" if they don't like it. Those votes are used to improve future suggestions and increase the chances of the next site that they "Stumble Upon" being one that they are interested in. Other popular sites for increasing traffic include Technorati (a site that measures the "authority" of a blog based on how many other bloggers are linking to it), and the news/story-related sites Reddit (a general interest site with everything from politics to gadgets-related news), and Digg (a site with a focus on tech and gaming news). A sticky blog is one that doesn't just attract new visitors, it keeps them. Instead of having a visitor click through from a link on Technorati or visit by using the Stumble! feature of StumbleUpon, skim the page they land on and then leave, a sticky blog would make that visitor stay around a little longer. Ideally, visitors would read the article they were interested in and then find themselves intrigued enough to read more articles. They may comment on some articles and then keep returning to read answers to their comments. Or, they may decide to subscribe to the blog so that they can read future posts. A sticky site encourages readers to become engaged with the community, resulting in long-term increases in traffic. When new readers arrive at the site for the first time, they get involved themselves and keep coming back. They may also tell their friends or link to the site from their own sites, giving you free promotion. Letting readers and authors communicate Interesting content is vital, but one of the best ways to get people coming back to your blog network is to give them a chance to interact with the site's authors and with each other. This not only makes the readers feel valued, it also opens up a dialogue that encourages repeat visitors. Contact forms Providing visitors with a way to contact you privately is useful for several reasons. The visitor may want to discuss advertising opportunities, submit some news you may be interested in, or ask for help with a problem they have accessing part of the site. You could post your email address on the site, but this makes you vulnerable to spam attacks. A contact form is a safer way to allow your visitors to contact you. Time for action – setting up contact forms Let's set up a contact form: Download Contact Form 7 from http://wordpress.org/extend/plugins/contact-form-7/. To install, upload the contents of the archive file to /wp-content/plugins. Activate the plugin and go to the settings page (Tools | Contact Form 7). You can also access the page by clicking Settings under the plugin name, which appears on the Manage Plugins page. You can add new fields using the Generate Tag drop-down menu. Further down the admin page you will see options to set error messages (such as the message users will see if they miss out a required field, or if they try to upload a file that is too big). Once you have created the form, make a note of the tag at the top of the screen (in our case this was [contact-form 1 "Contact form 1"] ). Create a new page (Pages | Add New) called Contact Us, add a short message to the page, and then paste the contact form tag into the page. Depending on the theme you are using, you may need to add the Pages widget to your sidebar so that visitors can find the new page. Your page should look something like this: What just happened? Contact Form 7 is a powerful contact form tool that supports CAPTCHAs (via the Really Simple CAPTCHA  plugin), file uploads, drop-down menus, and more. You can define multiple contact forms and have each one submit to a different email address. This could be useful if you wish to have different people contacted for, say, advertising queries, news submissions, and tech support. You can also have a contact form submit to multiple email addresses. So, as well as having the relevant person receive a copy of each message, the site administrator could ensure they receive a copy of all messages too. You can set a prefix for each message, in addition to the subject line the visitor sets. For example, if you set the prefix to [Slayer-Form1], all emails from that contact form will have a subject line that begins with that text. You can use this to set up filters in your email application, making it easy to prioritize emails from different contact forms. Improved comments The basic WordPress MU comment feature allows readers to post their thoughts about a blog post, but it is not very good for encouraging discussion. One useful service for bloggers is IntenseDebate. This service allows for threaded discussion in comments, subscription to comments by RSS and email, and the ability to tie blog commenting in with other social networking sites and follow comments made by other blog readers. Time for action – IntenseDebate Comments Download the IntenseDebate Comments plugin from http://wordpress.org/extend/plugins/intensedebate/. You will need to sign up for an account at http://intensedebate.com/. Activate the plugin. Go to Settings | IntenseDebate. You will be presented with a login screen. Enter the account details for the account you created in step 2. Once you have logged in, click Start Importing Comments. The import process can take a very long time, even if you don't have many comments to import. Once the import process is complete, you can tweak the settings to suit your blog—although I found the default ones were a good starting point. The IntenseDebate Comments plugin has its own Comments caption, so you may want to remove the Comments header from the index.php file in your theme folder. The new comment box should look something like this: You can moderate comments using the already familiar WordPress MU interface or the dashboard on the IntenseDebate site. What just happened? IntenseDebate is a commenting system that sits on top of WordPress and WordPress MU. It is ideal for all blogs, whether they are part of a blog network, or a standalone blog. It does not replace the existing WordPress comment system; it only complements it. This means you can use IntenseDebate in conjunction with other plugins that rely on the WordPress MU comment system. Readers can comment on your blog using the IntenseDebate comment system. If they have JavaScript turned off, they will be presented with the normal WordPress comment system instead. IntenseDebate has lots of useful features that will make your users feel a greater sense of engagement with your site's authors. Those features are described below: Threaded discussions: IntenseDebate supports threaded comments. This makes it easy for readers to follow the discussions going on in the comments section. Readers can reply to the blog post itself, or reply to a specific comment, and IntenseDebate will break related comments into threads so that the discussion is easy to keep track of. Track comments or comment anonymously: Readers can comment anonymously, or, if they have an IntenseDebate profile they can log in to it and comment using it. Any comments made will be stored in the WordPress comments database and also be sent to IntenseDebate. Subscribe to comments: Readers can subscribe to comments on a particular post by email or through their favorite RSS reader. If they have an IntenseDebate account, they also have the option to send a Twitter message or "Tweet" to alert their friends that they have commented on a particular post. Reputation and voting: Another useful feature is the reputation system. Visitors can vote on comments, and comments that get a lot of negative votes will be hidden from view unless a user requests to see them. This is a handy form of "self moderation" for the community. The reputation system applies to only logged in users and gives each user an overall rating based on the quality of their comments on sites all over the Internet. Activating IntenseDebate on your users' blogs One important thing to remember is that even if you set IntenseDebate to automatically activate for your users, it won't do anything unless they set it up. Your users will still have the original WordPress MU comment system. They will be alerted to the fact that the plugin is not working for them by a message that will appear at the top of every page in their admin panel. Have a go hero – tweaking IntenseDebate IntenseDebate has so many features that there is not enough room to cover them all here. Take a look at the Extras (http://intensedebate.com/extras) page for some widgets that you may want to add to your blog. Also, check the Settings page for your blog in IntenseDebate. You can edit the moderation settings on that page. The default settings include a list of spam words that will cause comments to be flagged for moderation. Comments will also be flagged for moderation if they contain more than two URLs. You can tweak the commenting system's settings to filter by IP address, email address, key words, and profanity. You can also alter how the comments are displayed, the text displayed when people report comments, the layout, and the location of the blog's RSS feed. You may want to change that to use the FeedBurner version of the RSS feed. >> continue Reading: Sticky Features for your Blog Network with WordPress MU 2.8: Part 2

Community features—gravatars Gravatars are Globally Recognized Avatars. They allow people to carry the same avatar from site to site without having to register at each site and take the time to upload an image. Gravatars are supported by IntenseDebate by default. If a user has a gravatar and gives the email address that the gravatar is tied to when they make a comments, then the gravatar will be displayed beside that comment. Since version 2.5, WordPress MU has had gravatar support built in. Let's add gravatars to our post pages. Time for action – gravatars in WordPress MU Open your theme's index.php file. In our case we are editng the Blue Zinfandel theme. Find the secton that begins with < div class="contentdate" > . Remove all markup up to the closing tag and insert the following code: <?php $email = $authordata->user_email; $hash = md5($email); $uri = 'http://www.gravatar.com/avatar/' . $hash . '?d=identicon&r =any&size=80'; $headers = wp_get_http_headers($uri); if (!is_array($headers)) : echo "<h3>"; echo the_time('M'); echo "</h3><h4>"; echo the_time('j'); echo "</h4>";Stcky Features for your Blog Network[ 142 ] elseif (isset($headers["content-disposition"]) ) : echo get_avatar( $authordata->user_email, $size = '50') ; else : echo "<h3>"; echo the_time('M'); echo "</h3><h4>"; echo the_time('j'); echo "</h4>"; endif; ?> Save and upload the file. If you wish to use gravatars on user blogs, you will also need to edit the user's version of the theme file. Now, if a post author has a gravatar, it will be displayed in the title secton of their posts. If not, the default Date of Post box will appear instead. What just happened? We have used the built-in WordPress MU gravatars function to display a member's gravatar in the title section of any posts they make. As the default No Gravatar Set image is rather boring, our code checks to see if the author in question has a gravatar. If the author does not, or if the Gravatars web site is not accessible for any reason, then we display the normal post date icon instead. Gravatars provide a way for people to carry their identity from site to site. Showing a recognizable face for your site's authors builds recognition among readers and helps readers and blog authors to build a relationship with each other. You might be wondering why the output in the previous code is broken into several echo statements. I have chosen that method purely because I find it more readable. You could save yourself some typing if you built an echo statement similar to this one: echo "<h3>". the_time('M')."</h3>" Have a go hero – gravatars and themes The code used to edit the SlayerCafe blog theme was very simplistic. The theme you are using for your site may be structured differently. In the theme for the SlayerCafe, the calendar icon that shows the date of the latest post is coded into the CSS file. The change I have made to the index.php file does not prevent the calendar icon from being loaded. The gravatar image simply loads over the top of it. Try reworking the theme file to correct this. One way to do so would be to create a copy of the contentdate class in the styles.css file, which does not load the calendar image. Call the new class contentgravatar and then create different < div > tags to be displayed depending on whether you wish to show the calendar or the gravatar. Encouraging sign-ups with downloads for members only If you offer file downloads, restricting some of them to only members is a good way to encourage people to sign up. It is a good idea to offer some file downloads to visitors who are just passing through so that you can build up their trust, as some people are uncomfortable giving out their email address to an unknown web site. Also, some people do not want to take the time to register to download a file, especially if they don't know if it is going to be a worthwhile download. A good compromise is to offer some files to everyone and other files for members only, or to offer some content on your blog and then a download in a more convenient form. As an example, some of the Watchers on SlayerCafe could run tutorials about demon identification and slaying techniques. They may offer text and image versions as blog posts, with an MP3 version of the lesson that registered Slayers could download to listen to while they are on patrol. This is likely to have a high conversion rate in terms of registrations; the visiting Slayers will hopefully be impressed by the quality of the information in the tutorials and want to download the audio version. One useful plugin that restricts downloads to registered users only is the User Only Downloads plugin available at http://wpmudev.org/project/user-only-downloads. This plugin is very easy to use. For some reason the author uploaded the plugin to WPMU Dev as a text file, so you will need to rename it to a .php file before you can use it. Just upload the renamed file to your mu-plugins folder and tell your users that they can restrict file downloads to members only by using the following tag in their posts: [user_download URL] Logged in users will see a download link, while everyone else will see a bold message telling them that they need to be logged in to download files.  

Using video files Video files are generally large due to the amount of content they contain and their length. It's beyond the scope of our article to describe them in detail, but in basic terms, they are a linear sequence of still images placed together to create a sequence of movement, usually accompanied by an audio track. Original video files are compressed using a codec to produce a compressed video file. The various codecs produce different results for file size, quality, and export. Video files play in the browser by downloading the data through the Internet, progressively streaming it so the movie begins to play before the whole file has downloaded. Audio files work in a similar way, but are often not as large. The final quality of a video also depends on the method used to capture it and how it's stored. The better the quality of the camera, the better the result. If you want to learn more about video, Wikipedia has a page at http://en.wikipedia.org/wiki/Video_formats. Just like anything else, there are pros and cons of adding videos to your website. YouTube alone has proven there is a strong market for a more visual medium. However, there are still many people who prefer text-based content as well. Consider whether adding a video to your site will enhance your user's experience. Is the material promotional or instructional? Is the content better demonstrated than explained? Video material can broaden your target audience. Many people prefer watching a video online to reading lengthy bodies of text. Videos aren't that great for search engine optimization. Consider adding a transcript to the page as well, in order to increase the ability to search. Choosing the best video file format Video played through the Internet requires a media player, which acts as an interface between the video file and the browser. These days most Internet users have one embedded within their browser. Popular versions include: QuickTime, a player created by Apple Windows Media Player WINAMP Real Player, developed by Real Networks Adobe Flash Player The following are some of the video file types that can be played through your website using third-party media players: .wmv files are a popular format developed by Microsoft and which come bundled within the Internet Explorer software package and are, therefore, preinstalled on Windows PCs. This is a format good for movies with movement within them. This format works with Windows Media Player, RealPlayer, and another called VLC Player. This format isn't very compatible with Mac or Linux computer users. .mov files are a QuickTime video platform extension that also plays back on the Windows operating system. The Apple QuickTime movie player software can be easily downloaded from Apple at http://www.apple.com/quicktime/download/. While not many browsers have the QuickTime media player installed, this format does provide very high quality video. You can always provide a link to the URL to download the software in order to play the video. .avi files are often the format of videos with smaller dimensions, played back through a website. They are a container for audio and video files (hence the name!). They can sometimes be quite large in file size, depending on the codec used to compress the video footage. They are a mainstream format. .swf and .flv videos are excellent for web video streaming and can also include interactive features. Most Mac and PCs have the Flash Shockwave Player installed; however, it can be downloaded from http://get.adobe.com/flashplayer/. Take note of the requirements for your individual operating system and browser preferences. Keep the following in mind when considering a video for your website: Ensure the video is succinct and the file size as small as possible. Even with a high speed download, time is still required to fully download the complete file. Keeping the video between one to three minutes long and the file size under five megabytes The more the movement in a video, the larger the file size. Consider whether the video really enhances the message. Viewers are only interested in material that is useful to them and will resent consuming their download resources on a video that holds no value for them. The larger the file size, the longer it takes to upload. Consider your audience's data rate. Do they have high speed downloads or are there some with dial-up connections? Video files are generally large due to the amount of content they contain. They stream (streaming is the way the Internet transfers multimedia information) through the data so the video will begin playing before it has fully downloaded itself into the browser, allowing it to be played back as quickly as possible. Audio files work in a similar way, but are not usually big files. There are various video file formats available and most website users have a player to see them already contained within the browser. Many users have QuickTime, a player created by Apple (that also runs on PCs) and Real Player, developed by Real Networks. Videos require a special plugin to play them through an article on your site, once you have uploaded it. Alternatively, you can embed a link from the popular YouTube site (http://www.youtube.com/). We'll look at how to do both in relation to the Party People website. Uploading a video We'll upload a new video, much the same way we would upload an image, to a new subfolder called videos within the Party People website. The steps are as follows: Navigate to the Media Manager. Select the stories folder and type videos into the Files input box. Click Create Folder. Select the new videos folder icon; then click the Browse button to choose the video from our desktop computer. Click Start Upload. Now we have a video file ready to be inserted into an article. The Party People website has the popular AllVideos plugin installed to do this. Updating videos—AllVideos plugin This is another neat plugin that works in much the same way as the Simple Image Gallery, a stablemate from this team of developers. If you don't have it installed and you would like to present videos on your site, ask your developer to install it for you or refer to the developers website http://www.joomlaworks.gr/content/view/35/41/ for instructions. Our Party People website has a .mov video on the Products and Services page, which we will update. To update the video display: Navigate to the Article Manager through the top menu and open theOur Services Include... article. Change the name of the video file between the { } and {/} tags within the text editor to the new filename. Depending on the format of the video being presented, the code should look like this: {mov}promoVideo{/mov} This code displays a QuickTime movie within the article. Save the changes. The following screenshot shows us how the video will look in context. Note that you do not need to include the format extension at the end of the filename, as the tag surrounding the name addresses this. Changing to a different video file and format The AllVideos plugin supports a number of video file formats and the developer's website lists them all at http://www.joomlaworks.gr/content/view/35/41/. We'll change the video we just linked to a different one which is in the .wmv format. The steps are as follows: Navigate to the Article containing the video presentation. Change the tag between the { } braces to reflect the new file type, taking care not to delete any of the symbols. For example: {wmv}updatedServicesVideo{/wmv} Save the changes to your article. You should take care to avoid rearranging any of the formatting within the code, as this will prevent the movie from playing. That is, don't add any extra spaces, colons, commas, and so on.