Tutorials

Google Code University: Free Courses, Tutorials and Lectures for Web Development – AJAX, HTML5, HTML, CSS, Javascript and more

Wednesday, September 1st, 2010 | Business, Tutorials | No Comments

I grew up with webmonkey as the single best destination for web developers and any tutorial you could want, but just saw that Google has a Google Code University featuring Tutorials, Contributed course content and Video lectures on:

Just looking through the site it is so much more than basic web development.  Material covers topics ranging from the Android platform, to basic algorithms.    Please check out the material that isn’t just web development.  There’s a reason Google is providing content for Distributed Systems, Tools and working with APIs.

We’re never beyond refreshing our own skills, as I’m sure Google has some great advice on their site.

I wish I could send this link to some other web developer’s I’ve had to rescue projects from.

Tags: , , , , , , , , ,

Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example

Wednesday, June 16th, 2010 | Tutorials | 4 Comments

This tutorial will cover:

  • Modifying CSS attributes with jQuery
  • Setting a class for a page element
  • Removing a class from a page element
  • Testing if a class exists
  • A quick toggle click behavior example

The final example will use all of the other elements in a single exercise.

› Continue reading

Tags: , , , , , , , , , , , , ,

HTML Fadein Fadeout: Basic Javascript/AJAX Tutorial using jQuery’s fadeTo

Tuesday, April 13th, 2010 | Business, Tutorials | 4 Comments

In this tutorial we will review:

  • Basic document jQuery preparation
  • Binding  jQuery actions to an anchor (A) tag
  • Fading In and Fading Out html elements with Javascript/AJAX

› Continue reading

Tags: , , , , , , , , ,

How can I sell my music on iTunes or Amazon MP3?

Tuesday, March 30th, 2010 | Business, Tutorials | 3 Comments

A reader just asked me:

I have a company that does films and music, I wanna know how i can use itunes to sell my products do i need to contact itunes directly or what can I do?  What are the steps?

› Continue reading

Tags: , , , , , ,

Help: How do I announce a new website?

Sunday, March 7th, 2010 | Business, Tutorials | 3 Comments

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

› Continue reading

Tags: , , , , , , , , , , , ,

WordPress: How to get the Slug of the page

Tuesday, February 9th, 2010 | Business, Tutorials | No Comments

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

Tags: , ,

iTunes Link Affiliate: How to Make Money Linking to iTunes Music

Tuesday, February 2nd, 2010 | Business, Tutorials | 5 Comments

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

Tags: , , , , , ,

How To: Track File Downloads with Google Analytics

Wednesday, March 25th, 2009 | Business, Tutorials | 11 Comments

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”:

[jscript]
Link to the file here:

<a onclick=”javascript: pageTracker._trackPageview(‘somefile.pdf’);” href=”somefile.pdf”>Download somefile.pdf</a>

[/jscript]

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.

Tags: , , , , , , , ,

How To: Throw an iTunes DJ Party

Thursday, March 12th, 2009 | Tutorials | 13 Comments

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)

iTunes DJ Options


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)

iTunes DJ Settings


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)

iPhone Remote - iTunes DJ Welcome Message


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:

iPhone - Now Playing in DJ 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.
iPhone - "i" - 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”.
iPhone - Playlist 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.
iPhone - Search in DJ 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.

Tags: , , , , , , , , , , , ,

How do I use transparent PNGs in IE6: Using AlphaImageLoader

Tuesday, March 10th, 2009 | Tutorials | No Comments

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" />

<!-- &#91;if lte IE 6&#93;>
<link rel="stylesheet" href="styleIE6.css" type="text/css" />
< !&#91;endif&#93; -->
</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.

Tags: , , , , , , , , , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template