About WebSocket About HTML5 WebSocket The HTML5 WebSockets specification defines an API that enables web pages to use the WebSockets protocol for two-way communication with a remote host. It introduces the WebSocket interface and defines a full-duplex communication channel that operates through a single socket over the Web. HTML5 WebSockets provide an enormous reduction in unnecessary network traffic and latency compared to the unscalable polling and long-polling solutions that were used to simulate a full-duplex connection by maintaining two connections. HTML5 WebSockets account for network hazards such as proxies and firewalls, making streaming possible over any connection, and with the ability to support upstream and downstream communications over a single connection, HTML5 WebSockets-based applications place less burden on servers, allowing existing machines to support more concurrent connections. The WebSocket Protocol GET Using the HTML5 WebSocket API
Free UX Sketching And Wireframing Templates For Mobile Projects Today we are happy to release two printable UX sketching and wireframing templates, designed by Pixle81 for Smashing Magazine’s readers. This article presents Outline, a set of sketching and wireframing papers for mobile platforms and Tapsize, a set of templates for checking optimal tap areas without a mobile device. Outline Outline is a set of 28 printable sketching and wireframing papers (in PDF) for seven mobile platforms: Android, BlackBerry, iOS (iPad and iPhone), Meego, Symbian, webOS, Windows Phone 7. Note: Print the sheets at actual size (i.e. do not resize). As a bonus, Outline includes an Illustrator file displaying the mobile devices. Outline paper set Windows Phone 7 and 8 panorama template Android 4.x template Tapsize With Tapsize, you can determine the optimal tap area without having an actual device. Tapsize paper set Calculating the grid Checking the optimal tap area for the Google Nexus 7 tablet. Behind the Design Download The Set For Free Download the package7 (ZIP, 2 MB).
Create a Drawing App with HTML5 Canvas and JavaScript { William Malone } by William Malone This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn: How to draw dynamically on HTML5 canvas The future possiblities of HTML5 canvas The current browser compatibility of HTML5 canvas Each step includes a working demo; if you want to skip ahead: Define Our Objective Let's create a web app where the user can dynamically draw on an HTML5 canvas. Our tools could use colors (except maybe our eraser). Similarly let's also give our user 4 different sizes to draw with, because we can. 3 tools: crayon, marker, eraser 4 colors to choose from (except eraser) 4 sizes to choose from Like a coloring book, let's give our user something to "color". Prepare HTML5 Canvas: Markup We only need a line of markup; everything else will be in scripting. Wait... Prepare HTML5 Canvas: Scripting Give it a try: Updates
Start Using HTML5 WebSockets Today One of the coolest new features of HTML5 is WebSockets, which let us talk to the server without using AJAX requests. In this tutorial, we'll review the process of running a WebSocket server in PHP, and then building a client to send and receive messages to it over the WebSocket protocol. What are WebSockets? WebSockets is a technique for two-way communication over one (TCP) socket, a type of PUSH technology. What do WebSockets Replace? Websockets can replace long-polling. Many Ajax applications makes use of the above – this can often be attributed to poor resource utilization. Wouldn't it be great if the server could wake up one morning and send its data to clients who are willing to listen without some sort of pre established connection? Step 1: Get the WebSocket Server This tutorial will focus more on the client building rather than server implementation. I'm using XAMPP on Windows 7 to run the PHP server locally. Start the Apache server Step 2: Change URLs and Ports Step 4: Add Some CSS
HTML5 Boilerplate - A rock-solid default for HTML5 awesome. Introducing WebSocket: 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. 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. 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. Introducing WebSocket: Bringing Sockets to the Web The WebSocket specification defines an API establishing "socket" connections between a web browser and a server. Getting Started You open up a WebSocket connection simply by calling the WebSocket constructor: var connection = new WebSocket(' ['soap', 'xmpp']); Notice the ws:. Attaching some event handlers immediately to the connection allows you to know when the connection is opened, received incoming messages, or there is an error. Proxy Servers
C HTML5 Logo FAQ What does the logo represent? This logo represents HTML5, the cornerstone for modern Web applications. What do the smaller icons represent? The smaller technology class icons represent aspects of modern Web applications and Web sites — style, semantics, graphics, and so forth. Are all those technology features defined in the HTML5 specification? No, not all of them. Is W3C saying that CSS3 is part of the HTML5 specification? No. Can I use this logo on Web applications built on HTML5? Yes. Can I use this logo on Web sites that aren't built with HTML5? Yes, if you are talking about or showing your support for HTML5. Does this logo imply validity? No, this logo does not imply validity or conformance. How is this work licensed? The logo, icons, and website are licensed under Creative Commons Attribution 3.0 Unported The license says I need to attribute my usage or derivative work. This work is attributed to the W3C. Can I put this logo on stickers, t-shirts, etc? What are the original colors? Yes. Yes.
Guía de HTML5 en PDF aprende desde cero el nuevo lenguaje de la web En nuestro recorrido por Latinoamérica compartiendo historias y tendencias de HTML5 empezamos a redactar esta guía para nuestros alumnos. Con HTML5 se está construyendo la web moderna. Vídeo, audio, geolocalización, nuevos componentes y etiquetas que son la base del gran cambio de internet en esta época. Con la guía tomarás las bases para iniciar y crear sitios y aplicaciones en HTML5 para PCs y teléfonos móviles. Funcionales en PC, Mac, iPhone, Androids e iPads. La guía está en producción permanente. Geolocation You are here: Home Dive Into HTML5 Diving In Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky. Ask Professor Markup Q: Geolocation sounds scary. The Geolocation API The geolocation API lets you share your location with trusted web sites. As you can see from the following table, the geolocation API is supported by most browsers on the desktop and mobile devices. Along with support for the standard geolocation API, there are a plethora of device-specific APIs on other mobile platforms. Show Me The Code The geolocation API centers around a new property on the global navigator object: navigator.geolocation. function get_location() { (show_map); } Choices! <!
Onswipe Makes Any News Site Touch-Enabled With HTML5 Magic | Epicenter Look out specialized magazine iPad apps — you’ve got a new competitor that aims to turn any website into a touch-and-swipe experience on tablets and smartphones with just a few lines of JavaScript. Onswipe, which launched Tuesday, works by diverting iPad, iPhone and Android phone users from a publisher’s webpage to a specialized HTML5-driven page that behaves like a custom magazine app such as Popular Science and Wired magazine’s iPad apps or The Daily’s experiment of an app as a daily newspaper. The difference is that Onswipe does all the work – for free. Publishers choose from a range of templates; provide a way for Onswipe to get at the content in the publisher’s database; and include a short line of code in their website. And voila! Sites get instant appification — with magazine-like ads between stories. Onswipe Demo Video from Onswipe on Vimeo. “The tablet is the TV of our generation,” Baptiste said. Others have gone down the road of bypassing native apps for the power of HTML5.
C News Archive: 2011 W3C First Drafts of Three Audio API Specifications Published 15 December 2011 The Audio Working Group has published three First Public Working Drafts to provide an advanced audio API for the Web: the Web Audio API and MediaStream Processing API specifications each define a different approach to process and synthesize audio streams directly in script. Read the blog post Sounding Out the Audio APIs for more information about the possibilities unlocked by an audio API, and learn more about the Rich Web Clients Activity. Drafts Updated for XHTML+RDFa 1.1 and RDFa Core 1.1 The RDF Web Applications Working Group has published a Working Draft of RDFa Core 1.1, a specification for attributes to express structured data in any markup language. The PROV Data Model and Abstract Syntax Notation Draft Published The Provenance Working Group has published a Working Draft of The PROV Data Model and Abstract Syntax Notation. CSS 2D Transforms Updated W3C Invites Implementations of Touch Events version 1
HTML5 Moved Into Review Phase Daniel Bailey in Business Products on May 27 The collection of technologies that will redefine much of the Internet as we perceive it today is going into a public review phase that invites comments and hopes for feedback on outstanding issues to enable a standardization by 2014. The Official HTML5 Logo The development of a standard is never anything that happens overnight and even if it appears that HTML5 is already a standard, it is in dire need of much more control and strong definitions for a final standard. The W3C said that the original work on HTML5 began in 2007 at the W3C, but has been in development by the WHATWG since 2004 . The W3C said that HTML5 currently has “around 200 bugs” and “25 issues”. There is a good chance that an HTML5 page that is demonstrated by Microsoft to highlight a certain feature in IE9 will look and sound different in Chrome – and vice versa. You can leave a response , or trackback from your own site.
Understanding HTML5 Validation One of things that we need to get used to when making the switch from HTML4/XHTML to HTML5 is the way HTML5 validation works, because it’s drastically different from what we’ve become accustomed to in previous iterations of web markup. First, it should be noted that the W3C’s HTML5 validation engine is “experimental”, so it’s a work in progress that will likely see many changes over the next year or more. Also, we shouldn’t refer to it as a “validator” anymore; it’s now more accurately referred to as a “conformance checker” (although for simplicity I’ll be using the term “validation” and its derivatives). Thus, when you validate a page, the following warning is given: The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. <! <! HTML5: 0 Errors; XHTML: 23 Errors <! <!