In the last blog post, we discussed how we can use web apps to build cross-platform mobile apps. We also learned that the cool features of HTML5 make sure that we don't need any native platform features. However, we didn't really talk about HTML5, i.e. our main focus was mobile, and not the web portion of it. In this blog post, we'll be touching on what's new in HTML5 such that you don't need any third party APIs like Flash for your web applications. However, HTML5 is constantly developing and all can't be covered in one post. Hence, this post will provide as an overview and will summarize everything that we'll be discussing in detail over the next few blog posts.
Why HTML5?
Well, you might just ask, why do we even need HTML5? Isn't the current version of HTML stable enough? Well, it is stable (in my opinion). That's why it lasted so long. However, HTML 4.01 came out in 1999. That's pretty old for the current requirements of speed and power. After that, HTML actually broke into HTML and XHTML. HTML5 aims to unify both of them while providing cool new features with an aim of minimizing the use of third party APIs. Earlier, web developers used to make separate websites for phones, tablets, desktops, TVs etc. But with the responsiveness of HTML5 one website is enough for all the different devices.
The first change that you'll notice
When you write a web app the first thing you specify is the doctype, hence it is obvious that the first change you'll notice when you read an HTML5 app's source code is that the doctype is a lot simpler.
HTML 4.01's doctype would look like this (Strict):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
HTML5's new features
- Basic: With HTML5 there are many new elements and attributes. HTML5 now offers full support to CSS3. With many new form elements like "search", web development has become easier than ever. What's more, HTML5 now also has auto-validation.
- Multimedia: HTML5's
<video>and<audio>elements allow us to build engaging apps like media players without flash. - Graphics: HTML5 also incorporates drawing graphics so that we can build, manipulate and even export graphics (in formats like .png) straight from your script. There are several ways you can draw graphics on your screen with HTML5:
- HTML introduces the
<canvas>element which basically acts as a canvas (obviously) in which we can draw stuff straight from JavaScript. - We can also use inline SVGs (Scalable Vector Graphics). Which are basically graphics defined in XML (eXtensible Markup Language) format.
- Lastly, CSS3. We mentioned earlier that HTML5 offers full support to CSS3. Well, CSS3 introduces 2D/3D transformations and we can use these in our web apps for graphics too.
- APIs: HTML5 introduces many new APIs that make web app development easier. Remember in the last blog post we discussed web apps for mobile apps? These APIs are especially useful there. HTML5 APIs allow us to build local apps.
- Data storage: With HTML5 we can store data in the browser in the form of key-value pairs. Some argue that they work even better than cookies. Also, we have capabilities to store SQL databases right in the browser.
- App cache: With HTML5's app cache we can allow the browser to cache our website so that the website loads faster and also facilitates offline browsing.
- Multithreading: With HTML5's web workers we can also have multiple threads which enable faster computation if wisely used.
- Cross-domain AJAX calls: With
XHTMLHttpRequest2object we can now execute cross-domain AJAX (Asynchronous JavaScript And XML) calls.
So, that's it for this blog post. From the next blog post, we'll be discussing each of these cool features and many that weren't mentioned in detail.
No comments:
Post a Comment