Pixelated Opinions

The Markup Giveaway

Posted on the 12th of August, 2010 - http://tmblr.co/Zy5xKyuElP_

Update: The giveaway has now ended. Congrats to Chris Stewart who won!

As you may know, I recently launched a couple of icon sets as a personal project. I then set about plugging the link at every opportunity but to save my followers from any more of the same, I thought I would do something to not only help me with traffic but to help you too.

The idea came to me whilst thinking of something I could offer in return for folks tweeting a link to my icons. I don’t have spare money to buy gifts for people but I do have time and a keen eye for markup. So, here’s the general idea - you would tweet a certain message containing a link to my icons and back to here as well as be following me and I would pick somebody at random after a week to receive some web development as a gift and a thank you.

The Terms

• As mentioned above you must be following me, at least for during the competition period. 
• You must tweet the message exactly as it is below.

In terms of markup, here’s what I mean and what I’ll be giving away. The chosen winner would provide a design, PSD preferred and I would mark that up into clean HTML & CSS. The design should be finished when you hand over the file(s) to me and I will develop up to 5 pages for the lucky winner. The deliverables will be a ZIP containing your HTML, CSS, images files and JS if applicable.

The closing time will be 9am on Friday August 20th and the winner will be announced by 5pm on the same day.

The Message

So here’s what you need to tweet once you’re following me:

Check out @davemcnally’s free icons, http://j.mp/a2p9bF and win some web development: http://tumblr.com/xcyflo326

And that’s about it. So good luck, pass it on and let me know in the comments if you have any questions!

Custom, Dynamic Featured Image Links In Wordpress

Posted on the 06th of August, 2010 - http://tmblr.co/Zy5xKysUIS9

I’m testing out the latest Wordpress release for the upcoming Tileables design and I was glad to see a ‘Featured Image’ option for posts. I instantly thought it would be great to create the download images and have them inserted this way and it also fit my design better.

It wasn’t long though before I ran into issues. Firstly, the image wouldn’t link anywhere. I’m guessing this doesn’t function as it should? There’s a “Link URL” property you can fill in when choosing a featured image but it had no effect at all.

A quick search through the support forums shown that others had the same issues but most of them only wanted to link the image to the post and so had taken to their functions and wrote a custom function to throw in the loop that linked the image to the post permalink.

I wanted the image to link to a download pack instead though and changing the link for each post isn’t an option as the tag is within the loop, not the post so I needed something else.

Eventually, I thought of “post_name” and after a bit more searching, had an idea of how it would work. I would stick to a simple post slug and name my download packs accordingly, allowing me to dynamically link each pack image to its pack without editing anything.

In case you’re looking for something similar, here’s what I used. Remember though, this must be inside your loop:

<a href=”http://tileabl.es/<?php echo $post->post_name; ?>.zip”>
  <?php the_post_thumbnail(‘large’); ?>
</a>

To summarize that, I have the tag for showing the post image contained within a link and the filename is being pulled from my post slug.

Buzzword Addicts

Posted on the 03rd of August, 2010 - http://tmblr.co/Zy5xKyrcMfc

Can we please just stop saying HTML5 every time we create some current code?

I know there have been a couple of posts recently about folk using it as a buzzword but this isn’t simply rehashing the same thing. When we create a standard page, we’re writing HTML. We’re not writing HTML5. It may be the case that we use the new doctype and some new elements introduced in this version but we are still just writing HTML5 (ironic typo…) HTML!

The same goes for CSS. We may be using features introduced in an updated spec but we’re not writing CSS3, just CSS. Before this, we never told people that we were creating things such as a HTML4 page, we just said HTML. We don’t tell people we made a CS5 graphic, it’s just a graphic. You see where this is heading…

Anyway, how about we just stick to writing HTML and CSS regardless of spec? Okay? Good.

Written on my iPhone. Please excuse the length, errors and impulsively published thoughts!

The Current State Of HTML5 Video

Posted on the 15th of July, 2010 - http://tmblr.co/Zy5xKymXgmb

Again, inspired by HTML5 For Web Designers, I set about testing the <video> element and seeing how simple it was, I thought it would be a quick process.

If it only was as simple as writing out the code. Needing to use different formats isn’t the problem. Getting the correct format working, especially when it comes to Theora, was a bit more problematic.

For those unaware of the requirements: some browsers require a certain format whilst others require a different one and here’s a quick rundown of what I tested. I’ll clear up browser versions first so you know what I tested on. All of the following are running on Windows too. I used Firefox 4.0b1, Opera 10.60 (3445), Chrome 6.0.458.1 and Safari 5.0 (7533.16).

And now for the video formats tried:

• OGM
• OGV
• OGG
• MP4

OGM

OGM worked completely in Opera with no problems. It worked in Chrome with some minor glitches in the video controls - the volume control wasn’t working. Safari and Firefox wouldn’t play the format at all.

OGV

Webkit won here with both Chrome and Safari having full compatibility. Opera and Firefox showed no support at all.

OGG

OGG was the most widely adopted, being fully support by Firefox, Chrome and Opera. Safari wouldn’t play it though - there’s always one! Even though OGG had the most support, it was the most difficult file to create. I was converting an MOV and several programs crashed mid-way whilst others forgot the audio. The only successful conversion I did was in VLC and using the Vorbis codec for audio.

MP4

MP4 was fully supported by Chrome and Safari but had no support in Firefox and Opera. This would be my format of choice and one I hope the others pick up. It may not be ‘open’ as Theora is but it’s much simpler to create and work with!

That about wraps it up. I ended up settling on OGG with MP4 fallback for Safari. It’s not a perfect solution yet but it sure beats having Flash crash the browser! Here’s the code if you’re interested and yes, I know I didn’t have to close the source attributes but I like keeping the code neat:

    <video controls preload=”auto” width=”320” height=”240”>
        <source src=”media/vid.ogg” type=”video/ogg” />
        <source src=”media/vid.mp4” type=”video/mp4” />
    </video>

To clear that up if you wondered, “controls” calls for controls to be displayed and the “preload” attribute has the video buffering in the background without automatically playing it.

I’m not sure if these results are the same on other platforms so you may want to check that.

Want Some Head?

Posted on the 12th of July, 2010 - http://tmblr.co/Zy5xKyluTsK

Please don’t take that title literally. Please.

I’ve been catching up on some HTML5, thanks to Jeremy Keith’s HTML5 For Web Designers and instantly started playing around with new elements and testing things. I decided to create a new basic template to re-use on each project where it was feasible and then I decided to share it.

It’s nothing advanced, but for those new to HTML5 or new to HTML completely, it may be useful to start creating some pages of your own.

You can download the HTML page here: http://db.tt/dDrJwp - It is currently configured to use Andy Clarke’s Universal IE6 Stylesheet, Modernizr and a HTML5 Reset Stylesheet.

Only the HTML file is included as you can either link to the files mentioned above or visit the respective sites and make sure you have the latest versions. There’s also a pretty decent chance I messed something up or have made mistakes I haven’t spotted so please feel free to comment on those and I’ll update.

You can also just copy/paste from below if you prefer. Apologies for the lack of styling here, I’ve not tested code in this theme before:

<!DOCTYPE html>

    <!— The Class Is For Modernizr —>
    <html lang=”en” class=”no-js”>

        <head>
           
            <title>HTML5 Template</title>
            <meta charset=”UTF-8” />
            <meta name=”author” content=”” />
            <meta name=”keywords” content=”” />
            <meta name=”description” content=”” />

            <!— See http://j.mp/9K4o1V For Release Updates —>
            <link rel=”stylesheet” href=”css/html5reset-1.4.1.css” />

            <!— Global Style For IE6 By Andy Clarke. See http://j.mp/aB5TSl For Release Updates —>
            <!—[if ! lte IE 6]><!—><link rel=”stylesheet” href=”css/master.css” /><!—<![endif]—>
            <!—[if lte IE 6]><link rel=”stylesheet” href=”http://universal-ie6-css.googlecode.com/files/ie6.1.1.css” media=”screen, projection”><![endif]—>
           
            <!—[if IE 7]><link rel=”stylesheet” href=”css/ie7.css” /><![endif]—>
            <!—[if IE 8]><link rel=”stylesheet” href=”css/ie8.css” /><![endif]—>
           
            <link rel=”stylesheet” href=”css/print.css” />

            <!— See http://j.mp/aP5V5F For Release Updates —>
            <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
           
            <script src=”js/modernizr-1.5.min.js”></script>
            <script src=”js/custom.js”></script>

        </head>

        <body>
        </body>

    </html>

Hope this helps somebody as it’ll sure make my projects that bit quicker!

Selling 36400 Unique Pixels

Posted on the 12th of July, 2010 - http://tmblr.co/Zy5xKyllxW3

With the launch of Tileabl.es, I eventually made the choice to try out some advertising on the site but wanted something slightly different.

I didn’t want a load of 125px squares plastered all over the place and the aim of the site was, and still is, not to make money - it would just be a bonus to make a little something back for the continued efforts of creating new packs.

So, I signed up with BuySellAds and created a unique ad spot with them. The advert is a custom image of 260px x 140px and only one space is available so chosen ads won’t be rotated throughout the purchased time period. As for purchasing, the price is only $20 too! That has to be a bargain even if I say so myself!

To make things a little more unique, I’ve turned off auto-approvals as I don’t want to advertise anything and would like to give the space to some nice folk in the creative industry. If I already use a certain product, or it seems like one I would like, then I’d be happy to advertise it.

There you have it. If you have anything awesome you would like to advertise or know somebody who might, please pass it along and check out the listing!

Add Twitter Profiles To Your iPhone Contacts

Posted on the 24th of June, 2010 - http://tmblr.co/Zy5xKyhaXEN

I posted a note about this on Twitter and it seems I wasn’t the only one who had not seen it before. My instructions weren’t too clear either as I only had 140 characters at a time. Basically, I noticed an option to add Twitter profile information to your iPhone contacts and it can be done a couple of ways.

The first of those is through the Twitter iPhone app. Look up the profile you wish to add to a contact and you should have a screen similar to this:

Tapping the contact card icon in the top right will take you to the following info screen:

You can then tap ‘Create New Contact’ or ‘Add to Existing Contact’ which will bring up your iPhone contacts. You would then choose the corresponding contact if one already exists and there you go. Their Twitter username along with their avatar will now be visible on the contact screen for that person:

The benefit of this technique is that tapping the Twitter username on a contact like that would open up their Twitter profile within the Twitter app. A possible downside of this though, is that it will also pull in their Twitter ‘short bio’ information too and add that as a note.

The other method of adding the information just involves adding a label to the URL field when editing a contact. You want to choose to edit a contact, then tap the label on the URL field. This will take you to the following page:

You can then tap ‘twitter’ at the bottom if it exists or choose ‘Add Custom Label’ and enter it there. After that, you want to add the Twitter username into the URL field. You should use the following convention so that it links the profile with the Twitter app and will open it when tapped:

“twitter:@yourtwitterusernamehere”

Enter that into the URL field and save your contact. The info will now link to the Twitter app but note that doing it manually, you won’t have their avatar or bio pulled in.

That’s about it. A nice, simple feature that it seems not everybody knows about!

Introducing Tileables

Posted on the 14th of June, 2010 - http://tmblr.co/Zy5xKyfalsZ

I recently launched Tileables and thought I would post a couple of thoughts behind it here.

The main reason for me making the site was actually just out of boredom. I had a gap in client work and rather than spending all of my time playing games, I decided to make something interesting and hopefully something that people will find useful.

There are plenty of places offering swatch and shape downloads for Photoshop but not so much on the pattern front so when the idea came to me, I just threw it together!

Design wise, I wanted something quick and simple to begin with as I launched with only one pack. I stuck to a static, single page that made use of repeating patterns to fit in with the theme. I’ll be adapting the design into a CMS and making changes as needed.

I plan to keep making more pattern packs which will be significantly bigger than the first so go take a look, download the pack and have some fun!

Don’t forget to follow Tileables on Twitter for updates of new packs.

My Take On Privacy - AKA The Facebook Post

Posted on the 01st of June, 2010 - http://tmblr.co/Zy5xKyc_ZUN

Recently, it seems to be pretty popular to quit Facebook. Their privacy settings were too complicated for some people and subsequently, they never bothered changing them. The problem there is that Facebook naturally wants your data to be public. The more public you are, the more money they can make from you.

This is a bigger problem than just Facebook though. Quitting there won’t help you elsewhere. I think it’s something that a lot of people overlook when posting photos, videos and bits of text online - myself included. More and more location based apps and services are being used and others are already pointing out the dangers of being too specific when sharing your details with strangers.

Let’s not forget, if your information is online and not explicitly private, random strangers can and probably will come across it. Whether or not their intentions are malicious is beside the point - the fact that they found it should be something you’re thinking about when posting content online.

I’m fairly open with my online activities but have recently tightened up some of my settings such as having certain content private that just doesn’t need to be shared. When posting something publicly, you may not be handing out a link actively but that publish button is doing it for you.