HTML5 Questions

1.Basic blocks of HTML 5 page

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <header>
    <!-- header content goes in here -->
  </header>
  <nav>
    <!-- navigation menu goes in here -->
  </nav>
  <section id="sidebar1">
    <!-- sidebar content goes in here -->
  </section>
  <section id="main">
    <!-- main page content goes in here -->
  </section>
  <aside>
    <!-- aside content goes in here -->
  </aside>
  <footer>
    <!-- footer content goes in here -->
  </footer>
</body>
</html>

2. Web Forms 2.0

Input element with new types:

Type Description
datetime A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.
datetime-local A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.
date A date (year, month, day) encoded according to ISO 8601.
month A date consisting of a year and a month encoded according to ISO 8601.
week A date consisting of a year and a week number encoded according to ISO 8601.
time A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
number This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
range The range type is used for input fields that should contain a value from a range of numbers.
email This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.
url This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

New output tag in forms.

And additional attributes:

autofocus, required, and placeholder.

http://www.tutorialspoint.com/html5/html5_web_forms2.htm

3. Some new HTML5 markup elements

<article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <section>, <time>,<wbr>.

4. What’s Page Visibility API? 

The Page Visibility API lets you know when a webpage is visible or in focus. With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. When the user minimizes the webpage or moves to another tab, the API sends a visibilitychange event regarding the visibility of the page. You can detect the event and perform some actions or behave differently. For example, if your web app is playing a video, it would pause the moment the user looks at another browser, and plays again when the user returns to the tab. The user does not lose their place in the video and can continue watching.

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Demo

5. HTML 5 Render Engines

https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

6. HTML5 Offline Storage

http://www.html5rocks.com/en/tutorials/offline/storage/

https://developer.chrome.com/apps/offline_storage

7. Web page communication cross tabs ?

Use localStorage, window.postMessage

8. Web Workers

A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.

Use Cases:

  • Prefetching and/or caching data for later use
  • Code syntax highlighting or other real-time text formatting
  • Spell checker
  • Analyzing video or audio data
  • Background I/O or polling of webservices
  • Processing large arrays or humungous JSON responses
  • Image filtering in <canvas>
  • Updating many rows of a local web database

Here’s a summary of what Web Workers do and don’t have access to.

  • Can use:
    • navigator object
    • location object (read-only)
    • importScripts() method (for accessing script files in the same domain)
    • JavaScript objects such as Object, Array, Date, Math, String
    • XMLHttpRequest
    • setTimeout() and setInterval() methods
  • Can’t use:
    • The DOM
    • The worker’s parent page (except via postMessage())

http://www.html5rocks.com/en/tutorials/workers/basics/

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

https://developers.google.com/web/updates/2011/09/Workers-ArrayBuffer

9. Video tag usage

<video width="640" height="360" controls>
  <source src="">
</video>

10.Canvas usage

<canvas id="myCanvas" width="200" height="100" > </canvas>

11. Geolocation API

getCurrentPosition, watchPosition, clearWatch

Lat/Lng/alt detection, speed detection, tracking

12. Realtime API

WebSockets and Server-Sent Events

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s