Posts tagged ‘HTML5’

Adding video to a webpage has never been so easy. But thanks to the arrival of HTML 5, website designers and developers will now be able to add video in a website in the same way they are habituated to add an image in a website. However, in order to make this thing work, video functionality has to be incorporated into the browsers. The good thing is that W3C has already come up with some guidelines on how video should work in a browser and now it is up to the browser developers to follow the rules to make it work. Firefox is quick enough to upgrade itself and other browsers are also following its suit.

Though a number of plugins are available such as RealPlayer, Silverlight, Quicktime etc to view a video on a web page, HTML5 is virtually bringing a revolution in this sphere by standardizing video playback across different devices and web browsers. The goal is to find a standard method for embedding video in website that will work in different platforms. Here in this article, we are going to showcase a list of some of the best HTML5 media players implementations that can help you to add some interesting elements in your next website design project:

HTML5 Media Players

Video for Everybody! (camendesign.com/code/video_for_everybody)
This is nothing else but a simple HTML code that will let you embed a video in a website by using HTML5 element. The interesting thing about this element is that viewers will be able to view the video without the use of browser-sniffing or JavaScript. That means, viewers can check the videos in iPad, iPhone etc that do not offer any support for flash files. It also work smoothly in RSS readers. What else do you want?

HTML5 Video Players

SublimeVideo (sublimevideo.net/demo)
Before you start expressing your gratitude for this video player, let be clear with you all that it has not been released for general use. A pre-release demo is there to check out what it is likely to offer. The demo looks stunning and impressive too.

HTML5 Video Players Implementation

JW Player for HTML5 (longtailvideo.com/support/jw-player/jw-player-for-html5)
This is video players is developed on jQuery. It is basically a fully skinnable and configurable player that keeps its faith on the new element found in HTML5.

HTML5 Media Players Implementation

YouTube HTML5 Player (youtube.com/html5)
If you are a devoted follower of HTML5, YouTube HTML5 Player is the best thing that you can try out. In case you are using HTML5 supported browser, you can view videos by using HTML5 player.

Video JS (videojs.com)
This video player comes with three different parts: a pure HTML/CSS skin, a Javascript library and an embed code.

HTML 5 is giving a hard time to both website designers and developers since they are finding it overwhelmingly difficult to get the hang of it. But HTML 5 is not anything new in the field of website design, it is just the upgraded version of HTML and therefore, it is a mystery why designers are still groping in the dark. HTML 5 appears more impressive, more powerful and more feature rich than its predecessor. The immense popularity of HTML 5 lies in the fact that it is ultra-light and it is blessed by Mac PC and moreover, it does not eat your bandwidth. In addition to that, HTML 5 is remarkably free from all the junk codes and that means, search engine crawlers will find them easy to crawl and that means, there will be greater chances of getting better ranking in some keywords. However, those of you who are a bit skeptical about HTML 5 and its features, we are going to present some of best example of HTML 5 and JavaScript effect that will definitely make you say Wow. So, gear up to experience a rare visual journey:

HTML 5 effect

Noise Field: – This is an outstanding example that dictates the power of HTML 5. Coupled with JavaScript, this shows a brilliant example of particle motion. You can change the direction of the particle motion or you can very look of the particles by clicking your mouse over the screen.
URL: – airtightinteractive.com/demos/processing_js/noisefield08.html

Breathing Galaxies: – This is another awe-inspiring effect that is powerful enough to make you stay glued to it for a long time. The diameter and the colors changes dynamically alternatively you can click onto the interface to have some fun.
URL: – mudcu.be/labs/JS1k/BreathingGalaxies.html

Swirling Tentacles: – It flaunts a 3D look that is heartwarming. It takes different shapes automatically and the change of color looks superb. However, the only drawback is that you cannot control it. It revolves, rotates, and takes shapes automatically.
URL: – acko.net/dumpx/996b.html

Rotating Spiral:- This is a piece of art that can make you feel hypnotized if you stare at it for long. It look stunningly beautiful and spiral is resolution independent. You can make it stop, start and can even reverse the rotation at your wish.
URL: -homepage.mac.com/chriswjohnson/automatons/rotating-spiral-1.svg

Blob: – This is a delightful example that has enough ingredients in it to inspire its viewers. It shows a blob that can be thrown around or can be split. Users can drag two blobs together to merge them into one. The very concept sounds interesting. So, what are you waiting for. Just try it now.
URL:- hakim.se/experiments/html5/blob/03/

Fri 20
Aug
2010

You may or may not like it but there is no escape from the fact that HTML5 is here to stay. Either, you have to develop your website design and development skills or you may find your skills not good enough for meeting the complex requirements of your clients. As HTML5 is slowing making an inroad and setting a new web standard, it is becoming a concern for website owners since it is becoming imperative for them to change the structure of their sites if they do not want to get tagged as obsolete as far as the web standard is concerned. Inline semantic tags, API specs, new semantic structural tags etc are some of the innovative and groundbreaking features of HTML5 that can give transformational touch to a website. Moreover, it can make a website load faster than ever.

These and other revolutionary features of HTML5 have made it almost a bare necessity for website designers to learn all its aspects by their heart. However, the problem is that, there are not many good HTML5 tutorials available online. Good resources are hard to come by and even if you can manage to find them, you might find them mindless repetition of the same idea. Being aware of this issue, here we have compiled a list of HTML5 tutorials that you may find highly interesting and truly helpful.

HTML5 Tutorial: – Here you are likely to get a daily dose of HTML5 tutorials in an all-new and interesting format that you will certainly like to explore. Besides publishing HTML5 tutorials, it also publishes HTML5 references and HTML 5 examples for the benefits of its visitors. In short, here you can get all the latest updates on HTML5 tutorials for honing your HTML5 skills.

HTML5 Tutorial

W3schools: – If you are into website design and development, you are certainly familiar with the name “W3schools”. It is fabulous and probably the most authentic website where you can get genuine information on HTML5. It has incorporated a vast collection of step-by-step tutorials that are enriched with ample examples.

W3schools

Trust IBM: This is probably the Holy Grail of HTML5 tutorial. This tutorial is from none other than IBM and here in this ebook (ibm.com/developerworks/web/tutorials/wa-html5/wa-html5-pdf.pdf), you will learn how to develop a website in HTML5 from the expert author: Joe Lennon. By going through this ebook, you will able to utilize the advantages of HTML5.

HTML5 Trend: – This is the best platform for keeping yourself updated with the latest HTML5 trends that are doing the round. You need to visit this website on regular basis, if you want to keep yourself updated with all that happening around you.

Start Coding With Smashing Magazine:- This is a step by step guideline for all those who are finding it hard to get the hang on HTML5. Since it is featured on Smashing Magazine, you can put your trust on it without showing any signs of hesitations.

Tue 25
May
2010

HTML5 and Flash: Are They At Loggerhead?

Poisted by : WebGuru     Under : Website Design     No Comments

Keep your fingers crossed, as the much-publicized clash between HTML5 and Flash is supposed to take place at any point of time. However, have you have thought why they need to fight it out? Do they really need to lock their horns to secure their place in changing topography of website design industry? Contrary to the popular belief and much to the disappointment of some over enthusiasts, we would like to say that HTML5 is not going to oust or outclass Flash. And here are the reasons why they should not be at loggerhead this time around:

HTML5
With the introduction of HTML5, the entire web design industry is perching precariously on the verge of a major upheaval. HTML5 is likely to become a game changer in website design industry by unleashing the power of its innumerable advantages. If it continues to grow at this rate, some of the widely known and popular Rich Internet Application (RIA) technologies might run the risk of becoming obsolete. It is posing serious threat to Sun JavaFX, Microsoft Silverlight and even to Adobe Flash etc.

HTML5 and Its Promises:
HTML5 promises to provide a slew of features that most of us have not experienced before. It will allow users to draw on a webpage and to do some other cool things that were far-fetched concepts just a few months ago. Websites developed in HTML5 will be more featured rich, interactive and users-friendly. It will act more or less like a local storage or Canvass and therefore, visitors will experience an engaging experience.

Here are some of unique features of HTML5:

  • HTML5 will make browsing experience a bit more interesting and engaging. It is going to blur the difference between desktop apps and online apps.
  • HTML5 is going to offer similar level of functionalities that are usually offered by Adobe Flash, Silverlight etc. It also poses a threat to JavaFX.
  • HTML5 will make a website compatible with different browsers and platforms and that means there will be no need to develop different versions of a website for different platform. This is certainly a remarkable advancement.

But despite these amazing advantages, the impacts of HTML5 are less likely to be felt outside the web industry. There is no iota of doubt that HTML5 will rule web industry but the clash between HTML5 and Flash is less likely to occur, since Flash is slowly and imperceptibly making its foray into corporate sector.

Flash’s Place
What is all the more interesting about Flash is that its popularity is getting increased in corporate world, more particularly, in training, learning and rich media application. Furthermore, usage of flash is getting increased in different mobile platforms as it is offering developers a chance to add more features in it and to make browsing in mobile a different experience altogether.

Integration of ActionScripts 3 has brought incredible improvements in the overall functionality and structure of an application that are unlikely to be found in any other applications. Flash offers a higher level of consistency and compatibility across different platforms that are even rare with HTML5.

Use of flash has largely been limited in the field of web industry. But when it comes to mobile platform, Flash is outsmarting its competitors by punching above its weights.

As long as HTML5 and Flash are trying to reinforce their positions in their respective fields, there will be fewer chances of getting into trouble or into a fight.