posts about or somewhat related to ‘HTML5’

How To Tell HTML from HTML5
Via FSCKED

How To Tell HTML from HTML5

Via FSCKED

6 reasons why most journalists are underestimating the mobile revolution →

Via corybe:

Most newsrooms know that mobile is growing fast.  Everyone can see mobile usage (phones and tablets) creeping up on their desktop numbers. For example, The Guardian recently said mobile visits hit 35%, outpacing desktop at certain hours of the day.  A growing handful of media brands — including where I work at Breaking News — have watched mobile soar over desktop in audience.  And we’ve all seen the stories about the unprecedented growth of tablets, the fastest-growing product in the history of consumer electronics.

Soon, mobile will be the primary way people get their news.

If that’s really the case, then why isn’t mobile dominating journalists’ discussions on Twitter?  Packing sessions at journalism conferences?  Sitting at the top of “most popular” story lists on journalism blogs?

I have a few theories:

Cory Bergman is the general manager of NBC News’ Breaking News and points to social media’s ease of use; the overall newness of mobile as a form factor for delivering news; and the potential threat mobile poses for advertising dependent organizations among other factors that many news organization have been slow to enter mobile. 

Read through for his explanations of each.

See also Jason Pontin’s great article from last year in Technology Review about why publishers don’t like apps. This isn’t to say they don’t like mobile. Instead, Pontin explains why TR ditched their native app in favor of HTML5.

HTML5, Parallax and Storytelling
Yes, you should stop what you’re doing and explore how the New York Times put together this story on avalanches and skiing in Washington State.
Snow Fall: The Avalanche at Tunnel Creek.

HTML5, Parallax and Storytelling

Yes, you should stop what you’re doing and explore how the New York Times put together this story on avalanches and skiing in Washington State.

Snow Fall: The Avalanche at Tunnel Creek.

Market Share of Browsers Supported Media Formats Supported Tag Attributes Fullscreen Playback Adaptive Streaming Accessibility

The State of HTML5 Video Support

UX Magazine has a great overview of how and where browsers are supporting HTML5 video. The article covers market share of browsers, supported media formats, supported tag attributes, fullscreen playback, adaptive streaming and keyboard accessibility.

Images: HTML5 Video Support via UX Magazine.

Click to embiggen.

Personalizing News for 700 Million People a Day 
Yahoo’s created a visualization about reading habits of the more than 700 million people that visit its sites each day.
Via ReadWriteWeb:

Every day, Yahoo displays about 13 million different news story combination on its homepage. Those stories are personalized based on demographic data and reading behavior, and the company keeps track of what kind of stories do well with which groups of people…
…To illustrate how this works, Yahoo has created an interactive data visualization that shows visitor traffic data in nearly real time. Using it, one can drill down into specific age groups, genders and story types to see what people’s aggregate reading habits look like.

To create the personalization Yahoo uses internally developed technologies called the Content Optimization and Relevance Engine (CORE).
Via Yahoo:

Looking at past user behavior, algorithms are combined with human editorial expertise to allow us to carry out deep personalization to our more than 700 million users, giving them “must read” stories that are interesting and relevant. This C.O.R.E. data visualization reveals some of the factors that influence the display of articles in the Yahoo! Today module.

The interactive visualization was created with JavaScript, HTML5, and CSS3.
Image: Screenshot of Yahoo home page views by demographic and content category, via Visualize Yahoo.

Personalizing News for 700 Million People a Day

Yahoo’s created a visualization about reading habits of the more than 700 million people that visit its sites each day.

Via ReadWriteWeb:

Every day, Yahoo displays about 13 million different news story combination on its homepage. Those stories are personalized based on demographic data and reading behavior, and the company keeps track of what kind of stories do well with which groups of people…

…To illustrate how this works, Yahoo has created an interactive data visualization that shows visitor traffic data in nearly real time. Using it, one can drill down into specific age groups, genders and story types to see what people’s aggregate reading habits look like.

To create the personalization Yahoo uses internally developed technologies called the Content Optimization and Relevance Engine (CORE).

Via Yahoo:

Looking at past user behavior, algorithms are combined with human editorial expertise to allow us to carry out deep personalization to our more than 700 million users, giving them “must read” stories that are interesting and relevant. This C.O.R.E. data visualization reveals some of the factors that influence the display of articles in the Yahoo! Today module.

The interactive visualization was created with JavaScript, HTML5, and CSS3.

Image: Screenshot of Yahoo home page views by demographic and content category, via Visualize Yahoo.

HTML5 Please: Use the new and shiny responsibly
Divya Manian and friends created a search-based reference guide called HTML5 Please. Enter a tag, class or query into the search field and you’re returned information about cross browser support and usage.
For example:

<canvas>: Canvas is definitely good to go for modern browsers. If you want to support Internet Explorer 8 and below, FlashCanvas provides a good polyfill.
border-image: Make sure to use all the right prefixes (-o-, -webkit-, -ms-, -moz-). Additionally, border-image.com may help. You should let this fall back to either a normal solid border or no border at all, depending on whether a border is essential for readability. We recommend that you avoid polyfills.

You can read about the project, the people behind it and the tools they used to create HTML5 Please on Divya’s blog.

HTML5 Please: Use the new and shiny responsibly

Divya Manian and friends created a search-based reference guide called HTML5 Please. Enter a tag, class or query into the search field and you’re returned information about cross browser support and usage.

For example:

<canvas>: Canvas is definitely good to go for modern browsers. If you want to support Internet Explorer 8 and below, FlashCanvas provides a good polyfill.

border-image: Make sure to use all the right prefixes (-o-, -webkit-, -ms-, -moz-). Additionally, border-image.com may help. You should let this fall back to either a normal solid border or no border at all, depending on whether a border is essential for readability. We recommend that you avoid polyfills.

You can read about the project, the people behind it and the tools they used to create HTML5 Please on Divya’s blog.

YouTube has always had amazing upload stats. For example, there are 23 or 32 or 45 minutes of video uploaded every minute.

But they just crossed a fun threshold, and created a fun site to announce this fun threshold: Every minute, one hour of video is uploaded to YouTube.

This lets us do fun 1:1 comparisons of minutes to hours and if you visit One Hour Per Second you get an animated HTML5 jamboree of the comparisons they make.

Images: Selected stills from YouTube’s One Hour Per Second Web site. Select any to embiggen.

H/T: Flowing Data.

The Economist + Pressly + Tumblr = Electionism

The Economist recently launched a 2012 presidential HTML5 site for tablets called Electionism and uses a nifty bit of MacGyvering to get it done.

It appears the Economist Group Media Lab is using Tumblr as a backend where they curate content from various news sources. These feed into Pressly, a startup that pulls RSS feeds and Twitter posts, and extracts the content contained within links for magazine-style tablet display.

Pictured above are various screens from a tablet display and includes the Electionism Home, Category, Twitter and articles. The site currently works on the iPad, Galaxy Tab and Kindle Fire.

Interested in following the actual Electionism Tumblr? That’s over here.

Select images to embiggen.

H/T: Journalism.co.uk.

Tags added to HTML5
Image: Detail from In Motion Hosting&#8217;s HTML5 cheat sheet that includes tags, event handlers and browser support. 
Click to embiggen.

Tags added to HTML5

Image: Detail from In Motion Hosting’s HTML5 cheat sheet that includes tags, event handlers and browser support. 

Click to embiggen.

Got Popcorn?
Mozilla&#8217;s released Popcorn 1.0, an HTML5 media toolkit that reimagines what can be done with Web video.
Via the Mozilla Blog:

Popcorn allows web filmmakers to amp up interactivity around their movies, harnessing the web to expand their creations in new ways. Popcorn uses Javascript to link real-time social media, news feeds, data visualizations, and other context directly to online video, pulling the web into the action in real time. The result is a new form of  cinema that works more like the web itself: interactive, social,  and rich with real-time context and possibilities that continue to evolve long after filming wraps.
Director Kat Cizek used Popcorn and other HTML5 tools like WebGL to create One Millionth Tower, the latest installment in the NFB’s Emmy award-winning Highrise series. One Millionth Tower brings residents from a dilapidated Toronto apartment complex together with architects and designers, imagining how they can revitalize their homes and neighborhood together. The film then uses the magic of animators, web developers and Popcorn to bring these ideas to life, all through a multi-layered, three-dimensional landscape that runs directly in the web browser.

To see it in action, watch the One Millionth Tower over at Wired. 
To give it a whirl, learn about and download Popcorn at Mozilla.

Got Popcorn?

Mozilla’s released Popcorn 1.0, an HTML5 media toolkit that reimagines what can be done with Web video.

Via the Mozilla Blog:

Popcorn allows web filmmakers to amp up interactivity around their movies, harnessing the web to expand their creations in new ways. Popcorn uses Javascript to link real-time social media, news feeds, data visualizations, and other context directly to online video, pulling the web into the action in real time. The result is a new form of  cinema that works more like the web itself: interactive, social,  and rich with real-time context and possibilities that continue to evolve long after filming wraps.

Director Kat Cizek used Popcorn and other HTML5 tools like WebGL to create One Millionth Tower, the latest installment in the NFB’s Emmy award-winning Highrise series. One Millionth Tower brings residents from a dilapidated Toronto apartment complex together with architects and designers, imagining how they can revitalize their homes and neighborhood together. The film then uses the magic of animators, web developers and Popcorn to bring these ideas to life, all through a multi-layered, three-dimensional landscape that runs directly in the web browser.

To see it in action, watch the One Millionth Tower over at Wired. 

To give it a whirl, learn about and download Popcorn at Mozilla.

Khoi Vinh: Magazines Are Failing at the iPad

Digiday interviewed former New York Times design director Khoi Vinh, who has been critical of publishers’ approaches to the iPad. 

How important is the emergence of HTML5 for tablet publishers? Can you see them gravitating towards browser-based experiences over apps as that technology becomes more robust?

There are two strains here. On the tech side, HTML5 is the way of the future. It’s too expensive to publish native apps for iOS, Android and all the different platforms. HTML5 is a much better delivery mechanism for this stuff than a native app. It’s much more affordable and much more portable. On the other side, though, it’s not just about the tech. I had underestimated how effective Apple’s AppStore would be in terms of distributing applications. You can’t beat that, so publishers will have to stay with apps for at least the immediate future.

To date, publishers seem to have focused on simply updating or transposing their print products for use on the device, but are they missing an opportunity in doing so? Should they be rethinking the way they deliver content from the ground up?

Absolutely. I just can’t see the end-to-end magazine format surviving. The Internet lets people consume media in a-la-carte form. To force a package of content on folks is unnatural. Some folks will continue to like the magazine format, but as social distribution becomes the way we discover and receive more of our content, it won’t make sense to sell it in these virtual boxes any more.

What possibilities should publishers be exploring, then?

One glaring omission in the way we package content for tablets is really relevance. Much like when you go to Amazon, they display similar products other people have bought; we don’t have anything nearly as good in realm of publishing. It’s not just recommendations, though. It’s about understanding true relevance. If you look at an app like Flipboard, that’s the one major thing it’s missing. The tech startup that can solve that problem will push forward this area of digital publishing in a big way.

Weigh in with your thoughts on publishers and their tablet strategies.

(Source: digiday.com)

The Continued Search for Pixel-Perfect Fluid Layouts

Ever since content first appeared in a Web browser designers have sought pixel-perfect control over its layout. Basically, many strive for the detailed layouts they can achieve in print. 

Adobe, with its print and Web legacies, is trying to accelerate that process by working with WebKit, an open source browser engine used by Safari, Chrome and countless others, and its community, and the W3C, the international Web standards body.

In particular, it’s promoting CSS Regions and CSS Exclusions.

Via ReadWriteWeb:

CSS Regions is a module that builds on the column-based layout options now available in CSS3 to enable front-end developers to flow text across different columns (or “regions”) on a page. This allows for more dynamic page designs, which can shapeshift to fit different devices and device orientations on-the-fly…

…Another improvement to CSS proposed by Adobe is called Exclusions, which lets developers flow text into a non-rectangluar shape, or to wrap it around graphics on the screen, much like what’s been possible in desktop publishing for decades.

Publishers Doing an Apple End-Run to Deliver to iPad | PBS →

2105:

Major publishers are starting to deliver content to the iPad outside Apple’s App Store, avoiding the company’s rules and restrictions that limit what they can do and how much they can earn.

Instead of building native apps in iOS, the proprietary operating system for the iPad and other Apple devices, the publishers are using HTML5, the latest version of the open-source HTMLlanguage used to build web pages.

This is a key flashpoint in the continued struggle for control of, and access to, users and their money on the iPad and other platforms. It’s also a battleground in the fight over whether to use open or closed standards in media and technology.

Via the always awesome (and always colon’d) @rogerblack.

FJP: Not quite as aesthetically sexy but HTML5 is — and is going to be — fab.

(Source: journo-geekery)

When Does Crime Happen
Via Datavisualization.ch:

Joe Golike and Sha Hwang of Trulia take a deeper look at when crime typically happens throughout the day in 25 big cities across the United States. The result, When does crime happen? is a set of interactive stacked area charts that allow for detailed comparison between different types of crimes and high-level comparison between different cities. On hover, a tooltip reveals more detailed information and the percentage of reported crimes per type and hour. I think the small multiples work pretty fine for comparison over cities and the charts show the data in a readable and elegant way. The visualization is built in HTML5 using Protovis and the underlying data comes from SpotCrime. Read more about their findings on the Trulia Insights blog.

Trulia Blog: When Does Crime Happen?

When Does Crime Happen

Via Datavisualization.ch:

Joe Golike and Sha Hwang of Trulia take a deeper look at when crime typically happens throughout the day in 25 big cities across the United States. The result, When does crime happen? is a set of interactive stacked area charts that allow for detailed comparison between different types of crimes and high-level comparison between different cities. On hover, a tooltip reveals more detailed information and the percentage of reported crimes per type and hour. I think the small multiples work pretty fine for comparison over cities and the charts show the data in a readable and elegant way. The visualization is built in HTML5 using Protovis and the underlying data comes from SpotCrime. Read more about their findings on the Trulia Insights blog.

Trulia Blog: When Does Crime Happen?