Some info

Some students have been encountering problems with using youtube and twitter feeds in Yahoo Pipes. Unpredictably, sometimes pipes using yahoo and twitter will fail. This is due to the fact that youtube and twitter have limits on how frequently a single source can send them requests, so ocassionally yahoo pipes will exceed those limits and the pipes will not work for a small period of time.

This ia fault of yahoo/twitter/youtube so if you are encountering the problem of a twitter or youtube based pipe infrequently failing, you will not be marked down for it. However a few students are becoming frustrated when testing their sites and wanted to know how to work around this, so if you feel like you want to improve the reliability of your mashup because you’d like it to be public and always usable, or because you’re a perfectionist, read on –

Making your Youtube pipe more reliable

You can apply for your own youtube API key. Youtube blocks yahoo pipes from making too many requests, so if you can identify yourself as a unique non-yahoo pipes entity it will be less likely that your pipe will fail.

Info here: http://apiblog.youtube.com/2010/02/best-practices-for-avoiding-quota.html (Click ‘developer key,’ it will take you to the google code page that should let you sign up for a key)

This is what adding a developer key to your youtube search URL looks like: https://developers.google.com/youtube/2.0/developers_guide_protocol#Developer_Key

Reading a Twitter feed with php – bypassing yahoo pipes

If you’re fed up with your twitter feed not working in Yahoo Pipes you can always bypass pipes altogether and read your twitter feed straight into your page. Of course, this means you can only use one feed, so if you want to aggregate a lot of feeds together, stick to pipes.

This would look something like this:


    $feed = file_get_contents('http://search.twitter.com/search.rss?q=searchterm');

    $tweets = simplexml_load_string($feed);

    foreach($tweets->channel->item as $tweet) {
        $title = $tweet->title;
        echo $title .     
    }

Week 9: Mapping

Yahoo pipes offers easy mapping

Using the location extractor module.

This module searches for location related properties inside your RSS feed, like lat, long, country, street, etc. If it finds them, it uses the information inside them to append a location variable to your feed. Using this it then outputs your pipe results on a map. Easy! You can then place this on your page with a pipe badge and voila, you get your results mapped with absolutely minimal coding.

Example using the rss feed from menufeast.com, which contains location information –

http://pipes.yahoo.com/pipes/pipe.info?_id=ed9db1aaba817a18ce4c30e3979fc231

Use this if you are getting results from a Yahoo pipe and then want to map those results straight onto a map.

If you want to do something different to that, google maps and google places offer APIs for you to use.

Google maps and places

To implement google maps, you use javascript.

The google maps allows you to build a map, set its properties, and place it on your page within a div. From here you can do all sorts of things with it.

You can search google places for certain types of things. All of the things you can search for are here –
https://developers.google.com/maps/documentation/places/supported_types

This is handy if you want to search for all local cafes, all local night clubs, etc.
You can easily map these places results onto your google map.

We are basing today’s tut off of this example. Basic google maps place search – http://gis.yohman.com/up206b/4-4/

Completed example

Automatically finding our current location – geolocation

You can find the user’s current location and they search around that particular spot. In the first example this spot by default, is the middle of Santa Monica.

http://aiminstitute.org/blog/2010/07/basic-geolocation-in-html5/

In this example, the success function sets up the map. So to add it to our previous example, we have to turn the initialise function into a success function and include the geolocation code.

Working example with geolocation

Some additional resources:
More Google Maps resources:

Also:

Google alerts http://www.google.com/alerts

Some of you mentioned ‘google’ as a potential data source. Consider this. You can get a google search as a feed. Simply set up your search, and choose ‘Deliver to feed.’ Then press the RSS icon to get the RSS feed of your search. This can get you a feed of regular search results, news, blog entries, videos etc which you can use in a yahoo pipe or what have you.

Notes:

If you use both PHP and javascript inside one file, it must be a .php file. The blocks of PHP code shouldn’t contain javascript, and the blocks of javascript code shouldn’t contain PHP. Remember to keep jQuery code inside a document ready function.

Remember you can use existing pipes other people have already made! Why make more work for yourself? You can also copy pipes and make slight changes.

Week 7 – Javascript and JQuery

Javascript

Javascript is a programming language, just like PHP. It is often used to create reactive websites with animations, effects, moving parts, and things like that.

Variables and functions are both used in javascript, just like in PHP.

Here is an example of the exact same thing being done in PHP, then Javascript, so you can see the difference:

<?php

//save my name and print it

$name = “Cassie”;

echo $name;

?>

<script type=”text/javascript”>

//save my name and print it

var name = “Cassie”;

document.write(name);

</script>

As you can see the same basic principles apply to javascript (functions, variables, etc, all exist, and are used in the same way) but the syntax, the way the code is written, is slightly different.

You can use both Javascript and PHP in one file, if you want to combine examples in your mashup. You can also use just Javascript and jQuery to read information without PHP – do whichever you find the most straightforward, or use both, in your own mashup. Base your work off of whichever examples are closest to your needs.

jQuery

jQuery is a javascript libarary that you can download and use. What that means is that jQuery is a file that contains a lot of already-written javascript, all enclosed inside a number of functions. You can use these functions to do all sorts of things that would be tricky or time consuming to do on your own.

To use it jQuery you just need to include the jQuery file in your page. Do that like this –

          <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js“></script>

From then on you can use jQuery functionality inside your javascript code. (If you copy and paste this directly you may have to retype the “s, WordPress does funny things to quotations marks)

jQuery can access elements inside the html of your page based on their class, id, or just type (eg, it could access all the p tags, all the p tags with class “quote”, etc.) After you have selected what item you wish to access, you type a “.” then the function you wish to apply to it. This looks like this:

$(this).hide() – hides current element.

$(“p”).hide() – hides all paragraphs.

$(“p.test”).hide() – hides all paragraphs with.

$(“#test”).hide() – hides the element with id=”test”.

What you’re doing is selecting an element (this is called a document selector) and applying a function to it (these are functions that are built into jQuery). You can find the details of all these functions in the JQuery documentation. hide() is just one example.

jQuery code should go inside a document ready function. This means the jQuery code executes once the page is ready, once every element on it has loaded. If you try to access an element before the entire page is loaded, it can fail and cause problems, which is why we use this function. You can put jQuery code in separate code blocks throughout your html, like with php and javascript, but it is best practice to keep it inside a document ready function. Even though all your jQuery code should go inside this one block, you can still use it to add and change content on your page in any place, by using document selectors to make changes to specific parts of your document. Keeping all your code in the one place also makes it easier to write your html code and read it later without confusing code in the way.

Follow along, here is the complete example code: Basic jQuery Fun (comment out and uncomment various lines of code to see what they all do. There’s a lot more than just this if you check the jQuery documentation for ideas.)

Interactive mashup stuff with jQuery and Ajax – YouTunes

You can use jQuery to get added interactivity quite easily. This example takes us through reading a pipe with javascript and jQuery, allowing the user to select from a drop down list. Ajax is another technology that jQuery is making use of here – don’t worry too much about the specifics, because jQuery handles that all for you!

Pipe: http://pipes.yahoo.com/pipes/pipe.edit?_id=34067198a12660aecbb80cffe8be02d3 

YouTunes example

jQuery plugins

People have made a number of jQuery plugins. These are more pieces of Javascript people have written based on stuff inside jQuery. There tends to be things like gallerys, etc, which you can use for yourself quite easily. Here are some examples:

Javascript resources: 

jQuery resources:

Loads of plugins –

Reminder

Don’t overcomplicate your own mashups, wherever you can just base your work of the examples we’ve showed you. If you’re doing something beyond what we’ve showed you, make sure you do your own research and thoroughly analyse exactly what kind of work you have to do and whether it’s feasable within the time constraints of this unit. We’d prefer an elegant and functional mashup that actually works over an extremely complex mashup idea that does not work. Focus on creating a good user experience and working within the constraints of what data is available.

If you have problems or are unsure how to proceed with your mashups, don’t hesitate to email me – there’s nothing worse than marking an assignment and finding out someone got stuck on a problem I could have helped them solve if they just told me about it! My email address is on the blackboard contact page.

Things some of you might find useful:

Week 6 – Feeds and PHP

Before the end of this week, double check these things:

  • Your tumblr URL was correctly submitted to the discussion board
  • Your name is somewhere clearly visible on your tumblr (eg in your description on the side of you page)
  • Your two posters AND all the research, discussion, and expanded content that lead up to your posters are all there on your tumblr
  • If you uploaded a pdf of your poster to your Dropbox, check that you uploaded it in your public Dropbox folder. If it’s not in the public folder, I can’t see it. Please double check your link while on one of the QUT computers, or any computer not associated with your Dropbox account – if you can’t download it then, neither can I.

Wireframing

Wireframing is extremely important – jump straight into a page design with no plan, and you tend to get hung up on the details. Wireframing lets you explore the basic structure, information organisation, and navigation of your page without clutter. Use pencil and paper and go for it.

Here are the ‘five commandments of wireframing’ I found – http://boagworld.com/design/wireframing-rules/

  • Thou shall not neglect to wireframe
  • Thou shall not wireframe alone (Not so important now, but in future when you’re on big projects, this is definitely appropriate)
  • Thou shall not be afraid
  • Thou shall start with pen and paper
  • Thou shall test thy wireframes

Parsing Yahoo Pipes Feeds with PHP

Much of the code for these examples will be repeated for each example, so I have provided you with a template to use a starting point.  Download it from here and extract the files to your web server.

Example 1: One Flickr pipe, one page, with a predefined search.

Example 3: Adding user input to a flickr search. View it here.

Example 2: Multiple pipes on the same page. View it here.

Further examples:

Some tips on getting RSS feeds to use:

Google  – http://www.readwriteweb.com/archives/how_to_use_the_new_google_web_feeds.php

Twitter search – http://www.dizzysoft.com/twitter/get-rss-feeds-from-twitter-search/

Page2RSS – http://page2rss.com/

Dave’s Screencasts

Dave has been uploading screencasts of his tutorials to youtube, so if you miss a tutorial or want a refresher, or just want to hear someone other than me explaning things head to his youtube channel – http://www.youtube.com/user/davidmichaelwallace

After Easter – 

  • Javascript and JQuery

To do:

Work on your mashups! Keep wireframing, testing, and figuring out what works.

Practice with PHP and Yahoo Pipes

The sooner you start working on the technical end, the more time I’ll have to help you with technical problems!