HTML5 Banner

There's a ƖіttƖе open web standards advocate іn аƖƖ οf υѕ

What does Opera’s switch to Webkit mean for HTML5?

| Filed under Browsers HTML5 Standards

Opera_512x512Opera, the Norwegian browser maker, announced last week they’re switching to Webkit as their rendering engine of choice (and to the V8 JavaScript engine). That may be good news for HTML5 and web standards.

 

One less vendor prefix

Opera abandoning their Presto engine means one less browser specific prefix, because -o is now dead. That means better standards in coding and writing less exceptions.

Add one tablespoon of Opera to Webkit..

Opera will now be contributing to Webkit/Chromium. In the past they were involved in many great ideas that are standards now, like HTML5, native video and media queries. And they were innovative with tabbed browsing, Speed Dial, mouse gestures and data compression, so you’ll bet they’ll be adding some great ideas to the open codebase.

Opera’s first contribution already happened: they submitted a change to Webkit to improve CSS multicolumn support. Thank you!

Three major players managing the direction of rendering

Webkit is now being improved upon by three powerful players on the web: Apple, Google and Opera. They will probably shape the future of the browser, as the dominance of Webkit on mobile devices is unmatched. Other browser makers, like Microsoft and Mozilla, will probably have to follow lead.

A lot of major players managing the direction of HTML5

The WHATWG, which maintains the HTML5 standard, was started as a venture between Apple, Mozilla and Opera. They even have Microsoft employees among their team. With this other group of major players managing the HTML5 standard, I think the future of web standards looks bright.

by Migo | tags : | 1

The HTML5 iframe sandbox attribute protects against framed threats

| Filed under HTML5

tweet-sandboxSome time ago I wrote about  html5rocks.com, a great website aimed at HTML5 developers. When I checked the site out the other day, my eye fell on a new property in HTML5 that puts iframes in a sandbox. When blocking is too strict and allowing is too broad, the sandbox attribute can put some restrictions on the actions that are allowed for an iframe.

Iframes can contain all sorts of code, so there’s always a potential risk for embedded malicious threats. Like The New York Times has experienced. What if, for instance, you really wanted to embed a cool widget in your website, but you’re not entirely sure if you can trust it. Here comes the HTML5 sandbox attribute into play.

Framed content, by default, doesn´t have access to the page’s DOM or locally stored data. But the framed content (page) still has a number of options for malicious behavior: it can autostart video, use plugins and *gasp* fire popups. The sandbox attribute enables the blocking of features that aren’t relevant to functionality we’d like to use.

Check out the main article for all the detailed info and code examples. The sandbox property is currently supported in all major browsers, except for Opera. I think it’s a nice feature which can make the web a little bit safer. Do you agree?

by Migo | tags : | 0

HTML5 specification complete, released as candidate recommendation

| Filed under HTML5 Standards

Big news for the HTML5 specification today, as the W3C announced it’s feature complete. Although not a standard yet, this is a big step towards a stable and broadly supported specification. The same is true for Canvas 2D. New features won’t be added, so developers can now target a stable specification and use HTML5 features without the fear they won’t be supported in the future.

The spec is expected to become a final standard in 2014 which will then mark the end of a process that started in 2004. HTML5 exists mainly because the Web Hypertext Application Technology Working Group (WHATWG) wasn’t happy with the World Wide Web Consortium’s (W3C) efforts on XHTML 2.0, which was bound to become the new standard language of the web. The WHATWG started working on their own standard and today we’re all very lucky they agreed to work together and the W3C abandoned XHTML 2.0 in favor of HTML5. You can imagine the chaos if two standards would be developed to let the market decide which one’s the best. That’s exactly what the web doesn’t need.

Standards

Work on HTML5.1 has begun

If you think all the focus has now shifted to debugging the candidate recommendation, you’re wrong. Work on HTML5.1 has already started, which is the new branch for new features. As in shiny new. Surely, browser makers will implement some new HTML5.1 features as soon as they’re announced and developers will use these new toys to create fantastic new things, so they’ll know what works and what doesn’t. By the time the HTML5 spec has become a standard, everybody will be longing for HTML5.1 because it enables new possibilities we all really need.

 

by Migo | tags : | 0

Responsive banner ads

| Filed under HTML5

ResponsiveLong time no hear, but here’s a new post for you. And although it’s old news, it’s great news nonetheless. Matthew James Taylor wrote a great article about creating responsive banner ads with HTML5. Yes, that’s one of the many advantages of using HTML5 for banners: they can be responsive. And responsive equals cool. But you’d know that by know.

How to make responsive banners

Matthew describes how to break out of the good old pixel and use fresh and juicy HTML5 mixed with some CSS3 media queries to make banners responsive. The trick is to create the ad as an HTML5 page and then embed it in a page by using an iframe. You set the banner dimensions by wrapping the iframe in a div and using media queries to give the div various widths and heights. Matthew has some code and working examples on his site, so go check it out!

Does it get any better than this?

Yes, here are some of the added benefits for using this technique:

  • Accessible banners, because you aren’t using images or Flash
  • Banners are actually normal web pages, so they can use any technique a web page can use (Javascript, forms anyone?)
  • Easy to make changes while the ad is running
  • Use your favorite familiar analytics software to track clicks and impressions
  • Smaller size means faster page loading

And with Swiffy, Google’s Flash to HTML5 conversion tool, now built into Adwords (see ‘Using Flash in your ad?’), it becomes more and more clear that HTML5 banners are the future of online advertising.

by Migo | tags : | 0

Dive into HTML5 with these free HTML5 resources and tutorials

| Filed under HTML5

Hold handsIf you want to learn more about HTML5 these resources are good starting points. Dive into HTML5 is a great resource by Mark Pilgrim. It talks about all the familiar subjects like canvas, video, forms, offline web apps and more.

W3schools also has some extensive info on the new standard. And you can try every example yourself with their code editor.

A lot more technical but as comprehensive as it can be is the web developer’s guide to HTML5.

Good old Sitepoint has a great archive of tutorials on subjects like using the geolocation api, HTML5 canvas and best practices for building HTML5 games.

Another quality HTML5 tutorial resource is HTML5 doctor. Their posts about semantics are very useful to get a better understanding of when you can and should use the various new elements.

If you know of any other good HTML5 resource drop it in the comments!

by Migo | tags : | 0

Google updates HTML5rocks.com

| Filed under HTML5

RocksGoogle just announced an update to their HTML5rocks.com website. The site is aimed at developers who want to learn more about HTML5. And to make their content better focused on different needs, they’ve split the tutorials in mobile, gaming and business.

Articles range from Keeping up with HTML5 and browser support to HTML5 techniques for optimizing mobile performance. And a lot of technical stuff in between.

I think the site does a great job at promoting HTML5 to developers. And the new design indeed rocks. Check out HTML5rocks.com.

 

by Migo | tags : | 1

Mozilla releases HTML5 Popcorn framework

| Filed under HTML5

Popcorn.jsMozilla has released Popcorn which is a framework to enable interactive web video. An example can be seen in the movie One Millionth Tower (requires Firefox or Chrome). The technology relies on HTML5 video, the Popcorn JavaScript framework and various web APIs. An example is a scene where the weather is dynamic; it pulls the actual weather data from  Yahoo’s Weather API to reflect it in the movie.

Video can also be augmented with data from Flickr, Wikipedia, Google Maps and dozens of other web services. Be sure to watch the demos and see a glimpse of the future of web video.

by Migo | tags : | 0

Adobe launches Adobe Edge to create HTML5 banners and animations

| Filed under HTML5

Adobe has announced a preview version of Adobe Edge: a “web motion and interaction design tool” that outputs HTML5, CSS3 and Javascript. That makes clear that even Adobe expects HTML5 will be used more and more for (complex) animations on the web.

Of course, the company sees HTML5 as “an opportunity”, but it becomes clear that HTML5 will be more and more important for animations and banners on the web. With this move Adobe just tries to be ahead of the curve.

In this video they create an animated butterfly and a pre-roll animation for a website:


Everybody can download Adobe Edge for free to test it and Adobe Labs has some free resources to preview the tool. The demos, while still a bit laggy, already show a glimpse of the future.

 

by Migo | tags : | 0

HTML5 spec will be complete in 2014, sooner than expected

| Filed under HTML5

It looks like we don’t have to wait until 2022 for the HTML5 specification to reach its final version. CNET reports that the W3C expects to finalize the HTML5 spec in about 3.5 years from now. They feel the need for speeding up the process, because web-related developments are going faster and faster.

Sounds like a smart and welcome move.

by Migo | tags : | 0

HTML5 is here to stay as an umbrella term

| Filed under HTML5

HTML5 logo by W3CDue to the recent news WHATWG  will be referring to HTML5 as just HTML, many people must have thought the end of the term HTML5 is near. I don’t think we need to ‘worry’ about this.

When Steve Jobs was talking about HTML5 when he was actually referring to some effects created with CSS3, we knew that the term HTML5 would encompass more that just the plain hyper text markup language. HTML5 has become a brand that defines a new set of technologies which will take the web further into the future.

Developers’ first reaction will be to object to the wrong use of the name of what’s supposed to be the new web standard. But HTML will be a living standard. I therefore completely agree with Jeffrey Zeldman who wrote:

…the business community’s confusion about what HTML5 actually means doesn’t matter so much, as long as they are clamoring for great sites, accessibly designed with web standards—and as long as developers know the difference between HTML5 and, say, CSS3.

W3C has updated their FAQ explaining that CSS3 is not part of the HTML5 standard. So we can all sit back and relax. Let the HTML5 innovation continue!

PS: Ofcourse, this is also a reassuring thought for certain websites using ‘html5′ in their domain names

by Migo | tags : | 1