Category Archives: Dabbler

Dabbler

BuddyPress: ‘Facebook in a box’

Andy Peatling from BuddyPress kicks off Wordcamp 2009 for me. So, what is BuddyPress? In another presentation, Matt Mullenweg, the WordPress founder describes BuddyPress as ‘Facebook in a box’ ideally suited to the creation of niche social networks. Features include in-depth profile pages, a life-stream, messaging, groups, albums, forums, blogs (obviously, given that it’s from the WordPress team).

Andy points out that BuddyPress grew as a collection of plugins for WordPress MU (the multi-author edition of WordPress) that have been rolled into one large one. The advantage here is that you can pick and choose which elements to configure and run, but more on that later.

Why use BuddyPress rather than Ning, Facebook or other available social networks?

A major benefit of BuddyPress is that you get the power and stability of WordPress. It’s also heavily extensible and plays nicely with most of the massive collection of WordPress plugins out there. WordPress is the run-away leader when it comes to open source blog applications and so BuddyPress can leverage the sizable community that exists around WordPress. In some instances you can use existing WordPress plugins right out of the box, eg. LDAP functionality to handle registrations. Other plugins and widgets may require some modification.

Another key feature is BYOTOS. Umm, exactly what is BYOTOS? Bring Your Own Terms Of Service. For instance, Facebook scared many users when it changed its terms of service in February to include the clause whereby they can do anything they want with your content. As you download and install BuddyPress on your own servers, it is really up to you to decide your own terms of service for your community.

Setting up BuddyPress

The first step is to setup WordPress MU, which commonly runs in the LAMP (Linux/Apache/MySQL/PHP) environment. You should ideally use sub-folders for each profile rather than sub-domains.

Next step is to download BuddyPress.

Once installed, each component has it’s own folder so disabling a component is as easy as deleting the relevant folder. The advantage here is that you only configure what you need. Setting up the forum piece which uses BBPress is currently the trickiest part, although this is due to get easier.

Skinning BuddyPress

You use WordPress themes for blog/content pages. If you are used to running WordPress blogs, you are probably familiar with these themes. Buddypress has its own themes for social pages. You can see an example of this in practice on GigaOm Pro (a community version of Om Malik’s popular technology blog):

buddypress_gigaohm
(click thumbnail to see full size)

You also have the option to enable blog networks, which each have their own distinct theme. This is a key feature that really isn’t really available on most other social network solutions out there.

Note that each component has it’s own theme folder so you only skin what you need to skin (eg. if you just need profiles, just skin those). Knowing which theme file you need to edit for a given page is easy as URLs map to template files:

buddypress_themeurl

If you have used WordPress, you are probably familiar with the concept of the ‘loop’: the code block that handles the display of each individual post on a page. Buddypress themes use the same ‘loop’ concept, but for more than just blog posts. Output any BuddyPress content by creating custom loops.

BuddyPress ships with a skeleton (vanilla) theme that eases customization.

Extending BuddyPress

If you need to build a plugin then check out the ‘skeleton component’ that comes as standard with  BuddyPress. This can help you understand the hooks and actions from which the plugin can access BuddyPress functionality. Again, if you have built plugins for WordPress, the concept is the same and should make sense.

There are a number of ready-built plugins you will find on BuddyPress Dev. For instance there’s a plugin to allow users to pull in photos from a Flickr stream.

BuddyPress: the future looks bright

Given that BuddyPress was only launched around Wordcamp this time last year, it’s remarkable to see the rich feature set available today. The team continues to make constant improvement and recently asked the community to vote on features they would most like to see in upcoming releases.

If BuddyPress can capitalize on the considerable community and large popularity of WordPress, this really could become a major player in the social network solution space.

Follow Andy Peatling on Twitter.

Creating rich internet applications using the Dojo Toolkit

IBM has embraced the Dojo Ajax toolkit for the development of web-based user interfaces (UIs). In this presentation towards the end of IBM Impact, Chris Mtichell from IBM’s Websphere group explains what the Dojo toolkit is and how it can be used by developers.

Chris points out that more and more of us are using browsers to interact with more and more complex applications. This calls for more advanced UIs, and here is where Ajax can play a big part. Rather than having to refresh the whole page when some new information is required from the server, Ajax allows for the update of a single element (whether it be a number, an image, a piece of html etc.). Add DHTML to the equation and you can build rich interfaces approximating those found in software applications.

Toolkits such as Dojo have emerged to simplify code for common functions and to deal with issues such as cross-browser compatibility. The service-based nature of Ajax and these toolkits provides a great fit for SOA. The Dojo Toolkit itself is a set of common Javascript libraries used for creating Ajax and DHTML web applications. It has been around for almost 5 years.

Key features of this open source toolkit include a large collection of widgets (called ‘Dijit’), a data abstraction layer (useful for dealing with data coming from different sources, eg. Amazon, Yahoo or other APIs), event management handling and a debugging interface all in an extensible modular architecture. This means it only pulls in what it needs when it needs it, making it smaller and faster than just about any other toolkit out there.

The toolkit is divided up into base and core components:

dojo_structure1

Beyond that there is a widget/plugin approach for additional functionality:

dojo_widgets

Dojo ‘base’ features

It is worth looking at the rich feature-set provided as the base functions that are always available to developers (the lightweight dojo.js which weighs in at under 60kb):

  • Cookie functions
  • Lang utils and array extras (compatibility between IE6 and Firefox)
  • JSON serialization
  • Fast CSS manipulation
  • Events (simple connect)
  • Fast CSS style manipulation (for positioning elements)
  • Browser detection
  • URL functions
  • Doc load, unload hooks
  • Animation and effects (fade, slide, css colors)

Loading the Dojo Toolkit is as simple as referencing the Javascript in your HTML page and setting a few configuration options:

dojo_load

Most Dojo functions are tied to the dojo.addOnLoad event. Furthermore, a set of actions can be chained together. A key use of the Dojo Toolkit is to add styling to data pulled from an Ajax call. For instance, if a figure in a table has been updated, you might want to highlight this via CSS and then fade back to the normal state. You also have direct access to the DOM, with the potential to remove or add nodes (or HTML fragments).

When it comes to making an Ajax call, the dojo.xhr mechanism is simple and easy to use. It is based on XMLHTTPRequest and follows the standard REST conventions (get, put, post delete). Here’s an example of grabbing a subscription using JSON, and displaying the output:

dojo_ajax

Dojo ‘core’ libraries

The libraries contain modules that are extremely useful, but not always needed. They are not loaded by default (for performance reasons) but can be accessed using dojo.require().

Some examples:

  • Extended animation
  • Date parsers
  • Drag ‘N Drop
  • Regular expressions
  • Extended I/O

Widgets and plugins

In the Dojo world, core widgets are handled by a system called Dijit. As well as being a set of pre-packaged skinnable, template-driven widgets, Dijit also contains a powerful, flexible architecture for building your own widgets.

Dijit in action:

dojo_dijit

DojoX, another set of widgets could be termed the ‘Las Vegas of widgets’: it contains everything under the sun. Extended animation effects, date parsers, presentation tools including graphs and charts, 3d vector graphics and even an offline mode incorporating Google Gears.

DojoX also handles all cross-browser compatibility issues around displaying images:

dojo_dojox

Best practice for Dojo development

When it comes to actual development, Chris had a few pointers:

  • Firebug, the Firefox plugin is great for debugging Dojo
  • Make sure you test in Internet Explorer upfront: don’t wait until the last moment
  • Initialize Javascript code only once
  • Understand the DOM methods
  • Learn RegExp and CSS Selectors

Helpful resources

Dojo community: http://dojotoolkit.org/community/, http://dojotoolkit.org/forum
Blogs, tutorials and more: http://dojotoolkit.org/key-links
Documentation: http://dojocampus.org, http://docs.dojocampus.org

More from IBM on Dojo

WordPress meeting: Wordcamp San Francisco 2008

Wordcamps are events organised by the WordPress gang to pull together developers working on the popular blogging platform. The latest event took place recently in San Francisco, pulling together some of the top brass working on WordPress. The affable inventor of WordPress, Matt Mullenweg led the proceedings.

WordPress sessions of interest:

Andrew Mager made this wonderful blow-by-blow account of Wordcamp San Francisco 2008.

BuddyPress: Social networks on WordPress

Unfortunately I didn’t get to attend this session, but thankfully, through the beauty of blogging, there are numerous other accounts online.

BuddyPress grew out of a series of plug-ins that added social functionality to WordPress MU (the multi-user edition). It is being touted as Facebook-in-a-box, ie. you can setup your own personal Facebook for your community.

Credit: Andrew Mager

More screenshots from Andy Peatling’s blog.

Andy graciously added his presentation to Slideshare:

SEO for WordPress

Stephan Spencer from Netconcepts led this well-attended session on how to maximise search visibility using WordPress. Generally, blogs work well for search engine optimization (SEO) due to their emphasis on generating lots of regularly updated content. However, there are steps you can take to optimize the standard WordPress installation.

Key points:

Internal linking

Try and ensure your internal links (from one page on the blog to another) are as relevant as possible. Using a tag cloud in the navigation can be a great way to achieve this. Taking this a step further, building conjunction pages can really help. What are these? If your blog has a category on ‘gardening’ and some of these post are also tagged ‘urban’, then create a page that pulls all relevant ‘urban gardening’ content. The ‘UTW Theme Compatibility Thing’ plug-in can help with this.

Let your most valuable content sell itself: there are numerous plug-ins that can take your top blog posts and add this list to the navigation. Adding links to this content will help it rank.

Title tags

Put the blog name at the end of the title – not at the beginning, given that terms later in the text have less weight.

Use the SEO Title Tag plug-in to override the title tag and create more keyword-rich titles. If you have many posts on your blog, concentrate on the top ones: homepage and category pages are particularly important. Make sure this is an iterative process: test frequently.

URL structure

According to data from MarketingSherpa, short URLs are more than twice as likely to be clicked on. You can use the settings within WordPress to change your permalink structure.

When it comes to naming your blog, it can help to have your blog registered on your main domain. As your blog builds up authority, ensure that this value is held on your core domain.

For internal anchor text, try and get away from using ‘permalink’ or ‘read more’. Include the name of the title in the anchor text. Don’t let the archive pages get indexed – these are not well structured for search. To hide these links, use the ‘rel=”nofollow”‘ within the link tag to direct search engines away from these pages.
When writing new posts, remember to link back to older relevant posts, using meaningful anchor link text.

Minimize duplicate content

Make full use of WordPress’s ‘Optional Excerpts’ field to write independant synopses for posts. Don’t just let the system pick the first x characters and display these as this constitutes duplicate content.

Improve keyword focus

Make sure you are fully using HTML heading tags – particularly for titles and tags. Put the category name in a heading tag on category pages.

Use ‘sticky posts’ to keep precious posts on the top of the list. The plugin WP-Sticky can help with this.
The default tagline on WordPress reads ‘Just another WordPress blog’. For SEO purposes, make sure this is renamed.

RSS optimization

Some top tips for optimizing your RSS feeds from your blog:

  • Use full text, not just summaries
  • Display 20 or MORE items (not just 10)
  • Setup multiple feeds (by category, latest comments, comments by post)
  • Ensure your most important keyword in the site <title> container
  • An RSS feed that contains enclosures (i.e. podcasts) can get into additional RSS directories & engines

Recovering deleted photos

So, it finally happened. After years of happily importing images into Picasa and clearing the disk in the camera, we finally pushed the wrong button and cleared out a whole set of debauched bachelorette photos, many of which could have possibly held some quite senior San Francisco socialites to ransom.

We fretted and Googled and finally came across PC Inspector Smart Recovery. Phew. This simple app scoured the disk and pulled off all the data it could find:

Smart Recovery

I don’t normally endorse software, but this was a major life-saver. So, if you’ve found that you’ve deleted photos inadvertantly, avoid the cold sweats and give this a go. You might be surprised at what you find. As for me, I’m off to bribe some friends…

Wii, Second Life and the possibilities for internet design

It looks like we’re only at the beginning of seeing the uptake of Wii as an input device for gaming. As it’s a bluetooth device there’s numerous hacks that tie it up to a PC. Businesses are capitalizing on this and developing immersive training experiences. Perhaps that killer app is just around the corner?

Wii and Second Life

Taking the basics of how the Wii could be used in Second Life, MIT research fellows have been creating business models to cut the cost of training by using Second Life and Wii as an immersive learning center. For large corporations, this means not having to send trainees to expensive on-location courses. As a footnote, there is also the possibility to tape a Wii controller to a plastic steering wheel and use it to practice driving. Hook this up to Google Earth and you can drive Paris to Dakar without leaving your sofa.

Wii and finger tracking

Oddly, reversing the Wii and using it as a static infrared camera taped to the top of your TV means you can use the Wii controller to sense finger movements. Look out for the cameo of a pack of cards as a prop. This is what the new generation of mad professors look like:
[kml_flashembed movie="http://www.youtube.com/v/0awjPUkBXOU" width="425" height="350" wmode="transparent" /]

Where would this work best? I’m thinking for design and music software. As it is, visualizations for plugin VST sound effects already have the look down. They just lacked the input device.
OK, time to go watch the Minority Report to find out why all the comparisons are made (am I the only geek on the planet who hasn’t seen the film?)

dj tutorials – ellaskins

ok, i had a million other things i was meant to be doing this friday, but hell – the rest of france ‘faire le pont’ (have taken an extended holiday after all soul’s day) so i can allow myself to get a little sidetracked.

back in the day i remember looking up websites that had wedged/notched diagrams showing you the basic structure of dance music and talking about getting records in tune. that was in the days before youtube. now we have ellaskins, an english guy named jonathan, fervently and eloquently taking us through all kinds of elements of dj’ing. from describing what is rare groove, through to showing how to mix with pitch controls and what’s visually my favourite, illustrating dance music structure with his son’s lego. enjoy:

[kml_flashembed movie="http://www.youtube.com/v/aDnc_NjgQZw" width="425" height="350" wmode="transparent" /]

although he focusses on vinyl/cd djing these are excellent tutorials for new digital dj’s or those making the transition from the vinyl/cd world towards the possibilities of digital.