Rebuild of California Autism Foundation site complete

New California Autism Foundation site

We’re very pleased to have been selected to redesign and rebuild the website for California Autism Foundation.  This foundation provides services for all people with autism in the state of California, ranging from children to seniors.  Their new site is designed to be clear, clean and simple.  Kimberlee DiBartolo provided copy and selected the excellent photography for the site.

May 15th, 2013 is launched header including links to the top 10 most popular feeds

Over at our new Katanaa blog we were pleased to announce the launch of a new web application that makes it super easy to read and discover new RSS feeds on your mobile device.

Check it out: – Mobile RSS Reader

November 2nd, 2006

Craigs List ad for PHP Developer

We’re currently looking to hire an awesome php developer for part time / contract type work.

Serafini Studios is looking for a part time / contract web developer with extremely strong PHP, MySQL and AJAX skills.

This can easily be a nighttime / weekend position if you have a day job. If you are good you probably have a day job. We have a couple of projects coming up that require very strong, very detail oriented PHP + DB skills. Some involve cleanup work. Some involve PHP-based CMS.

We are working to establish better in-house AJAX capability. If you’ve been keeping up with the latest developments in user interface, HTML, CSS, Javascript, etc… then we would like to see some of your work.

You must provide 2-3 links to your work, or work you’ve contributed heavily towards. Describe your involvement. We’re looking for people who can go start to finish on a project. You must be cool. You must get along with others. You must think of customers as, well, customers, who deserve to be treated with respect and love. Although we do have a Project Manager to help with that too… 🙂

Describe why you would like to join a rapidly growing highly skilled group of Open Source fans who love the latest in sweet user interface design, high high quality coding like you’d like to show your mom, what some of your recent interests have included. If you blog, (and who doesn’t these days…) give us a link to your site. We want to get to know you. And if you’re cool and have the chops we’d like to include you on some projects. Some may have the potential to be full-time for a period of months, but this right now is mainly for smaller independent contractor type jobs.

So, give us some links to your work, an idea of what you’d like to be paid, and what your immediate and general time availablilty are. Once again, this is not (currently) a salaried position. More of a ‘if you’re awesome and have some time to work on cool php projects’ type position for now.

Gabriel Serafini

Welcome to Serafini Studios

March 29th, 2005

Gateway Realtors® site is now live

Greater Gateway Association of REALTORS®, Inc. homepage

The website for Greater Gateway Association of REALTORS®, Inc. is now live. We’re still working on finishing the directory code, but the rest is up and looking pretty good.

Check it out:

November 9th, 2004

Greater Gateway Association of REALTORS®

We recently began work for the Greater Gateway Association of REALTORS® new website and logo. So far, just the new logo is up on their site ( plus the link to their old site. We’ve got some cool things planned for this site. It will be a huge improvement over the previous site… 🙂

August 5th, 2004

The Problem, the Balloon, and the Four Bedroom House: A List Apart

Nice article at A List Apart on project management and the necessity of understanding of the problem that needs to be solved at the beginning, rather than the end, of a project.

The Problem, the Balloon, and the Four Bedroom House: A List Apart

Many project managers believe a project has a beginning and an end. Everything that happens within those parameters can be dealt with by a methodology and a good framework of processes. What they forget is the emotional core of a project and the questions that need to be asked: Why does this project exist? What benefits will it have? What features will express these benefits? How will it make users more efficient, effective, and happy?

April 16th, 2004

Upgraded to WordPress .73 from CVS

Just upgraded to WordPress version .73 mainly because of the search-engine friendlier urls it now has built in.

Instead of the archived post links being in the form /blog/posts/18 they are now written as /blog/archives/2003/10/24/google-adwords-article.

Thanks for the great work, Matt! 🙂

I need to work with the calendar again to get it to follow the same structure.

Still need to re-do the archive links from within the calendar. Might try to submit to CVS. Possibly.

October 30th, 2003

How to: Add "marching ants" Photoshop selection style to your links

Something I’ve thought could be interesting for a while now is a way of using CSS to create a link style that mimics a Photoshop selection (commonly referred to as marching ants).

I finally created the graphics and figured out the code. It adds just under 13k to the size of your pages (on the first load). After that it is cached and should not add any additional load on your pages.

Here is a sample link: selection_back-link.gif

Before you click on the link, the text should have a moving border similar to a Photoshop selection and a yellow background. After you click the link, the text should lose the yellow background and you should see the dashed border stopped and greyed out. The hover state should be a slightly darker orange color.

Want to use this effect on your site?

1. Add the following style information to your style sheet:

/* Style adding "marching ants" selection effect to links */
/* CSS and graphics by Serafini Studios - */
a.ants {background:#ffffcc url(/images/selection_back-link.gif) top left no-repeat;text-decoration:none;color:#000000;
a.ants span {background:#ffffcc url(/images/selection_back-link.gif) bottom right no-repeat;
a.ants:visited {background:#ffffff url(/images/selection_back-visited.gif) top left no-repeat;text-decoration:none;color:#000000;}
a.ants:visited span {background:#ffffff url(/images/selection_back-visited.gif) bottom right no-repeat;}
a.ants:hover {background:#ffcc66 url(/images/selection_back-link.gif) top left no-repeat;text-decoration:none;color:#000000;}
a.ants:hover span {background:#ffcc66 url(/images/selection_back-link.gif) bottom right
a.ants:active {background:#ffcccc url(/images/selection_back-link.gif) top left no-repeat;text-decoration:none;color:#000000;}
a.ants:active span {background:#ffcccc url(/images/selection_back-link.gif) bottom right

2. Upload these 2 graphics to your /images/ directory:

3. To make the ants march around your link, use the following code:

<a href="http://yourlinkhere/" class="ants" title="Link title here"><span>Linked text</span></a>

There are two inline elements at play here – the <a> and the <span> tags. By applying a background:url(...) style to each and using the positioning elements (top left and bottom right) we are able to position the top left of the animated marching ants graphic behind the <a> tag and the bottom right of the graphic in the background of the <span> tag.

Known Limitations:
If you are linking more than one line of text, the effect gets screwed up. Also, different browsers will render this in slightly different ways.

If you use this code, I ask that you add a comment below and indicate the URL where you are using the code. Also, if you have any suggestions for improving this, let me know, or if you find it breaks horribly in any given browser add a comment. Thanks.

October 29th, 2003

New navigation template system completed

I just finished last night the new navigation and template system for this site. It is coded from scratch for the navigation style above — a main level and sub navigation links below.

The template for the site is now also all controlled by one file, so making updates should be easy. Adding a new page means copying a new PHP file, adding the new content, then updating the navigation template to include a reference to the page.

I’ll probably post the PHP code for this soon. It doesn’t require any database or special functionality, other than a familiarity with how PHP works.

October 26th, 2003

Now using mod_rewrite for blog urls

After reading a number of sites that discussed the use of Apache mod_rewrite I finally decided that it was time to try implementing this powerful technology.

I found the simple explanation given at was very helpful. I used the supplied rules to implement mod_rewrite for this blog.

Here is the .htaccess file currently being used:

RewriteEngine On
RewriteRule ^posts/(.*)/(.*)$ index.php?p=$1&c=$2
RewriteRule ^posts/(.*)$ index.php?p=$1
RewriteRule ^topics/(.*)$ index.php?cat=$1
RewriteRule ^archives/(.*)$ index.php?m=$1

I did end up hacking WordPress a bit to get it to write out my desired url format on its links. It looks like the current code has the option to do “search engine friendly” urls, but it is currently commented out. So I did a bit of searching for the places where the tags are written out and made some changes. 🙂

Eventually maybe I’ll work on the code some more so that the urls can turn into format (even more search-engine-friendly).

Just upgraded to the latest version in CVS of WordPress, and thanks to Matt have this functionality now built in. See this post for more details.

October 12th, 2003