An Overview on Open Web Technologies

0
2065

Open Web Technologies have a promising future enabling web developers to create experiences on the web that are more application like, and provide a richer more immersive experience. No matter the form factor or device creating the next, great experience is in hands of web developers building with HTML5, CSS3 and the rest of the open web platform.

 

Not many people get excited about forms, but HTML5 brings some big improvements, both for the developers creating then and for the users filling them out. New form elements, attributes, input types, browser-based validation, CSS3 styling techniques, and the FormData object make it easier and hopefully more enjoyable to create forms. Frequently mobile devices will customize their on screen keyboards to provide a more streamlined user experience. One of the best features of these new form elements is that they have a reasonable fallback experience in browsers that don’t support then. Instead of showing the specialized input fields, old browsers simply allow the user to provide the data in normal text box. HTML5 introduces 13 new input types. When viewed in a browser that doesn’t support them, these input types fall back to text input.

 

New Input Types in HTML5

 
tel: for entering a telephone number.
search: to prompt user to enter text that they want to search for.
url: for entering a single URL.
email: for entering either a single email address of a list of email addresses.
datetime: for entering a date and time with the time zone set to UTC.
date: for entering a date with no time zone.
month: for entering a date with a year and a month, but no time zone.
week: for entering a date that consists of a week-year number and a week number without timezone.
time: for entering a time value with hour, minute, seconds, and fractional seconds, but no timezone.
datetime-local: form entering a date and time with no time zone.
number: for numeric input.
range: for numerical input but unlike number the actual in not important.
color: for choosing color through a color well control.

 

html5-future

 

HTML5 Canvas

The HTML5 canvas element and API is a way to use scripting to draw graphics on a web page, with control down to the pixel level. The canvas element has several methods for drawing paths, boxes, circles, characters and adding images. It can be used to draw graphs, edit or make photo compositions or do simple and complex animations, with knowledge of HTML5 and JavaScript you’ve got enough to get started.

 


<canvas id=”canvas1” width=”400” height=”400”> </canvas>
Function draw()
{
Var canvas = document.getElementById(“canvas1”);
Var Ctx = convas.getContext(“2d”);
Ctx.fillStyle = “rgb(100,0,0)”;
Ctx.fillRect(10,10,55,50);
Ctx.fillStyle = rgba(0,50,200,0.2);
Ctx.fillRect(30,30,55,50);
}

 

To draw on a canvas element, we need to use the getContext(“2d”) method to get the drawing surface. The 2D context represents a flat Cartesian surface, where the (0,0) origin is at the top left corner, X and Y increasing as to move right or down respectively. The function draw() assigns the 2D context to the variable Ctx. The example then draws a red rectangle and a blue green rectangle by setting the fill color via Ctx.fillStyle and then drawing the rectangle with fillRect. This is a basic example and there is a lot more possibilities than drawing two rectangles.

 

Audio and Video: The new way!

In the past time, rich media to your site meant depending on a plug-in, but HTML5 promotes audio and video to first class citizens, allowing them to be included on your page in the same way you’d include an image. The video element is one of those HTML5 features that get a lot of attention. Although it’s recently joined the rest of the ubiquitous HTML tags, its capabilities and support across browsers have increased at an amazing speed. One of its biggest advantages is the natural integration with the other layers of the web development stack such as CSS and JavaScript as well as the other HTML tags.

 

<video width=”640” height=”360” src=”some url of video” controlsautobuffer> </video>

 

That’s it and your video is live in website. So simple and easy to implement any video. Most important thing is you can add multiple videos files in one video tag to support different codecs.

 

Until recently, the ability to play an audio file within a browser involved using Adobe Flash or other browser plugins. Although Adobe’s Flash player in unquestionably the most ubiquitous of these, most developers and designers would agree that it’s better not to rely on a plugin at all. One of the most exciting and long awaited features in HTML5 is the enabling native audio playback within the browser. The audio element APIs allows you to access control and manipulate time line data and network states of the files. The audio tag is supported by nearly all of the major browsers.

 


<audio controls preload=”auto” autobuffer>
<source src=”song1.mp3” />
<source src=”song1.ogg” />

 

Geolocation

The geolocation API lets you find out where the user is and keep tabs on them as they move around, always with the user’s consent. This functionality could be used as part of user’s queries, e.g. to guide someone to a destination point. It could also be used for “geo-tagging” some content the user has created, e.g. to mark where a photo was taken. The API is device-agnostic; it doesn’t care how the browser determines location. So long as clients can request and receive location data in a standard way. The underlying mechanism might be via GPS, wifi or simply asking the user to enter their location manually.

 


function get_location()
{
Navigator.geolocation.getCurrentPosition(show_map);
}

 

CSS3

With the introduction of CSS3 it has never been easier to create rich and beautiful sites and application in HTML. There are many new technologies and extensions to CSS3 including 2D transformations, Transitions, 3D Transformations and WebFonts to name just a few. You can create rich user experiences with no coding effort required; just simply apply a little CSS3 to your existing applications. CSS3 Transformations allow you to apply rotations, scales, skews and translations to any DOM element with simple styles. Transitions allow you to specify how to style on a DOM element will animate between transformed states. Things that developers and designers have been asking for years are also included, like rounded corner support with border-radius, opacity, new color models like HSLA and RGBA, text shadows, box shadows and plenty more. There are lots of great examples of people pushing the edge with nothing but CSS3 and HTML5.