Posts

Showing posts from May, 2020

010. HTML5 Server Sent Events

-
Conventional web applications generate events which are dispatched to the web server. For example a simple click on a link requests a new page from the server. The type of events which are flowing from web browser to the web server may be called client-sent events. Along with HTML5,  WHATWG  Web Applications 1.0 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Using SSE you can push DOM events continously from your web server to the visitor's browser. The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling. Server-sent events standardizes how we stream data from the server to the client. Web Application for SSE: To use Server-Sent Events in a web application, you would need to add an <eventsource> element to the document. The  src  attribute of <eventsource> element should...
Post a Comment
Read more

009. HTML5 Web SQL Database

-
The Web SQL Database API isn't actually part of the HTML5 specification but it is a separate specification which introduces a set of APIs to manipulate client-side databases using SQL. Web SQL Database will work in latest version of Safari, Chrome and Opera. The Core Methods: There are following three core methods defined in the spec that I.m going to cover in this tutorial: openDatabase:  This method creates the database object either using existing database or creating new one. transaction:  This method give us the ability to control a transaction and performing either commit or rollback based on the situation. executeSql:  This method is used to execute actual SQL query. Opening Database: The  openDatabase  method takes care of opening a database if it already exists, this method will create it if it already does not exist. To create and open a database, use the following code: var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); Above method...
Post a Comment
Read more

008. HTML5 Webstorage

-
HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side and to overcome following drawbacks. Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data. Cookies are included with every HTTP request, thereby sending data unencrypted over the internet. Cookies are limited to about 4 KB of data . Not enough to store required data. The two storages are  session storage  and  local storage  and they would be used to handle different situations. The latest versions of pretty much every browser supports HTML5 Storage including Internet Explorer. Session Storage: The  Session Storage  is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time. Example: For example, if a user buying plane tickets in two different windows, using the same site. If th...
Post a Comment
Read more

007. MathML Tutorial

-
Image
The HTML syntax of HTML5 allows for MathML elements to be used inside a document using <math>...</math> tags. Most of the web browsers can display MathML tags. If your browser does not support MathML, then I would suggest you to use latest version of Firefox. You can check W3 Specification for MathML at  MathML 2.0 Specification . MathML Examples: Following is a valid HTML5 document with MathML: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Pythagorean theorem</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </ma...
Post a Comment
Read more

006. HTML5 SVG Tutorial

-
Image
SVG stands for  S calable  V ector  G raphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc. SVG became a W3C Recommendation 14. January 2003 and you can check latest version of SVG specification at  SVG Specification . Viewing SVG Files: Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Internet Explorer users may have to install the  Adobe SVG Viewer  to be able to view SVG in the browser. Embeding SVG in HTML5 HTML5 allows embeding SVG directly using  <svg>...</svg>  tag which has following simple syntax: <svg xmlns="http://www.w3.org/2000/svg"> ... </svg> Firefox 3.7 has also introduced a configuration option ("about:config") where you can enable HTML5 using the following steps: Typ...
Post a Comment
Read more

005. HTML5 Webforms 2.0

-
Web Forms 2.0 is an extension to the forms features found in HTML4. Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4. The <input> element in HTML4 HTML4 input elements use the  type  attribute to specify the data type.HTML4 provides following types: Type Description text A free-form text field, nominally free of line breaks. password A free-form text field for sensitive information, nominally free of line breaks. checkbox A set of zero or more values from a predefined list. radio An enumerated value. submit A free form of button initiates form submission. file An arbitrary file with a MIME type and optionally a file name. image A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission. hidden An arbitrary string that is not normally displayed t...
Post a Comment
Read more

004. HTML5 Events

-
When a user visit your website, they do things like click on text and images and given links, hover over things etc. These are examples of what JavaScript calls events. We can write our event handlers in Javascript or vbscript and you can specify these event handlers as a value of event tag attribute. The HTML5 specification defines various event attributes as listed below: There are following attributes which can be used to trigger any  javascript  or  vbscript  code given as value, when there is any event occurs for any HTM5 element. We would cover element specific events while discussing those elements in detail in subsequent chapters. Attribute Value Description offline script Triggers when the document goes offline onabort script Triggers on an abort event onafterprint script Triggers after the document is printed onbeforeonload script Triggers before the document loads onbeforeprint script Triggers before the document is printed onblur script Triggers when the ...
Post a Comment
Read more

003. HTML5 Atributes

-
As explained in previous chapter, elements may contain attributes that are used to set various properties of an element. Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example. Following is the example of an HTML5 attributes which illustrates how to mark up a div element with an attribute named class using a value of "example": <div class="example">...</div> Attributes may only be specified within start tags and must never be used in end tags. HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. Standard Attributes: The attributes listed below are supported by almost all the HTML 5 tags. Attribute Options Function accesskey User Defined Specifies a keyboard shortcut to access an element. align right...
Post a Comment
Read more

002. HTML5 Syntax

-
In HTML5, when a user visit your website, they do things like click on text and images and given links, hover over things etc. These are examples of what JavaScript calls events. We can write our event handlers in Javascript or vbscript and you can specify these event handlers as a value of event tag attribute. The HTML5 specification defines various event attributes as listed below: There are following attributes which can be used to trigger any  javascript  or  vbscript  code given as value, when there is any event occurs for any HTM5 element. We would cover element specific events while discussing those elements in detail in subsequent chapters. Attribute Value Description offline script Triggers when the document goes offline onabort script Triggers on an abort event onafterprint script Triggers after the document is printed onbeforeonload script Triggers before the document loads onbeforeprint script Triggers before the document is printed onblur script Triggers...
Post a Comment
Read more

001. HTML5 Overview

-
HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears. Browser Support: The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5. New Features: HTML5 introduces a number of new elements and attributes that helps in building a modern websites. Following are great fe...
1 comment
Read more