my name is michael ciccarelli and i'm a web designer & developer out of buffalo, ny. currently available for freelance and other opportunities.

Alternate Post Styling

| no comments

article

On the homepage of a WordPress site I was working on, I wanted to display the most recent post completely (not just the excerpt) while the next 9 showing the excerpt only. I also wanted to include a post image and other additional meta data for better usability and also to make the latest article stand out from the others.

My initial approach was to use the is_home() conditional tag from the WordPress Codex. Problem with this method was whenever you browsed through the previous 10 entries using the navigation links on the home page the next 10 articles would be displayed in the same manor as the first 10; The top article would show as a full post while the next 9 would show excerpt only, even tho the top article is not always the latest article published.

So what I wanted to achieve was, when a user lands on my homepage they would see the latest article’s full content and in reverse chronological order and 9 more posts showing the excerpt only. If the user clicked the navigation links (previous 10 entries) I wanted the next 10 entries to show their excerpt’s only without a full post at the top.

After thinking about it for a couple minutes there was a simple solution by adding a simple counter to my while loop and evaluating what number post (of 10) was being returned and returning 2 different results.

If the count is at 0 (1st time through the loop) and we are on the the homepage then return the_content rather then just the_excerpt:


<?php while (have_posts()) : the_post(); ?>
    <?php static $ctr = 0;
        if ($ctr == "5" && is_home()) { break; }
  else { ?>
  <div class="post">
      <h4><a href="<?php the_permalink(); ?>" title="Permalink to &quot;<?php the_title(); ?>&quot;"><?php the_title(); ?></a></h4>
      <p class="meta"><?php the_time('F jS, Y') ?> | <?php the_category(', ') ?><span class="alignright bubble"><?php comments_popup_link('0', '1', '%'); ?></span></p>
      <div class="entry">
                <?php if ($ctr == "0" && is_home() && !is_paged()) { the_content("Continue Reading..."); }  else if { ?>
          <?php the_excerpt('Read the rest of this entry &raquo;'); } ?>
            </div>
        </div>
    <?php $ctr++; } ?>
<?php endwhile; ?>

This is a very basic example of what you can do with this, you can also use this to display the number of posts to display within your loop, rather than the default “10″, but be creative and and experiment with this to make your latest WordPress post stand out from the previous entries anywhere you might be listing your posts.

SEO Tip: Use Of Keywords

| 1 comment

article

One of the the most important parts of optimizing your website for search engines is to target a select few keywords that you would like to rank well for and sprinkle these terms throughout your pages and domain. A great tool to use when optimizing your site is seo-browser.com, this will allow you to view your site from a robot’s point of view and allow you to control how your site is recognized by search engines.

Domain, Page Titles & Permalinks

If you haven’t decided on a domain yet, keep in mind that having your keywords inside your domain is very good for SEO. For example if I’m a photographer living in New York city and would like to rank well for the term: nyc photography then having the domain name http://www.nycphotography.com would be perfect. Unfortunately many if not every popular/competitive term’s .com has already been registered, alternatively we can use the keywords within the domain by adding in other words (IE. qualitynycphotography.com) or use other available extensions than .com.

If you already have a domain you’ve been using or just want to stick with your business or own name within the domain for your website, then what I recommend is to build an interior page using your keywords as the permalink. For example on my own site I made the interior page http://michaelciccarelli.com/las-vegas-web-design/ since I would like to rank for the search term las vegas web design.

pagetitle_permalink

Since I use WordPress to power my websites/blogs there is a plugin that controls the Page Title and permalink of each page on your site called All In One SEO Pack. This plugin dynamically writes the Page Titles and permalink for each post/page your publish based on the title you assign to it within the Post/Page Editor.

Use of Headers (H1 tags)

If you’ve used the seo-browser tool I mentioned above you should now have a good understanding of what a “bare-bone” version of your website minus all images and styling looks to a robot/spider, who cannot see these items. The only significant different in the appearance of your content would be the different sizes in type. Although the report isn’t using any styling H1 tags are still the largest text seen and most prominent, while other headers, ordered lists, paragraphs and other basic text styling is still some-what supported.

Since H1 tags are viewed as ‘more important’ than the other content on your page to the bots, the text within your H1 tags should most definitely contain your desired keywords. This way you know your website is being associated in some way with your desired keywords and actually related to the search term. I like to have an H1 tag on each website I make containing the keywords I am targeting, followed by another heading (h2 or h3) containing a brief paragraph describing what the website is about and to use more keywords.

Maintaining your design while bettering it’s search engine presence.

If you’re design doesn’t call for it to have type displayed at the top of your website there are many styling tricks you can use so the mentioned headers and content still load first on your site while it might not appear so for the end-user. Some methods I’ve used in the past are:

The use of the Absolute position
Using relative and absolute positioning within your stylesheet gives you the ability to set the order of items within the code of your website to load an item first on the page but have it displayed at the bottom of your site, when loaded within a browser. The benefit of this is to maintain the look and design of your website while ensuring the important content is rendered first when spiders and bots crawl your page for search engines.

Javacript that will give the user ability to toggle between the visibility of content
Using a pretty simple jQuery drawer script you can include content to be loaded at the very top of your page, but not visible to a user browsing your site with a javascript enabled browser. This way the user has the option of clicking an “about us” link somewhere in the header that will display the once hidden content from the site. Since bots and spiders do not support javascript the content is not hidden from them and since the content is loaded at the top of the page this content is consider important and assuming your keywords are included should be very beneficial for SEO.

Anchor Text

Robots tend to look at hyperlinks as prominent content and from my experience I know it is important to use proper anchor text and populate the title tag. The following is a good example of a hyperlink you should have on each page of your website (and others) if you are trying to rank for the keywords las vegas photography:

<a href="http://somelasvegasphotograper.com" title="Las Vegas Photography">Las Vegas Photography</a>

Remember to use ALT and TITLE tags

Bots and spiders cannot read images therefor if you’re using images to display titles and headers on your site, it’s important to use the ALT and TITLE tags to images, so the bots know what the image is. Here’s an example of how a banner image, that includes the text We provide quality graphic design services, should be included on your page (so bots can pick up on what message the image is suppose to give):

<img src="http://yourdomain.com/banner.jpg" alt="We provide quality graphic design services" title="Graphic design services" />

Conclusion

In brief, some very basic optimizing can be done by simply including your keywords throughout the content of your website pages. Although you should not completely saturate your website with your keywords, since search engines may penalize you if they think you are trying to manipulate the bots, however a strong presence of your keywords can be proven very beneficial to your page rank.

The Art Of Font Embedding

| no comments

article

Soon after launching of my latest redesign I’ve spent a great deal of time on the use of typography throughout the site. I’ve been teaching myself different font embedding technologies in order to use a specific font of my choice, rather then the standard web safe fonts you see everyday all over the web. In this article I’d like to share these methods and give my brief thoughts on each.

@Font-face

The @font-face rule will allow you to embed a font on your server, just as you would link to images within a stylesheet. The biggest problem with @font-face, besides the issue of browser compatibility, is that most font licenses do not allow you to serve the fonts over the web. Being a web designer and all, I felt achieving identical cross-platform appearance throughout my site was important, so I decided not to use this method and to try something else.

Web Fonts Embedding Support Matrix

Web Fonts Embedding Support Matrix

Installation of @font-face

1. First you need to embed the font of your choice using the following CSS syntax:


@font-face {font-family: "Axel";src: url("font/Axel-Regular.ttf") format("TrueType");}
@font-face {font-family: "Axel";font-weight: bold;src: url("font/Axel-Bold.ttf") format("TrueType");}
@font-face {font-family: "AxelSC";src: url("font/AxelSC-Regular.ttf") format("TrueType");}
@font-face {font-family: "AxelSC";font-weight: bold;src: url("font/AxelSC-Bold.ttf") format("TrueType");}

2. Next you will reference the font to be used and declare the use of alternative fonts.


h1,h2,h3,h4,h5 {font-family: AxelSC,Georgia,Times,'Times New Roman',serif;font-weight: normal;color: #333;line-height: 22px;}

Following those small steps above you’re website’s headings (h1,h2,etc.) will all use the font specified and embedded on the server, regardless of the fonts installed on the users computer. Of course as I already mentioned this method just simply is not support by all browsers, so I decided to take a different approach.

Cufon

Cufon is basically a new and improved version of Typeface.js, with a focus on faster and easier implementation. Cufon loads very fast, since it is all JS and nothing more and the only real problem with it is that the font cannot be selected. Since I was only really interested in using rich typography on my headings and not the main content of my site, i decided this was the best solution for me. If you run a commercial website, I wouldn’t recommend using Cufon, since as far as I know it violates EULA and copyrights due the fonts being embedded.

Installation

Here is a very good tutorial on how to get Cufon installed on your site: http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/

Following the article above I was able to get Cufon up and running on my site within 30 minutes or so and am pleasantly surprised with it’s results on all platforms I’ve tested in.

Conclusion

Until recently, web designers were limited to working with the fonts of their end-users computer. Image replacement tricks and clever technologies such as sIFR have opened up new possibilities, but none of these are terribly easy to work with. We’ve recently made good progress in what is possible for type on the web because of the growing support for CSS 3′s @font-face property, as well as new technologies like Cufón and Typekit.

How I Killed My iPhone

| 1 comment

article

With the recent hype about iPhone 3.0 OS, I decided to jump the gun and try installing 3.0 in it’s beta stages on my own iPhone, which resulted in the death of my iPhone.

First, I downloaded the iPhone 3.0 restore file (iPhone1,2_3.0_7A238j_Restore.ipsw) via bit torrent and attempted to manually restore my iPhone from iTunes with the 3.0 file which was located on my desktop. Everything was going smoothly, it took a couple of minutes for the update to install on my iPhone then my phone restarts and I see this lovely screen in iTunes.

unable-to-activate-30

After doing some research I learned that in order to use the 3.0 beta OS you must be apart of the Apple Developers Program which came along with a price of $99/year for the standard package and $299/year for the enterprise. At this point I figured I’d just wait a couple months for the 3.0 OS to be released to the public and decided to restore my iPhone to latest backup which was that day, before I attempted the 3.0 upgrade. Unfortinuately there was no way to restore my iPhone from iTunes, so after a bit more research, I learned that by a specific key stroke I can reboot my iPhone in something called “Restore Mode” which will give me the option to restore my iPhone from iTunes from a file on my computer.

I was able to successfully restore the 2.2.1 OS on my iPhone but after the completion of the software update my phone would reboot as always and iTunes would give me the error below (1013). Apparently the baseband that comes with OS 3.0 won’t downgrade using any method on either the 2st Gen or iPhone 3G. There is no unlock for the new baseband (or the current one for that matter).

When you DFU restore to 2.2.1 iTunes will give you an error at the end (most likely 1015 or 1013) indicating a baseband/firmware mismatch.

So feeling pretty frustrated at this point, I decided I would just put 3.0 back on my iPhone and purchase the Developers Program from Apple. I filled out the application and at the end was notified that the Application has been submitted and I will be contacted by a representative within 5-7 business days. Meanwhile I have no phone, so I figured the best thing to do at this point would be to bring it in to the Apple Store and have them take a shot at recovering it.

Of course the Apple Store in the Fashion Show mall was busy and had no openings to see me until the following day. I was without my phone for over 24hours and it was pretty bad, but when I finally got it into the Apple Store, they attempted the same restore I did, failing as I did and ended up just replacing the device with a new one.

So all is well again and I guess I’ll just have to wait like everyone else for MMS, Landscape texts, Internet Tethering and copy & paste.

Better Anchor Text On WordPress Post Excerpts

| no comments

article

I tend to use post excerpts (the_excerpt) on the home page and archive views of a blog rather than full posts (the_content). Using the excerpt controls the size of each post and provides a clean interface for readers to scan content. However, I think it’s better to have a permalink with custom anchor text trailing each post excerpt rather than the default [...] text providing no usability.

There are plugins for this, such as The Excerpt Reloaded. I for one always try to keep plugin usage to a minimum and this can be done very easily by adding a small function to your theme files.

Open your theme’s functions file or functions.php in your themes directory, if you doen’t see a functions.php file you can create it, and add the following code:

//function to replace trailing text on the_excerpt
function customtrail_excerpt($text)
{
return str_replace('[...]', '<a href="'. get_permalink($post->ID) . '">' . 'Continue Reading &hellip;' . '</a>', $text);
}
add_filter('the_excerpt', 'customtrail_excerpt'); 

Your post excerpts should now look something like this..

making the trailing text S.E.O. friendly anchor text

Making the anchor text dynamic instead of a default “Read Now” or “Continue Reading” is great for Search Engine Optimization. First we need to add another function to our theme files (functions.php) that will go out and get the content of a custom field from our posts meta data. This custom field should be named “anchor” and if you populate this field while writing a post, your custom anchor text will display at the end of each post excerpt as anchor text linking to the permalink of the post, otherwise a default “Read More…” will display in the brackets.

Below is the updated code featuring the additional custom fields function and also some changes to the original Custom Trailing Text function I posted above. Instead of just returning static text it will look for the custom field of “anchor” and display this text, otherwise display the default “Read More…” trailing each post excerpt.

//function to get custom fields outside the loop
function get_custom_field($key, $echo = FALSE) {
  global $post;
  $custom_field = get_post_meta($post->ID, $key, true);
  if ($echo == FALSE) return $custom_field;
  echo $custom_field;
}
//function to replace trailing text on the_excerpt
function customtrail_excerpt($text)  {
  $customanchor = get_custom_field('anchor', false);
    if(!empty($customanchor)):
      $anchortext = $customanchor;
    endif;
    if(empty($customanchor)):
      $anchortext = 'Continue Reading &hellip;';
    endif;

  return str_replace('[...]', '[<a href="'. get_permalink($post->ID) . '">' .  $anchortext . '</a>]', $text);
    }

    add_filter('the_excerpt', 'customtrail_excerpt');
 ?>

Your post excerpts should now look something like this…

How Apple TV will replace my digital cable

| no comments

article

appletv I picked up a new toy at the Apple Store the other day. I was skeptical about it at first, since it doesn’t get the best reviews, nor is it the most popular Apple product, but so far I think it’s the perfect solution for me. I don’t watch much TV but when I do it’s usually pretty late at night and nothing actually good is on. For example I use to watch The Office every week, which airs at like 8/9PM on NBC problem is I’m never watching TV around that time to catch the new episodes. I know there are solutions, such as TiVO and DVR to accommodate me, but they come with monthly service fees and hardware rentals.

One of the first things I did after unpacking the Apple TV was hacked it using the following tutorial: Hack Your Apple TV With Boxee. It was a painless process and only took me 20 minutes to do. Now that I have installed the patch I can now watch any type of DRM free multimedia (e.g., DIVX, AVI, MKV, ISO and BIN) from any computer connected to my network. I can even play multimedia through internet streams (e.g. hulu, YouTube, podcast videos) which consist of a large collection of movies as well as many popular TV series. As long as you have a good internet connection, the video streaming works flawlessly and it’s nice to be able to browser through all the episodes of your favorite TV series and watch the latest episode from the series when you’re ready to watch it.

Even without hacking the Apple TV you can still rent or buy all new DVD titles and TV series for a reasonable price, but with the Boxee Patch you aren’t required to purchase anything, really. Another feature that comes with the Apple TV is the ability to share iTunes libraries on your network. So if you have a desktop computer on your network with all your music and videos, the Apple TV will make all the media available to you, similar to the Remote iPhone application. The Apple TV also makes it easy to stay up to date with your favorite Podcasts, if you enjoy a specific podcast, you can set it in your favorites and watch the latest episode as soon as it comes out.

Now I just need to find a good Home Theatre system and I’ll be set up nicely in my home office.

Web Hosting and Online Gambling Links

| 1 comment

link

I doubt that I will ever understand the laws with online gambling, but I do not see how having an educational website that does not take any kind of wagers itself but may link directly to sites that do, such as FullTilt.com or PokerStars.com could be considered illegal or against any Acceptable Use Policy (AUP) for a United States hosting company.

I mean I’m not mad about the situation at all, just a little surprised. I started looking around for a new host after my current hosting provider told me they couldn’t provide me with any unique C Class IP address for SEO reasons. I started asking around and got the following email from Rackspace.

Hello Michael,

This is Amie Naber from Rackspace Hosting. We had a chat last night on the website regarding a potential hosting project. I just wanted to let you know that I have received a reply from our AUP department. They said that if there is any direct links that point from your site to gambling link then we will be unable to host your site. So your site would not be able to send any customers directly to any gambling sites. If this is something that your site complies with, we can certainly host your site for you. Please do not hesitate to email or call me if you have any questions at all.

Thank You,

Amie Naber

This makes me a little nervous about my current hosting provider, what if they realize I have direct links to gambling sites and this violates their AUP as well. Can they just shut me down ? That would not be good. I better do some research and if necessary seek hosting outside of the US.

Hacking iTunes

| no comments

article

I’ve recently picked up a few iPhone/iTunes tricks that I’d like to share with those of you that would like to do the following:

Creating Custom Ring Tones with iTunes only

Using the instructions in this article I can now take any DRM free music (MP3s) from my computer and convert them into perfect quality ring tones without paying iTunes $1. Not that I’m cheap or anything but it’s nice to be able to create ring tones from any song you’d like and not be limited to the few songs iTunes offers as ring tones.

In short what your doing is clipping the song down to 30 seconds or less, converting the .MP3 into iTune’s AAC format (.m4a) then renaming the file extension .m4r so iTunes recognizes the media as a ring tone. It’s really quite simple, and only takes a couple of minutes.

Synchronizing your iPhone with multiple iTunes Libraries/Computers

sync-warning

In my opinion this should be an option to any iPhone owner. I understand why Apple designed it this way, so you can’t just plug in your iPhone to any library and steal other peoples music, but what if you have 2 computers of your own, both sharing a library on an external HD on your own network? I’m sure there are a ton of other scenarios where people would want to synchronize their iPhones with multiple PCs and not lose the data from their device.

Thanks to this article I can now sync all my Contacts and iCal with my Macbook, while I control which music I want on my iPhone using my desktop PC. Basically I changed the library ID on my PC to match the library ID of my Macbook so iTunes thinks it’s the same library each time I synchronize. Just be careful with these steps, you could very easily mess things up.

Synchronizing Blackberry with Mac OS X

| 1 comment

article

I’ve been using a Blackberry for some time now, longer than I’ve owned my Macbook. Originally I was always under the impression that there was no way to Sync my Blackberry contacts and calendar with Apple’s iCal and Address Book, without purchasing additional software. So I was content on syncing my Blackberry data with Outlook on my Windows PC, then to my Gmail account in order to get this data to my Macbook. It was a pain in the ass so I never did it much. Typically just used my Blackberry device as my main source for everything and periodically would sync with my PC as a means of backing up in case something was to happen to my device.

Anyways I recently found a simple and free solution to Synchronize my Blackberry user data with OS X’s iCal, Address Book and StickiesNotes. It’s called Pocketmac.

 

A quick tutorial

If you need me to hold your hand through the steps
 

My setup

  1. First Download: Pocketmac and install it (you will need to reboot).
  2. Open up Pocketmac and attach your Blackberry device via USB to your Mac.
  3. Run through each tab representing your Blackberry user data (Contacts, Calender etc.) and check the desired OS X application you wish to sync with.
  4. Once you got everything checked, proceed to the giant green “Sync” button to the top right and click.
  5. That should do it, give it a few minutes to synchronize everything, and then confirm all of your user data made it from your Blackberry to your designated OS X app.

and heres a little doodle for the lazy, non-readers…