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. 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.

Get Adobe Creative Cloud 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. 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.

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 Like this? HTML5 Video Attributes & Market Share Report | JW Player. HTML5 Video Attributes & Market Share Report | JW Player.

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. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade.

Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. Becoming responsive#section2 responsive architecture . 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 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 As I shall demonstrate, the <div> is the ultimate Graphic Design tool. The Problem With <div> 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.

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 HTML4 already has a lot of semantic elements to allow you to clearly define the different features of a web page, like forms, lists, paragraphs, tables, etc.

But it could be so much better. <header>: Used to contain the header of a site. Summary. HTML5 new structuring elements and Microdata: validators, online tools, browser extensions. Schema Creator. HTML5 Microdata Format Generator | Barry Ko. 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. 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   |   Google Developers. Google Search works hard to understand the content of a page. You can help us by providing explicit clues about the meaning of a page to Google by including structured data on the page. Structured data is a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on. Google uses structured data that it finds on the web to understand the content of the page, as well as to gather information about the web and the world in general.

For example, here is a JSON-LD structured data snippet that might appear on the contact page of the Unlimited Ball Bearings corporation, describing their contact information: Google Search also uses structured data to enable special search result features and enhancements. For example, a recipe page with valid structured data is eligible to appear in a graphical search result, as shown here: HTML5 Microdata and Schema.org. By Jason Ronallo Foundation HTML elements have semantics. For example, an ol element is an ordered list, and by default gets rendered with numbers for the list items. HTML5 provides new semantic elements like header, nav, article, aside, section and footer that allow more expressiveness for page authors.

These new HTML5 elements enable new tools and better services for the Web ecosystem. While these new elements provide extremely useful extra information about the sections of content, they do not really describe what the HTML document is about. Fortunately HTML5 includes a syntax called Microdata, that allows web publishers to layer richly structured metadata directly into their Web presentations. To Embed Or Not To Embed One way to communicate structured metadata in HTML is to link your HTML presentation to an alternate representation of your data. This pre-HTML5 approach can work in many cases, such as in the area of Web syndication with RSS and Atom…but it has some problems. Tutorial. 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.

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 Clearing Floats. 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 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. The W3C HTML5 specs are vague in spots and this is all fairly new so there is some disagreement among the supposed “experts.” There are already a couple wordpress HTML5 templates out there, but they also differ in many ways. What follows is the guidelines I’ve devised based on both the W3C HTML5 specs (I usually refer to the latest draft and then review any differences with the older last published version) and the collective opinions of the various “experts”—not all of whom I agree with.

A list of reference links is included at the bottom of this article. Semantics of New HTML5 Structural elements As I mentioned, there are differences between how people think HTML5 elements should be used. The demotion of the meaningless div Other Notes.