background preloader

HTML5

Facebook Twitter

Screenfly / Test Your Website at Different Screen Resolutions. Socket.IO. Introducing WebSockets: Bringing Sockets to the Web. The Problem: Low Latency Client-Server and Server-Client Connections The web has been largely built around the so-called request/response paradigm of HTTP.

Introducing WebSockets: Bringing Sockets to the Web

A client loads up a web page and then nothing happens until the user clicks onto the next page. Around 2005, AJAX started to make the web feel more dynamic. Still, all HTTP communication was steered by the client, which required user interaction or periodic polling to load new data from the server. However, all of these work-arounds share one problem: They carry the overhead of HTTP, which doesn't make them well suited for low latency applications. Video for Everybody! Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically without the use of JavaScript or browser-sniffing.

Video for Everybody!

It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many browsers and platforms. Thanks to the rapid adoption of HTML5 video happening right now, Video for Everybody isn’t the only solution around. It is not a neatly packaged, fully-featured solution for those unfamiliar with HTML. VfE is for developers who either want something really simple they can quickly use on their blog or websites, or as a good starting point to develop their own custom solution.

It does not use JavaScript. How It Works If your browser supports it, HTML5 video is used. If HTML5 video is not supported, Adobe Flash is used. MediaElement.js - HTML5 video player and audio player with Flash and Silverlight shims. Reading local files in JavaScript. Introduction HTML5 finally provides a standard way to interact with local files, via the File API specification.

As example of its capabilities, the File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline. Additionally, you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload. The spec provides several interfaces for accessing files from a 'local' filesystem: File - an individual file; provides readonly information such as name, file size, mimetype, and a reference to the file handle.

When used in conjunction with the above data structures, the FileReader interface can be used to asynchronously read a file through familiar JavaScript event handling. Reading Files Using The HTML5 FileReader API. HTML5 saw the introduction of a number of new APIs that can be used to handle files in the browser.

Reading Files Using The HTML5 FileReader API

These APIs make it much easier to accomplish tasks like reading and writing files or uploading a file created using JavaScript. In this blog post you are going to learn how to use the FileReader API to read the contents of a file from your local hard drive. You will be creating two demo applications. The first application will handle reading and then displaying the contents of a text file. Using HTML5 audio and video - Web developer guide. HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents.

Using HTML5 audio and video - Web developer guide

Embedding media in your HTML document is trivial: HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki. The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them.

HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki

The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly. Looking to conditionally load these scripts (client-side), based on feature detects? See Modernizr. Looking for a guide to write your own polyfills? Looking for an alphabetical guide on HTML5, CSS3, etc. features, and how to use them? Looking for a polyfill combinator? Svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas Web Storage (LocalStorage and SessionStorage) Sectioning Elements.

Introduction to HTML5 DOMStorage API with Example. HTML5 is a standard for structuring and presenting content on the World Wide Web.

Introduction to HTML5 DOMStorage API with Example

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 and Microsoft Silverlight. HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block) and <footer> (usually referring to bottom of web page or to last lines of html code). Other elements provide new functionality through a standardized interface, such as the multimedia elements <audio> and <video>. In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs). What is DOM Storage? DOM Storage is a way to store meaningful amounts of client-side data in a persistent and secure manner.

Scope of DOM Storage. HTML5 Geolocation API Tutorial Latitude/Longitude API. HTML5 has finally pushed the web ahead with many new APIs that were lacking since the inception of HTML.

HTML5 Geolocation API Tutorial Latitude/Longitude API

New APIs like DOM Storage API helps in making better web applications. As part of the specification, HTML5 added set of new APIs under title Geolocation that helps the applications to identify location related information from visiting users. Here is the official definition from HTML5 specification: The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. The API can be used to get current location (latitude, longitude) of user. HTML5 Geolocation API Tutorial Latitude/Longitude API.