screenshot of blog and wiki using unified template

There are a few people out on the web who have tried to get the WordPress blogging application and MediaWiki to play nicely together. Some have gone so far as to build authentication mechanisms that force one system into depending on the other for user account details. It all gets a little shaky when you try to take two systems designed for different purposes and reshape them into a new purpose. I think I’ve discovered that its much easier to get two sites to authenticate against facebook than it is to get them to work with each other directly

If you’ve taken a look around this site, you’ll notice I’ve integrated the two visually, and that I’ve also added facebook connect functionality using plug-ins available for wordpress and mediawiki. I’m not sure how much further I’m willing to take it, but I’m reasonably happy with the results and think I could launch a new blog/wiki integration pretty quickly now. Here’s some of the steps I took:

1. Install mediawiki and wordpress to {SITE_ROOT}/w and {SITE_ROOT}/b using their defaults. Duplicate the default wordpress theme (default) and mediawiki skin (monobook). Call them whatever you want (jose is a good name i guess).
2. Create a unified include directory at {SITE_ROOT}/inc/ – this is a good place to keep includes that will be used by both applications and/or by static pages.
3. Create a CSS directory and generate the following: default.css, wordpress.css, mediawiki.css, iphone.css. Grab the css from the wordpress theme and the mediawiki skin (main.css) and migrate them here. With all the CSS in 3 files, you should be able to manage css rule dependencies and choose the rules that make sense for the whole site, moving them into default.css. You can use iphone.css later to specify rules that only apply to safari on the iphone.
4. Install the facebook connect plugins for wordpress and mediawiki. Follow the instructions to create a new app on facebook only once – use the SAME API KEY for both plugin configurations. If a user logs into one, they will automatically be logged into the other (neato).
5. You may also need to hack both plugins directly. The first thing I did was strip out all of the CSS code being injected by the FB plugins and move it to default.css. There is also some template logic buried in the plugin, which I simplified somewhat for consistency.
6. Start hacking the template/skin files on WordPress and MediaWiki. There are a lot of loose ends that’ll need to be cleaned up and to get a fairly clean and consistent UI, you will need to work well outside of the themes/skins directories. Each system has slightly different implementations of the FB-connect and lean on both the PHP and JS libs in different ways. Here are some tasks that might take a while:

• moving the search box to the header.
• consistent display of the “logged-in” box.
• Move some of the sidebar content to the footer.
• Get rid of some sidebar content (don’t just hide it with CSS).

This is about as far as I am right now, maybe not enough to write about but at least a decent work in progress. If there is any interest, let me know and I can post the source code.

Mystify Screenshot

This is a port of the old windows screensaver in processing.js.

try demo

see on openprocessing.org

Implementation: JavaScript, Processing, Processing.js

float xa=1;
float ya=1;
float xb=0;
float yb=0;
int xav=1;
int yav=2;
int xbv=-2;
int ybv=-1;
int step=6;
int colour=(int)random(10000);
void setup() {
  frameRate(12);
  size(280,320);
  xb=width-10;
  yb=height-10;
  background(0);
  fill(0,10);
}
void draw() {
  noStroke();
  rect(0,0,width,height);
  strokeWeight(2);
  colour++;
  stroke((colour+0)%255, (.3*colour)%255,(.7*colour)%255);
  if (xa > width-10 || xa<1) xav*=-1;
  if (xb > width-10 || xb<1) xbv*=-1;
  if (ya > height-10 || ya<1) yav*=-1;
  if (yb > height-10 || yb<1) ybv*=-1;
  xa+=(xav*step);
  xb+=(xbv*step);
  ya+=(yav*step);
  yb+=(ybv*step);
  line(xa,ya,xb,yb);
}

screenshot of dice rolling app built in JavaScript

Problem definition: A man walks into a pub and sees a jar full of dollar bills. The label says “Roll a 1,2,5,5,6 to win the pot”. The man has had a few drinks and doesn’t trust his napkin math. How many rolls will it take to win the money in the jar?

Solution: Write a script that rolls the dice thousands of times looking for a specific number of each die in any order, tracking the number of rolls and wins. Divide the number of rolls by the number of wins to calculate an average to hit the winning roll. In this case, I found that the average eventually tends toward 60, but individual results can frequently end up as high as 200 and as low as 8.

Implementation: HTML, CSS, JavaScript, Mootools 1.2.3.

try demo

Bebo: We’ve always been focussed on engagement. App charts via ratings. Shying away from emphasis on installs. Tangible Metrics. Encourage time spent and retention. Not throttling or sanctioning.

MySpace: Innovating on Home (private) and profile (public). News, Auctions. Early stages. IRC channel for dev community. Taking it slow. Makin data available to developers, Movie and Music data access. Making on site data stores more convenient to use.

Data Portability
Facebook: Intent is to enable user to take data with you wherever you go – both user and developer. Intentionally restrict access to contact information for spam purposes. As industry “our responsibility to work together”.

Sixapart: Evolution of mashups into apps, opensocial. Next evolution, not one website inside of another, but two working together.

Google: OpenSocial is intended to be useful on the web in general, not just social network. Extensible, (hi-5). SN can expose additional services and api’s. HI-5: Photos and presence.

Google: Facebook creating a new area. Standards can be beneficial because they can establish a market for everybody.

Deals before and after the launch of FB Platform.

MySpace: Open social extensions enable them to choose whenever they need to play along with standards or go their own route.

MySpace: Arrogant to think they can do better than the developers. As we expand music venture, going to make music data available to both internal and external vendors.

SixApart: Too much variation in API’s for OpenSocial, photos in Flickr vs. MySpace photos.

Google: Api’s for Apps on a platform!

Facebook: There are amazing Verticals that have not ben tapped yet. Sports, Productivity, etc.

SixApart: Our app competes with our own beacon notification.

FaceBook: Distribution is the big mess. Lots of rules to figure out.

Bebo: Building a marketplace. Looking into other verticals. How can apps help us and how can we help them? Partnerships cannot be to narrowly focussed, such as with a single video game company.

Facebook: Reputation system for Apps. User experience. Different types of distro opps depending on how users perceive the apps. Help users understand how to give feedback. Algorithmic as possible as opposed to taking an editorial role.

How are you going to change the mentality o developers to cooperation?

Bebo: Ensuring that viral channels work. Developers will try to game those channels. Promote and reward the most engaging apps. Focus on building a compelling product as opposed to trying to spam users.

MySpace: Lineage of people trying to game the system. App that sends external email to users. Mail spam is not like social spam. Apps getting chatty…

FaceBook: I think that in any system there’s arbitrage. Same behavior in any market place or system. Our job to be in service of the user. Some apps do need to send a whole bunch of emails. EX: Causes is doing a positive thing and FB wants to encourage that. Some apps have a low threshold, others need to send a lot of notifications. How do we set rules and create incentives for the developers while maintaining a good user experience?

Google: Open social has a wide set of viral channels available. Each network chooses which channels to utilize. Google likes to se the word “organic” instead of “viral”. Channels: Activity Stream and Messages

Facebook: Apps that focus on viral growth grow fast and die fast.

User Experience

Facebook: Apps often viral, but lacking social.

Monetization:

MySpace: Apps need a large install base. Focus on Self-Serve and hyper-targeting. Testing categories in hyper-targeting.

Bebo: Anyone trying to build a marketplace has to think about monetization. How can we ashare data that helps the developer monetize? Over the next year, a lot of cool new developments and innovations.

Facebook: 2008 a big year for monetization. FB working on social commerce. Commerce engine, payments. Fluff Friends, etc using virtual currencies.

Sixapart: MAKE IT EASY FOR THE DEVELOPER! Controlled extensibility. Far too difficult.

Google: BTW, We already have monetization, AdSense and Google Checkout.

Bebo: Downtime? Uh, downtime sucks.

Sixapart: We have FOAF and XFN woo hoo!

Facebook: What does it mean when a user wants to move data around? Should we be threatened? Trying to emphasize “privacy portability” as a way to make “data portability” sound risky.

Sixapart: FB doesn’t care about portability, all talk. Not really – all talk about portability is just talk. True portability will come naturally.

12:15 PM – Search and Discovery Face Off
Finding what you’re looking for, or what you aren’t

• Garrett Camp StumbleUpon
• Mary Hodder Dabble
• Adam Singolda Taboola
• Tim Tuttle Truveo
• Alex Vikati CastTV

This session pulls together a panel of experts from various video sharing sites and search engines to discuss making video search and discovery more relevant.

Mary Hodder estimates that there are 300 million videos on the web and 350,000 uploaded per day. “Discovery is 80% of the problem”.

Evolution: from downloading video files to hosting a player to syndicating a feed of players.

Garrett: “People don’t always know what they want”, hence the notion of flipping channels.

Mary Hodder: Users characterize and describe videos differently than publishers.

Tim: Search and metadata has improved vastly over the last few years.

Signal processing, OCR is not practical on hundreds of millions of videos on a daily basis.

Garrett: Looking onto the Nintendo wii as a set top ITV box.

Tim: API’s are powerful, but no developers have yet used them to to bring the Truveo experience to a set-top box.

Hodder: Youtube has gone from 50% at 100,000,000 views to 25% at 300,000,000 views. Digg – the percentage of videos coming from youtube has gone from 90% to maybe 10%.

Cast.TV: Fragmentation / Syndication is a headache/issue? The lines between search, discovery, browse are blurred.

StumbleUpon is the winner of the faceoff at 33% – audience poll of most likely to use for discovery. Truveo is 2nd.

My Opinion: Metadata is key and the exchange thereof will evolve to become a commodity exchange. 2nd tier video sites have a chance if they can find their niche and become relevant on distribution networks such as Digg, StumbleUpon, Bebo, FB, etc. These publishers need to provide as much meta-data as possible to the distribution networks and secure the return of metadata from those sites whenever possible. In Bebo’s case, a publisher such as crackle should bring as much relevance as possible to the actual Bebo community based on what other bebo users are watching on crackle. How this is facilitad is up to both sides to build out API’s, to swap data and yet maintain user privacy standards at the same time. StumbleUpon is on the right path.

Mentioned:

• Ryan Carson, UK
• Jeffery Zeldman, Happy Cog
• Eric Meyer, Complex Spiral
• Jason Santa Maria, Happy Cog
• Dave Shea, Mezzoblue.com
• Steven Champeon, hesketh.com
• Nate Koechley, Yahoo
• Microformats: Hcard

Intermission: had a cigarette with Andy, whose son apparently uses Bebo and not Facebook or MySpace.

Why would you use div[id="content_main"] instead of div#content_main?
To enable branching from older browsers to newer browsers. Exactly which browsers belong in which branch?

Getting into Specificity, apparently only a few of the designers in the room actually know what it is and how it works. This is an interview question that I use to test designers applying to Bebo.

Mentioned:
Specificity Wars

Using Attribute sub-string selectors to generate content:

• E[foo~="bar"]
• E[foo^="bar"]
• E[foo$="bar"]
• E[foo*="bar"]

Pseudo elements and classes:

• li:last-child {}
• p:first-line {}

and on…

Television advertising is treated as a commodity, that helps the industry scale.

Marketing expert says:

• Cross-platform standardization is necessary,
• There are two types of advertisers – those who will take risks and the other 98%.
• Try to think in all mediums, not just online (billboards, print, TV).
• Standardization of: creative, cpm.
• Reach and frequency are vital.
• How do you engage and repeat the message in different and creative ways?

How do you reliably create word of mouth advertising?

Session 5: Opening your API

Facebook platform is a “reverse API”
API: data, logic, presentation, control

The only way you get developers to use your stuff is to educate them and encourage communication and collaboration.

Application Gallery – very important for seeding ideas.

Developer applies for key (not by email). Key is initially limited, increased access later based on business logic.

Mashery competes with the internal CTO. Any company can build this, but development cost is about 3-6 months.

Userplane has an API, on over 200,000 websites.

Caching and load balancing can dramatically improve the efficiency of calls being made to an API.

The “secret sauce” is in the data or logic, not the presentation – Except for facebook.

Next: Open Bar, the only reliable development platform.

Session 1: Monetizing Apps through Advertising.

Monetizing Apps through traditional methods:

• Referrals / CPI
• CPM / CPC
• Leadgen?

Which app types are going to be the most successful, categorically?

• casual gaming?
• Media apps
• Utility apps – no

Do different demographics like different apps?

Is Group-based app activity vital?

• Groups are successful on myspace.
• Groups platform not robust enough on Facebook
• Integrating groups into the app experience can improve

Jerry Ablan, pogostick

• Harry Potter App – Which character are you? 40,000 new users per day.
• High Turnover = good for business?
• Doesn’t care about advertiser needs, why should he?

App developers may trade referrals from one platform for boosted distribution on other platforms…

Session 2: Valuing, buying and selling Apps.

Adonomics, valuation system/market for apps.

• Dramatic Whitespace, $700
• Favorite peeps vs. Top friends 10’s o millions of dollars.
• App developers will pay on average $0.50 per install

Developers often avoid using ads initially, but why?

• Troy thinks that most users will not react negatively to ads.
• Developers are leaving money on the table.

What is the critical mass for a Social Network App to become highly valuable?

• Number of registered users
• Number of active users
• Number of page views or interactions
• Growth rate

• Building an XBox 360 game in an hour
• Building Marketplace Apps using Amazon Flexible Payments in .NET
• Game 2.0 – How the Web is influencing the game
• Patent Portfolio Development and Use
• Ruby on Rails
• Social Media as Trading Cards

~jose

NOTE: this is an old post, for some reason it never went live.

I miss my gramps.