Upcoming WordCamps

Every now and then I see someone ask in the dev channel how they can meet up with other local WordPress developers. We’re thinking about ways to make WordPress.org more of a resource to facilitate local connections, but in the meantime, I thought it might be helpful to publicize some upcoming WordCamps, the weekend conferences organized by local communities to talk about all things WordPress.

WordCamp New Zealand: Wellington, New Zealand, August 8-9, 2009

WordCamp Huntsville: Huntsville, Alabama, USA, August 15–16, 2009

WordCamp Los Angeles: Los Angeles, California, USA, September 12, 2009

WordCamp Philippines: Makati City, Philippines, September 19, 2009

WordCamp Portland: Portland, Oregon, USA, September 19-20, 2009 (Last year’s PDX WordCamp was awesome, IMO.)

WordCamp Seattle: Seattle, Washington, USA, September 26, 2009

WordCamp Birmingham: Birmingham, Alabama, USA, September 26-27, 2009

WordCamp Netherlands: Utrecht, Netherlands, October 31, 2009

WordCamp NYC: New York, New York, USA, November 14-15, 2009 (Logo contest in progress!)

WordCamp Mexico: Mexico City, Mexico, November 20, 2009

If any of these are within a reasonable distance to you, consider attending. WordCamps are a great way to meet other WordPress users, find collaborators, and expand your t-shirt collection*. I know I’ll be hitting at least a few of these; WordCamps are also a great way to get user feedback to take into consideration while we’re making decisions about what to include in core.

You can always find an up-to-date list of upcoming WordCamps at WordCamp Central. You can also try searching for WordPress groups at Meetup.com to find more regular monthly gatherings in your area.

*Most WordCamps include an event t-shirt in the registration fee.

Comments are closed.

Get Image Color

slice
Package:
Summary:
Get the most used colors in an image
Groups:
Author:
Description:
This class can be used to get the most used colors in an image.

It can open an image file in JPEG format and traverse its pixels to find which are the most used colors. It can skip a given number of analyzed pixels according to the granularity parameter.

The class returns an array of top most used colors up to a given limit of number or colors. The colors are returned in RGB hexadecimal format.


Comments are closed.

shaCrypt

Package:
Summary:
Encrypt and decrypt data using SHA1 hashes of keys
Groups:
Author:
Description:
This class can be used to encrypt and decrypt data using SHA1 hashes of keys.

It takes a string of data and applies several functions to scramble the data. Then it uses an SHA1 has of the key to encrypt the scrambled data by using the XOR function.

The class can also do the opposite, i.e. apply the SHA1 hash of the key to decrypt the encrypted data. Then it unscrambles the data using functions that invert the result of the original data scrambling.


Comments are closed.

Binary XML

Package:
Summary:
Generate and parse XML documents with binary files
Groups:
Author:
Description:
This class can be used to generate and parse XML documents with binary files.

It can take a list of files and generate a XML document that includes the data of files using base64 encoding.

The class can also do the opposite, i.e. parse a previously generated XML document and recreate files contained in the document.


Comments are closed.

Create a page peel effect with jQuery

Introduction

You have seen the effect – a website that has in its corner an animation that looks like a page from a book is being opened (this same effect is used on the BloggyBits website). This is called a page peel effect and is an increasingly popular design element. Up till recently, it was quite a challenge to create something like similar. Luckily for us, now our favorite java script library jQuery has a plugin to do just that – the pagePeel plugin.

The page peel effect - a solution to banner blindness

The page peel effect - a solution to banner blindness

The includes

In order for this to work we will need to include the jQuery library and the pagePeel plugin itself in the HEAD section of our HTML document.

<head>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/pp/jQuery.pagePeel.js"></script>
</head>

Here jquery.js is in the same directory as our html file and jQuery.pagePeel.js is in the pp directory. We have to include them in that order.

After that we have to create a DIV, that is going to be converted to our page corner. It is best that the DIV is positioned in at the bottom of the <body> section, before the closing </body> tag.

...........
<div id="pagePeel"></div>
</body>
</html>

The code

Now that we have all the java script files necessary we need to write the code that is going to create our page peel effect. The code should be positioned in the head section, after the included files.

<script type="text/javascript">
$(document).ready(function() {
	$('#pagePeel').pagePeel({
		bigAd: '/images/bloggy_page_peel_light.gif',
		bigSWF: '/pp/page-peel-big.swf',
		adLink: 'http://www.stepinto.net',
		adLinkTarget: '_blank'
	});
}
</script>

$(document).ready is a special jQuery method that allows us to have code executed after the page has loaded.

Inside, on line 2 we have the special method, .pagePeel that was included in the page with the pagePeel library. We are basically converting the DIV with an id of pagePeel into the page corner animation.

The method takes an object as a parameter and you can see from line 3 to line 6 that we have used several properties. bigAd for the background image of the ad, bigSWF is the address of the default swf flash file that comes with the plugin (it creates the page peel effect), adLink for the address that the animation leads to and adLinkTarget is for the target (in this case it opens in a new window).

You maybe wonder where do we specify the size and the position? The default size is 500×500 pixels and we don’t need to specify it additionally (only if we want a different size). For the purpose you can add the following properties: smallWidth and smallHeight (for the small, inactive version) and bigWidth and bigHeight for the full version. There also more interesting properties for which you can refer to at the plugin’s homepage.

You can change the background graphic anyway you like. It is important that it is the same size as the size of the full version of the animation.

Done! You can see a working demo at BloggyBits.com.

Conclusion

That concludes this tutorial. Creating a page flip animation on a web page has never been that easy. This is an original way to present advertisement, or promotions on your site. The best thing about it is that people have not developed the so called banner blindness (ignoring banner or text advertisement on web sites) for this kind of format. At least for now that is.

If you liked this tutorial you can subscribe to our RSS feed or follow us on twitter.

Comments are closed.

coverFlow

Package:
Summary:
Generate images using the cover flow effect
Groups:
Author:
Description:
This class can be used to generate images using the cover flow effect.

It takes a set of images and composes a new image displaying all the images using the cover flow 3D perspective effect.

The class also generates HTML are map so clicks on the displayed images lead to a new URL that displays the clicked image as the main cover image.


Comments are closed.
Powered by Gewgley