The best solution to this ongoing probably is to utilize XML to describe the content as best as possible. The one problem with this approach is that parsing that XML into usable code is usually a big pain in the ass. With PHP5’s implementation of the SimpleXML object parsing XML is finally as simple as it should be.

This is the best way to handle web content in my opinion. The advantages as I see them are:

• Store your content in one central location, even it is used in multiple places throughout a site
• Write your content once using the most semantic markup of all, XML
• Loop through tags to make styling repeated content a breeze (e.g. Press Releases page)
• Use your content with different technologies. Create RSS feeds, supply it to other domains or use it with Flash

Using the SimpleXML object

Let’s get our hands dirty and see how to parse an XML file with SimpleXML.

XML

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8" ?>
<press>
	<article>
		<date>August 26</date>
		<year>2008</year>
		<link>pdf/consumer-brochure.pdf</link>
		<title>New press release!</title>
		<description>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</description>
	</article>
</press>

PHP

1
2
3
4
5
6
7
8
9
10

<?php 
$press = simpleXML_load_file("press.xml"); 
foreach($press as $articles) { 
?>
<div class="article">
	<h2><a href="<?= $articles->link ?>"><?= $articles->title ?></a></h2>
	<p><?= $articles->description ?></p>
	<p class="date"><strong>Published</strong> <?= $articles->date ?>, <?= $articles->year ?></p>
</div>
<? } ?>

XHTML (generated by SimpleXML)

1
2
3
4
5

<div class="article">
	<h2><a href="pdf/consumer-brochure.pdf">New press release!</a></h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	<p class="date"><strong>Published</strong> August 26, 2008</p>
</div>

Download source

Download the SimpleXML Source Code for the example above.

Recommended Reading

I was introduced to the SimpleXML object while browsing PHP 5 Recipes: A Problem-Solution Approach. I would recommend this book to professional developers looking for a great desk reference resource. As best put by the author, “This book is a source of instant solutions, including countless pieces of useful code that you can just copy and paste into your own applications, giving you answers fast and saving you hours of coding time.” That said, it’s big, long, and definitely not something you sit down and actually read. It provides a well documented reference of PHP 5 that includes some of the newer additions such as SimpleXML.

Resources

• ONLamp.com — Using PHP5’s SimpleXML object

So how does one go about measuring the time it takes to load there website? Furthermore, how do we determine which files are taking the most time to load? The answer is the FireBug Net Panel.

To use the Net (short for Network Monitoring) tools you must go to the “Net” tab in Firebug and active them.

Then simply reload your page and watch as Firebug tells you the load time of each item sequentially, whether the item is a CSS, JavaScript or image file.

FireBug will provide you with monitoring on the following:

• XMLHttpRequest/AJAX monitoring
• Examine HTTP Headers
• Whether a file has been cached or not cached
• Break it down by file type (CSS, Images, JavaScript, etc.)
• Watch the timeline unfold

Resources

• Firebug

JavaScript / jQuery

1
2
3
4
5

if ($('a.email').length > 0){
	$.getScript('js/jquery.mailto.js',function(){ 
		$('a.email').mailto();
	});
}

How it works

This small snippet of code that will check for the existence of an object, in this case that object is any anchor link with a class of email. If this object is found on a page, a corresponding .js file (js/jquery.mailto.js) will be loaded and a callback function initiated ($(’a.email’).mailto();). If the object is not found, the script will not be loaded. This assumes that the snippet is enclosed in a document ready event.

I find this approach to be the most elegant when handling multiple jQuery plugins. One could compare it to the @import CSS command that is frequently used to load in multiple style sheets from one master CSS file.

Notes

When loading external scripts dynamically with jQuery’s getScript, a cache busting parameter is added to the request URL. So, instead of writing something like <script src=’/js/foo.js’>, it writes something like <script src=’/js/foo.js?_=ts2477874287′>, causing the script to be pulled anew each time. I assume this is so that calling getScript repeatedly on a single page causes the script to be executed multiple times.

It seems that if you are using AJAX to load an XML file with UTF-8 character encoding, it will fail in both Internet Explorer 6.0 and 7.0.

However, if you change that character encoding to iso-8859-1 it will load without issues in both versions of Internet Explorer.

This was a big headache for me, and I hope this helps someone else out there avoid a similar issue

Resources

• Encode your XML documents in UTF-8
• KMC Partners — Home
• KMC Partners — Results

• Atlanta Graffiti
• London Graffiti
• Brooklyn Graffiti
• Toronto Graffiti
• Graffiti Street Art

Famous Artists

• Banksy Graffiti

Great Articles

• 3 Amazing 3D Graffiti Artists: Street Painting and Sidewalk Chalk Art

  Incredible shots of 3D street art that will boggle your mind.

• Turning River Street into a river

  “Turning Riverstreet into a river” is the largest 3d-street-painting ever done. About 280 m² are covered with paint. Edgar Müller (world-famous street painter) was again invited to Moose Jaw Prairie Arts Festival (2007) to paint together with local artists.

• Dutch Masters

  Dutch Masters is the largest street art exhibition ever to be held in The Netherlands and features the work of 14 Dutch artists and collectives.

Great Sites

• European Street Painting

Thanks go out to Josh Turner for originally turning me onto the wonderful street art of Banksy.

If you come across a legacy site that uses an .STE file to provide FTP information it can be difficult to get that information into another program.

Process

Here is the process I went through to extract the password from a .STE file:

1. Open the .STE with a plain text editor. You will see an XML document.
2. You will see that the &ls;remoteinfo> tag has many attributes. Find the pw=”" attribute and copy it’s contents to the clipboard.
3. Go to http://www.moredw.com/getPW.php and click on the “Get FTP Password online” towards the bottom of the page. This will launch a popup window.
4. Use the WebApp here to de-crypt the password.

That’s it, you’ve de-crypted the FTP password, your free now.

Resources

• File Extension .STE Details
• Dreamweaver 8 Help Files
• De-crypting a Dreamweaver .STE Password

Working Example

info[at]kevinleary[dot]net

Download

• jQuery Safe Mailto Plugin JavaScript (.js)
• jQuery Safe Mailto Plugin ZIP (archived)

XHTML seen by Spam Spiders

1

<a href="info[at]kevinleary[dot]net" rel="email">info[at]kevinleary[dot]net</a>

All instances of “[at]“ will be replaces with “@”;
Likewise, [dot] will be replaced with “.”

XHTML generated by JavaScript

1

<a href="info@kevinleary.net" rel="email" title="Email: info@kevinleary.net">info@kevinleary.net</a>

Plugin Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

jQuery.fn.safeMailTo = function() {
	return this.each(function(){
 
		var mailtoHref = $(this).attr('href');
		mailtoHref = mailtoHref.replace(mailtoHref,"mailto:" + mailtoHref);
		mailtoHref = mailtoHref.replace("[at]","@");
		mailtoHref = mailtoHref.replace("[dot]",".");
 
		var mailtoText = $(this).text();
		mailtoText = mailtoText.replace("[at]","@");
		mailtoText = mailtoText.replace("[dot]",".");
		$(this).text(mailtoText);
 
		var mailtoTitle = mailtoHref.replace("mailto:","Email: ");
		$(this).attr('title',mailtoTitle);
 
		$(this).click(function(){
			window.location.href = mailtoHref;
			return false;
		});
	});
};

Usage

1. Include the latest version of jQuery into the HEAD section of the document.
2. Include jquery.mailto.js into the HEAD section of the document.
3. Add the .safeMailTo() method onto the selector you wish to modify

Example Implementation

1
2
3
4
5
6

$(document).ready(function(){
 
	// Mailto Plugin
	$("a[rel='email']").safeMailTo();
 
});

Resources

• jQuery
• jQuery Plugins/Authoring

• Cell phone with MP3 ring-tone support
• CD or MP3 of the song
• Method of transferring the ring tone from computer to phone (USB, Bluetooth, e-mail, instant message, etc.)
• Audacity

How to do it

For the purpose of this tutorial, we’ll assume that you have a good quality .mp3 file of the song you wish to use as your cell phone ring tone.

Be sure to make a copy of the .mp3 file, we’ll be cutting it up into smaller bits and we don’t want to mess up the original copy.

Step 1 Setting up Audacity with the LAME MP3 Library

1. First download a copy of Audacity here. Install the program on your hard drive. As a side note I’ve chosen to use the Beta: 1.3.4 release for this tutorial.
2. Next, download the LAME Library here. For questions about this step, refer to Audacity’s documentation here.
3. Save the LAME Library somewhere permanent and open up Audacity.
4. Run Audacity, go to the Audacity / Preferences menu, and click the Find Library button near the bottom of the screen. I’m using the Beta Release on a Mac and I need to go to Audacity / Preferences / File Formats section to see the Find Library button.

Step 2 Editing the MP3 and creating the ring tone

1. In Audacity go to File / Open and search for the copy of your .mp3 file that you created earlier.
2. Select the portion of audio you want to use for your ringtone (say 15-20 seconds). To do this, click in the audio track and drag a selection area to left or right with your mouse - you can see the length of the selected audio in the timeline above the track. Many phones will loop the ringtone automatically (repeat it over and over), so choose your selection area with that in mind. To hear your selection play looped in Audacity, type L on the keyboard or hold down SHIFT while clicking the green Play button. To stop the playback, hit spacebar or click the yellow Stop button.
3. Click Edit > Trim. This will remove the rest of the file, leaving only the section you selected.
4. Save your trimmed file in a format that your cell phone can read. You need to check what type of file format your phone requires for its ringtones, and whether the file needs to be mono or stereo. For the LG VX-5400 I saved my files as a 64 kbps .mp3.

Step 3 Getting the file to your phone

This is the tricky part. There are numerous ways to do this, I’ll go over a few.

• USB: With verizon, some phones have the capability to connect to a computer via a USB cable. This one isn’t recommended unless absolutely necessary because these cords can cost anywhere from $20-$50 depending on your phone.
• Bluetooth: Verizon limits what each specific phone is capable of doing with bluetooth. Unfortunately, to the best of my knowledge Verizon doesn’t allow bluetooth file transfer capabilities on their phones.
• Email: If you send an email with the ring tone file as an attachment to XXXXXXXXXX@vzwpix.com it will be sent to your cell phone as verizon PIX message. Replace XXXXXXXXXX with your ten digit phone number. Once it arrives you should have the option to save it as a ring tone (look under options).

LG VX-5400 Results

I ended up using the Email tactic above to get my ring tone onto my cell phone. Digging around forums I heard various numbers pop up concerning file size limitations. I’m assuming it varies with each cell phone. For the LG VX-5400 I couldn’t seem to send anything larger than 72KB.

Sources

• WiReD Magazine: Stop Paying for Ring Tones
• Get Audacity
• Get the LAME MP3 Library
• How do I download and install the LAME MP3 encoder?
• Making Ringtones
• Free Verizon Ringtones (Kinda).

Software

I’m hoping to step up the workflow using the following web development software I’ve found to best suit my needs. I’ve made a list of web development software for anyone interested in my MacBook Pro workflow:

• Office 2008
• Adobe Creative Suite CS3: Web Premium
• OmniGraffle 5 Professional
• Linotype FontExplorer X
• MAMP
• Coda
• Transmit
• VMware Fusion
• SCPlugin
• Linotype FontExplorer X
• FireFox
• Development Addons
• Web Developer Toolbar
• FireBug
• FasterFox
• ColorZilla
• del.icio.us
• AppZapper
• Adium

Useful Sources

• CodeIgnitor Forums: PHP Development Enviroment in OS X
• SCPlugin: SVN in the Mac OS X Finder

Mac OS X Shortcuts

Mac OS X Keyboard Shortcuts

Photoshop Shortcuts

Trevor Morris over at morris-photographics.com has put together a great collection PDF documents that give an overview of the shortcut commands available in Photoshop. His article provides seperate PDF’s for Mac and PC shortcuts as well as multiple versions of Photoshop including:

• Adobe Photoshop CS3
• Adobe Photoshop CS2
• Adobe Photoshop CS
• Adobe Photoshop 7
• Adobe Photoshop 6
• Adobe Photoshop 5

Illustrator Shortcuts

The best resource I found for Illustrator shortcut keys was published by Noble Desktop. They provide a nicely layed out table of Illustrator shortcut keys along with a PDF cheat sheet that is available for download. Versions they provide shortcuts for include:

• Adobe Illustrator CS3 Mac PC
• Adobe Illustrator CS2 Mac PC

Macromedia/Adobe Dreamweaver

• Adobe Dreamweaver CS3 Mac PC
• Adobe Dreamweaver 8 Mac PC

Macromedia/Adobe Flash

• Adobe Flash CS3 Mac & PC (Replace Ctrl with Cmnd)
• Adobe Flash 8 Mac & PC (Replace Ctrl with Cmnd)

jQuery

Having jQuery commands available is always a plus for those who use this library frequently. These are a little old, but even with rapidity (maybe thats a word) at which jQuery is being updated they are still very relevant and functional in the latest version. jQuery 1.2.3 is the latest build at the time of this post.

For anyone that frequently uses the jQuery JavaScript Library I would highly recommend the jQuery Reference Guide by Jonathan Chaffer and Karl Swedberg.

• jQuery Cheat Sheet

Search Engine Querys

These search engine commands allow you to do all sorts of wonderful things like see who’s linking to your site, check your page ranking and view the total number of pages there are related to your site. These are great for those who frequently practice SEO.

• Search Engine Query Cheat Sheets

Subversion

• Subversion Quick Reference Card

Sources

• Cezary Sobaniec, PhD - Subversion Quick Reference Card
• Dan Rodney - Mac OS X Keyboard Shortcuts
• Adobe Photoshop Keyboard Shortcuts | Trevor Morris Photographics
• Noble Desktop computer graphics training.
• Digital Overload - Dreamweaver shortcuts
• e3 internet - Search Engine Query Cheat Sheets
• PeteFreitag.com - Cheat Sheet Roundup - Over 30 Cheatsheets for developers