Incredible HTML5 examples. HTML5 + Canvas = Ambilight

Don't worry, this one is just a quick post about how the Canvas API and HTML5 can work together to create amazing pieces of art. A link to this can be found here.

In this case it is called Ambilight, which takes inspiration from a new range of Phillips TVs which use 'ambilight' technology.

HTML5 vs Flash.

One of, if not the, biggest debates on the internet right now is HTML5 vs Flash. Is Flash becoming obsolete? Can they work side-by-side?

What can Flash and HTML5 both do?
The answer to this is 95% of what HTML5 can do, Flash can do. One of the biggest arguments for Flash is it's video playing ecosystem. With most of the worlds video online using Flash player to show off videos, Flash is dominant at playing video. However, you can look at it another way. Most of the video is on YouTube - who are now topping 1.2 billion streams per day - is now owned by Google. And what Google have to say on how they want to embed video will shape the majority of the ways people embed video on the web. So what do Google think about HTML5? Well, the fact that their own browser is almost fully HTML5 capable says one thing, the fact they have built a website solely about HTML5 says another and maybe the final nail in the coffin would be YouTube's HTML5 player, already out for a good year now even if it is in beta.

Aside from this HTML5 also has the audio tag, so even those older Flash websites with weird choice for background music don't have very much to gloat about, even if we did mute that audio upon arrival.

Something most people use Flash for - games. Nearly all games on the internet use Flash, and fair enough, Flash does do a good job with gaming, even if it does run slow and can cause our browsers to crash. But wait a minute, HTML5 can also create and run games, without the use of plugins. Using something called Canvas you can create vectors and graphics within HTML directly using Javascript - another web standard. You can also then manipulate canvas with javascript - and as a side note, you can also manipulate video in HTML5 with javascript, and even get individual pixel colours - a great example can be found here

There are hundreds of things both Flash and HTML5 can both do so why don't they just work together, in harmony?

working side by side - link http://labs.codecomputerlove.com/FlashVsHtml5/ - game crashed (flash half) whilst writing this.

Working in harmony.
Both Flash and HTML5 can do similar things, however the main difference is one is a 'plugin' and the other is a 'standard'. A plugin is an 'extension' of the web - a term used very loosely, and a standard 'is' the web.

With that out of the way here is a great example of them both working together... Can you guess which side is HTML5 and which is Flash, there is basically no difference, but if you right click on the left hand side you can see which side Flash is actually on. Ironically, whilst writing this post, Flash on this website crashed and nearly crashed Chrome...

However, a big reason for converting to HTML5 and abandoning Flash may be because your website will be fully functioning on two of the worlds biggest internet communication innovations, rolls off the tongue doesn't it? By which of course I mean the iPhone and iPad. I'll come back to Apple later on though... But perhaps a bigger reason could be accessibility. the whole point of a website is to reach the mass market, there is no bigger market than the internet. However sometimes there are limits to how a user can view a page, and I don't screen size, more disabilities. Whether they are visual or audio or anything else, a user will want to be able to view a webpage with or without these disabilities.

Let's give an example. Say for instance, you were partially sighted and aren't able to read the text in a Flash website. Ah, but you own text-to-voice software, so we can just use that. Wrong. Flash text isn't actually text, it's just a rendered image which to us, we read as text. Now, if your text was within a website built with standards, then that would be a different - and much happier - story.


Flash = closed, licensed and uses specialist (overpriced) software


HTML5 = Open and free. Built by highly respected web standards. Can be written with the most basic text editor.


Flash must have some advantage over HTML5?
Flash was built by Adobe when there was no, or worse, alternatives to adding video or interactive content to a webpage. And understandably it became massive, allowing for this 'extension' - for want of a better word - to the web.

Flash can do full screen video. HTML5 cannot. Those are the basics, Flash can play video in a full screen environment as it just effectively creates a new window on your computer, which fills up the screen and is then overlayed. HTML5 cannot do this, mainly for security reasons, would you like to view a webpage then get stuck on a website which has uncontrollably forced itself to be the size of your screen?

An example of the best fullscreen can do in HTML5 can be found here: http://sublimevideo.net/demo

The only  other advantage of Flash over HTML5 could be animation. As Flash can be used to created amazing animations, but where webpages are concerned HTML5 has it trumped, with CSS3 animations and transforms.

Ok, so what can HTML5 do which Flash can't?
HTML5 has incredible new APIs built for web applications and websites. These include: WebSQL - a local database stored on the clients computer, Local Storage / Web Storage - permanent cookies, and Application Cache - for offline web applications, Geolocation - getting the location of a user, upon many other!

These great new technologies completely blow Flash out of the water and makes the fact HTML5 has a video tag look relatively minuscule.

*I urge you to look at these technologies!

What about Adobe
Adobe is a company, so naturally they are trying to keep Flash alive.
But if it is only for money reasons, I think that would be selfish to deny the internet a revolution in technologies as advanced as these.
Adobe own a whole suite of application like Photoshop and Illustrator not to mention many other massive application like Dreamweaver and InDesign, so maybe it's more maternal than business.

Either way, Adobe should do what Microsoft have recently decided to do with their 'Silverlight' - Flash alternative - by ditching it and start using web standards. Again, more on Microsoft later, but Adobe have a massive fan base of nostalgic fans of Flash, and a bigger fan base of web fanatics, so it seems to me, maybe Adobe's Flash sector can start making web standards better and add their own unique take on web standards  - maybe adding their vector knowledge to the Canvas API, possibly a 3D version of it.

Either way this change of technology won't be easy on Adobe, but will once it comes benefit everyone.
I say it indefinitely because I believe HTML5 technology which everyone is starting to back will  make Adobe 's Flash platform obsolete within the next 5 years.

HTML5 is in its final stages before it becomes the newest web standard, and within the next couple of years we will more than likely see that standardization, a couple of years after that, when the now HTML5 capable browsers will be more widely used, HTML5 will reign on Flash's parade.

Making the change
One small fact I found, when starting to learn Javascript, after a few years of Flash development myself, I found that as soon as I started to read tutorials and lessons, I saw that in fact Flash's Actionscript - it's core scripting language - is built on the same script type as Javascript. So why people would complain about this change of development is confusing to me.

Who is making the change?
As mentioned, Microsoft the worlds biggest technology company, have started to implement HTML5 and stop it's Silverlight platform can only push the HTML5 revolution.

And the more widely acknowledged Apple - the biggest company in the technology world for innovation and high quality technology - who after releasing the iPad started to push Flash off the top position in favour of web standards - with a whole section of their website devoted to web standards and a controversial - and rightly so - opinion on HTML5 and Flash - I really do recommend you read this statement by Steve Jobs.

Then there's Google who we have been over at the beginning of this post. But with Google on Microsoft's and Apple's side about web standards, and Google being the dominant online company, having quite a big part to say, I think Flash will definitely be something we will laugh at, like the floppy disk or even the almighty acorn computer.

Finally, I just want to sum up by summarizing the difference between Flash and HTML5.

Before computers could display images, we used ASCII Art. Now this has been thrown out for high resolution photos. Make of that what you will.

YouTube

YouTube is the main home for WebDevelopmentTuts, we have so far created 13 videos, with more being added nearly every day. So far we have beginner and intermediate HTML tutorials where you can learn about what HTML is, tags, attributes and how to build forms and add colour! We even go in-depth about doctypes in HTML and describe and teach whole lot more.

Now we have started work on CSS, for beginners, which as you may have guessed houses simple tutorials on what CSS is and how to use it, in the CSS 101 tutorial I'll even dive in straight away with selectors - what they are and how to do them.

In the future we plan to add a whole lot more on CSS, including common and not so common properties, how they can build incredible and rich websites and web applications and even give you 100s of real life example in the 'Tricks of the trade' section.

Javascript is what makes a webpage or application dynamic. So we can't miss it out! We plan to start of with simple javascript like getting objects from a webpage (the DOM) and using simple methods like date.
Then we will dive into loops - reiterating code, and also not forgetting AJAX, with 100s of tutorials in between.

PHP can be used for databases and security. So we will jump into databases, how to connect to, insert update and create tables. Querying those tables, and even some database design and best practices.

HTML5 is being talked about all the time and is one of the biggest subjects around on the internet. So naturally we will show off new HTML tags in HTML5, new Javascript APIs and CSS3.

These videos promise a lot! and they will live up to their expectations. We will always go in-depth and even more so create videos you want 0 you can get in touch via my email, Facebook, Twitter or even our home on YouTube.

The importance of web development - design, and performance.

Over nearly 20 years, web development has grown. From the first website to visually rich and interactive websites like the ones found here: http://www.thebestdesigns.com/, I think it's fair to say, web development and design is growing exponentially.

Not only have the numbers grown, but the importance of this form of media is also incredible, with the internet being accessed by over 2,095,006,005 - that's a third of the world! - this is a market for you and your product that noone can afford miss.

The internet is primarily a resource, where people go to find information, take Facebook for example, it's 500 million users are checking back to see what their friends are doing, planning events and uploading those event memories all on one site. Facebook is so big because it follows a simple idea that everyone does, social interaction, and puts that experience online.

As the internet has grown, the way people develop and design websites or web applications, has also naturally grown. Design is incredibly important in websites and web applications. Once a user visits a website it can be the one thing that will determine whether or not they stand or come back. Would you rather visit a page like this or a website like this - I think I can guess.

Design isn't the only concept though, and I suppose it could be unfair to give importance to one part of a websites functionality over another. But where the user is concerned, I think, design comes first, then if the content is there to back it up you've got a winner.

But what about performance? Users expect this, and when they visit a page, if it works perfectly, the user will not think about it for half of a second, but, if it crashes or is slow? Then the user will think about it.

so from a developers point of view, performance, design and content are all on the same level, but it is important to know that from a users point of view, design and content are what make a website to them.

Where design and users are concerned, simplicity is what should be kept in mind here. Usability really is important in web design. For example, would you visit a site where everything is slap-dash and thrown anywhere, or where the information surrounding it is not relative to it's content?

These are just a few things I wanted to point out in my first blog, how important design and performance are, and what the user wants from a site. Remember users are what get you views / hits. Keep them on your website for as long as possible, and always update it for them to come back!