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 and delight 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
- Q&A
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.
Do you have some example about browser storage usage?
There are few examples, we can take up in detail in further
webinars.
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:
<!DOCTYPE HTML>
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)
- Convert the JSON data to a JavaScript object
- Use the data in a web page by extracting from JavaScript
object
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
<audio controls>
<source src="cygnet.ogg" type="audio/ogg">
<source src=" cygnet.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
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:
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week
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.
JavaScript is disabled.. Please enable it for Comment..