Tutorials
Help: How do I announce a new website?
We launch websites every month or two for clients, and make many website updates. What are the best ways to tell the “internet” that your site is up, and ready to be checked out? I’m going to focus on the free options, as I find anything that costs money sketchy (especially with regard to listing a site).
We can divide this into a few categories:
- Search Engines
- Social Networking
- Peer Sites
- News Aggregators
WordPress: How to get the Slug of the page
When working with WordPress templates, we frequently find ourselves trying to get certain information about a page. It bothers me how “non” object orientated page information is in WordPress, but those are the hurdles you need to get over as a web developer.
Today I wanted to get the “Slug” (or the last part of a Permalink for a page). › Continue reading
iTunes Link Affiliate: How to Make Money Linking to iTunes Music
Over a year ago I published an article, How to link to iTunes: iTunes Link Maker — which described how to link to iTunes content from your blog.
I have received a few comments asking about how to setup an affiliate account with iTunes to make money off of content that you link to. I will tell you how to do that. › Continue reading
How To: Track File Downloads with Google Analytics
Google Analytics is what most people use nowadays for web traffic reports. It is flexible, powerful and simple.
The problem with Google Analytics is that it doesn’t analyze web traffic reports, but generates data in real time. In most cases, this isn’t a problem. In fact, it is big feature. The problem is what about files that do not parse javascript such as PDFs, ZIP files, or other non-HTML documents.
When a user clicks on a PDF from your site, you will never see that PDF in Google Analytics.
How to track File downloads with Google Analytics
It’s very easy. As is most things with Google Analytics.
Google Analytics provides a method for tracking anything you want. It’s called “_trackPageview”.
You use it in javascript as “pageTracker._trackPageview(‘/downloads/map’);”.
How does this help us track file downloads? Simply modify the link to the file asset to have an “onClick”:
Link to the file here: <p>
<a href="somefile.pdf" onClick="javascript: pageTracker._trackPageview('somefile.pdf');">Download somefile.pdf</a>
</p>
See how easy that was?
Hopefully you have a function used to print out those links, then you can modify it in one place (that’s what I did).
You should see results in Google Analytics under Top Content shortly.
How To: Throw an iTunes DJ Party
With Apple’s iTunes 8.1 release, we now have iTunes DJ. It used to be Party Shuffle (for the past few years) but now we have a few new toys.
The biggest of which is the ability to allow guests to your party to vote for songs. Guests can see the song details, upcoming songs, request songs in your library, and vote on which songs they want to hear next.
So how do we do it?
Setup iTunes for DJ
You’ll need a computer running iTunes. Open up iTunes (making sure to have updated to the newest release, 8.1 is the first release to support all the functionality mentioned here). Click on iTunes DJ.
You are now in the iTunes DJ screen. In the lower part of the playlist window are the iTunes DJ options (seen below)
Here are the various components:
Source – This is where iTunes DJ will get the songs it shuffles automatically. Remember this when throwing a party, so people don’t have to see your Backstreet Boys collection. I have it set to my entire music collection (uh oh!)
Refresh – It refreshes your playlist. Real boring.
Settings – click here to setup iTunes DJ properly, here’s the window you will see (seen below)
A bit more fun, I have filled in some values.
The most important thing on this screen is the “Allow guests to request songs with Remote for iPhone or iPod touch”, as it lets us do everything in the rest of this article.
Your welcome message will show up in your guests Remote application (seen below, ignore my note about looking in a playlist, you can’t do that only browse by artist, album, song, genre, music videos, composers or a general search)
Going back to the settings in iTunes… you will want to click “Enable Voting” to let guests vote for the next song.
If you don’t set a password, anyone on your Wifi can see your iTunes DJ list, and make requests. Then again, hopefully you don’t have an open wifi point. If you do, I recommend a password.
Easy setup right?
Now the fun stuff: Remote.
As I discovered, if you are already registered with your iTunes on Remote, you will not see the welcome message. That is only for guests. If you want to see it work, remove your iTunes from remote. Tada!
Here are some screens you will see in iTunes:
 |
When your guests first load your “iTunes DJ” guest, they will see the current song. The album artwork will be there (a nice touch, I like having all album artwork in there, easy with “Get Album Artwork”). Your guests are presented with 3 options here. They can Request a Song (big button on bottom) to be added to your playlist, go back to the current playlist, or view Genius recommendations. |
 |
If your guests click on the “i” in the top right corner, they will see the Genius recommendations, clicking on “+” will add it to the iTunes DJ playlist. It will be added with “1″ vote. If other guests like the song and want it sooner, tell them to “vote” for the song (coming up in the next screengrab). Again this screen doesn’t look so good if you have a messy library, or missing artwork. Guests can tap “Back” to go back to “Now Playing”. |
 |
Here is how your users see your playlist. In light grey up top, we see “This Town” was just played. Normally the single most recent is visible but guests can scroll up to see more (based on the setting in iTunes). Currently playing is highlighted in black. Next songs are below. If a guest clicks on a “heart” next to a song they are voting for that song to be played next. The song with the most votes comes next. Guests can still request a song, exit out to setting, or view the “Now Playing” song. |
 |
If, at any point, a guest clicks on “Request a Song” — they are brought to a basic music navigation screen. There is no playlists option, or some other options. Users can search by most other parameters though. Keep in mind, that this is your entire “Source” that you defined earlier. If you want to limit choices to “Country”, or maybe “80s” music, then make an appropriate Playlist/Smart Playlist, and mark it as the source in the iTunes DJ “Source”. Interestingly “Music Videos” is listed here. Maybe just for the music, maybe for a future AppleTV update. |
How do I use transparent PNGs in IE6: Using AlphaImageLoader
Internet Explorer is a tough beast. It was very popular years ago. Unfortunately, it’s still in use in out there.
This site, www.seangw.com, has a fairly technical crowd. We still see approximately 3% of our visits from IE6 (Firefox is the most popular at 64%, then IE7 at 14%, Safari at 10%, then Chrome at 5%).
I don’t believe IE6 should be supported anymore. In many jobs, that isn’t our decision to make. We can recommend ignoring IE6 specific issues, but should do so intelligently:
- Identify the current IE6 audience (knowing it will probably decrease over time)
- Approximate the cost of supporting IE6 (depends on what you are trying to do)
- Present the pertinent information to the client, and let them make an informed decision
- You should tell the client what you feel, but make sure they understand the difference between emotion and facts
Note: If your client makes $1,000,000 online every year, ignoring that minor 3% audience means possibly ignoring about $30,000 in revenue. Math is enlightening sometimes.
At that, you are here, and STILL want to do transparent PNGs in IE6.
How to implement transparent PNGs in IE6
It’s pretty standard the method for implementing transparent PNGs in IE6 by now.
This method is for implementations in CSS (you are using CSS, aren’t you?).
Frequently I find myself making a quick browser detect for IE6 (since there are oh so many issues that only affect IE6). I use basic IE conditional comments:
<body> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <!-- [if lte IE 6]> <link rel="stylesheet" href="styleIE6.css" type="text/css" /> < ![endif] --> </head> <body> </body> </html>
There you go, now when you setup your styles in style.css and realize they don’t work in ie6, edit them in styleIE6.css to get them working again.
Assuming you defined a logo in style.css as follows:
#logo {
width: 300px;
height: 150px;
background: url(images/logo.png) no-repeat left top;
}
You will find that the PNG does NOT work in IE6.
The fix is easy, we tell IE6 to use the Microsoft DXImageTransform AlphaImageLoader to render the PNG. So we add an IE6 specific change ot the styleIE6.css file:
#logo {
background: transparent;
filter: progid:DXImageTransform:Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
}
There you go. It should work now.
The background: transparent thing tells the browser to ignore the originally defined background used in the original CSS document.
JSDoc: How to document your JavaScript
JSDoc is meant to do for Javascript, what Javadoc does for Java.
It does.
You can download and install JSDoc easily:
- Download JSDoc
- Expand the tgz.gz file (I use Winrar)
- Optional – I copy the jsdoc folder to my C: drive to make things easier
- Reminder – you need a perl runtime installed. ActivePerl is recommended
- Open up a command prompt
- Change to your JSDoc folder (mine is c:\JSDoc-1.10.2\)
- Run it: “perl jsdoc.pl test.js” (to test it against the built in JS file)
Usage of JSDoc is as simple as Javadoc was. An example of usage taken from the official JSDoc page is below:
/**
* Shape is an abstract base class. It is defined simply
* to have something to inherit from for geometric
* subclasses
* @constructor
*/
function Shape(color){
this.color = color;
}
// Bind the Shape_getColor method to the Shape class
Shape.prototype.getColor = Shape_getColor;
/**
* Get the name of the color for this shape
* @returns A color string for this shape
*/
function Shape_getColor(){
return this.color;
}
/**
* Circle is a subclass of Shape
*/
function Circle(radius){
this.radius = radius;
}
/**
* A very rough value for pi
*/
Circle.PI = 3.14;
/**
* Get the radius of this circle
* @returns The radius of this circle
*/
function Circle_getRadius(){
return this.radius;
}
// Circle is a subclass of Shape
Circle.prototype = new Shape(null);
You can use the reference on the official site to learn about more of the “@” attributes you can use for JSDoc.
The example code is here:
- test.js – original example javascript file
- JSDoc generated documentation for the test.js file.
Illustrator Tutorial: Create a vector RSS Icon (a la web 2.0)
Not being an artist or designer by default (I do some design by usually by applying formulas — I find a completely deterministic experince, a happier experience), I attempted to learn more about all those pretty graphics we see out there these days.
I grew up in Photoshop, and have recently been “seeing the light” of Adobe Illustrator. Don’t get me wrong, I’ve used Illustrator for quite a while, but I’m just now learning all the various tools that I need to know.
See the icon in this article? I made it. All by myself. Of course with the aid of an excellent tutorial:
Spoon Graphics Blog – Create a Vector RSS Icon with Illustrator
Introduction to JSON (JavaScript Object Notation)
JSON, JavaScript Object Notation, is a very useful tool for AJAX developers (and many others I’m sure).
XML is fairly difficult for JavaScript to parse out. It also includes quite a bit of infrastructure overhead in certain applications.
Implementation of JSON can be very easy, it is imported natively in JavaScript through the eval() procedure. It is also supported by many server side languages.
Lets take a basic example of an XML statement and see it’s JSON equivalent:
XML
<book id=”123″><author>Tom Jones</author></book>
JSON
{“book”: {“id”:”123″, “author”:”Tom Jones”}}
It may seem more cryptic, but if you look, that’s just because there are fewer iterations of key words. The compression gets extended when you implement longer arrays of data.
The best part about JSON, in my opinion, is the speed increase you get when using it in javascript. Please implement something in XML and JSON with the same data, you will notice a significant performance increase.
JSON is easy to consume in JavaScript:
objJSON = eval(jsonDataFeed);
You can access data (using our example earlier):
alert(objJSON.book.id);
alert(objJSON.book.author);
Server side implementation can be quite simple as well:
$dataObject = array(); $dataObject["book"] = array(); $dataObject["book"]["id"] = 123; $dataObject["book"]["author"] = "Tom Jones"; echo (json_encode($dataObject));
Ask any questions in the comments below.
Here are some articles to continue your exploration of JSON:
Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin
This tutorial covers:
- What is a plugin?
- Installing a plugin
- The jQuery Marquee plugin
- Implementing the jQuery Marquee plugin
What is a plugin?
A plugin is an addition to the core jQuery functionality. Plugins are made to be simply integrated into an existing jQuery web page.
For this tutorial, we will be working with the jQuery Marquee plugin from remy sharp’s b: log. Take a look, he did a good job putting his post together.
Installing a plugin
Installing plugins is very easy. This is the easiest part of working with all plugins.
Pretty much:
- Download the plugin
- Upload the plugin to your server
- Include the plugin in your document
First, download the jQuery Marquee plugin here (taken from the original post, The Silky Smooth Marquee). If it just displays in your browser, right click on the link and select “Save Link As…”.
Now that we have the plugin, we just need to post it on our site. Upload it to your javascript folder (I normally use “/js” for this).
Finally we need to include the JS library in your document, so we add the following line (into a very basic document):
<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>
</body>
</html>
It’s uploaded!
The jQuery Marquee plugin
Whenever working with a plugin, normally the plugin page has helpful instructions on it’s use, and examples. In this case that is true.
Again, I’m going to link back to the original page — The Silky Smooth Marquee.
On that page the author has detailed:
- Demo
- Download
- Usage
- How it works
- Events
- Support
Very helpful. Additionally, it helps to look and see if there are any useful comments. Usually commenters point out minor flaws in the code posted (or major!), and supply resolutions. If you follow the conversation thread on the post, you will see commenters have requested functionality that was implemented back into the plugin.
Implementing the jQuery Marquee plugin
Now the final part. This is both easy and hard. The easy part is usually getting the basic implementation working. The hard part comes in when you try to do exactly what YOU want to do with THEIR plugin example. Usually it can be done. Sometimes there are minor modifications that have to be made to the original plugin.
Once you have added the library, all you need to do is include the code. There is a great example page, jQuery Marquee Demo, that shows the various implementations.
For our purposes we’ll implement a basic marquee on our page:
<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>
<marquee behavior="scroll" direction="up" scrollamount="1"
height="75" width="150">
<p>This is a test of a Smooth Marquee using jquery.</p>
<p>This is a test of a Smooth Marquee using jquery.</p>
<p>This is a test of a Smooth Marquee using jquery.</p>
</marquee>
</body>
</html>
The plugin automatically binds to the marquee tag. Does yours work? Check out our example of jQuery scrolling text marquee.
That was too easy?
Yes. If you look at the comments, one common request is to adjust the scroll speed. You can see that our scrollamount is already set to the minimum, 1.
The author recommended setting the timeout (refresh rate) to a larger number. By default, it is set to 25ms. If we wanted to go twice as slow, we just have to change that to 50ms. This is where modifying the core code of the plugin comes in. If you want to go ahead and do this:
- Open up the jquery.marquee.js file.
- Find the line: “setTimeout(animateMarquee, 25);”
- Change it to: “setTimeout(animateMarquee, 50);”
- Upload the new jquery.marquee.js file
The sky is the limit.
Please give us feedback on this tutorial, also take some time to thank the author of this plugin, Remy he’d probably appreciate a follow on Twitter, or even a comment on his blog.
Tags
Follow Me
Email Subscription
Recent Posts
Top Commentators
- No commentators.
Archives
Blogroll
- 456 Berea St
- ActionScript 3 Design Patterns
- adactio – home of Jeremy Keith
- ajaxian
- Boxes and Arrows
- Chris Brogan
- CSS Globe
- InsideRIA
- Jarrod Michael Studios
- Mad Vertices
- NETTUTS
- Roomware Blog
- Signal vs. Noise
- Six Revisions
- Snook
- Style Grind
- Tiago’s Weblog
- Viget Extend
- Vitamin
- Whats the latest
- Why Banks Fail
- Woork
- zupko.info
