Click here to view the embedded video.

Click here to view the embedded video.

Refer here for the full tutorial: net.tutsplus.com The process of creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.

This experience has been optimised for Google Chrome and is a great example of how powerful HTML5 is, even at this fairly early stage in the implementation of the new standards.

Some of the clever techniques used here include:

• HTML5 Canvas 3D engine renders a flocking bird simulation that reacts to the music and mouse.
• HTML5 audio plays music and keeps track of timecode.
• HTML5 video plays film clips in custom sizes.
• Choreographed windows are triggered by the music and placed relative to screen size.
• Images extracted from Google Maps and Street View rendered as scripted 3D views.
• Animated elements dynamically composited over Street View

Fire up Chrome and see for yourself at http://www.thewildernessdowntown.com/ or watch the video below, though that’s not as much fun as entering your home town and seeing familiar locations incorporated into the video.

Click here to view the embedded video.

The upshot is that the site has been almost completely rebuilt in a little over a week and I’m finding more an more to like about this system. Take a look at this introductory video showing how simple the editing interface is.

Click here to view the embedded video.

I’m all for a system which makes life easier for end-users (fewer exasperated support calls, less training etc.) but Concrete5 does something which many other systems fail to do. There is very little back-end development experience needed in order to build themes for the system, though the solid MVC framework which underlies the software does give developers plenty of scope to play.

The following video demonstrates how quickly a static HTML page can be converted into a Concrete5 theme.

Click here to view the embedded video.

For me, the real value of this system is in the way it removes bottlenecks from the production process. The back-end developers can concentrate on adding bespoke functionality, rather than bespoking standard functionality. The front-end devs can build the front-end and the content suppliers can concentrate on populating content.

This is the best tool that I’ve added to my web-building kit since WordPress.

The site features a list of items which include thumbnail images. When hovering the mouse pointer over the thumbnail, a larger version of the image is displayed – tooltip style. The problem is that the larger version of the image overlaps the preceding and following list item. In IE 6 & 7 the following list item displays on top of the large image, despite it having been given a higher z-index in the CSS file.

Intended Effect

IE Bug

This bug is caused by the fact that the list items have relative positioning (in order to position the elements within each item). IE resets the z-index stack for elements within positioned elements.

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly. quirksmode.org

The way to solve this is to ensure that the positioned parent element (the list item) has a higher z-index than the positioned elements to be overlapped – in this case, the other items in the list.

My solution here was thanks to the fact that the site was using jQuery, I was able to implement a very simple piece of code to dynamically alter the z-index values of the items in the list.

$('#list a.thumb').mouseover(function(){
  $(this).parent('li').css('z-index', 2).siblings('li').css('z-index',1);
});

I’ll break this down as jQuery’s function chaining enables very tight but occasionally difficult-to-read code.

Firstly I bind a function to the mouseover event of the thumbnail image

$('#list a.thumb').mouseover(function(){
  ...
});

next comes the clever bit, jQuery includes a powerful set of DOM traveresal methods which allow you to dance around the document like a scripty Rudolph Nureyev without the need for messy classes and id’s on every other element.

   $(this) //selects the anchor tag over which the mouse has moved
    .parent('li') //traverse to the anchor's parent li element
    .css('z-index', 2) //set the z-index to 2 on the li
    .siblings('li') // selects the sibling li elements (not including the one we just changed)
    .css('z-index',1); //sets the z-index to 1 on all of the sibling li elements

By inserting the code into a $(document).ready function the behaviour is applied as soon as the page has loaded.

I had a requirement to implement linked images in a page with a separate rollover image. Normally I’d be using CSS to switch backgrounds but the client wanted the normal image to be visible when the page was printed out. I didn’t want to have to add in javascript, regardless of how simple it would be so I came up with this idea.

The HTML

I’ve used a simple image (<img>) tag contained inside an anchor (<a>) tag to create the link, this ensures that the image will be printed for most default setups.
The anchor tag has a class assigned to be the hook for the rollover and I’ve used an inline style attribute to set the background image of the element to the rollover image. This could also be done by adding a specific class in the stylesheet – but not in this demo.

<a href="#" class="rollover" style="background-image:url(rollover.png);">
 <img src="normal.png" />
</a>

The CSS

I’ve set the display property for the anchor tag to inline-block so that it will sit within the page flow as normal, but takes on the width and height of the image contained inside it.
when the mouse pointer is over the anchor, the visibility property of the contained image is set to hidden, uncovering the the anchor tag with it’s background image.

.rollover{
    display:inline-block;
}
.rollover:hover img{
    visibility:hidden;
}

Example

I’ve tested this on a bunch of browsers – it doesn’t work in IE6 but then, it doesn’t work in Netscape, Mosaic or Lynx either, so go figure.

1. jQuery Multimedia Portfolio -Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player.
2. Pagination- Create navigational elements, when you have a a large list of items you can display them grouped in pages and present navigational elements to move from one page to another.
3. Ingrid - ngrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
4. jWYSIWYG - This plugin is an inline content editor to allow editing rich HTML content on the fly.
5. jTruncate in Action - jTruncate provides simple yet customizable truncation for text entities in your web page.
6. Drop Shadows - Interesting Drop shadow effect generated by a jQuery Plugin
7. jQuery: CSV to Table – This plugin loads a csv file and creates a table with the contents in that csv file.
8. jGrowl – a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.
9. Colorize – a jQuery plugin to add background color to alternate table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows as you want. A repeat mouse click reverts the row to the original background color.
10. jqGrid – The grid is a Ajax-enabled JavaScript control that provides solution for representing tabular data on the web. Since the grid is client-side solution and loading data dynamically through Ajax callbacks, it can be integrated with any server side technology.
11. jQuery Feed Menu - allows users to click your feed icon and be presented with a list of feeds to choose from.
12. jqChart - Ajax & Draggable Simple Chart on Canvas+jQuery.
13. jquery.biggerlink - A jQuery plugin to make it really easy to enable the specified element/s to behave as a proxy for their first contained link.
14. Ajax Manager -Helps you to manage AJAX requests and responses (i.e. abort requests, block requests, order responses).
15. Lazyload-Delays loading of images in (long) web pages. Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed.
16. jQuery Tag Suggestion- The same tag suggesting as-you-type support that del.icio.us is uses.
17. Jcrop – a quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

1. Firebug is an essential for testing and tweaking CSS designs, the ability to manipulate the rendered DOM, means that you can even test tweaks to script-generated markup.
2. Another FireFox add-on, the Web Developer Toolbar extension does many of the things that Firebug does but adds a few other little treats to the mix such as the ability to quickly deactivate stylesheets or background images for instance.
3. Vertical rhythm calculator This tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings, depending on the line height you’ve defined. available in the browser or as a downloadable Air application.
4. PSD2CSS Online An online service that generates Web pages from Photoshop designs. This is an impressive technical achievement with a growing list of features. By following the guidelines and naming conventions, you can precisely choose how the transformation from PSD to (X)HTML and CSS is done.
5. CSS Redundancy Checker You can use this tool to find CSS selectors that aren’t used by any of your HTML files, handy for trimmimg bloated files down to size.
6. CSS Text Wrapper make HTML text wrap in shapes other than just a rectangle. Great for creating stylish, magazine-type layouts.
7. CSS Sprite Generator This tool will convert a number of images into a single image and generate the CSS to create CSS sprites – elemnets which display only a part of a larger image. The benefit is that a single image download can reduce page load times.
8. MinifyMe This AIR application will compile multiple CSS and JavaScript files into one for optimising your site delivery.
9. CSS SuperScrub This tool aims to reduce the size and complexity of your CSS by stripping unneeded content, redundant items and intelligently grouping the remaining element names.
10. typeface.js This interesting development takes a different approach to rendering custom fonts in web pages. Rather than replacing the text with an image or Flash object, it uses the vector rendering capabilities of the browser to “draw” a specially converted version of the font.
11. Kotatsu A simple HTML table generator. The tool lets you attach classes to cells which is very useful for styling up tabular data.
12. Juicy Studio: CSS Analyser Juicy Studio’s CSS Analyser combines the W3C validation service with additional checks of color contrast (helpful for vision-impairment accessibility issues).
13. FormatCSS allows you to paste your valid CSS code, correcting and standardizing your source code.

Hat tip to Smashing Magazine for helping me find most of these.

Yahoo Pipes

Pipes is one of the most popular tools for creating simple mashups, possibly due to it’s reasonably intuitive interface. I used it recently for an experiment in trying to find appropriate images to illustrate a twitter feed.

Zembly

Zembly from Sun Microsystems is a slightly more technical mashup builder. Like Yahoo’s pipes, it allows you to publish components and use components published by others, however it’s end delivery is far better defined. Zembly is geared towards creating apps for various platforms such as Facebook apps, Meebo apps, OpenSocial apps, iPhone apps, Google Gadgets, embeddable widgets, and other social applications. It does require a reasonable knowledge of javascript and HTML in order to build anything, but offers a wealth of powerful functionality.

Dapper

Dapper provides a specific but vital service in mashup building. A service for extracting information from the web in a re-usable form. This could be as simple as creating an RSS feed from a site to building an API for working with published data.

Microsoft Popfly

Popfly is Microsoft’s mashup builder, it’s nicest feature is the way that components can be plonked together in a purely drag & drop kind of way, or you can drill deeper and add code to implement more complex functionality.

WSO₂ Mashup Server

WSO₂ Mashup Server provides a more heavyweight platform for building mashups. It has facilities for creating secure APIs for existing datasources in addition to being able to consume external services and data sources. This is much more of an Enterprise-level offering.

Google Mashup Editor

Google Mashup Editor is a framework for building mashups using Google’s extensive collection of APIs. The end results usually rely on users signing in with their Google account but for creating gadgets for iGoogle, it’s a good option to try.

Thanks have to go to Dion Hinchcliffe for helping me research these.

Creating syndication feeds

If you are interested in creating syndication feeds for your own site, there are plenty of tools available; these will attempt to generate a feed automatically by reading the pages on your site:

• http://feedity.com/
• http://www.dapper.net/
• http://www.rsspect.com/
• http://runstream.com/

If this doesn’t work (or doesn’t do everything that you want) then you could manually create a feed using one of the following:

• http://webrss.com/
• http://www.rapidfeeds.com/
• http://www.feedforall.com – this is a desktop application which can upload the updated rss file to your website

Once you’ve created a feed, I would recommend using http://www.feedburner.com to re-syndicate it, you get good analytics to monitor the usage of your feed and feedburner provides plenty of tools for optimising and publicising the feed (including the ability for people to subscribe by email).

Importing feed content into your own site

The most common way to do this is using what’s generally referred to as a widget – a piece of code which dynamically generates a section of content on your page. Here are some of the best widget creation tools:

• http://sproutbuilder.com/
• http://www.clearspring.com/
• http://www.springwidgets.com/
• also, specifically for displaying a feed, you could try: http://www.feedroll.com/

I may post a more comprehensive list at some point soon so if anybody has any suggestions or recommendations then please let me know in the comments.

Step 1 – Fetching the Twitter data

Rather than just getting a static twitter feed, I thought it would be more useful to pass the Twitter username as an input parameter to the pipe. A quick glance at the Twitter API gave me everything I needed to know about retrieving a data stream for any username. I could have settled for using the RSS feed for the user but in order to also grab some data about the user I opted for getting the xml output. The url for this is http://twitter.com/statuses/user_timeline/[username].xml. 

To get the feed, I used a Text Input module to make the Twitter username a parameter that can be passed into the pipe. I used the String Builder module to add the username into the url string and then the URL Builder to convert the string into a URL object. Finally the Fetch Data module gets the data returned from the url. 

Step 2 – Getting an appropriate image

To get an image from flickr for each tweet, I used a series of loops. Firstly, for each tweet in the feed, I used the Term Extractor module to get the important keywords from the text, outputting them as a single string. The next loop takes each extracted terms string and replaced any spaces with ” OR ” to use as the search string e.g. “tree leaf” would be transformed into “tree OR leaf”.
The final loop uses the search string to get one image from Flickr and emit it as an additional element in the returned data stream.

View or copy the completed pipe here.

Step 3 – Fetching the data

jQuery is a good choice here as Pipes allows any pipe to return a JSON string and jQuery includes getJSON as an Ajax method.

I started with basic HTML to get the Twitter username and an empty div in which the results will be displayed:

<div id="input">
  <label for="Username">Twitter Username</label>
  <input id="Username" type="text" value="darthvader" />
  <input id="Load" type="button" value="Glorify the tweets" onclick="GrabTweets()" /></div>
<div id="feed"></div>

After adding the script tag to load the jQuery library I could add the javascript to grab the json output for the pipe. Pipes accepts parameters as a url parameter so in this case I needed to load: http://pipes.yahoo.com/pipes/pipe.run?TwitterUser=TwitterUsername&_id=c5b92f96787d9bcce54fd4ec19d21cc2&_render=json&_callback=?
The resulting script looks a little like this:

function GrabTweets(){
  var TUser = $('#Username').val(); //get the value of the username input
  $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?TwitterUser=' + TUser + '&_id=c5b92f96787d9bcce54fd4ec19d21cc2&_render=json&_callback=?',
    function(json){
//callback function to display the data here
    }
);
}

Step 4 – Presenting the data

I added a callback function for the getJSON call which sends the result to output_feed_items which loops through the first five items in the feed.

function GrabTweets(){
 var TUser = $('#Username').val();
 $("#feed").html('');
 var content = "";
 $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?TwitterUser=' + TUser + '&_id=c5b92f96787d9bcce54fd4ec19d21cc2&_render=json&_callback=?',
 function(json){
 if(json.count > 0) {
 content = output_feed_items(json);
 } else {
 content = "The request did not return results.";
 }
 $("#feed").html(content);
 });
}

function output_feed_items(json) {
 var itemList = "";
 for (i=0;i<5;i++) {
 itemList += make_feed_desc(json.value.items[i], i);
 }
 return itemList;
}

The make_feed_desc function outputs the HTML for each item in the JSON feed. I’ve added classes to the elements to use as hooks for the CSS but to add the individual images returned from Flickr, I added an inline style declaration.

function make_feed_desc(item, item_id) {
 var itemElement = '';
 var bgimage = item.flickr['y:flickr'].img.replace('_m.jpg','.jpg');
 itemElement += '
<div id="item-' + item_id + '" class="item" style="background-image:url(' + bgimage + ')">';
 itemElement += '
<div class="talk">';
 itemElement += item.text + '</div>
';
 itemElement += '<a title="' + item.user.name + ' - ' + item.user.description + '" href="http://twitter.com/' + item.user.screen_name + '"><img class="profilepic" src="' + item.user.profile_image_url + '" alt="' + item.user.screen_name + ' / ' + item.user.name + '" /></a>';
 itemElement += '<a class="photocredit" title="' + item.flickr.title + '" href="' + item.flickr['y:flickr'].link + '">' + item.flickr['y:flickr'].link + '</a>';
 itemElement += '</div>
';
 return itemElement;
}

Finally I added a smattering of CSS to make the whole thing a little more presentable.

The Result

Live example here
download source

I may try to improve on this by building a Flickr search based on relevance to the keywords rather than the default module which is based on Flickr’s “interestingness” as the images returned, though very nice, often seem a little too removed from the subject of the tweet. Feel free to do whatever you like with the pipe or code, please drop me a line if you find it useful for anything.