jump to navigation

BuzzBoost May 25, 2011

Posted by flutebrarian in Web Design.
Tags: , , , ,
add a comment

A bizarre name to be sure, but it saved me a ton of work.

The task at hand was to make an easy way for the golf group to post updates to their website for rain info, meetings, etc. without messing with the HTML and web pages on the site. I will be setting up a blog for them but we wanted the info to go into the actual website and not make the members go to the blog for the info.

Google to the rescue (again).

I had heard of Feedburner but never thought I needed to use it. But I discovered that Google now owns Feedburner. Great! I didn’t need to register for yet another account on the web. So I logged in and added FluteBrarian to the feed list. After a little searching of the help files, I discovered a “publicize” tab and a service called BuzzBoost.

After filling out a few customization fields, my script code was generated and I was able to plug it directly into the HTML for the page. Couldn’t have been easier (unless I had discovered it sooner 😉


Ahhh, Springtime… May 19, 2011

Posted by flutebrarian in Web Design.
Tags: , , ,
add a comment

Ahhh, Springtime. A time when a girl’s thoughts turn to … golf!

I was recently contacted to create a website for a regional women’s golf club. Since I’m not one who has ever hit a golf ball beyond the mini-putt course, I went into student mode and learned all about handicaps, team play, and standing rules.

But even though I know very little about the game, I enjoy the beauty of the lush grass courses on which the game is played. How about rotating pictures of the various clubs in the league? They liked the idea.

I was thinking in terms of a small rotating gallery done with a JavaScript file I had used several times before. No, they’d rather have a full header for the page fading in and out of the various clubs.

Time to search for a new script.

At first I found a php script that randomly changed the background image every time the page was refreshed or reloaded. This was a snap to put in place – download php, create image directory, put all images and php in this directory, point the CSS file to the script and you’re done. You can add and delete images without having to alter any code in the script, CSS, or HTML.

But it didn’t fade in and out. So back to the drawing board and this time a new JavaScript.

This time, I found an image cross fader from slayeroffice.com. Although it wasn’t as straightforward as the php script, it was much more robust and the images fade in and out quite nicely. And changing the setTimeout value from 1000 to 5000 increased the fading time between images from 1 second to 5 seconds so one doesn’t get dizzy from the changing golf course images.

There are two CSS files and one JavaScript file to download. The images to be used are listed one after another in the HTML file where the fading images are to appear. So, there is more maintenance involved if the images are added or deleted.

But the client likes it, and that’s what counts.

Gallery Complete January 30, 2011

Posted by flutebrarian in Web Design.
Tags: , ,
add a comment

With a little bit of tweaking, the galleries are now complete. Using only CSS techniques for the main hover of the thumbnails and display of the images, one can temporarily view the full-sized image without having to click to another page. If the image is too large to be viewed, a little JavaScript allows the viewer to click on the image and “set” it in the viewing space to scroll up and down to study it.

Not bad.

The only thing I don’t like is that very small originals look mammoth in comparison to really large originals since they are all set for the same width for display on screen. I may play with that some more before all is said and done.

You can see the results of the project at www.flutebrarian.com/mccallum/ and clicking on one of the Paintings buttons or the Prints button. Please note this is the temporary work-in-progress site, not the final site.

Gallery in Progress January 8, 2011

Posted by flutebrarian in Web Design.
Tags: , , ,
add a comment

Progress is being made on the image galleries for artist Steven McCallum’s updated website. Following the detailed tutorial for this technique at “How to Create a Photographic Gallery Using CSS” I have managed to get this far:

Beginning of Painting Gallery

The opening screen of the painting gallery

The thumbnails have moved from the right side of the gallery to the left; the thumbnails are displayed in a scrolling overflow div; the titles and information for the paintings are moved to the top of the large image; and a default image explaining how to view the images has been added to the background of the image viewer.

The next steps include resizing all the files and renaming them to web-friendly formats (no spaces, all lower case).

One final tweak that I will try is to allow clicking on the thumbnails so that one can scroll up and down the screen if the enlarged image is too tall for the screen. This technique was discussed in an online forum on Webdeveloper.com.

Stay tuned!

Creating a Gallery Using CSS January 3, 2011

Posted by flutebrarian in Web Design.
Tags: ,
add a comment

My next project is a website for an artist. He wants to showcase his paintings and prints so I’d like to do this without programming and keeping the number of pages utilized to a minimum. I found this example: How to Create a Photographic Gallery Using CSS which I had successfully used for the Kiwanis site but it will need to be tweaked severely to make it conform to the rest of the newly designed site.

I hope to keep a log here of the process of transforming the look of the original here. Time will tell…

Working for Google (without leaving Ohio) December 19, 2010

Posted by flutebrarian in Librarianship, Web Design.
Tags: , ,
add a comment

For the past 17 months, my real job work week has been reduced from 40 to 30 hours due to State budgetary issues. Many viewed it as a hardship but I viewed it as an opportunity and have enjoyed every minute of it. It was like working for Google, or getting a sabbatical.

Employees at Google are encouraged to take 20% of their work week to work on personal projects. This gives the employee the freedom to explore new territories, technologies, and ideas that will ultimately help Google develop new products and keep the employees from burning out.

Academics have also had sabbaticals available to them for these very same reasons.

However, in the public library field, this is unheard of.

So, with the opportunity to have 20% of my work week free for other pursuits, I took advantage of it to hone my web design skills and officially start a side business – Flutebrarian Web Design, LLC.

I took online courses in MySQL, web form design, PHP, web analytics, and more advanced CSS. The MySQL and PHP are still rather shaky, but I have managed to set up a couple of databases and get coding in place to actually make them work over the web. And one is for my day job (Gift and Memorials database)

After 27 years as a professional librarian, it was definitely time for a sabbatical. I return to my 40-hour work week on Jan. 3 with new and expanded tools in my belt. I guess I’ll have to leave the cat at home, though.

Going Legit April 24, 2010

Posted by flutebrarian in Web Design.
add a comment

It’s official. The FluteBrarian is now an official business registered in the state of Ohio. This past month has seen legal visits, paperwork filed with the Secretary of State, a business bank account opened, and checks ordered. I’m even an official member of the Alliance Area Chamber of Commerce!

So now we have:

FluteBrarian Web Design LLC – Karen Perone, President

How cool is that? Visit www.flutebrarian.com for more info.

Starting a MySQL Database January 20, 2010

Posted by flutebrarian in Web Design.
Tags: , , ,
add a comment

Today was one of those “Eureka!” days. Last fall, the library’s web server was replaced. We had a number of web databases set up in Access and ASP using FrontPage. Life was easy, life was good.

When we upgraded, the new server no longer supported FrontPage Server Extensions and all the ASP database connections broke. Life was no longer easy.

The time had come to face the fact that I needed to learn MySQL and PHP and could no longer put it off. I took an online class on the basics of MySQL through eClasses.org and got that part under control. Taking the bull by the horns, I set up the new database on the new server and figured out how to import the nearly 8,200 records.

I’ve been working on piecing together a web form with a PHP script to add new records to the database for the past few days and this afternoon … Ta da! It worked.

I still need to figure out how to create a search form that will find various strings of data. I have a script that will pass the variable and display the results but that’s not real practical for the average user.

The saga continues …

And Now… Embedded Video November 7, 2009

Posted by flutebrarian in Web Design.
Tags: , ,
add a comment

The fun doesn’t stop with embedding audio players. There is also video to consider. I’ve often wondered about how this could be done – show the first frame of the video rather than just a link to the file – so that the video is more apparent to the user than making them figure out what’s going to happen.

As I was searching for a solution, I came upon the Embedded Media HTML Generator from UCSF (http://cit.ucsf.edu/embedmedia/step1.php)

Enter the type of file you have (Flash, Real, Quicktime, or Windows Media), enter the URL of the file, and voila – the code you need is automatically generated. Copy and paste it into your web page and the user has all the player controls and a one frame preview of what’s to come.

Of course, you can also upload your 10 minute flash video file to YouTube or Facebook. Both these sites will generate the code you need as well for your web page. The advantage here is that their servers take the burden of storage and playback, both things to consider when you are paying for bandwidth and storage.

Embedding Audio Players August 29, 2009

Posted by flutebrarian in Web Design.
Tags: , ,
add a comment

These days, I have a bit more time on my hands for experimenting with new web tools thanks to the State of Ohio. One of my long standing web site projects is Benjamusic.com a site for a conductor/composer friend of mine, Eric Benjamin, who has written some incredible works for orchestra, chorus, and other ensembles.

We want to make this a showplace for his works so that, hopefully, he will be able to sell or rent some of his compositions. Although I think the overall concept of the site is easy to navigate and use, it’s been two years and time for some new stuff.

We have a number of mp3 files of his compositions so the potential buyer can listen to them first. I had been using plain text links to the files, which then opened an mp3 audio player in a blank window. Useful, but the user lost touch with the description of the piece and had to use the back navigation button to return to the catalog.

I knew that it was possible to embed a player onto the page next to the description, but the HTML descriptions I had found for “object” were less than useful. After browsing several google results for “embed mp3 player” I came upon the solution.

There was an Audio Player WordPress Plugin from 1pixelout that seemed to be just what I wanted. www.1pixelout.net/code/audio-player-wordpress-plugin

A tutorial for the installation of this player on a non-Wordpress, or regular HTML website was also available. www.macloo.com/examples/audio_player

So it does take more than just the “object” element to make this thing work but fortunately, someone else had already written the javascript and created the shockwave flash file – two things at which I couldn’t even begin to figure out at this point.

Now on to changing the links to all the audio files on the site…