Web Design & Development

You are currently browsing the archive for the Web Design & Development category.

A Sad Day for PlayPumps.org Site

October 28, 2009 in General Discussions, My Work / Portfolio, Web Design & Development by system | No comments

Today I woke up to check the sites I worked on that I was getting ready to submit to a few awards and when I got to PlayPumps.org I at first thought something happened to the DNS or the site template on Backbaud Sphere (Kintera Sphere) only to finally find out they did it on purpose.

Here is the site Before (left) & After (right):
PlayPumps International Befor new CEO PlayPumps International After new CEO

PlayPumps.org was the main site for PlayPumps International, with the primary portion of the site hosted on Kintera Sphere (now Blackbaud Sphere) which manages all of their online forms, donation and constituency as well as most of their content web pages.

The blog, gallery, and the videos were all managed on a sub domain blog.playpumps.org which was running an instance of WordPress which I had customized while working for Changing Our World Inc.

The blog functioned straight forward like a blog, that is the main tool in WordPress anyway so the only change there was to styling and layout. For the gallery the Flickr API was used to create a custom layout and pull in all of the photos, comments and tags used on Flickr. The images could then link to a larger version in a light box or to the original image in Flickr whichever they decided. The video was all YouTube based, so using their API I pulled in all of the information you could see or want from YouTube including the video, rating, YouTube link, embed code for the video and the description used on YouTube for the video.

On the PlayPumps homepage there was a nice flash element that rotated through 4 tabs which could have their text and content changed via an XML document on the server. This means by editing a single XML file they can change the text on the tabs, the link to the button and the url for the image. Also in the flash was a sample pump, basically it was the pump on the left with a water tower on the right, the tower filling based on a value in the XML file to the level of donations received.

In the end this is all gone, and what is going on no one knows. There has been no outward communication from PlayPumps or parent Case Foundation about the changes happening at PlayPumps International. The only news is that they are investing in Water for People (waterforpeople.org).

After all of the brainstorming, strategies, suggestions and helping hands held out to them, it has all be denied. Anyway, it seems my hopes for this organization are falling away faster and faster…

Tags: , , , , , ,

New Design for Joe L’Erario

July 23, 2009 in My Work / Portfolio, Web Design & Development by Matt Blasi | No comments

I just did a new design for Prospect Blue, this design was for their client Joe L’Erario who is a well know figure on TV and wood projects.  He is having a new site designed to feature his books, projects and show appearances.

The site is being built by Prospect Blue’s developers and should be live soon.  I really can’t wait to see it in action.  Along with the design I also helped Prospect Blue in the development of a strategy for building the site’s membership, and ultimately monetizing the site an it’s content.

3745504307_922e064df7_o

3745504265_18a69dd722_o

Tags: , ,

Creating a Coda style Animated Tool Tip

May 15, 2009 in Web Design & Development, jQuery Library by Matt Blasi | No comments

I am working on integrating a bubble like this on a site I am building for work so I figured I would share how it is done in case someone else wants to add one or play with it a bit. The original inspiration for this came from Panic’s Coda product site on their “Download” button.

In this case the project calls for a bubble to be shown over an image on the site describing what the image is, and what the action is. If this sounds pretty simple and straight forward well I will try to keep it that way. First do not try to over think it, this is really just a combination of a few effects and timing.

HTML Code:

First before the </head> tag you need to include jQuery


<script type='text/javascript' src='http://yoursite.com/path/to/jquery.js'>
</script>

Now somewhere in the body (really wherever you want the pop up tool tip to show add this code:


<div class="tip-container">
<img class="main-img" src="http://yoursite.com/path/to/img.jpg" />
<div class="popup-tip"> Put the content for the bubble here!</div>
</div>

To explain, the “tip-container” div is used to hold everything together, this is so that you can easily move things around and place it wherever you want in the page. I should also note the reason I am using classes to define this is so that you can have more than one on a given page and you will not have to code multiple styles.

The “main-img” class is the trigger for the effect.

And of course “popup-tip” is the container for anything you want to show in the tip box. This emans you can put any HTML markup you want in there and even style it however you like.

CSS Code:

Next we have the CSS for the block, thie only real goal here is to relatively position the popup and to hide it from initial view.


.tip-container {
position: relative;
}

.popup-tip {
position: absolute;
display: none;
}

There is really nothing more going on here. It is important to set the “popu-tip” display to be none, this is to hide it for those who fear scripts and have them disabled (of course it helps with those using screen readers as well).

JavaScript Code:


$(function () {
$('.tip-container').each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $('.main-img', this);
var popup = $('.popup-tip', this).css('opacity', 0);

// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;

// reset position of popup box
popup.css({
top: -100,
left: -33,
display: 'block' // brings the popup back in to view
})

// (we're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup-tip.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn't do the job)
popup-tip.css('display', 'none');
});
}, hideDelay);
});
});
});

Tags: , ,

3 jQuery Gallery Options

May 7, 2009 in Web Design & Development, jQuery Library by Matt Blasi | No comments

As much as I love jQuery I had to share some of the reasons why. jQuery is a very robust javascript library that can be used as the basis for putting some very cool and unique effects in websites. The best part about jQuery is how easy it is to use for those who do not have the technical or programing knowledge it would take to create those effects otherwise.

Here are some of the ways you can implement a photo gallery into your site making it more than just static elements, others have already done the work and make the code freely available for others who wish to apply such scripts. Of course if you are experienced in javascript, php, html, and css it is very likely you will be able to easily modify these further to make it completely unique for your site.

1) Galleria:

galleria

Galleria is very cool in that all you need to do is put the images into an unordered list with one image per list element, and the script will do the remainder of the work. This includes creating the thumbnails, rotating through the images, and adding manual control so visitors can control the image scroll themselves.

2) Slider Gallery:

picture-1

The slider gallery creates a horizontal scroll effect like what you see on the Mac site. The down side is that it does require a bit more work but it is a cool effect to have on any site.

3) jQuery Cycle Plugin:

picture-6

This plugin allows you to create a rotation of images with a number of different effects all easily set up. On the site for the plugin you can find a description of how to set up each of the rotations effects and functioning examples so that you can see how it works before hand.

Tags: ,

Flickr a Horrible Solution For Groups and Non-Profit Organizations

May 4, 2009 in General Discussions, Web Design & Development by Matt Blasi | 1 comment

So recently I ran into a problem with Flickr where someone claimed that photos I had taken were not mine. Now mind you I never upload the RAW format or Original size images, I always scale them down and I always keep the originals safely backed up in two places one on optical media (DVDs) and the other on a Portable Hard Drive I keep with me and my laptop.

So basically after someone made a simple claim that these photos were theirs Flickr completely deleted the account. Now when they did that all of my associations with groups, other members and friends and family were completely wiped out. At no time did Flickr ever even ask me to prove they were mine they just took the other persons word for it. I would have had no issues if they had simply suspended the account and asked for my proof but I think they acted to quickly and too much on the extreme.

The other part of the reason for closing the account was that the account had photos uploaded by multiple people which got me thinking because there are hundreds of non-profits using flickr for their group, I know because I have recommended it as a good solution for some. This particular account was one used by a group I am a member of and it contained over 8k photos uploaded, tagged, shared, part of groups, hosted on other sites, hosted on the group account and now they are all gone. Every photo, association and friendship made by the group has been wiped out.

So now you are asking what does all of this have to do with non profit organizations and religious groups. Well the sad part is that one of the other reasons given for terminating the Flickr account was that it was not a personal account and that Flickr was not meant to be used for groups. So I decided to do some looking because over the years I have put over a thousand organizations onto Flickr as a means to host their images of events and network with more people who may be interested in their message. What I found is that many groups have been having their accounts closed for this very reason, by doing a simple google search I am finding these stories from churches, non-profits, a few boy scout troops, as well as many other clubs and organizations.

The only consistency is that they are not doing it to the larger groups only the smaller ones. I could not find anything to show they have done this to a large or well known organization such as several of the Children’s Hospitals, and large congregation churches however when it comes to small groups with little to no national recognition they seem to not care. All of that basically says to me that they do not want the bad publicity of taking on a national non-profit organization or a huge church however when it comes to those small non-profits they have no problems with just pushing them away.

This is a real problem, think about the kind of impact it would have on your organization if your online account were to completely disappear over night loosing your short URL, your contacts and followers, and if you are using the Flickr API to show image galleries on your site you will loose that as well. What kind of reaction or view on your organization would this deliver to your members and potential future supporters, members and followers? What kind of reaction would this bring out from any corporate or major donors? How would this affect your online presence overall?

And finally a great place to to find your answers from the staff members themselves:
http://www.flickr.com/help/forum/en-us/82810/#reply526609
http://www.flickr.com/help/forum/en-us/71783/#reply446467
http://www.flickr.com/help/forum/en-us/82810/#reply526679
http://www.flickr.com/help/forum/en-us/82810/#reply527732

To find more simply search Flickr’s own forums here:
http://www.flickr.com/help/forum/en-us/

The one slight bright light in the tunnel is that Flickr has teamed with TechSoup to offer premium accounts to qualified non-profits. Now the downside I see to this is that it is not giving you a single place to upload the files and organize them and also you have to assign the account to a member of your staff. If that member stays the account goes with them and everything on it goes with them.

They are still encouraged not to use the name of the organization in their user name or any part of their account, and if anyone else posts to the account you are still in jeopardy of having your account closed.

You can read more about this initiative here.

Final Analysis:
Using Flickr for your groups is not a good idea. You run the risk of having your account deleted because it is for a group in some cases even if you are using their agreed packages with TechSoup. You also run the risk of being removed due to false claims by other members without so much as a simple question of proof. I do not see it as worth the risk to rely on Flickr in any way to share photos or events, instead I would spend more time hosting the images locally on your own server to display on your site as well as using additional more non-profit friendly tools such as Facebook and Twitter to share those photos and get the message out there.

Tags: , ,

« Older entries