Find: visualizing the evolution of the web

Behind the scenes: visualizing the evolution of the web

Dero

Sergio

This guest post is by Sergio Alvarez, Vizzuality, and Deroy Peraza, Hyperakt, in collaboration with Min Li Chan, Chrome Team

At Google I/O this year, we launched a new version of The Evolution of the Web, a project visualizing the history and pace of innovation in web technologies and browsers. The Evolution of the Web traces how web technologies have evolved in the last two decades and highlights the web community’s continuous efforts to improve the web platform and enable developers to create new generations of immersive web experiences. In collaboration with the Google Chrome team, the team at Hyperakt designed the interactive visualization while Vizzuality built it using HTML5, SVG, and CSS3.

The visualization included 43 web technology "strands" across 7 browser timelines to represent major developments on the web platform. On hover or tap, each strand is highlighted to reveal intersections that tell the story of when browser support was implemented for each new web technology. To provide additional context, we developed a secondary visualization to illustrate the growth of Internet users and traffic.

Find: Developer releases source of HTML5 mobile game, sheds light on challenges

Looks like a valuable resource!

Developer releases source of HTML5 mobile game, sheds light on challenges

Inspired by the buzz around HTML5, game development studio Wooga recently attempted to build a complete mobile game with standards-based Web technologies. To share the results of its year-long experiment, the company has published the game’s source code on GitHub under an open source software license.

Wooga also published a blog entry that describes some of the lessons that their developers learned from the experience. The company sees considerable potential in HTML5 gaming, but says that the technology isn’t quite ready yet. Wooga is releasing the source code with the hope that it will contribute to the Web development community’s body of knowledge.

"The reason we’re making Pocket Island open source is so that talented developers all around the world can learn from the team’s work here at Wooga, before breaking and improving on it," the company wrote in a blog post. "The promise of HTML5 is still an exciting one and while the time for mass market implementation may not be in 2012, we’re confident its time will come."

Tool: Chrome 18 arrives with hardware-accelerated Canvas

Webapps getting faster...

Chrome 18 arrives with hardware-accelerated Canvas

Ars Technica

Version 18 of the Chrome Web browser has rolled out to the stable channel. The new version includes hardware-accelerated rendering for the HTML5 Canvas element on Windows and Mac OS X.

As we have recently reported, standards-based Web technologies provide an increasingly capable platform for game development. The major browser vendors are working to further increase the viability of open standards for browser-based gaming. Offloading Canvas rendering to the GPU helps reduce the CPU load of 2D games and improves performance. The feature has been available in Chrome for quite some time, but it's now finally enabled by default.

Hardware-accelerated Canvas rendering is only available on systems with compatible graphics hardware. You can get some information about what features in Chrome have hardware acceleration enabled on your system by navigating to the "chrome://gpu" URL.

Another key open standard that is relevant for gaming is WebGL, which provides JavaScript APIs for rendering 3D content in the Canvas element. In Chrome 18, Google has introduced a software-based backend for WebGL based on TransGaming's SwiftShader. This will make it possible for users to view WebGL content on computers that don't have compatible graphics hardware. Although it will open up WebGL content to more users, the software-based renderer doesn't offer comparable performance to native hardware-accelerated WebGL.

In addition to these improvements, the Chrome developers have also been working to make various security improvements based on vulnerabilities that were exposed during the Pwnium competition. For more details about the Chrome 18 release, you can refer to the official release announcement. The software is available for download from Google's website.

Find: A fresh new look for HTML5Rocks.com

Looks like a good resource. 

A fresh new look for HTML5Rocks.com

Google Code Blog

By Eric Bidelman, Senior Developer Programs Engineer, Google Chrome Team

Over the past year, HTML5Rocks.com has become a top destination for developers craving to learn more about HTML5. Today, we have over 60 articles and tutorials covering the latest HTML5 tech, published by 30 contributors from around the world! We've worked hard to bring great content to the site as quickly as possible, but it's been challenging to consolidate so much information as HTML5 continues to push the web forward and evolve at an accelerated pace.

Today, we're launching an updated HTML5Rocks with better tools for finding content, including an edgy new look and "rocking" logo. As our content expands, finding things becomes more important. To address this, we've created "persona pages" with catered content in 3 different verticals (Games, Business, Mobile). If you're one of those developers, finding content relevant to you should now be a snap. We've also consolidated many of the different components (Updates, Studio, Playground) into the main site and have deeply integrated the HTML5 technology classes to bring a better identity to the content.

All in all, it's a little bit Punk and a little bit Rock and Roll.

Lastly, if you're interested in contributing to the site, it's an open source project and we'd love to have your expertise. See our contributors guide.

Eric Bidelman is a Senior Developer Programs Engineer on the Google Chrome Team and a core contributor to html5rocks.com. He is the author of the book Using the HTML5 Filesystem API.

Posted by Scott Knaster, Editor

Find: HTML5 bullets: Sencha issues developer scorecard for Chrome on Android

Chrome is a big leap forward for android and html5 webapps. 

HTML5 bullets: Sencha issues developer scorecard for Chrome on Android

Ars Technica

Google issued a beta release of Chrome for Android last week. The port, which brings Chrome's feature set and excellent support for Web standards to Android, is a major improvement over the mobile platform's current default browser.

As we reported in our coverage of the beta, Android's default browser has historically had difficulty handling sophisticated application-like Web experiences. The new port of Chrome has the potential to remedy that weakness and bring highly competitive HTML5 support to Android.

Find: WebKit in Your Living Room

WebKit in Your Living Room

The Netflix Tech Blog

Hi, it's Matt Seeley, engineer on the device UI team at Netflix.  My team uses WebKit, JavaScript, HTML5 and CSS3 to build user interfaces for the PlayStation 3, Wii, Blu-ray players, Internet-connected TVs, phones and tablets.

Recently I spoke at the HTML5 Dev Conf about WebKit-based UI development on consumer electronics.  I discussed:

• Responding to user input quickly while deferring expensive user interface updates
• Managing main and video memory footprint of a single page application
• Understanding WebKit's interpretation and response to changes in HTML and CSS 
• Achieving highest possible animation frame rates using accelerated compositing

Watch the video presentation from the conference:

Slides are also available in PDF

Astute readers will realize that portions of the content are also suitable for mobile and desktop development. It's all about building great user interfaces that take best possible advantage of the device.

Interested in joining our team? We're hiring!

Sent with Reeder

Tool: How the world was open sourced

Google doodle source code.

How the world was open sourced

Once in awhile at Google our illustrators get excited about lasers, Morse code, H. G. Wells’s The War of the Worlds – and then come up with beautiful Google doodles that find their way onto our homepage. Sometimes our programmers also get excited and team up with the illustrators, and that’s how we found ourselves with Google doodles celebrating Les Paul’s guitar, Pac-Man, Jules Verne’s bathyscaphe, and even your own customized turkey that you could then share on Google+.
I’m one of those people who is more comfortable with 80 monospaced characters endlessly repeated than with a paintbrush. Earlier this year I worked with Sophia Foster-Dimino from the Google doodle team on a doodle celebrating Stanisław Lem, my favorite sci-fi writer and philosopher.

 

Tool: Jonathan Stark on Mobile" from the The Web Ahead podcast

Good info on html5 for mobiles and phonegap.

Jonathan Stark joins Jen Simmons to talk about web apps vs. native apps, when to use which mobile technology, how to plan a good mobile experience, touch events, and more.

Find: NY Times cross-platform ads in HTML5

NYT goes html5 across its sites.

The New York Times runs a cross-platform interactive ad campaign in HTML5
via Nieman Journalism Lab by Megan Garber on 11/15/11

Android 4.0 Browser: smartphones meet Tablet on HTML5 API's

Android 4.0 was announced and the SDK was released. A look at the emulator running on the new 4.0 os,I observed following - unfortunately it’s still Android Browser and not Chrome, but it comes in a better way.

Find: Amazon e-books with HTML5 power

Html5 in ebooks so layout can handle childrens books, comics

Amazon infuses e-books with HTML5 power with new KF8 format

Guest: on October 19 (tomorrow!), Clayton Coleman of IBM

Folks,

Tomorrow (October 19), we'll be visited by Clayton Coleman of IBM. Please read his biology below and prepare some questions for him (as I will):

I'm the web interface lead for IBM Connections - IBM's enterprise social networking suite - and I'm also the team lead of the Files product within that suite.  I've been working in the social / collaboration space for about 10 years for IBM with a focus on web interface design - essentially everything between the browser and the server (which usually runs WebSphere, IBM's version of the Java EE server stack).  Connections has capabilities that most people are familiar with - we have profiles and activity streams (like Facebook), ad hoc communities (like Yahoo Groups), files (like Google Docs), wikis, discussion forums, blogs, ad-hoc lists and simple project management, and social bookmarking.  The biggest difference is that we are building products focused towards big companies, which means that we have to show how social networking improves productivity while remaining secure, rather than focusing on driving more ad revenue and more page views.  We use all of the technologies we can in the browser space - modern HTML5 concepts like Forms and Canvas/SVG, rich JavaScript interaction patterns, but also server side generation of content when necessary.  Usability is very important and we have to walk a fine line between using the newest spec features with a degraded experience for older clients, or having experiences that are only possible in the newest browsers.  We also have to be able to deploy our web applications into customer environments with minimal configuration and setup, but get high performance and maintainability out of the box.  In the past I've worked on web content management and personalization with rules engines as well as other internal document management solutions.

See you soon!

Best,

Ben

Guest: On Nov 2, Markus Wust, Jason Casden, and Cory Lown of NCSU libraries

Folks,

On November 2, we'll be visited by Markus Wust, Jason Casden and Cory Lown of NCSU library's digital initiatives and their copyright and digital services center.

They'll be talking about their web projects that use html5 and similar.

Please prepare any questions you may have about the tools they use.

Best,

Ben

Dev: Windows 8 Download, Developer Preview

Program ms tablet/phone interfaces in html5

Windows 8 Download, Developer Preview

Tool: How Netflix uses WebKit and HTML5 for connected devices

Html5 making money. Lotsa money. 

How Netflix uses WebKit and HTML5 for connected devices

Tool: New features and a new home for Swiffy

Flash to html5 convertor

New features and a new home for Swiffy

By Pieter Senster, Software Engineer

Tool: RGraph charts on HTML5 canvas

RGraph is a javascript library which makes using the new HTML5 canvas tag easier for generating charts on the client side. These charts load quickly and make it easier to customize the graphs based on the requirement. There are 19 different types of charts in this library. Apart from the usual list of charts like the bar graphs, line graphs etc. It also has the less popular but more intuitive charts like the Rose charts and Gantt charts. The library is very simple to use. It doesnt have dependency on any other libraries so cross browser support is easier too. It also has popular features in client side charting libraries like AJAX support, caching, compression.

This is a screen shot of the rose diagram generated by RGraph

These charts are interactive and very easy to customize. There is good documentation and examples for all the 19 types.

Tool: Recapping TimesOpen, HTML5 and Beyond

Coffescript sounds interesting

Recapping TimesOpen, HTML5 and Beyond

Thank you to everyone who came out to the first in this year's TimesOpen series, an in-depth set of talks about HTML5 and related technologies.

Tool: d3.js (Data-Driven Documents)

D3.js is javascript library for visualization on websites or for web application. It uses JSON or DOM objects(as any other javascript) as input for generating Visualization. The author of this tool is Mike Bostov. This tool tries just to manipulate data in document object model by exploiting complete capabilities of HTML5 and CSS3.It uses SVG graphics with javascript very efficiently, because of which it can render large datasets with extremely fast with animations and and interactions. It is divided in modules to make web application light by including only required module.

Sample: This is sample code of usage of tool.

var svg = d3.select("#chart")

.append("svg:svg")

.attr("width", 400)

.attr("height", 600)

.attr("class", "PiYG");

svg.selectAll("circle")

.data(vertices.slice(1))

.enter().append("svg:circle")

.attr("transform", function(d) { return "translate(" + d + ")"; })

.attr("r", 2);

Above code is trying to create svg element of visualization.Later on it is drawing circles with properties depending data.

Examples: http://mbostock.github.com/d3/ex/

Download link: https://github.com/mbostock/d3/archives/master

Reference :

1. http://mbostock.github.com/d3/

Event: Register now for New Game, the conference for HTML5 game developers

Sounds nice!

Register now for New Game, the conference for HTML5 game developers

By Seth Ladd, Chrome Team