background preloader

HTML5

Facebook Twitter

The 37 best tools for data visualization. It's often said that data is the new world currency, and the web is the exchange bureau through which it's traded.

The 37 best tools for data visualization

As consumers, we're positively swimming in data; it's everywhere from labels on food packaging design to World Health Organisation reports. As a result, for the designer it's becoming increasingly difficult to present data in a way that stands out from the mass of competing data streams. One of the best ways to get your message across is to use a visualization to quickly draw attention to the key messages, and by presenting data visually it's also possible to uncover surprising patterns and observations that wouldn't be apparent from looking at stats alone. And nowadays, there's plenty of free graphic design software to help you do just that. As author, data journalist and information designer David McCandless said in his TED talk: "By visualizing information, we turn it into a landscape that you can explore with your eyes, a sort of information map. 01. 02. 03. 04. 05. 06. HTML5_Canvas_Cheat_Sheet.

What the canvas element means for accessibility. The HTML5 <canvas> element provides authors with a drawing API they can use to create dynamic, scriptable, interactive bitmap images.

What the canvas element means for accessibility

There is virtually no limit to what authors can draw on the <canvas>, including the number of paths, how users interact with those paths, and how those items may change over time. Don't miss this However, the dynamic nature of the <canvas> element has made it difficult, if not impossible, to use in applications that need to be accessible to people with disabilities. To be accessible, it must meet the following principles: Providing alternative content for what is drawn on the <canvas> Exposing the location of a path drawn on the <canvas> to assistive technologies Visually indicating whether or not that path had keyboard focus The <canvas> element allows authors to put HTML content between its opening and closing tags ('fallback content'), which provides an alternative for non-text content. The Task Force Words: Mark Sadecki. HTML5 Video Attributes & Market Share Report.

HTML5 Video Attributes & Market Share Report. Responsive Web Design. The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence.

Responsive Web Design

Article Continues Below. The Importance Of HTML5 Sectioning Elements. Whatever you call them — blocks, boxes, areas, regions — we’ve been dividing our Web pages into visible sections for well over a decade.

The Importance Of HTML5 Sectioning Elements

The problem is, we’ve never had the right tools to do so. While our interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements; an unbridled stream of content at odds with its own box-like appearance. Because we can make our <div>s look but not behave like sections, the experience for assistive technology (AT) users and data-mining software is quite different from the experience enjoyed by those gifted with sight. Now that HTML5 has finally made sectioning elements1 available, many of us greet them with great reluctance. Why? Make no mistake: Sectioning elements help you improve document structure, and they’re in the spec’ to stay. Making Websites *Bites tongue* Web Standards. The Importance Of HTML5 Sectioning Elements. New Structural Elements in HTML5. Introduction HTML5 brings two new things to the table: new APIs that add essential new features to the open standards web development model, and new structural elements that define specific web page features with much more accurate semantics than were available in HTML 4.

New Structural Elements in HTML5

You can find articles covering many of the new APIs by looking for Dev.Opera articles marked with the HTML5 tag. This article, on the other hand, focuses on the latter — we will briefly look at how the new semantic elements were chosen, what the main new features are and how they are used, how headings work in HTML5, and browser support for these new elements, including how you can support them in older browsers. The contents are as follows: Introducing HTML5 structural elements. HTML5 new structuring elements and Microdata: validators, online tools, browser extensions. Schema Creator. HTML5 Microdata Format Generator. Following up on a previous entry on the Microdata Format, I’ve created a completely free, for non-commercial purposes, Microdata Generator for some of the more popular item types: Books, Movies, People, Organizations and Companies, Stores, Restaurants, and Local Businesses.

HTML5 Microdata Format Generator

While there are other Microdata Generators and Creators out there, I haven’t found one that correctly nests multiple item types, or integrates the correct Hours of Operation (date/time) item property, which is essential for local businesses and restaurants. Furthermore, I’ve taken the extra step of giving you the option to include line breaks (for those who prefer the raw text format), the option to wrap the labels in a <span> tag, and the option to insert a class into the label span for custom css styling!

Home - schema.org. Promote Your Content with Structured Data Markup   Structured data refers to kinds of data with a high level of organization, such as information in a relational database.

Promote Your Content with Structured Data Markup  

When information is highly structured and predictable, search engines can more easily organize and display it in creative ways. Structured data markup is a text-based organization of data that is included in a file and served from the web. It typically uses the schema.org vocabulary—an open community effort to promote standard structured data in a variety of online applications. Structured data markup is most easily represented in JSON-LD format, which stands for JavaScript Object Notation for Linked Data. HTML5 Microdata and Schema.org. By Jason Ronallo Foundation HTML elements have semantics.

HTML5 Microdata and Schema.org

Can I use... Support tables for HTML5, CSS3, etc. Positioning Content - Learn to Code HTML. Lesson 5 One of the best things about CSS is that it gives us the ability to position content and elements on a page in nearly any imaginable way, bringing structure to our designs and helping make content more digestible.

Positioning Content - Learn to Code HTML

There are a few different types of positioning within CSS, and each has its own application. In this chapter we’re going to take a look at a few different use cases—creating reusable layouts and uniquely positioning one-off elements—and describe a few ways to go about each. Positioning with Floats#floats One way to position elements on a page is with the float property. Essentially, the float property allows us to take an element, remove it from the normal flow of a page, and position it to the left or right of its parent element. When the float property is used on multiple elements at the same time, it provides the ability to create a layout by floating elements directly next to or opposite each other, as seen in multiple-column layouts. Floats in Practice. HTML5 Doctor, helping you implement HTML5 today. The Semantics of HTML5 Structural Elements — Colinaut.

I’ve recently decided it was time to revamp catcubed.com.

The Semantics of HTML5 Structural Elements — Colinaut

The design will be overhauled and it will be developed using new HTML5 structural elements. I’ve begun this process by researching the proper semantics and layout techniques for these new elements.