Devit!

Adding a diagonal ribbon to a thumbnail is easy with PHP and GD. You may be able to accomplish this task with CSS3, but the result can be a little buggy (strange wiggles on mousover), and it currently is not consistent across browsers. You can create dynamic images in PHP using GD functionality.

The Ribbon Base Image

The ribbon base image that I use is not a transparent PNG – rather, behind the red banner I have a pink background. In PHP we will tell GD to interpret pink as transparent so that our edges are smooth. Feel free to use this image for your own purposes.

Using GD to Add Text

This file will take the base image and place white text over it. Now we can treat this file as an image, and include it in our CSS or image tags. Note that this file refers to arial.ttf – this font file (or whatever TTF font file you decide to use) must be in the same directory as ribbon.php. You can find arial.ttf in your computer’s fonts directory.

Usage

The important part here is the background-image. Notice how the text we want is in the query string of ribbon.php.

Styling and Position

This will place the ribbon in the lower right corner, above the image.

Questions, comments or optimizations? Let us know in the comments.

I recently had the opportunity to make use of CSS3 transformations to achieve a 3D effect in a practical application.

If you’re a web developer reading this, you know that something like this doesn’t happen every day, and is therefore very exciting!

The main requirement for the project was to display a 3D isometric floorplan of the Convergence Centre at Western University in London Ontario, with tweeps showing up in the room they are tweeting from.

Each room is a <div class=”users”> that can contain <div class=”avatar”> as many times as needed. Transparent GIF’s are used as background images for the character’s body, head, torso and legs.

<div id="bar" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>
<div id="maple" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>

For development purposes, we put a thick red border around the rooms.
As we add more avatars to a room, we’ll adjust their margins so that characters squeeze closer together and the room will not overflow.
Avatars are floated right so they stack nicely – closer ones will overlap farther avatars.

.users {
	border: 4px dashed red;
	position: absolute;
}
.users .avatar {
	height: 44px;
	width: 33px;
	float: right;
	margin: 17px;
	position: relative;
}
.head, .torso, .legs {
	position: absolute;
	top: 0;
	left: 0;
	height: 44px;
	width: 33px;
}

Adding CSS3 transformations, we can skew the room divs to match the shape of the rooms in the background image.
The side-effect of this is that the avatars inside will also be skewed.
The CSS below will affect Mozilla and Webkit-based browsers only.

.users {
	border: 4px dashed red;
	position: absolute;
	-moz-transform: skewX(45deg) skewY(-12deg);
	-webkit-transform: skewX(45deg) skewY(-12deg);
}

Now we have to put an opposite skew on the avatars to cancel out the room skew.

.users .avatar {
	-moz-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
	-webkit-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
}

All that’s left is to remove the red border around the rooms!

If you have any questions or comments about using CSS3 to achieve a 3D effect, or if you want to show off your own 3D CSS3 project, we’d love to hear from you!

Ewoks was the codename of our Twitter display at last Saturday’s Podcamp London. The purpose of the application was to provide a fun interface to view tweets that pertained to the event throughout the day. The application provided event attendees with useful information and a new way to interact with others.

Features

• 3D isometric floor plan
• Current and Next session displayed for each room
• Use the Podcamp hashtag #pclo10 to have an avatar displayed in the lobby.
• Ability to “check in” to one of the session rooms by using the room name in a tweet.
• Unique avatar for each visitor.

Response

Attendees found this display to be very useful – they would see tweets of someone they know enjoying a session in one of the rooms, and they would make the decision to visit that session. Some users managed to find an “easter egg” built in – when a user uses the hash tag “#bye” their avatar would be beamed off the map with an animated laser.

Throughout the day people congregated in front of the display to check out what others were saying and what was coming up next, or to find directions.

Built on Code Igniter, the application made use of jQuery, CSS3 transformations (to achieve a 3-dimensional effect) and the Twitter Search API. Stay tuned for a more technical post on how some of the effects were achieved.

Lessons Learned

You can do amazing things with Javascript and CSS – Flash is no longer the only option for “cool”. Since this application was meant to run on a large display there was no need to worry about browser consistency which allowed for unbridled CSS3 greatness!

Seeing others interact with your work is very rewarding. Seeing large groups of people, mobile devices in hand, staring at the screen waiting for their tweet to show up or their character to blow up makes it all worthwhile.

If you have any questions or comments about Ewoks (the application, not the small furry creature indigenous to the forest moon of Endor), or if you have built your own supercool Twitter display, we’d love to hear from you!

CodeIgniter is a great little PHP framework that allows you to rapidly build MVC web applications. Without getting too far into Model View Controller ideology, this post will explain how to extend CodeIgniter’s Controller class to achieve site-wide authentication checks.

Not long after starting your fancy new webapp, you will start to realize that putting

if (!isset($_SESSION['isloggedin'])) {
  redirect('/login');
}

in every single controller function is very tedious.

You can create an extension of the Controller class and put the common code in there. Here’s how.

Create a file in /system/application/libraries called MY_Controller.php. The name of this file is important. If the prefix “MY_” doesn’t do it for you, go into /system/application/config/config.php and change

$config['subclass_prefix'] = 'MY_';

to whatever you want. Don’t change the “Controller” part though! You can also extend Models and Helpers.

Start with the following code in MY_Controller.php:

class Authenticated_Controller extends Controller {
  function Authenticated_Controller() {
    parent::Controller();
    session_start();
    if (!isset($_SESSION['isloggedin'])) {
      redirect('/login');
    }
  }
}

Go ahead and add any common controller functions to this class. Feel free to change “Authenticated_Controller” to whatever you want. You can also have multiple Controller extensions in this file.

Note: If you only have one controller extension, it is standard to name your class MY_Controller (rather than Authenticated_Controller).

Important Note: If you find yourself creating a bunch of controller extensions, take a step back and consider what you are doing. Is your extension being used by only one controller? If so, just put your code in that controller’s constructor.

Now it’s time to start using your new controller extension!

In every controller that requires authentication (don’t do this for your login controller!) rather than the traditional

class Manage extends Controller { ...

use this instead:

class Manage extends Authenticated_Controller { ...

Do you have CodeIgniter controller extensions that could be useful to others? Let us know in the comments.

Compost is an easy web-based way to grow consensus with your designs. Upload designs and allow your clients to annotate, rate and discuss. Easily revise comps based on feedback and get approval.

Compost is currently in version 0.8beta. Coming-soon features include email notifications, project searching, and an iPhone application.

Compost is free software, released under GPLv3. You have the freedom to:

• - use the software for any purpose
• - change the software to suit your needs
• - share the software with your friends and neighbours
• - share the changes you make

Getting Started

You can download the latest version of Compost here. Follow the README instructions to get Compost up and running in seconds.

If you have any suggestions or problems, be sure to drop us a line.

Compost Versus Alternatives

Compost differs from most feedback systems in that it is completely free and open source. Here is a chart that compares some popular feedback systems to Compost.

Participate

If you’re handy with PHP, jQuery and Code Igniter we encourage you to become a committer! Help us move Compost forward and give back to the open source community.

To get started, visit the project at Google Code – there you can familiarize yourself with the issues, checkout the source code and browse changes. You will need to be a member of the project to commit any changes – to become a member, send an email to gavin.blair at rtraction.com and I’ll add you as a committer.

If you’re not a coder you can still help out by testing Compost and providing feedback.

Coming Soon

Very soon Compost will have an iPhone app, drag-and-drop design ordering, and email notification options. What features would you like to see in Compost? Leave a comment below or at our feedback site.

When you post an article of any type on the web, it seems almost mandatory that you include “Tweet This!” and “Post to Facebook” links. Of course, you can get plugins that create sharing links automatically for most blog software (Sociable for Wordpress (this is what we use); Service Links for Drupal; Sexy Social Bookmark for Blogger; I could go on), and they usually cover more networks than Twitter and Facebook. However, some circumstances require a more do-it-yourself approach.

Adding “Share on Twitter” and “Post to Facebook” functionality to your web application is a snap! In this post you will learn:

• -How to prefill a tweet for your user
• -How to let your users share a link on Facebook, including page thumbnails and description
• -How to harness the power of bit.ly’s API for short URLs and click tracking

Share on Twitter

Use the following code to create a “Share on Twitter” link:

<a href="http://twitter.com/home?status=Add Sharing to Your Webapps - http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Share on Twitter</a>

Share on Twitter

That was easy! Try replacing your link text with a Twitter button:

<a href="http://twitter.com/home?status=Add Sharing to Your Webapps -http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="shareontwitter.png" alt="Share on Twitter" /></a>

Twitter can’t make it much easier than that! When the user clicks on your button, they are brought to their familiar Twitter timeline, with the next tweet prefilled for them.

Facebook Share Link

Use the following code to create a “Post to Facebook” link:

<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Post to Facebook</a>

Post to Facebook

Too easy! Now replace the text with a nifty Facebook button:

<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="posttofacebook.png" alt="Post to Facebook" /></a>

When the user clicks on your “Post to Facebook” button, a new window pops up, prompting them to share the link. The user can optionally update their Facebook status while they are at it.

What about Page Thumbnails?

That looks pretty good, but it could use a little more flair. Facebook attempts to add a thumbnail and a description to your link. Facebook scours your page for <img> tags, and uses those for thumbnail options, in the order that they appear on the page. If you want a screenshot of part of your webapp to be the first choice, you’ll have to put the following code near the top (before any other <img> tags) of your page:

<img src="screenshot.jpg" style="display: none" alt="" />

This will not be visible to users due to the inline CSS, but Facebook will pick it up.

What about Page Description?

Facebook uses the page’s meta description. Make sure the following code is present in the header of your page, between <head> and </head>:

<meta name="description" content="rtraction - Add Sharing to Your Webapps - Twitter and Facebook sharing links are a snap to build!" />

Now your Facebook share is complete with a thumbnail and description.

Shortened URLs with Bit.ly

Bit.ly’s API makes it easy to dynamically create shortened URLs. A big advantage of this is that you can make use Bit.ly’s click tracking.

You can learn how to use the Bit.ly API on your own, or use an existing library. There is a DLL file for .NET projects to use Bit.ly. This is untested by us, but the Hashbangcode Bit.ly PHP Class looks like a promising PHP solution. Let us know in the comments if you have tried this library!

If you have any other tips for creating share links, let us know in the comments.

Drupal and Wordpress are two essential tools in any web developer’s backpack. Both open source content management systems allow the developer to rapidly design and build fully functional websites, however each has its own benefits for you and your client. Here are six questions to consider when deciding which one to use for a project.

Read the rest of this entry »

We recently had the opportunity to put a cool visual technique to use: Parallax. According to Wikipedia, Parallax scrolling is a “pseudo-3D technique, [where] background images move by the ‘camera’ slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion” [Parallax Scrolling on Wikipedia].

To see the effect in action, check out 1000 Acts of Kindness.

jQuery and the plugin ScrollTo were both used, along with several transparent PNG layers. By making “close” layers scroll faster than “far away” ones, a 3D feel was introduced to the page.

How it Works

For each layer we have a <div class=”layer”> element that has the following CSS properties:

.layer {

 height: 100%;

 width: 100%;

 overflow: hidden;

 position: absolute;

 top: 0;

}

.layer div {

 width: 10000px;

}

Each layer element has a <div> inside of it that has a transparent PNG background image, a forced height (the height of the image), and a really big width (as shown in the snippet above).

If we didn’t have the “overflow: hidden” on the containers, you would see scrollbars on the bottom of the page. Using this CSS property we hide the scrollbars, and later we will use the jQuery plugin ScrollTo to automatically scroll each layer.

For each layer I assign four distances, one for each “slide”. Closer layers have more difference between each distance, and far away layers only move a little. The following table shows the distances for each layer.

Layer
1st slide
2nd slide
3rd Slide
4th Slide




#clouds4
20
100
200
300


#clouds3
20
150
300
450


#clouds2
20
200
400
600


#clouds1
20
250
500
750


#fartrees
20
300
600
900


#neartrees
20
800
1600
2400

When the time comes (the user clicks on the “next slide” arrow), each layer is scrolled:

$("#clouds4").scrollTo(x, 500);

“x” is the distance determined by the table above, depending on what slide we are going to. The second parameter is how many milliseconds the animation will take.

Warning

Internet Explorer (even IE8!) renders transparent PNG’s differently than other browsers, and therefore the animation is a little choppy. To overcome this, I removed all overlapping layers in IE using conditional tags. That means that IE users won’t get the full effect, but the site is still usable, and there is still some parallax animation happening. For IE6 (yes, we still make sure our sites work in that dusty old thing) I replace the transparent PNG images with transparent GIFs.

For more information and a full tutorial on parallax scrolling, check out Anthony Comben’s post Create a Funky Parallax Background Effect Using jQuery on ThemeForest.

If you have any parallax scrolling projects, we’d love to check them out! Let us know in the comments.

Google recently rolled out Page Speed, an open-source Firefox/Firebug extension, allowing you to evaluate a site’s performance.

Read the rest of this entry »