This Is What I Know About: HTML5

Tuesday, 22 November 2011

Web Performance With Flash And HTML5

Web Performance With Flash And HTML5

By Kevin Darwin

So, Flash is a vibrant platform that offers a high degree of rich functionality, some of it best-of-breed. Sites and applications developed with Flash are available to virtually every non-mobile Web user, and likely to be available for most mobile users before long, except for those using Apple products.
HTML5 is an exciting, evolving Web coding language with extensive support from all of the Internet's heavy hitters - Google, Apple, Microsoft (albeit slowly), Mozilla, Opera, and yes, even Adobe. It promises to simplify and speed-up both the Web development and Web browsing experience, has native capability to handle multimedia and rich Internet functionality without external plugins, and has ambitions to be the technology that finally bridges all devices, mobile included.
A number of leading Internet voices argue that it's not an either-or scenario. Flash is the best platform for some applications, and HTML5 for others. But how is a developer to decide what the best technology is for the project that's in front of them? Assuming A) that the technology can perform the desired function and B) that the end product is available on user devices, it gets down to a matter of performance.
See HTML5 run

Because it's an open technology (with the possible exception of video), HTML5 promises to lend itself to the robust performance monitoring, measurement, and diagnosis that's been available for other open Web technologies. And it is expected that the advances found in HTML5 will, if used judiciously, be a boon to overall page performance.
Aside from any inherent speed gains, another big advantage of HTML5 vis-�-vis Flash is that, because it is an open technology, real browsers can be deployed in the field to measure and record virtually all of its activity and performance. As has been the case with HTML in all its flavors, and JavaScript, AJAX, etc., performance issues are transparent, and problem sources are more readily visible. There are far fewer black holes that require deep diagnosis.
One of the most anticipated features of HTML5 - and one of the most debated - is the ability to handle audio and video natively in the browser. A few simple lines of code is all it takes to embed A/V files, and, once browsers are updated to handle HTML5, the user would need no special plug-ins to run the files.
As mentioned above, Flash is by far the dominant force in online video. But HTML5 is already making inroads. Vimeo has introduced HTML5 video capability in a new universal player, enabling its videos to be viewed on mobile devices, including those from Apple. And Google has introduced a new, HTML5 mobile version of its site, m.youtube.com, which is promoted as delivering better video with a better interface than Apple's own YouTube app.
Keynote Systems - Web performance
mobile website testing, web load testing and measurement of your web sites online performance from inside and outside the firewall all the way to the actual end-user.

Article Source: http://EzineArticles.com/?expert=Kevin_Darwin

http://EzineArticles.com/?Web-Performance-With-Flash-And-HTML5&id=6696284

Thursday, 17 November 2011

Getting started with HTML5 – Input Types

I had my first hands on experience with HTML5 and I am quite impressed with it. HTML5 will definitely change the way we build web sites and the way we access them. Most popular browsers and mobile devices have already started supporting some HTML5 features.

To start with, I will cover few basic but interesting features of HTML5.

Please note, I have used Google Chrome browser to test these features.

HTML5 doctype

To use HTML5, you need to place <!DOCTYPE html> code snippet on the first line of your HTML file.

For example:

<!DOCTYPE html>

<html>

<body>

Name : <input type="text" />

</form>

</body>

</html>

HTML5 Input Types

Many new input types are introduced in HTML5. Some of the most interesting input types are as below.

Number - The number input types is a field which should contain numeric value. The number input type supports a following validation attributes.

min – minimum value allowed

max – maximum value allowed

step - Allowed number series between min and max. it means if min=0, max=10 and step=2 then allowed field values will be 0,2,4,6….10.

Example:

Even Numbers: <input type=”number” name=”Even” min=”0” max=”10” step=”2”/>

In above example value less than 0 or greater than 10 or odd values like 3,5,7 are considered as invalid values.

Range – The range input type is very similar to number input type. However, it is displayed as slider bar. The range input type supports a following validation attributes.

min – minimum value allowed

max – maximum value allowed

step - This defines a jump for slider bar. It means if step=5 then slider slides a 5 points at a time.

Example:

Zoom : 0 <input type="range" name="zoom" min="0" max="100" step="5"/> 100

In browser, this is represented as below.

Email – The email input type is a field which should contain email address as value. On form submit, value of email field is automatically validated.

Example:

Personal Email: <input type="email" name="personalEmail"/>

If user enters an incomplete/invalid email address then following warning message is displayed.

URL – The url input type is a field which should contain URL address as a value. On form submit, value of url field is automatically validated.

Example:

URL: <input type="url" name="myUrl"/>

If user enters an incomplete/invalid URL address then following warning message is displayed.

Date – The date input type field should contain date as a value. On form submit this field is validated automatically.

Example:

Date: <input type="date" name="date"/>

In browser, this is represented as below.

Month – The month input type filed is used for selecting year and month. On form submit this field is validated automatically.

Example:

Month: <input type="month" name="month"/>

In browser, this is represented as below.

Week – The week input type filed is used for selecting year and week. On form submit this field is validated automatically.

Example:

Week: <input type="week" name="week"/>

In browser, this is represented as below.

Time - The time input type filed is used for selecting hours and minutes. On form submit this field is validated automatically.

Example:

Time: <input type="time" name="time"/>

In browser, this is represented as below.

Datetime - The datetime input type filed is used for selecting year, month, day, hours and minutes (UTC time). On form submit this field is validated automatically.

Example:

Date Time: <input type="datetime" name="d_time"/>

In browser, this is represented as below.

Datetime-local - The datetime-local input type filed is used for selecting year, month, day, hours and minutes (local time). On form submit this field is validated automatically.

Example:

Date Time Local: <input type="datetime-local" name="d_time_local"/>

In browser, this is represented as below.

……………………………………………………………………………………………..

So, today I have covered few important HTML5 input types. This is only a tip of iceberg. I will cover few more HTML5 features in my next post. Meanwhile I would recommend you to read Head First HTML5 Programming: Building Web Apps with JavaScript.

Please feel free to post your queries.