Posts Tagged ‘HTML5’

Why Choose HTML5? An Inside Look

Lately, there has been a lot of buzz on the web about HTML5, so we started wondering about the actual cases of its implementation. We already know that HTML5 markup language, with its new and powerful features for both developers and end users, is already used to code websites around the world (check out the previous blog entry about 70 Spectacular HTML5 Websites). Now we think you may want to get the learning experience and feedback from those people who have started creating awesome websites using HTML5 and who learned how to harness a great deal of the cutting-edge technology HTML5 has to offer. Read the qualified testimonials we have gathered for you and see what HTML5 website owners have to say about this markup language. They will discuss the fundamental aspects of HTML5 and its real-life use to break down all the prejudices that mastering a language like HTML5 can be intimidating. So here’s what they have to say:

* * *

Why Choose HTML5? An Inside LookI’ve been interested in creating semantic markup since I started creating websites about 7 years ago. I became aware of the HTML5 movement and started to understand a bit more through the draft specification. It was quickly obvious that HTML5 was going to be a great leap forward for semantics. The new elements were more relevant to sites that I was creating and made my markup more concise and readable. Like many developers I had been using things like <div id=”nav”> and <div id=”footer”> so it was easy to make the switch to the new HTML5 elements. I’d say for a competent HTML author making the switch to using HTML5 markup is not a big learning curve.

Subsequent to my initial explorations it became clear that HTML5 was not just about semantics. In particular the video, audio, and canvas elements mean that third party plugins like Flash and Silverlight won’t be needed in the future. This is really exciting for anyone interested in open standards. Add in microdata, aria attributes, new form types, and 2D/3D drawing, and there are quite a lot of new toys to explore.

HTML5 is just one part of new possibilities available in the front-end stack though. Browsers are now more capable with both CSS3 and JavaScript APIs, so it is a really exciting time to be a front end developer. Thinking back to when I started out, I’m really excited about what we can do now and how far the standards movement has progressed. It is a good time to be a front end developer!

– George Ornbo
Featured HTML5 project: Shapeshed.github.com

* * *

Why Choose HTML5? An Inside LookAt GANDR, we like to pretend that we’re a few steps ahead of the game and to do this we have to keep experimenting with new technologies. There’s no better place to experiment than on your own website. We chose HTML5 because we’re obsessive about descriptive HTML tags and really clean markup. HTML5 takes this descriptive HTML obsession to a new level with elements like header, nav, sections, articles, aside, etc. Working with this markup language was fairly easy thanks to resources like HTML5 Doctor, Dive into HTML5, and the scary-but-helpful W3C HTML5 Spec.

– Garrett Winder
Featured HTML5 project: Gandrweb.com

* * *

Read the rest of this entry »

70 Spectacular HTML5 Websites

Currently the HTML5 technology has come into the extensive spotlight. Being the most discussed web trend these days, this major revision of HTML is aimed at revolutionizing and streamlining the way web developers create websites. Though there are some ongoing specifications of HTML5, this markup language currently offers diverse great features and benefits to develop brilliant forms, new canvas elements, readable codes, and semantically meaningful layouts. Plus, it is now fully possible to get moving with video which is an absolutely significant option.

In fact, there’s already a widespread use of the ultramodern HTML5. Upon our exploration, we’ve found the awesome variety of working sites using HTML5 markup language and so we’re going to list 70 best ones down in this blog entry to provide the examples of how it is possible to use HTML5 today. Make sure, these websites render correctly all the beneficial properties HTML5 embraces. If you wish to join the ranks of the fortunate HTML5 websites owners, TemplateMonster could substantially help you – just browse the wonderful assortment of our HTML5 Templates and find your very own HTML5 design to develop the clean and elegant website.

Alternatively, you can check out other articles in which we compiled 12 excellent HTML5 eBooks for web professionals and 30 brand new HTML5 tutorials of summer 2011. In addition, our friends from DesignFloat have also published a compilation of 50 HTML5 websites showcasing the HTML5 best capabilities.

* * *

Cumbriaglassfusing.co.uk

70 Spectacular HTML5 Websites

* * *

Cameronchamberlain.com

70 Spectacular HTML5 Websites

* * *

Read the rest of this entry »

25 Essential HTML5 Tutorials and Techniques

We are always close to the latest technologies – you know that, so today let’s cover some more info on the new fundamental markup language for the web – HTML5 that you all love so much.

When saying about HTML5, developers mean the new semantic structural tags, API specs like canvas or offline storage, new inline semantic tags, etc. HTML5, in fact, is aimed at creating a comprehensive markup language for front-end development, able to provide qualitative information on the different elements of the page. But to help make some sense of what’s new and essential in HTML5, you could review some helpful and indispensable HTML5 tutorials that go over many of the major HTML5 aspects and new standards.

The whole purpose of this post is to help you master HTML5 rich features through simple guidelines and easy to follow techniques. These useful HTML5 tutorials will help you keep a track providing more tips and tricks that you can use in your HTML5-based projects. Still if you find something missing, share it kindly in the comments below. After all, another effective HTML5 tutorial won’t be out of place here.

HTML5 Unleashed: Tips, Tricks and Techniques

25 Essential HTML5 Tutorials and Techniques

* * *

Implementing HTML5 Drag and Drop: New Premium Tutorial

25 Essential HTML5 Tutorials and Techniques

* * *

Blowing up HTML5 video and mapping it into 3D space

25 Essential HTML5 Tutorials and Techniques

* * *

Read the rest of this entry »

HTML5-based Graphic Apps and Sketching Tools

HTML5 based Graphic Apps and Sketching Tools

There is no doubt that the most intriguing new HTML5 tag is the canvas tag. Despite all controversial web discussions concerning this element it is obvious that canvas symbolizes the “semantic” web concept. Its aim is to simplify the process of rendering the 2D shapes and bitmap images. You may have seen a few “canvas” demos that already became viral on the web. As the result many developers and web designers have noticed that using the canvas tag is really effective and it saves much time.

Recent big news from the Google I/O conference showed us that the main market players admit HTML5 as a main perspective for the further development. Actually we hope that it will disctact us from all these media wars and that the social media world will expand a more useful information about new and interesting achievements of HTML5.

Today we have compiled some interesting applications and sketching tools that are build with the help of Java scripts and the “canvas” tag. These examples are only experiments but they’re definitely worth checking out. (Don’t forget that it would be better to browse all these application via Chrome or the latest versions of Opera and Firefox).

1. Spirograph

HTML5 based Graphic Apps and Sketching Tools

Spirograph is a geometric drawing toy that produces mathematical curves of the variety technically known as the hypotrochoids and epitrochoids (via WikiPedia). This example allows you to play with all kinds of parameters including size of mobile circle, static circle and so on.

* * *

2. Bomomo

HTML5 based Graphic Apps and Sketching Tools

Inspiring tool that will make you feel like a real artist even if you are not. Great painting application with original patterns and interesting options.

* * *

Read the rest of this entry »

The Battle for Developers: Flash vs HTML5

“Battle for developers” is a short and sharp description of the situation that has emerged recently in the environment that we all live in – the Internet. The Web audience can’t stop buzzing about the “Epic Battle” between Flash and HTML 5. Here are some facts of this confrontation. The cornerstone of this struggle lies in a rivalry between Apple and Adobe. But now it is not a simple fight between two of the world’s leading IT companies – it is more of a struggle for the future of the web itself. Internet never stops evolving and HTML 5 is the evident results of this process – along with Adobe Flash.

The Video Episode

It is not a secret that most of the web standards are very much tied to Flash technology and when such media giants as YouTube and Vimeo have started playing their content with the help of HMTL 5 in addition to the good old Flash and it was a huge surprise for some companies. Here are examples of two players that are avaliable on YouTube. The designs are almost identical but there are several details that are worth being mentioned. HTML5 player has original feature that allows to choose the connection speed – you can see this panel in the bottom left corner. Plus, since it’s HTML 5 the player is so far supported by just a few browsers – but that’s more like a problem of a browser, not the player. What’s also important is that the HTML 5 player is faster than the Flash player.

HTML5 YouTube Player

The Battle for Developers: Flash vs HTML5

Flash YouTube Player

The Battle for Developers: Flash vs HTML5

HTML5 – Things We All Totally Love About It!

In our opinion HTML 5 is a great web standard that does have a lot of brilliant features that neither HTML 4 nor Flash have.

  • First and foremost HTML 5 greatly simplifies the creation of websites and web products.
  • Video elements. We’ve already mentioned that video elements thing and this is one of the best HTML 5 features because you can embed video without having to use any kinds of third party services.
  • HTML 5 facilitates your work with various web applications and this is really cool feature because it allows you to implement different apps even without having an Internet connection.
  • Another great feature is the new approach to the “canvas” element. According to the developers this element will allow you to design it all “on-the-fly”. Here’s a great example of using this tag – below you’ll find a great model called Cloth Simulation. This model was created by Andrew Hoyer with the help of the canvas tag and some jQuery scripts.

The Battle for Developers: Flash vs HTML5

Read the rest of this entry »