“Information from millions of taxi trips provides a telling record of the city’s vital signs. The map shows the average number of pickups for different times of the day and days of week, Jan. – March, 2009″

View the visualization at nytimes.com

Have you ever wanted to be invisible in the middle of the city? Well a group of German artists have achieved this lofty goal. By designing their camouflage to look like the surrounding urban environments they essentially disappeared from the landscape. OK, mostly. Cool project.

View the full post with all of the photos.

“Even though water comes out of the faucet looking clean and clear, there is a good chance it has some pretty nasty stuff in it. A new study has cataloged all the pollutants and chemicals that appear in our tap water, and they include things like arsenic and fuel additives. Many of these pollutants are unregulated, meaning no matter how high a dose appears in your water, it’s still not illegal.”

Visit the the original post and see the full graphic.

There are about 300,000,000 of us in the USA, spread out over 3,794,101 sq. miles. In other words if we wanted to we could all move into and live in an area the size of New Hampshire; the 5th smallest US state (8,968 sq. miles) with extra room for more more parks.

Visit the the original post and see the full graphic.

via: @timoni

Please let me know through a comment if you know of any other great HTML5 articles, tutorials or websites, and I’ll be glad to post them. Also thanks to all of the folks who produced all of these great free learning experiences.

Articles

An Exploration of HTML 5

At the Confoo.ca conference in Montreal, Quebec, Mark Pilgrim of Google gave an impressive keynote providing an overview of the current state of HTML 5. The information in this post was inspired by his comphehensive talk. Are you wondering what is currently available in HTML 5 and if you can start using it?

HTML 5 differences from HTML 4

HTML 5 defines the fifth major revision of the core language of the World Wide Web, HTML. “HTML 5 differences from HTML 4″ describes the differences between HTML 4 and HTML 5 and provides some of the rationale for the changes. This document may not provide accurate information as the HTML 5 specification is still actively in development. When in doubt, always check the HTML 5 specification itself.

HTML 5 Reference

This document illustrates how to write HTML 5 documents, focussing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.

More on developing naming conventions, Microformats and HTML5

It seems like a lifetime ago that I first sat down with a cup of tea and a bourbon biscuit and thought about the conventions that we use for naming HTML/XHTML id and class attribute values.

Semantics in HTML 5

I’m going to make a bold prediction. Long after you and I are gone, HTML will still be around. Not just in billions of archived pages from our era, but as a living, breathing entity. Too much effort, energy, and investment has gone into developing the web’s tools, protocols, and platforms for it to be abandoned lightly, if indeed at all.

W3C HTML5 Spec

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

Tutorials

A Selection of Supported Features in HTML5

You can refer to the PNG Image with Color Coding or use the tabular data option below. Note: The table includes some modifications in regards to Opera support for audio and video which are not represented in the PNG.

Basic HTML 5 layout

Today we are going to have a quick look into the layout of HTML 5, we have put together a very basic HTML 5 page so that you can get a rough idea of what to expect from the upcoming code.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

Coding A HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

Designing a blog with html5

Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog.

Drag and drop

As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature.

How HTML5 Web Sockets Interact With Proxy Servers

n this article, I’ll explain how HTML5 Web Sockets interact with proxy servers, load balancing routers, and firewalls. Additionally, I’ll explain how Kaazing WebSocket Gateway and its Web Socket emulation can add additional value.

HTML5, Again

If you’re a front-end developer, I want you to do me a favor. I want you to pick a project and mark it up in html5. I’m not going to ask you to code a game experience inside the canvas element or replicate a youtube video player or do anything really, except challenge you to declare semantic information about your content blocks.

HTML5 Audio Data API – Spectrum Visualizer

The experimental audio data API allows the programmer to access raw audio data and a processed FFT spectrum of the currently playing audio data through the HTML5 audio tag.

HTML5 Boilerplates

Without going into the discussion of why HTML 5 is available today and not 2022, this article is going to give you a series of HTML 5 boilerplates that you can use in your projects right now.

HTML 5 canvas – the basics

The HTML 5 specification includes lots of new features, one of which is the canvas element. HTML 5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a “context” (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.

HTML 5 Cheat Sheet (PDF)

XHTML 2 is dead, long live HTML 5! According to W3C News Archive, XHTML 2 working group is expected to stop work end of 2009 and W3C is planning to increase resources on HTML 5 instead. And even although HTML 5 won’t be completely supported until 2022, it doesn’t mean that it won’t be widely adopted within the foreseeable future.

HTML5 id/class name cheatsheet

The mapping of HTML5 structural elements to id and class names for use with divs

html5 monitoring

Here is another impressive HTML5 example, while its not exactly advanced it does show demonstrate the raw power of HTML 5. This could also be used as a Windows Vista desktop widget or even for Windows 7 once it is released. This code could be changed to check the status of your domains. (Please test this out by disabling your internet connect either unplug your network cable, or go into “Work Offline” with your browser)

HTML 5: Nav Ambiguity Resolved

One of the new things HTML 5 sets out to do is to provide web developers with a standardized set of semantic page layout structures. For example, it gives us a nav element to replace structures like div class=”navigation”.

HTML5 Reset Stylesheet

We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects.

HTML 5 + XML = XHTML

I like the xhtml syntax. It’s how I learned. I’m used to lowercase code, quoted attributes and trailing slashes on elements like br and img. They make me feel nice and comfy, like a cup of Ovaltine and The Evil Dead on the telly.

Preparing for HTML5 with Semantic Class Names

Some time ago I was asked in an interview whether I preferred HTML or CSS. It was a bit like being asked if I prefer pens or pencils. I made an instinctive choice. I chose HTML. It’s the typography of data; the inflection in our voices; the grid of meaning upon which presentation can flourish. I find it beautiful when done well, and that’s why watching HTML 5 unfold with new and refined elements is fascinating to me.

The video element

he video element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.

When can I use…

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

Video on the web

HTML5 defines a standard way to embed video in a web page, using a video element. Support for the video element is still evolving, which is a polite way of saying it doesn’t work yet. At least, it doesn’t work everywhere. But don’t despair! There are alternatives and fallbacks and options galore.

Why HTML5 is worth your time

The debate over HTML5 vs. Flash is great for comments and page views, but all that chatter obscures the bigger issue: Should developers and designers invest in HTML5?

Yes, You Can Use HTML 5 Today!

There have been many changes to the HTML 5 landscape since my colleague, Lachlan Hunt’s 2007 article on A List Apart, A Preview of HTML 5. Let’s see what’s happening in the world of HTML 5.

Websites

HTML5 Doctor

The site came about following a HTML5 meetup after the Future of Web Design conference in London (2009). We decided that there wasn’t a resource that catered for the people who wished to find out more about implementing HTML5 and how to go about it, so we thought we’d better build one.

HTML5 Gallery

A showcase of sites using HTML5 markup

HTML5 Tutorial

Our website is your one stop website for everything related to the new HTML 5 code, You will find many useful guides for HTML 5 resources including HTML 5 Tutorials, HTML 5 examples and HTML references.

Special thanks to all of the hard working designers that have created these awesome smartphone templates! Also, please check the original source for usage requirements.

Android

Android 1.5 GUI PSD v. 1.0 from Pavel Macek

• Download the files directly

Fireworks template for Android from Unitid

• Download the files directly

Antroid Omnigraffle Stencil from BinarySheep

• Download the files directly

Antroid Icon Template Pack from Google

• Download the files directly

Android Wireframe Templates from Future Platforms

• Download the files directly

Google Nexas PSD from PX Junkie

• Download the files directly

Motorola Droid PSD from Zandog

Some rights reserved. This work is licensed under a Creative Commons Attribution-No Derivative Works 3.0 License.

• Download the files directly

HTC Dream PSD from Zandog

Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

• Download the files directly

HTC Touch 2 PSD from Zandog

• Download the files directly

iPhone

iPhone GUI PSD from Teehan+Lax

• Download the files directly

iPhone PSD from Wordpress Themes Collection

• Download the files directly

Palm Pre

Palm Pre GUI PSD from Teehan+Lax

• Download the files directly (Requires Coconut)
• Download the files directly (Requires Avenir)

Palm Pre GUI PSD from Michael Gresh

• Download the files directly

Palm Pre PSD from Wordpress Themes Collection

• Download the files directly

BTW, if you’re looking for some great iPad Templates and Stencils check out Emily Changs post.

“At the beginning of a web (or application) development project I always create the sketches first. While sketching can be done on a blank paper, it’s much better to use a sketch template. For me that is the best and most productive way to work on and improve my ideas before application development begins (and things get more complicated. This way I won’t pay too much attention to some details that should be taken care of later, but stay focused on general layout and functionality.”

Visit the geekchic.org website to view the full post and download the templates.

Climate change scientists have started a fightback against sceptics who argue that the observed changes in the Earth’s climate can largely be explained by natural variability. This comes after the email hacking furore.

A major Met Office review of more than 100 scientific studies tracking the observed changes in the Earth’s climate system finds that it is an “increasingly remote possibility” that human activity is not the main cause of climate change.

Visit the guardian.co.uk website for the full story

In this not to be missed video, Michael Bierut of Pentagram discusses some very relevant strategies on dealing with clients. This talk was part of the CreativeMornings Series and was conducted in January 2010 at the Galapagos Art Space and hosted by Swissmiss design. This is one of my favorite design related videos of all time.

Special thanks to Swissmiss for putting together this awesome program, and making it available to everyone.

Visit the Swissmiss website to watch the video

Screenshot of Typekit

Tonight I decided to give the new font service Typekit a try on my website. The service uses your browsers inherent ability to link fonts, and has worked out licensing with a number of font houses so you can link these fonts with no fear of legal action. The quote from Typekit below basically says it all.

While it’s technically quite easy to link to fonts, it’s legally more nuanced. Almost all fonts are protected by copyright — even those available for free — and very few of them allow for linking via CSS or redistribution on the web. This is understandable; font files represent countless hours of finely detailed labor. Appropriately, type designers are concerned that they’ll lose control of all that hard work.

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

I found Typekit easy to implement – you only need to add two lines of javascript to your head tag, and then choose your fonts.

All in all, I’m starting to love the Typekit services. I would recommend it to all web designers that what to play around with some new fonts beyond our normal “web safe group”. It’s fun, free, and it’s easy.

BTW, I’ll be changing the fonts on my website the next few days to test out the service. More feedback to come.