Christian Heilmann

Posts Tagged ‘yslow’

Developing *with* the web, eh? Speaking at the domain convergence in Toronto, Canada

Tuesday, August 18th, 2009

I have just returned from Toronto, Canada where I spoke at the second Domain Convergence conference about web development with distributed data and about using the social web.

First of all I have to say that this was an eye-opening experience for me as I never even knew that there is a whole community of “Domainers” – people who buy, sell and “develop” internet domains much like other people do with real estate.

The organisers (an old friend of mine hailing back from the time when we created C64 demos together) wanted me to talk about web development with APIs and the social web as the current state of this in the domain market is very much random. The common way of creating some content for a domain is to hire a developer on rent-a-coder, get a $99 logo, write some content and put it live. The main goal for the site thus created is to make people click the ads on it – selling the domain is secondary step.

This is totally the opposite of what I consider web development but instead of condemning it I loved to get the opportunity to show another way of building web sites on a very small budget and without much technical know how. This is what I had to say:

The presentation SlideCast

Notes

Following are the notes that I was meant to say during the presentation. I ad-lib a lot though. Can’t help it, eh?

Developing with the web

The current financial crisis is reported to have its toll on the web business as well. Whilst that is true to a degree (declining ad sales show that) there might be a different reason though: the web moves on and so do the habits of our users.

Build it and they will come doesn’t cut it any more

Anybody who builds a web product and wonders why there are less and less comments, visits and clicks must realise that they are part of a massive network of sites and offers. People use the web and multi-task their social interactions.

Back when this was all fields

I remember that back when I started as a web developer you had one browser window. If you wanted to have several pages open you needed several windows. All of these used up memory of which we didn’t have much. As computers were slow we maybe had another chat client open or an IRC client and an email client. In any case, working and surfing were two different tasks.

The web 2.0 revolution

With web 2.0 this changed. Computers became more powerful, browsers started supporting multiple tabs and software moved from bulky desktop to lighter web-based interfaces. The web turned from a read to a read/write media and its users started actively defining their web experience by altering it rather than just reading online content.

Bring the noise!

The next wave was more and more social networks, blogging, micro-blogging and messaging systems. As humans we are hard-wired to communicate and tell the world about everything we do. Only our social standards and learned manners changed that. As neither seems to be of much significance on the web we are happy to tell the world what we do – no matter if the world is interested or not. After all, once we found something out and told the world about it it is time to go back and find the next big thing.

Oh, shiny object!

This wealth of real-time information causes an overload and makes people easily distracted. It also cheapens communication and forces us to give more and more information in shorter and more to-the-point formats.

If you can’t fight them…

Enough complaining though. The funny thing is that the distributed web we have right now is exactly what the web should be like. Web sites are not radio or TV channels – they are small data sets that tie in with a much larger network of data. So in order to be part of this we need to distribute our content.

Spreading and collecting

The way to have fun with the web of data is to distribute ourselves around the web and bring the data back to our sites.

The first step is to spread our content on the web:

The benefits of this approach are the following:

  • The data is distributed over multiple servers – even if your own web site is offline (for example for maintenance) the data lives on
  • You reach users and tap into communities that would never have ended up on your web site.
  • You get tags and comments about your content from these sites. These can become keywords and guidelines for you to write very relevant copy on your main site in the future. You know what people want to hear about rather than guessing it.
  • Comments on these sites also mean you start a channel of communication with users of the web that happens naturally instead of sending them to a complex contact form.
  • You don’t need to worry about converting image or video materials into web formats – the sites that were built exactly for that purpose automatically do that for you.
  • You allow other people to embed your content into their products and can thus piggy-back on their success and integrity.

If you want to more about this approach, check out the Developer Evangelism Handbook where I cover this in detail in the “Using the (social) web” chapter.

Bringing the web to the site

The other thing to think about is to bring the web to the site and allow people to use the services they are happy to use right in your interface.

One of the main things I found to be terribly useful there is Chat Catcher. Chat Catcher is a wordpress plug-in or PHP script that checks various social networks for updates that link to your web site. That way you can get for example Twitter updates with links to your site as comments on your blog. This showed me just how much people talk about my posts although I didn’t get many comments. The only small annoyance is that re-tweets show up but that can be tweaked.

Another interesting small tool is Yahoo Sideline which allows you to define searches for the Twitter network, get automatic updates and answer the tweets.

Cotweet does the same thing but on a much more professional level. Cotweet was build for corporations to manage their Twitter outreach and it helps you not only to track people talking about certain topics but also to define “shifts” for several people to monitor Twitter during a certain time period. Using this in a company with offices in various parts of the world you can have a 24 hour Twitter coverage without having to log in from several locations to Twitter itself.

Another way to take advantage of the social web is to allow visitors of your web site to update their status on various social networks directly from your site. This could be as easy as adding a “tweet this” or “bookmark this in delicious” button or as complex as implementing third party widgets like on the new Yahoo homepage.

Digging into the web of data.

Bringing the social web to your site is the first step. Using information of the “web of data” in your site is much more powerful, but also a bit more complex to accomplish.

Getting to the juicy, yummy data

The web is full of nice and juicy data and there is a lot of it around. Our attempts to get to it can be quite clumsy though. What we need is a simple way to access that data. One classic way of doing that is Yahoo Pipes.

Yahoo Pipes is a visual interface to remix information from various data sources like web sites and RSS feeds. The interface reminds the user of visio or database organising tools and is very easy to use. The issue with pipes is that it is a high tech interface (users who can’t see or cannot use a mouse have no way of using it) and it is hard to change a pipe. Any change means that you need to get back to the pipes interface and visually change the structure of the pipe. The good news is that you can clone other people’s pipes and learn from that.

A much easier and more flexible way of mixing the web is YQL. The Yahoo Query Language, or short YQL is a unified interface language to the web. The syntax is as easy as very plain SQL:

select {what} from {service} where {condition}

Say for example you want kittens on your site (who doesn’t?) the following YQL statement would grab photos with the word “kitten” in the description, title or tags from Flickr.

select * from flickr.photos.search where text=”kitten”

Say you only want 5 kittens – all you need to do is add a limit command:

select * from flickr.photos.search where text=”kitten” limit 5

Nice, but where can you get this? YQL is an API in itself and has a URL endpoint:

http://query.yahooapis.com/v1/public/yql?q={query}&format={format}

Output formats are either XML or JSON. If you choose JSON you can use use the data immediately in JavaScript.

Re-mixing the web.

You can nest several YQL queries to do complex web lookups. Guess what this does:

select * from flickr.photos.info where photo_id in (
select id from flickr.photos.search where woe_id in (
select woeid from geo.places where text=’london,uk’
) and license=4
)

What this does is:

  • Find London, England using the places API of the Yahoo Geo platform. This is needed to make sure you really find photos that were taken in London, England and not for example of a band called London. The Geo places API returns a place as a where on earth or short woe ID.
  • Search Flickr photos that have this where on earth ID
  • Get detailed information for each photo found in Flickr.
  • Only return photos that have a license of 4 as this means the photos are creative commons and you are allowed to use them. This is extremely important as Flickr users can be very protective about their photos.

Display them using free widgets!

You can use systems like the Yahoo User Interface Library to display the photos you found easily in a nice interface.

Using several APIs via YQL and the YUI CSS grids you can show for example information about a certain location without having to maintain any of the content yourself. This example about Frankfurt,Germany shows what this might look like. This page automatically updates itself every time the wikipedia entry of frankfurt is changed or somebody uploads a new photo of Frankfurt, the weather changes in the Yahoo weather API or somebody adds a new event happening in Frankfurt.

All of this works using APIs

The driver behind all these things are Application Programming Interfaces or short APIs. An API is a way to get to the information that drives a web site on a programmatic level and a chance to remix that information. Say for example you want the currently trending topics on Twitter. You can either go to the Twitter homepage or you can open the following URL in a browser:

This will give you the currently trending topics in JSON format – something you can easily convert and use.

API issues

There are of course a few issues with APIs. First of all, there are a lot of them out there. Programmable Web, a portal trying to keep up with the release and demise of APIs currently lists over 1400 different APIs. This is great but the issue is that most of them don’t follow any of the structure of others. Authentication, input and output parameters and access limitations vary from API to API and can make it hard for us to use them. This is where YQL comes in as an easy way out.

The other issue with APIs is that they might only be experimental and can get shut down or change even without warning. Therefore you need to write very defensive code to read out APIs. Expect everything to fail and keep local copies of the data to display should for example Twitter be offline again for a day.

Conjuring content?

The generation of content-rich web products without having to write the content yourself sounds like a dream come true. It is important though to keep reminding us that we use other people’s content and that we are relying on them to deliver it.

Content issues

Whilst you can automate a lot it remains a very good idea to have a human check third party content before putting it live. All kind of things can go wrong – bad encoding can make the text look terrible, a hickup in the CMS can seed wrong content into the category you chose, texts can bee too large to display and many other factors. Therefore it is a good idea to write a validation tool to shorten text and resize images in the data you pull.

Lack of context

One usability issue is that there might be a lack of context. Earlier we showed that it is important to distinguish between a geographical location like Paris, France and a person like Paris Hilton. The same applies to content you get from the web. People are happy to share their content but can get very cross when you display it next to things they do not approve of. Remember that people publish data on the web out of the good of their heart. Don’t cheapen this by displaying information out of context.

UGC issues

One thing professional journalists and writers have been critising for a long time is that while there is a lot of immediacy in user generated content there is also a lack of quality control. Sadly enough in a lot of cases the people that are most driven to state their opinion are the least appropriate ones to do so. Comments can be harsh and make people stop believing in web2.0 as a means of telling people your thoughts. The trick is to take the good with the bad. For you this means once again that the amount of UGC data is not what you should measure – the quality is what you need to care about.

Placement

Bad placement can cheapen the whole idea of the web of data. If you for example show photos of laptops of a certain brand next to news that these models are prone to explode or die one day after warranty expiration you won’t do yourself any favour. Again, showing people’s reviews and blog posts next to bad news might also get them cross.

Legal issues

Which brings us to legal issues. Just because data is available on the web doesn’t naturally mean that you can use it. You can have a lot of free data on the web and use it to make the now more or less useless parking sites for domains more valuable to the reader. You do however also need to make sure that you are allowed to use that content and that you display it with the right attribution.

Demos and resources

Here are a few things to look at that any developer can use and build with a bit of effort.

  • My portfolio page is completely driven by YQL and maintained outside the server. If I want to upgrade it, I either post something on my blog, change some of the blog pages, add new bookmarks to delicious or upload new slides to SlideShare
  • Keyword Finder uses the Yahoo BOSS API to find related keywords to any item you enter. The keywords are the keywords that real users entered to reach the top 20 results in a Yahoo search
  • YSlow is a Firefox add-on that allows you to analyse why your web site is slow and what can be done to make it more nimble and thus create happier visitors.
  • GeoMaker is a tool build on Yahoo Placemaker to find geographical locations in texts and turn them into maps or embeddable microformats.
  • Blindsearch is a side-by-side comparison of Yahoo, Bing and Google search results and thus a fast way to find out how you rank on all three.
  • Correlator is an experiment in alternative search interfaces. Instead of getting a catch-all search result page you can filter the results by interests, locations or people.
  • The developer evangelism handbook is a free online book I’ve written and in this chapter I go into more detail about the subjects covered here.
  • Web Development Solutions is a book I’ve published with Friends of Ed dealing with the subject of web development using distributed data.

Play nice!

As one of the last things I want to remind you that it is important to play nice on the social web. It is all about giving, sharing and connecting and if you abuse the system people will complain about you and cause a stir that is very hard to counter with PR or marketing. If you however embrace the social aspect of the web you can have quite an impact as the following example shows.

Colalife.org

Colalife is a great example how using the social web can have an impact on the life of people. The organisers of colalife used the social web (Facebook and Twitter) to persuade Coca Cola to ship free medication with their drinks into third world countries. Coca Cola has world-wide distribution channels with chilled storage and the Colalife people designed a special device that would allow to store contraceptives and rehydration medication in bottle crates without taking up extra space. Coca Cola agreed and now medication is delivered to those who need it for free and the company creates a ton of good will. It was one person with an idea and a network of millions to freely tell a corporation about it that made it happen.

Thanks!

That’s all I wanted to talk about, thanks.

Extra achivement

As an extra, I am happy to announce that because of my inventiveness in ordering drinks the Radisson Hotel in Toronto now offers a new cocktail of my invention called “keylime pie” which consists of Smirnoff Vanilla, Sour Mix and Soda. This was another first for me – I never had any of my inventions featured on a cocktail bar menu!

Five things for you – an introduction to the offers of the Yahoo Developer Network

Thursday, June 18th, 2009

Yesterday I was in Barcelona, Spain and talked to a few dozen local developers about the things they can find on the Yahoo Developer Network to have an easier time building web sites and impress their bosses. Amongst other things I showed:

Barcelona by  codepo8.Yahoo office Barcelona by  codepo8.

Here is the presentation and my notes with the source of the code examples for you. You can “download the slides as a PDF (11mb) from S3”:http://chrisheilmann.s3.amazonaws.com/developer-evening-barcelona.pdf or watch them on slideshare:

Notes:

Five things for you

Today I am going to talk about five things Yahoo offers to developers. In case you wonder, Mortadello y Filemon is actually rather big in Germany – known as “Clever and Smart” hence I couldn’t resist using them.

English only

Sorry, but I don’t speak any Spanish, but there are colleagues of mine around for Q&A later who can translate if needed. Also, if I speak too fast, just shout and I will try to make it easier.

I am Chris

I’m Chris and I am a developer evangelist. As you can see I also speak with my hands a lot, but that is because I am passionate about what I do. I want to make the web an easier, more professional environment to work in and a media that people can enjoy regardless of ability or technical setup.

Get this talk and others later

This is my main web site where I publish all of the talks I give, videos and other goodies. So this presentation will end up here later on and you can re-mix it for own trainings or presentations. Creative Commons rocks.

The Yahoo Developer Network

I work for the Yahoo Developer Network which you might not have heard of before. In essence what the YDN does is offer almost everything you see on Yahoo – the data displayed and the interface elements used for you to use in your own products via APIs, SDKs and a great development framework. The YDN homepage is your first stop for all the information I am talking about today.

1) Research

Let me start by showing you some of the research we’ve done and the results we offer you to build your own solutions on. In addition to what I am showing here also make sure to chat to some of the colleagues here, as we have a research lab here in Barcelona and they are working on some really cool products.

Patterns

The Design Pattern Library is a collection of solutions to problems or tasks users of our web sites and applications had. We do a lot of user testing in labs and we ask the right questions to find out exactly what people consider the easiest way to for example pick a date in a web form. All of this research is documented in these use patterns with a description of the problem, an explanation of the solution and a cross-reference to where in Yahoo we use the solution. If you build an interface and you don’t have time or budget to do your own research, this is a great resource to use. The patterns are creative commons so please tell us if your experience differs and we can amend them.

Stencils

If you do visuals all of these patterns are also available as stencils for all major design tools. That way you can easily build and design an interface that your developers will be able to create in CSS, HTML and JavaScript.

Performance

The Exceptional Performance section of the Yahoo Developer Network is where we give you all the information how we made our web sites behave faster and more responsive. In our world every millisecond the page takes to load and display counts – we can relate every second wasted to money lost. While your sites might not be that dependent on great performance it does never hurt not to waste your visitors’ time. In this section you find tips and tricks how to tweak your server, how to write CSS and JavaScript and how to optimise images easily organised and explained in detail.

2) Flexible, professional development

As a large company we need to be professional in how we work with each other as developers. There are dozens of offices with hundreds of developers in Yahoo and we found that every developer and every office solves the same problems, makes the same mistakes and re-invents the wheel over and over again. Web development is a very undefined area and the biggest issue is that we spend 90% of our time fixing bugs rather than developing. We wanted to change that and make sure that we can concentrate on architecting our software solutions and develop and tweak them for the users’ benefit rather than fixing annoying and confusing browser bugs.

Graded Browser Support

The first thing we needed to make sure is that we define and describe the support we have for different browsers. This is a methodology and resource site we have called the Graded Browser Support and is something you can use for your product documentation and pitch, too. You cannot give every visitor of your web site the same experience regardless of browser and you actually should not even think that way as that kind of thinking is against the main principles the web was invented for. You have to make your products work for everybody, but you can give a different experience dependent on the sophistication of the visitors’ setups. This is what the GBS does. We define which browsers we support fully and test the high-end experience for. All other browsers don’t get this experience but something that works regardless.

The Yahoo User Interface library

The Yahoo User Interface library was the next big step to take towards professional development. This is a library ranging from CSS solutions, over JavaScript components up to plug and play widgets that are based on the support ideas we defined in the GBS and best practices we found in our pattern research. The YUI is where we work around all the annoying bugs and problems browsers and web technologies have to allow us to build solutions without wasting our time on wondering why they don’t work in setup xyz. By keeping all this in a base library we can fix and apply for any new technology or browser coming out. If we did all of the fixing in our sites we’d have to revisit each and every one of them when technologies change. This is not effective, hence we built ourselves a library.

The myth of the unstyled page

There is no such thing as an unstyled page in browsers. If you don’t apply a style sheet, then browsers have an in-build default style that varies from browser to browser. This makes it impossible for you to design a predictable interface. That’s why we created a style sheet that un-does all the styling browsers apply to a page. This means you can start with a clean canvas.

Predictable typography

Typography was he next hurdle. Every designer will give you font definitions in pixels and when you set the font in pixels, Internet Explorer 6 will not allow visitors to resize the text on your page to their needs. This is why we created a style sheet that resets the font of your browser to a readable minimum (again based on user testing) and has a percentage scale for you to use that relates directly to pixel sizes.

CSS layouts

Layout in HTML should not be done with tables or presentational markup but with CSS. The problem there is that browsers support the techniques we need to use to make them display our layouts in different ways. A lot of hacking has to be done to create a layout that works across the board. This is why we defined a grid structure for our sites and a style sheet that works. All we need to do now is add the right IDs and classes to a few DIV elements and we have a working layout. If you are really lazy, we even have a CSS grids builder tool for you. The CSS is hosted by us on a distributed network of servers and gets delivered to your visitors from a server near them which is great for performance. You can however host the CSS yourself, too.

Specialised solutions

The JavaScript part of the YUI is not a catch-all solution for all development tasks you’ll ever have to tackle but instead is cut up into smaller components that all do one thing and do it very well. That way you can mix and match the library components to the need of your solution and keep the footprint low.

Widgets

On top of the YUI components we built widgets that relate to the design patterns. These are the things you see on Yahoo’s pages – sliders, tabs, menus, rich text editors and the like. We even have a showcase where we proved that you can rebuild the interface of Yahoo mail by using these free and open source building blocks.

Skinning

The look and feel of all of these widgets can be changed by changing a style sheet. This is very important. You should never have to alter JavaScript simply to make a tab a different colour.

Working widgets

This is an example of one of the widgets – the autocomplete control. As you can see the widget is built to solve a pattern we found in the pattern design library and using our logger control gives you full information about what is happening to it at every step of the process of using it.

Progressive enhancement

Our widgets are built to work and to give a smoother experience only when and if the browser supports it. This means an autocomplete control will be a text box when JavaScript is turned off. A data grid or complex sortable and styled table will be a simple, accessible data table when JavaScript is turned off. That way you build working solutions for every user and you don’t promise functionality that isn’t delivered. Users trust you, if you don’t hold your promises you will lose them.

Event driven architecture

All of the widgets are built with custom events and if you want to enhance their functionality or override it you can do that at any point of the interaction journey by subscribing to the custom events that get fired. This allows you to build solutions that need to do something extra for you without compromising the underlying code. You should never change the library code as that stops you from being able to upgrade the library to a never version.

The logger control

One of the most annoying things in web development is that not every browser gives you good debugging tools. The Logger control works around that issue by providing you with a debugging console that works across all the browsers we support.

The profiler

If you wonder why your JavaScript is using up a lot of memory and slows the computer down you can use the YUI profiler to analyze what is going on inside your JavaScript and fix bottlenecks that way.

3) Documentation

Both the YUI and all of our APIs come with extensive documentation written by a professional team of tech writers.

Online and offline docs

The APIs come with a quick “get started” guide and a full documentation – in many cases even available offline as a PDF version.

Step by step introduction and examples

The full documentation comes in easy to digest chunks guiding you where you need to go to find exactly the right kind of information.To get you a quick start there are copy and paste examples of demo code.

Code generated documentation

In addition to this the YUI also has a JavaDoc style documentation which is generated from comments in the source code. This means it will always be up-to-date even if there are quick fixes in the code. The tool to create the documentation from JavaScript code is also available.

Cheatsheets

Another nice service the YUI has is a zip of PDF cheatsheets for all the different widgets. These are A4 sheets with all the necessary information to get you started and find out how to quickly change an implementation of a certain widgets.

Forums, lists, blogs and videos

If you are still stuck or are just not a person receptive to code or text there’s the YDN theater with lots of videos of presentations, screencasts and demos. There are forums, mailings lists and other forms of communication with the teams available in the communities section

4) Things to impress your Boss with

One of the things I am always trying to make sure is that you can go to work tomorrow and tell your boss about some things you can use to save the company money and time or just impress him/her. So here are some ideas.

Build an own search engine with BOSS

Yahoo BOSS is an API that gives you access to the search index of Yahoo. You can display results from Yahoo, re-order and display like you want and mix the results with other data. That way you can easily build a vertical search engine. Furthermore the data includes information not displayed in the normal Yahoo search results like microformats, RDF information, delicious tags and keywords.

Research keywords for your market

Using the keywords in the BOSS data I was able to quickly build Keywordfinder. What it does is searching Yahoo for a keyword you enter, return the 20 first results, get the keywords users entered to find these sites, rank them for you and give them back in order of relevance. You can use this to see what terms you should have in your titles, headings and copy to get more search engine love.

Create a performance report and recommendations for your site

YSlow is a Firefox extension that automatically tests web sites against the best practices Yahoo found in the exceptional performance section. You can easily find the issues and get inline tips how to fix them. One really impressive part is smushit, which optimizes all your images as a batch and allows you to download them as a zip to replace the original ones.

YQL to remix the web

YQL and especially the YQL console is a terribly easy way for you to access APIs of Yahoo and third parties without knowing much about their authentication, parameter structure or return data. By using YQL remixing the web is as easy as accessing a database. For more detail, check out this presentation on YQL

How about a YQL demo?

This web site about Barcelona does not contain any content on the server but pulls all of the data from third party locations – Wikipedia, Flickr, Upcoming.org and Yahoo weather. The layout was done using the YUI grids builder and the following is all the code that is needed for it to be what it is:

PHP:


$root = ‘http://query.yahooapis.com/v1/public/yql?q=’;
$city = ‘Barcelona’;
$loc = ‘Barcelona’;
$yql = ‘select * from html where url = ‘http://en.wikipedia.org/wiki/’.$city.’’ and xpath=”//div[@id=’bodyContent’]/p” limit 3’;
$url = $root . urlencode($yql) . ‘&format=xml’;
$info = getstuff($url);
$info = preg_replace(“/.*|.*/”,’‘,$info);
$info = preg_replace(“/ ” encoding=”UTF-8”?>/”,’‘,$info);
$info = preg_replace(“//”,’‘,$info);
$info = preg_replace(“/”/wiki/”,’”http://en.wikipedia.org/wiki’,$info);

$yql = ‘select * from upcoming.events.bestinplace(5) where woeid in ‘.
‘(select woeid from geo.places where text=”’.$loc.’”)’.
’ | unique(field=”description”)’;
$url = $root . urlencode($yql) . ‘&format=json’;
$events = getstuff($url);
$events = json_decode($events);
foreach($events->query->results->event as $e){
$evHTML.=’

  • urls->url->content.’”>”’.<br $s->title.’” src=”’.$src.’”>

  • ‘;
    }

    $yql=’select description from rss where ‘.
    ’ url=”http://weather.yahooapis.com/forecastrss?p=SPXX0015&u=c”’;
    $url = $root . urlencode($yql) . ‘&format=json’;
    $weather = getstuff($url);
    $weather = json_decode($weather);
    $weHTML = $weather->query->results->item->description;

    function getstuff($url){
    $curl_handle = curl_init();
    curl_setopt($curl_handle, CURLOPT_URL, $url);
    curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
    curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
    $buffer = curl_exec($curl_handle);
    curl_close($curl_handle);
    if (empty($buffer)){
    return ‘Error retrieving data, please try later.’;
    } else {
    return $buffer;
    }

    }?>

    Doing multiple searches with a single HTTP request

    Another powerful option YQL gives you is to collate multiple API calls into a single request. Say for example you want to search the web for “vicky, cristina, Barcelona” and also for each of the terms on their own. This can be easily done with YQL in a single statement:

    select * from search.web where query in
    (‘vicky’,’cristina’,’barcelona’,’vicky cristina barcelona’)

    The result can be seen here and this is the PHP code that creates this demo:

    
    $root = ‘http://query.yahooapis.com/v1/public/yql?q=’;
    $yql=”select * from search.web where query in (‘vicky’,’cristina’,’barcelona’,’vicky cristina barcelona’)”;
    $url = $root . urlencode($yql) . ‘&format=json’;
    $search = getstuff($url);
    $search = json_decode($search);
    $search = $search->query->results;
    $vHTML = ‘’;
    $bHTML = ‘’;
    $vHTML = ‘’;
    $aHTML = ‘’;
    foreach($search->result as $i){
    $tmpl = ‘
  • clickurl.
    ‘”>‘.$i->dispurl.’
    )

  • ‘;
    if(preg_match(‘/vicky/i’,$i->abstract) &&
    !preg_match(‘/cristina/i’,$i->abstract) &&
    !preg_match(‘/barcelona/i’,$i->abstract)){
    $v[]=$tmpl;
    };
    if(preg_match(‘/cristina/i’,$i->abstract) &&
    !preg_match(‘/vicky/i’,$i->abstract) &&
    !preg_match(‘/barcelona/i’,$i->abstract)){
    $c[]=$tmpl;
    };
    if(!preg_match(‘/vicky/i’,$i->abstract) &&
    !preg_match(‘/cristina/i’,$i->abstract) &&
    preg_match(‘/barcelona/i’,$i->abstract)){
    $b[]=$tmpl;
    };
    if(preg_match(‘/vicky/i’,$i->abstract) &&
    preg_match(‘/cristina/i’,$i->abstract) &&
    preg_match(‘/barcelona/i’,$i->abstract)){
    $aHTML.= $tmpl;
    };
    $vHTML = @join(’ ‘,array_slice($v,0,3));
    $bHTML = @join(’ ‘,array_slice($b,0,3));
    $cHTML = @join(’ ‘,array_slice($c,0,3));

    }
    function getstuff($url){
    $curl_handle = curl_init();
    curl_setopt($curl_handle, CURLOPT_URL, $url);
    curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
    curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
    $buffer = curl_exec($curl_handle);
    curl_close($curl_handle);
    if (empty($buffer)){
    return ‘Error retrieving data, please try later.’;
    } else {
    return $buffer;
    }

    }?>

    You can also do the whole thing in JavaScript:


    5) Partnering

    The really interesting thing is that all of this is open for you to add your own data to. Using a simple XML document called an open table you can make your information available in YQL for other developers.

    You can host this XML file yourself if you don’t want the whole world to know yet. For example this open table can be used in a statement like this:

    use ‘http://eatyourgreens.org.uk/yql/nmm-search.xml’ as nmm;
    select * from nmm where category = ‘art’ and
    searchterm = ‘”tower bridge”’

    This gives developers access to all the information about the objects in the National Maritime Museum in London!

    If you want your open table to show up in the console via our team (we do review them for security and quality) all you need to do is add the table to github.