And Now… Embedded Video November 7, 2009
Posted by flutebrarian in Web Design.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: audio, benjamusic, players
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…
Guru Lists September 29, 2008
Posted by flutebrarian in Web Design.add a comment
There’s no doubt that Sitepoint.com is one of my favorite web sites and publishing companies. Their articles are chock full of information on all sorts of web coding topics and they are written for the average person (non-code geek) to understand. In fact, I think I’ve expanded my CSS knowledge through many of their tutorials and books.
So, when I discovered their Guru Lists, I thought they’d be a good thing for future use. A couple that are excellent for expanding your design knowledge are Color for Coders and CSS Positioning Properties At-A-Glance.
Here’s to exploring!
Taking My CSS on the Road September 22, 2008
Posted by flutebrarian in Librarianship, Web Design.Tags: CSS, Eastern Great Lakes IUG, Firefox, presentations
add a comment
Friday, I had the opportunity to present a program on CSS at the Eastern Great Lakes Innovative Users Group meeting. We get a lot of clues on how to code a document and code “cookbooks” are great for a quick fix.
But how much do we really know about how the cascade really works? How do we troubleshoot the font that appears to shrink on the screen? What kinds of tools are available for determining inheritance features?
These were the kinds of things that I covered in the presentation “CSS: Beyond the Code.” If you are interested in troubleshooting tools that you can use in Firefox, check out Janet Stewart’s presentation that preceded mine called “The Web Developer’s Best Friend: Firefox Extensions.” I’ve also created a page that includes the links from the presentation in case you’re interested.
Starting a Website August 11, 2008
Posted by flutebrarian in Web Design.Tags: Mu Phi Epsilon
add a comment
One of the websites that I created and maintain is for the Alliance Alumni of Mu Phi Epsilon.
Last week, I received a call from our chapter president that we had won the award for the best alumni website for the year! Wow – the SECOND year in a row! I’ve designed a lot of websites, but this is the only award that I have ever won. Quite an honor.
Since then, I’ve gotten a few inquiries on how to get started. So I thought that this would be a good place to share some ideas on some best practices.
The first thing to do is get your domain name registered. I use a company called 1and1.com (that’s one and one) They are very inexpensive and have a good track record for service. Other companies can also offer you this service. Search your favorite search engine for “domain name service” for a listing of companies.
Next look for a hosting service – a place to put your website. The domain service company may also offer web hosting. You can also search for “web hosting”. Or, you can try the free route through your local public library or school if your chapter is affiliated with a college or university. In our case, our public library offers free web space to non-profit organizations in our community.
These two things should at least get you started. Some companies like 1and1.com, have templates readily available that allow you to just pick a design and type in your info – voila – instant web presence that looks good!
In future installments, look for hints on good and bad design, format vs. function, and Karen’s number one rule of web design: “Just because you can, doesn’t mean you should.”
Cheat Sheets Galore! February 28, 2008
Posted by flutebrarian in Web Design.add a comment
While I was reading through my American Libraries Online today, one of the posts caught my eye. It was The Cheat Sheet Cheat Sheet: Top 100 Lists of Web Development Cheat Sheets.
Always looking for a shortcut, I decided to give it a look. WOW! I’m definitely going to have to spend some time looking through all these great links. In fact, I found a couple that I plan to share with my beginner’s web design class when they meet for their final session tomorrow.
CSS Design Links February 14, 2008
Posted by flutebrarian in Web Design.Tags: CSS, design links
add a comment
http://meyerweb.com/eric/css/edge/popups/demo.html – How to create pop-up rollovers
Back to School! January 23, 2008
Posted by flutebrarian in Web Design.Tags: classes, CSS, HTML
add a comment
Recently I joined IWA (International Webmasters Association) to take advantage of the discounted cost of the offerings of eClasses.org. The class I chose is CSS 2.1 in Depth and it began on Monday.
After seeing the syllabus for the 8 week class, I see I have my work cut out for me! While I’ve been able to use CSS pretty successfully over the past few years, I’m not exactly an expert at all the intricacies nor am I comfortable with all the theory behind what makes it all work.
So, it’s back to school and time to brush up on all those details that I’ve skimmed over in the past.
Going from Drab to Fab October 31, 2007
Posted by flutebrarian in Web Design.add a comment
A friend asked me the other day, “How do I give a web site some pizazz?” She’s fairly new at CSS and up until now has been reusing the same stylesheet for all her sites with modifications to colors and fonts.
It’s a great place to start, but yeah, it gets old pretty fast.
My suggestion to her was to start with a piece of paper and draw out the design for the site. This is a standard practice (and very low-tech) that has been recommended in every CSS/HTML class I’ve taken and every web design book I’ve read. After she draws several choices for the layout, then and only then, is she ready to start coding.
My other low-tech tool is a set of colored highlighters and markers. Works great for comparing code to layout when printing both out.
Anyway, as an exercise, it’s helpful to start with the skeleton of the (X)HTML with just the page data – NO design elements should be included. Next, add an embedded stylesheet to cover the layout and basic colors and fonts for the page. Finally, the styles for the specific parts of the page (classes and ids) should be added. It is also helpful to make the background color of each block class or id a different color – this doesn’t add pixels to the width/height and makes it really easy to see which section is misbehaving.
Take one HTML page, add CSS, stir well, and stand back for a good look. For best results, be sure to check in versions of Netscape, Firefox, and my favorite (not!) IE, both 6 and 7.
Sounds of the Season October 16, 2007
Posted by flutebrarian in Web Design.add a comment
I’ve returned to Benjamusic to include some sound sample files for works in the catalog. Since the Christmas season is fast upon us, I decided to start with a couple of short samples for the Christmas page.
The tasks include finding software to convert CD recordings to mp3 (streaming) format and then software to edit the mp3 files to the right sample length.
I found a couple programs that are freeware (always a favorite!) - Free CD to MP3 Converter to convert the CDs and WavePad to edit the files.
So far so good…
