I’m going to be blogging once a week about an Extension that is available for MindTouch Deki. The extension I’m highlighting this week is the FlowPlayer Extension.

FlowPlayer enables a user to embed FLV media into a Deki page. This will help liven up your MindTouch Deki site while allowing you to keep media relevant to your organization on your Deki site as opposed to hosting it on a third party video site.

To use the extension you would activate it first by following the install instructions. Once installed, attach an FLV file to a Deki page, copy the url for the FLV file, and then put the url in the box provided by the Extension dialog(which can be found by clicking on the Cog icon in the editor and then selecting FlowPlayer).

After installing, use the following script to see an example flv(note there is no sound with the example):

 {{ flowplayer{source: "http://wiki.developer.mindtouch.com/@api/deki/files/2989/=test.flv"} }} 

More information about FlowPlayer.
Main FlowPlayer Extension Page

If you have any questions about it please feel free to contact us.

Until now the only portion of a page that has been editable by the user is the content inside the editor. Logically this makes sense, however, there are times when a user or administrator may want to add additional content to the skinning template*. For instance a user may want to add advertisements, navigations, widgets or some custom html. Such functionality has been available since November, 2007 but was fairly basic. Users could add site-wide content into numerous different custom HTML areas and were limited to HTML and client side scripting languages.

With our latest improvement (8.05.1) users can now designate custom skin content by assigning a page template** to specific skinning regions. This process offers two noticeable benefits. First, custom content can now be injected on a per-page basis. Second, and most importantly, custom content can now utilize DekiScript which means that both server-side and client-side functionality is acceptable. Another extremely useful benefit of using DekiScript for custom skin content is the ability to script per-user functionality.

In order to support skinning template targeting you need to make some minor modifications to your Deki. First you need to define which portions of your Skinning Template can have Deki content injected into them (for security reasons). To do this you need to crack open LocalSettings.php and add the following line:

By adding the $wgTargetSkinVars to LocalSettings.php your simply granting permission for the listed Skinning Variables to be overwritten with injected Deki content. In the above example you can see that I opened up all the custom areas in a skinning template. If you’re using Fiesta these custom areas are the same as the custom HTML areas that are found in Control Panel > Visual Appearance > Custom Site HTML.

Now that you’ve updated LocalSettings.php you can go to your Deki and start injecting content. To start lets first create the content that is going to get injected. Navigate to Tools > Templates and create a new template called ‘PageTemplateName’. Add some generic text such as “MindTouch Deki is awesome”, save and then navigate to your Deki homepage. Now click edit on your Deki homepage and add the following DekiScript:

Using the DekiScript above you’ve injected your Page Template into customarea1. Now you can take this example a little further by adding some DekiScript into your Page Template. Navigate back to Tools > Templates > PageTemplateName and click edit. Add some of the following examples:

I’ve been experimenting with this new approach a lot recently. In fact I have created two custom templates that take full advantage our new skinning capability. In both cases I was able to easily add powerful functionality to the templates with very little code. As I continue to experiment with new approaches to skinning I’ll be sure to keep everyone up to date.

Thanks

Damien
DamienH[at]mindtouch.com

Yesterday, Google announced the general availability of Google App Engine, another option for deploying Cloud Software.

Google App Engine is a great place to create and share extensions for MindTouch Deki. By design, Deki is a distributed application platform that can be extended in any programming language, including C#, PHP, Java, Python, and the built-in DekiScript runtime. Sharing these extensions can be difficult though since you need to find a place to host them. This is were Google App Engine comes in.

Getting started is incredibly simple:

1. Download the App Engine SDK.
2. Create a new application.
3. Add the DekiExt.py file to it.

After that, creating your own extension only takes a few lines of code:

class MyExtension(DekiExt):

# title for the extension
def title(self): return "My Extension"

# a function is exported in the XML manifest
@function("str", "return user greeting")
@param("str", "name of user")
def hello(self, name):
return "Hi " + name

Now upload your extension to your Google App Engine account and voilà, anybody can now benefit from it!

To invoke from MindTouch Deki, just register your extension in the control panel. Now your users can access it by simply typing:

{{ hello("Bob") }}

To learn more how to write your own extensions using Google App Engine, check out the tutorial. Then drop by the developer forums to share your work, ask questions, and provide suggestions. Enjoy!

We are seeking a self-motivated, enthusiastic Community Manager with a strong technical background to support our rapidly growing user community and external networks. As the Community Manager, you will be the catalyst for external communication, networking and events across our users, partners and other interested technology parties. As the product and user advocate across a broad and growing base, a thorough understanding of the processes and technologies used for web infrastructure, as well as superior communication and organizational skills are critical. As the primary interface to all users and prospective customers, the Community Manager will demonstrate the ability to exceed expectations in a fast paced, startup environment where he/she will be a valuable contributor to the company’s overall growth and success.

Responsibilities

• Maintain active community communication through newsletters, webinars, blogs, social media and forum posts
• Coordinate all efforts regarding the wiki, forums, blogs and similar community tools
• Provide strategy and thought leadership in external networks by actively listening and responding quickly to key partner, technology and user postings as well as developing deep networking relationships
• Drive the strategy and execution for expanding community activity and product adoption
• Organize and execute all community events including online events, community meetups and conferences
• Advocate community issues and product requests internally. Advise internal stakeholders of important trends and events in the community, using key data and statistics gathered from the community

Qualifications

• Experience with online communities and/or technical support for consumer web applications
• Technological knowledge and experience with web 2.0 applications including both consumer and enterprise technologies.
• Expertise using social media and consumer-driven content such as wikis, web feeds, blogs, forums, and podcasts
• Overall development experience using xml, php and C#.
• Strong organizational skills and attention to detail
• This role requires strong collaboration with marketing, engineering and support, so exceptional and demonstrated cross-group collaboration skills are required
• Other important strong skills include a passion for customers, strategic thinking and driving for results
• Ability to travel up to 10-15% for conferences
• Bachelors degree

Damien Howley
DamienH[at]mindtouch.com

About a week ago I read an article written by Marshal Kirkpatrick called How to build an RSS and Blog News Site for your project. In short, Marshall basically outlined how he had built an RSS-based microsite for the JavaOne conference. The article was great, and although I believed I knew almost everything about refining RSS feeds, I actually learned a thing or two.

Towards the end of the article, Marshall started to dive into the presentation process but confessed that he was not very involved in that portion of the project. At this point, I started thinking about MindTouch Deki Wiki, and how to integrate the filtered and refined RSS feeds using the wiki’s application platform. Deki Wiki is a powerhouse when it comes to aggregating and mashing up content, so it was a fairly reasonable thought. To that end, I figured I would put a couple of demos together to show you how to use Deki Wiki to easily build a similar app. I’ll also demo some of the more advanced stuff like using Dapper to scrape and mashup web apps.

RSS presentation

It’s pretty straight forward. By using the Deki Wiki Extension Dialog () , you can quickly and easily display your RSS feeds as lists, tables, or tabs. Also, since the interface is a wiki, users can easily manipulate the manner in which they want their RSS feeds to display. Create a table, drop your RSS feed in there, maybe add some CSS in the markup view and off you go.

In the screen shot below, you can see that I quickly added two RSS lists into a table and clicked save. Taking Marshall’s advice, I used Google Blogsearch to find and filter my blogsearch. Unfortunately, I didn’t take the time to weed out the duplicates or format the HTML as suggested, but I know that I could have if I had the time. At Google Blogsearch I used the following two search queries:

• (MindTouch and Mozilla) - “Re:”
• (MindTouch or Deki Wiki)

Using Deki Script the RSS feeds look like this, respectively. Keep in mind you don’t have to write Deki Script unless you really want to. You can use the extensions manager to insert and manage all Deki Script.

• {{ feed.list{feed: “http://blogsearch.google.com/blogsearch_feeds?hl=en&q=(MindTouch+and+Mozilla)+-+%22Re:%22&ie=utf-8&num=10&output=rss”, max: “30″} }}
• {{ feed.list{feed: “http://blogsearch.google.com/blogsearch_feeds?hl=en&q=(Deki+Wiki)+-+%22Re:%22&ie=utf-8&num=10&output=rss”, max: “30″} }}

Using Dapper to Make a Mashup in Deki Wiki

Let’s take this a step further and integrate some other cool applications. I’ll also add some Deki Script to make it as interactive as possible. Let’s start off with two of our most beloved services, Dapper and Yelp. First, using Yelp, I decided to search around for something that interests me. I quickly found the San Diego Nightlife page. I then went to Dapper.net and pieced together my Dapp; I created the values TopTitle, TopDescription, and VenuList. It only took two minutes to create my Dapp, and then I was back over to Deki Wiki. In Deki Wiki, I clicked Edit on my page and using the using the Extension Manager I inserted my Dapp. If you look above the Extension Manger you’ll be able to see a glimpse of the Deki Script that is being created for you.

Again, here is the Deki Script that was entered to retrieve both the TopTitle and TopDescription respectively:

• {{ dapp.html{name: “YelpSanDiegoNightclub”} }}
• {{ dapp.value{name: “YelpSanDiegoNightclub”, xpath: “Top/TopDescription”} }}

Easy, huh? Let’s move along. Next, let’s take the value from our first Dapp (TopTitle) and use it in some other extensions. I’m going to use the TopTile value in a Flickr Slideshow, a Google blog search RSS Feed, and a Google Video search, and then show the list of other ’second rank’ venues. Here is the mashed up Deki Script in the same order:

• {{ flickr.slideshow{tags: dapp.value{name:”YelpSanDiegoNightclub” }, width: “250″, height: “250″} }}
• {{ google.SearchBlogs{search: dapp.value{name:”YelpSanDiegoNightclub” } } }}
• {{ google.searchvideos{search: dapp.value{name:”YelpSanDiegoNightclub” } } }}
• {{ dapp.list{name: “YelpSanDiegoNightclub”, xpath: “VenueList”} }}

As you will see below, I’ve arranged the extensions throughout the page to my liking. I floated the flickr slideshow to the right and then then listed the rest of the extensions throughout the page.

And here’s the final result! The awesome part about this example is that whenever the Yelp community decides another venue is more popular, your entire mashup is updated with the new venue’s info.

The next (more advanced) topic I’ll jump into is parameterized templates, but I’ll save that post for another day. Stay tuned!

Damien Howley
DamienH[at]mindtouch.com
@DamienH

Wikis are one of the most searched web mediums of today which is an expected occurrence because of the breadth of rich contextual information. Although the leading search engines emphasize actual context over meta data there are many search engines that still rely on meta data to classify and rank pages. For this reason we have created a set of new SEO functions that enable users to add per page meta data to each wiki page. Not only does this assist with search engine optimization but it also allows for a more granular identity of the content presented on each page. Additionally, it’s just considered good practice.

The functions allow you to identify the following meta data:

• Author
• Copyright
• Custom
• Description
• GoogleBot
• Keywords
• Rating
• Robots

You can access each function by navigating to the “Insert Extension Dialog” on your edit page toolbar (under Built In functions) or by inserting the appropriate Deki Script directly into you wiki page. Here is an example of how to use Deki Script to change the meta data.

• {{ meta.author{content: “Damien Howley”} }}
• {{ meta.description{content: “This is my unique wiki page about SEO”} }}
• {{ meta.keywords{content: “SEO,MindTouch,Deki Wiki,Wiki,Awesome”} }}

Thanks, and happy SEO

Damien Howley
DamienH[at]mindtouch.com

In Deki Wiki 1.8.3, we’ve added the capability to write extensions in XML using the DekiScript service. This makes it a lot easier to write extensions for embedding widgets or using JavaScript APIs.

The idea is quite simple and intuitive.  An extension file contains functions.  Each function returns a HTML document that contains a <head>, <body>, and <tail> element.  For example, output of a function might look like this:

<html>

<head><script src="http://server/instant.js" type="text/javascript" /></head>

<body><img src="http://server/picture.png" class="instant ishadow33 icolorF0F4FF" /></body>

<tail></tail>

</html>

This output describes how to load the “instant.js” JavaScript file and then apply a polaroid effect to “picture.png”.  The <tail> element is empty for this example.  Its use is similar to <head> for loading/embedding JavaScript.  The difference is that code in the <tail> element is only run after the page has fully loaded.  When Deki Wiki receives this output, it merges the <head> and <tail> elements from each function invocation.  It also replaces the function call with the contents of the <body> element.  Once all functions have been invoked, the page is sent to the browser.  Simple and elegant!

Let’s create an XML file that describes the extension and its functions.  The following example describes an extension with one function called “instant”.  The function takes no parameters and simply returns the above document as a result.

<extension>

<title>Sample DekiScript Extension</title>

<description>This extension contains functions for adding picture effects.</description>

<uri.help>http://wiki.opengarden.org/Deki_Wiki/Extensions/Polaroid</uri.help>

<namespace>sample</namespace>

<function>

<name>instant</name>

<description>Add an instant picture effect (polaroid) with tilt to images.</description>

<return>

<html>

<head><script src="http://server/instant.js" type="text/javascript" /></head>

<body><img src="http://server/picture.png" class="instant ishadow33 icolorF0F4FF" />
</body>

<tail></tail>

</html>

</return>

</function>

</extension>

So far, our output is constant, which isn’t really interesting.  This is where DekiScript comes into play.  Instead, of returning a static document, we can use the same mechanism used by Deki Wiki to generate pages dynamically.  To make this work seamlessly, we take advantage of XML namespaces to mark parts of the document we wish to evaluate.

First, we need to declare the DekiScript namespace by adding xmlns:eval="http://mindtouch.com/2007/dekiscript" to the <html> element.  Next, we need to declare that our function takes four parameters: the image URI, shadow opacity, frame color, and tilt direction.  Finally, we need to replace the hard-coded values with DekiScript expressions.  To access the function arguments, we prefix their names with args.

Here is the final version of our sample extension:

<extension>

<title>Sample DekiScript Extension</title>

<namespace>sample</namespace>

<function>

<name>instant</name>

<description>Add an instant picture effect (polaroid) with tilt to images.</description>

<param name="image" type="uri">image uri</param>

<param name="shadowopacity" type="int" optional="true">shadow opacity in percent
(from 0 to 100; default: 33)</param>

<param name="framecolor" type="str" optional="true">frame color in hex
(from "000000" to "FFFFFF"; default: "F0F4FF")</param>

<param name="tilt" type="str" optional="true">tilt direction
(either "left", "none", or "right"; default: nil)</param>

<return>

<html xmlns:eval="http://mindtouch.com/2007/dekiscript">

<head><script src="http://server/instant.js" type="text/javascript" /></head>

<body>

<img

eval:src="args.image"

eval:class="'instant ishadow' .. (args.shadowopacity ?? 33) .. ' icolor' ..
(args.framecolor ?? 'F0F4FF') .. (args.tilt ? ' itilt' .. args.tilt : '')"

/>

</body>

<tail></tail>

</html>

</return>

</function>

</extension>

DekiScript allows you to evaluate attributes and elements.  When an attribute is evaluated, the attribute prefix is automatically stripped, and the attribute value becomes the result of the DekiScript expression.  For elements, it’s a little more varied.  There are three kinds of elements that can be evaluated: <eval:expr>, <eval:js>, and <eval:if>.  The first two are identical in execution, but the result is embedded in a different way.  The first uses the usual DekiScript embedding rules (just like for attributes), while the second converts the result to JavaScript notation (JSON), wich makes it really easy to embed DekiScript values such as lists or maps.  The third kind is a conditional element that prevents its inner elements from being embedded and evaluated unless the test condition succeeds.  All three forms replace the element with the outcome of the operation.  Let’s make this more concrete by looking at a couple of simple examples:

<eval:expr>"Hello"</eval:expr>

Hello

<eval:js>"Hello"</eval:js>

"Hello"

<eval:if test="true">Hello</eval:if><eval:if test="false">Bye</eval:if>

Hello

Last, but not least, we need to add our extension to Deki Wiki.  This is done in the usual manner.

1. Go into the Control Panel
2. Click on Service Management
3. Click on “Local”
4. Select “Extension”
5. Enter a description for your service (like sample)
6. Enter the DekiScript SID: http://services.mindtouch.com/deki/draft/2007/12/dekiscript
7. Add the config the key manifest
8. Set the value for the config key to the location of the XML extension file. The location can either be a disk path or a URI. (e.g. /root/sample.xml or c:\files\sample.xml or http://server/sample.xml)

That’s it!  You’re now ready to use the XML extension.

I’ve uploaded a couple of extensions already (AccuWeather and Scratch) to wet your appetite, but you can expect a lot more in the comming months.  The DekiScript service is included in Deki Wiki 1.8.3 RC2, which should go out tomorrow. Share your thoughts, suggestions, and questions on the forums.

I am going to start posting tutorials and tips on our blog for your benefit of upcoming features for Deki Wiki 1.8.3.

The tutorial today is about the Google Charts and Graphs Deki Wiki extension.

Google Charts and graphs allow you to take comma separated values and display them in a variety of different ways.

Line Chart

The Line Chart script allows you to insert values into the following script to have a line chart display on your page:
{{ google.linechart( … ) }}

The line chart has the following values that can be changed:

1. Width and height ex: 400, 200
2. Chart values - This is the dataset that you want to plot on the chart ex: [[10,20,30,50,40],[40,50,30,20,10]]
3. Legends (optional) - This is what you can name the data sets ex: ['fake','real']
4. Colors (optional) - These are the colors of the lines ex: [ 'ff0000', '0000ff' ]

Here are the above example values inserted into the script.

{{ google.linechart(400, 200, [ [ 10, 20, 30, 50, 40 ], [ 40, 50, 30, 20, 10 ] ], [ 'fake', 'real' ], [ 'ff0000', '0000ff' ]) }}

This is what it looks like:

Bar Charts

If you want your data to be displayed as a bar chart then we will swap out the linechart in the beginning of the script with barchart

Also you can toggle with the horizonal/vertical aspect of the chart along with if the bars are next to each other or stacked using true and false values.

true,true = Vertical and stacked
true,false = Vertical and next to each other
false, true = Horizontal and stacked
false, false = Horizontal and next to each other

Here are examples of the barchart scripts with sample images below.

{{ google.barchart(400, 200, [ [ 10, 20, 30, 50, 40 ], [ 40, 50, 30, 20, 10 ] ], [ 'fake', 'real' ], [ 'ff0000', '0000ff' ], true, false) }}

{{ google.barchart(400, 200, [ [ 10, 20, 30, 50, 40 ], [ 40, 50, 30, 20, 10 ] ], [ 'fake', 'real' ], [ 'ff0000', '0000ff' ], false, true) }}

Pie Charts

Piecharts are a little different because it only requires one dataset and the last parameter is a boolean: True means that the pie chart will display in 3D and False means it will be displayed in 2D. Here are the values that are different:

labels (optional) - This is the same as Legend in Line and Bar chart ex: [ 'you', 'him', 'me' ]
colors (optional) - These are the colors of the lines (I use _ to keep the default colors)
threed (optional) - draw 3D chart default: true

Below are sample scripts with sample images below them.

{{ google.piechart(400, 200, [ 10, 20, 30 ], [ 'you', 'him', 'me' ], _, true) }}

{{ google.piechart(400, 200, [ 10, 20, 30 ], [ 'you', 'him', 'me' ], _, false) }}

The Google Charts integration allows you to create pages that include dynamic charts that pertain to the content on the page, allowing you to create professional looking wiki pages for projects or presentations. Deki Wiki has numerous extensions that allow you to create dynamic pages that improve the visual appearance of your content. Let me know what other extensions you would like to see samples for.