04 · 23

HTML5 video Libraries, Toolkits and Players

For the most part, Flash has always been the standard for showing video on the web (think of YouTube and Vimeo), supported in all browsers with the only exception being the iPhone and most recently, the iPad.
But now, with HTML5, the new video tag is creeping into our lives and opening up many new, exciting and standardized media possibilities for web developers.

To help you understand and get the most from this new tag, we have listed below a selection of the best HTML5 video libraries, frameworks, toolkits and players.
To get you started here are some quick resources to help you get started with HTML5 video:
The HTML5 video element on the W3C »
Everything You Need to Know About HTML5 Video and Audio »
HTML5 Video with a Fallback to Flash »
Using the HTML5 <video> tag with a Flash fallback »

Kaltura HTML5 Video & Media JavaScript Library

Kaltura HTML5 Video and Media JavaScript Library

Kaltura have developed a full HTML5 Video Library (it is being used by Wikipedia) that works in ALL major browsers, including IE, by using a unique ‘fallback’ mechanism – not only for the format of the video that is played, but also for the actual video player version that is used.

A base component of the Kaltura library bridges the gap between the few browsers that don't support HTML5, by falling back to its underlining Flash player.
It has been developed with HTML, CSS and jQuery, and with built in support for the jQuery Themeroller, styling is amazingly easy and flexible which will maintain a unified look and feel across all operating systems and browsers. And finally it provides automatic transcoding into all supported formats (OGG, H.264, MOV, FLV etc.).

Video for Everybody!

Video for Everybody!

Video for Everybody! is simply some HTML code that embeds a video into a website using the HTML5 <video> element, falling back to QuickTime and Flash automatically, without the use of JavaScript. It will work across all of the major browsers (including the iPhone and iPad), and can also work with most RSS readers.

It works by playing the HTML5 video, only if the browser supports it. If it doesn't, it will fallback on Quicktime, and if there is no Quicktime installed it will fallback to Flash. Finally, if all else fails, a placeholder image is shown and the user can download the video using the links provided.

Projekktor – HTML5 Video Player

Projekktor - HTML5 Video Player

Projekktor is an easily customizable/themeable pure Javascript driven HTML5 video player, with Flash fallback only whenever there´s no native H.264 support available.
Its compatible with IE6, IE7, IE8, Firefox, Safari, Chrome and even works very well with the iPhone and iPad.
The documentation included is still rudimentary but experienced web workers will find it very easy to add the player to any project which is using the new video tag.

OSM Media Player

OSM Media Player

The Open Standard Media Player (OSM) is an open source (GPL – license free) fully featured media player written in jQuery that can dynamically play any media thrown it's way, whether it be HTML5 video – Flash video – Audio, etc.

Primarily this media player has been developed to be used within a Content Management environment, such as Drupal, and the good news is that it can also be used as a stand alone player within your website. They have also included integration with the jQuery Themeroller, which will allow you to customise the player allowing for CSS based customization.

The set-up guide covers the two of the most popular implementations of the Open Standard Media player: As a single media file player, and showing a playlist using an XML file.

SublimeVideo

SublimeVideo

The first thing to note about this video player is that it still, as yet, not been released for general use. What the developers have set-up though is a pre-release demo for everyone to drool over. And drool over you will. It looks amazing and seems to works even better.

In a nutshell it is a function rich HTML5 video player that will allow you to easily embed videos in any page, blog or site using the latest modern web standards.
It works well with all the major browsers with there long term goal to make it work on all modern browsers.

Ambilight for Video Tag

Ambilight for video tag

At first Ambilight looks like an average video player, the kind that loads standard HTML5 video. As the video plays, you very quickly notice what’s happening at the edges. The plugin automatically grabs the average colour in each area, and spreads it across the bounds of the video. This is not a new concept, as there have been hardware ambilights as well as Flash versions of the same. What makes this one special, is that it’s written entirely using HTML5. (Via Beautiful Pixels).

CwVideo for MooTools

CwVideo for MooTools

CwVideo is a toolkit to use and control HTML5-video with the latest realease of MooTools – and two extensions of the Fx.Slider class: CwVideo.Volumeslider (creates a volume slider) and CwVideo.Timeline (timeline slider with several features to simplify creating your own video controls).

You might also like…

How to build a Cool Animated CSS3 Menu with no Javascript »
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
20+ Resources and Tutorials for Creative Forms using CSS »

04 · 23

How To Successfully Educate Your Clients On Web Development

If you are running a design agency, your job is very likely to combine business development, graphic design, technology and user experience design: a basketful of very different fields. When dealing with clients, one faces the challenge of clearly and effectively communicating the goals and results of the work done in these areas. In this post, we’ll provide you with some ideas on sharing information and knowledge with developers and clients — a couple of tips and tricks we’ve learned from our own experience.

Slide11 in How To Successfully Educate Your Clients On Web Development

As designers, our core purpose is to solve business challenges for our clients. No, I haven’t forgotten you Mac-loving, single-mouse-button-fanatic designers. A business solution includes an application platform, solid data design and a page design that makes the UI and website approachable and easy to use (for converting, transacting, clicking on a monkey’s butt, etc.). Your daily challenge, then, is to deliver the project on time while satisfying the client’s visual, business and aesthetic requirements.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

You’re Not As Smart As You Think… But Google Is

I like to think that I’m always right (boy, would my wife have something to say about that), and that becomes tricky when communicating with clients. As a professional, I am able to detect patterns, usability issues, trends in the industry and other important issues that the client might not be aware of. On the other hand, I’m a complete idiot when it comes to semi-conductor temperature tolerances, furniture for pre-school institutions and the importance of steel spikes in lederhosen. My client, on the other hand, may be an Encyclopedia Britannica on every single one of those topics. What I’m trying to say is that you have to remember that you’re an expert only on your own field and that you should prick up your ears when the client tells you something.

Slide31 in How To Successfully Educate Your Clients On Web Development

Negotiating For A Win-Win Result

So, as you tread your pitiable pixel-pushing existence, you should be aware of things that might give your sorry designer self an advantage in negotiating those sticking points in projects. Have you ever had a client who wanted a larger logo on their website? Maybe a logo done in Flash, with a spinning earth and sparkles!? All valid requirements, I’m sure; and so during that meeting, as you slowly reached for the pencil to stab your quads under the table, you should have realized that business owners love their brands and are emotionally attached to them. You should have based your response, then, on a composite of research-based facts (best presented as a link to a reputable source on the Web) — an explanation that is specific to their business.

Slide21 in How To Successfully Educate Your Clients On Web Development

Client: “I really want a bigger logo. I feel like it’s getting lost in the website.”

You: “I understand why your brand is important to you. I have research here based on the top 500 retailers on the Internet and their logo sizes. The research indicates that the logo should take up less space than or be similar in size to the call-to-action element, or be one-fourth of the website’s width at most. In our case, that ‘View products’ link should be the focal point of the website.

Damage Control: Sometimes Bending Over Is Part Of The Job

A successful negotiator (and you are a negotiator — perhaps not a gun-toting, hostage-holding Samuel L. Jackson, but a negotiator nonetheless) delivers a solution that makes both parties win. Your client is happy that their demands were met by their responsive and well-informed developer, and you’re happy because you didn’t have to waste time in meetings. Hopefully, after you’ve demonstrated the facts and your reasoning for keeping the logo at the same size, the client will change their mind and leave you basking in the glory of being right and not having to go back for a fix. In case they don’t, you still might not have to increase the size; perhaps you could reassess your use of white space or employ other visual trickery of that devilishly sexy design field.

Position Of Authority: Your Voice Must Be Heard

As I mentioned, you do wield some authority in this line of work, but your client does also in their business. I recommend that for every project, you establish attainable and clearly defined goals, goals that will be measured by the website’s performance and enforced by strict deadlines. If you or your client doesn’t meet certain goals or deliverables by the deadlines, you could still launch the website if all critical items are completed, and then clear up the remaining items once the website is live. This strategy is used by major tech companies such as Google and accomplishes several important things:

  • Forces you to deliver on time;
  • Focuses you on date-based deliverables, which makes the client easier to educate on “sticky” issues;
  • Forces the client to deliver content, stock photos and their ideas to you on time, because any missing features would have to be paid for on an hourly consulting basis.

As you work towards these goals, know that at a certain point your opinion and decisions are critical to the project’s success. There’s no backing down or hiding your tail between your legs. Sometimes you cannot negotiate, and the client must understand that they are paying you for a reason: because you know your stuff!

Slide41 in How To Successfully Educate Your Clients On Web Development

Keep in mind that your client also has authority and knowledge that might not be apparent to you during negotiations. For example:

Client: We want IE6 support through the website. The website will have a lot of JavaScript, dynamic elements, PNG graphics, etc.

You: [Jotting down a reminder to send hate mail to the IE6 team at Microsoft,] IE6 is actually an outdated browser that has security flaws, a very poor rendering engine and very few users out there. I recommend we don’t accommodate it (even Mailchimp doesn’t!), and we tell those suckers to go to hell.

Client: Did I mention that we service a large restaurant industry, and a lot of the terminals in restaurants still run Windows XP with IE6?

You: [Updates reminder to hunt down IE6's creators.]

Slide51 in How To Successfully Educate Your Clients On Web Development

At the end of the day you are at the mercy of the client, and you need to meet all of their requirements. But you also have to recognize your value and be able to demonstrate it through examples, research and logical arguments. Be responsive: ask a lot of questions in order to understand the client’s motivation. I endorse client education, but not to the point of losing the client and project. Remember that your client is a resource to you, and good communication will enable both of you to complete the project in time to watch the men’s figure-skating competition.

04 · 22

Understanding and the Meaning of Color Within Design

Color is the perceivable characteristic of light; light is energy, so color is a form of energy. In 1666 sir Isaac Newton discovered that sunlight is a mixture of colors by noticing that when a ray of light passes through a prism it is dispersed into its seven constituent colors: red, orange, yellow, green, blue, indigo and violet. We see different colors because some objects reflect/absorb specific wavelengths. Human eyes perceive these wavelengths as colors.

Understanding Color

In web design colors are very subjective; take black for example, for some it is the color of elegance and it sometimes gives the idea of prosperity (you may imagine immediately a black and elegant limousine), but for others it can be a reminder of something unpleasant (death, hopelessness, evil, mourning). Whats more you can’t use only a single color in your work even if it is a site, logo or a business card. It needs be a combination of two or more colors to be effective. Unfortunately making a wise mixture poses a very difficult choice; the modern monitor displays can render more than 16 million (16,000,000) colors, therefore it’s very easy to make a bad choice.

Color Theory in Design

Color Theory in Design

To combat these situations, designers and in particular web designers, have an important and useful guide for color theory. This is a set of principles that help create harmonious color combinations.

Primary Colors

In traditional color theory there are only three colors which can’t be formed by combining others, to be more specific there are only three colors from which all the rest are created. These colors are: red, yellow and blue – primary colors.

Color Theory in Design

Secondary Colors

Mixing the primary colors we will get the secondary colorsgreen, orange and purple.

Color Theory in Design

Tertiary Colors

Tertiary colors are combinations between primary and secondary colors (yellow-orange or marigold, red-orange or vermilion, red-purple or magenta, blue-purple or violet, blue-green or aquamarine and yellow-green or chartreuse).

Color Theory in Design

Cool & Warm Colors

As in life, harmony consists of a well balanced arrangement of the parts. To establish some relationships between colors in color theory we distinguish two categories:

warm colors are the colors from red to yellow including brown, orange, pink. These colors evoke warmth because they remind us of things like the sun or fire. These tend to advance in space.

Color Theory in Design

cool colors are from green to blue, but also include some shades of violet. Cool colors are better for backgrounds and will give the impression of calm and reduce tension.

Color Theory in Design

White, black and gray are considered to be neutral.

Useful Color Theory Terms

These terms are very useful in color theory too:
color value measures lightness or darkness of a color;
saturation or intensity is the brightness or dullness of a color;
chroma is how pure a hue is in relation to gray;
shade: a hue produced by the addition of black.
tint: a hue produced by the addition of white.

Color Theory in Design

We use different sets of primary colors, the widest used being:

RGB color: this is based upon light. “RGB” stands for Red, Green and Blue (are the primary colors with green replacing yellow). Computer monitors and TV sets use RGB, but not used in printing.
CMYK color: this is based upon pigments. “CYMK” stands for Cyan, Yellow, Magenta and Black (K stands for black).Using these four colors most of the others can be achieved. CMYK can produce less colors than RGB (yellow-greens sometimes doesn’t have the best quality).This system is used in printing.
Pantone (PMS) Color: this is another system used in printing; PMS stands for Pantone Matching System and is a very large list of color mixtures made by Pantone Corporation. Unfortunately they are very expensive.
Hexachrome: more recently Pantone developed another system, based on the regular cyan, yellow, magenta, black and in addition Pantone Hexacrome Orange and Pantone Hexacrome Green. It will be used and it is used in printing, being a step further than PMS or CMYK.

The Meaning of Color

Have you ever asked yourself why Las Vegas is the city of red neon? This is because red makes people take riskier actions than blue, that calms down the spirit. Scientists demonstrated that colors have an impact on the human brain, thus a human being exposed to a certain color can have different reactions, some are excitant, and others increase appetite or give the feeling of warmth or coolness.
Like we mentioned previously, colors are subjective and for each of us a color has an individual impact, but generally accepted meaning of these are as follows:

black: mystery, elegance, death, evil, power, mourning;
blue: sadness, calm, loyalty;
green: abundance, nature, freshness;
yellow: happiness, concentration, hope;
red: passion, anger, danger, love;
white: purity, cleanness, innocence;
purple: royalty, luxury, wealth, sophistication;
cream: elegance, purity;
gray: conservative, formality;

But there are some specific interpretations in certain countries or regions:

Black is the mark of high quality and trust in China;
Blue in Iran has the meaning of immortality;
Green means high-tech in Japan, luck in the Middle East, death in South America;
Yellow is the color of mourning in Mexico and gives the feeling of strength in Saudi Arabia;
Red has multiple meanings, from good luck in China, danger in Europe to mourning on the Ivory Coast and death in Turkey;
White means mourning in Japan;

Is Color our Friend or Foe?

Colors can be a great friend within, but they can also be a very powerful and strange enemy. Strange…? Look at the pictures below, how many colors you see?
You will probably believe that there are four.

Color Theory in Design

The correct answer is only three. Do not forget: color is light, light is energy so color is energy.

About the Author

This article has been written by Daniel Pintilie a freelance writer working for Go-Gulf, Dubai based web design company that provide web design solutions in the Middle East.

You might also like…

15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »

04 · 21

15 Javascript Plugins and Tutorials for Adding Ratings

Giving users the ability to interact with your web site is one of the key elements to its success. Allowing users to post a comment or response and socially sharing are two of the basic fundamentals of web interaction, another, maybe less popular, is giving users the quickfire option of grading or rating a post, by using the super simple five star method or by the voting up or down approach.
Below you will find a selection of Javascript (jQuery, Prototype, MooTools…) plugins and tutorials that will allow you to add a ratings functionality to your posts.

Javascript Ratings Plugins

ColorRating Plugin

ColorRating

ColorRating Plugin »
ColorRating is a small (only 5kbs of CSS/JS/PHP) Ajax and PHP 5-Star Rating Script that requires no database setup or administration as it comes with it’s own SQLite database, making deployment as easy as unzipping the files. It degrades gracefully for users without JavaScript.
Demo »

jQuery Rater Plugin for Star Ratings

jQuery Rater Plugin for Star Ratings

jQuery Rater Plugin »
The original jQuery Rater Plugins usage nah been based on a fully degradable form submission model which means you must use markup containing an option list. Unfortunately, this means it became quite complex to support a rating model that fires off an ajax request to submit a new rating.
The developer wrote the new jQuery Rater Plugin for Star Ratings that should reduce the complexity of implementing an ajax rating scenario on the client side. The server side is easier as well since the markup doesn't change after a user has already rated. This plugin can also support multiple raters per page.
Demo »

jQuery Star Rating Plugin

jQuery Star Rating Plugin

jQuery Star Rating Plugin »
The Star Rating widget is a plugin for the jQuery that creates a non-obstrusive star rating control by turning a collection of radio boxes/select options into a sleek star-rating control.
It will create the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled making it beautifully downgradable.
Demo »

Starbox – Rating Stars for Prototype

Starbox - Rating Stars for Prototype

Starbox for Prototype »
Starbox allows you to easily create all kinds of rating boxes using a single PNG image. Witn its huge volume of options and functions, Starbox is quite possibly the most complete Javascript rating system within this article. The library is build on top of the Prototype javascript framework and for some extra effects you can add Scriptaculous as well.
Demo »

Rabid Ratings for MooTools

Rabid Ratings for MooTools

Rabid Ratings for MooTools »
RabidRatings is an eye-caching ratings system whill allows users to your website to rate virtually anything with simplicity.
Installation is easy – simply tell the PHP script how to connect to your database and include the PHP tag where you want to have a ratable item, and everything else is done for you.
Most AJAX ratings widgets use star and half-star images with mouse over events on each star. RabidRatings uses a reverse alpha-transparent PNG as a background image to achieve infinitely complex precision (ie, 1.23 stars) and robust visual effects with a very low overhead.
Demo »

Control.Rating for Prototype

Control.Rating for Prototype

Control.Rating for Prototype »
Control.Rating attaches to any div, span or table cell on your page in one line of code to create a fully customizable CSS based ratings widget. Each control can optionally post an Ajax request when it's value is set, or can interact with text inputs or select elements that are already on your page. It uses four (customizable) class names to determine each link's state: rating_off, rating_half, rating_on and rating_selected.
Demo »

Star Rating Form Widget for Prototype

Star Rating Form Widget for Prototype

Star Rating Form Widget for Prototype »
The Starry Widget is a simple class that will enable you integrate star-rating fields into your forms with little or no Javascript knowledge.
Starry Widgets automatically build star based form elements in your HTML wherever you place the code snippets. This way you can use them in a typical form without having to do any special Javascript code or ajax.
Demo »

Unobtrusive AJAX Star Rating Bar

Unobtrusive AJAX Star Rating Bar

Unobtrusive AJAX Star Rating Bar »
The first thing to note about this plugin is that it is no longer supported by the developer. Having said that it is still good enough to be featured in this post. It is perhaps the most popular and most used ratings scipt ever with 208,000 downloads. It has been built with PHP and mySQL, it is unobtrusive (although the page will refresh) and you can also set the number of rating units you want to use (i.e. 4 stars, 5 stars, or 10 stars) on a rater to rater basis.

GD Star Rating for Wordpress

GD Star Rating for Wordpress

GD Star Rating for Wordpress »
GD Star Rating plugin allows you to set up rating and review system for Wordpress posts, pages and comments in your blog. You can set many options for displaying the rating stars, and add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin.
Demos »

AJAX Star Rating Plugin

AJAX Star Rating Plugin

AJAX Star Rating Plugin »
This plugin offers you an easy and customizable way to enable your users to star rate any CakePHP model you want. It offers support for both Prototype and jQuery, seamlessly integrates with AJAX and is cross browser compatibile.
Demo »

Javascript Ratings Tutorials

Star Rating using CSS Sprite and jQuery

Star Rating using CSS Sprite and jQuery

Star Rating using CSS Sprite and jQuery »
This tutorial will show you how to create a Star Rating plugin with help from CSS-sprites and using Ajax to store the voting value.
Demo »

Favorite Rating with jQuery and Ajax

Favorite Rating with jQuery and Ajax

Favorite Rating with jQuery and Ajax »
In this tutorial you can learn how to recreate the unique and stylish method that amypink.com uses for allowing visitors to rate or “show the love” (as the develper calls it), with jQuery and Ajax.
Demo »

Reddit-style Voting With PHP, MySQL And jQuery

Reddit-style Voting With PHP, MySQL And jQuery

Reddit-style Voting With PHP, MySQL And jQuery »
If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.
Demo »

Creating an AJAX Rating Widget

Creating an AJAX Rating Widget

Creating an AJAX Rating Widget »
In this tutorial, you will be shown how to create the framework to display the animated rating widget and how to connect it to your server backend by using some of the most common Ajax frameworks out there (jQuery, Prototype, MooTools and Dojo), clearly separating the page creation from the JavaScript functions and the rating backend, to allow the script to be as flexible as possible and to be easy integrable into your existing website.
Download Files »

Voting System Tutorial with jQuery, Ajax and PHP

Favorite Rating with jQuery and Ajax


Voting system with jQuery, Ajax and PHP »
Demo »

You might also like…

How to build a Cool Animated CSS3 Menu with no Javascript »
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
20+ Resources and Tutorials for Creative Forms using CSS »

04 · 21

George Washington Overdue Library Books: Fine Would Be $300,000

NEW YORK -- If George Washington were alive today, he might face a hefty overdue library fine.

New York City's oldest library says one of its ledgers shows that the president has racked up 220 years' worth of late fees on two books he borrowed, but never returned.

One of the books was the "Law of Nations," which deals with international relations. The other was a volume of debates from Britain's House of Commons.

Both books were due on Nov. 2, 1789. According to the Guardian, "At today's prices, adjusted for inflation, he would face a late fine of $300,000."

New York Society Library head librarian Mark Bartlett says the institution isn't seeking payment of the fines, but would love to get the books back.

The ledger also lists books being taken out by other founding fathers, including Alexander Hamilton, Aaron Burr and John Jay.

The entry on Washington simply lists the borrower as "president."

Kyle Reddoch

I am an aspiring Web Developer, Android Fanatic, Family Man, and all around Web Geek! I also do Freelance Development work.

About

My Journey through the Interwebs!