Welcome back to "This Week in HTML 5," where I'll try to summarize the major activity in the ongoing standards process in the WHATWG and W3C HTML Working Group.

The big news this week is a major revamping of how browsers should process multimedia in the <audio> and <video> elements.

r2404 makes a number of important changes. First, the canPlayType() method has moved from the navigator object to HTMLMediaElement (i.e. a specific <audio> or <video> element), and it now returns a string rather than an integer. [canPlayType() discussion]

The canPlayType(type) method must return the string "no" if type is a type that the user agent knows it cannot render; it must return "probably" if the user agent is confident that the type represents a media resource that it can render if used in with this audio or video element; and it must return "maybe" otherwise. Implementors are encouraged to return "maybe" unless the type can be confidently established as being supported or not. Generally, a user agent should never return "probably" if the type doesn't have a codecs parameter.

Wait, what codecs parameter? That's the second major change: the <source type> attribute (which previously could only contain a MIME type like "video/mp4", which is insufficient to determine playability) can now contain a MIME type and a codecs parameter. As specified in RFC 4281, the codecs parameter specifies the specific codecs used by the individual streams within the audio/video container. The section on the type attribute contains several examples of using the codecs parameter.

Third, the <source type> attribute is now optional. If you aren't sure what kind of video you're serving, you can just throw one or more <source> elements into a <video> element and the browser will try each of them in the order specified [r2403] until it finds something it can play. [load() algorithm discussion] Of course, if you include a type attribute (and codecs parameter within it), the browser may use it to determine playability without loading multiple resources, but this is no longer required.

The final change (this week) to multimedia elements is the elimination of the start, end, loopstart, loopend, and playcount attributes. They are all replaced by a single attribute, loop, which takes a boolean. To handle initially seeking to a specific timecode (like the now-eliminated start attribute), the HTML 5 spec vaguely declares, "For example, a fragment identifier could be used to indicate a start position." This obviously needs further specification.

One multimedia-related issue that did not change in the spec this week is same-origin checking for media elements. Robert O'Callahan asked whether video should be allowed to load from another domain, noting (correctly) that it could lead to information leakage about files posted on private intranets. Chris Double outlines the issues and some proposed solutions. However, contrary to Chris' expectation, HTML 5 will not (yet) mandate cross-site restrictions for audio/video files. This is an ongoing discussion. [WHATWG discussion thread, Theora discussion thread]

In other news, Ian Hickson summarized the discussion around the <input placeholder> attribute (which I first mentioned in This Week in HTML 5 Episode 8) and committed r2409 that defines the new attribute:

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format.

For a longer hint or other advisory text, the title attribute is more appropriate.

The placeholder attribute should not be used as an alternative to a label.

User agents should present this hint to the user only when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control).

Read the section on the placeholder attribute for an example of its proper use.

Other interesting tidbits this week:

• Ian Hickson explains why the <link rev> attribute was dropped.
• Lots of feedback about the Web Workers draft.
• Lots of feedback about the WebSocket interface.
• r2413 adds a resolveURL() method to the window.location object. [resolveURL() discussion]
• r2406 defines negative pixelratio.
• r2407 defines how often browsers should fire the timeupdate event while playing audio or video.
• r2416 simplifies the content model of the <menu> element. [<menu> discussion]

Around the web:

• The W3C published an editor's draft of Lachlan Hunt's Web Developer's Guide to HTML 5.
• Austin Chau posted a demo of HTML 5 cross-document messaging. Further discussion: Using HTML5 postMessage, postMessage API changes, and the unfortunately-named xssinterface library which implements a postMessage-like API in browsers that do not yet support it.
• Ryan Tomayko posted an excellent summary of things caches do, specifically HTTP caches like Squid and rack-cache.
• Joe Clark posted This is How the Web Gets Regulated, a call to action on video accessibility.
• mv_embed is a GPL-licensed Javascript shim that takes <video> elements that point to Ogg Theora video files and replaces them with plugin-specific markup to play the video through oggplay, vlc-plugin, Java cortado, mplayer, Totem, or Apple Quicktime (if Xiph's Ogg Theora Quicktime component is installed). A demo page demonstrates the technique.
• Everyone should go admire my new dog Beauregard, then scroll down to read "dave"'s non-Beau-related but extremely interesting comment on an experimental Ogg Theora video encoder. From there, I learned about this Ogg Vorbis audio decoder written in pure ActionScript (Flash), leading to the tantalizing but as-yet-unrealized possibility of a Javascript shim like mv_embed that could take <audio> elements that point to Ogg Vorbis audio files and replace them with a Flash wrapper that could play the audio file, even in browsers that do not support the <audio> element or the Ogg Vorbis audio codec.

Tune in next week for another exciting episode of "This Week in HTML 5."

Here’s a snapshot of the last few weeks’ worth of YUI Library news from around the web. As always, please let us know in the comments section about what we’ve missed and we’ll make sure to include it in the next update.

• Yahoo Reinvents the Web Portal: There was a lot of coverage of Nicholas C. Zakas’s YUIBlog piece in which he talked about working with us to make YUI 3 the foundation for the new Yahoo Front Page, which is currently in bucket testing.  Stan Schroeder of Mashable writes: “Want to know what the future for big web portals will look like? Yahoo’s developer team might just have an answer. Using…[a] YUI 3-based framework, they’re working on a new front page that will enable extensive customization for users; developers, on the other hand, will be able to create third party applications for the page.”  Dion Almaer of Ajaxian writes: “They are currently testing the new home page out, but having it use the latest and greatest dogfood on a web page as trafficked as the Y! home page is a big deal. Save a few bytes here or there and you are talking serious benefits.”
• WebMonkey Tutorial — Create Rich Interfaces With the YUI Library: WebMonkey produced an outstanding introductory tutorial on YUI last week, definitely worth checking out.  According to the Monkey: “The line between web and desktop applications is fading. Users now expect a richer experience. JavaScript can help provide interfaces and interactions that mimic the desktop. In this tutorial, I’ll introduce you to the JavaScript-based Yahoo User Interface Library. We’ll use it to convert normal HTML into more interactive controls.  Best of all, Yahoo’s library is open-source and has been released under a BSD license, so it’s free for all users.”
  
• Welcome to YUIAsp.Net: Reader raul writes in about a new project that marries YUI and Microsoft .NET: “YUIAsp.Net is the place to get the complete suite of YUIAsp.Net — Yahoo! UI Library(YUI) ASP NET controls for your web applications.  As you [can] see from the documentation and from the live demo, they are extremely fast, flexible and easy to use. Just drag them from the toolbox, customize the behaviour, and you’re set to go.  The next best thing about the YUIAsp.Net is that it’s FREE. You can choose to download just the binaries, you you can also get the sources for the controls, free of charge.” (Original source.)
• How to Prevent Race Conditions when Loading CSS with the YUI Get Utility: Yahoo! Search engineer Ryan Grove writes on his personal blog, wonko.com, about discerning when CSS files loaded with YUI’s Get Utility are fully loaded: “The YUI Get Utility makes it easy to dynamically load CSS and JavaScript on demand, but there’s one tiny gotcha: Firefox, Safari, and other Gecko/WebKit-based browsers don’t provide a reliable way to tell when a CSS file has finished loading. As a result, when you load CSS in one of these browsers using the Get.css() method, the onSuccess callback is fired instantly.  In many cases this isn’t a problem, but if you need to ensure that you don’t perform an action (such as appending HTML to the page) until after the CSS has loaded, this can cause a race condition. There’s no way for the Get Utility to automatically work around this problem, but with a little bit of extra effort on our part, we can work around it ourselves.”  Click through to read Ryan’s full solution.
• Choosing Multiple Color Values Bound to Text Inputs Using a Single Color Picker Instance: Bret Levy has augmented his YUIHelp site with another nice tutorial, this time covering the YUI Color Picker Control.  Writes Bret: “What most people find they want to do is have multiple colorpicker popups on a page, and furthermore, have ‘linked’ user input fields for each input (to show the current RGB color, for example). In doing so, it is important to consider the efficiency of the solution, specifically, it is desirable to have a single colorpicker ‘widget’.”
  
• More “Sheets”-style Simple Dialogs: Eric Ferraiuolo saw Matt Snider’s sheets-style Dialogs in the last “In the Wild” post and wanted to follow up with a version that, he hoped, would be more similar to the OS X model (which wasn’t Matt’s specific goal).  Here’s what Eric came up with — a slick sheets implementation based on the YUI Simple Dialog. (Original source.)
  
• Intelligent YUI Resource Loading with YUI Loader: YUI author Dan Wellman has a new (pay-to-download) article up on DMXZone that treats Adam Moore’s YUI Loader Utlity.  This $3.20 resource follows up on his piece on YUI Get and delves into the power of YUI Loader.  Writes Dan: “YUI Get will indiscriminately get the files you specify but the big difference with YUI loader is that it has been designed to specifically get YUI files. YUI Loader is an intelligent utility that saves you having to include or specify all of the necessary individual files and dependencies for any component; you simply tell it the component(s) you wish to use and it looks at what YUI content exists on the page, and then adds anything else need to make the component work.”
• Paginating Data with CakePHP and Yahoo! User Interface DataTable: CakePHP’s Bakery blog has a fantastic new tutorial on building paginated DataTables using CakePHP and YUI’s DataTable and Paginator controls.
  
• Example YUI Image Upload with YUI 2.6.0: All My Brain has updated its image upload example for YUI Rich Text Editor to support RTE’s 2.6.0 GA release. This example shows you how to add an upload dialog into the RTE’s image properties palette. (Original source.)
• Two New Connection Manager Tutorials from “Share As I Learn”: Blogger Veeru has written two Connection Manager tutorials on his Share as I Learn blog. (Connection Manager, written by YUI founder Thomas Sha, is YUI’s AJAX component.)  The first tutorial is entitled “Using YUI Connection Manager“; the second is “YUI Connection Manager with JSON for Dummies Like Me.”
• BigTweet: BigTweet is a bookmarklet that helps you post to Twitter.
• YUI-based Newsticker: This is an old script, but we missed it when it came out and caught it via Snipplr’s repost — a YUI-based scrolling newsticker widget. (Original source.)
• YUI Sightings — MTBCalendar: MTBCalendar,  “a free service for discovering, organizing and sharing your mountain bike racing season,” has been updated to use YUI CSS Grids. (Original source.)
  

Tags: yui

vanderwal posted a photo:

- Camera phone upload powered by ShoZu

The AWS ecosystem grew again today, when Capgemini announced that they will collaborate with Amazon Web Services by forming a new Center of Excellence focused on Cloud Computing—and AWS in particular. This means that Capgemini will have a team of Amazon Web Services-trained professionals, located in North America, Europe and India, to provide a variety of services. They will initially focus on three enterprise use cases: Microsoft SharePoint in the cloud, Oracle ERP in the cloud, and Application Development and Testing in the cloud. Capgemini is headquartered in Paris, France and operates in more than 36 countries with 86,000 people in North America, Europe, and the Asia Pacific region.

Ecosystems are important. In traditional computing environments a healthy ecosystem includes ISVs, Solution Integrators, and Solution Providers—just to name a few. We’re starting to see the same ecosystem form around Amazon Web Services, which not only validates the platform: it provides value to Enterprise customers who want to move their operations into the cloud.

You can read the complete press release here.

Mike

Attention, répondez sans chercher les réponses en ligne, sinon cela ne sert à rien...

1. Qui hébergeait un des tous premiers serveurs d'images de charme dès début 1994 ?
2. Quel est le nom du premier navigateur web graphique jamais sorti ?
3. Quel a été le premier easter egg de l'histoire des navigateurs ?
4. Qui est l'auteur du premier musée en ligne ?
5. De quelle année date l'introduction en HTML de l'élément <frame> ?
6. Le Web a deux inventeurs. Presque tout le monde connait le nom du premier, Tim Berners-Lee, mais quel est le nom du second ?
7. Quel est le premier navigateur (et quelle version de ce navigateur) à avoir implémenté partiellement les CSS 1 ?
8. Que veut dire MIME ?
9. Qui a géré le premier annuaire en ligne de serveurs français ?
10. Qui est l'auteur du premier site en ligne de revues d'hôtels, restaurants et bars ?

Réponses demain...

Elsevier, the world’s leading publisher of science and health information, has announced the Article 2.0 Contest, which invites developers to create innovative applications related to scientific journals and articles using the Elsevier Article 2.0 API. The contest runs through December 31, and offers prizes of $4000, $2000, and $1000 (US) to three contest winners.

The REST-based Elsevier Article API provides methods for searching for scientific journals, articles, issues and images. The full text of articles is returnable in XML format. On their site, Elsevier has provided a set of sample applications to help developers get started in developing their applications. For more see our Elsevier Article API profile.

In a look at the contest, Kent Anderson of the Society for Scholarly Publishing, argues that the contest rules are overly constraining. One limitation is that the contestants will have access to a database of only 7500 articles. Still, Kent sees positives as well:

The judges are very well-selected — that’s the most reassuring part of this. Elsevier as an organization has been doing many impressive things lately, experimenting much more openly.

Scientific publishing is an well established business, grounded in traditions dating back a long time. Elsevier’s Article 2.0 contest opens the door for developers to have an impact on the future of scientific publishing, and earn cash prizes and recognition at the same time.

Share This

A few months ago I talked about our plans to create and offer a service for content delivery. That service is called Amazon CloudFront and it is ready now!

Like all of our other services, CloudFront was designed with ease of use in mind from the very beginning.  There are no minimum usage commitments, no monthly fees, and no need to even talk to us. Here's what you do:

1. Sign up for CloudFront.
2. Put your most frequently accessed static content into an Amazon S3 bucket and mark it as publicly readable.
3. Create a new CloudFront Distribution using a single REST-style POST call. Capture the domain name returned by the call.
4. Generate fresh URLs for your content using the domain name from step 3 and hand them out. By using our CNAME support you can even make the content appear as if it is coming from your own domain. You can associate up to 10 CNAMEs with each distribution.

CloudFront will take care of the rest. Requests originating anywhere in the world will be routed to one of 14 edge locations (8 in the United States, 4 in Europe, and 2 in Asia). If the content isn't already present at a particular edge location it will be fetched from S3 and cached at the edge.

You will be charged based on the number of requests that you make and the amount of data that you transfer. Pricing is covered in depth on the detail page. Because our costs vary by location, pricing for data served from edge locations outside of the US varies, and is currently slightly higher. You will also pay the usual S3 price for the "origin fetch" which take place when a requested object is transferred from S3 to an edge location, and for storage of the object in S3.

We are looking forward to seeing how this is put to use. It is certainly going to be used to host software downloads, frequently accessed website components, and media files. However, as is often the case with these new services, developers will find new and unique ways to put it to use before too long.

Our friends across the lake at Smartsheet have put together a nice worksheet which documents and generalizes the work that they did to support CloudFront in their own product.

Remarkably enough, parts of that website are already served up from CloudFront! You can use this worksheet to assign tasks to your developers, review the status of the tasks, and much more.

We've got plenty of CloudFront documentation including a Getting Started Guide,  a Developer Guide, an FAQ, and even a Quick Reference Card.

Tool and library vendors have been working to support CloudFront in their products. I'll update this post as I learn more.

Updates:

1. Amazon's Werner Vogels has written a bit more in his new post, Expanding the Cloud: Amazon CloudFront.
2. Thorsten from RightScale has written an informative review.
3. A beta version of  Bucket Explorer with CloudFront support is now available. More details here (pictured at right is their new support for creating a CloudFront distribution).
4. A new version of the S3 Fox Organizer, with CloudFront support and some other improvements, is now available.
5. The Digital Inspiration blog has a helpful post, How to Setup Amazon S3 with CloudFront as a Content Delivery Network.
6. A number of sites have already put CloudFront into action including Woot, Playfish Games, Paessler, Wolfire Games, and (as noted above), Smartsheet. Blogger Tim Linden is already using CloudFront to host his videos and static content.
7. The newest release of the Boto library now supports CloudFront. Boto provides a Python interface to S3, SQS, EC2, SimpleDB, Mechanical Turk, and CloudFront.

-- Jeff;

Mathworks released a whitepaper on how to run MATLAB parallel computing products - Parallel Computing Toolbox and MATLAB Distributed Computing Server on Amazon EC2. This step by step guide walks you through the steps of installation, configuration and setting up clustered environments using these licensed products from MathWorks on Amazon EC2. It shows how you can create an AMI with MATLAB products bundled in and run them in the cloud.

Whitepaper is available free on Mathworks website:

MATLAB users will learn about the key aspects of using the EC2 service from their desktop MATLAB session and using Parallel Computing Toolbox to send parallel MATLAB computations to the EC2 service.

System administrators will learn the key technical details required for setting up MATLAB Distributed Computing Server on the EC2 service, including licensing and network setup. They will also learn how to configure their users’ desktops to enable the use of the EC2 service for MATLAB computations.

This is the 'Era of Tera'. We have terabytes of data to compute. Data is never going to be less. Parallel Computing models are the answer to the future. Cloud Computing is making it easier for the masses.

I am very excited because this is going to open up powerful MATLAB tools to any developer for not only research but also production applications. Students might be able to do their lab exercises without a lab and impress their professors by turning in the assignments before time. Professors will be able to teach courses using MATLAB by "turning on" a switch that creates their "Instant Labs" for the duration of the course without even contacting the College IT department for resources. Enteprises might be able to crunch the complex BI data over the weekend for a monday morning meeting.

Also, Mathworks Consulting and Support is available for those who are starting up with a MATLAB project on Amazon EC2.

Do you have a cool MATLAB usecase?

-- Jinesh

Simmy's tweet yesterday exposed a scenario we all encounter:

What are the best practices for including or excluding punctuation within an anchor tag?

Here's an example:

Blind accessibility consultant Aaron Cannon and co-worker Aaron Barker have authored “JavaScript and screen readers”.

Which of the following is the proper way to link up the article, and why?

Study the differences closely, and then cast your vote (or suggest an alternative) with a supporting argument.

"I hope to see the day when nobody is employed in developing or promoting proprietary software".

Do I really need to say who's the author?....

There are lots of great JavaScript libraries out there. Prototype is one of the best and it ships along Rails as the default choice for adding Ajax to your application.

Does that mean you have to use Prototype if you prefer something else? Absolutely not! Does it mean that it's hard to use something else than Prototype? No way!

It's incredibly easy to use another JavaScript library with Rails. Let's say that you wanted to use jQuery. All you would have to do is add the jQuery libraries to public/javascripts and include something like this to the in your layout to include the core and ui parts:

<%= javascript_include_tag "jquery", "jquery-ui" %>

Then say you have a form like the following that you want to Ajax:

<% form_for(Comment.new) do |form| %>

  <%= form.text_area :body %>

  <%= form.submit %>

<% end %>

By virtue of the conventions, this form will have an id of new_comment, which you can decorate with an event in, say, application.js with jQuery like this:

$(document).ready(function() {

  $("#new_comment").submit(function() {

    $.post($(this).attr('action') + '.js', 

      $(this).serializeArray(), null, 'script');

 

    return false;

  });

});

This will make the form submit to /comments.js via Ajax, which you can then catch in the PostsController with a simple format alongside the HTML response:

def create

  @comment = Post.create(params[:comment])

 

  respond_to do |format|

    format.html { redirect_to(@comment) }

    format.js

  end

end

The empty format.js simply tells the controller that there's a template ready to be rendered when a JavaScript request is incoming. This template would live in comments/create.js.erb and could look something like:

$('#comments').append(

  '<%= escape_javascript(render(:partial => @comment)) %>');

$('#new_comment textarea').val("");

$('#<%= dom_id(@comment) %>').effect("highlight");

This will append the newly created @comment model to a dom element with the id of comments by rendering the comments/comment partial. Then it clears the form and finally highlights the new comment as identified by dom id "comment_X".

That's pretty much it. You're now using Rails to create an Ajax application with jQuery and you even get to tell all the cool kids that your application is unobtrusive. That'll impress them for sure :).

Rails loves all Ajax, not just the Prototype kind
This is all to say that the base infrastructure of Rails is just as happy to return JavaScript made from any other package than Prototype. It's all just a mime type anyway.

Now if you don't want to put on the unobtrusive bandana and instead would like a little more help to define your JavaScript inline, like with remote_form_for and friends, you can have a look at something like jRails, which mimics the Prototype helpers for jQuery. There's apparently a similar project underway for MooTools too.

So by all means use the JavaScript library that suits your style, but please stop crying that Rails happens to include a default choice. That's what Rails is. A collection of default choices. You accept the ones where you don't care about the answer or simply just agree, you swap out the ones where you differ.

Update: Ryan Bates has created a screencast that shows you how to do the steps I outlined above and more.

See the Rails Myths index for more myths about Rails.

Ruby on Rails has been around for more than five years. It's only natural that the public perception of what Rails is today is going to include bits and pieces from it's own long history of how things used to be.

Many things are not how they used to be. And plenty of things are, but got spun in a way to seem like they're not by people who had either an axe to grind, a competing offering to push, or no interest in finding out.

So I thought it would be about time to set the record straight on a number of unfounded fears, uncertainties, and doubts. I'll be going through these myths one at the time and showing you exactly why they're just not true.

This is not really to convince you that you should be using Rails. Only you can make that choice. But to give you the facts so you can make your own informed decision. One that isn't founded in the many myths floating around.

• Myth #1: Rails is hard to deploy
• Myth #2: Rails is expected to crash 400 times/day
• Myth #3: Rails forces you to use Prototype
• Myth #4: Rails is a monolith
• Myth #5: Rails is hard because of Ruby
• Myth #6: Rails only speaks English

It used to be somewhat inconvenient to deal with UTF-8 in Rails because Ruby's primary method of dealing with them was through regular expressions. If you just did a naïve string operation, you'd often be surprised by results and think that Ruby was somehow fundamentally unable to deal with UTF-8.

Take the string "Iñtërnâtiônàlizætiøn". If you were to do a string[0,2] operation and expected to get the two first characters back, you'd get "I\303" because Ruby operated on the byte level, not the character level. And UTF-8 characters can be multibyte, so you'd only get 1.5 characters back. Yikes!

Rails dealt with this long ago by introducing a character proxy on top of strings that is UTF-8 safe. Now you can just do s.first(2) and you'll get the two first characters back. No surprises. Everything inside of Rails uses this, so validations, truncating, and what have you is all UTF-8 safe.

Not only that, but we actually assume that all operations are going to happen with UTF-8. The default charset for responses sent with Rails is UTF-8. The default charset for database operations is UTF-8. So Rails assumes that everything coming in, everything going out, and all that's being manipulated is UTF-8.

This is a long way of saying that Rails is perfectly capable of dealing with all kinds of international texts that can be described in UTF-8. The early inconveniences of Ruby's regular expression-based approach has long been superseded. You need no longer worry that Rails doesn't speak your language. Basecamp, for example, has content in some 70+ languages at least. It works very well.

But what about translations and locales?
It was long a point of contention that Rails didn't ship with a internationalization framework in the box. There has, however, long been a wide variety of plugins that added this support. There was localize, globalize, and many others. Each with their own strengths and tailored to different situations.

All these plugins have powered Rails applications in other languages than English for a long time. Some made it possible to translate strings to multiple languages, others just made Rails work well for one other given language. But whatever your translation need was, there was probably a plugin out there that did it.

But obviously things could be better and with Rails 2.2 we've made them a whole lot more so. Rails 2.2 ships with a simple internationalization framework that makes it silly easy to do translations and locales. There's a dedicated discussion group, wiki, and website for getting familiar with this work. I've been using it in a test with translating Basecamp to Danish and really like what I'm seeing.

So in summary, Rails is very capable of making sites that need to be translated into many different locales. Before Rails 2.2, you'd have to use one of the many plugins. After Rails 2.2, you can use what's in the box for most cases (or add additional plugins for more exotic support).

Don't forget about time zones!
Dealing well with content in UTF-8 and translating your application into many languages goes a long way to make your application ready for the world, but most sites also need to deal with time. When you deal with time in a global setting, you also need to deal with time zones.

I'm incredibly proud of the outstanding work that Geoff Buesing lead for the implementation of time zones in Rails 2.1. It's amazing how Geoff and team were able to reduce something so complex to something so simple. And it shows the great power of being an full-stack framework. Geoff was able to make changes to Rails, Action Pack, and Active Record to make the entire experience seamless.

To lean more about time zones in Rails, see Geoff's tutorial or watch the Railscast on Time Zones.

See the Rails Myths index for more myths about Rails.