HTML5 Are You Ready for it
Many are eagerly waiting for HTML5. What about you? Are you ready for this phase of advanced browsing experience and interactions; Are you ready to engage anddelight your customers with a unique experience?
Cygnet Infotech welcomes you to this webinar to help you gear up for the "What", "When" and "Why" about HTML5. Join this 35 min session to learn more.
Following Points were Discussed:
- HTML5 - What is it all about
- Reasons for moving to HTML5
- The Top 10 Tags in HTML5
- Browser Support for HTML5
- Working with HTML5
- How to move current websites to HTML5
- HTML5 for Mobile Applications
What are the most important tags to learn especially when we first develop a new HTML 5 site?
There are many new elements that we need to take care when creating HTML5 website, but most important tags to start with are<header>, <hgroup>, <section>, <article>, <aside>, <video>, <audio> , <canvas>, <footer>.
What is the "poster" parameter?
Poster parameter is used in <Video> tag to show picture while the video is not playing. So whatever picture you would like to display before starting video, we can set in poster parameter as per below tag:
i.e. <video controls muted autoplay poster="happyfit2.jpg" width="604" height="256" title="happyfit2">
Is it possible to tell browser to stricly render only HTML 5
Yes, by giving doc type i.e. <!DOCTYPE HTML>
Will browser render HTML 5 if the deprecated tags are used?
Yes the browser will render however the source code is not W3C compliant for HTML 5 (http://validator.w3.org). And to code the application to be compliant for further versions it is preferable to avoid using deprecated tags.
With regard to storage, is the fight between the browsers db settled...?
Local storage feature is a great way to simplify and improve the web applications and change the perspective and approach of storage in web applications. However same as two sides of a coin, there are pros and cons of the same.
It is purely our own skills with which we should decide how optimally to use the new features so that we can use their power in action as well as handle the limitations.
More about local storage
We can take up more details in upcoming seminars, however as a quick glance HTML 5 provides several APIs like - Web Storage, Web SQL Database, Indexed Database, and File Access. These APIs provide different methods to store data on the user's local device, instead of the server. This will enable user to work offline if used correctly. Also it improves the performance of the application.
Can you explain a little bit about file access and its potential to be used as storage alternative
Again, we can take up more details in upcoming seminars, however just to know basics it is applicable to store large content and binary files, like images, audio, video, PDFs, etc. It gives better performance as it is an asynchronous API. On the other end, the support is quite limited and is only available in Chrome.
I've developed a dynamic website with device compatibility and now I need to change it to HTML5 but its a dynamic site, is there any simple way to do this?
Yes, you can change all tags with new tags as we discussed on example over our webinar and replace CSS according to it.
While developing its hard for me to find and clear JS and jQuery errors, is there any plug-in orway to identify this, currently I',m using Firebug for this?
Our teams use some of these Firebug, FireQuery, FireFinder...
What is the boilerplate in HTML5?
HTML5 Boilerplate is a standard template for HTML5 and CSS 3 source code which is openly available under a public domain license. You can modify as per your needs. When starting with HTML 5 it helps to build a fast, robust, and adaptable web applications.
How do you record voice in HTML5?
HTML Media Capture APIs help us to capture an image, audio or video.
e.g. we can use
<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
Current support available with:
- Android 3.0 browser - one of the first implementations. Check out this video to see it in action.
- Chrome for Android (0.16)
- Firefox Mobile 10.0
- iOS6 Safari and Chrome (partial support)
Which is preferable flash or HTML5?
In terms of speed HTML5 is faster, it does not need any external plugin and also has lesser coding to get the same output.
Performance wise is HTML5 better than flash? Are there any disadvantages of using HTML5 over flash?
In terms of speed HTML5 is faster, however the limitations of using HTML 5 are the higher file size as there multiple file versions referred for broswer compatibility and no support available for browsers like IE 7 & 8.
How easy is it for websites using flash to move to HTML 5?
It is quite easy. Just replacing flash embad code with video tag as per our example and converting your video file into m4v, webm, ogv.
How would the browser know if the code is html5 or html4?
Browser can determine the HTML version with the help of the doctype tags.
HTML 4 site will have the following first line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd">
HTML 5 site will have the following first line:
Can you please explain how HTML 5 works with JSON in brief?
We can take up detailed example in further webinars, however as an overview, the steps are as below:
- Fetch JSON data from a web server (as a file or as an HttpRequest)
For simplicity, this can be demonstrated by using a string as input (instead of a file).
Does audio tag also work same as video tag ?
Yes, it may look like below example
<source src="cygnet.ogg" type="audio/ogg">
<source src=" cygnet.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
How do you get the current geo-location of the user in html5?
You can use the getCurrentPosition() method of HTML5 Geolocation APIs to get the latitude and longitude of the user's position. Once you have these values of lat and lon, using Google Map API we can achive various functionalities on google map like current location, nearby specific locations like restaurants etc
Any tool in a market to convert HTML 4 to HTML 5?
As of now no, we have to change manually with the use of new element of HTML 5.
Any new validation tag are available in html5 like email-id,mobile no, pin number?
Yes, there are many new input types available as per below list:
Can we make reporting mobile apps in html5
Yes, perfect combination of HTML 5 and CSS 3 has no bounds of creating howsoever complex an application can be.