Currently there are a few projects underway:

• Financing Budget Tracker (WPF)
• PC Media Library (PHP, ASP.Net, WPF)
• OrangeEvents (WordPress Plugin)
• OrangeBox3 (WordPress Plugin)

While the Budget Tracker is still being actively developed, the other projects are currently being tested and I hope to release them by the end of the year. Be sure to subscribe to get updates on these apps and others.

ColorZilla, a company that has created an amazing color analyzer plugin for both Firefox and Chrome, has created a site where web designers can go to generate any CSS Gradient. If you are like me, you’ve got the general cross-browser, hex based, top to bottom gradient down but what about multi-directional gradients, multi-stage gradients, or gradients with opacity? And although some of the cool features are not yet supported on all browsers, ColorZilla’s Ultimate CSS Gradient Generator also provides fallbacks in case a user who is on an older browser comes to visit your site.

This really is the perfect tool! check it out here: http://www.colorzilla.com/gradient-editor/

As CSS standards continue to evolve, web designers and website owners are given the possibility to really revolutionize their brand. In previous years, Web sites did very little to reflect a corporate brand outside of placing images everywhere. Now websites are as much a part of a corporate brand as the logo.

You can easily see this in some of today’s top brands. For one example, just look at the simplicity and the minimalism in Apple’s site. Apple’s site conveys their brand just as much as their logo or products do.

For a recent project, I decided to make a simple logo out of pure CSS, no images, no JavaScript. I got my inspiration while playing with dominoes, placing simple rectangular shapes so that the negative space resembled the letters “dph”. Using CSS, I was able to recreate the effect and include a little hover-over fun. Though this is incredibly simple, it shows how you can also start to use CSS to make your Branding or your Logo interactive.

I can’t wait to see where CSS goes next. There are some amazing new features in CSS3 such as selecting even or odd children, timed animations, rounded corners without images, and so on.

If you have specific uses for CSS that you think will inspire others, share them here!

I have recently been working on a plugin that makes use of many features that can be found elsewhere throughout the WordPress administration pages. I wanted to give the plugin a feel that really fit with WordPress but wasn’t sure where to start. I found this Onextrapixel article extremely helpful to get a start on styling my WordPress Plugin Admin pages.

Also, if you are interested, here is the WordPress documentation on how to create your own link with sub-pages in the WordPress Administration Menu. This is very helpful if you have a plugin that requires multiple admin pages and you want to keep it organized.

It is also very helpful to get Mozilla Firefox or Google Chrome and inspect existing WordPress tables/layouts/images… to find the CSS classes and IDs used by WordPress. Sometimes the easiest way to style your plugin is to use the same classes and IDs in your own code.

Got the Dev Skills?

While OrangeBox3 is on its way to a public beta release, there is a lot to do. If you would like to help out with the development of OrangeBox, contact me! If you have any skills in JavaScript or especially jQuery and want to pitch in some time developing OrangeBox, there’s plenty of room!

Have Suggestions?

If you would like to see something added into this release of OrangeBox, now is the time to request it! Simply add a comment to this post and I’ll consider the addition.

Want to Donate?

The development of OrangeBox takes a lot of work that is right now all done by one guy. I am hard at work Pushing OrangeBox forward and taking into consideration all of your suggestions. If you would like to help get OrangeBox out faster but don’t want to dig into the code, consider donating 50 cents or a dollar… every little bit helps tremendously! To Donate, go to the OrangeBox homepage

But let me spill my two cents anyways:

HTML5 is a set of rules/standards for writing HTML. Basically, imagine it this way… there was once Old English but now many of those words are not used and now we have a lot of new words that perform functions of some of the old words. HTML5 is a new set of words that replace old ones to be more efficient. HTML5 also gets rid of some old words that are no longer needed.

Another function of HTML5 is to say, “we no longer want to read slang, instead we want you to write properly so that more people can understand you”. Makes sense right? Slang is hard to understand for people learning a new language.

Last and probably most important is to know that HTML5′s last function is to create shortcuts for complex tasks. The most commonly known shortcut is the HTML5 <video> tag. In short, this tells your browser, “replace me with some cool JavaScript functions that play a video”.

That is HTML5

It’s Like Comparing a Pogo Stick to a Dictionary

“Um… that’s not very Flash-tastic.” You are correct! HTML5 is not a replacement for Flash. Let me reiterate so that it becomes obvious… Flash makes images move… it displays videos and sounds… it lets users interact with videos. HTML5 is standards… it is a set of rules to write a language. Not even remotely related.

So if HTML5 is not a replacement for Flash… what’s all this talk about then? Notice the final part of HTML5… it “creates shortcuts for complex tasks” by using “some cool JavaScript functions”. JAVASCRIPT, that’s what it is all about. That’s the key.

HTML5 has shortcuts for JavaScript which has made JavaScript a competitor for the gaps in the Web that Flash filled. Flash is a tool to create animated images (um… movies) that can be interacted with. However, because there was no way to show a video on a browser, Flash raised its hand and said, “give me the video, I’m pretty good with moving images”.

Flash will not go away anytime soon. Sure, you can create an interact-able animated set of images with JavaScript but it’s going to take a hell-a-lot of math. So until there is a visual program to write all that math (um… like an Adobe Flash Catalyst for JavaScript), Flash will not have a direct competitor.

The Sad Part…

…is that Adobe is getting the short end of the stick.

Apple and others have been so adamant that Flash should die that they already wrote the obituary. “HTML5 kills Flash”. What’s worse is that they blame it on a great company being “Closed Source”. And I’ll add in here that yes, JavaScript is open source… bury that away somewhere in case it is actually useful information.

Let me ask this: Have you ever tried to theme iTunes? Why did it take so long for Apple to let you put a background image on your iPod touch? Did you know that you have to pay $100 a year to be able to create an iPhone app… THAT IS NOT BUILT ON JAVASCRIPT BUT ON A CLOSED SOURCE LANGUAGE CREATE BY APPLE? (Google Cocoa).

I’m not a Hater

Let me add some fine print…

I don’t hate Apple… I have an iPad2 and a Mac Book Pro and an iPod Touch and I want me an iPhone 4s. Apple is very progressive and has revolutionized the computer industry. Apple has created quality standards that now every other software or computer company must live by. They do what they do and they do it very well.

They can also sell anyone on anything… which is good to be able to do. They sometimes just don’t do that very ethically. Trash talking a company that has since the beginning, developed specifically for Apple products (and in fact is probably one of the biggest factors in Apple’s popularity) is not a nice way to say thank you.

So… here is what I want to say: Adobe is a great company, Flash is very good at what it does… there’s no need to bash either.

It will be helpful to have some CSS experience and in the specific use outlined below, some WordPress development experience as well.

What you will need:

• A graphics program (like Adobe Photoshop CS5)
• A simple text editor (Notepad++ is great for Windows… On mac, try Komodo edit)

What you will accomplish in this tutorial:

Let’s get started… Step #1

Fire up your graphics program. You can download a PSD or PNG template to help with the image layout.

Step #2

You will be creating a grid of months, days, and years. My grid has the months in the first column, days in the next two columns and years vertically in the last column. Feel free to try different fonts, just make sure to stay within the grid. You can also change the overall size to create smaller or larger stamps. If you do change the size, you will need to do the math to figure out the CSS. Once your done, save the file as a .png and place it inside an images folder at the root of your theme (where your main style sheet lives).

Step #3

Now for the CSS. Although it looks pretty complex, it is actually really easy. If you used the psd template and kept the image the same size, you won’t need to do any math, just put in the CSS and your done.

The CSS is as follows:

/*Date Sprite */
.postdate {
    position: relative;
    width: 70px;
    height: 65px;
    float: left;
    background:#1EB0BC;
    margin:10px 10px 10px 0;
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari, Chrome */
    border-radius: 5px; /* CSS3 */
}
.month, .day, .year {
    position: absolute;
    text-indent: -1000em;
    background-image: url(images/date_img.png);
    background-repeat: no-repeat;
}
.month {
    top: 10px;
    left: 5px;
    width: 35px;
    height: 30px;
}
.day {
    top: 28px;
    left: 5px;
    width: 35px;
    height: 30px;
}
.year {
    top: 12px;
    right: 0;
    width: 25px;
    height: 60px;
}
.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -60px;}
.m-04 { background-position: 0 -90px;}
.m-05 { background-position: 0 -120px;}
.m-06 { background-position: 0 -150px;}
.m-07 { background-position: 0 -180px;}
.m-08 { background-position: 0 -210px;}
.m-09 { background-position: 0 -240px;}
.m-10 { background-position: 0 -270px;}
.m-11 { background-position: 0 -300px;}
.m-12 { background-position: 0 -330px;} 

.d-01 { background-position: -35px 0;}
.d-02 { background-position: -35px -30px;}
.d-03 { background-position: -35px -60px;}
.d-04 { background-position: -35px -90px;}
.d-05 { background-position: -35px -120px;}
.d-06 { background-position: -35px -150px;}
.d-07 { background-position: -35px -180px;}
.d-08 { background-position: -35px -210px;}
.d-09 { background-position: -35px -240px;}
.d-10 { background-position: -35px -270px;}
.d-11 { background-position: -35px -300px;}
.d-12 { background-position: -35px -330px;}
.d-13 { background-position: -35px -360px;}
.d-14 { background-position: -35px -390px;}
.d-15 { background-position: -35px -420px;}
.d-16 { background-position: -35px -450px;}
.d-17 { background-position: -70px -0px;}
.d-18 { background-position: -70px -30px;}
.d-19 { background-position: -70px -60px;}
.d-20 { background-position: -70px -90px;}
.d-21 { background-position: -70px -120px;}
.d-22 { background-position: -70px -150px;}
.d-23 { background-position: -70px -180px;}
.d-24 { background-position: -70px -210px;}
.d-25 { background-position: -70px -240px;}
.d-26 { background-position: -70px -270px;}
.d-27 { background-position: -70px -300px;}
.d-28 { background-position: -70px -330px;}
.d-29 { background-position: -70px -360px;}
.d-30 { background-position: -70px -390px;}
.d-31 { background-position: -70px -420px;} 

.y-2009 { background-position: -105px 0;}
.y-2010 { background-position: -105px -60px;}
.y-2011 { background-position: -105px -120px;}
.y-2012 { background-position: -105px -180px;}
.y-2013 { background-position: -105px -240px;}
.y-2014 { background-position: -105px -300px;}
.y-2015 { background-position: -105px -360px;}
.y-2016 { background-position: -105px -420px;}

Explanation:

.postdate – Sets the width and height of the entire date stamp. In this case we are going to make our date fit into a box 70px by 65px.

.month, .day, .year – Sets the width and height of the individual elements that make up our whole date stamp. Our months and days are 35px wide by 30px high. The years are 25px wide by 60px high. When you put these elements together they make a box 70px wide by 65px high. It also attaches the graphic we made in step #1 so we can position it for each individual element in the Sprite.

.m-01 through .m-12 – are our months. This part of the CSS positions our image to display the months. As you can see I set the image to move on an X Y axis based on where it appears on the image. The easiest way to figure out where the top left corner (0,0) of each month, day, or year is on the larger image is to open up Photoshop and press ctrl-r to see the ruler. Set the ruler in pixels by right clicking the ruler and selecting pixels. Now follow the guideline to the ruler to see what pixel it is on.

.d-01 through .d-31 – Is used for exactly the same thing as .m-01 – .m-12 except their used for the days rather than the months.

.y-2009 through .y-2016 – Same as above only we use them for the years.

Step #4

Open up the loop in WordPress. Using the default WordPress setup, the loop in WordPress is in the page(s) that display(s) your blog posts. This is usually the index.php page. Dates show up on other pages too but this tutorial only replaces the dates in the main loop.

Search for something along this line in your loop:

<?php the_time('F jS, Y') ?>

Replace with these lines:

<div class="postdate">
    <div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?> </div>
    <div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
    <div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>

Step #5

Upload your image, and the changes to your CSS and index.php. Check out your page live in a browser to see the results! You just created your own styled date stamp using CSS sprites.

MichelleKayHamilton was designed and developed as a photography website. The goal was to create a site that could showcase the best photographs. The site features a full screen presentation for the photographs. Visitors can easily move between photographs and display the photographs in a slideshow. The site also includes a full featured photoblog with great social tools and a simplistic user experience.

Get Supersized

To display the images, the site uses a jQuery plugin called Supersized. This amazing plugin allows images to be displayed full screen and automatically resizes them with the browser window. It also allows transitions between images. Check out the plugin here.

SlideShowPro

I’ve said it before but SlideShowPro Director is the Content Management System for photographers. With the powerful API, you can access all of your images in various sizes and image qualities. The images are neatly organized in galleries and albums. Be sure to check it out if your looking for a system to organize your photographs.

The following article has an example of how to create animated navigation without the animation buildup: Quick Tip: Prevent Animation Queue Buildup » Learning jQuery – Tips, Techniques, Tutorials

It’s pretty easy to implement if you have worked with the WordPress API previously.

The first step is to prepare your HTML. Put it in your print admin page function. You want to have a text input for the image URL, and a button that will launch the uploader dialog.

<tr valign="top">
<th scope="row">Upload Image</th>
<td><label for="upload_image">
<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />
<br />Enter an URL or upload an image for the banner.
</label></td>
</tr>

The easy part is out of the way, so now it’s time to make your HTML do something. You need to enqueue some scripts and styles. Here’s an example function to show how it’s done:

function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
}

We need the media-upload script, the thickbox script/stylesheet and jQuery, which is already included. We also need to register and enqueue our own JavaScript file, my-script.js, which will handle the media uploader functionality.

The if (…) block ensures that the scripts and styles will only be included on a specific admin page. Your plugin’s (or theme’s) admin page URL should have a ?page=some_string at the end. Replace ‘my_plugin_page’ for that string.

Here is the JavaScript that calls the uploader. This will go in your my-script.js file.

jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}
});

The click() function opens the media uploader dialog when the “Upload Image” button is clicked. It also stores the name of the URL input field in a variable, for later use.

The second function overrides the send_to_editor() function in the media-upload script. This modifies the “Insert into Post” button in the uploader dialog so that it grabs the URL of the image that was chosen and stores it into the form.

That’s it. You should now have a button that allows you to add an image URL via the WordPress media uploader in your theme or plugin’s option page