Yahoo has launched a new webpage that visualizes what’s happening on the web in near real time — and it’s totally beautiful.

The Content Optimization Relevance Engine (C.O.R.E.) HTML5 site hopes to show users the “behind the scenes” process Yahoo uses to match readers with content on their personalized homepage, using technology developed in a Yahoo research lab a few years ago. While Yahoo’s homepage used to be arranged by editors, it now uses an algorithm to match individual user preferences.

“We can provide users with insights through the lens of the 700 million users that come to our site each month,” Todd Beaupre, Yahoo’s senior director of product management, personalization and social platforms, told Mashable.

The interactive site optimizes content discovery, showing you what’s popular for a variety of user demographics, such as U.S. city, gender, age and interest (news, finance, lifestyle, Yahoo’s entertainment, sports and health). You can also chose a number of these characteristics at once, such as female sports fans in Cleveland or 35- to 44-year-olds in Atlanta.

As far as utility goes, you can think of the site as a tool to provide similar insight to Twitter trending topics or Google trends.

“We’ll see that we put out a sports story, but the human interest angle means that it’s being clicked on by women, more so than men interested in sports,” Beaupre says, noting that Yahoo delivers about 13 million content combinations each day to visitors to its homepage. “We bulit this because we can’t always predict accurately what people are going to click on.”

The C.O.R.E. visualizer features Yahoo’s original content as well as content written by Yahoo’s partners.

For some additional insight, you can click on the “i” logo on the bottom of the site to reveal five HTML5 interactive infographics, which attempt to put the scope of Yahoo’s data into perspective.

Yahoo previously launched a similar tool Mail Visualization that shows emails as they are delivered across the world. You can watch emails delivered across the globe, visualized through circles corresponding the mass of mail delivered. Yahoo says it has two more data visualization projects up its sleeves.

What do you think of Yahoo’s visualization? What insight do you find most useful from its real-time trends? Let us know in the comments.

More About: dev and design, HTML5, Yahoo

For more Dev & Design coverage:





Pam Horan is the president of the Online Publishers Association, a not-for-profit trade organization that represents high-quality online publishers.

Last November, Adobe announced its decision to halt Flash development for mobile browsers, chipsets and operating systems.

Instead, the company plans to develop on the open HTML5 platform. While the announcement may seem startling given the legacy of Adobe’s business, the launch of Adobe Edge back in August marked the clear beginning of the company’s pivot toward HTML5.

Following the lead of many publishers in the space, most notably The Financial Times, the elimination of Flash will further enable publishers to focus their resources and streamline digital development.

In a company blog post, Adobe vice president and general manager Danny Winokur explained, “Adobe is all about enabling designers and developers to create the most expressive content possible, regardless of platform or technology,” he wrote. “HTML5 is now universally supported on major mobile devices, in some cases exclusively.”

So what does that mean for your business? Here are the five things every publisher should know about HTML5.


1. Enhanced Web Development


HTML5 has long been dubbed a game changer. Mashable has said that HTML5 will bring the web back. While that may sound like a strange notion, it refers to the fact that innovation has shifted from the web to applications for mobile and gaming – and while these may rely on the web, they do not reside there. HTML5 brings the focus back to web-based development.

According to the New York Times, “Engineers say the [HTML5] technology will make it possible to write web applications, accessed with a browser, that are as visually rich and lively as the so-called native applications that are now designed to run on a specific device, like an iPad or an Android-based tablet.”


2. Streamlined Development


The latest version of HTML includes features that streamline development and deliver a richer experience to users. And its new API, in concert with new browsers, enables top functionality, making things possible that weren’t before.

For instance, geolocation services are easily enhanced with HTML5. With permission, web browsers can access the physical location of users that visit their sites, simplifying the development of sites that want to deliver location-based content and services.


3. What it Means for Advertisers


While this may seem like a major tech play, HTML5 presents huge benefits for advertisers and marketers. It enhances online advertising by making ads rich and scalable. Advertisers have been waiting for technology to catch up with their mobile needs, and HTML5 does just that. It can be downloaded from an ad server and displayed on the web and in apps. And it makes rich media display ads more accessible across browsers and applications on mobile devices.


4. Video Challenges


It would be a disservice to ignore challenges that exist with HTML5. Flash has been around far longer than HTML5, and its advancements in video reflect its legacy. The third-party integration that made Flash popular and robust set the stage for online video to take off. And while HTML5 is still in its early innings, when it comes to video, the same innovations are starting to emerge within HTML5 as well.


5. Updates for Flash


While a Flash-free world may seem daunting to some, there’s no need to worry. According to Winokur, “We will of course continue to provide critical bug fixes and security updates for existing device configurations. We will also allow our source code licensees to continue working on and release their own implementations.”

Overall, HTML5 will enhance the web for consumers, marketers and developers. Adobe has indicated that although its doesn’t plan to actively enhance Flash, it will continue to release security updates for its Android and BlackBerry PlayBook.

Image courtesy of Flickr, justinsomnia

More About: adobe, contributor, features, Flash, HTML5

For more Dev & Design coverage:





This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

Sure, having a website for your business serves a practical need: to draw net-surfing users to your product or service. However, it’s also much more than slapping on a run of the mill two-column template and calling it a day. Nothing kills an online buzz like a poorly designed or drastically outdated website. Dry and boring default templates, broken assets, confusing pages and invasive widgets do nothing but harm a page’s style, which in turn reflects poorly on the company.

2012 is heralding a new wave of innovative web technologies and design, and a page that stays in step with these trends is bound to pique interest and lower your bounce rate. Even more, a well done and on-trend website remains effective well after the year is over, reeling users in with thoughtful design and building a design-conscious and taste-making reputation. Keep these tips in mind when you clean up your company’s website, and stay ahead of the curve for the new year.


1. Don’t Be Afraid to be Bold


Mail Chimp. Instagram. Pinterest. All of these websites are joined together by a commitment to bold designs and layout. Whether it’s an exaggerated footer, a turn to minimalism or a bold and new typeface, incorporating a key graphical element to a website speaks volumes about the overall composition of the layout — and a keen level of attention to detail. Opting for a bold design element is a great way to modernize a website and keep it on trend in the coming years.

A bold design can be obtained with very little money, especially for those who aren’t necessarily experienced in coding. For example, webpages operating on a WordPress can find a host of free templates that offer a wide range of customizable options to suit any business. New and exciting fonts can be found via Google‘s open API font styles and require a simple set of code to be dropped in for compatibility with a website. Inspiration and how-tos for more hands-on DIY upgrades can be found at coding/design blogs like A List Apart, One Extra Pixel and Mashable‘s Dev and Design channel.

For those with a little more cash to burn on a proper contractor, 99 Designs relies on crowdsourcing to gather great designers for companies looking for a reliable and cutting edge renovation. Companies on 99 Designs are allowed to name their own price, which means a promising design on a budget.

However you choose to go about it, a bold design dusts off the cobwebs on your old page and keeps it fresh for years to come.


2. Use HTML5 … With Care


For the last couple years, people have been buzzing about HTML5, and it’s not just chatter; HTML5 offers a lot of exciting flexibility that can make a website truly interactive. Seamlessly embedded videos, drag-and-drop interfaces and dynamic message posts are all achievable via HTML5, and with relatively little code work.

But it’s not enough to just call up your freelance web designer and throw up some HTML5 features. As with any programming language, there’s always an issue of browser compatibility. While your new and shiny UI outfitted with dynamic HTML5 might look stunning to a user running on the latest version of Chrome, your high-tech page may look like a series of broken features — or nothing at all — to a less tech-savvy user running Internet Explorer 7 (and there’s a lot of them).

This issue has been longstanding in the Internet world, but there are precautions to take in order to ensure that every user has a pleasurable experience on your website without you making a major investment. Modernizr is an open-source, JavaScript-based tool that offers feature detection for HTML5, and it’s just-as-snazzy brother CSS3. Instead of doing simple browser detection, Modernizr will figure out just what features the user’s browser can support and react accordingly. If a user is operating on an incompatible browser, then Modernizr will automatically decide whether to switch to a JavaScript-based fallback of the features or just create a downgraded version.

Make no mistake, this solution shouldn’t be implemented by a newbie to code, but it does provide a simple way to implement exciting and revolutionary features while still providing support for the little guys.


3. Cut the Fat


The traditional layouts for websites often call for separate pages that encapsulate the “About,” “Contact” and other informational areas of the website. 2011 saw minimalist designs from multiple websites, and that often translated to cutting these pages in favor of a sleeker overall design (think Tumblr). Some companies chose to forgo nearly everything to produce a strongly graphical one-page website — blogs like One Page Love and successful networking tools like Flavors.me show that people are drifting towards a bold singular statement that makes a big impact on fellow users.

As we move forward in 2012, further exploration into one-page websites is a given. But a single-page website has both its pros and cons. HTML5 can help create a one-page website that cleverly contains all necessary information via pop-up boxes or other media, but the amount of information that can be on a one-page website is still relatively limited. Do you want your website to make a bold statement about your company and focus less on a blog-style format? If so, a one-page website could be right in your wheelhouse. Are you more interested in showing off testimonials, case studies and blogs from your employees? If yes, then this trend would be worth passing on.

However, that doesn’t mean to forgo trimming entirely. Culling the best parts of your website and truncating the rest will result in a sleeker, more intuitive design — and sleek never goes out of style.


4. Tie in Social Media Intelligently


This tip could also be titled “Quit it With the Widgets.” Announcing your social media presence on your own website is an absolute necessity, but it needs to be done with care. Automatically updating widgets that stream in social media presence seems intrusive and outdated, not to mention that they can be a hassle for a DIY designer to install and maintain.

To put it simply, social media should absolutely be a presence on a business website, but it should not be a dominating presence. Integrating social media, whether in graphic links or a social ticker, should be done with the user’s eyes in mind. It’s simple on paper, but can be difficult to execute. When social media is done intelligently and with consideration, your website instantly will look socially connected and organized.

Are there any other ways you’re keeping your website ahead of the game? Let us know in the comments.

More About: design, features, HTML5, mashable, open forum, trending, web design

For more Dev & Design coverage:





html5 logo

LAS VEGAS — AT&T unveiled new tools for app developers Monday, making it easier for them to create and distribute apps made with HTML5.

AT&T said it will launch the HTML5 storefront for its App Center later this year, and that the new tools will allow developers to collect fees from customers by adding expenses to phone bills.

The big news for developers is that they no longer have to make apps that run natively on Android or iOS — they can develop the app in HTML5, a universal standard. This will let them start selling their apps sooner. AT&T’s App Center promises to be less populated than the Android Market or App Store, and at the same time it will be curated — so customers would in theory have an easier time finding your app.

HTML5 apps usually run via a mobile phone’s browser. AT&T’s new platform appears to be aimed mainly at Android developers, but since HTML5 is supported on most smartphone browsers (including the iPhone’s), it could be extended to iOS as well.

Highlights From CES: Sharp 80-Inch HDTV Just Got Even Better | First Intel Smartphone Will Be Lenovo K800 for China, Motorola Devices Coming | Facebook and Mercedes: An Unexpected Pair

As part of the HTML5 developer API, AT&T is making it easy for developers to bill customers right on their phone bills. Some other mobile APIs already allow this, but AT&T’s support for billing via HTML5 should bring the service to more customers.

Besides the billing feature, other new developer tools include AT&T Cloud Architect, a “fast way to pick, provision and deploy servers over the web within minutes or hours, not days,” and an Application Resource Optimizer, which will optimize apps so they consume the minimum amount of data and power.

Are you a developer? What do you think of AT&T’s new HTML5 app store and API? Let us know in the comments, and browse some of CES 2012′s coolest gadgets in the gallery below.


CES 2012: Mashable’s Photo Coverage From the Ground


Check out more gadgets, booths and appearances from our team on the ground at CES 2012.

Thermador Cooktop

The Freedom Induction Cooktop by Thermador allows the user to place pots anywhere on it’s surface for cooking.

Click here to view this gallery.

More About: apps, CES, CES 2012, HTML5, trending

For more Dev & Design coverage:


With their endless series of implausible chain reactions, Rube Goldberg devices are fascinating not because they look crazy, but because they’re almost always crazy enough to work. Now Honda’s bringing that crazy fun to anyone with a mouse thanks to “The Experiment,” a digital chain reaction playhouse without any of the messy clean up.

The site has six pre-made challenges which ask the users to set off a specific reaction — such as cooking eggs, launching fireworks or shooting a bow and arrow at a target. Users are given a start point, and end point and a series of Internet windows which need to be placed in the correct order. Once all the windows are in the right order, the browsers come to life, setting up and interacting with each other as if they objects existed in real life. Fireworks explode in a shower of separate windows, cogs roll down ramps and hit buttons and arrows fly across several screens.

The Experiment is a blast to play and a great showcase of the power of HTML5. Honda created the website to highlight the ingenuity and creativity that went into its new Civic. Some of the windows include Honda products (such as a Honda-made power generator that powers one of the reactions). Outside of the first splash page, however, most Honda branding is thankfully absent, letting the site speak for itself.

The site’s tag line — “If we never venture into the unknown, how do we get anywhere new? Experiment.” — is taken to heart. After users are done playing with the pre-made levels, they can then create their own chain reactions to save, share and challenge their friends.

Come up with your craziest contraptions and let us know what you think of The Experiment in the comments below.




experiment image

More About: HTML5, Video

For more Dev & Design coverage:





ONE and (RED) have jointly launched (2015)QUILT, a digital crowd-sourced tapestry built in HTML5, to bring people together behind the cause of an AIDS-free generation by 2015. The launch coincides with World AIDS Day Dec. 1 and the 30th anniversary of the discovery of the disease.

The organizations hope that by 2015 the transmission of the HIV virus between mothers and their babies will end, 15 million people will be on medication and new prevention techniques to drastically reduce infections will be implemented.

“What we’re doing now is saying that we’re at this moment in the fight against AIDS, where people can come together and bring the beginning of the end of AIDS,” Chrysi Philalithes, (RED) chief digital officer, told Mashable. “(2015)QUILT represents everyone standing with us to fight for an AIDS free generation by 2015.”

You can join the initiative by visiting www.2015quilt.com, creating a panel expressing your support, pledging to take action to help fight AIDS and sharing your panel on Facebook, Twitter or Google+ (see the gallery below for a walk-through). The quilt integrates Facebook’s latest Open Graph to connect the user and the app. Once you’ve added your pledge, you can choose one of six free song downloads from The Killers, including a Christmas song made for (RED) “The Cowboys’ Christmas Ball.”

In addition to The Killers, you’ll join celebrities such as Coldplay, Paris Hilton, Zach Galifianakis, The Black Eyed Peas, Barbara and Jenna Bush, Perez Hilton, Martha Stewart, Chelsea Clinton, Ellen DeGeneres, Oprah Winfrey, Tyra Banks and Tom Brady, among others, who’ve already created panels (see some below). U2′s Bono co-founded both ONE, a non-partisan advocacy group, and (RED), which uses corporate and consumer power to fund the fight against AIDS, so he too is supporting the quilt.

Barbara Bush

Click here to view this gallery.

The (2015)QUILT is inspired by the AIDS Memorial Quilt, begun in 1987 in San Francisco, which grew to become the largest community art project in the world, now containing some 94,000 names and weighing 54 tons. Its just-launched digital counterpart has the potential to gain as many participants while taking up much less physical space.

You can pan through the HTML5 quilt, designed by @radical.media, and hover over panels to reveal their creators and pledges. You can also search for names and locations within the quilt.

“After 30 years and 30 million funerals, we have the potential to finally turn the tide on AIDS,” Michael Elliott, president and CEO of ONE said in a statement. “With the right scale-up of effective treatment and prevention programs, we can prevent babies from being born with HIV, keep more people alive through treatment, and simultaneously reduce the number of people becoming newly infected with HIV.”

Will you make a panel and pledge to join the fight to begin the end of AIDS by 2015?

Select a Quilt Pattern and Border

You can chose your panel background or border.

Click here to view this gallery.

More About: AIDS, HTML5, one, Social Good, world aids day

For more Dev & Design coverage:





The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Thanks to the success of projects such as HTML5 Boilerplate, companies big and small are increasingly giving back to the dev and design community by releasing pre-packaged toolkits and frameworks to make getting projects off the ground easier and less time consuming.

Back in August, Twitter released Bootstrap, its own front-end toolkit for rapidly developing web apps. Bootstrap is a remarkable toolkit, providing developers with access to a well-structured grid system, various layouts, styles for buttons and forms and more.

Twitter released Bootstrap on GitHub, and more than 8,000 users are currently “watching” the project and it has been forked more than 1,200 times.

Interaction design and strategy company ZURB — known for its web apps Notable and Chop — has decided to offer its own framework for web apps, the aptly named Foundation.

Foundation, now in version 2.0, includes a boilerplate, CSS, JavaScript and assorted plugins. What separates Foundation from other toolkits — like Bootstrap — is that it was designed from the ground up to be responsive and work on a cross-section of devices.


What’s In a Foundation


Foundation consists of a few different components to make building a website or web app less challenging. These include:

  • A semi-liquid mobile-scaling grid system
  • Pre-styled CSS3 buttons with options for sizes and colors
  • Pre-styled forms
  • Zurb’s jQuery plugins Orbit and Reveal for easy sliders and modal windows

Foundation in Action


ZURB is already using Foundation on a number of its projects — including its ZURBsoapbox. The company put together a set of case studies showing off how Foundation can be used to speed up the web development process.

Our favorite aspect of Foundation is the ability to hide or show elements based on the media query (screen resolution) of a website. This means that when viewing a page on the iPad or iPhone, a link to non-Flash MP3 audio player becomes visible.


Future Improvements


Like Bootstrap, ZURB is hoping to continue to add new features and additions to Foundation. Users can grab the project on Github and contribute their own feedback or fork it and use it the way they want.

We would love to see a base WordPress theme or framework created from Foundation.

What do you think of the trend of toolkits and quick-start frameworks that emphasized HTML5, CSS3 and mobile device support? Let us know in the comments.


Series Supported by Rackspace


rackspace

The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More About: css3, features, HTML5, web development series, zurb

For more Dev & Design coverage:





Twitter has started gradually rolling out a new, HTML5-based version of Twitter.com for the iPad.

Besides being fully HTML5-based, the new version utilizes the iPad’s touch screen and sports a two-column look — a welcome change from the current site design, which is far from perfect for browsing on a device such as the iPad.

The new version of the site will become available to device owners over the “next week or so,” Twitter tweeted.

Image courtesy of Yfrog, FlannaganTV

More About: HTML5, ipad, social media, twitter




Adobe released a public preview of Adobe Edge, its new web motion and interaction design tool, on Monday.

Edge enables users to create animated content using HTML5, CSS3 and JavaScript — not Flash. It’s the first professional-grade HTML5 editing tool on the market and is currently available for free, as the company is looking for feedback from developers.

Interestingly enough, Adobe Edge shares the name with Adobe’s free newsletter, which is bound to create some confusion among users.

The product, which relies on strict HTML standards and does not incorporate Flash, is not meant to replace existing web design tools like Dreamweaver or Flash, but to coexist with them, enhancing Adobe’s position as a leader in the future of Web infrastructure, especially as HTML5 becomes increasingly important in the world of mobile.

When Mashable spoke with Paul Gubbay, Adobe’s VP of design and web engineering, last September, he made it clear that the company is interested in supporting both platforms. The following month, Adobe launched a Flash-to-HTML5 converter, a first step towards supporting HTML5.

Adobe is further backing up that position with the launch of Adobe Edge, and promises fast-paced updates to the software to keep up with frequent changes to HTML5 itself.

Adobe released the video preview embedded below last month. Take a look, download it, test it out and let us know what you think about it.

[via VentureBeat]

More About: adobe, Adobe Edge, Flash, HTML5, trending, web design

For more Dev & Design coverage:

549-ie10-conditional-comments

Microsoft added many features to Internet Explorer over the years. Several revolutionized the web forever (XMLHttpRequest, the DOM, XML tools, font embedding, browser add-ons). Some never caught on. Some were truly awful.

The team intends to remove several of the less-successful legacy features in IE10 (perhaps they read #7 in 10 Ways Microsoft Could Make Us Love IE Again?) I suspect you’ve never coded XML Data Islands and Element Behaviors, but you’ve almost certainly used Conditional Comments. They’re about to disappear from IE forever.

Conditional Comments 101

Ensuring you web site or application works in all browsers is tough. It’s made particularly difficult when you have to support older editions of Internet Explorer. IE6 was released in 2001, IE7 in 2006, and IE8 appeared in 2009. Whatever your opinion of Microsoft, it’s unreasonable to expect a 10 year old browser to render the same as Firefox 5 or Chrome 12.

Web developers are particularly scathing about IE6. Many months are spent building fantastic web sites and applications only to find they break in IE6 at the eleventh hour. Fortunately:

  • IE6 bugs are well-documented and it’s possible to overcome the majority of issues — especially if you test early and often.
  • Microsoft provide Conditional Comments so developers can add custom CSS and script fixes which target a specific version of IE.

Examine the source of almost any HTML5 page and you’ll find this code in the head:


<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

It loads a shim in IE8 and below which allows the developer to style new HTML5 elements such as header, article, and footer. It’s not required in IE9 and other browsers with native HTML5 support — they ignore the script.

Conditional Comments are incredibly useful but, personally, I always felt a little uncomfortable using them:

  1. They smell a little like browser sniffing — which stinks.
  2. They’re rarely necessary. The majority of IE6 problems can be solved with a display:inline; here or a position:relative; there. While competing browsers don’t require those properties, they don’t have a negative impact other than a few bytes of extra bandwidth. I prefer my CSS properties in one place rather than distributed between two or more files.
  3. Conditional Comments are abused. I’ve had the misfortune to work on systems where developers created three or four separate stylesheets which targeted individual browsers. Simple property updates required changes to every file.

Why Remove Conditional Comments?

IE8 is normally well-behaved and you’ll only require the HTML5 shim (see above). With a few CSS3 exceptions, IE9 renders as well as any other browser. Hopefully, IE10 will catch-up — or even overtake — Firefox, Chrome, Opera and Safari.

Conditional Comments are not required. There’s no need for “[if IE 10]“ because pages will render (mostly) the same in all modern browsers.

That said, it’s not the end of feature detection and progressive enhancement. Not every browser supports CSS3 transformations, web sockets, geo-location and client-side storage. Even with support, the user can often disable or refuse permission for an operation.

In addition, Conditional Comments will not disappear from IE6, 7, 8 and 9. You can still target those browsers should the need arise but it will become less necessary over time.

I applaud Microsoft’s decision. It’s a bold move since they could have easy kept Conditional Comments and I suspect its removal will horrify some developers. However, the company is adhering to its “same markup” philosophy and ensuring HTML, CSS and JavaScript just work regardless of the browser or version.

It’s the right thing to do. Let’s hope the demise of ActiveX, Compatibility View and the old IE7 toolbars won’t be too far behind!