You Tube HTML5 Viewer, Another Digg at Flash

A new HTML5 You Tube Player by Neo Smart has been born for those who’d like to catch a glimpse of the future of the web. Now you can watch your You Tube Videos without having to rely on Flash, which can be a serious resource hog depending on your operating system.

You Tube HTML5 Viewer

Most people are used to Flash on video sites and the capabilities of embedded Flash videos are far superior to this working prototype (but resource hoggy). That said its a good start and You Tube has even been testing their own HTML5 Videos on their site.

I tested on Firefox and Chrome over here on my Windows XP machine (yeah yeah i know, XP? LOL!). The player returned no video on Firefox and I believe its a Codec Issue. On Chrome the player runs without any problems, but the scrubbers can get a little buggy. Its a good start but still needs alot of work.

Go ahead and test it out for yourself at the Neo Smart You Tube HTML5 Viewer Page. Also check out the Grease Monkey User Script which adds a link to all YouTube video pages that points to the HTML5 version.

Excellent Learning slides from multiple authors

Good information is where its at. Filtering out that information can be a little time consuming lest you know where to go so I just wanted to share what I thought would be useful to designers out there.

If you check slide # 51 in Object Oriented CSS you will see that you should never specify an element first. This is a practice i didn’t know about. Sometimes learning yourself can lead into bad practices and thats why I like to learn from the pros. Thanks Stubbornella..

Continue reading

Adobe Cs4’s interface seriously kicks @ss

Ok it took me long enough to upgrade myself to Adobe CS4, but I am so happy i did – Talk about an intuitive workspace!! Every time Adobe comes out with a new version of their software their interface improves a whole hell of alot!

Cs3 was great compared to Cs2 as Adobe had made many changes in the Interface. One change that i liked back then was the fact that when you dragged Photoshop (CS3) onto your other monitor all your open files dragged with the window. This was not true for CS2 at the time it was out, and you had to drag all the windows one by one or switch to your default workspace.

As for CS4 there are many great features, but the one i liked the most (i’m still tinkering with it!) was the fact that on the top-right hand side you can easily switch to the GROUP of panels you want to work with. So if you want to the analysis panel and its children to dock on the right all you have to do was click the group that you wanted. This is a time saver and really helped me with my workflow and organization.
Adobe CS4
Adobe CS4

It amazes me how the Engineers at Adobe progress their software with each new version. I mean it isnt easy to continuously outdo yourself time and time again + make vast improvements to the User Interface (thats prob why interface and usability experts are so well paid and in demand.)

I could take a gander and guess that the most of the code stays the same, but all their efforts go into UI and Usability Design. Well done Adobe and Engineers, you guys are the best and brightest!!!

Fundamental Principles of UI Design

User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction.

Where traditional graphic design seeks to make the object or application physically attractive, the goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals.

  1. The Principle of User Profiling:
    You need to “Know who you users are.” Before we can answer the question “How do we make our user-interfaces better”, we must first answer the question: Better for whom? A design that is better for a technically skilled user might not be better for a non-technical businessman or an artist.
  2. The Principle of Metaphor:
    Borrow behaviors from systems familiar to your users.
  3. The Principle of Feature Exposure:
    Let the user see clearly what functions are available
  4. The Principle of Coherence:
    The behavior of the program should be internally and externally consistent
  5. The Principle of State Visualization:
    Changes in behavior should be reflected in the appearance of the program
  6. The Principles of Shortcuts:
    Provide both concrete and abstract ways of getting a task done
  7. ThePrinciple of Focus:
    Some aspects of the UI attract attention more than others do.
  8. The Principle Grammar:
    A user interface is a kind of language, know what the rules are
  9. The Principle of Help:
    Understand the different kinds of help a user needs
  10. The Principle of Context: Limit user activity to one well-defined context unless there’s a good reason not to.
  11. The Principle of Aesthetics:
    Create a program of beauty
  12. The Principle of User Testing:
    Recruit help in spotting the inevitable defects in your design
  13. The Principle of Humility:
    Listen to what ordinary people have to say

Above are the underlying principles of user design and have been around for a while now (it’s nothing new). For me its important to stick to the basic concepts and plan out your interface well in advance.

The good news is nowadays UI designers are well sought out for as many companies have realized that the data stores for any given application or website should remain consistent. The fact that your presentation layer keeps changing with different functionality for different clients thrusts UI designers into a whole new level of importance.

Whats funny here is that while I was writing this post I was called by a colleague for prospective UI Design work. Talk about ironic.

What I did today

These days i am spending alot of time learning the Open Source MVC Framework:  CodeIgniter. It’s awesome using some of the classes and libraries that ship with the package.  

All you have to do is load them from your controller or use the autoload feature in the config file.  I still do love my design work, so i spent some time later on at night trying to figure out this CSS FullScreen bacground thang.

SCHEDULE OF MY DAY:  

  1. 8.30 am – Woke up had some brekky and took a nice warm shower!
  2. 9.00 am – Onto the CodeIgniter forums and Google Reader to check out the latest news.
  3. 11.00 am – Conference call with a client
  4. 12.00 pm – Getting kinda hungry so i had a snack
  5. 12.30 pm – Back to some ?php development with Code Igniter.
  6. 2.00 pm – Lunch:  Fish and Chips
  7. 2.30 pm – Emails and general communication with present and future clients
  8. 3.00 pm – Work started for a newer client.
  9. 5.00 pm – Updating a site for a current client 
  10. 6.00 pm – Back to Code Igniter
  11. 7.00 pm – Itching to use some css techniques to design a Full Screen Splash page.
  12. 8.00 pm – Done with the css homepage.  Nice and darkish look with a great background.
Here’s a screenshot of that CSS full background page..It looks nice right now but it sorta distorts on any resolutions higher than 1024×768.  I am sure there is a quick Javascript fix out there for this. 

  

Anyone out there know that quick Javascript fix??  Or do you all have any pointers for developing and designing a fullscreen css based background?  If you do please let me know.  I am sure if I poke around i will find it somewhere.  I’m just too tired right now!!

Click here to download the Source for this simple demo. I havent implemented the best CSS practices here but when i get the time ill go for the top notch standards.  It’s a good start for 45 minutes of work.