HTML5 Application Beginner Tutorial

Tutorial Details

Items: HTML

Difficulty: Intermediate

Estimated time of Completion: 1 hours

If you want to create a Web application, you might think of using HTML5. HTML5 is a new favorite of application development, and it is likely to change the way software is developed and sold. It also allows millions of web-page people to participate in application development, and these people never thought their technology could be applied in other ways. But before you start developing, there are some things you need to know about HTML5. In this tutorial, I will teach you some basics!

What is HTML5?

HTML5 is a standard for the ongoing development of the consortium.

It starts with WHATWG and will become the golden rule for the future of HTML. If you've been concerned about this lately, you probably know that XHTML 2 was supposed to be the next big release, but it just stopped halfway. There are many reasons for this, and one of the main reasons for the controversy is that few web sites have perfect syntax, and XHTML 2 wants to enforce the perfection of grammar. and the exact definition of perfect grammar has always been a problem. When a browser vendor realizes how difficult it is to transition to XHTML 2, things get out of the way.

At this time a group of people abandoned the WHATWG and began to develop. Not only do these people want to refactor HTML, they want to refactor the entire standard-making process. They set about making new HTML5 standards. The principles they develop are not perfect, and they don't need to tell the world how to apply HTML technology. Instead, they focus on the reality of the HTML world. 1

They also took time to sort out some of the ideas emerging in the community. This is the source of many new elements (such as progress bars, video, and audio tags) in the HTML5 specification. These people create the norms that should be created, they just want to develop specific markers that can help people do what they are already doing.

In addition to the tags, WHATWG also started creating some new JavaScript APIs. This is where HTML5 becomes like an "app". They created offline data storage standards and an offline application cache so that the entire application could be saved offline. They also organized new work teams to handle aspects of gadgets and device access (to use devices like cameras and gravity sensors).

The whole standard process has a small anecdote: there is a time when the difference between different rendering engines is so great that if you want to be compatible with different browsers, you have to sniff out which browser the user is using, and then give a different experience based on the browser type.

WHATWG and other projects have consistently found that sniffing browsers is not a good idea. Now the generally recommended approach is progressive enhancement. Word, incremental enhancements are: Don't just set a browser to get experience Y, another will get experience Z, why not detect advanced feature support, and then build a gorgeous experience? If the browser does not support advanced feature X for any reason, then the user can only get the default experience.

Specification of the highest version

This is another feature of the HTML5 specification: it is likely to become the highest-release specification. In the future, the consortium will not improve the HTML version, such as HTML6, but only maintain the latest version of HTML, and there will be a gold standard specification. Web developers can leverage incremental enhancements to address the differences in browser capabilities and wait for browser vendors to reach specifications.

So what is the HTML5 application?

We define HTML5, so what is the HTML5 application?

Essentially, the HTML5 application uses all the gorgeous new features of the draft HTML5 to create an application-like experience.

This means storing data offline, functional, and running like a real application, rather than just browsing content. You're probably using web apps right now, like Gmail. Gmail actually has a HTML5 version, and if you have access to Gmail on your iPhone or iPad, you can try it.

Why should I use HTML5?

Why should I use HTML5 instead of the object-oriented C language, Flash, Silverlight, or some other type of specific device environment? First, I want to explain some of the reasons for not using HTML5.

If I want to make the newest and best three-dimensional shooting game, I will not choose HTML5. It doesn't have a rich graphics library for this kind of fast-paced game, but it's also a standard that allows three-dimensional graphics programs to go into the browser.

If you want to use the camera on the device, or the local file system, HTML5 is not the best choice. There are solutions to using native packets, which I'll explain briefly later, and some helpful criteria.

Although some specific situations are not suitable for use with HTML5, many of the applications now produced for IOS and Android can be implemented simply through HTML5. Not only is it technically achievable, but there are other benefits to using HTML5.

You already know how to use it.

Now, if you're a web developer, you already have all the tools you've got to get into this area. HTML5 application Development Just changes the way you look at web pages. In some cases you just add a few lines to the HTML and add something to the server, and you have a complete and efficient off-line HTML5 application.

The more we follow the standards, the more useful the standards will be.

In addition, Web developers are already well versed in cross-browser issues. Although there are more and more problems with Cross-browser, Web developers have a clear advantage over other types of developers, because they already know the enemy. Another part of Cross-browser development is the standard. The more we follow the standards, the more useful the standards will be. Web developers have suffered enough in some ways, and now it's starting to pay off. You don't need to learn a whole set of other non-standard compatibility components, as long as you simply rely on the methods established by the standard system.

Finally, when it comes to writing code, it's hard to perceive that you may be partisan.

When you look at how a handheld device manufacturer manages itself and how it chooses to retain its developers by deciding to work outside the system, you are supporting the concept of freedom.

This is a small concept, but it makes sense because in the long run we want our handheld developers to be open and let us break them as much as possible.

How do I use HTML5?

It's not hard to actually use HTML5. It may be just a few lines of code, or it may be writing an entire new application. Here are some of the ways you started.

1. Create a Web site that is suitable for mobile devices

Many sites can make the mobile device experience friendlier by making some changes. First of all, you should check viewport.

The viewport tag is not a standard, but it is a widely accepted practice. Many mobile browsers use this tab to set certain aspects of Web page rendering.

For more information about viewport, consult the following documentation:

Apple Docs (AAPL Docs)

Opera

Fennec:firefox Mobile Version

In addition to just viewport, you should also ensure that your Web page is flexible: For example, use dynamic width instead of static width. The mobile device shapes vary in size and the browser window is the same. Remembering the concept of flexibility in your mind is designed to automatically make your Web pages more suitable for mobile devices.

Doctype

One of the great, interesting parts of the next version of HTML5 is that DOCTYPE said goodbye to the Dodo. For many reasons it still had to stay there, but its meaning shrank and almost meaningless.

This is great. We don't need to copy and paste a bunch of text anymore, because anyway, who's going to be able to recite all that stuff?

2. Let your website work offline

Some browsers now have application caching. Application caching allows you to tell the browser beforehand which resources on the Web page need to be used offline. The browser then downloads the files for offline use. When the client is working offline, the browser uses those cached resources.

However, application caching is not something you can fix with just changing the label. You will need to be able to modify the Content-type header files on the server. In Apache, you either put these in the settings file or in a. htaccess file.

AddType text/cache-manifest Manifest

When you do this, you can add the following tags to the HTML elements of your Web page. You can give your manifest any name, but make sure it's in the root of your site and that the filename ends with a. manifest.

Then, you can create your manifest file. Simply list all the things you want to use offline. You cannot store cross-domain files here, and you should not store anything that changes frequently. The following is an example of a manifest file.

CACHE MANIFEST

# Version 1

My.html

My.css

My.js

My.png

When you set this up, test it in a browser that supports application caching.

If you want to update a resource, just modify the manifest file. Even just adding a comment will remind the browser to update the application cache.

It is well known that application caching is difficult to debug. Here's a book that provides some good ways to check your application's cache state.

3. Make your video available anywhere

If you have video content on your site and you play it through the Flash Player, you'll miss the opportunity to show the video to people who use IOS devices and don't support flash phones (most mobile phones).

HTML5 has two new tags to make it easier to display multimedia: Audio and video. The following is an example of a video label.

Now, if you want to support as many browsers as possible, you need to encode your content in a variety of different formats. Then, listed below.

This will ensure that your content can be played on Firefox, Safari, Chrome, and Mobile. Finally, for browsers that don't support video tags, you can still go back and choose flash players. When a browser does not support a label, it usually does not process the label, and then continues searching until it finds a label that it knows. In this case, if you put a embed or object in the video tag, the browser like IE will use object. However, the browser that supports the video label ignores the embedded flash.

Summary: Start using the HTML5 tag now

tags similar to headers, footer, Nav, aside, article, and section are useful because they are semantic tags. They partially inform visitors of your intention to place content in the Web site. It's good to use them. In the future, their help will be greater than the present, but there is no reason to stop you from using them now.

If you use these new tags, some browsers like IE will "mess up", but don't worry. IE supports adding tag types to the DOM, and you only need to tell ie. To solve this problem, Remy Sharp created HTML5 Shiv. If you include it in the header of the Web page with IE-selective annotations, your page will be rendered normally.

Now you've got the right semantic HTML!

Additional information: Selling your application in the application store

Yes, right now, you can get your HTML5 app to the mobile App Store for sale. The following two projects can help people develop "native" mobile applications using only HTML, JavaScript, and CSS. Check it out:

PhoneGap

Titanium

In addition, our own CodeCanyon will publish a new assortment of HTML5 applications within a few months. In this category, we'll sell everything from an advanced custom video player to a library to a demo application.

In order to prepare for this classification, we have already launched a 7000 dollar contest for bonuses. If you are interested, you still have two weeks to attend!

One word

There is no reason to stop you from exploring HTML5, and if you want to lead in this game, you should start building HTML5 applications now. Thank you for reading!

About the author

Alex Kessinger

is a front-end Web developer, currently for Yahoo! (Yahoo!) Effectiveness